/* Scoped to the active official listening workspace; homepage, sidebar and other skills keep their styles. */
body[data-mock-view="exam"][data-mock-section="listening"] {
  --lw-accent: var(--button);
  --lw-accent-strong: var(--button-dark);
  --lw-accent-soft: rgba(255, 241, 232, 0.96);
  --lw-accent-line: rgba(227, 160, 124, 0.7);
  --lw-row: rgba(255, 253, 250, 0.9);
  --lw-row-hover: rgba(255, 247, 241, 0.98);
  --lw-ok: #2d8a52;
  --lw-ok-soft: rgba(45, 138, 82, 0.12);
  --lw-track: rgba(223, 209, 194, 0.9);
}
html[data-theme="dark"] body[data-mock-view="exam"][data-mock-section="listening"] {
  --lw-accent-soft: rgba(208, 122, 77, 0.16);
  --lw-accent-line: rgba(227, 153, 110, 0.55);
  --lw-row: rgba(31, 38, 52, 0.92);
  --lw-row-hover: rgba(43, 50, 66, 0.98);
  --lw-ok: #7ed7a4;
  --lw-ok-soft: rgba(126, 215, 164, 0.14);
  --lw-track: rgba(84, 93, 111, 0.8);
}

body[data-mock-view="exam"][data-mock-section="listening"] .shell-main { display: block; }
body[data-mock-view="exam"][data-mock-section="listening"] .page-frame { padding: 18px 28px 96px; }
body[data-mock-view="exam"][data-mock-section="listening"] .workspace-card { background: transparent; border: 0; box-shadow: none; overflow: visible; border-radius: 0; gap: 0; }
body[data-mock-view="exam"][data-mock-section="listening"] .page-header:has(.lw-session) { display: block; width: 100%; padding: 0; background: transparent; border: 0; box-shadow: none; border-radius: 0; }
body[data-mock-view="exam"][data-mock-section="listening"] .page-body:has(.lw-workspace) { padding: 0; min-height: 0; }
body[data-mock-view="exam"][data-mock-section="listening"] .page-footer:has(.lw-key-hints) {
  position: fixed; left: var(--sidebar-collapsed-width); right: 0; bottom: 0; z-index: 12;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0;
  padding: 12px 28px max(12px, env(safe-area-inset-bottom));
  background: var(--surface-soft-strong); border: 0; border-top: 1px solid var(--card-border); border-radius: 0; box-shadow: none; backdrop-filter: blur(20px);
}
body[data-mock-view="exam"][data-mock-section="listening"]:has(.lw-workspace) .official-site-footer { display: none; }

.lw-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.lw-icon { width: 1em; height: 1em; flex-shrink: 0; }

/* Session header */
.lw-session { display: flex; align-items: center; gap: 20px; padding: 14px 22px; border: 1px solid var(--card-border); border-radius: 22px; background: var(--card-surface); box-shadow: var(--shadow-card); }
.lw-session-title { flex: 0 0 auto; min-width: 0; }
.lw-session-title .page-title { margin: 0; color: var(--ink-strong); font-size: 24px; font-weight: 750; letter-spacing: -.03em; line-height: 1.2; }
.lw-session-title p { margin: 4px 0 0; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.lw-session .header-part-nav { flex: 1 1 auto; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; justify-content: stretch; }
.lw-session .header-part-nav .part-chip { display: grid; justify-items: center; gap: 1px; padding: 7px 8px; border-radius: 14px; font-size: 14px; line-height: 1.25; background: var(--card-surface-soft); position: relative; }
.lw-session .header-part-nav .part-chip.is-active { background: var(--lw-accent-soft); border-color: var(--lw-accent-line); color: var(--sidebar-button-active-text); }
.lw-session .header-part-nav .part-chip__meta { font-size: 12px; }
.lw-session .header-part-nav .part-chip.is-active .part-chip__meta { color: inherit; }
.lw-session .header-part-nav .part-chip__check { position: absolute; top: 4px; right: 6px; width: 14px; height: 14px; font-size: 10px; }
.lw-session-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; min-width: 128px; justify-content: flex-end; }
.lw-session .timer-badge { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 16px; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; background: var(--card-surface-soft); }
.lw-session .timer-badge strong { font-size: 26px; line-height: 1.1; color: var(--ink-strong); }
.lw-session .timer-badge--warning strong { color: #c86e14; }
.lw-session .timer-badge--danger strong { color: #d42929; }

/* Phase strip */
.lw-workspace { display: grid; gap: 14px; margin-top: 14px; }
.lw-phase { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 7px 10px 7px 16px; border: 1px solid var(--card-border); border-radius: 18px; background: var(--card-surface); box-shadow: var(--shadow-card); }
.lw-phase-steps { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; min-width: 0; flex: 1 1 auto; overflow: hidden; }
.lw-phase-step { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--muted); font-size: 14px; white-space: nowrap; }
.lw-phase-label { overflow: hidden; text-overflow: ellipsis; }
.lw-phase-index { display: inline-grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0; border-radius: 999px; background: var(--lw-track); color: var(--ink); font-size: 12px; font-weight: 700; }
.lw-phase-step.is-active { color: var(--sidebar-button-active-text); font-weight: 700; }
.lw-phase-step.is-active .lw-phase-index { background: var(--lw-accent); color: #fff; }
.lw-phase-step.is-done .lw-phase-index { background: var(--lw-ok-soft); color: var(--lw-ok); }
.lw-phase-step.is-done .lw-phase-index .lw-icon { width: 14px; height: 14px; }
.lw-phase-sep { display: inline-flex; color: var(--muted); opacity: .6; font-size: 14px; }
.lw-section-dots { display: inline-flex; gap: 6px; align-items: center; }
.lw-section-dots span { width: 10px; height: 10px; border-radius: 999px; background: var(--lw-track); }
.lw-section-dots .is-done { background: var(--lw-ok); opacity: .7; }
.lw-section-dots .is-active { background: var(--lw-accent); }
.lw-phase-tools { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.lw-phase-tools .part-chip--translation { min-height: 34px; padding: 6px 14px; font-size: 13px; background: var(--card-surface-soft); }
.lw-phase-tools .part-chip--translation.is-active { background: var(--lw-accent-soft); border-color: var(--lw-accent-line); color: var(--sidebar-button-active-text); }
.lw-switch { appearance: none; display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 5px 8px 5px 12px; border: 1px solid var(--pill-border); border-radius: 999px; background: var(--card-surface-soft); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.lw-switch__track { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--lw-track); transition: background 140ms ease; }
.lw-switch__track span { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform 140ms ease; }
.lw-switch.is-on { border-color: var(--lw-accent-line); color: var(--sidebar-button-active-text); }
.lw-switch.is-on .lw-switch__track { background: var(--lw-accent); }
.lw-switch.is-on .lw-switch__track span { transform: translateX(14px); }
.lw-workspace :is(button, select, input, summary, a):focus-visible,
.lw-session :is(button, a):focus-visible,
.lw-switch:focus-visible { outline: 2px solid var(--button); outline-offset: 2px; }

/* Cards */
.lw-card { display: grid; gap: 16px; min-width: 0; padding: 20px 22px; border: 1px solid var(--card-border); border-radius: 22px; background: var(--card-surface); box-shadow: var(--shadow-card); }
.lw-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lw-card-title { margin: 0; color: var(--ink-strong); font-size: 22px; font-weight: 750; letter-spacing: -.02em; line-height: 1.3; }
.lw-card-title .instruction-copy { display: grid; gap: 4px; }
.lw-card-title .instruction-copy-translation { font-size: 14px; font-weight: 500; color: var(--muted); }
.lw-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--lw-accent-soft); color: var(--sidebar-button-active-text); font-size: 13px; font-weight: 600; white-space: nowrap; }
.lw-copy { display: grid; gap: 6px; }
.lw-copy .lw-lead { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-strong); }
.lw-copy .lw-translation { font-size: 14px; line-height: 1.55; color: var(--muted); margin: -2px 0 4px; }

.lw-intro--with-image { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; gap: 22px; }
.lw-intro-main { display: grid; gap: 14px; min-width: 0; align-content: start; }
.lw-figure { display: grid; gap: 10px; margin: 0; padding: 10px; border: 1px solid var(--card-border); border-radius: 18px; background: var(--card-surface-soft); }
.lw-figure img { display: block; width: 100%; height: auto; max-height: min(46vh, 380px); object-fit: contain; border-radius: 12px; }

.lw-section-map { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.lw-section-map li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--card-border); border-radius: 16px; background: var(--card-surface); }
.lw-section-map li.is-active { border-color: var(--lw-accent-line); background: var(--lw-accent-soft); }
.lw-section-map__index { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: var(--lw-track); font-weight: 700; font-size: 13px; color: var(--ink); flex-shrink: 0; }
.lw-section-map li.is-active .lw-section-map__index { background: var(--lw-accent); color: #fff; }
.lw-section-map li.is-done .lw-section-map__index { background: var(--lw-ok-soft); color: var(--lw-ok); }
.lw-section-map__copy { display: grid; gap: 1px; min-width: 0; }
.lw-section-map__copy strong { font-size: 14px; color: var(--ink-strong); }
.lw-section-map__copy small { font-size: 12px; color: var(--muted); }

/* Player */
body[data-mock-view="exam"][data-mock-section="listening"] .lw-workspace .listening-mini-player.lw-player { position: static; width: 100%; padding: 12px 16px; border: 1px solid var(--card-border); border-radius: 18px; background: var(--card-surface-soft); box-shadow: none; backdrop-filter: none; gap: 8px; }
.lw-player-label { font-size: 13px; font-weight: 700; color: var(--ink-strong); }
.lw-workspace .lw-player-row { display: grid; grid-template-columns: auto auto minmax(80px, 1fr) auto; gap: 14px; align-items: center; }
.lw-workspace .lw-play { display: inline-grid; place-items: center; width: 46px; height: 46px; min-width: 0; padding: 0; border-radius: 999px; font-size: 20px; box-shadow: 0 8px 18px rgba(211, 111, 61, 0.22); }
.lw-workspace .listening-mini-player-time { font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ink); }
.lw-workspace .listening-audio-seek { accent-color: var(--lw-accent); height: 20px; }
.lw-workspace .listening-mini-player-speed__select { min-width: 84px; min-height: 38px; padding: 6px 34px 6px 12px; border-radius: 12px; box-shadow: none; font-size: 14px; }
.lw-workspace .listening-mini-player-speed::after { right: 12px; }

.lw-listen { display: grid; place-items: center; min-height: 150px; }
.lw-listen.has-scene { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: center; }
.lw-listen .lw-figure--scene img { max-height: min(34vh, 300px); }
.lw-listen-status { display: grid; justify-items: center; gap: 10px; padding: 12px; }
.lw-listen-icon { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 999px; background: var(--lw-accent-soft); color: var(--lw-accent); font-size: 40px; box-shadow: 0 0 0 12px color-mix(in srgb, var(--lw-accent) 7%, transparent); }
.lw-listen-icon.is-playing { animation: lwPulse 1.8s ease-in-out infinite; }
.lw-listen-label { font-size: 17px; font-weight: 700; color: var(--ink-strong); }
@keyframes lwPulse { 50% { box-shadow: 0 0 0 20px color-mix(in srgb, var(--lw-accent) 4%, transparent); } }

.lw-video .listening-video-shell { display: grid; gap: 10px; }
.lw-video .listening-video-player { width: 100%; max-height: min(58vh, 560px); border-radius: 16px; background: #000; }
.lw-video-tools { display: flex; justify-content: flex-end; }
.lw-video .listening-mini-player-speed--video { width: auto; }

/* Options */
.lw-workspace .choice-list.lw-text-options { display: grid; gap: 8px; }
.lw-workspace .lw-option { display: grid; grid-template-columns: 20px 22px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0; padding: 10px 14px; min-height: 52px; border: 1px solid var(--card-border); border-radius: 14px; background: var(--lw-row); box-shadow: none; cursor: pointer; transition: border-color 120ms ease, background 120ms ease; }
.lw-workspace .lw-option:hover { background: var(--lw-row-hover); border-color: var(--lw-accent-line); }
.lw-workspace .lw-option:has(input:checked) { border-color: var(--lw-accent); background: var(--lw-accent-soft); box-shadow: inset 0 0 0 1px var(--lw-accent); }
.lw-workspace .lw-option input { width: 18px; height: 18px; margin: 0; accent-color: var(--lw-accent); }
.lw-option-letter { font-weight: 750; color: var(--ink-strong); font-size: 15px; }
.lw-workspace .lw-option .option-copy { display: grid; gap: 2px; min-width: 0; }
.lw-workspace .lw-option .option-copy-primary { font-size: 16px; line-height: 1.45; color: var(--ink-strong); }
.lw-workspace .lw-option .option-copy-translation { font-size: 13px; line-height: 1.4; color: var(--muted); margin: 0; }
.lw-key { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border: 1px solid var(--pill-border); border-radius: 7px; background: var(--card-surface); color: var(--muted); font: 600 12px/1 var(--body-font); }
.lw-group-question:not(.is-active) .lw-key { visibility: hidden; }

.lw-workspace .choice-list.lw-image-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lw-workspace .lw-option--image { grid-template-columns: 20px 22px minmax(0, 1fr) auto; align-items: center; padding: 10px 12px; }
.lw-workspace .lw-option--image .image-choice-body { display: block; min-width: 0; }
.lw-workspace .lw-option--image img { display: block; width: 100%; height: clamp(110px, 20vh, 200px); object-fit: contain; border-radius: 10px; background: #fff; }
.lw-workspace .lw-option--image .lw-key { align-self: start; }

/* Question dots / rail */
.lw-dots { display: flex; flex-wrap: wrap; gap: 8px; }
.lw-dot { appearance: none; display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--pill-border); border-radius: 999px; background: var(--card-surface-soft); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.lw-dot:disabled { cursor: default; opacity: .5; }
.lw-dot.is-answered { background: var(--lw-ok-soft); border-color: color-mix(in srgb, var(--lw-ok) 40%, transparent); color: var(--lw-ok); }
.lw-dot.is-current, .lw-dot.is-active { border: 2px solid var(--lw-accent); color: var(--sidebar-button-active-text); background: var(--lw-accent-soft); }

/* Group answers */
.lw-group-body { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: start; }
.lw-rail { position: sticky; top: 12px; display: grid; gap: 8px; justify-items: center; }
.lw-workspace .listening-official-questions.lw-group-list { display: grid; gap: 12px; }
.lw-workspace .lw-group-question { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0; padding: 14px 16px; border: 1px solid var(--card-border); border-radius: 18px; background: var(--card-surface); scroll-margin: 90px 0 110px; }
.lw-workspace .lw-group-question.is-active { border-color: var(--lw-accent-line); box-shadow: inset 3px 0 0 var(--lw-accent); }
.lw-workspace .lw-group-question .listening-official-question-number { font-size: 13px; font-weight: 700; color: var(--muted); }
.lw-workspace .lw-group-question.is-active .listening-official-question-number { color: var(--sidebar-button-active-text); }
.lw-workspace .lw-group-question .listening-official-question-body { display: grid; gap: 10px; min-width: 0; }
.lw-workspace .lw-group-question .listening-official-question-prompt { font-size: 17px; line-height: 1.5; color: var(--ink-strong); font-weight: 600; }
.lw-workspace .lw-group-question .question-copy { display: grid; gap: 2px; }
.lw-workspace .lw-group-question .question-copy-translation { font-size: 14px; font-weight: 400; color: var(--muted); }

/* Transcript panel */
.lw-workspace .listening-reference-panel.lw-reference { width: 100%; border-radius: 16px; background: var(--card-surface-soft); box-shadow: none; }
.lw-workspace .lw-reference .listening-reference-panel__summary { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; }
.lw-workspace .lw-reference .listening-reference-panel__summary::after { content: "▾"; color: var(--muted); }
.lw-workspace .lw-reference[open] .listening-reference-panel__summary::after { content: "▴"; }
.lw-workspace .lw-reference .listening-reference-panel__body { max-height: 42vh; overflow: auto; overscroll-behavior: contain; }

/* Footer */
.lw-footer-note { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.lw-footer-note .control-button { min-width: 0; }
.lw-restart { display: inline-flex; align-items: center; gap: 8px; }
.lw-key-hints { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.lw-key-hint { display: inline-flex; align-items: center; gap: 6px; }
.lw-key-hint kbd { padding: 3px 7px; border: 1px solid var(--pill-border); border-radius: 7px; background: var(--card-surface); color: var(--ink); font: 600 12px/1.2 var(--body-font); }
body[data-mock-view="exam"][data-mock-section="listening"] .page-footer:has(.lw-key-hints) .footer-actions { display: flex; gap: 10px; }
body[data-mock-view="exam"][data-mock-section="listening"] .page-footer:has(.lw-key-hints) .footer-actions .control-button { min-width: 112px; min-height: 44px; }

html[data-theme="dark"] .lw-workspace .lw-option--image img { background: #f4f1ec; }
html[data-theme="dark"] .lw-workspace .choice-item.lw-option,
html[data-theme="dark"] .lw-workspace .choice-item--image.lw-option { background: var(--lw-row); border-color: var(--card-border); color: var(--ink); }
html[data-theme="dark"] .lw-workspace .choice-item.lw-option:has(input:checked) { background: var(--lw-accent-soft); border-color: var(--lw-accent); }
html[data-theme="dark"] .lw-session .header-part-nav .part-chip { background: var(--card-surface-soft); }
html[data-theme="dark"] .lw-session .timer-badge { background: var(--card-surface-soft); border-color: var(--card-border); }
html[data-theme="dark"] .lw-phase-tools .part-chip--translation:not(.is-active) { background: var(--card-surface-soft); border-color: var(--pill-border); color: var(--ink); }

@media (max-width: 1180px) {
  .lw-key-hints { display: none; }
  .lw-session { flex-wrap: wrap; }
  .lw-session .header-part-nav { order: 3; flex-basis: 100%; }
  .lw-session-actions { margin-left: auto; }
}
@media (min-width: 721px) and (max-width: 1080px) {
  body[data-mock-view="exam"][data-mock-section="listening"] .page-frame { padding: 14px 18px 92px; }
  body[data-mock-view="exam"][data-mock-section="listening"] .page-footer:has(.lw-key-hints) { padding-inline: 18px; }
  .lw-intro--with-image { grid-template-columns: 1fr; }
  .lw-intro--with-image .lw-figure img { max-height: 260px; }
  .lw-phase { flex-wrap: wrap; }
  .lw-phase-steps { flex-basis: 100%; }
  .lw-phase-tools { margin-left: auto; }
}
@media (max-width: 720px) {
  body[data-mock-view="exam"][data-mock-section="listening"] .page-frame { padding: 10px 10px 84px; }
  body[data-mock-view="exam"][data-mock-section="listening"] .page-footer:has(.lw-key-hints) { left: 0; padding: 8px 10px max(8px, env(safe-area-inset-bottom)); gap: 8px; }
  body[data-mock-view="exam"][data-mock-section="listening"] .page-footer:has(.lw-key-hints) .footer-actions { flex: 1; }
  body[data-mock-view="exam"][data-mock-section="listening"] .page-footer:has(.lw-key-hints) .footer-actions .control-button { flex: 1; min-width: 0; }
  .lw-footer-note .control-link-button { display: none; }
  .lw-restart { min-width: 0; width: 44px; height: 44px; padding: 0; justify-content: center; }
  .lw-restart span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .lw-session { padding: 12px 14px; gap: 10px; border-radius: 18px; }
  .lw-session-title .page-title { font-size: 20px; }
  .lw-session-title p { max-width: 58vw; }
  .lw-session .header-part-nav { grid-template-columns: repeat(6, minmax(46px, 1fr)); gap: 5px; }
  .lw-session .header-part-nav .part-chip { padding: 6px 2px; font-size: 12px; }
  .lw-session .timer-badge { padding: 6px 10px; flex-direction: column; gap: 0; font-size: 10px; }
  .lw-session .timer-badge strong { font-size: 22px; }
  .lw-session-actions { min-width: 0; }
  .lw-workspace { gap: 10px; margin-top: 10px; }
  .lw-phase { flex-wrap: wrap; padding: 8px 10px; gap: 8px; }
  .lw-phase-steps { flex-basis: 100%; gap: 4px; }
  .lw-phase-step { font-size: 12px; gap: 5px; }
  .lw-phase-step:not(.is-active) .lw-phase-label { display: none; }
  .lw-phase-tools { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
  .lw-card { padding: 14px; border-radius: 18px; gap: 12px; }
  .lw-card-title { font-size: 19px; }
  .lw-copy .lw-lead { font-size: 15px; }
  .lw-intro--with-image, .lw-listen.has-scene { grid-template-columns: 1fr; }
  .lw-figure img, .lw-listen .lw-figure--scene img { max-height: 220px; }
  .lw-listen { min-height: 0; }
  .lw-listen-icon { width: 60px; height: 60px; font-size: 28px; }
  .lw-workspace .lw-player-row { grid-template-columns: auto auto minmax(0, 1fr); gap: 10px; }
  .lw-workspace .lw-player-row .listening-mini-player-speed { grid-column: 1 / -1; justify-self: end; }
  .lw-workspace .lw-option { grid-template-columns: 18px 18px minmax(0, 1fr); padding: 10px 12px; gap: 10px; }
  .lw-key { display: none; }
  .lw-workspace .choice-list.lw-image-options { gap: 8px; }
  .lw-workspace .lw-option--image { grid-template-columns: 18px minmax(0, 1fr); }
  .lw-workspace .lw-option--image .lw-option-letter { grid-column: 2; grid-row: 1; }
  .lw-workspace .lw-option--image .image-choice-body { grid-column: 1 / -1; }
  .lw-workspace .lw-option--image img { height: 110px; }
  .lw-group-body { grid-template-columns: 1fr; }
  .lw-rail { position: static; display: flex; flex-wrap: wrap; justify-content: flex-start; }
  .lw-workspace .lw-group-question { padding: 12px; }
  .lw-workspace .lw-group-question .listening-official-question-prompt { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .lw-workspace *, .lw-session * { transition: none !important; animation: none !important; } }

/* Seek bar */
.lw-workspace .lw-player .listening-audio-seek { -webkit-appearance: none; appearance: none; height: 22px; margin: 0; background: transparent; cursor: pointer; }
.lw-workspace .lw-player .listening-audio-seek:disabled { cursor: default; opacity: .6; }
.lw-workspace .lw-player .listening-audio-seek::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--lw-accent) 0 var(--lw-seek, 0%), var(--lw-track) var(--lw-seek, 0%) 100%); }
.lw-workspace .lw-player .listening-audio-seek::-moz-range-track { height: 6px; border-radius: 999px; background: var(--lw-track); }
.lw-workspace .lw-player .listening-audio-seek::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--lw-accent); }
.lw-workspace .lw-player .listening-audio-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5px; border-radius: 999px; background: #fff; border: 3px solid var(--lw-accent); box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.lw-workspace .lw-player .listening-audio-seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 999px; background: #fff; border: 3px solid var(--lw-accent); }

/* Neutralise legacy listening spacing inside the workspace */
.lw-workspace .listening-question-answer-panel { margin: 0; padding: 0; }
.lw-workspace .choice-list { margin-top: 0; }
.lw-workspace .listening-official-questions.lw-group-list { margin-top: 0; }
.lw-workspace .listening-official-question-answer { max-width: none; }
.lw-session .header-part-nav .part-chip { min-width: 0; }
@media (max-width: 720px) {
  .lw-session .header-part-nav { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  .lw-session .header-part-nav .part-chip { padding: 5px 0; font-size: 11px; border-radius: 10px; }
  .lw-session .header-part-nav .part-chip__meta { font-size: 10px; }
  .lw-session .header-part-nav .part-chip__check { display: none; }
}
@media (max-width: 720px) {
  body[data-mock-section="listening"] .lw-session .header-part-nav { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; overflow: visible; margin: 0; padding: 0; width: 100%; }
  body[data-mock-section="listening"] .lw-session .header-part-nav .part-chip { min-width: 0; width: 100%; padding: 5px 0; font-size: 11px; justify-content: center; }
}
.lw-workspace .lw-option--image img { height: clamp(96px, 16vh, 160px); }
.lw-video .listening-video-player { display: block; width: auto; max-width: 100%; margin: 0 auto; }

/* Compact mobile top bar for listening sessions (the shared rule right-aligns and clips the leave button). */
@media (max-width: 720px) {
  body[data-mock-section="listening"]:not([data-mock-view="selection"]) .topbar { padding: 8px 10px 0; gap: 6px; }
  body[data-mock-section="listening"]:not([data-mock-view="selection"]) .topbar-meta { justify-content: flex-start; gap: 6px; overflow: visible; flex-wrap: nowrap; }
  body[data-mock-section="listening"]:not([data-mock-view="selection"]) .topbar-meta .topbar-leave-button { margin-right: auto; flex: 0 1 auto; min-width: 0; max-width: 46vw; min-height: 36px; padding: 7px 12px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: none; }
  body[data-mock-section="listening"]:not([data-mock-view="selection"]) .topbar-meta :is([data-language-cycle], [data-theme-toggle]) {
    flex: 0 0 auto; display: inline-grid; place-items: center; width: 36px; min-width: 0; height: 36px; padding: 0; border-radius: 999px;
    border: 1px solid var(--pill-border); background: var(--card-surface-soft); color: var(--sidebar-button-active-text); box-shadow: none; font-size: 13px; font-weight: 700; transform: none;
  }
  body[data-mock-section="listening"]:not([data-mock-view="selection"]) .topbar-meta .rd-library-link { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; font-size: 13px; white-space: nowrap; writing-mode: horizontal-tb; }
}
@media (max-width: 374px) {
  body[data-mock-section="listening"]:not([data-mock-view="selection"]) .topbar-meta .topbar-leave-button { padding-inline: 10px; font-size: 12px; }
  body[data-mock-section="listening"]:not([data-mock-view="selection"]) .topbar-meta .rd-library-link { padding-inline: 10px; font-size: 12px; }
}
/* Image options: a uniform 4:3 frame fits the corpus photos without tall letterboxing. */
.lw-workspace .lw-option--image img { height: auto; aspect-ratio: 4 / 3; max-height: clamp(110px, 22vh, 190px); }
@media (max-width: 720px) { .lw-workspace .lw-option--image img { height: auto; max-height: none; } }
@media (min-width: 721px) { .lw-workspace .choice-list.lw-image-options { max-width: 760px; } }
/* Keep toasts clear of the fixed listening footer. */
body[data-mock-view="exam"][data-mock-section="listening"]:has(.lw-workspace) .toast-stack { bottom: 84px; left: calc(var(--sidebar-collapsed-width) + 20px); right: auto; max-width: 460px; }
@media (max-width: 720px) {
  body[data-mock-view="exam"][data-mock-section="listening"]:has(.lw-workspace) .toast-stack { left: 12px; right: 12px; bottom: 74px; max-width: none; }
}

/* Audio error / autoplay-blocked row: message and Retry each get a readable width. */
.lw-workspace .listening-mini-player-error { flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.lw-workspace .listening-mini-player-error [data-listening-audio-error-text] { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.lw-workspace .listening-mini-player-error .control-button { flex: 0 0 auto; width: auto; min-width: 0; max-width: 100%; white-space: normal; }
@media (max-width: 720px) {
  .lw-workspace .listening-mini-player-error { display: grid; grid-template-columns: minmax(0, 1fr); }
  .lw-workspace .listening-mini-player-error .control-button { width: 100%; min-height: 40px; }
}
/* The layout rules above must never override the hidden state after a successful retry. */
.lw-workspace .listening-mini-player-error.is-hidden { display: none; }
html[data-theme="dark"] .lw-workspace .listening-mini-player-error { background: var(--lw-accent-soft); border-color: var(--lw-accent-line); color: var(--ink-strong); }