:root{--ink:#12313a;--bg:#f2f6f7;--accent:#0e7c86;--ok:#1b7a3a;--bad:#b3261e;--line:#d5e0e3}
body{background:var(--bg);color:var(--ink);padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.app{max-width:720px;padding-top:1.5rem;padding-bottom:3rem}
.panel{background:#fff;border:1px solid var(--line);border-radius:.75rem;padding:1.25rem}
.btn-primary{--bs-btn-bg:var(--accent);--bs-btn-border-color:var(--accent);--bs-btn-hover-bg:#0a646c;--bs-btn-hover-border-color:#0a646c}
.progress-bar{background:var(--accent)}
.timer{font-variant-numeric:tabular-nums;font-weight:600}
.timer.low{color:var(--bad)}
.chapter-tag{font-size:.8rem;color:var(--accent);margin-bottom:.5rem}
.q-stem{line-height:1.5;margin-bottom:1rem}
.opt{text-align:left;border:1px solid var(--line);background:#fff;border-radius:.6rem;padding:.8rem 1rem;display:flex;gap:.75rem;width:100%;color:var(--ink)}
.opt:hover{border-color:var(--accent)}
.opt.active{border-color:var(--accent);background:#e3f3f4;box-shadow:inset 3px 0 0 var(--accent)}
.opt b{min-width:1.2rem}
.dots{display:flex;flex-wrap:wrap;gap:.35rem}
.dot{width:1.9rem;height:1.9rem;border-radius:.4rem;border:1px solid var(--line);background:#fff;font-size:.75rem;color:var(--ink)}
.dot.done{background:#cfe9eb}.dot.cur{border-color:var(--ink);font-weight:700}
.score{font-size:3rem;font-weight:700;line-height:1.1}
.item{background:#fff;border:1px solid var(--line);border-left:4px solid var(--bad);border-radius:.6rem;padding:1rem;margin-bottom:.75rem}
.item.right{border-left-color:var(--ok)}
.item .pick{font-size:.9rem}
.item .why{font-size:.9rem;background:var(--bg);border-radius:.5rem;padding:.6rem .8rem;margin-top:.6rem}
.ans-ok{color:var(--ok)}.ans-bad{color:var(--bad)}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media (max-width:576px){.nav-bar .btn{flex:1}}
.nav-pills .nav-link{color:var(--ink)}
.nav-pills .nav-link.active{background:var(--accent);color:#fff}
.form-check-input:checked{background-color:var(--accent);border-color:var(--accent)}
.site-img{max-width:100%;height:auto;max-height:180px;margin-bottom:.75rem;border-radius:.5rem}
.site-footer{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--line);text-align:center;color:#51656b;font-size:.9rem}