:root{--bg:#f7f5f0;--ink:#1d1f1a;--muted:#5c5f55;--acc:#2f4a2a;--line:#dad6c9;--bad:#a02424}
@media (prefers-color-scheme:dark){:root{--bg:#171815;--ink:#eceae2;--muted:#b3b6a9;--acc:#9fc78f;--line:#3a3d35;--bad:#ff8b8b}}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:grid;place-items:center;background:var(--bg);color:var(--ink);font:17px/1.5 Heebo,"Segoe UI",system-ui,sans-serif;padding:16px}
.box{width:min(26rem,100%);background:color-mix(in srgb,var(--bg) 60%,#fff);border:1px solid var(--line);border-radius:16px;padding:1.5rem}
h1{margin:0;font-size:1.4rem;letter-spacing:.04em}.sub{margin:.1rem 0 1rem;color:var(--muted)}
label{display:block;margin:.8rem 0 .25rem;font-weight:600}
input{width:100%;font:inherit;padding:.65rem .7rem;border:1px solid var(--line);border-radius:10px;background:transparent;color:inherit}
input:focus-visible,.btn:focus-visible{outline:3px solid #1f5fbf;outline-offset:2px}
.btn{margin-top:1rem;width:100%;min-height:3rem;font:inherit;font-weight:700;border:2px solid var(--acc);background:var(--acc);color:var(--bg);border-radius:12px;cursor:pointer}
.btn.ghost{background:transparent;color:var(--acc)}
.hint{color:var(--muted);font-size:.9rem}#msg{color:var(--bad);min-height:1.5rem;margin:.8rem 0 0}