:root{--ink:#101957;--ink2:#3d4573;--paper:#fff;--wash:#f3f5fb;--line:#d8dcec;--blue:#3f51c5;--bad:#9b2f27}
@media (prefers-color-scheme:dark){:root{--ink:#e8eafc;--ink2:#b9bfe6;--paper:#0f1430;--wash:#171d44;--line:#2c3466;--blue:#8d9cff;--bad:#ff9c93;color-scheme:dark}}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 system-ui,-apple-system,sans-serif}
main{max-width:420px;margin:0 auto;padding:12vh max(20px,env(safe-area-inset-right)) 40px max(20px,env(safe-area-inset-left))}
h1{font-size:26px;line-height:1.2;margin:0 0 10px}.lead{color:var(--ink2);margin:0 0 22px}
label{display:block;font-size:13px;font-weight:600;color:var(--ink2);margin:0 0 4px}
input{width:100%;font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:11px 12px;margin:0 0 14px}
input:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.btn{font:600 15px system-ui,sans-serif;background:var(--blue);color:#fff;border:0;border-radius:8px;padding:11px 16px;cursor:pointer;min-height:44px}
@media (prefers-color-scheme:dark){.btn{color:#0f1430}}
.btn[disabled]{opacity:.55}.link{background:none;border:0;color:var(--ink2);text-decoration:underline;font:inherit;cursor:pointer;margin-left:12px}
#msg{min-height:1.4em;margin-top:16px;color:var(--ink2)}#msg.err{color:var(--bad)}