:root { --bg:#f4f6fb; --card:#fff; --text:#1d2433; --muted:#667085; --accent:#2563eb; --line:#d6dbe6; --err:#c0262d; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#111520; --card:#1a2030; --text:#e8ecf5; --muted:#9aa4b8; --accent:#5b8cff; --line:#2c3550; --err:#ff7b80; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
.card { max-width:720px; margin:0 auto; padding:24px 20px 40px; min-height:100vh; background:var(--card); }
@media (min-width:760px) { .card { margin:32px auto; min-height:0; border-radius:14px; box-shadow:0 6px 30px rgba(0,0,0,.08); } }
h1 { font-size:1.4rem; line-height:1.3; } h2 { font-size:1.2rem; line-height:1.35; margin:20px 0 6px; }
.hint { color:var(--muted); margin:0 0 12px; font-size:.92rem; } .hint:empty { display:none; }
.bar { height:6px; background:var(--line); border-radius:3px; overflow:hidden; } #fill { height:100%; width:0; background:var(--accent); transition:width .25s; }
.opt { display:flex; gap:10px; align-items:flex-start; padding:12px 14px; margin:8px 0; border:1px solid var(--line); border-radius:10px; cursor:pointer; }
.opt:has(input:checked) { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent); }
.opt input { margin-top:4px; width:18px; height:18px; flex:none; accent-color:var(--accent); }
input[type=text], textarea { width:100%; padding:10px 12px; margin-top:6px; font:inherit; color:inherit; background:transparent; border:1px solid var(--line); border-radius:8px; }
.nav { display:flex; justify-content:space-between; gap:12px; margin-top:20px; }
.btn { padding:12px 22px; font:inherit; font-weight:600; color:#fff; background:var(--accent); border:0; border-radius:10px; cursor:pointer; }
.btn.ghost { background:transparent; color:var(--accent); border:1px solid var(--accent); } .btn:disabled { opacity:.5; }
.err { color:var(--err); min-height:1.4em; margin:8px 0 0; }
.hp { position:absolute; left:-9999px; }
[hidden] { display:none !important; }