:root { color-scheme: light dark; --bg:#f6f7f9; --card:#fff; --text:#1d2330; --muted:#5d6675; --line:#dfe3ea; --accent:#2a5bd7; --bad:#b42318; }
@media (prefers-color-scheme: dark) { :root { --bg:#12151b; --card:#1b2029; --text:#e8ebf1; --muted:#9aa3b2; --line:#2b3240; --accent:#7aa2ff; --bad:#ff8a80; } }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; background:var(--bg); color:var(--text); font:15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
.card { width:min(380px, 92vw); background:var(--card); border:1px solid var(--line); border-radius:14px; padding:32px 28px; text-align:center; }
h1 { font-size:20px; margin:0 0 6px; }
.sub { color:var(--muted); margin:0 0 22px; }
.msg { margin:0 0 18px; color:var(--muted); }
.msg.error { color:var(--bad); }
.btn { display:inline-block; padding:10px 18px; border-radius:8px; border:1px solid var(--line); color:var(--text); text-decoration:none; font-weight:600; }
.btn:hover, .btn:focus-visible { border-color:var(--accent); outline:none; }