:root{--bg:#f3f4f7;--card:#fff;--fg:#171b2b;--mut:#6b7186;--line:#dfe2ea;--acc:#c48a12;--bad:#d4452f}
@media (prefers-color-scheme:dark){:root{--bg:#0b0f1f;--card:#131936;--fg:#e8eaf5;--mut:#929abb;--line:#222b52;--acc:#e6b95a;--bad:#f0806d}}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;min-height:100vh;display:grid;place-items:center;font:16px/1.45 system-ui,"Segoe UI",Roboto,sans-serif;color:var(--fg);background:var(--bg)}
main{width:100%;padding:20px}form{max-width:380px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px 24px;display:grid;gap:10px}
h1{margin:0;font-size:20px}.sub{margin:0 0 8px;color:var(--mut);font-size:14px}label{font-size:13px;color:var(--mut);font-weight:600}
input[type=password]{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px;width:100%}input:focus{outline:2px solid var(--acc);outline-offset:1px}
button{font:inherit;font-weight:700;border:0;border-radius:10px;padding:12px;background:var(--acc);color:#fff;cursor:pointer}button:disabled{opacity:.6}
#e{min-height:1.4em;margin:0;color:var(--bad);font-size:14px}