:root { --bg:#fff; --fg:#14181f; --muted:#5b6472; --card:#f4f6fa; --brand:#1e6fe8; --err:#c62828; }
@media (prefers-color-scheme: dark) { :root { --bg:#0f131a; --fg:#e8ecf3; --muted:#9aa4b2; --card:#181e29; --brand:#5b9bff; --err:#ff8a80; } }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, sans-serif; background:var(--bg); color:var(--fg); line-height:1.5; }
header, footer { padding:14px 20px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
header { justify-content:space-between; border-bottom:1px solid var(--card); }
footer { border-top:1px solid var(--card); color:var(--muted); font-size:.9rem; margin-top:40px; }
a { color:var(--brand); }
main { max-width:520px; margin:0 auto; padding:24px 20px; }
.card { background:var(--card); border-radius:12px; padding:20px; }
label { display:block; margin-top:12px; font-size:.9rem; color:var(--muted); }
input { width:100%; padding:12px; margin-top:4px; border-radius:8px; border:1px solid var(--muted); background:var(--bg); color:var(--fg); font-size:1rem; }
button { width:100%; margin-top:16px; padding:12px; border:0; border-radius:8px; background:var(--brand); color:#fff; font-size:1rem; cursor:pointer; }
button:disabled { opacity:.6; cursor:default; }
.msg { margin-top:12px; color:var(--err); } .ok { color:var(--brand); }