/* ============================================================
   CILL IELTS — Computer-Delivered Mock Test Engine
   Real-test interface: top bar, question navigator, highlight,
   right-click notes, flag/review, per-section timer.
   Reuses the app's Lexend/indigo theme.
   ============================================================ */
:root{
  --mk-bar:#2b2b3a; --mk-bar-2:#20202c; --mk-ink:#20223a; --mk-line:#d7d7e4;
  --mk-brand:#4f46e5; --mk-accent:#f5566b; --mk-good:#0e9f6e; --mk-warn:#e0a300;
  --mk-hl:#ffe58a; --mk-note:#ffcaca; --mk-paper:#ffffff; --mk-soft:#f4f4fb;
  --mk-nav-h:56px; --mk-top-h:52px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body.mock-mode{ font-family:"Lexend","Hind Siliguri",-apple-system,"Segoe UI",sans-serif;
  color:var(--mk-ink); background:var(--mk-soft); overflow:hidden; }

/* ---------- top bar ---------- */
#mkTop{ position:fixed; top:0; left:0; right:0; height:var(--mk-top-h); z-index:40;
  background:linear-gradient(#30303f,#26262f); color:#fff; display:flex; align-items:center;
  gap:14px; padding:0 14px; box-shadow:0 1px 0 rgba(0,0,0,.3); }
#mkTop .mk-cand{ font-size:13px; font-weight:600; opacity:.92; white-space:nowrap; }
#mkTop .mk-part{ flex:1; text-align:center; font-size:13.5px; font-weight:600; letter-spacing:.2px; }
#mkTimer{ display:flex; align-items:center; gap:7px; background:rgba(255,255,255,.13);
  border-radius:8px; padding:5px 11px; font-weight:700; font-size:14px; }
#mkTimer.low{ background:rgba(245,86,107,.28); animation:mkpulse 1s infinite; }
@keyframes mkpulse{ 50%{ opacity:.55; } }
#mkTop .mk-tools{ display:flex; gap:6px; }
#mkTop .mk-tool{ background:rgba(255,255,255,.1); border:0; color:#fff; font:inherit; font-size:12.5px;
  border-radius:7px; padding:6px 10px; cursor:pointer; display:flex; align-items:center; gap:5px; }
#mkTop .mk-tool:hover{ background:rgba(255,255,255,.22); }
#mkTop .mk-tool.on{ background:var(--mk-brand); }

/* ---------- main scroll area ---------- */
#mkMain{ position:fixed; top:var(--mk-top-h); bottom:var(--mk-nav-h); left:0; right:0;
  overflow:hidden; background:var(--mk-soft); }
.mpart{ display:none; height:100%; }
.mpart.active{ display:block; height:100%; }

/* Reading/two-column split (reuses .qs-body if present, else our own) */
.mpart .split{ display:flex; height:100%; }
.mpart .split > .col{ height:100%; overflow-y:auto; padding:18px 22px; }
.mpart .split > .col.left{ width:50%; border-right:2px solid var(--mk-line); background:var(--mk-paper); }
.mpart .split > .col.right{ width:50%; background:var(--mk-soft); }
.mpart .single{ height:100%; overflow-y:auto; padding:18px 26px; }
.mk-drag{ width:6px; cursor:col-resize; background:var(--mk-line); flex:none; }
.mk-drag:hover{ background:var(--mk-brand); }

/* native support for the existing section-test structure (.tsec/.qs-body/.qside) */
.mpart[data-type="reading"] .tsec{ height:100%; display:flex; flex-direction:column; }
.mpart .tsec-h{ flex:none; padding:10px 22px; background:var(--mk-bar); color:#fff; font-weight:700; font-size:14px; border-radius:0; }
.mpart .tsec-h .rng{ font-weight:500; opacity:.85; }
/* single-column modules (listening / writing / speaking) scroll as one column */
.mpart[data-type="listening"], .mpart[data-type="writing"], .mpart[data-type="speaking"]{ overflow-y:auto; }
.mpart[data-type="listening"] .tsec, .mpart[data-type="writing"] .tsec, .mpart[data-type="speaking"] .tsec{ max-width:900px; margin:0 auto; padding:0 26px 26px; }
.mpart[data-type="listening"] .tsec-h, .mpart[data-type="writing"] .tsec-h, .mpart[data-type="speaking"] .tsec-h{ margin:0 -26px 14px; }
.mpart .qs-body{ display:flex; flex:1; min-height:0; }
.mpart .qs-body > .qs-passage{ width:50%; overflow-y:auto; padding:18px 24px; border-right:2px solid var(--mk-line); background:var(--mk-paper); }
.mpart .qs-body > .qside{ width:50%; overflow-y:auto; padding:16px 22px; background:var(--mk-soft); }
.cefr{ display:inline-block; font-size:11px; font-weight:700; color:var(--mk-brand); background:#eef; border-radius:5px; padding:1px 7px; margin-left:8px; vertical-align:middle; }
/* listening content classes (so new mock sources need no inline <style>) */
.audiocard{ background:#f4f4fb; border:1px solid #e4e3f2; border-radius:12px; padding:14px 16px; margin:0 0 14px; }
.au-lab{ font-weight:700; color:var(--mk-brand); margin-bottom:8px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; align-items:baseline; }
.au-lab .voice{ font-weight:500; color:#71748f; font-size:13px; }
.au-note{ font-size:13px; color:#5a5c78; margin-top:8px; }
.formbox{ background:#f7f7fb; border:1px solid #e4e3f2; border-radius:12px; padding:12px 16px 8px; margin-top:8px; }
.formtitle{ text-align:center; font-weight:800; color:var(--mk-brand-strong,#3730a3); letter-spacing:.4px; margin-bottom:10px; }
.trap{ font-weight:700; color:#e0a300; }
/* writing content classes */
.wtask textarea{ width:100%; min-height:300px; font-family:"Lexend","Hind Siliguri",sans-serif; font-size:15px; line-height:1.7; border:1.5px solid var(--mk-line); border-radius:10px; padding:14px; resize:vertical; box-sizing:border-box; }
.wtask textarea:focus{ outline:none; border-color:var(--mk-brand); }
.wtask-h{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:4px; }
.wtask-h .tn{ font-weight:800; font-size:18px; color:var(--mk-brand); }
.wtask-h .meta{ font-size:13px; color:#71748f; font-weight:600; }
.wprompt{ background:#f4f4fb; border:1px solid #e4e3f2; border-radius:12px; padding:14px 17px; margin:10px 0 14px; font-size:15px; line-height:1.7; }
.wprompt .lead{ font-weight:700; color:#3730a3; display:block; margin-bottom:5px; }
.wprompt .instr{ display:block; margin-top:9px; font-size:13.5px; color:#71748f; font-style:italic; }
.wchart{ background:#fff; border:1px solid #e4e3f2; border-radius:12px; padding:14px; margin:0 0 14px; text-align:center; }
.wchart svg{ max-width:100%; height:auto; }
.wchart .cap{ font-size:12.5px; color:#71748f; margin-top:6px; }
.reveal-btn{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font:inherit; font-weight:700; font-size:15px; color:#fff; background:var(--mk-brand); border:0; padding:12px 22px; border-radius:11px; margin-top:14px; }
.reveal-btn:hover{ background:#3730a3; }
.reveal-btn .bn{ font-weight:600; opacity:.85; font-size:13px; }
.reveal-wrap{ display:none; margin-top:14px; }
.reveal-wrap.open{ display:block; }
.model{ background:#f6fbf8; border:1px solid #cdeadd; border-radius:12px; padding:14px 17px; margin-top:10px; line-height:1.7; font-size:14.5px; }
.model .mh{ font-weight:800; color:var(--mk-good); margin-bottom:6px; }
.model p{ margin:6px 0; }
.selfcheck{ background:#fff8e8; border:1px solid #f0e2bf; border-radius:12px; padding:12px 16px; margin-top:12px; }
.selfcheck .mh{ font-weight:800; color:#8a6d1a; margin-bottom:6px; }
.selfcheck ul{ margin:4px 0 0; padding-left:20px; } .selfcheck li{ margin:3px 0; font-size:14px; }
/* speaking content classes */
.spart-h{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:2px; }
.spart-h .pn{ font-weight:800; font-size:18px; color:var(--mk-brand); }
.spart-h .meta{ font-size:13px; color:#71748f; font-weight:600; }
.pdesc{ font-size:14.5px; color:#494c6b; margin:6px 0 12px; }
.scue{ border:2px solid var(--mk-brand); border-radius:14px; padding:18px 20px; margin:12px 0; }
.scue .ct{ font-weight:800; font-size:17px; color:#3730a3; margin-bottom:8px; }
.scue ul{ margin:6px 0 0; padding-left:22px; } .scue li{ margin:4px 0; }
.squestion{ padding:11px 0; border-top:1px solid #eee; }
.squestion:first-child{ border-top:0; }
.sq{ font-weight:700; font-size:15px; display:flex; gap:8px; align-items:baseline; }
.sq .qn{ background:var(--mk-brand); color:#fff; min-width:23px; height:23px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700; flex:none; }
.snote{ font-size:13.5px; color:var(--mk-accent); font-weight:600; margin:5px 0; }
.prepbar{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:12px 0 4px; }
.tbtn{ background:#fff; color:var(--mk-brand); border:1.5px solid var(--mk-brand); border-radius:9px; padding:9px 15px; font:inherit; font-weight:700; font-size:14px; cursor:pointer; }
.stime{ font-variant-numeric:tabular-nums; font-weight:700; color:var(--mk-brand); background:#eef; border-radius:8px; padding:6px 13px; }
.qrow{ margin-top:4px; }
.qbn, .qs-passage i, .qbn{ }
.qbn{ display:block; font-size:12.5px; color:#5a5c78; margin-top:4px; }
.qgroup-t{ font-weight:700; }
/* answer explanations (revealed after submit) */
.qexp b{ color:var(--mk-good); }

/* passage + question typography */
.qs-passage{ line-height:1.72; font-size:15.5px; }
.qs-passage .qs-ptitle{ display:block; font-size:19px; font-weight:700; margin:0 0 4px; }
.qs-passage .pn{ color:var(--mk-brand); margin-right:5px; }
.qside .qgroup{ background:var(--mk-paper); border:1px solid var(--mk-line); border-radius:12px;
  padding:12px 16px; margin:0 0 14px; }
.qgroup-t{ font-weight:700; font-size:15px; margin-bottom:2px; }
.qgroup-i{ font-size:13.5px; color:#5a5c78; margin-bottom:8px; }
.qs-list{ list-style:none; margin:0; padding:0; }
.quizq{ padding:9px 0; border-top:1px solid #eee; position:relative; scroll-margin-top:14px; }
.quizq:first-child{ border-top:0; }
.quizq .qq{ margin:0 0 6px; font-size:14.5px; display:flex; gap:8px; padding-right:62px; }
.quizq .qn{ background:var(--mk-brand); color:#fff; min-width:23px; height:23px; border-radius:6px;
  display:inline-flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700; flex:none; }
.quizq.flagged .qn{ background:var(--mk-warn); }
.quizq .qti{ font:inherit; font-size:14px; padding:7px 10px; border:1.5px solid var(--mk-line);
  border-radius:8px; width:100%; max-width:280px; }
.quizq .qti:focus{ outline:none; border-color:var(--mk-brand); }
.qopt{ display:flex; align-items:center; gap:8px; padding:5px 9px; border:1.5px solid var(--mk-line);
  border-radius:8px; margin:4px 0; cursor:pointer; font-size:14px; }
.qopt:hover{ border-color:var(--mk-brand); background:#f7f7ff; }
.qopt input{ accent-color:var(--mk-brand); }
.qexp{ display:none; }   /* hidden during test; shown in review */
.qopt.struck span{ opacity:.45; text-decoration:line-through; }
.qopt.struck{ background:#faf7f7; }

/* drag-and-drop matching */
.mk-dd .dd-pool{ display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 12px; padding:10px; background:var(--mk-soft);
  border:1px dashed var(--mk-line); border-radius:10px; }
.dd-item{ background:#fff; border:1.5px solid var(--mk-brand); color:var(--mk-brand); border-radius:8px;
  padding:6px 11px; font-size:13.5px; font-weight:600; cursor:grab; user-select:none; }
.dd-item.used{ opacity:.35; pointer-events:none; }
.dd-item.dragging{ opacity:.5; }
.dd-slot{ min-width:150px; min-height:34px; border:1.5px dashed var(--mk-line); border-radius:8px;
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px; font-size:13.5px; color:#9a9cb5; vertical-align:middle; }
.dd-slot.over{ border-color:var(--mk-brand); background:#f2f2ff; }
.dd-slot.filled{ border-style:solid; color:var(--mk-ink); font-weight:600; background:#fff; }
.dd-slot .dd-clear{ margin-left:auto; border:0; background:transparent; color:var(--mk-accent); cursor:pointer; font-size:15px; line-height:1; }

/* flag button per question */
.qflag{ position:absolute; top:9px; right:0; border:1px solid var(--mk-line); background:#fff;
  border-radius:6px; font-size:11px; padding:3px 7px; cursor:pointer; color:#7a7c98; display:flex; gap:4px; align-items:center; }
.qflag:hover{ border-color:var(--mk-warn); color:var(--mk-warn); }
.quizq.flagged .qflag{ background:var(--mk-warn); color:#fff; border-color:var(--mk-warn); }

/* ---------- highlight + notes ---------- */
.hl{ background:var(--mk-hl); border-radius:2px; }
.hl.hasnote{ background:var(--mk-note); border-bottom:2px solid var(--mk-accent); cursor:help; }
#mkSelTool{ position:absolute; z-index:60; display:none; background:#2b2b3a; border-radius:9px;
  padding:4px; gap:3px; box-shadow:0 6px 20px rgba(0,0,0,.28); }
#mkSelTool.show{ display:flex; }
#mkSelTool button{ background:transparent; border:0; color:#fff; font:inherit; font-size:12.5px;
  padding:6px 10px; border-radius:6px; cursor:pointer; display:flex; align-items:center; gap:5px; }
#mkSelTool button:hover{ background:rgba(255,255,255,.16); }
#mkNotePop{ position:absolute; z-index:61; display:none; background:#fff; border:1px solid var(--mk-line);
  border-radius:10px; box-shadow:0 8px 26px rgba(0,0,0,.2); padding:10px; width:250px; }
#mkNotePop.show{ display:block; }
#mkNotePop textarea{ width:100%; height:70px; font:inherit; font-size:13px; border:1px solid var(--mk-line);
  border-radius:7px; padding:7px; resize:none; }
#mkNotePop .np-row{ display:flex; justify-content:space-between; margin-top:7px; gap:6px; }
#mkNotePop button{ font:inherit; font-size:12.5px; border-radius:7px; padding:5px 11px; cursor:pointer; border:1px solid var(--mk-line); background:#fff; }
#mkNotePop button.save{ background:var(--mk-brand); color:#fff; border-color:var(--mk-brand); }
#mkNoteTip{ position:absolute; z-index:62; display:none; max-width:240px; background:#20202c; color:#fff;
  font-size:12.5px; line-height:1.5; padding:8px 11px; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,.3); }
#mkNoteTip.show{ display:block; }

/* ---------- bottom navigator ---------- */
/* model answers & reveals unlock only AFTER submit */
body.mock-mode:not(.mk-submitted) .reveal-btn{ display:none !important; }
body.mock-mode:not(.mk-submitted) .reveal-wrap{ display:none !important; }
body.mock-mode.mk-submitted .mk-locknote{ display:none; }
.mk-locknote{ font-size:12.5px; color:#8a7a52; background:#fff8e8; border:1px solid #f0e2bf; border-radius:8px; padding:8px 12px; margin-top:12px; }

/* exam audio (Listening — play once, no seek) */
.mk-examaudio{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:#fff; border:1px solid var(--mk-line); border-radius:11px; padding:11px 15px; margin:8px 0 4px; }
.mk-ea-btn{ background:var(--mk-brand); color:#fff; border:0; border-radius:8px; padding:9px 16px; font:inherit; font-weight:700; font-size:14px; cursor:pointer; }
.mk-ea-btn:disabled{ background:#9a9cb5; cursor:default; }
.mk-examaudio progress{ flex:1; min-width:120px; height:9px; }
.mk-ea-time{ font-variant-numeric:tabular-nums; font-size:13px; color:#5a5c78; }
.mk-ea-note{ font-size:11.5px; color:#9296b6; width:100%; }

/* speaking self-record */
.mk-rec{ display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin:11px 0 4px; }
.mk-rec-btn{ background:#fff; color:var(--mk-accent); border:1.5px solid var(--mk-accent); border-radius:9px; padding:8px 15px; font:inherit; font-weight:700; font-size:13.5px; cursor:pointer; }
.mk-rec-btn:hover{ background:#fff1f3; }
.mk-rec-stat{ font-size:12.5px; color:#5a5c78; }
.mk-rec-audio{ height:34px; max-width:260px; }

#mkNav{ position:fixed; bottom:0; left:0; right:0; height:var(--mk-nav-h); z-index:40;
  background:linear-gradient(#2b2b3a,#22222d); color:#fff; display:flex; align-items:center; gap:10px;
  padding:0 12px; box-shadow:0 -1px 0 rgba(0,0,0,.3); }
#mkNav .mk-parts{ display:flex; gap:6px; flex:1; overflow-x:auto; align-items:center; }
.mk-pchip{ display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.08); border-radius:9px;
  padding:5px 8px; flex:none; }
.mk-pchip .mk-plabel{ font-size:11.5px; font-weight:600; opacity:.85; margin-right:2px; white-space:nowrap; }
.mk-qbtn{ width:26px; height:26px; border-radius:6px; border:1px solid rgba(255,255,255,.25);
  background:transparent; color:#fff; font-size:12px; font-weight:600; cursor:pointer; position:relative; }
.mk-qbtn:hover{ border-color:#fff; }
.mk-qbtn.answered{ background:#fff; color:var(--mk-ink); border-color:#fff; }
.mk-qbtn.current{ box-shadow:0 0 0 2px var(--mk-accent); }
.mk-qbtn.flagged::after{ content:""; position:absolute; top:-3px; right:-3px; width:8px; height:8px;
  background:var(--mk-warn); border-radius:50%; }
#mkNav .mk-navbtns{ display:flex; gap:8px; flex:none; }
#mkNav .mk-nb{ background:rgba(255,255,255,.12); border:0; color:#fff; font:inherit; font-size:13px;
  font-weight:600; border-radius:8px; padding:8px 14px; cursor:pointer; }
#mkNav .mk-nb:hover{ background:rgba(255,255,255,.24); }
#mkNav .mk-nb.primary{ background:var(--mk-accent); }

/* ---------- audio bar (listening) ---------- */
.mk-audiobar{ background:var(--mk-paper); border:1px solid var(--mk-line); border-radius:12px;
  padding:12px 16px; margin:0 0 14px; display:flex; align-items:center; gap:14px; }
.mk-audiobar .mk-ab-state{ font-weight:600; font-size:14px; }
.mk-audiobar progress{ flex:1; height:8px; }
.mk-vol{ display:flex; align-items:center; gap:6px; font-size:13px; }

/* ---------- word count (writing) ---------- */
.mk-wtask textarea{ width:100%; min-height:340px; font:inherit; font-size:15px; line-height:1.7;
  border:1.5px solid var(--mk-line); border-radius:10px; padding:14px; resize:vertical; }
.mk-wc{ font-size:13px; color:#5a5c78; margin-top:6px; }
.mk-wc b{ color:var(--mk-brand); }

/* ---------- modals: settings, review, results ---------- */
.mk-modal{ position:fixed; inset:0; z-index:80; background:rgba(20,20,30,.5); display:none;
  align-items:center; justify-content:center; padding:20px; }
.mk-modal.show{ display:flex; }
.mk-modal .mk-card{ background:#fff; border-radius:16px; max-width:640px; width:100%; max-height:86vh;
  overflow-y:auto; padding:22px 24px; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.mk-card h2{ margin:0 0 12px; font-size:20px; }
.mk-review-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(38px,1fr)); gap:7px; margin:10px 0; }
.mk-rq{ height:34px; border-radius:7px; border:1px solid var(--mk-line); font-size:12.5px; font-weight:600;
  cursor:pointer; background:#fff; }
.mk-rq.answered{ background:var(--mk-brand); color:#fff; border-color:var(--mk-brand); }
.mk-rq.flagged{ box-shadow:inset 0 0 0 2px var(--mk-warn); }
.mk-legend{ display:flex; gap:16px; font-size:12.5px; color:#5a5c78; margin:6px 0 2px; flex-wrap:wrap; }
.mk-legend i{ width:13px; height:13px; border-radius:4px; display:inline-block; vertical-align:-2px; margin-right:5px; }
.mk-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }
.mk-actions button{ font:inherit; font-size:14px; font-weight:600; border-radius:9px; padding:9px 18px;
  cursor:pointer; border:1px solid var(--mk-line); background:#fff; }
.mk-actions button.primary{ background:var(--mk-accent); color:#fff; border-color:var(--mk-accent); }
.mk-set-row{ display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-top:1px solid var(--mk-line); }

/* font-size + contrast body classes */
body.mk-fs-large .qs-passage, body.mk-fs-large .quizq .qq, body.mk-fs-large .qopt{ font-size:16.5px; }
body.mk-fs-xl .qs-passage, body.mk-fs-xl .quizq .qq, body.mk-fs-xl .qopt{ font-size:18px; }
body.mk-contrast{ --mk-soft:#000; --mk-paper:#111; --mk-ink:#fff; --mk-line:#555; }
body.mk-contrast .qs-passage, body.mk-contrast .qgroup{ color:#fff; }
body.mk-contrast .hl{ color:#000; }

/* results scoreboard */
.mk-scoreband{ text-align:center; padding:16px; background:var(--mk-soft); border-radius:12px; margin:8px 0 14px; }
.mk-scoreband .bandnum{ font-size:46px; font-weight:800; color:var(--mk-brand); line-height:1; }
.mk-scoreband .bandsub{ font-size:14px; color:#5a5c78; margin-top:4px; }
.mk-skillrow{ display:flex; justify-content:space-between; padding:8px 2px; border-top:1px solid var(--mk-line); font-size:14.5px; }
.mk-skillrow b{ color:var(--mk-brand); }

@media (max-width:820px){
  .mpart .split{ flex-direction:column; }
  .mpart .split > .col{ width:100% !important; height:auto; }
  .mpart .split{ height:auto; overflow-y:auto; }
  #mkMain{ overflow-y:auto; }
  .mk-qbtn{ width:30px; height:30px; }
}