:root { color-scheme: light dark; --bg:#f4f4f5; --card:#fff; --ink:#18181b; --mut:#71717a; --line:#d4d4d8; --red:#c8001a; }
@media (prefers-color-scheme: dark) { :root { --bg:#111113; --card:#1c1c1f; --ink:#f4f4f5; --mut:#a1a1aa; --line:#3f3f46; } }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; background:var(--bg); color:var(--ink); font:15px/1.45 "Segoe UI",system-ui,sans-serif; padding:16px; }
.card { background:var(--card); padding:32px; border-radius:12px; width:min(360px,100%); display:grid; gap:14px; justify-items:start; border:1px solid var(--line); }
h1 { margin:6px 0 0; font-size:22px; } .sub { margin:-10px 0 4px; color:var(--mut); }
label { display:grid; gap:4px; width:100%; font-size:13px; color:var(--mut); }
input { padding:10px; border:1px solid var(--line); border-radius:8px; font:inherit; background:transparent; color:var(--ink); width:100%; }
input:focus { outline:2px solid var(--red); outline-offset:-1px; }
button { width:100%; padding:11px; border:0; border-radius:8px; background:var(--red); color:#fff; font:600 15px inherit; cursor:pointer; }
.err { margin:0; color:var(--red); font-size:14px; }