:root { --bg:#f6f5f2; --fg:#1d1f22; --muted:#5b6068; --card:#fff; --line:#dedbd3; --accent:#2f5d8a; --err:#a8322d; --ok:#2d7a4a; }
@media (prefers-color-scheme: dark) { :root { --bg:#16181b; --fg:#e8e6e1; --muted:#9aa0a8; --card:#1f2226; --line:#33373d; --accent:#7fb0e0; --err:#e6817b; --ok:#7cc796; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif; }
main { max-width:40rem; margin:0 auto; padding:2.5rem 1rem 4rem; }
h1 { font-size:1.6rem; margin:0 0 .25rem; } h2 { font-size:1.15rem; margin-top:2rem; }
.brand { color:var(--muted); font-size:.9rem; letter-spacing:.04em; text-transform:uppercase; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:1.25rem; margin-top:1.5rem; }
label { display:block; font-weight:600; margin-bottom:.35rem; }
input { width:100%; font:inherit; padding:.6rem .7rem; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg); }
button { margin-top:.9rem; font:inherit; font-weight:600; padding:.6rem 1.1rem; border:0; border-radius:6px; background:var(--accent); color:#fff; cursor:pointer; }
button:disabled { opacity:.5; cursor:default; }
.muted { color:var(--muted); font-size:.92rem; } .err { color:var(--err); } .ok { color:var(--ok); font-weight:600; }
[hidden] { display:none !important; }