:root { color-scheme: light dark; --bg:#f4f5f7; --surface:#fff; --text:#17191d; --muted:#555b65; --line:#c6cad0; --accent:#b63f05; --button:#f56619; --danger:#b42332; }
@media(prefers-color-scheme:dark) { :root { --bg:#101113; --surface:#191b1f; --text:#f5f5f5; --muted:#b7bcc5; --line:#555b65; --accent:#ffad80; --danger:#ff9b9b; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:1rem/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; padding:24px max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }
main { max-width:70ch; margin:32px auto; }
main.account { max-width:440px; background:var(--surface); padding:28px; border-radius:16px; }
.brand { font-size:1.25rem; font-weight:800; color:var(--text); text-decoration:none; }
h1 { font-size:1.8rem; line-height:1.2; margin:28px 0 16px; text-wrap:balance; }
h2 { font-size:1.25rem; line-height:1.35; margin:32px 0 12px; }
p { overflow-wrap:anywhere; }
a { color:var(--accent); text-underline-offset:3px; }
a:hover { text-decoration-thickness:2px; }
nav { margin-top:12px; }
label { display:block; font-weight:650; margin-top:20px; margin-bottom:6px; }
input { display:block; width:100%; font:inherit; color:inherit; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:12px; caret-color:var(--accent); }
button { font:inherit; cursor:pointer; min-height:44px; padding:10px 14px; border:1px solid var(--line); border-radius:10px; color:var(--text); background:var(--surface); }
button:hover:not(:disabled) { border-color:var(--accent); }
button:active:not(:disabled) { transform:translateY(1px); }
button:disabled { opacity:.6; cursor:wait; }
.primary { margin-top:24px; width:100%; background:var(--button); color:#17191d; font-weight:750; border-color:transparent; }
#resend { margin-top:20px; width:100%; }
#description,#back { color:var(--muted); }
#error { color:var(--danger); }
#result { font-weight:650; }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
::selection { background:var(--button); color:#17191d; }
footer { display:flex; flex-wrap:wrap; gap:12px 20px; border-top:1px solid var(--line); margin-top:32px; padding-top:20px; }
[hidden] { display:none!important; }
@media(max-width:380px) { main.account { padding:20px; } }