:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #101923; color: #eee9df; }
* { box-sizing: border-box; }
body { margin: 0; padding: max(24px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom)); }
main { max-width: 680px; margin: 5vh auto; }
.eyebrow { color: #c0a977; font-size: 13px; letter-spacing: .14em; }
h1 { font-size: clamp(25px, 6vw, 34px); margin: 14px 0; }
.description { color: #b7c2cc; line-height: 1.65; }
#status { padding: 14px 16px; border: 1px solid #526475; border-radius: 8px; line-height: 1.5; overflow-wrap: anywhere; }
label { display: block; margin: 20px 0 8px; }
input, button, a { font: inherit; }
input { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #687b8d; border-radius: 8px; background: #152330; color: inherit; font-size: 16px; }
button, .actions a { min-height: 48px; border: 1px solid #687b8d; border-radius: 8px; padding: 12px 16px; background: #1d3040; color: inherit; cursor: pointer; text-decoration: none; }
button:hover, .actions a:hover { background: #30495b; }
:focus-visible { outline: 3px solid #e3c286; outline-offset: 3px; }
button:disabled { opacity: .6; cursor: wait; }
.accounts { display: grid; gap: 10px; margin: 16px 0; }
.account { display: flex; align-items: center; justify-content: space-between; gap: 14px; text-align: left; width: 100%; }
.account strong { overflow-wrap: anywhere; }
.account span { color: #c7d4dd; font-size: 14px; flex-shrink: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
[hidden] { display: none !important; }