:root { --bg:#fbf8ff; --fg:#2b2147; --mute:#6b6385; --line:#e3dcf2; --acc:#7c3aed; --ok:#16794c; --warn:#a05a00; --bad:#b4232a; --card:#fff; }
@media (prefers-color-scheme: dark) { :root { --bg:#17122a; --fg:#f1ecff; --mute:#a59ec2; --line:#352c57; --acc:#a78bfa; --ok:#4ade80; --warn:#fbbf24; --bad:#f87171; --card:#211a3d; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width:560px; margin:0 auto; padding:24px 16px 64px; }
h1 { margin:0 0 4px; font-size:26px; }
h2 { margin:28px 0 8px; font-size:19px; }
.lead, .hint { color:var(--mute); margin:0 0 12px; }
.hint { font-size:14px; }
section { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:8px 16px 18px; margin-top:16px; }
label { display:block; margin:12px 0 0; font-size:14px; color:var(--mute); }
input { display:block; width:100%; margin-top:4px; padding:12px 14px; font:inherit; color:var(--fg); background:var(--bg); border:1px solid var(--line); border-radius:12px; min-height:48px; }
input:focus-visible, button:focus-visible { outline:3px solid var(--acc); outline-offset:2px; }
#code { font-size:24px; letter-spacing:.12em; text-align:center; text-transform:uppercase; }
button { font:inherit; min-height:48px; padding:0 18px; border-radius:12px; border:1px solid var(--line); background:var(--card); color:var(--fg); cursor:pointer; margin-top:14px; }
button.primary { background:var(--acc); border-color:var(--acc); color:#fff; font-weight:600; }
button:disabled { opacity:.55; cursor:default; }
button.link { background:none; border:0; min-height:0; padding:0; margin:0; color:var(--acc); text-decoration:underline; }
.tabs { display:flex; gap:8px; margin-top:6px; }
.tab { flex:1; margin-top:0; }
.tab.on { border-color:var(--acc); color:var(--acc); font-weight:600; }
.row { display:flex; gap:10px; }
.row button { flex:1; }
.msg { min-height:1.4em; margin:12px 0 0; font-size:14px; }
.msg.ok { color:var(--ok); } .msg.warn { color:var(--warn); } .msg.err { color:var(--bad); }
.who { margin:0; font-size:14px; color:var(--mute); }
.card { border:1px solid var(--line); border-radius:12px; padding:10px 14px; margin:10px 0; background:var(--bg); }
.card b { display:block; }
.card small { color:var(--mute); display:block; }
.pill { display:inline-block; font-size:12px; padding:1px 8px; border-radius:99px; border:1px solid var(--line); margin-right:6px; }
.pill.ok { color:var(--ok); border-color:var(--ok); } .pill.bad { color:var(--bad); border-color:var(--bad); } .pill.warn { color:var(--warn); border-color:var(--warn); }

label.chk { display:flex; gap:10px; align-items:flex-start; color:var(--fg); font-size:14px; }
label.chk input { width:22px; min-height:22px; margin:2px 0 0; flex:none; }
a { color:var(--acc); }
nav.top { display:flex; gap:14px; margin:0 0 8px; font-size:14px; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th,td { text-align:left; padding:6px 4px; border-bottom:1px solid var(--line); }
.big { font-size:30px; font-weight:700; margin:4px 0; }

.btn{display:inline-block;padding:12px 18px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--fg);text-decoration:none;margin:10px 8px 0 0;min-height:48px}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}