:root { --bg:#131722; --card:#1e222d; --text:#d1d4dc; --muted:#8a91a0; --accent:#2962ff; --err:#ef5350; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg:#f0f3fa; --card:#fff; --text:#131722; --muted:#5d6572; } }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; background:var(--bg); color:var(--text); font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; padding:16px; }
.card { width:100%; max-width:360px; background:var(--card); border-radius:12px; padding:28px 24px; box-shadow:0 8px 30px rgba(0,0,0,.35); }
h1 { margin:0 0 4px; font-size:22px; font-weight:600; } h1 span { color:var(--muted); font-weight:400; }
.sub { margin:0 0 20px; color:var(--muted); }
label { display:block; font-size:13px; color:var(--muted); margin-bottom:6px; }
input { width:100%; padding:12px; border-radius:8px; border:1px solid #363c4e; background:var(--bg); color:var(--text); font-size:16px; }
input:focus { outline:2px solid var(--accent); outline-offset:1px; }
button { width:100%; margin-top:14px; padding:12px; border:0; border-radius:8px; background:var(--accent); color:#fff; font-size:16px; font-weight:600; cursor:pointer; }
button:disabled { opacity:.6; cursor:wait; }
.err { color:var(--err); margin:12px 0 0; font-size:14px; }