:root{--bg:#f1f4fa;--panel:#fff;--ink:#18234a;--muted:#5a6488;--line:#d6dcee;--blue:#2c4a9c;--er:#c42b24}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0e1426;--panel:#161e36;--ink:#e8ecf8;--muted:#9aa3c6;--line:#2a3558;--blue:#5577d6;--er:#ff6b62;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0e1426;--panel:#161e36;--ink:#e8ecf8;--muted:#9aa3c6;--line:#2a3558;--blue:#5577d6;--er:#ff6b62;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:grid;place-items:center;background:var(--bg);color:var(--ink);font:17px/1.4 system-ui,sans-serif;padding:16px}
.box{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--blue);border-radius:16px;padding:28px;width:min(420px,100%);display:grid;gap:14px}
.box img{height:64px;width:auto;max-width:100%;object-fit:contain;background:#fff;border-radius:8px;justify-self:start}
h1{margin:0;font-size:1.4rem}
form{display:grid;gap:12px}
label{display:grid;gap:4px;font-size:.85rem;color:var(--muted)}
input{font:inherit;color:var(--ink);background:var(--bg);border:2px solid var(--line);border-radius:10px;min-height:52px;padding:0 12px}
input:focus{outline:3px solid var(--blue);outline-offset:1px}
button{font:inherit;font-weight:700;min-height:56px;border:0;border-radius:12px;background:var(--blue);color:#fff;cursor:pointer}
button:disabled{opacity:.5}
#err{color:var(--er);margin:0;min-height:1.2em;font-weight:700}