:root { --bg:#eef1f5; --panel:#fff; --ink:#17202c; --ink-2:#4a5669; --line:#cdd5e0; --accent:#2f7fb0; --err:#b43c3c; color-scheme: light; }
@media (prefers-color-scheme: dark) { :root { --bg:#151b24; --panel:#1c2430; --ink:#e4e9f0; --ink-2:#aab5c4; --line:#2e3a4b; --accent:#5aa9d6; --err:#e07070; color-scheme: dark; } }
* { box-sizing: border-box; }
body { margin:0; min-height:100dvh; display:grid; place-items:center; background:var(--bg); color:var(--ink); font:16px/1.5 "Atkinson Hyperlegible Next", system-ui, sans-serif; padding:16px; }
form { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:24px; width:min(380px,100%); }
h1 { margin:0 0 4px; font-size:22px; }
p { margin:0 0 16px; color:var(--ink-2); font-size:15px; }
label { display:block; font-size:14px; color:var(--ink-2); margin:12px 0 4px; }
input { width:100%; font:inherit; color:inherit; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:9px 11px; }
button { margin-top:18px; width:100%; font:inherit; font-weight:700; background:var(--accent); color:#fff; border:0; border-radius:8px; padding:10px; cursor:pointer; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
#err { color:var(--err); margin:12px 0 0; min-height:1.5em; }