:root{--bg:#f6f7fb;--card:#fff;--ink:#16203a;--soft:#4a5672;--mute:#7b869f;--line:#dde2ee;--navy:#0f1b33;--gold:#e6c35a;--ok:#14804a;--okbg:#e8f6ee;--bad:#b3261e;--badbg:#fdecea;--blue:#2f5bd8;--blue2:#eaf0ff}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;-webkit-text-size-adjust:100%}
.wrap{max-width:860px;margin:0 auto;padding:0 18px}
.top{background:var(--navy);color:#fff;position:sticky;top:0;z-index:10}
.top .wrap{display:flex;align-items:center;gap:10px;height:54px}
.top b{color:var(--gold);font-size:18px}
.top span{color:#b8c2dc;font-size:14px}
.timer{margin-left:auto;font:700 20px ui-monospace,Menlo,Consolas,monospace;color:#fff!important;background:#233459;border-radius:8px;padding:4px 12px}
.timer.warn{background:#b3261e}
main{padding-top:22px;padding-bottom:40px;min-height:70vh}
h1{font-size:clamp(26px,4.4vw,38px);line-height:1.12;margin:6px 0 10px;letter-spacing:-.02em}
h2{font-size:22px;margin:26px 0 10px}
p{margin:10px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin:14px 0}
.btn{display:inline-block;border:0;background:var(--navy);color:#fff;font:600 17px inherit;padding:13px 22px;border-radius:11px;cursor:pointer;text-decoration:none}
.btn:hover{background:#1c2f57}
.btn.gold{background:var(--gold);color:#241c00}
.btn.line{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn.sm{font-size:15px;padding:9px 14px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.muted{color:var(--mute);font-size:15px}
.pill{display:inline-block;background:var(--blue2);color:var(--blue);border-radius:999px;padding:2px 11px;font-size:13px;font-weight:700;letter-spacing:.02em}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
.mode{border:2px solid var(--line);border-radius:12px;padding:14px 16px;background:#fff;cursor:pointer;text-align:left;font:inherit;color:inherit}
.mode b{display:block;margin-bottom:3px}
.mode.on{border-color:var(--blue);background:var(--blue2)}
@media (max-width:620px){.modes{grid-template-columns:1fr}}
.sections{list-style:none;padding:0;margin:8px 0}
.sections li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.rules li{margin:6px 0}
/* exam screen */
.qhead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:2px 0 10px;color:var(--soft);font-size:15px}
.bar{height:6px;background:var(--line);border-radius:6px;overflow:hidden;margin-bottom:14px}
.bar i{display:block;height:100%;background:var(--blue)}
.directions{background:#fff9e5;border:1px solid #efe0a8;border-radius:12px;padding:12px 16px;font-size:15.5px;margin-bottom:14px}
.stem{font-size:19.5px;line-height:1.6;margin:8px 0 16px}
.stem u{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.stem .seg{display:inline-block;text-align:center;line-height:1.25;margin:0 1px}
.stem .seg b{display:block;font-size:12.5px;color:var(--blue);font-weight:800;margin-top:1px}
.opts{display:grid;gap:10px;margin:10px 0}
.opt{display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;border:2px solid var(--line);background:#fff;border-radius:12px;padding:12px 14px;font:inherit;color:inherit;cursor:pointer}
.opt:hover{border-color:#b8c6ee}
.opt .l{flex:none;width:30px;height:30px;border-radius:50%;background:#eef1f8;display:grid;place-items:center;font-weight:800;font-size:15px}
.opt.sel{border-color:var(--blue);background:var(--blue2)}
.opt.sel .l{background:var(--blue);color:#fff}
.opt.right{border-color:var(--ok);background:var(--okbg)}
.opt.right .l{background:var(--ok);color:#fff}
.opt.wrong{border-color:var(--bad);background:var(--badbg)}
.opt.wrong .l{background:var(--bad);color:#fff}
.opts.err{grid-template-columns:repeat(4,1fr)}
.opts.err .opt{justify-content:center;align-items:center;padding:12px}
.nav{display:flex;justify-content:space-between;gap:10px;margin:18px 0}
.grid{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.grid button{width:38px;height:38px;border-radius:9px;border:1.5px solid var(--line);background:#fff;font:600 14px inherit;cursor:pointer}
.grid button.done{background:var(--blue2);border-color:#a9bdf2;color:var(--blue)}
.grid button.cur{outline:2.5px solid var(--navy);outline-offset:1px}
.expl{border-left:4px solid var(--blue);background:#fff;border-radius:0 10px 10px 0;padding:10px 14px;margin:12px 0;font-size:16px}
.expl.ok{border-color:var(--ok)}.expl.no{border-color:var(--bad)}
/* results */
.score{display:flex;flex-wrap:wrap;gap:14px;margin:14px 0}
.score .box{flex:1 1 150px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.score .box b{display:block;font-size:34px;line-height:1.05;letter-spacing:-.02em}
.score .box span{color:var(--mute);font-size:14px}
.score .box.main{background:var(--navy);color:#fff;border-color:var(--navy)}
.score .box.main span{color:#b8c2dc}
.rev{border:1px solid var(--line);border-radius:12px;background:#fff;margin:10px 0;padding:14px 16px}
.rev .n{font-weight:800;color:var(--mute);font-size:14px}
.rev.bad{border-left:5px solid var(--bad)}.rev.good{border-left:5px solid var(--ok)}.rev.skip{border-left:5px solid #c6a100}
.tag{display:inline-block;font-size:12.5px;background:#eef1f8;color:var(--soft);border-radius:6px;padding:1px 8px;margin-left:6px}
.foot{border-top:1px solid var(--line);background:#fff;color:var(--mute);font-size:13px;padding:14px 0}
.modal{position:fixed;inset:0;background:rgba(10,16,32,.55);display:grid;place-items:center;padding:18px;z-index:30}
.modal>div{background:#fff;border-radius:16px;padding:22px;max-width:460px;width:100%}
@media (max-width:620px){body{font-size:16.5px}.stem{font-size:18.5px}.opts.err{grid-template-columns:repeat(2,1fr)}}