:root { --bg:#f4f6f9; --card:#fff; --text:#1c2430; --muted:#6a7686; --line:#dbe1e9; --accent:#2563eb; --bad:#c0392b; }
@media (prefers-color-scheme: dark) { :root { --bg:#10151c; --card:#18202a; --text:#e6ebf2; --muted:#93a0b2; --line:#283240; --accent:#5b8def; --bad:#ff6b5e; } }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; background:var(--bg); color:var(--text); font:16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { width:min(380px, calc(100vw - 32px)); background:var(--card); border:1px solid var(--line); border-radius:14px; padding:28px; box-shadow:0 8px 30px rgba(0,0,0,.08); }
h1 { margin:0; font-size:1.5rem; letter-spacing:.2px; }
.sub { margin:2px 0 20px; color:var(--muted); }
label { display:block; margin-bottom:14px; font-size:.9rem; color:var(--muted); }
input { display:block; width:100%; margin-top:6px; padding:10px 12px; font:inherit; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:8px; }
input:focus { outline:2px solid var(--accent); outline-offset:1px; }
button { width:100%; padding:11px; font:inherit; font-weight:600; color:#fff; background:var(--accent); border:0; border-radius:8px; cursor:pointer; }
button:hover { filter:brightness(1.08); }
.msg { min-height:1.4em; margin:12px 0 0; color:var(--bad); font-size:.9rem; }