:root { color-scheme: dark; font-family: system-ui, sans-serif; color: #e8eff4; background: #14202a; }
* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(100%, 720px); margin: 0 auto; padding: 28px 20px 48px; line-height: 1.65; }
h1 { color: #ffd363; font-size: clamp(25px, 6vw, 34px); line-height: 1.2; margin: 22px 0; }
h2 { font-size: 19px; line-height: 1.35; margin: 0 0 14px; }
p { margin: 12px 0; overflow-wrap: anywhere; }
a { color: #a9deff; text-underline-offset: 3px; }
.brand { font-size: 14px; color: #c9d6df; }
section { margin-top: 24px; padding: 20px; border: 1px solid #465462; border-radius: 14px; background: #1b2935; }
label { display: block; margin: 18px 0 7px; font-weight: 600; }
input { width: 100%; min-height: 48px; padding: 11px 12px; color: #f4f7fb; background: #0f1b24; border: 1px solid #728391; border-radius: 8px; font: inherit; }
button { width: 100%; min-height: 48px; margin-top: 15px; padding: 12px 16px; border: 1px solid transparent; border-radius: 8px; background: #ffd363; color: #18212a; font: inherit; font-weight: 700; cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
button.secondary { background: transparent; color: #c7e9ff; border-color: #728391; }
button.danger { background: #faafa9; color: #421210; }
:focus-visible { outline: 3px solid #82d5ff; outline-offset: 3px; }
.hint, .account-id { color: #bdcbd6; font-size: 14px; }
.account-id { font-family: ui-monospace, monospace; overflow-wrap: anywhere; }
.status { padding: 15px 0; color: #ffd98b; }
.status[data-kind="success"] { color: #a9e9bf; }
.status[data-kind="error"] { color: #ffc2bc; }
code { color: #fff1ba; }
footer { margin-top: 32px; font-size: 14px; }
[hidden] { display: none !important; }
@media (max-width: 360px) { main { padding: 20px 14px 36px; } section { padding: 16px; } }