:root{--bg:#0f1419;--fg:#e6edf3;--mut:#8b98a5;--card:#171d24;--line:#2a3340;--acc:#4da3ff;--bad:#ff6b6b}
@media (prefers-color-scheme:light){:root{--bg:#f4f6f8;--fg:#18222d;--mut:#5b6b7b;--card:#fff;--line:#d6dde4;--acc:#1b6fd1;--bad:#c62828}}
*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;background:var(--bg);color:var(--fg);font:16px/1.4 system-ui,sans-serif;padding:16px}
.box{width:100%;max-width:360px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px;display:grid;gap:14px}
h1{margin:0;font-size:22px}.sub{margin:0;color:var(--mut);font-size:14px}label{display:grid;gap:6px;font-size:14px;color:var(--mut)}
input{font:inherit;padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--fg)}
button{font:inherit;font-weight:600;padding:12px;border:0;border-radius:10px;background:var(--acc);color:#fff;cursor:pointer}
.err{background:color-mix(in srgb,var(--bad) 15%,transparent);border:1px solid var(--bad);color:var(--bad);padding:10px;border-radius:10px;font-size:14px}