/* iLabs tests pages (/tests/, /tests/test/, /tests/attempt/, /tests/review/). Uses the site's colour variables, so light and dark both work. */
.tx-wrap{ max-width:1000px; margin:0 auto; padding:32px 0 70px; }
.tx-wrap h1{ font-size:1.9rem; margin-bottom:.2em; }
.tx-sub{ color:var(--chrome-2); line-height:1.55; margin:0 0 1.6em; max-width:64ch; }
.tx-muted{ color:var(--chrome-2); } .tx-small{ font-size:.85rem; }
.tx-card{ background:var(--panel-2); border:1px solid var(--edge); border-radius:16px; padding:20px; margin-bottom:16px; }
.tx-card h2{ font-size:1.1rem; margin:0 0 12px; }
.tx-msg{ padding:14px 16px; border-radius:12px; border:1px solid var(--edge); background:var(--surface); line-height:1.5; }
.tx-msg.err{ border-color:#ff8f8f; }
[hidden]{ display:none !important; }

/* buttons */
.tx-btn{ font:inherit; font-size:.95rem; padding:.62em 1.25em; border-radius:10px; border:1px solid var(--edge-hi); background:var(--surface); color:var(--chrome); cursor:pointer; text-decoration:none; display:inline-block; text-align:center; }
.tx-btn:hover{ background:var(--hover); text-decoration:none; }
.tx-btn.primary{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600; }
.tx-btn.primary:hover{ opacity:.9; }
.tx-btn.danger{ color:#ff8f8f; }
:root[data-theme="light"] .tx-btn.danger{ color:#b42318; }
.tx-btn:disabled{ opacity:.5; cursor:not-allowed; }
.tx-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* status chips */
.tx-chip{ display:inline-block; padding:2px 10px; border-radius:99px; font-size:.75rem; font-weight:600; border:1px solid var(--edge-hi); color:var(--chrome-2); white-space:nowrap; }
.tx-chip.live{ color:#2fbf8a; border-color:#2fbf8a; } .tx-chip.upcoming{ color:var(--accent); border-color:var(--accent); }
.tx-chip.grading{ color:#e0a030; border-color:#e0a030; } .tx-chip.results{ color:var(--chrome); }
.tx-chip.progress{ color:#e0a030; border-color:#e0a030; } .tx-chip.done{ color:#2fbf8a; border-color:#2fbf8a; }

/* list */
.tx-sec{ margin:26px 0 10px; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--chrome-2); }
.tx-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.tx-test{ background:var(--panel-2); border:1px solid var(--edge); border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:10px; }
.tx-test h3{ margin:0; font-size:1.05rem; line-height:1.3; }
.tx-test .meta{ display:flex; flex-wrap:wrap; gap:6px 14px; color:var(--chrome-2); font-size:.85rem; }
.tx-test .when{ font-size:.85rem; color:var(--chrome-2); }
.tx-test .when b{ color:var(--chrome); }
.tx-test .push{ margin-top:auto; padding-top:4px; }
.tx-test.live{ border-color:var(--accent); }
.tx-table{ width:100%; border-collapse:collapse; font-size:.92rem; }
.tx-table th,.tx-table td{ text-align:left; padding:9px 8px; border-bottom:1px solid var(--edge); }
.tx-table th{ color:var(--chrome-2); font-weight:500; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; }
.tx-table tr:last-child td{ border-bottom:0; }
.tx-scroll{ overflow-x:auto; }

/* detail */
.tx-facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin:14px 0 4px; }
.tx-fact{ background:var(--surface); border:1px solid var(--edge); border-radius:12px; padding:11px 14px; }
.tx-fact b{ display:block; font-size:1.25rem; line-height:1.25; } .tx-fact span{ color:var(--chrome-2); font-size:.8rem; }
.tx-rules{ margin:0; padding-left:1.2em; line-height:1.65; color:var(--chrome-2); } .tx-rules b{ color:var(--chrome); }
.tx-instr{ white-space:pre-wrap; line-height:1.6; }

/* modal */
.tx-back{ position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:300; display:grid; place-items:center; padding:16px; }
.tx-modal{ background:linear-gradient(var(--panel-2),var(--panel-2)),var(--bg); border:1px solid var(--edge-hi); border-radius:16px; padding:22px; max-width:440px; width:100%; box-shadow:0 20px 50px rgba(0,0,0,.45); }
.tx-modal h3{ margin:0 0 8px; font-size:1.15rem; } .tx-modal p{ margin:0 0 14px; line-height:1.55; color:var(--chrome-2); }
.tx-modal .tx-row{ justify-content:flex-end; }

/* taking the test */
.tk{ max-width:1180px; margin:0 auto; padding:12px 0 60px; }
.tk-bar{ position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--bg); border-bottom:1px solid var(--edge); padding:10px 0; margin-bottom:14px; }
.tk-title{ font-weight:600; font-size:1rem; flex:1; min-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-time{ font-variant-numeric:tabular-nums; font-weight:700; font-size:1.2rem; padding:4px 12px; border-radius:10px; border:1px solid var(--edge-hi); background:var(--surface); }
.tk-time.low{ color:#ff8f8f; border-color:#ff8f8f; animation:tkpulse 1s infinite; }
@keyframes tkpulse{ 50%{ opacity:.55; } }
@media (prefers-reduced-motion:reduce){ .tk-time.low{ animation:none; } }
.tk-save{ font-size:.8rem; color:var(--chrome-3); min-width:92px; text-align:right; } .tk-save.err{ color:#ff8f8f; } .tk-save.ok{ color:#2fbf8a; }
.tk-layout{ display:grid; grid-template-columns:1fr 280px; gap:16px; align-items:start; }
.tk-q{ background:var(--panel-2); border:1px solid var(--edge); border-radius:16px; padding:22px; }
.tk-qhead{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; color:var(--chrome-2); font-size:.85rem; margin-bottom:12px; }
.tk-qhead b{ color:var(--chrome); font-size:1rem; }
.tk-kind{ display:inline-block; padding:1px 9px; border-radius:99px; border:1px solid var(--edge-hi); font-size:.75rem; margin-left:6px; }
.tk-text{ font-size:1.05rem; line-height:1.65; white-space:pre-wrap; margin-bottom:16px; }
.tk-opts{ display:flex; flex-direction:column; gap:9px; }
.tk-opt{ display:flex; gap:12px; align-items:flex-start; text-align:left; width:100%; font:inherit; color:var(--chrome); background:var(--surface); border:1px solid var(--edge); border-radius:12px; padding:12px 14px; cursor:pointer; line-height:1.5; }
.tk-opt:hover{ border-color:var(--edge-hi); }
.tk-opt .mark{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; border:1.5px solid var(--edge-hi); display:grid; place-items:center; font-size:.8rem; font-weight:700; margin-top:1px; }
.tk-opt.multi .mark{ border-radius:7px; }
.tk-opt.on{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.tk-opt.on .mark{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.tk-num{ display:flex; gap:10px; align-items:center; }
.tk-num input{ font:inherit; font-size:1.1rem; padding:.65em .8em; border-radius:10px; border:1px solid var(--edge-hi); background:var(--surface); color:var(--chrome); width:min(260px,100%); }
.tk-num input:focus{ outline:none; border-color:var(--accent); }
.tk-hint{ font-size:.82rem; color:var(--chrome-3); margin-top:10px; }
.tk-nav{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; align-items:center; }
.tk-nav .sp{ flex:1; }
.tk-flag.on{ border-color:#e0a030; color:#e0a030; }
.tk-pal{ background:var(--panel-2); border:1px solid var(--edge); border-radius:16px; padding:16px; position:sticky; top:74px; max-height:calc(100vh - 90px); overflow:auto; }
.tk-pal h4{ margin:0 0 4px; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--chrome-2); font-weight:600; }
.tk-pgrid{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin:6px 0 14px; }
.tk-pn{ font:inherit; font-size:.85rem; height:38px; border-radius:9px; border:1px solid var(--edge); background:var(--surface); color:var(--chrome-2); cursor:pointer; position:relative; }
.tk-pn.ans{ background:color-mix(in srgb, var(--accent) 22%, var(--surface)); border-color:var(--accent); color:var(--chrome); }
.tk-pn.cur{ outline:2px solid var(--chrome); outline-offset:1px; }
.tk-pn.flag::after{ content:""; position:absolute; top:3px; right:3px; width:7px; height:7px; border-radius:50%; background:#e0a030; }
.tk-legend{ display:flex; flex-wrap:wrap; gap:6px 12px; font-size:.75rem; color:var(--chrome-3); margin-bottom:12px; }
.tk-legend i{ display:inline-block; width:10px; height:10px; border-radius:3px; vertical-align:-1px; margin-right:4px; border:1px solid var(--edge-hi); }
.tk-palbtn{ display:none; }
@media (max-width:860px){
  .tk-layout{ grid-template-columns:1fr; }
  .tk-pal{ position:fixed; left:0; right:0; bottom:0; top:auto; max-height:70vh; border-radius:18px 18px 0 0; z-index:200; background:var(--bg); border-color:var(--edge-hi); transform:translateY(105%); transition:transform .25s; box-shadow:0 -10px 40px rgba(0,0,0,.4); }
  .tk-pal.open{ transform:none; }
  .tk-palbtn{ display:inline-block; }
  .tk-q{ padding:16px; }
  .tk-save{ display:none; }
}

/* result and review */
.rs-top{ display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center; }
.rs-score{ font-size:2.6rem; font-weight:700; line-height:1.05; } .rs-score small{ font-size:1.1rem; color:var(--chrome-2); font-weight:500; }
.rs-pct{ color:var(--chrome-2); margin-top:2px; }
.rs-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px; margin-top:16px; }
.rs-stat{ background:var(--surface); border:1px solid var(--edge); border-radius:12px; padding:10px 12px; text-align:center; } .rs-stat b{ display:block; font-size:1.3rem; } .rs-stat span{ font-size:.78rem; color:var(--chrome-2); }
.rs-stat.good b{ color:#2fbf8a; } .rs-stat.bad b{ color:#ff8f8f; }
@media (max-width:560px){ .rs-top{ grid-template-columns:1fr; text-align:center; } }
.rs-badges{ display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; }
.rs-badge{ display:flex; gap:10px; align-items:center; background:var(--surface); border:1px solid var(--accent); border-radius:12px; padding:8px 14px 8px 8px; }
.rs-badge img{ width:48px; height:48px; } .rs-badge b{ display:block; font-size:.9rem; } .rs-badge small{ color:var(--chrome-2); font-size:.75rem; }
.rv-filter{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.rv-chip{ font:inherit; font-size:.88rem; padding:.45em 1em; border-radius:999px; border:1px solid var(--edge); background:var(--surface); color:var(--chrome-2); cursor:pointer; }
.rv-chip[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600; }
.rv-q{ background:var(--panel-2); border:1px solid var(--edge); border-radius:16px; padding:18px 20px; margin-bottom:14px; }
.rv-q.ok{ border-left:4px solid #2fbf8a; } .rv-q.no{ border-left:4px solid #ff8f8f; } .rv-q.skip{ border-left:4px solid var(--edge-hi); }
.rv-head{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:.85rem; color:var(--chrome-2); margin-bottom:8px; } .rv-head b{ color:var(--chrome); }
.rv-marks{ font-weight:700; } .rv-marks.p{ color:#2fbf8a; } .rv-marks.n{ color:#ff8f8f; }
.rv-text{ white-space:pre-wrap; line-height:1.6; margin-bottom:12px; }
.rv-opt{ display:flex; gap:10px; padding:8px 12px; border-radius:10px; border:1px solid var(--edge); background:var(--surface); margin-bottom:7px; line-height:1.5; font-size:.95rem; }
.rv-opt .k{ flex:0 0 22px; font-weight:700; color:var(--chrome-2); }
.rv-opt.correct{ border-color:#2fbf8a; background:color-mix(in srgb, #2fbf8a 12%, var(--surface)); }
.rv-opt.wrong{ border-color:#ff8f8f; background:color-mix(in srgb, #ff8f8f 12%, var(--surface)); }
.rv-opt .tag{ margin-left:auto; font-size:.75rem; font-weight:600; white-space:nowrap; padding-left:8px; }
.rv-ans{ display:grid; gap:6px; font-size:.95rem; margin-bottom:6px; } .rv-ans b{ color:var(--chrome); }
.rv-sol{ margin-top:12px; padding:12px 14px; border-radius:12px; background:var(--surface); border:1px dashed var(--edge-hi); line-height:1.6; white-space:pre-wrap; font-size:.94rem; }
.rv-sol b{ color:var(--accent); }

/* ---- practice test setup ---- */
.pr-form h2{ margin:22px 0 10px; font-size:1.05rem; } .pr-form h2:first-child{ margin-top:0; }
.pr-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; align-items:center; }
.pr-chips small{ opacity:.7; }
.pr-topic-head{ margin:4px 0 8px; } .pr-spacer{ flex:1; }
.pr-mini{ padding:.3em .8em; font-size:.82rem; }
.pr-topics{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px; max-height:340px; overflow:auto; padding:2px; }
.pr-topic{ display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--edge); border-radius:10px; background:var(--surface); cursor:pointer; font-size:.9rem; line-height:1.3; }
.pr-topic span{ flex:1; } .pr-topic small{ color:var(--chrome-2); }
.pr-topic.on{ border-color:var(--accent); }
.pr-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px 16px; margin:0 0 12px; }
.pr-grid label{ display:flex; flex-direction:column; gap:5px; font-size:.88rem; color:var(--chrome-2); }
.pr-grid input,.pr-grid select{ font:inherit; font-size:1rem; padding:.55em .7em; border-radius:10px; border:1px solid var(--edge); background:var(--surface); color:var(--chrome); }
.pr-checks{ display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; margin:0 0 10px; }
.pr-check{ display:inline-flex; align-items:center; gap:7px; font-size:.92rem; cursor:pointer; }
.pr-bar{ display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-top:22px; padding-top:16px; border-top:1px solid var(--edge); }
.pr-summary{ line-height:1.6; font-size:.92rem; flex:1; min-width:240px; }
.pr-warn{ color:#e0a030; }
@media (max-width:600px){ .pr-bar .tx-btn.primary{ width:100%; } }

/* ---- practice quick start ---- */
.pr-qrow{ margin:0 0 14px; } .pr-qrow h3{ margin:0 0 8px; font-size:1rem; }
.pr-qcards{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.pr-q{ font:inherit; text-align:left; display:flex; flex-direction:column; gap:3px; padding:12px 14px; border-radius:14px; border:1px solid var(--edge); background:var(--panel-2); color:var(--chrome); cursor:pointer; }
.pr-q:hover:not(:disabled){ border-color:var(--accent); background:var(--hover); }
.pr-q b{ font-size:1.02rem; } .pr-q span{ font-size:.86rem; color:var(--chrome-2); } .pr-q small{ font-size:.78rem; color:var(--chrome-2); opacity:.85; }
.pr-q:disabled{ opacity:.5; cursor:not-allowed; } .pr-q.busy{ opacity:.6; }
@media (max-width:640px){ .pr-qcards{ grid-template-columns:1fr; } }