:root{color-scheme:light dark;--bg:#eceefa;--card:#fff;--ink:#14163a;--mut:#5b5f86;--ac:#2f33e6;--line:#d6d9f0;--err:#d0102a}
@media (prefers-color-scheme:dark){:root{--bg:#0b0c1f;--card:#14163a;--ink:#eceefa;--mut:#a3a7d0;--ac:#8b8fff;--line:#2a2d5e;--err:#ff7a8a}}
*{box-sizing:border-box}
body{margin:0;min-block-size:100dvh;display:grid;place-items:center;padding:16px;background:var(--bg);color:var(--ink);font:16px/1.7 system-ui,"Vazirmatn","Segoe UI",Tahoma,sans-serif}
.card{inline-size:min(100%,380px);background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px 24px;box-shadow:0 12px 40px rgba(20,22,58,.12)}
h1{margin:0 0 4px;font-size:1.25rem}
.sub{margin:0 0 20px;color:var(--mut);font-size:.9rem}
label{display:block;margin-block-end:6px;font-size:.85rem;color:var(--mut)}
input{inline-size:100%;block-size:48px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--ink);font:inherit;text-align:left}
input:focus-visible,button:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
button{margin-block-start:14px;inline-size:100%;block-size:48px;border:0;border-radius:12px;background:var(--ac);color:#fff;font:inherit;font-weight:600;cursor:pointer}
@media (prefers-color-scheme:dark){button{color:#0b0c1f}}
.err{min-block-size:1.4em;margin:12px 0 0;color:var(--err);font-size:.88rem}