:root{--bg:#F3F6FA;--card:#fff;--ink:#030A18;--muted:#46525F;--line:#D1DBE7;--brand:#003D6A;--on:#fff;--bad:#A8322A;--bad-soft:#FBE5E3;--ok-soft:#E6F1FB}
@media (prefers-color-scheme:dark){:root{--bg:#0A1320;--card:#0F1A2A;--ink:#EEF3F9;--muted:#9FB0C2;--line:#2C4058;--brand:#7DB8E8;--on:#062652;--bad:#FFB4AB;--bad-soft:#3A1A17;--ok-soft:#16304A}}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.7 "Alexandria","Geeza Pro","Segoe UI",Tahoma,sans-serif;display:flex;align-items:center;justify-content:center;padding:16px}
.card{width:100%;max-width:380px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:32px 28px}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:22px;color:var(--brand)}
.brand svg{height:26px;width:auto}
.brand span{font-weight:600;font-size:15px}
h1{font-size:20px;font-weight:600;margin:0 0 4px}
p.sub{margin:0 0 20px;color:var(--muted);font-size:13px}
label{display:block;font-size:13px;font-weight:500;margin:0 0 6px}
input{width:100%;height:44px;border:1px solid var(--line);border-radius:8px;background:transparent;color:inherit;padding:0 12px;font:inherit;margin-bottom:14px}
input:focus-visible{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
input[dir=ltr]{text-align:left}
button{width:100%;height:44px;border:0;border-radius:8px;background:var(--brand);color:var(--on);font:inherit;font-weight:600;cursor:pointer;margin-top:4px}
button:disabled{opacity:.6;cursor:default}
button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.err{background:var(--bad-soft);color:var(--bad);font-size:13px;border-radius:8px;padding:9px 12px;margin:0 0 14px}
.note{background:var(--ok-soft);font-size:13px;border-radius:8px;padding:9px 12px;margin:0 0 16px}
.back{display:block;text-align:center;margin-top:14px;color:var(--muted);font-size:13px}
[hidden]{display:none!important}