/* ── THEMES ── */
:root{
  /* IK-brand chrome tokens (canonical palette, self-contained — practice themes
     via body.dark/body.light class toggle, not [data-theme]). Light defaults here;
     body.dark overrides accents+neutrals below. Exam-paper --exam-* tokens are
     separate (see ~line 1110) and preserved for exam authenticity. */
  --acc:#8A2432;
  --accent:#8A2432;
  --acc2:rgba(138,36,50,0.15);
  --acc-hover:#A02A3A;
  --gold:#B56A12;
  --green:#278456;
  --red2:#C23B3B;
  --blue:#316A9B;
  /* Typography retired to canonical ik-tokens (--font-* / self-hosted ik-fonts.css), 2026-07-13. */
}
body.dark{--bg:#111114;--bg2:#19191D;--bg3:#202025;--bg4:#242429;--text:#F7F7F8;--text2:#B7B7C0;--text3:#85858F;--border:#303037;--border2:#3A3A42;--topbar:rgba(17,17,20,0.97);--acc:#B6495B;--accent:#B6495B;--acc2:rgba(182,73,91,0.15);--acc-hover:#C65A6B;--gold:#D69A43;--green:#55B982;--red2:#E06B6B;--blue:#72A7CE;}
/* Official IELTS exam theme 3 — yellow font on dark bg (high-contrast accessibility). */
body.yellow{--bg:#1a1a1a;--bg2:#232323;--bg3:#2b2b2b;--bg4:#343434;--text:#ffd633;--text2:#d9b437;--text3:#ab8f31;--border:#4a4326;--border2:#5c532e;--topbar:rgba(22,22,18,0.97);--acc:#ffd633;--accent:#ffd633;--acc2:rgba(255,214,51,0.16);--acc-hover:#ffe066;--gold:#ffd633;--green:#7ec98a;--red2:#ff8a8a;--blue:#8ab4d6;}
/* Dark mode — exam chrome overrides */
body.dark .exam-topbar {
  background: var(--bg2, #161616);
  border-bottom-color: var(--border, #2a2a2a);
  color: var(--text, #f0f0f0);
}
body.dark .exam-topbar-right {
  color: var(--text, #f0f0f0);
}
body.dark .exam-topbar-left {
  color: var(--text, #f0f0f0);
}
body.dark .inspera-username { color: var(--text, #f0f0f0); }
body.dark .inspera-audio-row { color: var(--text2, #aaa); }
body.dark .notes-btn,
body.dark .fz-btn {
  background: var(--bg3, #1e1e1e);
  color: var(--text, #f0f0f0);
  border-color: var(--border2, #555);
}
body.dark .notes-btn:hover,
body.dark .fz-btn:hover { background: var(--bg4, #242424); }
body.dark .tb-icon { color: var(--text2, #aaa); }
body.dark .r-passage-header {
  background: var(--bg3, #1e1e1e);
  border-color: var(--border, #2a2a2a);
  color: var(--text, #f0f0f0);
}
body.dark .r-bottom-bar,
body.dark .prac-bottom-bar,
body.dark .exam-bottombar,
body.dark #pracBottomBar,
body.dark .r-bottom-nav-btns,
body.dark [id*="bottomNav"],
body.dark [class*="bottom-nav"] {
  background: var(--bg2, #161616);
  border-top-color: var(--border, #2a2a2a);
  color: var(--text, #f0f0f0);
}
body.light{--bg:#FFFFFF;--bg2:#F7F7F9;--bg3:#EDEDF0;--bg4:#E1E1E6;--text:#18181B;--text2:#61616B;--text3:#92929D;--border:#E7E7EB;--border2:#D4D4D9;--topbar:rgba(255,255,255,0.97);}
body.light .gate-card{background:#fff;border-color:#ddd}
body.light .gate-input{background:#f5f5f5;color:#111;border-color:#ddd}
body.light .guest-banner{background:#fff5f5;border-color:#fecaca}
body.light .a11y-bar{background:#f0f0f0;border-color:#ddd}
body.light .pr-card{background:#fff}
body.light .filter-bar{background:#fff}
body.light .results-head{border-color:#e5e7eb}
body.light .pr-meta-item{background:#f7f7f7;border-color:#e5e7eb}
body.light .filter-select{background:#fff;color:#111;border-color:#ccc}
body.light .q-blank-input{background:#fff;color:#111;border-bottom-color:#ccc}
body.light .q-heading-select{background:#fff;color:#111}
body.light .practice-passage{background:#fff}
body.light .passage-body p{color:#222}
body.light .q-opt{color:#333;border-color:#ccc}
body.light .q-opt:hover:not(:disabled){background:#eee;color:#111}

/* font sizes */
body.fs-sm .r-para-text,body.fs-sm .r-tfng-statement,body.fs-sm .r-tfng-radio-option,body.fs-sm .r-mcq-options,body.fs-sm .r-completion-stem,body.fs-sm .r-completion-stem-inline,body.fs-sm .r-summary-prose,body.fs-sm .r-short-q,body.fs-sm .passage-body p,body.fs-sm .q-text,body.fs-sm .q-opt,body.fs-sm .r-qgroup .r-qgroup-range,body.fs-sm .r-qgroup .r-qgroup-instruction,body.fs-sm .r-qgroup .tc-table{font-size:13px!important;line-height:1.5!important}
body.fs-md .r-para-text,body.fs-md .r-tfng-statement,body.fs-md .r-tfng-radio-option,body.fs-md .r-mcq-options,body.fs-md .r-completion-stem,body.fs-md .r-completion-stem-inline,body.fs-md .r-summary-prose,body.fs-md .r-short-q,body.fs-md .passage-body p,body.fs-md .q-text,body.fs-md .q-opt,body.fs-md .r-qgroup .r-qgroup-range,body.fs-md .r-qgroup .r-qgroup-instruction,body.fs-md .r-qgroup .tc-table{font-size:16px!important;line-height:1.5!important}
body.fs-lg .r-para-text,body.fs-lg .r-tfng-statement,body.fs-lg .r-tfng-radio-option,body.fs-lg .r-mcq-options,body.fs-lg .r-completion-stem,body.fs-lg .r-completion-stem-inline,body.fs-lg .r-summary-prose,body.fs-lg .r-short-q,body.fs-lg .passage-body p,body.fs-lg .q-text,body.fs-lg .q-opt,body.fs-lg .r-qgroup .r-qgroup-range,body.fs-lg .r-qgroup .r-qgroup-instruction,body.fs-lg .r-qgroup .tc-table{font-size:19px!important;line-height:1.6!important}
body.fs-xl .r-para-text,body.fs-xl .r-tfng-statement,body.fs-xl .r-tfng-radio-option,body.fs-xl .r-mcq-options,body.fs-xl .r-completion-stem,body.fs-xl .r-completion-stem-inline,body.fs-xl .r-summary-prose,body.fs-xl .r-short-q,body.fs-xl .passage-body p,body.fs-xl .q-text,body.fs-xl .q-opt,body.fs-xl .r-qgroup .r-qgroup-range,body.fs-xl .r-qgroup .r-qgroup-instruction,body.fs-xl .r-qgroup .tc-table{font-size:22px!important;line-height:1.65!important}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-weight:300;min-height:100vh;overflow-x:hidden;transition:background 0.2s,color 0.2s}
button,input,select,textarea{font-family:var(--font-body)}
body.dark{background-image:radial-gradient(ellipse 70% 40% at 95% 0%,rgba(182,73,91,0.07),transparent)}

.screen{display:none;min-height:100vh;animation:fadeIn 0.2s ease}
.screen.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}

/* ── AUTH ── */
#screen-auth.active{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:48px 16px}
.gate-logo{font-family:var(--font-heading);font-weight:800;font-size:13px;letter-spacing:3px;color:var(--text3);margin-bottom:28px;display:flex;align-items:center;gap:10px}
.gate-logo-box{width:28px;height:28px;background:var(--acc);display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;font-family:var(--font-heading);font-weight:800}
.gate-card{width:100%;max-width:420px;background:var(--bg2);border-top:4px solid var(--acc);padding:28px}
.gate-eyebrow{display:inline-block;background:var(--acc);color:#fff;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:3px 10px;margin-bottom:12px}
.gate-title{font-family:var(--font-heading);font-weight:800;font-size:30px;letter-spacing:2px;margin-bottom:4px}
.gate-title span{color:var(--acc)}
.gate-sub{font-size:13px;color:var(--text3);margin-bottom:18px;line-height:1.6}
.gate-label{display:block;font-size:10px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;color:var(--text3);margin-bottom:5px}
.gate-input{width:100%;border:1px solid var(--border);border-bottom:2px solid var(--border2);padding:10px 12px;font-size:14px;background:var(--bg);color:var(--text);outline:none;transition:border-color 0.15s;margin-bottom:10px}
.gate-input:focus{border-bottom-color:var(--acc)}
.gate-input::placeholder{color:var(--text3)}
.gate-error{display:none;color:var(--acc);font-size:12px;font-weight:700;margin-bottom:10px;padding:6px 10px;background:rgba(200,16,46,0.1);border-left:3px solid var(--acc)}
.btn-login{width:100%;background:var(--acc);color:#fff;border:none;padding:13px;font-family:var(--font-heading);font-weight:800;font-size:17px;letter-spacing:4px;cursor:pointer;transition:background 0.15s;margin-bottom:10px;min-height:44px}
.btn-login:hover{background:var(--acc-hover)}
.btn-login:disabled{background:var(--bg4);color:var(--text3);cursor:not-allowed}
.auth-divider{display:flex;align-items:center;gap:10px;margin:4px 0 10px}
.auth-divider-line{flex:1;height:1px;background:var(--border)}
.auth-divider-text{font-size:10px;color:var(--text3);letter-spacing:1px;text-transform:uppercase}
.btn-guest{width:100%;background:transparent;color:var(--text3);border:1px solid var(--border);padding:10px;font-size:12px;font-weight:700;cursor:pointer;transition:all 0.15s;min-height:44px}
.btn-guest:hover{border-color:var(--border2);color:var(--text2)}
.guest-note{font-size:11px;color:var(--text3);text-align:center;margin-top:8px;line-height:1.5}
.guest-note span{color:var(--acc)}

/* ── TOPBAR ── */
.topbar{background:var(--topbar);border-bottom:1px solid var(--border);padding:0 22px;height:52px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:200;backdrop-filter:blur(10px)}
.topbar-logo{font-family:var(--font-heading);font-weight:800;font-size:17px;letter-spacing:2.5px;color:var(--text)}
.topbar-logo span{color:var(--acc)}
.topbar-right{display:flex;align-items:center;gap:8px}
.tb-name{font-size:12px;color:var(--text2)}
.tb-name strong{color:var(--text)}
.badge{font-size:9px;font-weight:900;letter-spacing:1px;text-transform:uppercase;padding:3px 8px;border-radius:2px}
.badge-student{background:var(--acc2);color:var(--acc);border:1px solid rgba(200,16,46,0.3)}
.badge-guest{background:rgba(255,255,255,0.05);color:var(--text3);border:1px solid var(--border2)}
.btn-sm{background:transparent;color:var(--text3);border:1px solid var(--border);padding:4px 10px;font-size:11px;font-weight:700;cursor:pointer;transition:all 0.15s}
.btn-sm:hover{border-color:var(--border2);color:var(--text2)}

/* ── GUEST BANNER ── */
.guest-banner{background:#1a0808;border-bottom:1px solid #2a1010;padding:7px 22px;display:none;align-items:center;justify-content:space-between;font-size:12px}
.guest-banner.show{display:flex}
.guest-banner-text{color:var(--text2)}
.guest-banner-text span{color:var(--acc);font-weight:700}
.guest-banner-btn{background:var(--acc);color:#fff;border:none;font-family:var(--font-heading);font-weight:800;font-size:12px;letter-spacing:1px;padding:4px 12px;cursor:pointer}

/* ── A11Y BAR ── */
.a11y-bar{background:var(--bg2);border-bottom:1px solid var(--border);padding:5px 22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.a11y-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:1.5px;font-weight:700}
.theme-toggle,.fs-group{display:flex;border:1px solid var(--border2);overflow:hidden}
.theme-btn,.fs-btn{background:transparent;color:var(--text3);border:none;padding:4px 12px;font-size:11px;font-weight:700;cursor:pointer;transition:all 0.15s}
.theme-btn.active,.fs-btn.active{background:var(--acc);color:#fff}
body.fs-sm .ielts-listening-question-item,body.fs-sm .ielts-listening-section-content-wrapper,body.fs-sm .mc-line,body.fs-sm .ielts-listening-option,body.fs-sm .lmf-stmt-cell,body.fs-sm .ielts-listening-questions .r-qgroup-range,body.fs-sm .ielts-listening-questions .r-qgroup-instruction,body.fs-sm .ielts-listening-questions .tc-table{font-size:20px!important;line-height:1.8!important}
body.fs-md .ielts-listening-question-item,body.fs-md .ielts-listening-section-content-wrapper,body.fs-md .mc-line,body.fs-md .ielts-listening-option,body.fs-md .lmf-stmt-cell,body.fs-md .ielts-listening-questions .r-qgroup-range,body.fs-md .ielts-listening-questions .r-qgroup-instruction,body.fs-md .ielts-listening-questions .tc-table{font-size:23px!important;line-height:1.85!important}
body.fs-lg .ielts-listening-question-item,body.fs-lg .ielts-listening-section-content-wrapper,body.fs-lg .mc-line,body.fs-lg .ielts-listening-option,body.fs-lg .lmf-stmt-cell,body.fs-lg .ielts-listening-questions .r-qgroup-range,body.fs-lg .ielts-listening-questions .r-qgroup-instruction,body.fs-lg .ielts-listening-questions .tc-table{font-size:27px!important;line-height:1.95!important}
body.fs-xl .ielts-listening-question-item,body.fs-xl .ielts-listening-section-content-wrapper,body.fs-xl .mc-line,body.fs-xl .ielts-listening-option,body.fs-xl .lmf-stmt-cell,body.fs-xl .ielts-listening-questions .r-qgroup-range,body.fs-xl .ielts-listening-questions .r-qgroup-instruction,body.fs-xl .ielts-listening-questions .tc-table{font-size:31px!important;line-height:2!important}

/* ── FILTER SCREEN ── */
.filter-wrap{max-width:1040px;margin:0 auto;padding:48px 24px 96px}
.hero-eyebrow{font-family:var(--font-heading);font-weight:800;color:var(--acc);letter-spacing:4px;font-size:11px;margin-bottom:8px}
.hero-title{font-family:var(--font-heading);font-weight:800;font-size:clamp(52px,7vw,88px);line-height:0.88;letter-spacing:1px;margin-bottom:14px}
.hero-title em{color:var(--acc);font-style:normal}
.hero-sub{font-size:15px;color:var(--text2);margin-bottom:34px;max-width:650px;line-height:1.75;font-weight:400}

.filter-bar{background:linear-gradient(180deg,var(--bg2),var(--bg));border:1px solid var(--border);border-top:3px solid var(--acc);padding:22px 24px;margin-bottom:30px;box-shadow:0 18px 50px rgba(0,0,0,.18)}
.filter-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.filter-group{display:flex;flex-direction:column;gap:5px}
.filter-label{font-size:10px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;color:var(--text3)}
.filter-hint{font-size:11px;color:var(--text3);margin-top:3px}
.section-toggle{display:flex;border:1.5px solid var(--acc);overflow:hidden;border-radius:999px}
.section-btn{background:transparent;color:var(--text3);border:none;padding:9px 18px;font-family:var(--font-heading);font-weight:800;font-size:14px;letter-spacing:2px;cursor:pointer;transition:all 0.15s;min-height:44px}
.section-btn:hover,.section-btn:focus{color:var(--acc);outline:none}
.section-btn.active{background:var(--acc);color:#fff}
.filter-select{width:100%;min-width:200px;background:var(--bg);border:1px solid var(--border2);border-bottom:2px solid var(--border2);color:var(--text);padding:9px 12px;font-size:13px;outline:none;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;min-height:44px}
.filter-select:focus{border-bottom-color:var(--acc)}
.btn-find{background:var(--acc);color:#fff;border:none;padding:10px 28px;font-family:var(--font-heading);font-weight:800;font-size:16px;letter-spacing:3px;cursor:pointer;transition:background 0.15s;min-height:44px;white-space:nowrap;align-self:flex-end}
.btn-find:hover{background:var(--acc-hover)}
.btn-find:disabled{background:var(--bg4);color:var(--text3);cursor:not-allowed}

/* results */
.results-head{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.results-title{font-family:var(--font-heading);font-weight:800;font-size:24px;letter-spacing:1.5px}
.results-count{font-size:11px;color:var(--text3);letter-spacing:1px;text-transform:uppercase}

.pr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;margin-bottom:42px}
.pr-card{background:linear-gradient(180deg,var(--bg2),var(--bg));border:1px solid var(--border);border-radius:8px;padding:22px;cursor:pointer;transition:border-color .18s,background .18s,transform .18s,box-shadow .18s;position:relative;overflow:hidden;min-height:156px}
.pr-card:hover{border-color:rgba(200,16,46,.7);background:var(--bg3);transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,0,0,.22)}
.pr-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform 0.18s}
.pr-card:hover::after{transform:scaleX(1)}
.pr-card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.pr-type-chip{font-family:var(--font-heading);font-weight:800;font-size:10px;letter-spacing:1.6px;padding:3px 9px;background:var(--acc2);color:var(--acc);border:1px solid rgba(200,16,46,0.3);border-radius:999px}
.pr-q-badge{font-size:11px;color:var(--text3)}
.pr-card-title{font-family:var(--font-heading);font-weight:800;font-size:21px;letter-spacing:0.5px;line-height:1.12;margin-bottom:10px}
.pr-card-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.pr-meta-item{font-size:10px;color:var(--text2);border:1px solid var(--border);background:rgba(255,255,255,.03);padding:3px 8px;border-radius:999px}
.pr-meta-item strong{color:var(--text);font-weight:700}
.pr-score-row{margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.pr-score-label{font-size:10px;color:var(--text2);display:flex;justify-content:space-between;margin-bottom:4px}
.pr-score-bar-bg{background:var(--border);height:2px}
.pr-score-bar{background:var(--acc);height:2px;transition:width 0.5s}

/* skeleton */
.skeleton-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.skeleton-card{background:var(--bg2);border:1px solid var(--border);padding:20px;height:140px;position:relative;overflow:hidden}
.skeleton-card::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.04) 50%,transparent 100%);animation:shimmer 1.5s infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* Part/Passage card grid (mode B) */
.part-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin:10px 0 0}
.test-group-label{grid-column:1/-1;font-size:9px;font-weight:900;letter-spacing:2px;text-transform:uppercase;color:var(--text3);margin-top:12px;padding-bottom:4px;border-bottom:1px solid var(--border)}
.part-card{background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:18px 14px 14px;cursor:pointer;transition:border-color .15s,background .15s,transform .15s;text-align:center;position:relative}
.part-card:hover{border-color:rgba(200,16,46,.5);background:var(--bg4);transform:translateY(-1px)}
.part-card.selected{border:2px solid var(--acc);background:var(--bg4)}
.part-card-num{font-family:var(--font-heading);font-weight:800;font-size:48px;line-height:1;color:var(--acc);margin-bottom:2px}
.part-card-kind{font-size:9px;font-weight:900;letter-spacing:2px;text-transform:uppercase;color:var(--text2);margin-bottom:6px}
.part-card-test{font-size:10px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Question Type card grid (mode C) */
.type-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin:10px 0 0}
.type-card{background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:12px 14px 10px;cursor:pointer;transition:border-color .15s,background .15s,transform .15s;position:relative;min-height:80px;display:flex;flex-direction:column;justify-content:space-between}
.type-card:hover{border-color:rgba(200,16,46,.5);background:var(--bg4);transform:translateY(-1px)}
.type-card.selected{border:2px solid var(--acc);background:var(--bg4)}
.type-card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
.type-section-pill{font-size:8px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;padding:2px 6px;background:var(--bg2);color:var(--text3);border:1px solid var(--border2);border-radius:2px}
.type-card-label{font-family:var(--font-heading);font-weight:800;font-size:18px;letter-spacing:0.3px;line-height:1.1;color:var(--text);flex:1;margin-bottom:6px}
.type-card-count{font-family:var(--font-heading);font-weight:800;font-size:12px;letter-spacing:1px;color:var(--acc);text-align:right}

/* ── Practice Filter Landing Redesign ── */

.filter-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 24px 40px;
}

/* Hero */
.pf-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
  min-height: 180px;
}
.pf-hero-left { flex: 1; }
.pf-eyebrow {
  font-size: 11px;
  font-weight: 900;
  font-family:var(--font-exam);
  letter-spacing: 3px;
  color: var(--acc);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.pf-title {
  font-family:var(--font-heading);font-weight:800;
  font-size: clamp(48px, 8vw, 80px);
  line-height: 0.95;
  color: var(--text, #111);
  margin-bottom: 16px;
}
.pf-title-accent { color: var(--acc); }
.pf-sub {
  font-size: 15px;
  font-family:var(--font-exam);
  color: var(--text2, #555);
  max-width: 380px;
  line-height: 1.5;
}

/* Decorative right side */
.pf-hero-right {
  flex: 0 0 220px;
  height: 180px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pf-deco-book {
  width: 120px;
  height: 140px;
  border: 2px solid rgba(192,57,43,0.15);
  border-radius: 4px 12px 12px 4px;
  position: relative;
  background: linear-gradient(135deg,
    rgba(192,57,43,0.04) 0%,
    rgba(192,57,43,0.08) 100%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 16px;
  box-shadow: 4px 4px 0 rgba(192,57,43,0.08);
}
.pf-deco-page-1, .pf-deco-page-2 {
  position: absolute;
  top: 8px;
  width: 50%;
  height: calc(100% - 16px);
  border-right: 1px solid rgba(192,57,43,0.15);
}
.pf-deco-page-1 { left: 0; }
.pf-deco-page-2 { right: 0; border-right: none;
  border-left: 1px solid rgba(192,57,43,0.15); }
.pf-deco-line {
  height: 2px;
  background: rgba(192,57,43,0.15);
  border-radius: 2px;
  width: 80%;
}
.pf-deco-dots {
  position: absolute;
  top: 0; right: -30px;
  width: 80px; height: 80px;
  background-image: radial-gradient(
    circle, rgba(192,57,43,0.2) 1px, transparent 1px);
  background-size: 10px 10px;
}

/* Mode cards */
.pf-mode-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.pf-card {
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 12px;
  padding: 20px;
  font-family:var(--font-exam);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  background: var(--bg, #fff);
}
.pf-card:hover {
  border-color: var(--acc);
  box-shadow: 0 4px 20px rgba(192,57,43,0.08);
  transform: translateY(-2px);
}
.pf-card.pf-card--active {
  border-color: var(--acc);
  box-shadow: 0 4px 20px rgba(192,57,43,0.08);
}
.pf-card-icon {
  width: 48px; height: 48px;
  border-radius: 10px;
  background: rgba(192,57,43,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--acc);
}
.pf-card-title {
  font-size: 20px;
  font-weight: 800;
  font-family:var(--font-exam);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text, #111);
}
.pf-card-desc {
  font-size: 13px;
  font-family:var(--font-exam);
  color: var(--text2, #666);
  line-height: 1.4;
}
.pf-card-features {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  font-family:var(--font-exam);
  color: var(--text2, #666);
}
.pf-type-chip {
  display: inline-block;
  background: rgba(192,57,43,0.08);
  color: var(--acc);
  font-size: 10px;
  font-weight: 700;
  font-family:var(--font-exam);
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 20px;
  margin-right: 3px;
}
.pf-card-cta {
  margin-top: auto;
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  font-family:var(--font-exam);
  letter-spacing: 0.5px;
  cursor: pointer;
  border: none;
  background: var(--acc);
  color: #fff;
  transition: background 0.15s;
}
.pf-card-cta:hover { background: #a93226; }
.pf-card-cta--outline {
  background: transparent;
  color: var(--acc);
  border: 2px solid var(--acc);
}
.pf-card-cta--outline:hover {
  background: var(--acc);
  color: #fff;
}

/* Section row */
.pf-section-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

/* Also practice */
.pf-also-practice {
  padding: 20px 0 16px;
  border-top: 1px solid var(--border, #e5e5e5);
  margin-top: 16px;
}
.pf-also-label {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text3, #aaa);
  font-family:var(--font-exam);
  margin-bottom: 14px;
}
.pf-also-link {
  font-size: 12px;
  font-weight: 700;
  font-family:var(--font-exam);
  color: #666;
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid var(--border2, #ddd);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: border-color 0.15s, color 0.15s;
}
.pf-also-link:hover {
  border-color: var(--acc);
  color: var(--acc);
}
.pf-also-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Active card state — JS should add pf-card--active */
/* Responsive */
@media (max-width: 640px) {
  .pf-mode-cards { grid-template-columns: 1fr; }
  .pf-hero-right { display: none; }
  .pf-title { font-size: 48px; }
}

.empty-state{text-align:center;padding:56px 20px;color:var(--text3)}
.empty-icon{font-size:36px;margin-bottom:12px;opacity:0.4}
.empty-title{font-family:var(--font-heading);font-weight:800;font-size:22px;letter-spacing:2px;margin-bottom:6px}
.empty-sub{font-size:13px;line-height:1.6}

/* ── PRACTICE SCREEN ── */
.prac-topbar-label{font-family:var(--font-exam);font-weight:800;font-size:10px;letter-spacing:2px;color:var(--text3);border-left:1px solid var(--border2);padding-left:12px}
.prac-wrap{display:flex;gap:0;min-height:calc(100vh - 52px)}
@media(max-width:860px){.prac-wrap{flex-direction:column}}

/* Reading 2-pane — 52px exam-topbar only (mock-exam pattern) */
.r-passage-pane{width:52%;min-width:280px;max-width:70%;overflow-y:auto;border-right:1px solid var(--border);background:var(--bg);flex-shrink:0;max-height:calc(100vh - 52px);position:sticky;top:52px}
@media(max-width:860px){.r-passage-pane{width:100%!important;max-height:none;position:static;border-right:none;border-bottom:1px solid var(--border)}}
.r-passage-inner{padding:30px 34px 70px}
.r-passage-title{font-weight:700;font-size:1rem;margin:0.5rem 0 1rem}
.r-passage-header{width:100%;background:var(--surface-2,#f5f5f5);border:1px solid var(--border,#ddd);border-radius:6px;padding:0.6rem 1rem;margin-bottom:1rem;box-sizing:border-box}
.r-part-label{font-weight:700;font-size:0.95rem;color:var(--text,#111)}
.r-part-title{font-family:var(--font-exam);font-weight:800;font-size:22px;letter-spacing:1px;color:var(--text);margin-bottom:4px}
.r-part-sub{font-size:0.875rem;color:var(--text2,#555);margin-top:0.15rem}
#rReadingHeader{padding:0.5rem 1rem 0}
.r-passage-source{font-size:12px;color:var(--text3);font-style:italic;margin:4px 0 12px}
.r-questions-pane{flex:1;overflow-y:auto;background:var(--bg);min-width:260px;max-height:calc(100vh - 52px);position:sticky;top:52px}
@media(max-width:860px){.r-questions-pane{max-height:none;position:static}}
.r-questions-inner{padding:22px 26px 70px;font-family:var(--font-exam)}

/* Listening single-pane */
.listen-pane{padding:28px 24px 110px;width:100%}

/* passage */
.prac-back{background:transparent;border:none;color:var(--text2);font-size:12px;font-weight:700;cursor:pointer;padding:0;margin-bottom:18px;display:flex;align-items:center;gap:5px;transition:color 0.15s}
.prac-back:hover{color:var(--text)}
.passage-title{font-family:var(--font-exam);font-weight:800;font-size:clamp(22px,3.5vw,36px);line-height:0.95;letter-spacing:1px;margin-bottom:14px}
.passage-body p{font-size:16px;line-height:1.5;color:var(--text);margin-bottom:15px;font-family:var(--font-exam)}
.passage-body p:last-child{margin-bottom:0}
.para-label{font-family:var(--font-exam);font-weight:800;color:var(--text);font-size:15px;letter-spacing:2px;margin-right:6px}

/* audio notice */
.audio-notice{background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--gold);padding:12px 16px;margin-bottom:20px;font-size:13px;color:var(--text2);line-height:1.6}
.audio-notice strong{color:var(--gold)}

/* q-pane header */
.q-pane-head{padding:14px 18px 10px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg2);z-index:10}
.q-pane-title{font-family:var(--font-exam);font-weight:800;font-size:16px;letter-spacing:1.5px;margin-bottom:2px}
.q-sections{padding:14px 18px 100px}

/* word bank */
.word-bank{background:var(--bg3);border:1px solid var(--border2);padding:12px 14px;margin-bottom:16px}
.wb-label{font-size:10px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;color:var(--text3);margin-bottom:7px}
.wb-words{display:flex;flex-wrap:wrap;gap:6px}
.wb-word{font-size:12px;padding:3px 10px;background:var(--bg2);border:1px solid var(--border2);color:var(--text2)}

/* headings list */
.headings-list{background:var(--bg3);border:1px solid var(--border2);padding:12px 14px;margin-bottom:16px}
.hl-list-label{font-size:10px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;color:var(--text3);margin-bottom:7px}
.hl-list-item{font-size:12px;color:var(--text2);padding:3px 0;line-height:1.4}
.hl-list-item strong{color:var(--text)}

/* questions */
.q-block{margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.q-block:last-child{border-bottom:none}
.q-num{font-size:15px;color:var(--text);font-weight:900;margin-bottom:5px}
.q-text{font-size:16px;color:var(--text);line-height:1.55;margin-bottom:8px}
.q-opts{display:flex;flex-direction:column;gap:4px}
.q-opt{background:transparent;border:1px solid var(--border);color:var(--text2);text-align:left;padding:8px 11px;font-size:13px;cursor:pointer;transition:all 0.12s;border-radius:2px;width:100%}
.q-opt:hover:not(:disabled){border-color:var(--border2);background:var(--bg3);color:var(--text)}
.q-opt.selected{border-color:var(--acc);background:var(--acc2);color:var(--text)}
.q-opt.correct{border-color:var(--green);background:rgba(16,163,127,0.09);color:var(--green)}
.q-opt.wrong{border-color:var(--red2);background:rgba(185,28,28,0.07);color:var(--red2)}
.q-opt:disabled{cursor:default}
.q-opt-letter{font-family:var(--font-exam);font-weight:800;font-size:12px;letter-spacing:1px;color:var(--text3);margin-right:6px}
.q-opt.selected .q-opt-letter,.q-opt.correct .q-opt-letter,.q-opt.wrong .q-opt-letter{color:inherit}
.q-opt-cb{width:15px;height:15px;flex-shrink:0;margin-right:6px;accent-color:var(--acc)}

/* completion / blank inputs */
.q-completion{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:4px}
.q-blank-pre,.q-blank-post{font-size:13px;color:var(--text);line-height:1.6}
.q-blank-input{background:var(--bg);border:none;border-bottom:2px solid var(--border2);color:var(--text);padding:5px 4px;font-size:13px;width:120px;outline:none;transition:border-color 0.15s,color 0.15s}
.q-blank-input:focus{border-bottom-color:var(--acc)}
.q-blank-input.correct{border-bottom-color:var(--green);color:var(--green);background:rgba(16,163,127,0.12);font-weight:700}
.q-blank-input.wrong{border-bottom-color:var(--red2);color:var(--red2);background:rgba(220,38,38,0.10);font-weight:700}
.q-blank-input:disabled{cursor:default}
.q-answer-hint{font-size:11px;color:var(--text3);margin-top:3px;display:none}
.q-answer-hint.show{display:block}
.q-answer-hint .correct-val{display:inline-flex;color:#fff;background:var(--green);font-weight:700;padding:2px 9px;border-radius:20px;margin-left:2px}

/* summary text */
.summary-text{font-size:14px;color:var(--text);line-height:2;margin-bottom:8px;font-family:var(--font-exam)}

/* headings row */
.q-heading-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:10px}
.q-heading-para-label{font-family:var(--font-exam);font-weight:800;font-size:16px;color:var(--text);min-width:22px;padding-top:4px}
.q-heading-para{font-size:13px;color:var(--text2);flex:1;line-height:1.5;padding-top:4px}
.q-heading-select{background:var(--bg);border:1px solid var(--border2);color:var(--text);padding:6px 9px;font-size:13px;cursor:pointer;flex:1;min-width:0;outline:none;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;padding-right:24px;transition:border-color 0.15s}
.q-heading-select:focus{border-color:var(--acc)}
.q-heading-select.correct{border-color:var(--green);color:var(--green)}
.q-heading-select.wrong{border-color:var(--red2);color:var(--red2)}
.q-heading-select:disabled{cursor:default}

/* table completion */
.q-table{width:100%;border-collapse:collapse;margin-bottom:8px;font-size:13px}
.q-table th{background:var(--bg3);border:1px solid var(--border2);padding:7px 10px;font-family:var(--font-exam);font-weight:800;font-size:12px;letter-spacing:1px;color:var(--text2);text-align:left;font-weight:400}
.q-table td{border:1px solid var(--border2);padding:7px 10px;color:var(--text);vertical-align:middle}
.q-table .gap-cell{min-width:100px}

/* submit bar */
.prac-submit-bar{background:var(--bg2);border-top:2px solid var(--border);padding:12px 18px;display:flex;flex-direction:column;gap:6px;z-index:50}
.btn-submit{background:var(--acc);color:#fff;border:none;font-family:var(--font-heading);font-weight:800;font-size:16px;letter-spacing:3px;padding:12px;cursor:pointer;transition:background 0.15s;width:100%;min-height:44px}
.btn-submit:hover{background:var(--acc-hover)}
.btn-submit:disabled{background:var(--bg4);color:var(--text3);cursor:not-allowed}
.prac-answered{font-size:10px;color:var(--text3);text-align:center;letter-spacing:1px;text-transform:uppercase}

/* post-check actions */
.post-check-bar{display:none;gap:10px;padding:12px 18px;background:var(--bg2);border-top:1px solid var(--border);z-index:50;flex-wrap:wrap}
.post-check-bar.show{display:flex}
.btn-primary{background:var(--acc);color:#fff;border:none;font-family:var(--font-heading);font-weight:800;font-size:14px;letter-spacing:2px;padding:11px 22px;cursor:pointer;transition:background 0.15s;flex:1;min-width:140px;min-height:44px}
.btn-primary:hover{background:var(--acc-hover)}
.btn-outline{background:transparent;color:var(--text2);border:1px solid var(--border2);font-family:var(--font-heading);font-weight:800;font-size:14px;letter-spacing:2px;padding:11px 22px;cursor:pointer;transition:all 0.15s;flex:1;min-width:140px;min-height:44px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.btn-outline:hover{border-color:var(--text);color:var(--text)}
.btn-next-group{background:#16a34a;color:#fff;border:none;font-family:var(--font-heading);font-weight:800;font-size:14px;letter-spacing:2px;padding:11px 22px;cursor:pointer;transition:background 0.15s;flex:1;min-width:140px;min-height:44px}
.btn-next-group:hover{background:#15803d}

/* score banner — premium: band-first, gold accent */
.score-banner{background:linear-gradient(135deg,var(--bg4) 0%,var(--bg3) 100%);border:1px solid var(--border2);border-left:4px solid var(--gold);border-radius:6px;padding:18px 22px;margin-bottom:14px;display:none;box-shadow:0 4px 18px rgba(0,0,0,.12)}
.score-banner.show{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.score-band-wrap{display:flex;flex-direction:column;align-items:center;padding-right:20px;border-right:1px solid var(--border2)}
.score-band-kicker{font-size:10px;font-weight:900;letter-spacing:1.6px;text-transform:uppercase;color:var(--text3)}
.score-big{font-family:var(--font-heading);font-weight:800;font-size:52px;color:var(--gold);line-height:1;text-shadow:0 2px 14px rgba(176,141,87,.28)}
.score-big span{color:var(--text3);font-size:20px}
.score-label{font-size:13px;color:var(--text2);line-height:1.6}
.score-label strong{color:var(--text);font-size:15px}
.guest-score-cta{margin-left:auto;max-width:360px;border:1px solid rgba(192,57,43,.35);background:rgba(192,57,43,.08);border-radius:8px;padding:12px 14px;color:var(--text)}
.guest-score-kicker{font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:1.8px;color:var(--acc);margin-bottom:4px}
.guest-score-title{font-family:var(--font-heading);font-weight:800;font-size:22px;letter-spacing:1px;line-height:1}
.guest-score-copy{font-size:12px;color:var(--text2);line-height:1.45;margin:6px 0 10px}
.guest-score-btn{display:inline-flex;align-items:center;justify-content:center;background:var(--acc);color:#fff;text-decoration:none;border-radius:6px;padding:9px 13px;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:1px}

/* ── Results modal — shown the instant a test/passage is checked ── */
.rmodal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.62);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px;opacity:0;pointer-events:none;transition:opacity .18s ease}
.rmodal-overlay.show{opacity:1;pointer-events:auto}
.rmodal-card{background:var(--bg2);border:1px solid var(--border2);border-radius:10px;width:100%;max-width:640px;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.45);transform:translateY(14px) scale(.98);transition:transform .18s ease;position:relative}
.rmodal-overlay.show .rmodal-card{transform:translateY(0) scale(1)}
.rmodal-close{position:absolute;top:12px;right:14px;background:transparent;border:0;color:var(--text3);font-size:24px;line-height:1;cursor:pointer;width:32px;height:32px;border-radius:50%;transition:background .12s,color .12s}
.rmodal-close:hover{background:var(--bg3);color:var(--text)}
.rmodal-head{text-align:center;padding:32px 24px 20px;background:linear-gradient(180deg,var(--bg4) 0%,var(--bg2) 100%);border-bottom:1px solid var(--border2);border-radius:10px 10px 0 0}
.rmodal-band-kicker{font-size:11px;font-weight:900;letter-spacing:2.2px;text-transform:uppercase;color:var(--text3)}
.rmodal-band-num{font-family:var(--font-heading);font-weight:800;font-size:88px;line-height:1.1;color:var(--gold);text-shadow:0 4px 20px rgba(176,141,87,.35)}
.rmodal-band-sub{font-size:13px;color:var(--text2);font-weight:700}
.rmodal-body{overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:8px}
.rmodal-row{display:flex;align-items:flex-start;gap:14px;padding:12px 14px;border-radius:6px;border-left:3px solid transparent}
.rmodal-row-correct{background:rgba(16,163,127,0.08);border-left-color:var(--green)}
.rmodal-row-wrong{background:rgba(220,38,38,0.07);border-left-color:var(--red2)}
.rmodal-qnum{font-size:12px;font-weight:900;letter-spacing:.4px;min-width:52px;padding-top:2px;flex-shrink:0}
.rmodal-row-correct .rmodal-qnum{color:var(--green)}
.rmodal-row-wrong .rmodal-qnum{color:var(--red2)}
.rmodal-ans-col{flex:1;min-width:0}
.rmodal-ans-tag{font-size:9px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase;color:var(--text3);margin-bottom:2px}
.rmodal-ans-tag-correct{color:var(--green)}
.rmodal-ans-val{font-size:13.5px;color:var(--text);line-height:1.4;word-break:break-word}
.rmodal-ans-val em{color:var(--text3);font-style:italic}
.rmodal-ans-val-correct{color:var(--green);font-weight:700}
.rmodal-cta{margin:4px 20px 20px;background:var(--acc);color:#fff;border:0;border-radius:6px;padding:13px;font-family:var(--font-heading);font-weight:800;font-size:15px;letter-spacing:1.5px;cursor:pointer;transition:background .12s}
.rmodal-cta:hover{background:#a53125}
@media (max-width:600px){
  .rmodal-band-num{font-size:64px}
  .rmodal-row{flex-direction:column;gap:6px}
}

/* scrollbar */
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border2)}

/* ═══ READING INSPERA STYLE — copied from mock-exam.html, adapted for dark/light ═══ */
.r-qgroup{margin-bottom:32px}
.r-qgroup-header{margin:18px 0 10px;padding-bottom:6px;border-bottom:none}
.r-qgroup-range{font-family:var(--font-exam);font-size:16px;letter-spacing:normal;color:var(--text);font-weight:700}
.r-qgroup-instruction{font-size:16px;color:var(--text);line-height:1.5;margin:0}
.r-qgroup-instruction strong{font-weight:700;color:var(--text)}
.r-q-num{font-size:14px;font-weight:700;color:var(--text);min-width:24px;padding-top:1px;flex-shrink:0}
/* Passage */
.r-paragraph{margin:0 0 14px;display:flex;gap:10px;align-items:flex-start;contain:layout;min-width:0}
.r-para-label{font-family:var(--font-exam);font-weight:700;font-size:15px;color:var(--text);min-width:22px;padding-top:3px;letter-spacing:2px;user-select:none;flex-shrink:0}
.r-para-text{font-family:var(--font-exam);font-size:15px;line-height:1.5;color:var(--text);flex:1;min-width:0}
.r-summary-title{font-size:15px;font-weight:700;text-align:center;color:var(--text);margin:16px 0 12px}
/* TFNG */
.r-tfng-row{display:flex;flex-direction:column;padding:12px 0;border-bottom:none;gap:8px;contain:layout}
.r-tfng-header{display:flex;gap:10px;align-items:flex-start}
.r-tfng-statement{font-size:16px;color:var(--text);line-height:1.5;flex:1}
.r-tfng-options{display:flex;flex-direction:column;gap:6px;padding-left:34px}
.r-tfng-radio-option{display:flex;align-items:center;gap:8px;font-size:inherit;color:var(--text);cursor:pointer}
.r-tfng-radio-option input[type="radio"]{width:15px;height:15px;accent-color:var(--acc);cursor:pointer;flex-shrink:0}
.r-tfng-radio-option.p-correct{color:var(--green)}
.r-tfng-radio-option.p-wrong{color:var(--red2)}
/* MCQ */
.r-mcq-row{margin-bottom:16px;contain:layout}
.r-mcq-question{font-size:16px;color:var(--text);margin-bottom:8px;line-height:1.5;display:flex;gap:10px;align-items:flex-start;min-width:0}
.r-stem-block{display:block;flex:1;min-width:0}
.r-stem-text{display:block}
.r-stem-intro{margin-bottom:4px;line-height:1.6}
.r-stem-bullets{margin:4px 0 0;padding-left:20px;list-style:disc}
.r-stem-bullets li{padding:2px 0;line-height:1.6}
.r-mcq-options{padding-left:0}
.r-mcq-option{display:flex;align-items:flex-start;gap:8px;padding:6px 0 6px 32px;font-size:16px;color:var(--text);cursor:pointer;margin-bottom:2px;min-width:0}
.r-mcq-option:hover{background:var(--bg3)}
.r-mcq-option input[type="radio"],.r-mcq-option input[type="checkbox"]{margin-top:2px;width:15px;height:15px;accent-color:var(--acc);flex-shrink:0;cursor:pointer}
.r-mcq-option.selected{background:var(--acc2)}
.r-mcq-option.p-correct{background:rgba(74,222,128,0.15);color:var(--green)}
.r-mcq-option.p-wrong{background:rgba(248,113,113,0.12);color:var(--red2)}
/* Completion */
.r-completion-row{display:flex;align-items:flex-start;gap:8px;padding:8px 0;border-bottom:1px solid var(--border);font-size:14px;color:var(--text);line-height:1.7;flex-wrap:wrap;contain:layout}
.r-completion-stem{font-size:14px;color:var(--text);line-height:1.7;flex:1}
.r-completion-inline{display:flex;gap:6px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--border);font-size:14px;color:var(--text);line-height:1.8;flex-wrap:wrap;contain:layout}
.r-completion-stem-inline{font-size:14px;color:var(--text);line-height:1.8;flex:1;min-width:0}
.r-gap-input{display:inline-block;width:120px;height:24px;border:1px solid var(--border2);border-bottom:2px solid var(--text2);padding:0 6px;font-size:13px;font-weight:700;text-align:center;vertical-align:middle;margin:0 4px;background:var(--bg);color:var(--text);outline:none;transition:border-color .15s}
.r-gap-input:focus{border-color:var(--acc);border-bottom-color:var(--acc)}
.r-gap-input.p-correct{border-color:var(--green);color:var(--green)}
.r-gap-input.p-wrong{border-color:var(--red2);color:var(--red2)}
/* Summary prose */
.r-summary-prose{font-family:var(--font-exam);font-size:16px;color:var(--text);line-height:1.8;padding:10px 0 8px}
.r-summary-para{margin-bottom:.75rem}.r-summary-line{margin-bottom:.4rem;display:flex;align-items:baseline;flex-wrap:wrap;gap:.25rem}.r-note-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:.25rem;margin-bottom:.5rem;width:100%}
/* Matching headings select fallback (kept for non-MH matching types) */
.r-mh-select-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:14px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--border)}
.r-mh-para-label{font-size:14px;font-weight:700;color:var(--text);min-width:80px;flex-shrink:0}
.r-mh-select{font-size:13px;padding:6px 8px;border:1.5px solid var(--border2);background:var(--bg);color:var(--text);cursor:pointer;outline:none;flex:1;min-width:0}
.r-mh-select:focus{border-color:var(--acc)}
.r-mh-select.p-correct{border-color:var(--green);color:var(--green)}
.r-mh-select.p-wrong{border-color:var(--red2);color:var(--red2)}
/* ── Matching Headings DnD — verbatim from mock-exam.html lines 814-856, vars adapted ── */
.r-mh-layout{display:flex;gap:20px;flex-wrap:wrap;}
.r-mh-zones{flex:0 0 auto;min-width:260px;display:flex;flex-direction:column;gap:8px}
.r-mh-row{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text);flex-wrap:wrap;padding:4px 0}
.r-mh-zone{display:inline-flex;align-items:center;justify-content:center;min-width:80px;height:30px;background:var(--bg);border:1px dashed var(--border2);border-radius:4px;padding:4px 10px;cursor:pointer;font-size:13px;font-weight:600;color:var(--text);vertical-align:middle;gap:4px;transition:background .15s,border-color .15s;user-select:none}
.r-mh-zone.dnd-drop-zone-over{background:#cfe6f7;border:2px solid #2a7fb8}
.r-mh-zone.dnd-drop-zone-filled{background:#cfe6f7;border:2px solid #2a7fb8;cursor:grab}
.r-mh-bank{flex:1;min-width:200px;padding:14px 18px}
.r-mh-bank-title{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text3);margin-bottom:8px}
.r-mh-cards{display:flex;flex-direction:column;gap:5px}
.r-mh-card{display:flex;align-items:flex-start;gap:8px;background:var(--bg);border:1px solid var(--border2);border-radius:14px;padding:5px 12px;cursor:grab;font-size:13px;color:var(--text);user-select:none;transition:background .1s,border-color .1s}
.r-mh-card:hover{background:var(--bg3)}
.r-mh-card.dnd-card-used{opacity:0.4;pointer-events:none}
.r-mh-card.dnd-card-dragging{opacity:0.5}
.r-mh-card.dnd-card-selected,.r-mh-card.r-mh-card-selected{background:#cfe6f7;border-color:#2a7fb8;outline:2px solid #2a7fb8}
/* passage-pane drop zones for matching_headings — full-width block above each paragraph */
.r-mh-passage-zone{display:flex;width:100%;min-height:50px;height:auto;background:var(--bg);border:1px dashed var(--border2);border-radius:4px;padding:8px 12px;margin:8px 0 4px;cursor:default;font-size:13px;font-weight:600;color:var(--text);gap:8px;align-items:center;user-select:none;transition:background .15s,border-color .15s;box-sizing:border-box}
.r-mh-passage-zone.dnd-drop-zone-over{background:#e8f4ff;border:2px dashed #2a7fb8}
.r-mh-passage-zone.dnd-drop-zone-filled{background:var(--bg2);border:1px solid var(--border2);cursor:grab}
.r-mh-passage-zone .dnd-drop-value{font-size:13px;font-weight:600;color:var(--text);line-height:1.4}
.r-wb-zone .dnd-drop-placeholder{display:inline-block;min-width:3rem;width:3rem;font-style:italic;font-size:11px;color:var(--text3)}
.dnd-card-dragging{opacity:0.5}
.r-ending-bank{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;padding:10px;
background:var(--bg2);border-radius:8px;}
.r-ending-row{display:flex;align-items:baseline;gap:0.5rem;margin-bottom:8px;
min-height:36px;}
.r-ending-stem{font-size:14px;color:var(--text);}
.r-ending-zone{display:inline-flex;align-items:center;min-width:8rem;max-width:100%;
flex:1;padding:0.25rem 0.5rem;border:2px dashed var(--border,#ccc);
border-radius:4px;cursor:pointer;font-size:13px;color:var(--text2);
transition:border-color 0.15s;overflow:hidden;}
.r-ending-zone .dnd-drop-value{white-space:normal;word-break:break-word;line-height:1.35;font-size:13px}
.r-ending-zone.dnd-drop-zone-over{border-color:var(--accent);}
.r-ending-zone.dnd-drop-zone-filled{border-style:solid;border-color:var(--accent);
color:var(--text);}
/* Matching options list */
.r-match-options-list{background:var(--bg3);border:1px solid var(--border2);padding:10px 14px;margin-bottom:14px;border-radius:2px}
.r-match-option-item{font-size:13px;color:var(--text2);padding:2px 0;line-height:1.5}
.r-match-option-item strong{color:var(--text);min-width:22px;display:inline-block}
.r-feature-list{background:var(--bg3);border:1px solid var(--border2);padding:14px 16px;margin-bottom:14px}
.r-feature-list-heading{font-size:14px;font-weight:700;color:var(--text);margin-bottom:8px}
.r-feature-list-item{display:flex;gap:8px;padding:4px 0;font-size:14px;color:var(--text)}
.r-feature-list-letter{font-weight:700;min-width:28px;color:var(--text2)}
.r-feature-list-desc{flex:1;line-height:1.4}
/* Matching radio grid */
.r-match-grid{border:1px solid var(--border2);overflow-x:auto;margin-bottom:6px}
.r-match-grid-row{display:flex;align-items:stretch;border-bottom:1px solid var(--border)}
.r-match-grid-row:last-child{border-bottom:none}
.r-match-grid-header{background:var(--bg3);min-height:34px}
.r-match-grid-header .r-match-grid-col{font-size:12px;font-weight:700;color:var(--text2)}
.r-match-grid-stmt{flex:1;min-width:160px;padding:9px 12px;font-size:14px;color:var(--text);line-height:1.5;display:flex;gap:8px;align-items:flex-start;border-right:1px solid var(--border2)}
.r-match-grid-col{width:46px;min-width:46px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--border);padding:9px 0;font-size:13px;color:var(--text)}
.r-match-grid-col:last-child{border-right:none}
.r-match-grid-col input[type="radio"]{width:15px;height:15px;accent-color:var(--acc);cursor:pointer}
/* Short answer */
.r-short-row{display:block;padding:10px 0;border-bottom:1px solid var(--border)}
.r-short-q-line{display:flex;gap:10px;align-items:flex-start;margin-bottom:8px}
.r-short-q{font-size:14px;color:var(--text);line-height:1.5;flex:1}
.r-short-input{display:block;border:1.5px solid var(--border2);padding:6px 10px;font-size:13px;color:var(--text);width:200px;margin-left:34px;outline:none;background:var(--bg);transition:border-color .15s}
.r-short-input:focus{border-color:var(--acc)}
.r-short-input.p-correct{border-color:var(--green);color:var(--green)}
.r-short-input.p-wrong{border-color:var(--red2);color:var(--red2)}
/* Hint */
.r-hint{font-size:11px;color:var(--text3);margin-top:4px;display:none}
.r-hint.show{display:block}
.r-hint .correct-val{display:inline-flex;color:#fff;background:var(--green);font-weight:700;padding:2px 9px;border-radius:20px;margin-left:2px}
/* Post-submit row shading — premium */
.q-row-wrong{background:rgba(185,28,28,0.055)!important;border-left:3px solid rgba(220,38,38,0.55)!important;padding-left:8px!important;border-radius:0 3px 3px 0!important}
/* TFNG/MCQ/listening-radio rows already get a precise per-option highlight below
   (the selected + correct option, not the whole card) -- the row-level tint on
   top of that just muddied the card. Neutralised here rather than for every
   .q-row-wrong user: matching-grid/select-fallback rows have no per-option
   indicator of their own and still need it. */
.r-tfng-row.q-row-wrong,.r-mcq-row.q-row-wrong,.ielts-listening-question-item.q-row-wrong{background:none!important;border-left:none!important;padding-left:0!important;border-radius:0!important;margin:0!important}
/* Correct/wrong options (Inspera) — a snug pill around the selected option only,
   not a full-width bar. TFNG options are flex children of a column container
   that stretches them by default (align-items:stretch); align-self escapes
   that just for the highlighted one. MCQ/listening options are plain block
   rows, so inline-flex is enough to shrink them to their own content width. */
.r-tfng-radio-option.p-correct,.r-tfng-radio-option.p-wrong{align-self:flex-start;border-radius:20px;padding:3px 12px 3px 8px;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.r-mcq-option.p-correct,.r-mcq-option.p-wrong{width:fit-content;border-radius:20px;padding:5px 14px 5px 10px;margin-left:22px;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.r-mcq-option.p-correct,.r-tfng-radio-option.p-correct{background:rgba(16,163,127,0.12);color:var(--green)}
.r-mcq-option.p-wrong,.r-tfng-radio-option.p-wrong{background:rgba(220,38,38,0.1);color:var(--red2)}
.r-gap-input.p-correct,.mc-input.p-correct,.r-short-input.p-correct{border-color:var(--green);color:var(--green);background:rgba(16,163,127,0.12);font-weight:700}
.r-gap-input.p-wrong,.mc-input.p-wrong,.r-short-input.p-wrong{border-color:var(--red2);color:var(--red2);background:rgba(220,38,38,0.10);font-weight:700}
/* Inline correct answer after wrong input — premium pill, not just plain text */
.r-correct-inline{display:inline-flex;align-items:center;gap:4px;color:#fff;background:var(--green);font-weight:700;font-size:11px;letter-spacing:.2px;margin-left:10px;white-space:nowrap;padding:3px 10px;border-radius:20px;vertical-align:middle}
/* Table completion */
.tc-title{font-weight:700;font-size:15px;color:var(--text);margin:16px 0 8px}
.tc-wrap{overflow-x:auto;margin:12px 0}
.tc-table{border-collapse:collapse;width:100%;min-width:560px;font-size:inherit;}
.tc-table th{background:var(--bg3);font-weight:700;padding:10px 12px;border:1px solid var(--border2);text-align:left;color:var(--text);white-space:normal;line-height:1.35}
.tc-table td{padding:10px 12px;border:1px solid var(--border2);vertical-align:top;color:var(--text);white-space:normal;overflow-wrap:anywhere;line-height:1.55}
.tc-table td > div.tc-cell-part{display:block!important;width:100%}
.tc-table td > div.tc-cell-line{display:block;width:100%}
.tc-table td > div.tc-cell-line + div.tc-cell-line{margin-top:3px}
span.tc-cell-part{display:inline;vertical-align:middle}
span.tc-cell-part + span.tc-cell-part{margin-left:4px}
.tc-table .mc-input{display:inline-block;min-width:92px;max-width:160px;width:32%;margin:0 4px;vertical-align:baseline}
.mc-input{display:inline-block;min-width:120px;height:28px;border:1px solid var(--border2);padding:6px 10px;font-size:15px;font-weight:400;text-align:center;vertical-align:middle;margin:0 2px;background:var(--bg);color:var(--text);outline:none;box-shadow:none;transition:border-color .15s}
.mc-input:focus{border-color:var(--acc)}
.mc-input.p-correct{border-color:var(--green);color:var(--green)}
.mc-input.p-wrong{border-color:var(--red2);color:var(--red2)}
/* Word bank — DnD cards + drop zones (ported from mock-exam.html) */
.r-wb-bank{display:flex;flex-wrap:wrap;gap:8px;padding:12px;border:1px solid var(--border);background:var(--bg2);border-radius:4px;margin-bottom:14px}
.r-wb-word{font-size:12px;padding:3px 10px;background:var(--bg3);border:1px solid var(--border2);color:var(--text2)}
.r-wb-card{display:inline-flex;align-items:center;padding:5px 14px;background:var(--bg);border:1px solid var(--border2);border-radius:4px;cursor:grab;font-size:13px;color:var(--text);user-select:none;-webkit-user-select:none;transition:background .1s,border-color .1s}
.r-wb-card:hover{background:var(--bg3)}
.r-wb-card.dnd-card-dragging{opacity:0.5}
.r-wb-card.r-wb-card-selected{background:var(--acc-faint,#e8f0fe);border-color:var(--acc);outline:2px solid var(--acc)}
.r-wb-zone{display:inline-flex;align-items:center;min-width:4rem;max-width:12rem;height:1.4em;vertical-align:middle;padding:0 0.3rem;border:2px dashed var(--border,#ccc);border-radius:3px;cursor:pointer;position:relative;top:-0.05em;box-sizing:border-box;font-size:13px;font-weight:600;color:var(--text);margin:0 3px;transition:background .15s,border-color .15s}
.r-wb-zone.dnd-drop-zone-over{background:var(--acc-faint,#e8f4ff);border:2px dashed var(--acc)}
.r-wb-zone.dnd-drop-zone-filled{min-width:unset;border-style:solid;background:var(--surface-2,#f0f4ff);cursor:grab}

/* ═══ LISTENING — Inspera-style (copied from mock-exam.html, adapted for dark/light) ═══ */
.ielts-section-rubric{background:var(--bg2);border:1px solid var(--border);padding:12px 16px;margin:0 0 16px}
.ielts-section-rubric h2{font-size:15px;font-weight:700;color:var(--text);margin:0 0 2px}
.ielts-section-rubric p{font-size:14px;color:var(--text2);margin:0}
.ielts-listening-question-section-heading{font-size:16px;font-weight:900;margin-bottom:4px;margin-top:28px;color:var(--text);}
.ielts-listening-question-section-content{margin-bottom:6px;font-size:15px;font-weight:400;line-height:1.5;color:var(--text)}
.ielts-listening-question-number{display:inline;font-size:15px;font-weight:700;margin-right:6px;color:var(--text)}
.ielts-listening-questions{margin-bottom:2rem;}
.ielts-listening-section-content-wrapper{border:none;background:none;padding:8px 0 16px 8px;margin:0;font-size:15px;color:var(--text)}
.ielts-listening-question-item{margin-bottom:20px;font-size:15px;color:var(--text);line-height:1.5}
.ielts-listening-option{display:flex;align-items:center;gap:8px;margin-bottom:8px;margin-top:8px;padding-left:0;font-size:15px;color:var(--text);}
.ielts-listening-option input[type="radio"],.ielts-listening-option input[type="checkbox"]{margin-top:0;flex-shrink:0;width:16px;height:16px;cursor:pointer;accent-color:var(--acc)}
.ielts-listening-question-item input[type="radio"],.ielts-listening-question-item input[type="checkbox"]{margin-top:3px;flex-shrink:0;width:16px;height:16px;cursor:pointer;accent-color:var(--acc)}
/* Post-submit feedback — listening options. A snug pill around the selected
   option, not a full-width bar (same fix as the reading TFNG/MCQ options) --
   inline-flex shrinks the row to its own content width instead of the block's
   default 100%. */
.ielts-listening-option.p-correct{width:fit-content;background:rgba(16,163,127,0.12);color:var(--green);border-radius:20px;padding:3px 12px 3px 8px;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.ielts-listening-option.p-wrong{width:fit-content;background:rgba(220,38,38,0.1);color:var(--red2);border-radius:20px;padding:3px 12px 3px 8px;box-shadow:0 1px 2px rgba(0,0,0,.12)}
/* tr can't take border-left — wrap shading via background only */
tr.q-row-wrong > td{background:rgba(185,28,28,0.055)!important}
/* fill_blank line structure */
.mc-line{display:flex;align-items:baseline;gap:6px;padding-left:16px;margin-bottom:8px;font-size:15px;color:var(--text);line-height:1.6}
.mc-bullet{flex-shrink:0;color:var(--text2);font-size:15px;line-height:1.6}
.mc-line.mc-heading{display:block;padding-left:0;font-weight:700;font-size:15px;margin-top:16px;margin-bottom:8px}
.mc-heading .mc-bullet{display:none}
.mc-text{flex:1;line-height:1.6}
.mc-qnum{display:none}
/* matching radio table */
.ielts-listening-matching-table{width:100%;border-collapse:collapse;margin-bottom:1.5rem}
.ielts-listening-matching-table thead th{text-align:center;font-weight:bold;padding:8px 4px;border:1px solid var(--border2);background:var(--bg3);font-size:16px;color:var(--text)}
.ielts-listening-matching-table .ielts-listening-question-item{border-bottom:1px solid var(--border)}
.ielts-listening-matching-question-cell{padding:8px 10px;line-height:1.5;vertical-align:middle;border:1px solid var(--border2);color:var(--text)}
.ielts-listening-matching-option-cell{text-align:center;vertical-align:middle;padding:8px 10px;border:1px solid var(--border2)}
.ielts-listening-matching-option-cell input[type="radio"]{width:16px;height:16px;cursor:pointer;margin:0;accent-color:var(--acc)}
/* matching_features (lmf) */
.lmf-options{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:14px;padding:10px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:0}
.lmf-option-item{display:flex;align-items:center;gap:6px}
.lmf-option-letter{font-family:var(--font-exam);font-weight:800;font-size:16px;color:var(--acc);min-width:18px;text-align:center}
.lmf-option-label{font-size:14px;color:var(--text);font-weight:600}
.lmf-table{width:100%;border-collapse:collapse;margin-bottom:1.5rem}
.lmf-table thead tr{background:var(--bg3)}
.lmf-th-stmt{text-align:left;padding:8px 10px;border:1px solid var(--border2);width:70%;color:var(--text)}
.lmf-th-opt{text-align:center;font-weight:bold;padding:8px 8px;border:1px solid var(--border2);font-family:var(--font-exam);font-weight:800;font-size:16px;color:var(--acc)}
.lmf-row td{border:1px solid var(--border);vertical-align:middle}
.lmf-row:nth-child(even){background:var(--bg2)}
.lmf-stmt-cell{padding:8px 10px;line-height:1.5;font-size:14px;color:var(--text)}
.lmf-opt-cell{text-align:center;padding:8px;min-width:44px}
.lmf-opt-cell input[type="radio"]{width:18px;height:18px;cursor:pointer;margin:0;accent-color:var(--acc)}
/* DnD — listening matching/map */
.dnd-panel{border:1px solid var(--border2);background:var(--bg2);padding:10px 12px;min-width:220px;max-width:340px;flex-shrink:0}
.dnd-panel-instruction{font-size:13px;font-style:italic;margin-bottom:10px;color:var(--text3)}
.dnd-cards-container{display:flex;flex-direction:column;gap:6px}
.dnd-card{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid var(--border2);background:var(--bg);cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;font-size:14px;color:var(--text);line-height:1.5}
.dnd-card:active{cursor:grabbing}
.dnd-card.dnd-card-used{opacity:0.4;pointer-events:none}
.dnd-card.dnd-card-selected{background:var(--bg3);border-color:var(--acc);outline:2px solid var(--acc)}
.dnd-card.dnd-card-dragging{opacity:0.5}
.dnd-label{min-width:18px;flex-shrink:0;font-size:14px}
.dnd-text{font-weight:600}
.dnd-zone{display:inline-flex;align-items:center;justify-content:center;min-width:140px;height:30px;border:2px dashed var(--border2);padding:4px 10px;background:var(--bg);cursor:pointer;font-size:14px;font-weight:700;text-align:center;color:var(--text);vertical-align:middle;margin:0 4px;gap:4px;transition:background .15s,border-color .15s}
.dnd-zone.dnd-drop-zone-over{background:var(--bg3);border-color:var(--acc)}
.dnd-zone.dnd-drop-zone-filled{border-color:var(--acc);border-style:solid;cursor:grab}
.options-drop-zone{display:inline-flex;align-items:center;justify-content:center;min-width:140px;height:30px;border:2px dashed var(--border2);padding:4px 10px;background:var(--bg);cursor:pointer;font-size:14px;font-weight:700;text-align:center;color:var(--text);vertical-align:middle;margin:0 4px;gap:4px;transition:background .15s,border-color .15s}
.options-drop-zone.dnd-drop-zone-over{background:var(--bg3);border-color:var(--acc)}
.options-drop-zone.dnd-drop-zone-filled{border-color:var(--acc);border-style:solid}
.dnd-drop-value{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap}
/* matching_dnd layout */
.mh-dnd-wrap{display:flex;flex-direction:column;gap:1rem}
.mh-dnd-instructions{width:100%}
.mh-dnd-body{display:flex;gap:1.5rem;align-items:flex-start}
.matching-dnd-questions{min-width:30%;max-width:60%}
.dnd-panel--matching{margin-top:0;max-width:40%}
.dnd-reusable-badge{display:inline-block;font-size:10px;font-weight:600;color:var(--acc);background:color-mix(in srgb,var(--acc) 12%,transparent);border:1px solid color-mix(in srgb,var(--acc) 30%,transparent);border-radius:4px;padding:1px 5px;vertical-align:middle;margin-left:4px;letter-spacing:.3px}
.matching-dnd-questions .options-drop-zone{margin-left:20px;margin-right:20px}
@media(max-width:600px){
  .mh-dnd-body{flex-direction:column;gap:5px}
  .matching-dnd-questions{max-width:100%;width:100%}
  .dnd-panel--matching{max-width:100%;width:100%}
}
/* map_labelling */
.map-label-wrap{background:var(--bg);border:1px solid var(--border);overflow:hidden}
.map-label-img-wrap{background:var(--bg2);padding:12px;border-bottom:1px solid var(--border)}
.map-label-img{width:100%;max-height:400px;object-fit:contain;display:block}
.r-diagram-img-wrap{margin:0 0 16px;padding:12px;background:var(--bg2);border:1px solid var(--border);border-radius:4px}
.r-diagram-img{display:block;width:100%;max-height:420px;object-fit:contain;height:auto}
/* Diagram labelling — answer boxes placed ON the image at each marked spot. Boxes stay
   light (they sit on the white diagram) so they read correctly in light + dark. */
.r-diagram-overlay-wrap{margin:0 0 16px}
.r-diagram-overlay{position:relative;display:inline-block;max-width:100%;line-height:0;background:#fff;border:1px solid #ddd;border-radius:4px}
.r-diagram-overlay-img{display:block;max-width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.r-diagram-marker{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:4px;line-height:normal;white-space:nowrap}
.r-diagram-marker-num{font-weight:700;font-size:11px;background:#fff;border:1px solid #333;border-radius:3px;padding:0 3px;color:#111}
input.r-diagram-input{width:64px;padding:2px 4px;font-size:12px;background:#fff;border:1px solid #555;border-radius:3px;color:#111}
input.r-diagram-input:focus{border-color:var(--accent,#10a37f);outline:none}
.r-diagram-below{margin-top:10px}
.r-diagram-below-row{display:flex;align-items:center;gap:6px;margin:5px 0}
.r-flowchart-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;margin:10px 0 16px}
.r-flowchart-step{width:min(100%,560px);min-height:46px;padding:10px 14px;background:var(--bg2);border:1px solid var(--border);border-radius:4px;text-align:center;font-size:15px;line-height:1.55;color:var(--text)}
.r-flowchart-step.has-gap{background:var(--bg2)}
.r-flowchart-arrow{font-size:20px;line-height:1;color:var(--text2);height:20px;display:flex;align-items:center;justify-content:center}
.r-flowchart-step .r-wb-zone{vertical-align:middle;margin:0 4px}
.flowchart-dnd-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;margin:10px 0 18px;width:100%}
.flowchart-dnd-wrap .dnd-panel{width:min(100%,560px);max-width:560px;margin:0 auto}
.flowchart-dnd-wrap .dnd-cards-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:6px}
.flowchart-dnd-steps{width:100%;margin:0}
.flowchart-dnd-wrap .r-flowchart-step.has-gap{background:var(--bg2)}
.r-flowchart-step .dnd-zone{min-width:120px;margin:0 4px}
.r-flowchart-step .dnd-drop-placeholder{font-size:12px}
.map-label-body{display:flex}
.map-label-questions{flex:0 0 60%;padding:8px 12px}
.map-label-bank.dnd-panel{flex:0 0 40%;border-left:1px solid var(--border);padding:10px 12px;max-width:none;display:flex;flex-direction:column;gap:6px;min-width:0}
.map-label-row{display:flex;align-items:center;gap:8px;min-height:48px;border-bottom:1px solid var(--border);padding:4px 0}
.map-label-row:last-child{border-bottom:none}
.map-label-qnum{font-size:14px;font-weight:700;min-width:26px;color:var(--text);flex-shrink:0}
.map-label-qtext{flex:1;font-size:14px;color:var(--text);min-width:0}
.dnd-zone.map-label-zone{min-width:40px;width:40px;height:36px;padding:0;flex-shrink:0}
.dnd-card.map-label-pill{width:36px;height:36px;min-width:36px;padding:0;background:var(--acc);color:#fff;border-color:var(--acc);justify-content:center;font-family:var(--font-exam);font-weight:800;font-size:18px;gap:0}
.dnd-card.map-label-pill.dnd-card-selected{background:var(--gold);border-color:var(--gold);outline:2px solid var(--gold);color:#fff}
@media(max-width:600px){
  .map-label-body{flex-direction:column}
  .map-label-bank.dnd-panel{border-left:none;border-top:1px solid var(--border);flex-direction:row;flex-wrap:wrap}
}
/* ik-instr — instruction paragraphs */
.ik-instr{font-size:13px;line-height:1.55;margin:0 0 10px;color:var(--text2)}
.ik-instr strong{font-weight:700}
/* ── Practice audio player ── */
/* Uses the same --exam-* tokens as .r-part-header/.exam-topbar/etc, which now
   have a body.dark variant (see the :root block below the exam topbar rules)
   -- so this darkens along with the rest of the exam surface automatically,
   no player-specific dark overrides needed. */
.prac-audio-wrap{display:flex;flex-direction:column;gap:6px;padding:10px 0 16px;margin-bottom:12px;border-bottom:1px solid var(--exam-border-soft);position:sticky;top:0;z-index:50;background:var(--exam-surface)}
.prac-audio-toprow{display:flex;align-items:center;justify-content:flex-end}
/* minimal text toggle -- was a bulky bordered pill sitting above the player,
   reads as a second competing UI element rather than one cohesive block */
.prac-toggle-link{background:none;border:none;padding:0;color:var(--exam-muted);font-size:12px;font-weight:600;cursor:pointer;transition:color .15s}
.prac-toggle-link:hover{color:var(--acc)}
/* hidden native element — still accessible if JS fails (style set by JS after wiring) */
.prac-audio-player{display:block;width:100%}
/* now-playing indicator -- was a harsh full-width red-bordered banner; a
   small pill reads as a status badge instead of a warning */
.prac-now-playing{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--acc);letter-spacing:.03em;background:rgba(192,57,34,.08);border-radius:20px;padding:4px 12px;margin-bottom:8px}
.prac-now-playing::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--acc);animation:pracPulse 1.4s ease-in-out infinite}
@keyframes pracPulse{0%,100%{opacity:1}50%{opacity:.35}}
/* player card -- same grayish box as .r-part-header (--exam-chrome is that
   exact color); play button + progress fill stay red in both themes */
.prac-player-card{background:var(--exam-chrome);border:1px solid var(--exam-border);border-radius:10px;padding:12px 16px;display:flex;align-items:center;gap:14px}
.prac-play-btn{width:40px;height:40px;border-radius:50%;background:var(--acc);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s,transform .1s;padding:0;box-shadow:0 2px 10px rgba(192,57,34,.45)}
.prac-play-btn:hover{background:var(--acc-hover)}
.prac-play-btn:active{transform:scale(.94)}
.prac-player-body{flex:1;min-width:0}
.prac-progress-track{position:relative;height:5px;background:var(--exam-border);border-radius:3px;cursor:pointer;margin-bottom:8px;user-select:none}
.prac-progress-fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--acc),var(--acc-hover));border-radius:3px;width:0;pointer-events:none}
.prac-progress-thumb{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;background:var(--exam-ink-soft);box-shadow:0 1px 3px rgba(0,0,0,.3);pointer-events:none;transition:box-shadow .15s}
.prac-progress-track:hover .prac-progress-thumb{box-shadow:0 0 0 4px color-mix(in srgb,var(--exam-ink) 15%,transparent)}
.prac-player-time{display:flex;gap:3px;font-variant-numeric:tabular-nums;letter-spacing:.02em;font-size:12px;color:var(--exam-muted)}
.prac-time-current{color:var(--exam-ink)}
.prac-time-sep{opacity:.4;margin:0 1px}
/* ── Practice bubble bar ── */
.prac-bubble-bar{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:8px 0 6px;border-bottom:1px solid var(--border);margin-bottom:8px}
.prac-bubble-label{font-size:10px;color:var(--text3);letter-spacing:1px;text-transform:uppercase;margin-right:4px;flex-shrink:0;font-weight:700}
.prac-bubble{width:26px;height:26px;border-radius:2px;border:1px solid var(--border2);background:transparent;color:var(--text2);font-size:11px;font-weight:400;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all 0.12s;user-select:none}
.prac-bubble:hover{background:var(--bg3);color:var(--text)}
.prac-bubble.answered{border-top:3px solid var(--blue, #60a5fa);color:var(--text)}
/* ── Highlight toolbar ── */
#highlightToolbar{position:fixed;z-index:500;background:#ffe082;border:1px solid #f9a825;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.2);display:none;overflow:hidden}
#highlightToolbar button{padding:6px 14px;font-size:13px;border:none;cursor:pointer;background:transparent;color:#333;border-right:1px solid rgba(0,0,0,0.1);white-space:nowrap;font-weight:700}
#highlightToolbar button:last-child{border-right:none}
#highlightToolbar button:hover{background:rgba(0,0,0,0.07)}
.r-passage-pane mark,.r-questions-pane mark,.listen-pane mark{background:#ffe082;color:#111;padding:0;margin:0;border:0;display:inline;line-height:inherit;vertical-align:baseline;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hl-btn-hi{color:#5d4037!important}
/* Note-anchored highlights + card navigation flash (shared with mock-exam) */
.r-passage-pane mark.ik-note-mark,.r-questions-pane mark.ik-note-mark,.listen-pane mark.ik-note-mark{text-decoration:underline;text-decoration-style:dashed;text-decoration-color:#f9a825;text-underline-offset:2px}
mark.ik-note-flash{animation:ikNoteFlash .6s ease 2}
@keyframes ikNoteFlash{0%,100%{background:#ffe082}50%{background:#f9a825}}
/* ═══ NOTES PANEL — Inspera-style note cards (theme-aware via --exam-*) ═══ */
#notesPanel{position:fixed;top:0;right:-320px;width:300px;height:100vh;background:var(--exam-surface);border-left:1px solid var(--exam-border);box-shadow:-3px 0 12px rgba(0,0,0,.18);z-index:300;display:flex;flex-direction:column;transition:right .25s ease}
#notesPanel.open{right:0}
.notes-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--exam-border);font-family:var(--font-exam);font-weight:700;font-size:14px;color:var(--exam-ink);background:var(--exam-chrome);flex-shrink:0}
.notes-close{background:none;border:none;font-size:18px;cursor:pointer;color:var(--exam-muted);padding:0 4px;line-height:1}
.notes-close:hover{color:var(--exam-red,#c0392b)}
#ikNotesList{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:12px;background:var(--exam-surface)}
.ik-notes-empty{font-family:var(--font-exam);font-size:13px;line-height:1.55;color:var(--exam-faint);padding:8px 4px}
.ik-note-card{border:1px solid var(--exam-border);border-radius:4px;background:var(--exam-surface-soft);overflow:hidden;display:flex;flex-direction:column}
.ik-note-title{display:block;width:100%;text-align:left;background:var(--exam-chrome);border:none;border-bottom:1px solid var(--exam-border);cursor:pointer;font-family:var(--font-exam);font-weight:700;font-size:12.5px;line-height:1.4;color:var(--exam-ink);padding:8px 10px;white-space:normal}
.ik-note-title:hover{background:#fff3cd;color:#1a1a1a}
.ik-note-body{resize:vertical;min-height:64px;border:none;outline:none;padding:9px 10px;font-family:var(--font-exam);font-size:13px;line-height:1.5;color:var(--exam-ink);background:transparent}
.ik-note-body::placeholder{color:var(--exam-faint)}
.ik-note-del{align-self:flex-end;background:none;border:none;border-top:1px solid var(--exam-border);width:100%;text-align:right;cursor:pointer;font-family:var(--font-exam);font-size:11.5px;font-weight:700;color:var(--exam-muted);padding:6px 10px}
.ik-note-del:hover{color:var(--exam-red,#c0392b)}
.hl-btn-note{color:#5d4037!important}
/* ── Multi-group session: exam topbar (matches mock-exam.html, dark-mode adapted) ── */
.exam-topbar{background:#fff;border-bottom:1px solid #e0e0e0;padding:8px 20px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;position:sticky;top:0;z-index:100}
.exam-topbar-left{display:flex;align-items:center}
.exam-topbar-right{display:flex;align-items:center;gap:16px;color:#333}
.inspera-logo{margin-right:16px}
.inspera-ielts{font-size:28px;font-weight:900;color:#C8102E;letter-spacing:1px;border:3px solid #C8102E;padding:2px 6px;line-height:1}
.inspera-user{display:flex;flex-direction:column}
.inspera-username{font-size:14px;font-weight:700;color:#1a1a1a}
.inspera-audio-row{font-size:12px;color:#555;margin-top:2px}
.notes-btn{background:#fff;color:#333;border:1px solid #ccc;padding:5px 10px;font-size:12px;cursor:pointer;border-radius:2px;white-space:nowrap}
.notes-btn:hover{background:#f5f5f5}
.fz-btn{background:#fff;color:#333;border:1px solid #ccc;padding:5px 10px;font-family:var(--font-exam);font-size:13px;font-weight:700;cursor:pointer;border-radius:2px;white-space:nowrap}
.fz-btn:hover{background:#f5f5f5}
.tb-icon{font-size:18px;color:#444;cursor:pointer;user-select:none}
.tb-menu-btn{font-size:22px}
/* Options panel — theme + text size via ☰; follows body theme/size */
.options-panel{position:fixed;inset:0;z-index:9500;background:var(--bg,#fff);color:var(--text,#111);display:flex;flex-direction:column;transition:background 0.2s,color 0.2s}
.options-panel.hidden{display:none}
.options-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border,#e5e5e5);min-height:52px}
.options-title{font-family:var(--font-body);font-size:17px;font-weight:600;color:var(--text,#111)}
.options-close,.options-back{background:none;border:none;cursor:pointer;font-size:18px;color:var(--text2,#555);padding:4px 8px;font-family:var(--font-body)}
.options-body{padding:24px 20px;max-width:520px;margin:0 auto;width:100%}
.options-group{border:1px solid var(--border,#ddd);border-radius:6px;overflow:hidden}
.options-row{width:100%;display:flex;justify-content:space-between;align-items:center;background:var(--bg2,#fafafa);border:none;border-bottom:1px solid var(--border,#e5e5e5);padding:16px 20px;cursor:pointer;text-align:left;font-family:var(--font-body);font-size:15px;color:var(--text,#222);transition:font-size 0.15s,background 0.2s,color 0.2s}
.options-row:last-child{border-bottom:none}
.options-row:hover{background:var(--bg3,#f0f0f0)}
.options-row.active-option::before{content:'✓ ';color:var(--acc,#C8102E);font-weight:700}
body[data-prac-textsize="regular"] .options-panel .options-row,
body[data-prac-textsize="regular"] .options-panel .options-title{font-size:15px}
body[data-prac-textsize="large"] .options-panel .options-row,
body[data-prac-textsize="large"] .options-panel .options-title{font-size:18px}
body[data-prac-textsize="xlarge"] .options-panel .options-row,
body[data-prac-textsize="xlarge"] .options-panel .options-title{font-size:21px}
body[data-prac-textsize="large"] .options-panel .options-close,
body[data-prac-textsize="large"] .options-panel .options-back{font-size:20px}
body[data-prac-textsize="xlarge"] .options-panel .options-close,
body[data-prac-textsize="xlarge"] .options-panel .options-back{font-size:22px}
.prac-back-btn{background:transparent;border:1px solid var(--border2);color:var(--text2);padding:5px 10px;font-size:12px;cursor:pointer;border-radius:2px;white-space:nowrap}
.prac-back-btn:hover{background:var(--bg2)}
/* ── Multi-group bubble groups ── */
.prac-bubble-group{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-right:12px}
.prac-bubble-group-label{font-size:11px;font-weight:600;color:var(--text2);cursor:pointer;white-space:nowrap;margin-right:2px;text-transform:uppercase;letter-spacing:.5px}
.prac-bubble-group-nums{display:flex;flex-wrap:wrap;gap:3px}
/* ── Bubble correct/wrong states (post-submit) ── */
.prac-bubble.correct{border-top:3px solid var(--green);background:rgba(34,160,90,0.12)}
.prac-bubble.wrong{border-top:3px solid var(--red2);background:rgba(220,60,30,0.10)}

/* ── Mock-exam reading system — copied from mock-exam.html ── */
.r-split { display: flex; flex: 1; overflow: hidden; min-height: 0; }
.r-resize-handle { width: 6px; background: #e0e0e0; cursor: col-resize; flex-shrink: 0; transition: background .15s; position: relative; }
.r-resize-handle:hover, .r-resize-handle.dragging { background: #C8102E; }
/* Part header box (Inspera-style) */
.r-part-header { background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 4px; padding: 10px 16px; margin: 12px 16px;  flex-shrink: 0; }
.r-part-header-title { font-weight: 700; font-size: 14px; color: #1a1a1a; }
.r-part-header-sub { font-size: 13px; color: #444; margin-top: 2px; }
/* Listening context: flat, no card chrome */
.listen-pane .r-part-header { background: transparent; border: none; border-bottom: 1px solid var(--border); border-radius: 0; padding: 6px 0 10px; margin: 0 0 6px; }
.listen-pane .r-part-header-title { font-size: 15px; color: var(--text); }
.listen-pane .r-part-header-sub { color: var(--text2); }
/* Bottom nav bar — Inspera */
.exam-bottombar { background: #fff; border-top: 1px solid #e0e0e0; padding: 0; display: flex; align-items: stretch; flex-shrink: 0; min-height: 52px; height: auto; }
#rBottomParts { display: flex; align-items: stretch; flex: 1; }
.r-bottom-part { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 12px; border-right: 1px solid #d0d0d0; cursor: pointer; flex: 1; min-width: 0; transition: flex 0.2s ease; }
.r-bottom-part:hover { background: #f9f9f9; }
.r-bottom-part.active { flex: 2; justify-content: space-evenly; padding: 0 6px; gap: 4px; flex-wrap: nowrap; cursor: default; }
.r-bottom-part.active:hover { background: transparent; }
.r-bottom-part-label {  font-size: 11px !important; font-weight: 400; color: #444; white-space: nowrap; flex-shrink: 0; }
.r-bottom-part.active .r-bottom-part-label { font-weight: 400; color: #444; }
.r-bottom-part-sep {  font-size: 11px !important; color: #bbb; flex-shrink: 0; }
.r-bottom-part-count {  font-size: 11px !important; color: #888; white-space: nowrap; flex-shrink: 0; }
.r-bottom-qnums { display: flex; gap: 8px; align-items: center; justify-content: flex-start; flex-wrap: wrap; flex: 1; min-width: 0; }
.r-bottom-qnum { width: 26px; height: 26px; border-radius: 2px; border: 1px solid #bbb; background: transparent; color: #333; font-size: 11px !important; font-weight: 400; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.r-bottom-qnum:hover { background: #f5f5f5; }
.r-bottom-qnum.answered { background: transparent; color: #333; border-color: #bbb; border-top: 3px solid var(--exam-blue, #418ec8); }
.r-bottom-qnum.correct { background: transparent; color: #333; border-color: #bbb; border-top: 3px solid var(--green); }
.r-bottom-qnum.current { border: 1.5px solid #C8102E; color: #C8102E; }
.r-bottom-qnum.answered.current { border: 1.5px solid #C8102E; border-bottom: 3px solid var(--exam-blue, #418ec8); color: #C8102E; }
.r-bottom-qnum.correct.current { border: 1.5px solid #C8102E; border-bottom: 3px solid var(--green); color: #C8102E; }
.r-bottom-qnum.wrong-bubble { border-top: 3px solid var(--red2); color: var(--red2); }
.r-bottom-nav-btns { display: flex; align-items: center; gap: 8px; padding: 0 12px; flex-shrink: 0; }
.r-nav-arrow { width: 44px; height: 36px; background: #1a1a1a; color: #fff; border: none; border-radius: 6px; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.r-nav-arrow:hover { background: #333; }
.r-nav-arrow:disabled { background: #ccc; cursor: default; }
.r-submit-btn { width: 44px; height: 36px; background: #1a1a1a; color: #fff; border: none; border-radius: 6px; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.r-submit-btn:hover { background: #333; }
/* Mock-exam listening footer */
.ielts-footer{height:44px;z-index:8000;background:#f5f5f5;box-shadow:none;display:flex;align-items:stretch;border-top:1px solid #ddd;flex-shrink:0}
.ielts-footer-arrows{display:flex;flex-direction:row;align-items:center;padding:0 6px;gap:4px;flex-shrink:0;border-right:1px solid #ddd}
.ielts-arrow-btn{background:#f5f5f5;border:1px solid #ccc;width:28px;height:28px;cursor:pointer;font-size:11px;color:#555;border-radius:2px;display:flex;align-items:center;justify-content:center}
.ielts-arrow-btn:disabled{opacity:0.3;cursor:not-allowed}
.ielts-arrow-btn:hover:not(:disabled){background:#e0e0e0}
.ielts-parts-row{display:flex;flex:1;align-items:center;overflow:hidden}
.ielts-part-col{flex:0 0 auto;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px;border-right:1px solid #d0d0d0;padding:6px 12px;min-width:0;cursor:pointer}
.ielts-part-col:hover{background:#f9f9f9}
.ielts-part-col.active-part{flex:1 1 auto;justify-content:flex-start;gap:10px;background:transparent;border-bottom:none;cursor:default}
.ielts-part-col.active-part:hover{background:transparent}
.ielts-part-col:not(.active-part) .ielts-qnums-row{display:none}
.ielts-part-col.active-part .ielts-part-count{display:none}
.ielts-foot-part{flex:1;display:flex;align-items:center;justify-content:center;gap:3px;padding:0 6px;border-right:1px solid #e0e0e0;height:100%;cursor:pointer;overflow:hidden;min-width:0;transition:flex 0.2s ease}
.ielts-foot-part:last-of-type{border-right:none}
.ielts-foot-part.fp-active{flex:2;justify-content:space-evenly;padding:0 6px;gap:4px;flex-wrap:nowrap}
.ielts-part-label{font-size:11px!important;font-weight:400;color:#444;white-space:nowrap;margin-right:4px}
.ielts-part-col.active-part .ielts-part-label{font-weight:700;color:#1a1a1a}
.ielts-part-count{font-size:11px!important;color:#888;white-space:nowrap}
.ielts-part-count:not(:empty)::before{content:'· ';color:#bbb}
.ielts-qnums-row{flex:1;display:flex;gap:4px;align-items:center;justify-content:flex-start;flex-wrap:wrap;min-width:0;padding:0}
.ielts-q-pill{width:26px;height:26px;border-radius:2px;border:1px solid #bbb;background:transparent;color:#333;font-size:11px!important;font-weight:400;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.ielts-q-pill.answered{background:transparent;color:#333;border-color:#bbb;border-top:3px solid var(--exam-blue, #418ec8)}
.ielts-q-pill.correct{background:transparent;color:#333;border-color:#bbb;border-top:3px solid var(--green)}
.ielts-q-pill.current-q{border:1.5px solid #C8102E;color:#C8102E}
.ielts-q-pill.wrong-bubble{border-top:3px solid var(--red2);color:var(--red2)}
.ielts-deliver-btn{background:#4a7c2f;color:#fff;border:none;padding:0 20px;cursor:pointer;font-size:20px;flex-shrink:0;font-weight:700;border-radius:3px;margin:8px;display:flex;align-items:center;justify-content:center}
.ielts-deliver-btn:hover{background:#3a6024}

/* Dark mode — Inspera-style exam footers (question pills) */
body.dark .exam-bottombar,
body.dark .ielts-footer{background:var(--bg2,#161616);border-top-color:var(--border,#2a2a2a)}
body.dark .ielts-footer-arrows{border-right-color:var(--border,#2a2a2a)}
body.dark .ielts-arrow-btn{background:var(--bg3,#1e1e1e);border-color:var(--border2,#555);color:var(--text2,#aaa)}
body.dark .ielts-arrow-btn:hover:not(:disabled){background:var(--bg4,#242424)}
body.dark .ielts-part-col,
body.dark .ielts-foot-part,
body.dark .r-bottom-part{border-right-color:var(--border,#2a2a2a)}
body.dark .ielts-part-col:hover,
body.dark .r-bottom-part:hover{background:var(--bg3,#1e1e1e)}
body.dark .ielts-part-label,
body.dark .ielts-part-col.active-part .ielts-part-label,
body.dark .r-bottom-part-label,
body.dark .r-bottom-part.active .r-bottom-part-label{color:var(--text2,#aaa)}
body.dark .ielts-part-count,
body.dark .r-bottom-part-count,
body.dark .r-bottom-part-sep{color:var(--text3,#777)}
body.dark .ielts-q-pill,
body.dark .r-bottom-qnum{color:var(--text,#f0f0f0);border-color:var(--border2,#555);background:transparent}
body.dark .ielts-q-pill:hover,
body.dark .r-bottom-qnum:hover{background:var(--bg3,#1e1e1e)}
body.dark .ielts-q-pill.answered,
body.dark .r-bottom-qnum.answered,
body.dark .ielts-q-pill.correct,
body.dark .r-bottom-qnum.correct{color:var(--text,#f0f0f0);border-color:var(--border2,#555)}
body.dark .ielts-q-pill.current-q,
body.dark .r-bottom-qnum.current{color:#ff6b6b;border-color:#C8102E}

/* Exam runtime visual tokens from Inspera demo sampling (2026-06-24).
   Keep this scoped to the live exam surface; public/auth screens retain IK branding. */
:root{
  --exam-ink:#000;
  --exam-ink-soft:#333;
  --exam-muted:#535353;
  --exam-faint:#757575;
  --exam-surface:#fff;
  --exam-surface-soft:#f9f9f9;
  --exam-chrome:#f1f2ec;
  --exam-border:#d5d5d5;
  --exam-border-soft:#ddd;
  --exam-blue:#418ec8;
}
/* Dark-mode variant of the tokens above -- the exam surface (topbar, part
   header, passage/questions panes, submit bar) previously had no dark values
   at all, so toggling dark mode left the whole practice screen fixed-light
   except for whichever handful of elements happened to reference the site's
   generic --bg/--text vars directly. body.dark (0,1,1) outranks :root
   (0,1,0), so this cascades to every var(--exam-*) rule with no other edits. */
body.dark{
  --exam-ink:#f0f0f0;
  --exam-ink-soft:#ccc;
  --exam-muted:#999;
  --exam-faint:#777;
  --exam-surface:#111;
  --exam-surface-soft:#161616;
  --exam-chrome:#1e1e1e;
  --exam-border:#2a2a2a;
  --exam-border-soft:#383838;
  --exam-blue:#5aa6d8;
}
/* Official IELTS exam theme 3 — yellow ink on dark exam paper (accessibility). */
body.yellow{
  --exam-ink:#ffd633;
  --exam-ink-soft:#e6c34d;
  --exam-muted:#cbab3c;
  --exam-faint:#a98c30;
  --exam-surface:#1a1a1a;
  --exam-surface-soft:#232323;
  --exam-chrome:#2b2b2b;
  --exam-border:#4a4326;
  --exam-border-soft:#5c532e;
  --exam-blue:#5aa6d8;
}
#screen-practice,
#screen-practice button,
#screen-practice input,
#screen-practice select,
#screen-practice textarea{
  font-family:var(--font-exam);
}
#screen-practice.active{
  background:var(--exam-surface);
  color:var(--exam-ink);
}
#screen-practice .exam-topbar{
  background:var(--exam-surface);
  border-bottom:1px solid var(--exam-border);
  padding:7px 18px;
  color:var(--exam-ink-soft);
}
#screen-practice .inspera-ielts{
  color:var(--exam-ink-soft);
  border-color:var(--exam-border);
  font-family:var(--font-exam);
  font-size:22px;
  letter-spacing:0;
}
#screen-practice .inspera-username{color:var(--exam-ink);font-weight:700}
#screen-practice .inspera-audio-row,
#screen-practice .tb-icon{color:var(--exam-muted)}
#screen-practice .notes-btn,
#screen-practice .fz-btn,
#screen-practice .prac-back-btn{
  background:var(--exam-surface);
  color:var(--exam-ink-soft);
  border:1px solid var(--exam-border);
  border-radius:2px;
  font-weight:400;
}
#screen-practice .notes-btn:hover,
#screen-practice .fz-btn:hover,
#screen-practice .prac-back-btn:hover{background:var(--exam-surface-soft)}
#screen-practice .r-passage-pane,
#screen-practice .r-questions-pane,
#screen-practice .listen-pane{
  background:var(--exam-surface);
  color:var(--exam-ink);
}
#screen-practice .r-passage-pane{border-right-color:var(--exam-border-soft)}
#screen-practice .r-passage-header,
#screen-practice .r-part-header{
  background:var(--exam-surface-soft);
  border:1px solid var(--exam-border);
  border-radius:3px;
  color:var(--exam-ink-soft);
}
#screen-practice .r-part-title,
#screen-practice .passage-title,
#screen-practice .q-pane-title{
  font-family:var(--font-exam);
  letter-spacing:0;
}
#screen-practice .passage-title{
  text-align:center;
  font-weight:700;
}
#screen-practice .passage-body p,
#screen-practice .r-para-text,
#screen-practice .r-tfng-statement,
#screen-practice .r-mcq-question,
#screen-practice .r-mcq-option,
#screen-practice .r-completion-stem,
#screen-practice .r-completion-stem-inline,
#screen-practice .r-summary-prose,
#screen-practice .r-short-q,
#screen-practice .ielts-listening-question-item,
#screen-practice .ielts-listening-section-content-wrapper,
#screen-practice .ielts-listening-option,
#screen-practice .mc-line{
  color:var(--exam-ink);
  font-family:var(--font-exam);
}
#screen-practice .passage-body p,
#screen-practice .r-para-text{font-size:16px;line-height:1.5}
#screen-practice .r-qgroup-range,
#screen-practice .r-qgroup-instruction,
#screen-practice .q-text{
  color:var(--exam-ink);
  font-family:var(--font-exam);
}
#screen-practice input[type="radio"],
#screen-practice input[type="checkbox"]{accent-color:var(--exam-blue)}
#screen-practice .q-opt.selected,
#screen-practice .r-mcq-option.selected{
  background:color-mix(in srgb,var(--exam-blue) 15%,var(--exam-surface));
  border-color:var(--exam-blue);
  color:var(--exam-ink);
}
#screen-practice .q-blank-input,
#screen-practice .r-gap-input,
#screen-practice input[type="text"].mc-input{
  background:var(--exam-surface);
  color:var(--exam-ink);
  border-color:var(--exam-border);
  border-bottom-color:var(--exam-muted);
}
#screen-practice .q-blank-input:focus,
#screen-practice .r-gap-input:focus,
#screen-practice .q-heading-select:focus,
#screen-practice .r-mh-select:focus,
#screen-practice input[type="text"].mc-input:focus{
  border-color:var(--exam-blue);
  border-bottom-color:var(--exam-blue);
}
#screen-practice .exam-bottombar,
#screen-practice .ielts-footer{
  background:var(--exam-surface-soft);
  border-top:1px solid var(--exam-border-soft);
  color:var(--exam-ink-soft);
}
#screen-practice .r-bottom-part,
#screen-practice .ielts-part-col,
#screen-practice .ielts-foot-part,
#screen-practice .ielts-footer-arrows{border-color:var(--exam-border-soft)}
#screen-practice .r-bottom-qnum.current,
#screen-practice .ielts-q-pill.current-q,
#screen-practice .prac-bubble:hover{
  border-color:var(--exam-blue);
  color:var(--exam-blue);
}
#screen-practice .r-nav-arrow,
#screen-practice .r-submit-btn{
  background:var(--exam-ink-soft);
  border-radius:3px;
}
#screen-practice .r-nav-arrow:hover,
#screen-practice .r-submit-btn:hover{background:var(--exam-ink)}
body.dark .ielts-q-pill.wrong-bubble,
body.dark .r-bottom-qnum.wrong-bubble{color:#ff6b6b}
body.dark .r-part-header{background:var(--bg3,#1e1e1e);border-color:var(--border,#2a2a2a)}
body.dark .r-part-header-title{color:var(--text,#f0f0f0)}
body.dark .r-part-header-sub{color:var(--text2,#aaa)}
body.dark .r-resize-handle{background:var(--border2,#444)}
body.dark .r-resize-handle:hover,
body.dark .r-resize-handle.dragging{background:#C8102E}

.r-passage-pane::-webkit-scrollbar, .r-questions-pane::-webkit-scrollbar { width: 6px; }
.r-passage-pane::-webkit-scrollbar-track, .r-questions-pane::-webkit-scrollbar-track { background: transparent; }
.r-passage-pane::-webkit-scrollbar-thumb, .r-questions-pane::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }
/* Fullscreen: fullscreen is on documentElement so body/page scrolls normally */
:fullscreen body,:-webkit-full-screen body{overflow-y:auto;background:var(--bg,#fff)}
:fullscreen .listen-pane,:-webkit-full-screen .listen-pane{background:var(--bg)}
:fullscreen,:-webkit-full-screen,:fullscreen *,:-webkit-full-screen *{user-select:text!important;-webkit-user-select:text!important}
/* ── ENRICH POST-SUBMIT REVIEW ───────────────────────────────────── */
mark.enrich-highlight{background:rgba(34,160,90,0.25);border-radius:3px;padding:0 2px;color:inherit}
.listen-transcript-wrap{display:flex;height:calc(100vh - 104px);overflow:hidden}
.listen-transcript-pane{width:50%;overflow-y:auto;padding:14px 16px;border-right:1px solid var(--border);flex-shrink:0;background:var(--bg2)}
.listen-q-pane{flex:1;overflow-y:auto}
.transcript-line{padding:6px 10px;border-radius:5px;margin:3px 0;font-size:13.5px;line-height:1.7;transition:background .15s,transform .15s}
.transcript-line-correct{background:rgba(34,160,90,0.16);border-left:3px solid var(--green)}
.transcript-line-wrong{background:rgba(220,53,69,0.12);border-left:3px solid #dc3545}
.transcript-line-neutral{background:rgba(150,150,150,0.13);border-left:3px solid #888}
.q-chip{display:inline-block;min-width:22px;height:22px;background:#1a1a2e;color:#fff;border-radius:3px;font-size:11px;text-align:center;line-height:22px;margin-left:6px;font-weight:700}
.enrich-explain-wrap{margin-top:4px}
.enrich-explain-btn{background:none;border:1px solid var(--border2,#383838);color:var(--tx3,#888);padding:2px 8px;font-size:11px;cursor:pointer;border-radius:3px;margin-top:4px}
.enrich-explain-body{font-size:12px;color:var(--tx2,#aaa);line-height:1.6;margin-top:6px;padding:8px;background:var(--bg3,#161616);border-radius:4px}
.enrich-keywords{font-weight:600;color:var(--gold,var(--gold));margin-bottom:4px}
.enrich-synonyms{color:var(--tx3,#888);margin-top:4px;font-style:italic}

/* ── Part/Passage Page ── */

/* Search row */
.pp-search-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pp-search-row:focus-within {
  border-color: var(--acc);
  box-shadow: 0 0 0 3px rgba(192,57,43,0.12);
}
.pp-search-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pp-search-icon { flex-shrink: 0; }
.pp-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  font-family:var(--font-exam);
  color: var(--text);
  background: transparent;
}
.pp-search-input::placeholder { color: var(--text3); }
.pp-section-pills {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.pp-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--bg2);
  font-size: 13px;
  font-weight: 700;
  font-family:var(--font-exam);
  color: var(--text2);
  cursor: pointer;
  transition: all 0.15s;
}
.pp-pill--active {
  background: rgba(192,57,43,0.07);
  border-color: var(--acc);
  color: var(--acc);
}
.pp-pill:hover:not(.pp-pill--active) {
  border-color: var(--border2);
  color: var(--text);
}

/* ── Question Type Page ── */

.qt-search-row {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

/* 4-column grid */
.qt-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

/* Card */
.qt-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.qt-card:hover {
  border-color: var(--acc);
  box-shadow: 0 3px 12px rgba(192,57,43,0.08);
}
.qt-card.selected {
  border-color: var(--acc);
  background: rgba(192,57,43,0.07);
  box-shadow: 0 3px 12px rgba(192,57,43,0.08);
}

/* Inner layout: left text + right count+chevron */
.qt-card-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.qt-card-left {
  flex: 1;
  min-width: 0;
}
.qt-card-section {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: var(--text3);
  font-family:var(--font-exam);
  margin-bottom: 4px;
  text-transform: uppercase;
}
.qt-card-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  font-family:var(--font-exam);
  line-height: 1.3;
  letter-spacing: 0.3px;
}
.qt-card-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.qt-card-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--acc);
  font-family:var(--font-exam);
  white-space: nowrap;
}
.qt-chevron {
  flex-shrink: 0;
  transition: stroke 0.15s;
}
.qt-card:hover .qt-chevron,
.qt-card.selected .qt-chevron {
  stroke: var(--acc);
}

/* Responsive */
@media (max-width: 900px) {
  .qt-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .qt-card-grid { grid-template-columns: 1fr; }
}

/* Type cards grouped under their mother IELTS category */
#typeCardGrid.qt-grouped { display: block; }
.qt-type-group { margin-bottom: 16px; }
.qt-type-group:last-child { margin-bottom: 0; }
.qt-group-header {
  font-size: 10px; font-weight: 900; letter-spacing: 1.5px;
  color: var(--text3); text-transform: uppercase; font-family:var(--font-exam);
  margin: 0 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--border);
}
.qt-group-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.qt-type-group.qt-solo .qt-group-cards { grid-template-columns: repeat(auto-fill, minmax(230px, max-content)); }
.qt-card.is-empty { opacity: .5; cursor: default; }
.qt-card.is-empty:hover { border-color: var(--border); box-shadow: none; }
.qt-card.is-empty:hover .qt-chevron { stroke: #ccc; }
.qt-card.is-empty .qt-card-count { color: var(--text3); font-weight: 600; font-size: 10px; }
@media (max-width: 480px) { .qt-group-cards { grid-template-columns: 1fr; } }

/* Continue card */
.pp-continue-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.pp-continue-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: rgba(192,57,43,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pp-continue-meta {
  flex: 1;
  min-width: 0;
}
.pp-continue-eyebrow {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--acc);
  margin-bottom: 4px;
  font-family:var(--font-exam);
}
.pp-continue-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  font-family:var(--font-exam);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pp-continue-sub {
  font-size: 13px;
  color: var(--text2);
  font-family:var(--font-exam);
  margin-top: 2px;
}
.pp-continue-progress-wrap {
  flex: 0 0 200px;
}
.pp-continue-score {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 6px;
}
.pp-continue-score-num {
  font-size: 22px;
  font-weight: 900;
  color: var(--acc);
  font-family:var(--font-exam);
}
.pp-continue-score-denom {
  font-size: 13px;
  color: var(--text2);
  font-family:var(--font-exam);
}
.pp-continue-bar {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.pp-continue-bar-fill {
  height: 100%;
  background: var(--acc);
  border-radius: 2px;
  transition: width 0.4s ease;
}
.pp-continue-btn {
  flex-shrink: 0;
  padding: 12px 24px;
  background: var(--acc);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  font-family:var(--font-exam);
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.pp-continue-btn:hover { background: #a93226; }

.prac-resume-wrap {
  display: none;
  margin: 12px 0 14px;
  gap: 10px;
  flex-direction: column;
}
.prac-resume-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg2);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}
.prac-resume-main {
  min-width: 0;
}
.prac-resume-title {
  font-weight: 800;
  color: var(--text);
  line-height: 1.35;
}
.prac-resume-progress {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text3);
}
.prac-resume-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.prac-resume-btn {
  border: 0;
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  background: var(--acc);
  color: #fff;
}
.prac-resume-btn.secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.anon-progress-card{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:16px;border:1px solid rgba(192,57,43,.38);border-radius:8px;background:linear-gradient(135deg,rgba(192,57,43,.12),rgba(255,255,255,.03));box-shadow:0 16px 36px rgba(0,0,0,.16)}
.anon-progress-main{min-width:0}
.anon-progress-kicker{font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:2px;color:var(--acc);margin-bottom:5px}
.anon-progress-title{font-family:var(--font-heading);font-weight:800;font-size:25px;letter-spacing:1px;line-height:1;color:var(--text)}
.anon-progress-sub{font-size:12px;color:var(--text2);margin-top:6px;line-height:1.45}
.anon-progress-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;min-width:250px}
.anon-progress-stats div{border:1px solid var(--border);border-radius:7px;background:rgba(0,0,0,.12);padding:9px;text-align:center}
.anon-progress-stats strong{display:block;font-family:var(--font-heading);font-weight:800;font-size:25px;line-height:1;color:var(--text)}
.anon-progress-stats span{display:block;margin-top:2px;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:1px;color:var(--text3)}
.anon-progress-cta{background:var(--acc);color:#fff;text-decoration:none;border-radius:7px;padding:11px 13px;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:1px;white-space:nowrap}

/* Section label */
.pp-section-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--text2);
  font-family:var(--font-exam);
  margin-bottom: 14px;
  padding-left: 2px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pp-back-btn {
  border: 1.5px solid var(--acc);
  background: transparent;
  color: var(--acc);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 800;
  font-family:var(--font-exam);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.pp-back-btn:hover {
  background: var(--acc);
  color: #fff;
}

/* Tests grid */
.pp-tests-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.pp-bucket-card {
  min-height: 160px;
  background: var(--bg2);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 28px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--acc);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.pp-bucket-card:hover,
.pp-bucket-card:focus {
  border-color: var(--acc);
  box-shadow: 0 4px 16px rgba(192,57,43,0.08);
  transform: translateY(-2px);
  outline: none;
}
.pp-bucket-icon {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: rgba(192,57,43,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pp-bucket-label {
  font-size: 18px;
  font-weight: 900;
  font-family:var(--font-exam);
  color: var(--text);
}
.pp-test-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pp-test-card:hover {
  border-color: var(--acc);
  box-shadow: 0 4px 16px rgba(192,57,43,0.08);
}
.pp-test-card-left {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.pp-test-icon {
  width: 40px;
  height: 40px;
  background: rgba(192,57,43,0.07);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pp-test-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  font-family:var(--font-exam);
  line-height: 1.3;
  margin-bottom: 3px;
}
.pp-test-meta {
  font-size: 12px;
  color: var(--text2);
  font-family:var(--font-exam);
  margin-bottom: 6px;
}
.pp-test-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: var(--acc);
  background: rgba(192,57,43,0.08);
  padding: 2px 8px;
  border-radius: 4px;
  font-family:var(--font-exam);
}
.pp-test-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pp-passage-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1.5px solid var(--acc);
  border-radius: 6px;
  background: var(--bg2);
  color: var(--acc);
  font-size: 11px;
  font-weight: 700;
  font-family:var(--font-exam);
  cursor: pointer;
  transition: all 0.12s;
}
.pp-passage-pill:hover {
  background: var(--acc);
  color: #fff;
}
.pp-passage-pill svg { flex-shrink: 0; }

/* Loading / empty states */
.pp-loading, .pp-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px;
  font-size: 14px;
  color: var(--text3);
  font-family:var(--font-exam);
}

/* Responsive */
@media (max-width: 768px) {
  .pp-tests-grid { grid-template-columns: 1fr; }
  .pp-continue-progress-wrap { display: none; }
  .pp-search-row { flex-direction: column; align-items: stretch; }
  .score-banner.show{align-items:flex-start;flex-direction:column}
  .guest-score-cta{margin-left:0;max-width:none;width:100%}
  .anon-progress-card{align-items:stretch;flex-direction:column}
  .anon-progress-stats{min-width:0}
  .anon-progress-cta{text-align:center}
}
@media (max-width: 480px) {
  .pp-continue-card { flex-wrap: wrap; }
  .pp-continue-btn { width: 100%; text-align: center; }
}

/* Inspera screenshot alignment pass (2026-06-24): tighter, flatter exam runtime. */
#screen-practice .exam-topbar{min-height:52px;padding:0 14px}
#screen-practice .inspera-logo{margin-right:18px}
#screen-practice .inspera-ielts{border:0;padding:0;color:#e31837;font-size:27px;line-height:1;font-weight:900}
#screen-practice .inspera-username{font-size:12px;line-height:16px}
#screen-practice .inspera-audio-row{display:none}
#screen-practice .exam-topbar-right{gap:18px}
#screen-practice #pracExamTopbar .notes-btn,
#screen-practice #pracExamTopbar .prac-fs-btn{display:none}
#screen-practice .notes-btn{border:0;padding:0;background:transparent;color:var(--exam-ink);font-size:0}
#screen-practice .notes-btn::before{content:"";display:block;width:18px;height:18px}
#screen-practice .fz-btn{border:0;padding:0;background:transparent;color:var(--exam-ink)}
#screen-practice .r-passage-header,
#screen-practice .r-part-header{margin:10px 12px;padding:10px 14px;background:var(--exam-chrome);border-color:var(--exam-border);border-radius:2px}
#screen-practice .r-passage-inner{padding:20px 22px 70px}
#screen-practice .r-questions-inner{padding:20px 22px 70px}
#screen-practice .r-passage-title{font-family:var(--font-exam);font-size:16px;line-height:1.35;margin:0 0 12px}
#screen-practice .passage-body p,
#screen-practice .r-para-text,
#screen-practice .r-tfng-statement,
#screen-practice .r-mcq-question,
#screen-practice .r-mcq-option,
#screen-practice .r-completion-row,
#screen-practice .r-completion-stem,
#screen-practice .r-completion-stem-inline,
#screen-practice .r-summary-prose,
#screen-practice .r-short-q,
#screen-practice .q-text,
#screen-practice .q-opt,
#screen-practice .ielts-listening-question-item,
#screen-practice .ielts-listening-section-content-wrapper,
#screen-practice .ielts-listening-option,
#screen-practice .mc-line{font-size:14px;line-height:1.45}
#screen-practice .passage-body p,
#screen-practice .r-paragraph{margin-bottom:12px}
#screen-practice .r-qgroup{margin-bottom:28px}
#screen-practice .r-qgroup-header{margin:16px 0 8px}
#screen-practice .r-qgroup-range{font-size:15px;font-weight:700}
#screen-practice .r-qgroup-instruction{font-size:14px;line-height:1.45}
#screen-practice .r-q-num{min-width:20px;font-size:14px}
#screen-practice .r-mcq-option,
#screen-practice .q-opt{padding:6px 8px 6px 32px;border:0;border-radius:0}
#screen-practice .q-opt.selected,
#screen-practice .r-mcq-option.selected{background:color-mix(in srgb,var(--exam-blue) 25%,var(--exam-surface));border:0}
#screen-practice .r-mcq-option input[type="radio"],
#screen-practice .r-mcq-option input[type="checkbox"],
#screen-practice .q-opt input[type="radio"],
#screen-practice .q-opt input[type="checkbox"]{width:13px;height:13px}
#screen-practice .r-mh-passage-zone{min-height:34px;height:auto;padding:7px 12px;margin:10px 0 6px;border:1px solid var(--exam-border);border-radius:4px;background:var(--exam-surface);justify-content:center;color:var(--exam-ink,#1a1a1a);font-size:13px;font-weight:700}
#screen-practice .r-mh-passage-zone .dnd-drop-placeholder{font-size:13px;min-width:auto;font-weight:700;color:var(--exam-ink,#333)}
#screen-practice .r-mh-passage-zone.dnd-drop-zone-filled{border:1px solid #1a73e8;background:var(--exam-surface);justify-content:flex-start;padding:8px 12px}
#screen-practice .r-mh-passage-zone.dnd-drop-zone-filled .dnd-drop-value{font-size:13px;line-height:1.3;font-weight:600;color:var(--exam-ink,#1a1a1a)}
#screen-practice .r-mh-card,
#screen-practice .r-wb-card,
#screen-practice .dnd-card{border-radius:2px;padding:2px 7px;font-size:12px;line-height:1.2;font-weight:700;background:var(--exam-surface);border:1px solid var(--exam-border);color:var(--exam-ink)}
#screen-practice .r-mh-card:hover,
#screen-practice .r-wb-card:hover,
#screen-practice .dnd-card:hover{background:var(--exam-surface-soft)}
#screen-practice .r-mh-bank{padding:8px 0 0}
#screen-practice .r-mh-bank-title{font-size:12px;letter-spacing:0;text-transform:none;color:var(--exam-ink)}
#screen-practice .r-bottom-qnum.current,
#screen-practice .ielts-q-pill.current-q{border:1px solid var(--exam-blue);background:var(--exam-surface);color:var(--exam-ink);font-weight:700}
#screen-practice .r-bottom-qnum.answered,
#screen-practice .ielts-q-pill.answered{border-top:3px solid var(--exam-blue)}
#screen-practice .r-bottom-qnum.correct,
#screen-practice .ielts-q-pill.correct{border-top:3px solid var(--green)}

/* Text-size controls must catch every shared renderer element, not only prose. */
body.fs-md #screen-practice :is(.r-passage-title,.r-part-title,.r-part-sub,.r-qgroup-range,.r-qgroup-instruction,.ik-instr,.r-para-text,.passage-body p,.r-tfng-statement,.r-tfng-radio-option,.r-mcq-question,.r-mcq-option,.r-completion-row,.r-completion-stem,.r-completion-stem-inline,.r-summary-prose,.r-short-q,.q-text,.q-opt,.q-blank-pre,.q-blank-post,.q-heading-para,.summary-text,.r-mh-select-row,.r-mh-row,.r-mh-card,.r-wb-card,.r-wb-zone,.r-mh-passage-zone,.r-feature-list-heading,.r-feature-list-item,.r-match-option-item,.r-match-grid-stmt,.r-match-grid-col,.r-ending-stem,.r-ending-zone,.dnd-card,.dnd-text,.ielts-listening-question-section-heading,.ielts-listening-question-section-content,.ielts-listening-section-content-wrapper,.ielts-listening-question-item,.ielts-listening-option,.mc-line,.lmf-stmt-cell,.lmf-option-label,.tc-table,.tc-table *){
  font-size:16px!important;
  line-height:1.55!important;
}
body.fs-lg #screen-practice :is(.r-passage-title,.r-part-title,.r-part-sub,.r-qgroup-range,.r-qgroup-instruction,.ik-instr,.r-para-text,.passage-body p,.r-tfng-statement,.r-tfng-radio-option,.r-mcq-question,.r-mcq-option,.r-completion-row,.r-completion-stem,.r-completion-stem-inline,.r-summary-prose,.r-short-q,.q-text,.q-opt,.q-blank-pre,.q-blank-post,.q-heading-para,.summary-text,.r-mh-select-row,.r-mh-row,.r-mh-card,.r-wb-card,.r-wb-zone,.r-mh-passage-zone,.r-feature-list-heading,.r-feature-list-item,.r-match-option-item,.r-match-grid-stmt,.r-match-grid-col,.r-ending-stem,.r-ending-zone,.dnd-card,.dnd-text,.ielts-listening-question-section-heading,.ielts-listening-question-section-content,.ielts-listening-section-content-wrapper,.ielts-listening-question-item,.ielts-listening-option,.mc-line,.lmf-stmt-cell,.lmf-option-label,.tc-table,.tc-table *){
  font-size:19px!important;
  line-height:1.65!important;
}
body.fs-xl #screen-practice :is(.r-passage-title,.r-part-title,.r-part-sub,.r-qgroup-range,.r-qgroup-instruction,.ik-instr,.r-para-text,.passage-body p,.r-tfng-statement,.r-tfng-radio-option,.r-mcq-question,.r-mcq-option,.r-completion-row,.r-completion-stem,.r-completion-stem-inline,.r-summary-prose,.r-short-q,.q-text,.q-opt,.q-blank-pre,.q-blank-post,.q-heading-para,.summary-text,.r-mh-select-row,.r-mh-row,.r-mh-card,.r-wb-card,.r-wb-zone,.r-mh-passage-zone,.r-feature-list-heading,.r-feature-list-item,.r-match-option-item,.r-match-grid-stmt,.r-match-grid-col,.r-ending-stem,.r-ending-zone,.dnd-card,.dnd-text,.ielts-listening-question-section-heading,.ielts-listening-question-section-content,.ielts-listening-section-content-wrapper,.ielts-listening-question-item,.ielts-listening-option,.mc-line,.lmf-stmt-cell,.lmf-option-label,.tc-table,.tc-table *){
  font-size:22px!important;
  line-height:1.75!important;
}
body.fs-sm #screen-practice :is(.r-passage-title,.r-part-title,.r-part-sub,.r-qgroup-range,.r-qgroup-instruction,.ik-instr,.r-para-text,.passage-body p,.r-tfng-statement,.r-tfng-radio-option,.r-mcq-question,.r-mcq-option,.r-completion-row,.r-completion-stem,.r-completion-stem-inline,.r-summary-prose,.r-short-q,.q-text,.q-opt,.q-blank-pre,.q-blank-post,.q-heading-para,.summary-text,.r-mh-select-row,.r-mh-row,.r-mh-card,.r-wb-card,.r-wb-zone,.r-mh-passage-zone,.r-feature-list-heading,.r-feature-list-item,.r-match-option-item,.r-match-grid-stmt,.r-match-grid-col,.r-ending-stem,.r-ending-zone,.dnd-card,.dnd-text,.ielts-listening-question-section-heading,.ielts-listening-question-section-content,.ielts-listening-section-content-wrapper,.ielts-listening-question-item,.ielts-listening-option,.mc-line,.lmf-stmt-cell,.lmf-option-label,.tc-table,.tc-table *){
  font-size:13px!important;
  line-height:1.45!important;
}
body:is(.fs-sm,.fs-md,.fs-lg,.fs-xl) #screen-practice :is(.exam-bottombar *,.ielts-footer *,.r-bottom-qnum,.ielts-q-pill,.r-nav-arrow,.r-submit-btn,.ielts-arrow-btn,.ielts-deliver-btn){
  font-size:revert!important;
  line-height:normal!important;
}

/* Bottom question strip: closer to Inspera's floating arrows + thin part bar. */
#screen-practice .exam-bottombar{
  min-height:44px;
  height:44px;
  background:var(--exam-surface);
  border-top:0;
  overflow:visible;
  position:relative;
  z-index:120;
}
#screen-practice #rBottomParts{
  display:flex;
  align-items:center;
  flex:1;
  min-width:0;
  padding-right:118px;
}
#screen-practice .r-bottom-part{
  border-right:0;
  padding:0 16px;
  height:44px;
  flex:1 1 0;
  justify-content:center;
  gap:8px;
}
#screen-practice .r-bottom-part.active{
  flex:2 1 0;
  justify-content:center;
  gap:8px;
}
#screen-practice .r-bottom-part-label{
  font-family:var(--font-exam);
  font-size:12px!important;
  font-weight:400;
  color:var(--exam-muted);
}
#screen-practice .r-bottom-part.active .r-bottom-part-label{
  font-weight:700;
  color:var(--exam-ink);
}
#screen-practice .r-bottom-qnums{gap:7px;justify-content:center;flex:0 1 auto}
#screen-practice .r-bottom-qnum{
  width:18px;
  height:20px;
  border:0;
  border-radius:1px;
  font-size:12px!important;
  color:var(--exam-muted);
  background:var(--exam-surface);
}
#screen-practice .r-bottom-qnum.current{
  border:1px solid var(--exam-blue);
  color:var(--exam-ink);
  font-weight:700;
}
#screen-practice .r-bottom-qnum.answered{
  border:0;
  box-shadow:inset 0 3px 0 var(--exam-blue);
  padding-top:2px;
}
#screen-practice .r-bottom-qnum.correct{
  border:0;
  box-shadow:inset 0 3px 0 var(--green);
  padding-top:2px;
}
#screen-practice .r-bottom-nav-btns{
  position:fixed;
  right:16px;
  bottom:44px;
  z-index:200;
  gap:2px;
  padding:0;
}
#screen-practice .r-nav-arrow{
  width:42px;
  height:42px;
  border-radius:2px;
  background:#0a0a0a;
  color:#fff;
  font-size:24px;
}
#screen-practice .r-nav-arrow:disabled{
  background:#e5e5e5;
  color:#fff;
  opacity:1;
}
#screen-practice .r-submit-btn{
  position:fixed;
  right:0;
  bottom:0;
  width:66px;
  height:44px;
  border-radius:0;
  background:var(--exam-surface-soft);
  color:var(--exam-ink-soft);
  font-size:18px;
}

/* Practice-only controls + footer refinement (mock exam keeps its current chrome). */
#screen-practice #pracExamTopbar .notes-btn,
#screen-practice #pracExamTopbar .prac-notes-btn,
#screen-practice #pracExamTopbar .prac-fs-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  border:1px solid var(--exam-border);
  background:var(--exam-surface);
  color:var(--exam-ink);
  font-family:var(--font-exam);
  font-size:12px;
  line-height:1;
  padding:0 10px;
  border-radius:2px;
}
#screen-practice #pracExamTopbar .notes-btn::before{display:none}
#screen-practice #pracExamTopbar .notes-btn:hover,
#screen-practice #pracExamTopbar .prac-notes-btn:hover,
#screen-practice #pracExamTopbar .prac-fs-btn:hover{background:var(--exam-surface-soft)}
#screen-practice #pracExamTopbar .prac-notes-btn,
#screen-practice #pracExamTopbar .prac-fs-btn{
  width:34px;
  padding:0;
}
/* Note-count badge on the practice topbar note icon */
#screen-practice #pracExamTopbar .prac-notes-btn{position:relative}
#screen-practice #pracExamTopbar .prac-notes-btn[data-note-count]:not([data-note-count="0"])::after{content:attr(data-note-count);position:absolute;top:-6px;right:-7px;min-width:14px;height:14px;padding:0 3px;box-sizing:border-box;background:var(--exam-red,#c0392b);color:#fff;font-size:9px;font-weight:700;line-height:14px;text-align:center;border-radius:8px}
#screen-practice #rBottomParts{padding-right:126px}
#screen-practice .r-bottom-part{padding:0 22px}
#screen-practice .r-bottom-part.active{gap:14px}
#screen-practice .r-bottom-qnums{
  gap:13px;
  padding-top:7px;
}
#screen-practice .r-bottom-qnum{
  position:relative;
  width:18px;
  height:20px;
  overflow:visible;
}
#screen-practice .r-bottom-qnum.answered,
#screen-practice .r-bottom-qnum.correct{
  box-shadow:none;
  padding-top:0;
}
#screen-practice .r-bottom-qnum.answered::before{
  content:"";
  position:absolute;
  left:1px;
  right:1px;
  top:-7px;
  height:3px;
  background:var(--exam-blue);
}
#screen-practice .r-bottom-qnum.correct::before{
  content:"";
  position:absolute;
  left:1px;
  right:1px;
  top:-7px;
  height:3px;
  background:var(--green);
}
#screen-practice .r-bottom-qnum.answered.current::before,
#screen-practice .r-bottom-qnum.correct.current::before{top:-8px}

/* Question number markers must scale and sit on the same baseline as the question text. */
#screen-practice :is(.r-q-num,.q-num,.ielts-listening-question-number,.mc-qnum){
  font-size:inherit!important;
  line-height:inherit!important;
  padding-top:0!important;
  vertical-align:baseline!important;
}
#screen-practice .r-q-num{
  display:inline-flex;
  align-items:baseline;
  align-self:baseline;
  min-width:2ch;
  width:auto!important;
  margin-right:2px;
}
#screen-practice :is(.r-mcq-question,.r-tfng-header,.r-completion-row,.r-completion-inline,.r-short-q-line,.r-match-grid-stmt){
  align-items:baseline;
}
#screen-practice .ielts-listening-question-number{
  display:inline;
  width:auto;
  height:auto;
  min-width:0;
  margin-right:.45em;
}

body.fs-md #screen-practice :is(.r-q-num,.q-num,.ielts-listening-question-number,.mc-qnum){font-size:16px!important;line-height:1.55!important}
body.fs-lg #screen-practice :is(.r-q-num,.q-num,.ielts-listening-question-number,.mc-qnum){font-size:19px!important;line-height:1.65!important}
body.fs-xl #screen-practice :is(.r-q-num,.q-num,.ielts-listening-question-number,.mc-qnum){font-size:22px!important;line-height:1.75!important}
body.fs-sm #screen-practice :is(.r-q-num,.q-num,.ielts-listening-question-number,.mc-qnum){font-size:13px!important;line-height:1.45!important}

/* Completion text boxes: stable Inspera-style rectangles before, during, and after typing. */
#screen-practice :is(input[type="text"].mc-input,.ielts-exam-content input[type="text"],.r-gap-input,.q-blank-input,.tc-table .mc-input){
  box-sizing:border-box;
  display:inline-block;
  width:auto;
  min-width:120px;
  max-width:240px;
  field-sizing:content;
  height:24px;
  padding:0 8px;
  margin:0 4px;
  border:1px solid var(--exam-muted);
  border-radius:0;
  background:var(--exam-surface);
  color:var(--exam-ink);
  font-family:var(--font-exam);
  font-size:inherit!important;
  line-height:22px!important;
  font-weight:400!important;
  text-align:center;
  vertical-align:baseline;
  outline:none;
  box-shadow:none;
  appearance:none;
  -webkit-appearance:none;
}
#screen-practice :is(input[type="text"].mc-input,.ielts-exam-content input[type="text"],.r-gap-input,.q-blank-input,.tc-table .mc-input)::placeholder{
  color:var(--exam-muted);
  font-weight:700;
  opacity:1;
}
#screen-practice :is(input[type="text"].mc-input,.ielts-exam-content input[type="text"],.r-gap-input,.q-blank-input,.tc-table .mc-input):focus{
  border:1px solid var(--exam-blue);
  background:var(--exam-surface);
  outline:none;
  box-shadow:none;
}
/* Keep table-completion cells constrained (don't let field-sizing widen the column). */
#screen-practice .tc-table input[type="text"].mc-input{width:32%;min-width:92px;max-width:160px;field-sizing:fixed}
#screen-practice .tc-table .mc-input{width:120px;min-width:120px;max-width:180px}
#screen-practice .mc-line{align-items:baseline}
/* Correct/wrong indicator borders (light green/red per --green/--red2) -- needs
   to out-specificity the #screen-practice :is(...) box-stabilizer above, which
   hardcodes border:1px solid #777 and was silently winning over .p-correct/
   .p-wrong on every input (reading and listening both), leaving no visible
   correctness indicator on the boxes themselves. */
#screen-practice :is(input[type="text"].mc-input,.r-gap-input,.r-short-input).p-correct{border-color:var(--green)}
#screen-practice :is(input[type="text"].mc-input,.r-gap-input,.r-short-input).p-wrong{border-color:var(--red2)}

/* Diagram-labelling boxes: compact white fields on the white diagram, forced light in
   BOTH themes. The #screen-practice completion rule above paints them with --exam-surface
   (which is #111 in dark mode -> a dark box on a white diagram) and min-width:120px (which
   covers the baked label text); these overrides pin them white + compact regardless. */
#screen-practice input[type="text"].r-diagram-input{
  width:58px;min-width:0;max-width:58px;field-sizing:fixed;
  height:22px;padding:0 5px;margin:0;
  background:#fff;color:#111;
  border:1px solid #8a8a8a;border-radius:3px;
  box-shadow:0 1px 2px rgba(0,0,0,.18);
  text-align:center;
}
#screen-practice input[type="text"].r-diagram-input::placeholder{color:#9a9a9a;font-weight:700}
#screen-practice input[type="text"].r-diagram-input:focus{border-color:var(--exam-blue,#418ec8);box-shadow:0 0 0 2px rgba(65,142,200,.25)}

/* Listening footer pill parity with reading: wider spacing + separate answered strip. */
#screen-practice .ielts-qnums-row{
  gap:13px;
  padding-top:7px;
  justify-content:center;
}
#screen-practice .ielts-q-pill{
  position:relative;
  width:18px;
  height:20px;
  overflow:visible;
  border:0;
  border-radius:1px;
  background:var(--exam-surface);
  color:var(--exam-muted);
  font-size:12px!important;
}
#screen-practice .ielts-q-pill.current-q{
  border:1px solid var(--exam-blue);
  color:var(--exam-ink);
  font-weight:700;
}
#screen-practice .ielts-q-pill.answered,
#screen-practice .ielts-q-pill.correct{
  border-top:0;
  box-shadow:none;
  padding-top:0;
}
#screen-practice .ielts-q-pill.answered::before{
  content:"";
  position:absolute;
  left:1px;
  right:1px;
  top:-7px;
  height:3px;
  background:var(--exam-blue);
}
#screen-practice .ielts-q-pill.correct::before{
  content:"";
  position:absolute;
  left:1px;
  right:1px;
  top:-7px;
  height:3px;
  background:var(--green);
}
#screen-practice .ielts-q-pill.answered.current-q::before,
#screen-practice .ielts-q-pill.correct.current-q::before{top:-8px}

/* Inspera footer strip is white, not grey. Keep the pill spacing/answered markers above. */
#screen-practice .ielts-footer{background:var(--exam-surface)}