:root{color-scheme:light dark;--bg:#f4f5f7;--card:#fff;--fg:#1b1f24;--mut:#5b6572;--line:#cfd5dc;--acc:#1f6feb;--accfg:#fff;--err:#b42318;--warn:#8a5a00;--warnbg:#fff4d6}
@media (prefers-color-scheme:dark){:root{--bg:#14171b;--card:#1d2127;--fg:#e8ebef;--mut:#9aa4b0;--line:#363d47;--acc:#4c8dff;--accfg:#0b1220;--err:#ff8a80;--warn:#f5c96a;--warnbg:#3a2f12}}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:grid;place-items:start center;padding:24px 16px;background:var(--bg);color:var(--fg);font:16px/1.45 system-ui,sans-serif}
main{width:100%;max-width:380px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px}
h1{font-size:1.4rem;margin:0 0 4px}h2{font-size:1.05rem;margin:0 0 4px}
.sub{color:var(--mut);margin:0 0 16px;font-size:.95rem}
form{display:grid;gap:12px}
label{display:grid;gap:4px;font-size:.9rem;color:var(--mut)}
input{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
input:focus-visible,button:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
button{font:inherit;font-weight:600;background:var(--acc);color:var(--accfg);border:0;border-radius:8px;padding:11px 14px;cursor:pointer}
.err{color:var(--err);margin:0 0 12px}
.warn{background:var(--warnbg);color:var(--warn);border-radius:8px;padding:10px 12px;font-size:.9rem}
#qrbox{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);text-align:center}
#qrbox[hidden],#qrnew[hidden]{display:none}
#qr{width:200px;height:200px;image-rendering:pixelated;border-radius:8px;background:#fff}
.code{margin:8px 0;color:var(--mut)}.code strong{color:var(--fg);font-size:1.3rem;letter-spacing:.15em}
dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0 0 12px}dt{color:var(--mut)}dd{margin:0}