/* Practice & tests v2 — its own styles. Uses the colour tokens from /ielts/study.css
 * (--ok / --wrong / --trap / --example keep ONE meaning each) and nothing from v1's practice.css,
 * so v1 can change without touching this section and the other way round. */

main.v2{max-width:1180px}
.v2-note{color:var(--muted);font-size:14px}
.v2-h2{font-size:12.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);margin:26px 0 10px}
.v2-btn{background:#23234f;color:var(--text);border:1px solid var(--line);border-radius:8px;
  padding:7px 13px;font:inherit;font-size:13.5px;cursor:pointer}
.v2-btn:hover{border-color:var(--example)}
.v2-btn.primary{background:var(--example);color:#0b1020;border-color:var(--example);font-weight:650}
.v2-btn.ok{background:var(--ok);color:#06140e;border-color:var(--ok);font-weight:650}
.v2-btn[disabled]{opacity:.45;cursor:not-allowed}
.v2-pill{display:inline-block;font-size:11px;letter-spacing:.5px;text-transform:uppercase;border-radius:5px;padding:2px 7px;
  background:#23234f;color:var(--muted)}

/* ── index ─────────────────────────────────────────────────────────────── */
.v2-exam{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-bottom:14px}
.v2-exam .t{font-weight:650;font-size:17px;margin-bottom:4px}
.v2-exam .m{color:var(--muted);font-size:13px;margin-bottom:12px}
.v2-exam .types{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.v2-exam .acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.v2-hist{color:var(--muted);font-size:13px;margin-top:10px}
.v2-hist b{color:var(--text)}
.v2-how{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin:18px 0 26px;font-size:14.5px}
.v2-how ol{margin:6px 0 0;padding-left:20px}
.v2-how li{margin:3px 0}

/* ── exam header ───────────────────────────────────────────────────────── */
.v2-head{position:sticky;top:0;z-index:20;background:#12122ce8;backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);padding:10px 18px;display:flex;gap:10px 16px;align-items:center;flex-wrap:wrap}
.v2-head .title{font-weight:650;flex:1;min-width:200px}
.v2-head .timer{font-variant-numeric:tabular-nums;font-size:15px;color:var(--example)}
.v2-head .timer.low{color:var(--wrong)}
.v2-head .count{color:var(--muted);font-size:13px}
.v2-mode{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.v2-mode button{background:transparent;border:0;color:var(--muted);padding:6px 11px;font:inherit;font-size:13px;cursor:pointer}
.v2-mode button.on{background:#7dd3fc22;color:var(--example)}
.v2-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:16px 0 4px}
.v2-tabs button{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:8px;padding:6px 12px;font:inherit;font-size:13.5px;cursor:pointer}
.v2-tabs button.on{border-color:var(--example);color:var(--example)}
.v2-tabs .done{color:var(--ok)}

/* ── audio + answer map ────────────────────────────────────────────────── */
.v2-audio{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:14px 0}
.v2-audio audio{width:100%}
.v2-map{position:relative;height:34px;margin:12px 0 4px;border-radius:6px;background:#1d1d47}
.v2-map .seg{position:absolute;top:0;bottom:0;border-right:1px dashed var(--line)}
.v2-map .seg span{position:absolute;left:6px;top:-1px;font-size:10px;color:var(--muted)}
.v2-map .mk{position:absolute;top:13px;width:16px;height:16px;margin-left:-8px;border-radius:50%;
  background:#35356b;color:var(--text);font-size:9px;line-height:16px;text-align:center;cursor:pointer;border:0;padding:0}
.v2-map .mk.ok{background:var(--ok);color:#06140e}
.v2-map .mk.wrong{background:var(--wrong);color:#1a0808}
.v2-map .mk.hint{background:var(--trap);color:#1a1205}
.v2-map .now{position:absolute;top:0;bottom:0;width:2px;background:var(--example);pointer-events:none}
.v2-maplegend{font-size:12px;color:var(--muted)}

/* ── reading split view ────────────────────────────────────────────────── */
.v2-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.v2-passage{position:sticky;top:64px;max-height:calc(100vh - 80px);overflow:auto;background:#fff;border-radius:10px;border:1px solid var(--line)}
.v2-passage img{display:block;width:100%;height:auto}
.v2-passage .cap{position:sticky;top:0;background:#12122c;color:var(--muted);font-size:12px;padding:6px 10px}
@media (max-width: 900px){ .v2-split{grid-template-columns:1fr} .v2-passage{position:static;max-height:70vh} }

/* ── groups and questions ──────────────────────────────────────────────── */
.v2-group{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:16px 0}
.v2-group .gh{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
.v2-group .gh .r{font-weight:650}
.v2-rubric{font-size:14.5px;margin:4px 0 8px}
.v2-rubric b{color:var(--trap)}
.v2-heading{font-weight:650;margin:12px 0 2px;color:var(--example)}
.v2-sect{font-size:12px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin:14px 0 2px}
.v2-box{border:1px solid var(--line);border-radius:9px;padding:10px 14px;margin:8px 0 12px;font-size:14px}
.v2-box .bt{font-weight:650;margin-bottom:4px}
.v2-box div{margin:2px 0}
.v2-tackle{margin:6px 0 10px}
.v2-tackle summary{cursor:pointer;color:var(--example);font-size:13.5px}
.v2-tackle .in{border-left:3px solid var(--example);background:var(--example-bg);padding:10px 14px;border-radius:0 8px 8px 0;margin-top:8px;font-size:14px}
.v2-tackle h5{margin:8px 0 4px;font-size:11.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--example)}
.v2-tackle ul{margin:0;padding-left:18px}
.v2-tackle li{margin:4px 0}
.v2-cite{color:var(--muted);font-size:12px;white-space:nowrap}

.v2-q{border-top:1px solid var(--line);padding:12px 0 10px;scroll-margin-top:80px}
.v2-q:first-of-type{border-top:0}
.v2-q .row{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.v2-q .num{flex:0 0 auto;min-width:30px;padding:0 6px;box-sizing:border-box;white-space:nowrap;height:26px;border-radius:7px;background:#23234f;text-align:center;line-height:26px;font-weight:650;font-size:13.5px}
.v2-q.ok .num{background:var(--ok);color:#06140e}
.v2-q.wrong .num{background:var(--wrong);color:#1a0808}
.v2-q .stem{flex:1;min-width:200px;font-size:15px;line-height:1.5;padding-top:2px}
.v2-q input[type=text]{background:#0f0f2a;border:1px solid var(--line);color:var(--text);border-radius:7px;padding:6px 9px;font:inherit;font-size:15px;min-width:150px}
.v2-q input[type=text]:focus{outline:none;border-color:var(--example)}
.v2-q select{background:#0f0f2a;border:1px solid var(--line);color:var(--text);border-radius:7px;padding:6px 9px;font:inherit;font-size:14.5px}
.v2-opts{margin:8px 0 0 40px}
.v2-opts label{display:flex;gap:9px;align-items:flex-start;padding:6px 10px;border:1px solid transparent;border-radius:8px;cursor:pointer;font-size:14.5px}
.v2-opts label:hover{border-color:var(--line)}
.v2-opts label.pick{border-color:var(--example);background:#7dd3fc12}
.v2-opts label.right{border-color:var(--ok);background:var(--ok-bg)}
.v2-opts label.bad{border-color:var(--wrong)}
.v2-opts input{margin-top:4px}
.v2-summary{font-size:15.5px;line-height:2.1;margin:6px 0}
.v2-summary .gap{display:inline-flex;align-items:center;gap:5px}
.v2-summary .gap b{font-size:12px;background:#23234f;border-radius:5px;padding:0 6px}
.v2-summary .gap.ok b{background:var(--ok);color:#06140e}
.v2-summary .gap.wrong b{background:var(--wrong);color:#1a0808}
.v2-summary input{background:#0f0f2a;border:1px solid var(--line);color:var(--text);border-radius:6px;padding:3px 7px;font:inherit;font-size:14.5px;width:130px}

/* ── hints: hidden by default, one layer per click ─────────────────────── */
.v2-hintbar{margin:8px 0 0 40px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.v2-hintbtn{background:transparent;border:1px dashed var(--line);color:var(--muted);border-radius:7px;padding:4px 10px;font:inherit;font-size:12.5px;cursor:pointer}
.v2-hintbtn:hover{color:var(--trap);border-color:var(--trap)}
.v2-hintbtn[disabled]{opacity:.4;cursor:not-allowed}
.v2-hints{margin:8px 0 0 40px;display:grid;gap:7px}
.v2-hint{border-radius:0 8px 8px 0;padding:8px 12px;font-size:14px;line-height:1.5;border-left:3px solid var(--line);background:#1d1d47}
.v2-hint > b:first-child{display:block;font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;margin-bottom:2px;color:var(--muted)}
.v2-hint.tip{border-color:var(--example);background:var(--example-bg)} .v2-hint.tip > b:first-child{color:var(--example)}
.v2-hint.where > b:first-child{color:var(--text)}
.v2-hint.evidence{border-color:#a78bfa} .v2-hint.evidence > b:first-child{color:#c4b5fd}
.v2-hint.trap{border-color:var(--trap);background:var(--trap-bg)} .v2-hint.trap > b:first-child{color:var(--trap)}
.v2-hint.answer{border-color:var(--ok);background:var(--ok-bg)} .v2-hint.answer > b:first-child{color:var(--ok)}
.v2-hint .play{margin-left:8px}
.v2-verdict{margin:8px 0 0 40px;font-size:14px}
.v2-verdict .yours{color:var(--wrong);text-decoration:line-through}
.v2-verdict .rule{display:inline-block;margin-left:8px;font-size:11px;letter-spacing:.5px;text-transform:uppercase;border-radius:5px;padding:1px 7px;background:var(--trap-bg);color:var(--trap)}

/* ── results ───────────────────────────────────────────────────────────── */
.v2-result{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin:18px 0}
.v2-score{display:flex;gap:26px;flex-wrap:wrap;align-items:flex-end}
.v2-score .band{font-size:54px;font-weight:750;line-height:1;color:var(--example)}
.v2-score .lab{font-size:11.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
.v2-score .big{font-size:26px;font-weight:650}
.v2-bars{display:grid;gap:7px;margin:10px 0}
.v2-bar{display:grid;grid-template-columns:minmax(120px,210px) 1fr 58px;gap:10px;align-items:center;font-size:13.5px}
.v2-bar .track{height:12px;border-radius:6px;background:#1d1d47;overflow:hidden;display:flex}
.v2-bar .track i{display:block;height:100%}
.v2-bar .track i.ok{background:var(--ok)} .v2-bar .track i.hint{background:var(--trap)}
.v2-bar .v{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.v2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:5px;margin:10px 0}
.v2-grid a{display:block;text-align:center;padding:6px 0;border-radius:6px;font-size:12.5px;font-weight:650;text-decoration:none;color:#0b1020;background:#35356b}
.v2-grid a.ok{background:var(--ok)} .v2-grid a.wrong{background:var(--wrong)} .v2-grid a.hint{background:var(--trap)}
.v2-issue{border-top:1px solid var(--line);padding:12px 0}
.v2-issue .it{font-weight:650}
.v2-issue .it .c{color:var(--wrong);margin-right:6px}
.v2-issue .ix{color:var(--muted);font-size:13.5px;margin:3px 0 6px}
.v2-issue .chips a{display:inline-block;margin:2px 4px 2px 0;padding:2px 8px;border-radius:6px;background:#23234f;color:var(--text);text-decoration:none;font-size:12.5px}
.v2-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}

/* ── added for all exams: highlighted answer in evidence, labels, figures, printed page ───── */
.v2-hint mark{background:#fbbf2433;color:var(--text);border-radius:3px;padding:0 2px}
.v2-hint .lbl{font-weight:650}
.v2-hint .lbl.t{color:var(--trap)} .v2-hint .lbl.p{color:var(--example)}
.v2-hint .ans{font-weight:700;font-size:15px;color:var(--ok)}
.v2-map .mk.approx{opacity:.7;border:1px dashed var(--muted)}
.v2-fig{margin:8px 0 12px;background:#fff;border-radius:8px;padding:6px;max-width:560px}
.v2-fig img{display:block;max-width:100%;height:auto}
.v2-fig figcaption{color:#333;font-size:12px;padding:4px 2px 0}
.v2-page{margin:8px 0 12px}
.v2-page summary{cursor:pointer;color:var(--example);font-size:13.5px}
.v2-page img{display:block;max-width:100%;height:auto;margin-top:8px;border-radius:8px;background:#fff}