/* ============================================================================
   22-listening-exam.css — STUDENT LISTENING EXAM PLAYER
   ----------------------------------------------------------------------------
   The #listening-exam takeover is built entirely by lxRenderShell() in
   17-listening-exam.js. It reuses the shared per-question renderers from the
   reading exam (.ex-q-card / .ex-mc-* / gap inputs); those reading styles in
   15-exam.css are scoped under #reading-exam, so the question-body rules are
   RE-SCOPED here under #listening-exam. All class names below match exactly
   what 17-listening-exam.js emits. Light + dark both covered.
   ========================================================================== */

#listening-exam{
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column;
  background: var(--exam-bg, #0b1620);
  color: var(--exam-fg, #e9eef3);
  font-family: 'Hanken Grotesk', system-ui, -apple-system, 'Native Emoji', sans-serif;
  --lx-line: rgba(255,255,255,.10);
  --lx-accent: var(--exam-accent, #11A37F);
  --lx-accent-weak: color-mix(in srgb, var(--lx-accent) 16%, transparent);
  --lx-panel: color-mix(in srgb, var(--exam-bg, #0b1620) 70%, #000);
}
[data-theme="light"] #listening-exam{ --lx-line: rgba(16,34,46,.12); --lx-panel:#fff; }
#listening-exam *{ box-sizing: border-box; }

/* ============================== APPBAR ===================================== */
#listening-exam .exam-appbar{
  flex: 0 0 auto; display: flex; align-items: center; gap: 16px;
  padding: 11px 20px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--exam-bg,#0b1620) 70%, #000) 0%,
      color-mix(in srgb, var(--exam-bg,#0b1620) 90%, #000) 100%);
  border-bottom: 1px solid var(--lx-line);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--lx-accent) 26%, transparent),
              0 8px 24px -18px rgba(0,0,0,.8);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  position: relative; z-index: 3;
}
/* Signature teal→cyan light-beam along the top edge (dark base; the light-mode
   rule below overrides it). Ties the header to the sonar gate. */
#listening-exam .exam-appbar::before{
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--lx-accent) 24%, #22d3ee 50%, var(--lx-accent) 76%, transparent);
  opacity: .8;
}
[data-theme="light"] #listening-exam .exam-appbar{
  background: linear-gradient(180deg, #ffffff, #eef2f6);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--lx-accent) 22%, transparent),
              0 6px 18px -16px rgba(16,34,46,.4);
}
#listening-exam .exam-appbar-left{ display: flex; align-items: center; gap: 12px; }
#listening-exam .exam-appbar-right{ display: flex; align-items: center; gap: 8px; }
/* Two spacers flank the timer so it sits centred while brand stays left and
   controls stay right. */
#listening-exam .exam-appbar-spacer{ flex: 1 1 auto; }

/* Practice-mode timer capsule (Casual stopwatch counts up · Mock countdown
   counts down). Accent = mint by default; amber/red near a Mock deadline;
   indigo for the Casual stopwatch. */
#listening-exam .lx-timer{
  --lxt: var(--lx-accent, #10b981);
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 15px 6px 12px; border-radius: 999px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  background: color-mix(in srgb, var(--lxt) 12%, var(--lx-panel, rgba(255,255,255,.03)));
  border: 1px solid color-mix(in srgb, var(--lxt) 30%, var(--lx-line, rgba(255,255,255,.1)));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: background .4s ease, border-color .4s ease, box-shadow .4s ease;
}
#listening-exam .lx-timer .lx-timer-ic{ font-size: 15px; line-height: 1; opacity: .85; }
#listening-exam .lx-timer .timer-display{
  font-weight: 800; font-size: 16px; letter-spacing: 1px; min-width: 60px; text-align: center;
  color: color-mix(in srgb, var(--lxt) 78%, var(--lx-ink, #e6fff5));
}
#listening-exam .lx-timer.is-stopwatch{ --lxt: #6366f1; }
#listening-exam .lx-timer.is-warn{ --lxt: #f59e0b; }
#listening-exam .lx-timer.is-final{
  --lxt: #ef4444; animation: lxTimerPulse 1s ease-in-out infinite;
}
@keyframes lxTimerPulse{
  0%,100%{ box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 0 rgba(239,68,68,.5); }
  50%    { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 7px rgba(239,68,68,0); }
}
@media (max-width: 640px){
  #listening-exam .lx-timer{ padding: 5px 11px 5px 9px; gap: 6px; }
  #listening-exam .lx-timer .timer-display{ font-size: 14px; min-width: 52px; }
}

/* Brand wordmark */
#listening-exam .exam-brand{
  font-weight: 800; letter-spacing: .06em; font-size: 15px;
  background: linear-gradient(95deg, var(--lx-accent) 0%, #6ee7b7 55%, #5eead4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  white-space: nowrap;
}
/* Section tag */
#listening-exam .exam-tag{
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px; white-space: nowrap;
  color: var(--lx-accent); background: var(--lx-accent-weak);
  border: 1px solid color-mix(in srgb, var(--lx-accent) 32%, transparent);
}

/* Timer as a unified centered pill: clock glyph + digits + play/reset controls */
#listening-exam .exam-appbar-center{
  display: flex; align-items: center; gap: 8px; margin: 0 auto;
  font-variant-numeric: tabular-nums;
  padding: 5px 8px 5px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--lx-accent) 10%, var(--lx-panel));
  border: 1px solid color-mix(in srgb, var(--lx-accent) 26%, var(--lx-line));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
#listening-exam .exam-appbar-center > span:first-child{ font-size: 14px; line-height: 1; opacity: .8; }
#listening-exam .timer-display{
  font-size: 18px; font-weight: 800; letter-spacing: .06em;
  color: var(--exam-fg,#e9eef3); min-width: 70px; text-align: center;
}
[data-theme="light"] #listening-exam .timer-display{ color: #0d1b26; }
/* Low-time warning — exUpdateTimer() adds .warning at ≤5:00 */
#listening-exam .timer-display.warning{ color: #ff6b6b; animation: lxTimerPulse 1s ease-in-out infinite; }
@keyframes lxTimerPulse{ 0%,100%{ opacity: 1; } 50%{ opacity: .4; } }

/* Buttons: chrome icon buttons + the in-pill timer controls */
#listening-exam .exam-icon-btn,
#listening-exam .ex-rsize-btn{
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; min-width: 34px; padding: 0 9px;
  border: 1px solid var(--lx-line); border-radius: 10px;
  background: color-mix(in srgb, var(--lx-panel) 55%, transparent); color: inherit; cursor: pointer;
  font-size: 13px; font-weight: 700; line-height: 1;
  transition: background .16s, border-color .16s, color .16s, transform .12s, box-shadow .16s;
}
#listening-exam .timer-ctrl-btn{
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; width: 30px; min-width: 30px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer;
  transition: background .16s, color .16s, transform .12s;
}
#listening-exam .exam-icon-btn:hover,
#listening-exam .ex-rsize-btn:hover{
  background: var(--lx-accent-weak); border-color: var(--lx-accent); color: var(--lx-accent);
  transform: translateY(-1px); box-shadow: 0 6px 16px -10px var(--lx-accent);
}
#listening-exam .timer-ctrl-btn:hover{
  background: color-mix(in srgb, var(--lx-accent) 20%, transparent); color: var(--lx-accent);
}
#listening-exam .exam-icon-btn:active,
#listening-exam .ex-rsize-btn:active,
#listening-exam .timer-ctrl-btn:active{ transform: translateY(0) scale(.94); }
/* Exit (top-left) reads as "leave" — warm-red affordance on hover */
#listening-exam #lx-exit-btn:hover{ background: rgba(255,107,107,.14); border-color: #ff6b6b; color: #ff6b6b; }
#listening-exam .exam-icon-btn svg{ width: 18px; height: 18px; fill: currentColor; }
#listening-exam .timer-ctrl-btn svg{ width: 13px; height: 13px; fill: currentColor; }
#listening-exam .ex-admin-pill{
  font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: rgba(251,191,36,.16); color: #fbbf24; white-space: nowrap;
}

/* ============================== BODY LAYOUT =============================== */
#listening-exam .lx-body{
  flex: 1 1 auto; min-height: 0; display: grid;
  grid-template-columns: minmax(0, 1fr) 300px; overflow: hidden;
}
@media (max-width: 880px){
  #listening-exam .lx-body{ grid-template-columns: 1fr; }
  #listening-exam .lx-rail{ display: none; }
}
#listening-exam .lx-main{ min-width: 0; display: flex; flex-direction: column; overflow: hidden; }

/* ============================== AUDIO DOCK + PLAYER ====================== */
#listening-exam .lx-audio-dock{
  flex: 0 0 auto; padding: 14px 24px;
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--exam-bg, #0b1620) 94%, #fff) 0%,
      color-mix(in srgb, var(--exam-bg, #0b1620) 88%, #000) 100%);
  border-bottom: 1px solid var(--lx-line);
  box-shadow: 0 8px 22px -16px rgba(0,0,0,.8);
}
#listening-exam .lx-part-tabs{ display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
#listening-exam .lx-part-tab{
  appearance: none; border: 1px solid var(--lx-line); background: transparent; color: inherit;
  padding: 7px 16px; border-radius: 999px;
  font: 600 13px/1 'Hanken Grotesk', system-ui, sans-serif; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
#listening-exam .lx-part-tab:hover{ border-color: var(--lx-accent); color: var(--lx-accent); transform: translateY(-1px); }
#listening-exam .lx-part-tab.active{ background: var(--lx-accent); border-color: var(--lx-accent); color: #fff; box-shadow: 0 4px 14px -4px var(--lx-accent); }
#listening-exam .lx-tab-dot{ width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .4; }
#listening-exam .lx-part-tab.active .lx-tab-dot{ opacity: 1; background: #fff; }
#listening-exam .lx-part-rubric{ font-size: 13px; opacity: .78; margin: 2px 0 12px; }
#listening-exam .lx-part-rubric strong{ opacity: 1; font-weight: 700; }

#listening-exam .lx-audio{
  display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 16px;
  background: linear-gradient(135deg, var(--lx-accent-weak), color-mix(in srgb, var(--lx-accent) 4%, transparent));
  border: 1px solid color-mix(in srgb, var(--lx-accent) 28%, transparent);
  box-shadow: 0 10px 30px -16px color-mix(in srgb, var(--lx-accent) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.05);
}
#listening-exam .lx-play{
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--lx-accent), #0c8466);
  box-shadow: 0 6px 18px -6px var(--lx-accent); transition: transform .12s, box-shadow .12s;
}
#listening-exam .lx-play:hover{ transform: scale(1.06); }
#listening-exam .lx-play:active{ transform: scale(.96); }
#listening-exam .lx-play svg{ width: 24px; height: 24px; fill: currentColor; }
#listening-exam .lx-play .lx-ic-pause{ display: none; }
#listening-exam .lx-audio.is-playing .lx-play .lx-ic-play{ display: none; }
#listening-exam .lx-audio.is-playing .lx-play .lx-ic-pause{ display: block; }

#listening-exam .lx-audio-mid{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
#listening-exam .lx-seek{
  position: relative; height: 8px; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--exam-fg, #e9eef3) 14%, transparent);
  touch-action: none;   /* let a touch-drag seek the bar instead of scrolling the page */
}
#listening-exam .lx-seek-buffered{ position: absolute; inset: 0 auto 0 0; height: 100%; width: 0; border-radius: 999px; background: color-mix(in srgb, var(--exam-fg, #e9eef3) 12%, transparent); }
#listening-exam .lx-seek-progress{ position: absolute; inset: 0 auto 0 0; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--lx-accent), #6ee7b7); box-shadow: 0 0 10px color-mix(in srgb, var(--lx-accent) 55%, transparent); }
#listening-exam .lx-seek-thumb{ position: absolute; top: 50%; left: 0; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--lx-accent); transform: translate(-50%, -50%); box-shadow: 0 2px 8px rgba(0,0,0,.35); pointer-events: none; transition: transform .1s; }
#listening-exam .lx-seek:hover .lx-seek-thumb{ transform: translate(-50%, -50%) scale(1.15); }
#listening-exam .lx-audio-row{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#listening-exam .lx-time{ font-size: 12px; font-weight: 600; opacity: .8; font-variant-numeric: tabular-nums; white-space: nowrap; }
#listening-exam .lx-time-sep{ opacity: .5; margin: 0 4px; }
#listening-exam .lx-audio-tools{ display: flex; align-items: center; gap: 10px; }
#listening-exam .lx-speed{
  border: 1px solid var(--lx-line); border-radius: 8px; background: transparent; color: inherit;
  font-size: 12px; font-weight: 700; padding: 5px 8px; cursor: pointer;
}
#listening-exam .lx-vol{ width: 84px; accent-color: var(--lx-accent); cursor: pointer; }
#listening-exam .lx-audio--empty{
  justify-content: center; gap: 10px; opacity: .65; font-size: 14px;
  background: transparent; border-style: dashed; box-shadow: none;
}
#listening-exam .lx-audio--empty svg{ width: 22px; height: 22px; opacity: .8; }

/* ---- MOCK (exam) mode: the transport is locked — plays once, no pause/seek/speed ---- */
#listening-exam .lx-audio--mock{ position: relative; }
#listening-exam .lx-audio--mock .lx-play{ cursor: default; opacity: .85; }
#listening-exam .lx-audio--mock .lx-play:hover,
#listening-exam .lx-audio--mock .lx-play:active{ transform: none; }
#listening-exam .lx-audio--mock .lx-seek{ pointer-events: none; cursor: default; }
#listening-exam .lx-audio--mock .lx-seek-thumb{ display: none; }
#listening-exam .lx-mocktag{
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800;
  letter-spacing: .3px; text-transform: uppercase; padding: 5px 9px; border-radius: 8px;
  color: var(--lx-accent); background: color-mix(in srgb, var(--lx-accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--lx-accent) 30%, transparent); white-space: nowrap;
}
/* one-tap gate shown only if the browser blocks autoplay */
#listening-exam .lx-startgate{
  position: absolute; inset: 0; z-index: 4; border: 0; cursor: pointer; border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 15px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--lx-accent) 92%, #000), #0c8466);
  box-shadow: 0 10px 30px -10px var(--lx-accent);
}
#listening-exam .lx-startgate small{ font-size: 11.5px; font-weight: 500; opacity: .85; }
#listening-exam .lx-startgate .lx-startgate-ic{ font-size: 20px; }

/* ============================== QUESTION COLUMN ========================== */
#listening-exam .lx-scroll{
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 22px 26px 140px; font-size: var(--exam-font, 17px); line-height: 1.6;
}
#listening-exam .lx-empty-part{ padding: 28px; opacity: .6; font-style: italic; }

/* ---- re-scoped reading question chrome (15-exam.css scopes it to #reading-exam) ---- */
#listening-exam .ex-q-card{ margin: 0 0 26px; padding: 0 0 22px; border-bottom: 1px solid var(--lx-line); }
#listening-exam .ex-q-card:last-child{ border-bottom: none; }
#listening-exam .ex-q-prompt{ margin: 0 0 14px; }
#listening-exam .ex-q-prompt h1,
#listening-exam .ex-q-prompt h2,
#listening-exam .ex-q-prompt h3{ font-size: 16px; margin: 0 0 8px; }
#listening-exam .ex-q-prompt p{ margin: 0 0 8px; }
#listening-exam .ex-q-instr{ font-size: 13px; opacity: .75; margin: 0 0 12px; }

/* gap inputs (note / form / sentence / table completion) */
#listening-exam .ex-gap-input,
#listening-exam .ex-gapped input,
#listening-exam .lx-scroll input[type="text"]{
  display: inline-block; min-width: 130px; max-width: 240px; padding: 6px 10px; margin: 2px 4px;
  border: 1.5px solid var(--lx-line); border-radius: 8px;
  background: var(--lx-panel); color: inherit; font: inherit; font-size: 15px;
  transition: border-color .12s, box-shadow .12s;
}
#listening-exam .ex-gap-input:focus,
#listening-exam .ex-gapped input:focus,
#listening-exam .lx-scroll input[type="text"]:focus{ outline: none; border-color: var(--lx-accent); box-shadow: 0 0 0 3px var(--lx-accent-weak); }
#listening-exam .ex-gap-select,
#listening-exam .lx-scroll select{ padding: 6px 10px; border: 1.5px solid var(--lx-line); border-radius: 8px; background: var(--lx-panel); color: inherit; font: inherit; cursor: pointer; }
#listening-exam .ex-bank{ display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
#listening-exam .ex-bank-title{ width: 100%; font-weight: 600; font-size: 13px; opacity: .8; }
#listening-exam .ex-bank-chip{ padding: 5px 12px; border-radius: 8px; font-size: 14px; border: 1px solid var(--lx-line); background: var(--lx-panel); }

/* multiple choice (one + many) */
#listening-exam .ex-mc-subq{ margin-bottom: 20px; }
#listening-exam .ex-mc-subnum{ margin-bottom: 10px; font-weight: 600; line-height: 1.45; }
#listening-exam .ex-mc-list{ display: flex; flex-direction: column; gap: 10px; }
#listening-exam .ex-mc-option{
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  border: 1.5px solid var(--lx-line); border-radius: 12px; cursor: pointer;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
#listening-exam .ex-mc-option:hover{ border-color: var(--lx-accent); background: var(--lx-accent-weak); }
#listening-exam .ex-mc-option.is-checked{ border-color: var(--lx-accent); background: var(--lx-accent-weak); box-shadow: 0 0 0 1px var(--lx-accent); }
#listening-exam .ex-mc-box{ position: relative; width: 26px; height: 26px; flex: 0 0 26px; }
#listening-exam .ex-mc-box input{ position: absolute; inset: 0; opacity: 0; cursor: pointer; }
#listening-exam .ex-mc-letter{
  display: flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border: 1.5px solid var(--lx-line); border-radius: 50%; font-weight: 700; font-size: 13px;
}
#listening-exam .ex-mc-option.is-checked .ex-mc-letter{ background: var(--lx-accent); border-color: var(--lx-accent); color: #fff; }
#listening-exam .ex-mc-text{ flex: 1; font-size: 15px; line-height: 1.45; }

/* form_completion — labelled 2-column form (also used by reading fe_type=form_completion) */
.ex-form-card{ margin-top: 6px; border: 1px solid var(--exam-line, rgba(255,255,255,.12)); border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.03); }
[data-theme="light"] .ex-form-card{ background:#fff; border-color: rgba(16,34,46,.12); }
.ex-form-row{ display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: 14px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--exam-line, rgba(255,255,255,.07)); }
.ex-form-row:last-child{ border-bottom: none; }
.ex-form-row--head{ grid-template-columns: 1fr; background: var(--lx-accent-weak, rgba(17,163,127,.1)); font-weight: 700; }
.ex-form-label{ font-size: .95em; opacity: .92; }
.ex-form-row--head .ex-form-label{ opacity: 1; }
.ex-form-field{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ex-form-gap{ display: inline-flex; align-items: center; gap: 6px; }
.ex-form-suffix{ opacity: .8; font-size: .92em; }
.ex-note-gap-num{ display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px; background: #11A37F; color: #fff; font: 700 12px/1 'Hanken Grotesk', sans-serif; }

/* ============================== PALETTE RAIL ============================= */
#listening-exam .lx-rail{
  min-width: 0; overflow-y: auto; padding: 20px 18px 28px;
  border-left: 1px solid var(--lx-line);
  background: color-mix(in srgb, var(--exam-bg, #0b1620) 92%, #000);
  display: flex; flex-direction: column; gap: 18px;
}
[data-theme="light"] #listening-exam .lx-rail{ background: #e4eaf0; }
#listening-exam .lx-rail-title{ font: 700 12px/1 'Hanken Grotesk', sans-serif; letter-spacing: .08em; text-transform: uppercase; opacity: .6; margin: 0 0 10px; }
#listening-exam .lx-rail-grid{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
#listening-exam .lx-rail-pal{
  appearance: none; border: 1px solid var(--lx-line); background: transparent; color: inherit;
  font: 600 13px/1 'Hanken Grotesk', sans-serif; height: 38px; border-radius: 9px; cursor: pointer;
  transition: background .14s, color .14s, border-color .14s, transform .1s, box-shadow .12s;
}
#listening-exam .lx-rail-pal:hover{ border-color: var(--lx-accent); color: var(--lx-accent); transform: translateY(-1px); }
#listening-exam .lx-rail-pal.answered{ background: var(--lx-accent-weak); border-color: var(--lx-accent); color: var(--lx-accent); }
#listening-exam .lx-rail-pal.current{ outline: 2px solid var(--lx-accent); outline-offset: 1px; }
#listening-exam .lx-rail-pal.correct{ background: #16a34a; color: #fff; border-color: transparent; }
#listening-exam .lx-rail-pal.incorrect{ background: #ef4444; color: #fff; border-color: transparent; }
#listening-exam .lx-rail-pal.unanswered{ opacity: .55; }
#listening-exam .lx-rail-submit{
  margin-top: auto; appearance: none; border: none; cursor: pointer; width: 100%; padding: 14px;
  border-radius: 12px; font: 700 15px/1 'Hanken Grotesk', sans-serif; color: #fff;
  background: linear-gradient(135deg, var(--lx-accent), #0c8466);
  box-shadow: 0 10px 24px -10px var(--lx-accent); transition: transform .12s, filter .12s;
}
#listening-exam .lx-rail-submit:hover{ transform: translateY(-1px); filter: brightness(1.06); }
#listening-exam .lx-rail-submit:active{ transform: translateY(0); }

/* ============================== FOOTER (mobile palette mirror) =========== */
#listening-exam .exam-footer{ flex: 0 0 auto; display: none; align-items: center; gap: 10px; padding: 10px 18px; border-top: 1px solid var(--lx-line); background: color-mix(in srgb, var(--exam-bg, #0b1620) 86%, #000); }
@media (max-width: 880px){ #listening-exam .exam-footer{ display: flex; flex-wrap: wrap; } }
#listening-exam .footer-parts,
#listening-exam .subq-wrapper{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#listening-exam .footer-part-name{ font-weight: 700; font-size: 13px; opacity: .7; margin-right: 6px; }
#listening-exam .submit-exam-btn{
  margin-left: auto; appearance: none; border: none; cursor: pointer; padding: 10px 18px;
  border-radius: 10px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--lx-accent), #0c8466);
}

/* ============================== RESULTS MODAL =========================== */
#listening-exam .modal-overlay,
#lx-results-modal{
  position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
}
#lx-results-modal.hidden{ display: none; }
#lx-results-modal .results-modal{
  position: relative; width: min(680px, 100%); max-height: 88vh; overflow-y: auto;
  border-radius: 18px; padding: 26px; background: var(--exam-bg, #0b1620); color: var(--exam-fg, #e9eef3);
  border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 80px -20px rgba(0,0,0,.8);
}
[data-theme="light"] #lx-results-modal .results-modal{ background: #fff; color: #16222e; }
#lx-results-modal .results-modal-close{
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid rgba(125,125,125,.3); background: transparent; color: inherit; cursor: pointer; font-size: 18px; line-height: 1;
}
#lx-results-modal .results-modal-title{ font-size: 24px; font-weight: 800; margin: 0 0 18px; text-align: center; }
#lx-results-modal .results-summary{ margin-bottom: 16px; }
#lx-results-modal .results-details{ display: flex; flex-direction: column; gap: 4px; }
#lx-results-modal .results-modal-actions{ display: flex; gap: 10px; margin-top: 20px; }
#lx-results-modal .results-modal-actions button{
  flex: 1; padding: 12px; border-radius: 10px; cursor: pointer; font-weight: 700;
  border: 1px solid rgba(125,125,125,.3); background: transparent; color: inherit;
  transition: background .12s, border-color .12s, color .12s;
}
#lx-results-modal .results-modal-actions button:hover{ border-color: var(--lx-accent); color: var(--lx-accent); }
#lx-results-modal .ex-retake-btn{ background: linear-gradient(135deg, var(--lx-accent), #0c8466); color: #fff; border-color: transparent; }

/* results summary cells (built by lxShowResults) */
#lx-results-modal .ex-res-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
#lx-results-modal .ex-res-cell{ padding: 14px; border-radius: 12px; text-align: center; background: var(--lx-panel); border: 1px solid rgba(255,255,255,.08); }
[data-theme="light"] #lx-results-modal .ex-res-cell{ background: #f1f5f9; border-color: rgba(16,34,46,.08); }
#lx-results-modal .ex-res-cell-l{ font-size: 12px; opacity: .65; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
#lx-results-modal .ex-res-cell-v{ font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
#lx-results-modal .ex-res-band{ color: var(--lx-accent); font-size: 30px; }
#lx-results-modal .ex-res-note{ font-size: 12.5px; opacity: .7; margin: 0 0 14px; padding: 8px 12px; border-radius: 8px; background: var(--lx-panel); }

/* per-question result rows */
#lx-results-modal .results-row{ display: grid; grid-template-columns: 36px 28px 1fr 1fr; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 8px; font-size: 14px; }
#lx-results-modal .results-row.is-right{ background: rgba(22,163,74,.12); }
#lx-results-modal .results-row.is-wrong{ background: rgba(239,68,68,.12); }
#lx-results-modal .results-row.is-wrong > div:nth-child(3){ color: #ef4444; }

/* ============================== EXIT CONFIRM OVERLAY ==================== */
#lx-exit-overlay.exit-overlay{ position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); }
#lx-exit-overlay.exit-overlay.hidden{ display: none; }
#lx-exit-overlay .exit-modal{ width: min(420px, 100%); padding: 24px; border-radius: 16px; text-align: center; background: var(--exam-bg, #0b1620); color: var(--exam-fg, #e9eef3); border: 1px solid rgba(255,255,255,.12); }
[data-theme="light"] #lx-exit-overlay .exit-modal{ background: #fff; color: #16222e; }
#lx-exit-overlay .exit-modal h3{ margin: 0 0 8px; font-size: 19px; }
#lx-exit-overlay .exit-modal p{ margin: 0 0 4px; opacity: .8; font-size: 14px; }
#lx-exit-overlay .exit-actions{ display: flex; gap: 10px; margin-top: 18px; }
#lx-exit-overlay .exit-actions button{ flex: 1; padding: 11px; border-radius: 10px; cursor: pointer; font-weight: 700; border: 1px solid rgba(125,125,125,.3); background: transparent; color: inherit; transition: background .12s, border-color .12s, color .12s; }
#lx-exit-overlay .exit-btn-cancel:hover{ border-color: var(--lx-accent); color: var(--lx-accent); }
#lx-exit-overlay .exit-btn-confirm{ background: #ef4444; color: #fff; border-color: transparent; }

/* ============================== PREMIUM LOCK (non-premium opens premium test) === */
#listening-exam .ex-premium-locked{
  margin: auto; max-width: 460px; padding: 40px 28px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
#listening-exam .ex-premium-locked-ico{ font-size: 44px; }
#listening-exam .ex-premium-locked-title{ font-size: 24px; font-weight: 800; margin: 0; }
#listening-exam .ex-premium-locked-text{ opacity: .8; font-size: 15px; line-height: 1.5; margin: 0; }
#listening-exam .ex-premium-locked-cta{
  margin-top: 6px; padding: 12px 26px; border: none; border-radius: 12px; cursor: pointer;
  font: 800 15px/1 'Hanken Grotesk', sans-serif; color: #fff;
  background: linear-gradient(135deg, var(--lx-accent), #0c8466);
  box-shadow: 0 10px 26px -10px var(--lx-accent); transition: filter .15s, transform .1s;
}
#listening-exam .ex-premium-locked-cta:hover{ filter: brightness(1.07); }
#listening-exam .ex-premium-locked-cta:active{ transform: translateY(1px); }
#listening-exam .ex-premium-locked-sub{ font-size: 12.5px; opacity: .6; margin-top: 4px; }

/* ============================ RAW HTML BROADCAST ======================== */
/* A raw-imported listening test is one self-contained .html file. The body
   becomes a single full-bleed iframe (no audio dock / question column /
   palette) — the file owns its own audio, parts, questions and scoring. */
#listening-exam .lx-body--raw{
  display: block; grid-template-columns: none;
  flex: 1 1 auto; min-height: 0; overflow: hidden;
}
#listening-exam .lx-raw-host{
  width: 100%; height: 100%; min-height: 0; overflow: hidden;
  background: var(--lx-bg, #0b1117);
}
#listening-exam .lx-raw-iframe{
  display: block; width: 100%; height: 100%; border: 0; background: #fff;
}
[data-theme="dark"] #listening-exam .lx-raw-iframe{ background: #0b1117; }
/* Broadcast files carry their OWN A−/A+ font controls, so drop the platform's
   duplicate set from the top bar (Exit, timer + fullscreen stay). */
#listening-exam.lx-broadcast .ex-rsize-btn{ display: none !important; }

/* ============================ DAY (LIGHT) MODE CHROME ====================== */
/* Driven by the broadcast file's OWN day/night toggle: the bridge reports the
   file theme → 17-listening-exam.js adds #listening-exam.lx-light. We give the
   appbar a bright, glassy, uniquely-accented look in day mode; night mode keeps
   the existing dark bar untouched. */
#listening-exam.lx-light{
  --exam-bg: #eef3f7; --exam-fg: #13212c;
  --lx-line: rgba(16,34,46,.12); --lx-panel: #ffffff;
}
/* Day-mode header: a crisp frosted-white glass with a teal→cyan signature —
   premium chrome, not a washed-out mint strip. Applies on the gate (site
   [data-theme=light]) AND in-exam (file-reported .lx-light) so they never
   disagree. */
[data-theme="light"] #listening-exam .exam-appbar,
#listening-exam.lx-light .exam-appbar{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(240,250,248,.82));
  border-bottom: 1px solid rgba(13,148,136,.16);
  box-shadow: 0 8px 26px -20px rgba(11,60,55,.55);
  color: #0c2530;
  -webkit-backdrop-filter: blur(18px) saturate(1.35); backdrop-filter: blur(18px) saturate(1.35);
}
/* A glowing teal→cyan light-beam along the very top edge — the signature. */
[data-theme="light"] #listening-exam .exam-appbar::before,
#listening-exam.lx-light .exam-appbar::before{
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2.5px; pointer-events: none;
  background: linear-gradient(90deg, transparent, #10b981 22%, #22d3ee 50%, #10b981 78%, transparent);
  box-shadow: 0 0 13px rgba(16,185,129,.55);
}
[data-theme="light"] #listening-exam .exam-brand,
#listening-exam.lx-light .exam-brand{
  background: linear-gradient(95deg, #0d9488 0%, #10b981 52%, #0891b2 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme="light"] #listening-exam .exam-tag,
#listening-exam.lx-light .exam-tag{
  color: #ffffff; border-color: transparent;
  background: linear-gradient(135deg, #10b981 0%, #0891b2 100%);
  box-shadow: 0 5px 14px -6px rgba(13,148,136,.6), inset 0 1px 0 rgba(255,255,255,.3);
}
[data-theme="light"] #listening-exam .exam-icon-btn,
#listening-exam.lx-light .exam-icon-btn{
  background: rgba(255,255,255,.92); border-color: rgba(13,148,136,.2); color: #14323f;
  box-shadow: 0 1px 2px rgba(16,34,46,.06);
}
[data-theme="light"] #listening-exam .exam-icon-btn:hover,
#listening-exam.lx-light .exam-icon-btn:hover{
  background: #ffffff; border-color: #10b981; color: #0d9488;
  box-shadow: 0 8px 18px -10px rgba(13,148,136,.8); transform: translateY(-1px);
}
[data-theme="light"] #listening-exam #lx-exit-btn:hover,
#listening-exam.lx-light #lx-exit-btn:hover{
  background: rgba(229,72,77,.12); border-color: #e5484d; color: #e5484d;
}
/* admin ribbon stays legible on the light bar */
[data-theme="light"] #listening-exam .ex-admin-pill,
#listening-exam.lx-light .ex-admin-pill{ background: rgba(217,119,6,.16); color: #b45309; }
/* Day mode: light surface behind the iframe so there's no dark flash on load. */
#listening-exam.lx-light{ background: #eef3f7; }
#listening-exam.lx-light .lx-raw-host,
#listening-exam.lx-light .lx-raw-iframe{ background: #ffffff; }

/* ------------------------- appbar responsiveness -------------------------- */
/* On phones the brand + long "Academic Listening" tag crowded the bar and
   pushed the fullscreen control off-screen. Tighten spacing, shrink the brand,
   and drop the tag so Exit + brand + controls always fit. */
@media (max-width: 600px){
  #listening-exam .exam-appbar{ padding: 9px 12px; gap: 9px; }
  #listening-exam .exam-appbar-left{ gap: 9px; min-width: 0; }
  #listening-exam .exam-brand{ font-size: 13px; letter-spacing: .04em; }
  #listening-exam .exam-tag{ display: none; }
}
@media (max-width: 380px){
  #listening-exam .exam-appbar{ padding: 8px 10px; }
  #listening-exam .exam-brand{ font-size: 12px; }
}

/* ==========================================================================
   START GATE + AUDIO PRE-DOWNLOAD + TELEGRAM CHANNEL
   --------------------------------------------------------------------------
   The broadcast test opens on a native "Start Test" gate (channel promo +
   button). Pressing Start mounts the sandboxed iframe and shows a "Preparing
   audio X%" overlay while the recording downloads into a Blob for smooth
   offline playback. A persistent channel link also sits in the appbar.
   Everything is scoped to #listening-exam; light + dark both covered.
   Telegram brand blue = #2AABEE→#229ED9 · Bandly accent = var(--lx-accent).
   ========================================================================== */

/* The host must be a positioning context so the overlay can cover the iframe. */
#listening-exam .lx-raw-host{ position: relative; }

/* -------------------------- appbar channel link --------------------------- */
#listening-exam .lx-appbar-tg{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px 6px 9px; border-radius: 999px;
  font-size: 13.5px; font-weight: 700; letter-spacing: .01em;
  text-decoration: none; white-space: nowrap;
  color: #eaf6ff;
  background: linear-gradient(135deg, rgba(42,171,238,.22), rgba(34,158,217,.14));
  border: 1px solid rgba(42,171,238,.42);
  box-shadow: 0 2px 10px -4px rgba(34,158,217,.5), inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform .18s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
}
#listening-exam .lx-appbar-tg svg{ width: 15px; height: 15px; fill: #2AABEE; flex: 0 0 auto; filter: drop-shadow(0 1px 3px rgba(34,158,217,.5)); }
#listening-exam .lx-appbar-tg:hover{
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(42,171,238,.34), rgba(34,158,217,.22));
  border-color: rgba(42,171,238,.7);
  box-shadow: 0 8px 20px -8px rgba(34,158,217,.75), inset 0 1px 0 rgba(255,255,255,.18);
}
#listening-exam .lx-appbar-tg:hover svg{ animation: lxTgFly .7s ease; }
[data-theme="light"] #listening-exam .lx-appbar-tg,
#listening-exam.lx-light .lx-appbar-tg{
  color: #0b5c86;
  background: linear-gradient(135deg, rgba(42,171,238,.16), rgba(34,158,217,.10));
  border-color: rgba(34,158,217,.42);
}
@media (max-width: 640px){
  #listening-exam .lx-appbar-tg span{ display: none; }
  #listening-exam .lx-appbar-tg{ padding: 7px; }
}

/* --------------------------- channel promo card --------------------------- */
#listening-exam .lx-tg-card{
  display: inline-flex; align-items: center; gap: 13px;
  padding: 11px 13px; border-radius: 16px; text-decoration: none;
  background: linear-gradient(135deg, rgba(42,171,238,.14), rgba(34,158,217,.06));
  border: 1px solid rgba(42,171,238,.34);
  box-shadow: 0 10px 30px -18px rgba(34,158,217,.8), inset 0 1px 0 rgba(255,255,255,.1);
  transition: transform .2s ease, box-shadow .24s ease, border-color .24s ease;
  max-width: 100%;
}
#listening-exam .lx-tg-card:hover{
  transform: translateY(-2px);
  border-color: rgba(42,171,238,.62);
  box-shadow: 0 18px 40px -20px rgba(34,158,217,.9), inset 0 1px 0 rgba(255,255,255,.16);
}
#listening-exam .lx-tg-ava{
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(120% 120% at 30% 20%, #37bbf3, #2AABEE 45%, #229ED9 100%);
  box-shadow: 0 6px 16px -6px rgba(34,158,217,.9), inset 0 2px 4px rgba(255,255,255,.35), inset 0 -3px 6px rgba(0,60,100,.35);
}
#listening-exam .lx-tg-ava svg{ width: 24px; height: 24px; fill: #fff; transform: translateX(-1px); filter: drop-shadow(0 1px 2px rgba(0,50,90,.4)); }
#listening-exam .lx-tg-meta{ display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#listening-exam .lx-tg-name{ font-size: 15px; font-weight: 800; color: var(--exam-fg, #eaf1f7); letter-spacing: -.01em; }
#listening-exam .lx-tg-handle{ font-size: 12.5px; font-weight: 600; color: #2AABEE; }
#listening-exam .lx-tg-join{
  flex: 0 0 auto; margin-left: 6px; display: inline-flex; align-items: center; gap: 2px;
  padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #2AABEE, #229ED9);
  box-shadow: 0 6px 16px -7px rgba(34,158,217,.9), inset 0 1px 0 rgba(255,255,255,.3);
}
#listening-exam .lx-tg-join svg{ width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
#listening-exam .lx-tg-card:hover .lx-tg-join svg{ transform: translateX(3px); }
[data-theme="light"] #listening-exam .lx-tg-name,
#listening-exam.lx-light .lx-tg-name{ color: #12303f; }

/* ==========================================================================
   IMMERSIVE START GATE + PREPARING OVERLAY  —  "SONAR"
   --------------------------------------------------------------------------
   The pre-test gate (lxRenderStartGate) and the audio pre-download overlay
   (lxPreparingOverlayHTML) share one audio-native stage: drifting aurora
   blooms, a live equalizer, a faint scan grid and a radiating "sonar" hero.
   Both render BEFORE the iframe mounts, so they key off BOTH the site theme
   ([data-theme]) and the file-reported theme (.lx-light) to stay in sync.
   All markup emitted by 17-listening-exam.js (lxStageBgHTML / lxSonarHTML).
   ========================================================================== */

/* -- scoped palette: dark (default) / light -- */
#listening-exam .lx-stage,
#listening-exam .lx-preparing{
  --sg-bg1:#05121b; --sg-bg2:#0a1f2c; --sg-bg3:#07141d;
  --sg-ink:#eaf7f2; --sg-sub:rgba(226,244,238,.60);
  --sg-teal:#10b981; --sg-cyan:#22d3ee; --sg-lime:#b6f24e;
  --sg-glass:rgba(255,255,255,.055); --sg-line:rgba(255,255,255,.12);
}
[data-theme="light"] #listening-exam .lx-stage,
[data-theme="light"] #listening-exam .lx-preparing,
#listening-exam.lx-light .lx-stage,
#listening-exam.lx-light .lx-preparing{
  --sg-bg1:#e4f0ed; --sg-bg2:#f5fbf9; --sg-bg3:#e9f4f1;
  --sg-ink:#0c2530; --sg-sub:rgba(12,37,48,.58);
  --sg-teal:#0d9488; --sg-cyan:#0891b2; --sg-lime:#4d7c0f;
  --sg-glass:rgba(255,255,255,.62); --sg-line:rgba(12,37,48,.12);
}

/* -- stage container (grid + margin:auto centres AND scrolls without top-clip) -- */
#listening-exam .lx-stage,
#listening-exam .lx-preparing{
  position: absolute; inset: 0; z-index: 5; overflow: auto;
  display: grid; padding: 28px; color: var(--sg-ink);
  background:
    radial-gradient(130% 100% at 50% -18%, color-mix(in srgb, var(--sg-teal) 22%, transparent), transparent 55%),
    linear-gradient(158deg, var(--sg-bg1), var(--sg-bg2) 56%, var(--sg-bg3));
}
#listening-exam .lx-preparing{ z-index: 6; opacity: 1; transition: opacity .6s ease; }
#listening-exam .lx-preparing.is-hiding{ opacity: 0; pointer-events: none; }

/* -- ambient backdrop -- */
#listening-exam .lx-stage-bg{ position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
#listening-exam .lx-aurora{
  position: absolute; border-radius: 50%; filter: blur(64px); opacity: .55;
  mix-blend-mode: screen; will-change: transform;
}
[data-theme="light"] #listening-exam .lx-aurora,
#listening-exam.lx-light .lx-aurora{ mix-blend-mode: multiply; opacity: .34; }
#listening-exam .lx-aurora--1{ width: 46vw; height: 46vw; left: -9vw; top: -13vw;
  background: radial-gradient(circle, var(--sg-teal), transparent 68%); animation: lxAur1 20s ease-in-out infinite; }
#listening-exam .lx-aurora--2{ width: 42vw; height: 42vw; right: -10vw; top: -7vw;
  background: radial-gradient(circle, var(--sg-cyan), transparent 68%); animation: lxAur2 24s ease-in-out infinite; }
#listening-exam .lx-aurora--3{ width: 40vw; height: 40vw; left: 34%; bottom: -18vw; opacity: .3;
  background: radial-gradient(circle, var(--sg-lime), transparent 70%); animation: lxAur3 28s ease-in-out infinite; }

#listening-exam .lx-stage-grid{
  position: absolute; inset: 0; opacity: .5;
  background-image: radial-gradient(color-mix(in srgb, var(--sg-ink) 26%, transparent) .6px, transparent .6px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(120% 92% at 50% 38%, #000, transparent 72%);
          mask-image: radial-gradient(120% 92% at 50% 38%, #000, transparent 72%);
}

/* live equalizer along the base — a centred spectrum, edges faded by the mask */
#listening-exam .lx-eq{
  position: absolute; left: 0; right: 0; bottom: 0; height: 26%;
  display: flex; align-items: flex-end; justify-content: center; gap: 5px; opacity: .42;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
#listening-exam .lx-eq i{
  width: 7px; height: 100%; border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, var(--sg-cyan), var(--sg-teal));
  transform: scaleY(.2); transform-origin: bottom; opacity: .72;
  animation: lxEq 1.5s ease-in-out infinite;
  animation-delay: calc(var(--n) * -71ms);
}

/* -- sonar hero -- */
#listening-exam .lx-sonar{ position: relative; width: 128px; height: 128px; display: grid; place-items: center; margin: 2px 0; }
#listening-exam .lx-sonar-wave{
  position: absolute; inset: 20px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--sg-teal) 60%, transparent);
  animation: lxPing 3s ease-out infinite;
}
#listening-exam .lx-sonar-wave:nth-child(2){ animation-delay: 1s; }
#listening-exam .lx-sonar-wave:nth-child(3){ animation-delay: 2s; }
#listening-exam .lx-sonar-core{
  position: relative; z-index: 2; width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.4), transparent 58%),
    linear-gradient(150deg, var(--sg-teal), var(--sg-cyan));
  box-shadow:
    0 14px 34px -8px color-mix(in srgb, var(--sg-teal) 75%, transparent),
    inset 0 1px 0 rgba(255,255,255,.45),
    0 0 0 6px color-mix(in srgb, var(--sg-teal) 12%, transparent);
  animation: lxCoreBob 4s ease-in-out infinite;
}
#listening-exam .lx-sonar-glyph{ width: 38px; height: 38px; stroke: #fff; }
#listening-exam .lx-sonar-glyph rect{ fill: #fff; }
/* progress variant (preparing overlay) — bigger, holds the liquid fill */
#listening-exam .lx-sonar--prog{ width: 172px; height: 172px; }
#listening-exam .lx-sonar--prog .lx-sonar-wave{ display: none; }
#listening-exam .lx-sonar--prog .lx-sonar-core{
  width: 108px; height: 108px; overflow: hidden;
  background: radial-gradient(circle at 32% 24%, rgba(255,255,255,.14), transparent 55%), rgba(6,20,30,.72);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 16px 36px -10px rgba(0,0,0,.55);
  animation: none;   /* the liquid + ring carry the motion here */
}
[data-theme="light"] #listening-exam .lx-sonar--prog .lx-sonar-core,
#listening-exam.lx-light .lx-sonar--prog .lx-sonar-core{
  background: radial-gradient(circle at 32% 24%, rgba(255,255,255,.6), transparent 58%), rgba(206,228,232,.9);
  box-shadow: inset 0 0 0 1px rgba(12,37,48,.10), 0 16px 36px -14px rgba(12,37,48,.35);
}
#listening-exam .lx-sonar-track{ position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
#listening-exam .lx-sonar-track-bg{ fill: none; stroke: var(--sg-line); stroke-width: 5.5; }
#listening-exam .lx-sonar-track-arc{
  fill: none; stroke: var(--sg-teal); stroke-width: 5.5; stroke-linecap: round;
  stroke-dasharray: 364.4; stroke-dashoffset: calc(364.4 * (1 - (var(--pct, 0) / 100)));
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--sg-teal) 70%, transparent));
}

/* the recording "pouring in": a rising liquid whose height tracks --pct, with a
   scrolling wave crest — a fill metaphor no other IELTS site uses. */
#listening-exam .lx-sonar-liquid{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  height: calc(var(--pct, 0) * 1%);
  background: linear-gradient(180deg, #22d3ee, #10b981 85%);
  box-shadow: 0 -3px 16px rgba(34,211,238,.55);
  transition: height .12s linear;
}
#listening-exam .lx-liquid-crest,
#listening-exam .lx-sonar-liquid::after{
  content: ''; position: absolute; left: 0; top: -7px; width: 200%; height: 12px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='12' viewBox='0 0 50 12'%3E%3Cpath d='M0 6 Q12.5 0 25 6 T50 6 V12 H0 Z' fill='%2322d3ee'/%3E%3C/svg%3E") repeat-x;
  background-size: 50px 12px;
  animation: lxWaveMove 1.5s linear infinite;
}
#listening-exam .lx-sonar-liquid::after{
  top: -5px; height: 10px; opacity: .55;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='10' viewBox='0 0 60 10'%3E%3Cpath d='M0 5 Q15 0 30 5 T60 5 V10 H0 Z' fill='%2310b981'/%3E%3C/svg%3E") repeat-x;
  background-size: 60px 10px;
  animation: lxWaveMove2 2.4s linear infinite;
}
#listening-exam .lx-sonar-pct{
  position: relative; z-index: 3; font-size: 28px; font-weight: 800; color: #fff;
  letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 7px rgba(0,0,0,.5);
}
#listening-exam .lx-sonar-pct b{ font-size: 14px; font-weight: 700; opacity: .85; margin-left: 1px; }
/* light mode: dark number reads over BOTH the pale empty core and the teal fill */
[data-theme="light"] #listening-exam .lx-sonar-pct,
#listening-exam.lx-light .lx-sonar-pct{ color: #0b2b25; text-shadow: 0 1px 6px rgba(255,255,255,.7); }
/* 100% flourish */
#listening-exam .lx-sonar.is-complete .lx-sonar-core{ animation: lxCorePop .6s cubic-bezier(.34,1.56,.64,1); }
#listening-exam .lx-sonar.is-complete .lx-sonar-track-arc{ stroke: #34d399; filter: drop-shadow(0 0 10px rgba(52,211,153,.85)); }

/* -- inner column + staggered entrance -- */
#listening-exam .lx-sg-inner,
#listening-exam .lx-prep-inner{
  position: relative; z-index: 2; margin: auto; width: min(560px, 100%); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
#listening-exam .lx-prep-inner{ width: min(440px, 100%); gap: 18px; }
#listening-exam .lx-sg-inner > *{ animation: lxSgRise .62s cubic-bezier(.16,1,.3,1) both; }
#listening-exam .lx-sg-inner > *:nth-child(1){ animation-delay: .02s; }
#listening-exam .lx-sg-inner > *:nth-child(2){ animation-delay: .08s; }
#listening-exam .lx-sg-inner > *:nth-child(3){ animation-delay: .14s; }
#listening-exam .lx-sg-inner > *:nth-child(4){ animation-delay: .20s; }
#listening-exam .lx-sg-inner > *:nth-child(5){ animation-delay: .26s; }
#listening-exam .lx-sg-inner > *:nth-child(6){ animation-delay: .32s; }
#listening-exam .lx-sg-inner > *:nth-child(7){ animation-delay: .38s; }
#listening-exam .lx-prep-inner > *{ animation: lxSgRise .55s cubic-bezier(.16,1,.3,1) both; }

/* -- title / sub / facts -- */
#listening-exam .lx-sg-title{
  margin: 2px 0 0; font-size: clamp(23px, 3.6vw, 34px); font-weight: 800;
  letter-spacing: -.025em; line-height: 1.14; color: var(--sg-ink);
}
#listening-exam .lx-grad{
  background: linear-gradient(100deg, var(--sg-teal), var(--sg-cyan) 52%, var(--sg-lime));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 220% auto; animation: lxGradShift 6s ease infinite;
}
#listening-exam .lx-sg-sub{ margin: 0; max-width: 44ch; font-size: 14.5px; line-height: 1.6; color: var(--sg-sub); }
#listening-exam .lx-sg-facts{ display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; }
#listening-exam .lx-sg-fact{
  display: inline-flex; align-items: baseline; gap: 1px; padding: 7px 14px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--sg-sub);
  background: var(--sg-glass); border: 1px solid var(--sg-line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
#listening-exam .lx-sg-fact b{ font-size: 15px; font-weight: 800; color: var(--sg-ink); }

/* -- start button (the showpiece) -- */
#listening-exam .lx-sg-start{
  margin-top: 4px; position: relative; overflow: hidden; cursor: pointer;
  display: inline-flex; align-items: center; gap: 11px;
  padding: 16px 40px 16px 32px; border: 0; border-radius: 16px;
  font: 800 17px/1 'Hanken Grotesk', system-ui, sans-serif; letter-spacing: .01em; color: #fff;
  background: linear-gradient(135deg, var(--sg-teal), var(--sg-cyan) 92%);
  box-shadow: 0 18px 40px -14px color-mix(in srgb, var(--sg-teal) 90%, transparent), inset 0 1px 0 rgba(255,255,255,.28);
  animation: lxBtnGlow 2.8s ease-in-out infinite;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .24s ease;
}
#listening-exam .lx-sg-start::after{
  content: ''; position: absolute; top: 0; left: -70%; width: 50%; height: 100%; z-index: 1;
  border-radius: inherit; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-18deg); animation: lxSgShine 3.6s ease-in-out infinite;
}
#listening-exam .lx-sg-start-ic{ display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.22); }
#listening-exam .lx-sg-start-ic svg{ width: 12px; height: 12px; fill: #fff; margin-left: 1px; }
#listening-exam .lx-sg-start:hover{ transform: translateY(-3px) scale(1.03); box-shadow: 0 28px 54px -16px color-mix(in srgb, var(--sg-teal) 100%, transparent); }
#listening-exam .lx-sg-start:active{ transform: translateY(-1px) scale(.99); }

/* -- mode badge -- */
#listening-exam .lx-sg-mode{ margin-top: 2px; }
#listening-exam .lx-sg-badge{
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
  border: 1px solid var(--sg-line); background: var(--sg-glass); color: var(--sg-sub);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
#listening-exam .lx-sg-badge-dot{ width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 9px currentColor; }
#listening-exam .lx-sg-badge.is-mock{ color: #f59e0b; border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.10); }
#listening-exam .lx-sg-badge.is-casual{ color: var(--sg-teal); border-color: color-mix(in srgb, var(--sg-teal) 35%, transparent); background: color-mix(in srgb, var(--sg-teal) 12%, transparent); }

/* -- preparing text -- */
#listening-exam .lx-prep-status{ font-size: 15px; font-weight: 700; color: var(--sg-ink); max-width: 34ch; line-height: 1.5; }
#listening-exam .lx-prep-sub{ font-size: 13px; color: var(--sg-sub); margin-top: -8px; }

/* --------------------------------- keyframes ------------------------------ */
@keyframes lxSgRise{ from{ opacity: 0; transform: translateY(26px) scale(.96); } to{ opacity: 1; transform: none; } }
@keyframes lxSgShine{ 0%,55%{ left: -70%; } 82%,100%{ left: 135%; } }
@keyframes lxGradShift{ 0%,100%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } }
@keyframes lxPing{ 0%{ transform: scale(.5); opacity: .85; } 70%{ opacity: 0; } 100%{ transform: scale(1.55); opacity: 0; } }
@keyframes lxCoreBob{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-6px); } }
@keyframes lxBtnGlow{ 0%,100%{ filter: drop-shadow(0 0 0 transparent); } 50%{ filter: drop-shadow(0 0 15px color-mix(in srgb, var(--sg-teal) 55%, transparent)); } }
@keyframes lxEq{ 0%,100%{ transform: scaleY(.18); } 50%{ transform: scaleY(1); } }
@keyframes lxAur1{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(6vw,4vw) scale(1.12); } }
@keyframes lxAur2{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(-5vw,5vw) scale(1.1); } }
@keyframes lxAur3{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(4vw,-4vw) scale(1.15); } }
@keyframes lxSpin{ to{ transform: rotate(360deg); } }
@keyframes lxTgFly{ 0%{ transform: translate(0,0); } 40%{ transform: translate(4px,-4px); } 100%{ transform: translate(0,0); } }
@keyframes lxWaveMove{ to{ background-position: 50px 0; } }
@keyframes lxWaveMove2{ to{ background-position: 60px 0; } }
@keyframes lxCorePop{ 0%{ transform: scale(1); } 40%{ transform: scale(1.13); } 100%{ transform: scale(1); } }

@media (max-width: 560px){
  #listening-exam .lx-stage, #listening-exam .lx-preparing{ padding: 20px 15px; }
  #listening-exam .lx-sonar{ width: 108px; height: 108px; }
  #listening-exam .lx-sonar-core{ width: 66px; height: 66px; }
  #listening-exam .lx-sonar--prog{ width: 150px; height: 150px; }
  #listening-exam .lx-sonar--prog .lx-sonar-core{ width: 96px; height: 96px; }
  #listening-exam .lx-sonar-pct{ font-size: 25px; }
  #listening-exam .lx-eq{ height: 24%; }

  /* Results modal — mirrors the reading modal's phone layout (core/15-exam.css).
     Three fixed stat columns wrapped every label and still overflowed; the
     4-column answer rows gave each answer ~78px and shredded them. */
  #lx-results-modal .ex-res-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  #lx-results-modal .ex-res-cell{ padding: 12px 10px; }
  #lx-results-modal .ex-res-cell:nth-child(3){ grid-column: 1 / -1; }
  #lx-results-modal .ex-res-cell-v{ font-size: 22px; }
  #lx-results-modal .ex-res-band{ font-size: 28px; }

  #lx-results-modal .results-row{
    grid-template-columns: 26px 20px minmax(0, 1fr);
    gap: 2px 8px; align-items: start;
  }
  #lx-results-modal .results-row > div:nth-child(3),
  #lx-results-modal .results-row > div:nth-child(4){ grid-column: 3; overflow-wrap: anywhere; }
  #lx-results-modal .results-row > div:nth-child(4){ opacity: .75; font-size: 12.5px; }
  #lx-results-modal .results-row > div:nth-child(4)::before{ content: 'Correct: '; font-weight: 700; }
}

/* The audio row (time · speed · volume) had no wrap, so "🔒 plays once" was
   sliced at the card edge and the volume slider sat fully outside it. */
@media (max-width: 620px){
  #listening-exam .lx-audio-row{ flex-wrap: wrap; row-gap: 10px; }
  #listening-exam .lx-audio-tools{ flex-wrap: wrap; }
  #listening-exam .lx-vol{ width: 100%; max-width: 180px; }
}

/* ==========================================================================
   RESPONSIVE — PLATFORM SHELL, remaining gaps after the ≤880 (rail → footer)
   and ≤620 (audio row) passes above. Raw-broadcast tests are unaffected: they
   hide the footer and the file owns everything inside the iframe.
   ========================================================================== */
@media (max-width: 880px){
  /* The rail is hidden at this width and the footer becomes the palette, but
     `.subq-wrapper` WRAPS — a 40-question test built a five-row block of chips
     that ate ~150px of a phone screen and pushed Submit down with it. Mirror
     the reading exam (core/15-exam.css): parts + Submit share row 1, the
     palette gets its own horizontally-scrolling row underneath. */
  #listening-exam .exam-footer{ row-gap: 8px; }
  #listening-exam .footer-parts{ order: 1; flex: 1 1 auto; min-width: 0; }
  #listening-exam .submit-exam-btn{ order: 2; }
  #listening-exam .subq-wrapper{
    order: 3; flex-basis: 100%; justify-content: flex-start;
    flex-wrap: nowrap;               /* one row … */
    overflow-x: auto;                /* … that scrolls horizontally */
    overflow-y: hidden;
    padding-bottom: 3px; scrollbar-width: thin;
  }
  #listening-exam .subq-wrapper button{ flex: 0 0 auto; }

  /* table_completion / matching grids ship a `.ex-tbl-scroll` /
     `.ex-grid-scroll` wrapper for exactly this, but neither class carried a
     single CSS rule. A table row with two gap inputs needs ~290px of
     unbreakable width and simply overflowed the question column. */
  #listening-exam .ex-tbl-scroll,
  #listening-exam .ex-grid-scroll{
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  }
}

@media (max-width: 560px){
  /* 26px of side padding on the question column + 24px on the audio dock spend
     ~13% of a 390px viewport on gutters. */
  #listening-exam .lx-scroll{ padding: 18px 14px 120px; }
  #listening-exam .lx-audio-dock{ padding: 14px 14px 12px; }
  /* Part tabs sit at ~28px tall — under the ~40px a fingertip needs, and they
     are tapped repeatedly while the recording is playing. */
  #listening-exam .lx-part-tab{ padding: 10px 16px; }

  /* form_completion rows: the label column takes 40%, leaving the field column
     unable to hold the question-number chip AND a 130px-min input, so the input
     dropped under its own chip mid-row. Stack label over field instead.
     Unscoped on purpose — the reading exam renders the same markup. */
  .ex-form-row{ grid-template-columns: 1fr; gap: 6px; }

  /* Results modal: overlay 24 + modal 26 = 100px of nested padding on a 390px
     screen. The reading modal already claws this back (core/15-exam.css); the
     listening one only reflowed its inner grids. */
  /* `.modal-overlay` in the compound below is load-bearing: the base padding
     comes from the `#listening-exam .modal-overlay` half of its selector list
     (0,1,1,0), which outranks a bare `#lx-results-modal` (0,1,0,0). */
  #lx-results-modal.modal-overlay{ padding: 10px; }
  #lx-results-modal .results-modal{ padding: 20px 14px; }
  #lx-results-modal .results-modal-actions{ flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce){
  #listening-exam .lx-sg-inner > *,
  #listening-exam .lx-prep-inner > *,
  #listening-exam .lx-aurora,
  #listening-exam .lx-eq i,
  #listening-exam .lx-sonar-wave,
  #listening-exam .lx-sonar-core,
  #listening-exam .lx-grad,
  #listening-exam .lx-sg-start,
  #listening-exam .lx-sg-start::after,
  #listening-exam .lx-liquid-crest,
  #listening-exam .lx-sonar-liquid::after{ animation: none !important; }
  #listening-exam .lx-eq i{ transform: scaleY(.5); }
  #listening-exam .lx-sonar-wave{ opacity: .18; }
}