/* iHub English practice workspace: focused scene and study path. */
.transfer-audio-button{display:none}
.transfer-completion{display:none}
#workspaceView{max-width:1180px;margin:0 auto;padding:24px 20px 56px;color:var(--ink)}
#workspaceView .workspace-title h1{color:var(--ink);font-size:clamp(20px,2.3vw,28px)}
#workspaceView .mode-description{color:var(--muted-strong)}
#workspaceView .workspace-divider,#workspaceView .player-experience-heading{display:none}
#workspaceView .study-layout{display:grid!important;grid-template-columns:minmax(0,1fr) 280px;gap:18px;align-items:start}
#workspaceView .player-column{grid-column:1;min-width:0}
#workspaceView .player-experience{padding:0;background:transparent;border:0;box-shadow:none;overflow:visible}
#workspaceView .learning-stages{--guided-progress:0%;position:relative;height:51px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:6px 12px;margin-bottom:10px;gap:8px;overflow:hidden}
#workspaceView .learning-stages::before{content:"";position:absolute;z-index:0;top:24px;left:8%;right:8%;display:block;height:2px;background:linear-gradient(90deg,var(--accent) 0 var(--guided-progress),var(--line) var(--guided-progress) 100%)}
#workspaceView .learning-stage{position:relative;z-index:1;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:7px;padding:0 6px;background:transparent;border:0;box-shadow:none;color:var(--ink);text-align:center;min-height:37px}
#workspaceView .learning-stage[hidden]{display:none}
#workspaceView .stage-number{border-radius:50%;width:28px;height:28px;background:var(--surface-soft);border:2px solid var(--line);color:var(--muted-strong);flex:0 0 28px}
#workspaceView .stage-copy{position:relative;z-index:1;padding:0 4px;background:var(--surface)}
#workspaceView .stage-copy strong{font-size:12px;color:inherit;white-space:nowrap}
#workspaceView .stage-copy small{display:none}
#workspaceView .learning-stage.is-active{color:var(--accent)}
#workspaceView .learning-stage.is-active .stage-number{color:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
#workspaceView .learning-stage.is-complete .stage-number{color:var(--ink-inverse);background:var(--accent);border-color:var(--accent)}
#workspaceView .player-media-shell{background:var(--player);border:1px solid var(--line);border-radius:16px;box-shadow:none;overflow:hidden}
#workspaceView .video-frame{border-radius:16px 16px 0 0;background:#000;border:0}
#workspaceView .player-transport-slot{border-radius:0;background:linear-gradient(180deg,var(--player-2),var(--player))}
#workspaceView .player-controls{background:var(--player);color:var(--player-text);border-color:var(--player-line)}
#workspaceView .workspace-insights{grid-column:2;grid-row:1;display:grid;gap:8px;align-content:start}
#workspaceView .workspace-insight-card,#workspaceView .transcript-panel,#workspaceView .materials{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;color:var(--ink);box-shadow:none}
#workspaceView .workspace-insight-card{padding:14px 15px}
#workspaceView .workspace-insight-card h2{font-size:12px;color:var(--muted-strong);margin:0 0 6px}
#workspaceView .workspace-insight-card h2:not(:first-child){margin-top:14px}
#workspaceView .workspace-insight-card strong{font-size:20px;line-height:1.1}
#workspaceView .workspace-insight-card p{margin:3px 0 0;font-size:11px;line-height:1.35;color:var(--muted-strong)}
#workspaceView progress{width:100%;height:8px;accent-color:var(--accent)}
#workspaceView .transcript-panel{grid-column:1;max-height:480px}
#workspaceView .transcript-panel h2,#workspaceView .materials__title{color:var(--ink)}
#workspaceView .transcript-item{color:var(--ink);background:transparent;border-color:var(--line)}
#workspaceView .materials{margin-top:18px}
#workspaceStageSummary>div{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:12px}
#workspaceStageSummary span:last-child{color:var(--accent)}
#workspaceView .study-layout.is-guided-audio-mode .workspace-insights{display:none}
#workspaceView .study-layout.is-guided-audio-mode{grid-template-columns:minmax(0,500px) minmax(0,1fr)}
#workspaceView .study-layout.is-guided-audio-mode .player-column{grid-column:1;grid-row:1}
#workspaceView .study-layout.is-guided-audio-mode .transcript-panel{grid-column:2;grid-row:1;max-height:unset;min-height:100%;margin:0}
#workspaceView .study-layout.is-guided-audio-mode .player-media-shell{border:1px solid var(--line);border-radius:16px;background:var(--player);overflow:hidden}
#workspaceView .study-layout.is-guided-audio-mode .player-theater-stage{min-height:390px;aspect-ratio:auto}
#workspaceView .study-layout.is-guided-audio-mode .audio-study-overlay{display:grid;place-content:center;padding:clamp(28px,5vw,64px);background:radial-gradient(circle at 50% 20%,rgba(var(--accent-rgb),.18),transparent 45%),var(--player);text-align:center}
#workspaceView .study-layout.is-guided-audio-mode .audio-study-overlay .audio-study-en{max-width:620px;font-size:clamp(1.7em,3.4vw,3em)}
#workspaceView .study-layout.is-guided-audio-mode .audio-study-overlay .audio-study-pt{max-width:560px}
#workspaceView .audio-caption-toggle{position:absolute;z-index:1;top:12px;right:12px;min-height:30px;padding:0 10px;color:var(--player-text);background:rgba(7,18,21,.78);border:1px solid rgba(255,255,255,.2);border-radius:var(--r-pill);font:800 11px var(--font-body);cursor:pointer;pointer-events:auto}
#workspaceView .audio-text-mode-toggle{position:absolute;z-index:2;top:12px;right:112px;min-height:30px;padding:0 10px;color:var(--player-muted);background:rgba(7,18,21,.78);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-pill);font:800 10px var(--font-body);white-space:nowrap;cursor:pointer;pointer-events:auto}
#workspaceView .audio-text-mode-toggle[hidden]{display:none}
#workspaceView .audio-text-mode-toggle:hover,#workspaceView .audio-text-mode-toggle[aria-pressed="true"]{color:#fff;background:var(--accent);border-color:var(--accent)}
#workspaceView .audio-caption-modes{position:absolute;z-index:2;top:12px;left:12px;display:flex;gap:3px;padding:3px;background:rgba(7,18,21,.78);border:1px solid rgba(255,255,255,.2);border-radius:var(--r-pill);pointer-events:auto}
#workspaceView .audio-caption-modes[hidden]{display:none}
#workspaceView .audio-caption-modes button{min-width:34px;min-height:26px;padding:0 7px;color:var(--player-muted);background:transparent;border:0;border-radius:var(--r-pill);font:800 10px var(--font-body);cursor:pointer}
#workspaceView .audio-caption-modes button:hover{color:var(--player-text);background:rgba(255,255,255,.1)}
#workspaceView .audio-caption-modes button.is-active{color:#fff;background:var(--accent)}
#workspaceView .listen-loop-player-toggle{display:inline-grid;place-items:center;min-width:28px;height:28px;margin-left:5px;padding:0;color:var(--player-muted);background:transparent;border:1px solid transparent;border-radius:8px;font:800 18px/1 var(--font-body);cursor:pointer}
#workspaceView .listen-loop-player-toggle[hidden]{display:none}
#workspaceView .listen-loop-player-toggle:hover,#workspaceView .listen-loop-player-toggle.is-active{color:#fff;background:var(--accent);border-color:var(--accent)}
#workspaceView .audio-source-switch{position:absolute;z-index:2;top:12px;left:12px;display:flex;align-items:center;gap:5px;max-width:calc(100% - 150px);padding:4px;color:var(--player-muted);background:rgba(7,18,21,.82);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-pill);font:800 10px var(--font-body);pointer-events:auto;backdrop-filter:blur(8px)}
#workspaceView .audio-source-switch>span{padding:0 6px;white-space:nowrap;letter-spacing:.04em;text-transform:uppercase}
#workspaceView .audio-source-switch button{min-height:28px;padding:0 10px;color:var(--player-muted);background:transparent;border:0;border-radius:var(--r-pill);font:800 11px var(--font-body);white-space:nowrap;cursor:pointer}
#workspaceView .audio-source-switch button:hover{color:var(--player-text);background:rgba(255,255,255,.08)}
#workspaceView .audio-source-switch button.is-active{color:#fff;background:var(--accent)}
#workspaceView .audio-caption-toggle:hover{background:var(--accent);border-color:var(--accent)}
#workspaceView .study-layout.is-guided-audio-mode .audio-study-overlay.is-captions-hidden{place-content:start end;padding:12px;background:transparent}
#workspaceView .study-layout.is-guided-audio-mode .audio-study-overlay.is-captions-hidden .audio-study-visual,#workspaceView .study-layout.is-guided-audio-mode .audio-study-overlay.is-captions-hidden .audio-study-eyebrow,#workspaceView .study-layout.is-guided-audio-mode .audio-study-overlay.is-captions-hidden .audio-study-speaker,#workspaceView .study-layout.is-guided-audio-mode .audio-study-overlay.is-captions-hidden .audio-study-en,#workspaceView .study-layout.is-guided-audio-mode .audio-study-overlay.is-captions-hidden .audio-study-pt{display:none}
#workspaceView .study-layout.is-guided-audio-mode .audio-study-overlay.is-captions-hidden .audio-full-transcript{display:none!important}
#workspaceView .study-layout.is-guided-audio-mode .audio-study-overlay.mode-en-only .audio-study-pt{display:none}
#workspaceView .study-layout.is-guided-audio-mode .audio-study-overlay.mode-pt-only .audio-study-en{display:none}
/* Portuguese is supporting copy only in DUAL. On its own, it is the primary
   caption and needs the same reading scale as English. */
#workspaceView .study-layout.is-guided-audio-mode .audio-study-overlay.mode-pt-only .audio-study-pt{max-width:760px;color:var(--player-text);font-size:clamp(1.55em,2.8vw,2.5em);font-weight:750;line-height:1.18;letter-spacing:-.03em}
#workspaceView .audio-full-transcript{display:none}
#workspaceView .study-layout.is-guided-audio-mode .audio-study-overlay.is-full-transcript{display:block;padding:0;overflow:hidden;background:var(--surface);color:var(--ink);text-align:left}
#workspaceView .study-layout.is-guided-audio-mode .audio-study-overlay.is-full-transcript .audio-study-visual,#workspaceView .study-layout.is-guided-audio-mode .audio-study-overlay.is-full-transcript .audio-study-eyebrow,#workspaceView .study-layout.is-guided-audio-mode .audio-study-overlay.is-full-transcript .audio-study-speaker,#workspaceView .study-layout.is-guided-audio-mode .audio-study-overlay.is-full-transcript .audio-study-en,#workspaceView .study-layout.is-guided-audio-mode .audio-study-overlay.is-full-transcript .audio-study-pt{display:none}
#workspaceView .study-layout.is-guided-audio-mode .audio-study-overlay.is-full-transcript .audio-full-transcript{position:absolute;inset:56px 14px 14px;display:grid;gap:11px;padding-right:4px;overflow-y:auto;overscroll-behavior:contain;pointer-events:auto;-webkit-overflow-scrolling:touch}
#workspaceView .audio-full-transcript-line{padding:10px 11px;border-left:2px solid rgba(var(--accent-rgb),.5);background:var(--surface-soft);border-radius:0 8px 8px 0}
#workspaceView .audio-full-transcript-line p{margin:0}
#workspaceView .audio-full-transcript-en{color:var(--ink);font:700 15px/1.42 var(--font-body)}
#workspaceView .audio-full-transcript-pt{margin-top:4px!important;color:var(--muted-strong);font:500 13px/1.42 var(--font-body)}
#workspaceView .study-layout.is-guided-audio-mode .audio-study-overlay.mode-en-only .audio-full-transcript-pt{display:none}
#workspaceView .study-layout.is-guided-audio-mode .audio-study-overlay.mode-pt-only .audio-full-transcript-en{display:none}
#workspaceView .study-layout.is-guided-audio-mode .audio-study-overlay.mode-pt-only .audio-full-transcript-pt{margin-top:0!important;color:var(--ink);font:700 15px/1.42 var(--font-body)}
#workspaceView .audio-background-control{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:7px 10px;color:var(--player-text);background:var(--player);border:1px solid var(--player-line);border-radius:12px;font-size:11px}
#workspaceView .audio-background-control button{min-height:29px;padding:0 10px;color:#fff;background:var(--accent);border:0;border-radius:var(--r-pill);font:800 11px var(--font-body);cursor:pointer}
#workspaceView .study-layout.is-guided-audio-mode .video-replay-button{z-index:calc(var(--z-player-overlay) + 2)}
#workspaceView .study-layout.is-audio-visual-hidden .player-media-shell{height:0;min-height:0;border:0;opacity:0;overflow:hidden;pointer-events:none}
#workspaceView .study-layout.is-audio-visual-hidden .player-theater-stage{height:0;min-height:0;aspect-ratio:auto}
#workspaceView .study-layout.is-audio-visual-hidden .player-transport-slot{display:none}
#workspaceView .study-layout.is-guided-audio-mode .player-transport-slot{padding:8px 10px 7px}
#workspaceView .study-layout.is-guided-audio-mode .player-controls{grid-template-columns:40px minmax(0,1fr) 40px;grid-template-rows:18px 30px 25px;gap:4px 6px}
#workspaceView .study-layout.is-guided-audio-mode .player-controls .control-btn,#workspaceView .study-layout.is-guided-audio-mode .player-controls .primary-button.compact{min-height:30px;height:30px;padding:0 5px;font-size:10px}
#workspaceView .study-layout.is-guided-audio-mode .speed-control{max-width:100%;gap:3px}
#workspaceView .study-layout.is-guided-audio-mode .speed-control>span{display:none}
#workspaceView .study-layout.is-guided-audio-mode .speed-control button{min-width:34px;min-height:24px;height:24px;padding:0 3px;font-size:10px}
#workspaceView .study-layout.is-guided-audio-mode .transcript-header h2::after{content:"Acompanhe a fala ativa";display:block;margin-top:5px;color:var(--muted-strong);font:500 12px var(--font-body)}
@media(min-width:901px){#workspaceView .learning-stages{width:calc(100% + 298px)}#workspaceView .workspace-insights{margin-top:108px}}
@media(max-width:900px){#workspaceView .study-layout,#workspaceView .study-layout.is-guided-audio-mode{grid-template-columns:minmax(0,1fr)}#workspaceView .workspace-insights{grid-column:1;grid-row:auto;grid-template-columns:repeat(2,minmax(0,1fr))}#workspaceView .learning-stages{display:flex;overflow-x:auto}#workspaceView .learning-stages::before{display:none}#workspaceView .learning-stage{flex:1 0 100px}#workspaceView .study-layout.is-guided-audio-mode .player-column,#workspaceView .study-layout.is-guided-audio-mode .transcript-panel{grid-column:1;grid-row:auto}#workspaceView .study-layout.is-guided-audio-mode .transcript-panel{min-height:0;max-height:440px}#workspaceView .study-layout.is-guided-audio-mode .player-theater-stage{min-height:310px}}
@media(max-width:540px){#workspaceView{padding:16px 12px 36px}#workspaceView .workspace-insights{grid-template-columns:1fr}#workspaceView .stage-copy strong{font-size:12px}}

@media (max-width:700px){#workspaceView .audio-source-switch{top:10px;left:10px;max-width:calc(100% - 112px)}#workspaceView .audio-source-switch>span{display:none}#workspaceView .audio-source-switch button{padding:0 8px;font-size:10px}#workspaceView .study-layout.is-full-audio-transcript .player-theater-stage{min-height:342px}}
@media (max-width:480px){
  #workspaceView .audio-caption-modes{top:10px;left:8px;gap:2px;padding:2px}
  #workspaceView .audio-caption-modes button{min-width:28px;min-height:26px;padding:0 5px;font-size:9px}
  #workspaceView .audio-caption-toggle{top:10px;right:8px;min-height:28px;padding:0 8px;font-size:9px}
  #workspaceView .audio-text-mode-toggle{top:10px;right:94px;min-height:28px;padding:0 7px;font-size:9px}
  #workspaceView .audio-study-overlay.is-full-transcript .audio-full-transcript{inset:52px 10px 10px}
}

/* =========================================================
   Workspace Learning Path V3
   Explore → Understand → Notice → Speak → Listen → Transfer
   Uses only the existing iHub design tokens/colors.
   ========================================================= */
#workspaceView{
  max-width:1320px;
  padding:22px 22px 64px;
}

/* Final cascade guard: selected speed must never inherit the pale surface. */
#workspaceView .study-layout.is-transfer-mode .transfer-speed-control button.is-active{
  color:#fff !important;
  background:var(--accent) !important;
  border-color:var(--accent) !important;
  text-shadow:none;
}

#workspaceView .study-layout{
  grid-template-columns:minmax(0,1fr) 340px;
  gap:18px;
  align-items:start;
}

#workspaceView .player-column{
  grid-column:1;
  grid-row:1;
}

#workspaceView .learning-stages{
  width:calc(100% + 358px);
  height:auto;
  min-height:78px;
  display:flex;
  align-items:stretch;
  gap:8px;
  padding:7px;
  margin:0 0 14px;
  border-radius:16px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
}
#workspaceView .learning-stages::-webkit-scrollbar{display:none}
#workspaceView .learning-stages::before{display:none}

#workspaceView .learning-stage{
  flex:1 1 0;
  min-width:150px;
  min-height:62px;
  justify-content:flex-start;
  gap:9px;
  padding:9px 11px;
  border:1px solid transparent;
  border-radius:12px;
  background:var(--surface-soft);
  color:var(--ink);
  text-align:left;
  transition:background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease);
}
#workspaceView .learning-stage:hover:not(.is-vip-locked){
  background:var(--surface);
  border-color:var(--line-strong);
  transform:translateY(-1px);
}
#workspaceView .learning-stage .stage-icon{display:none}
#workspaceView .stage-number{
  width:27px;
  height:27px;
  flex:0 0 27px;
  display:grid;
  place-items:center;
  border:1px solid var(--line-strong);
  border-radius:50%;
  background:var(--surface);
  color:var(--muted-strong);
  font:800 10px var(--font-mono);
}
#workspaceView .stage-copy{
  min-width:0;
  padding:0;
  background:transparent;
  display:grid;
  gap:2px;
}
#workspaceView .stage-copy strong{
  color:inherit;
  font-size:12px;
  line-height:1.15;
  white-space:nowrap;
}
#workspaceView .stage-copy small{
  display:block;
  max-width:130px;
  overflow:hidden;
  color:var(--muted-strong);
  font-size:9px;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#workspaceView .learning-stage.is-active{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--accent-strong,var(--accent));
}
#workspaceView .learning-stage.is-active .stage-number{
  color:var(--ink-inverse);
  background:var(--accent);
  border-color:var(--accent);
  box-shadow:none;
}
#workspaceView .learning-stage.is-complete:not(.is-active) .stage-number{
  color:var(--ink-inverse);
  background:var(--accent);
  border-color:var(--accent);
}

#workspaceView .player-media-shell{
  border-radius:16px;
}
#workspaceView .player-theater-stage{min-height:0}

#workspaceView .workspace-study-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
  padding:10px 12px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
}
#workspaceView .workspace-cue-controls{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
#workspaceView .workspace-cue-controls button,
#workspaceView .workspace-youtube-link{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 11px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface-soft);
  color:var(--ink);
  font:700 10px var(--font-body);
  text-decoration:none;
  cursor:pointer;
}
#workspaceView .workspace-cue-controls button:hover,
#workspaceView .workspace-youtube-link:hover{
  border-color:var(--accent);
  color:var(--accent);
}
#workspaceView .workspace-control-hint{
  max-width:270px;
  color:var(--muted-strong);
  font-size:10px;
  line-height:1.35;
  text-align:right;
}

#workspaceView .workspace-study-rail{
  grid-column:2;
  grid-row:1;
  display:grid;
  gap:12px;
  min-width:0;
  align-content:start;
}
#workspaceView .workspace-rail-card,
#workspaceView .workspace-stage-guide{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:none;
  overflow:hidden;
}
#workspaceView .workspace-kit-progress{padding:16px}
#workspaceView .workspace-kit-progress[hidden],
#workspaceView .workspace-transfer-transcript[hidden]{display:none}
#workspaceView .workspace-kit-progress-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
#workspaceView .workspace-kit-progress-head .eyebrow{margin:0}
#workspaceView .workspace-kit-progress-head strong{color:var(--accent);font:800 18px var(--font-display)}
#workspaceView .workspace-kit-progress h2{margin:7px 0 4px;color:var(--ink);font-size:17px;letter-spacing:-.02em}
#workspaceView .workspace-kit-progress>p{margin:0;color:var(--muted-strong);font-size:11px;line-height:1.4}
#workspaceView .workspace-kit-progress-track{height:6px;margin:13px 0 12px;overflow:hidden;background:var(--line-soft);border-radius:999px}
#workspaceView .workspace-kit-progress-track i{display:block;height:100%;background:var(--accent);border-radius:inherit;transition:width .2s ease}
#workspaceView .workspace-stage-summary{display:grid;gap:7px}
#workspaceView .workspace-stage-status{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;appearance:none;background:var(--surface-soft);border:1px solid var(--line-soft);border-radius:10px;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:border-color .16s ease,background .16s ease,transform .16s ease}
#workspaceView .workspace-stage-status:hover{border-color:rgba(var(--accent-rgb),.48);background:var(--accent-soft);transform:translateY(-1px)}
#workspaceView .workspace-stage-status:focus-visible{outline:3px solid rgba(var(--accent-rgb),.28);outline-offset:2px}
#workspaceView .workspace-stage-status>div{min-width:0}
#workspaceView .workspace-stage-status strong,#workspaceView .workspace-stage-status small{display:block}
#workspaceView .workspace-stage-status strong{color:var(--ink);font-size:11px;line-height:1.25}
#workspaceView .workspace-stage-status small{margin-top:2px;overflow:hidden;color:var(--muted-strong);font-size:9px;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
#workspaceView .workspace-stage-status>span{flex:0 0 auto;color:var(--muted-strong);font-size:9px;font-weight:800;white-space:nowrap}
#workspaceView .workspace-stage-status.is-active{border-color:rgba(var(--accent-rgb),.42);background:var(--accent-soft)}
#workspaceView .workspace-stage-status.is-active>span{color:var(--accent-strong)}
#workspaceView .workspace-stage-status.is-complete>span{color:var(--accent-strong)}
#workspaceView .workspace-stage-status.is-locked{opacity:.58}
#workspaceView .workspace-stage-status.is-extra{margin-top:4px;border-style:dashed;background:color-mix(in srgb,var(--accent-soft) 58%,var(--surface));}
#workspaceView .workspace-stage-status.is-extra strong{color:var(--accent-strong)}
#workspaceView .workspace-stage-status.is-extra>span{color:var(--accent-strong)}
#workspaceView .workspace-rail-tabs{
  display:flex;
  gap:4px;
  padding:8px 8px 0;
  border-bottom:1px solid var(--line);
}
#workspaceView .workspace-rail-tabs button{
  min-height:38px;
  padding:0 13px;
  border:0;
  border-bottom:2px solid transparent;
  background:transparent;
  color:var(--muted-strong);
  font:800 10px var(--font-body);
  cursor:pointer;
}
#workspaceView .workspace-rail-tabs button.is-active{
  color:var(--accent);
  border-bottom-color:var(--accent);
}
#workspaceView .workspace-rail-panel[hidden]{display:none}

#workspaceView .workspace-transcript-card .transcript-panel{
  grid-column:auto;
  max-height:590px;
  margin:0;
  padding:14px;
  border:0;
  border-radius:0;
  background:transparent;
  overflow:auto;
}
#workspaceView .workspace-transcript-card .transcript-header{
  position:sticky;
  top:0;
  z-index:2;
  padding-bottom:9px;
  background:var(--surface);
}
#workspaceView .workspace-transcript-card .transcript-item,
#workspaceView .workspace-transcript-card .cue-row{
  border-radius:10px;
}
#workspaceView .workspace-transcript-card .cue-row.is-active,
#workspaceView .workspace-transcript-card .transcript-item.is-active{
  background:var(--accent-soft);
  border-color:var(--accent);
}

#workspaceView .workspace-insights{
  grid-column:auto;
  grid-row:auto;
  display:grid;
  gap:8px;
  margin:0;
  padding:12px;
}
#workspaceView .workspace-insight-card{
  border:0;
  border-radius:12px;
  background:var(--surface-soft);
}

#workspaceView .workspace-stage-guide{
  padding:15px;
}
#workspaceView .workspace-stage-guide-kicker{
  display:block;
  margin-bottom:6px;
  color:var(--accent);
  font:800 9px var(--font-mono);
  letter-spacing:.08em;
}
#workspaceView .workspace-stage-guide strong{
  display:block;
  margin-bottom:5px;
  color:var(--ink);
  font-size:14px;
}
#workspaceView .workspace-stage-guide p{
  margin:0;
  color:var(--muted-strong);
  font-size:11px;
  line-height:1.5;
}
/* On phones, Your learning path already gives the complete stage state and
   navigation. Keep a single progress reference instead of duplicating it. */
@media(max-width:700px){
  #workspaceView .workspace-stage-guide{display:none}
}
#workspaceView #workspaceNextStageButton{
  width:100%;
  min-height:40px;
  margin-top:12px;
  border:0;
  border-radius:11px;
  background:var(--accent);
  color:var(--ink-inverse);
  font:800 11px var(--font-body);
  cursor:pointer;
}
#workspaceView #workspaceNextStageButton:hover{filter:brightness(.96)}

#workspaceView .study-layout.is-guided-audio-mode{
  grid-template-columns:minmax(0,1fr) 340px;
}
#workspaceView .study-layout.is-guided-audio-mode .workspace-study-rail{display:grid}
#workspaceView .study-layout.is-guided-audio-mode .player-column{grid-column:1;grid-row:1}
#workspaceView .study-layout.is-guided-audio-mode .transcript-panel{
  grid-column:auto;
  grid-row:auto;
  min-height:0;
  max-height:590px;
}
#workspaceView .study-layout.is-guided-audio-mode .player-theater-stage{
  min-height:0;
  aspect-ratio:16/9;
}
#workspaceView .study-layout.is-guided-audio-mode .audio-study-overlay{
  min-height:100%;
  place-content:center;
  padding:clamp(32px,5vw,72px);
}
#workspaceView .study-layout.is-guided-audio-mode .audio-study-overlay .audio-study-en{
  max-width:760px;
  font-size:clamp(1.55em,2.8vw,2.5em);
}
#workspaceView .study-layout.is-guided-audio-mode .audio-study-overlay .audio-study-pt{max-width:660px}

/* Transfer: a compact audio source on the left, with the full new context
   available line by line on the right. */
#workspaceView .study-layout.is-transfer-mode{
  grid-template-columns:minmax(320px,440px) minmax(0,1fr);
  align-items:stretch;
}
#workspaceView .study-layout.is-transfer-mode .player-column,
#workspaceView .study-layout.is-transfer-mode .workspace-study-rail{
  grid-row:1;
}
#workspaceView .study-layout.is-transfer-mode .player-theater-stage{
  min-height:300px;
  aspect-ratio:auto;
}
#workspaceView .study-layout.is-transfer-mode .audio-study-overlay{
  place-content:center;
  padding:28px;
}
#workspaceView .study-layout.is-transfer-mode .audio-study-overlay .audio-study-visual{
  margin-bottom:12px;
}
#workspaceView .study-layout.is-transfer-mode .audio-study-overlay .audio-study-speaker,
#workspaceView .study-layout.is-transfer-mode .audio-study-overlay .audio-study-en,
#workspaceView .study-layout.is-transfer-mode .audio-study-overlay .audio-study-pt{
  display:none;
}
#workspaceView .study-layout.is-transfer-mode .workspace-rail-tabs [data-workspace-rail-tab="progress"]{
  display:none;
}
#workspaceView .study-layout.is-transfer-mode .workspace-transcript-card{
  min-height:100%;
}
#workspaceView .study-layout.is-transfer-mode .workspace-transcript-card .transcript-panel{
  max-height:470px;
}
#workspaceView .transfer-context-intro{
  margin:6px 0 0;
  color:var(--muted-strong);
  font-size:12px;
  line-height:1.45;
}

#workspaceView .materials{margin-top:14px}

@media(max-width:1080px){
  #workspaceView{max-width:980px}
  #workspaceView .study-layout,
  #workspaceView .study-layout.is-guided-audio-mode{grid-template-columns:minmax(0,1fr) 300px}
  #workspaceView .learning-stages{width:calc(100% + 318px)}
  #workspaceView .learning-stage{min-width:132px;padding:8px}
  #workspaceView .stage-copy small{max-width:105px}
}

@media(max-width:900px){
  #workspaceView .study-layout,
  #workspaceView .study-layout.is-guided-audio-mode{grid-template-columns:minmax(0,1fr)}
  #workspaceView .learning-stages{width:100%;margin-bottom:12px}
  #workspaceView .learning-stage{flex:0 0 160px}
  #workspaceView .workspace-study-rail{grid-column:1;grid-row:auto}
  #workspaceView .study-layout.is-transfer-mode{grid-template-columns:minmax(0,1fr)}
  #workspaceView .study-layout.is-transfer-mode .player-column,
  #workspaceView .study-layout.is-transfer-mode .workspace-study-rail{grid-column:1;grid-row:auto}
  #workspaceView .study-layout.is-transfer-mode .player-theater-stage{min-height:240px}
  #workspaceView .workspace-transcript-card .transcript-panel,
  #workspaceView .study-layout.is-guided-audio-mode .transcript-panel{max-height:420px}
  #workspaceView .workspace-insights{grid-template-columns:1fr}
  #workspaceView .workspace-control-hint{display:none}
}

@media(max-width:600px){
  #workspaceView{padding:14px 10px 42px}
  #workspaceView .learning-stages{padding:6px}
  #workspaceView .learning-stage{flex-basis:145px;min-width:145px}
  #workspaceView .workspace-study-controls{align-items:stretch}
  #workspaceView .workspace-cue-controls{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  #workspaceView .workspace-cue-controls button,#workspaceView .workspace-youtube-link{padding:0 6px;font-size:9px}
}

/* Transfer overrides follow the shared responsive player rules. */
#workspaceView .transfer-transcript-modes{display:flex;gap:6px;margin-top:12px}
#workspaceView .transfer-transcript-modes[hidden]{display:none}
#workspaceView .transfer-transcript-modes button{min-height:44px;min-width:48px;padding:8px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:700 14px var(--font-body);cursor:pointer}
#workspaceView .transfer-transcript-modes button[aria-pressed="true"]{background:var(--accent);color:var(--ink-inverse);border-color:var(--accent)}
#workspaceView .is-transfer-mode #transcriptList[data-transfer-language="en"] .cue-pt,
#workspaceView .is-transfer-mode #transcriptList[data-transfer-language="pt"] .cue-en{display:none}
#workspaceView .is-transfer-mode #transcriptList[data-transfer-language="pt"] .cue-pt{font-size:17px;color:var(--ink);margin-top:0}
#workspaceView .is-transfer-mode #transcriptList.is-transcript-obscured{filter:blur(7px);opacity:.24;pointer-events:none;user-select:none;transition:filter .18s ease,opacity .18s ease}
#workspaceView .is-transfer-mode .audio-caption-toggle{display:none}
@media(min-width:901px){
  #workspaceView .study-layout.is-transfer-mode{grid-template-columns:minmax(320px,440px) minmax(0,1fr);container-type:inline-size}
  #workspaceView .is-transfer-mode .learning-stages{width:100cqw;max-width:none}
}
@media(max-width:900px){
  #workspaceView .is-transfer-mode .player-media-shell{position:absolute;width:1px;height:1px;min-height:0;overflow:hidden;opacity:0;pointer-events:none}
  #workspaceView .is-transfer-mode .workspace-study-controls,
  #workspaceView .is-transfer-mode .audio-background-control,
  #workspaceView .is-transfer-mode .materials{display:none}
  #workspaceView .is-transfer-mode .transfer-audio-button{display:flex;align-items:center;justify-content:center;min-height:88px;width:100%;padding:8px;border:0;background:transparent;color:var(--accent);cursor:pointer}
  #workspaceView .transfer-audio-button>span{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--accent);color:var(--ink-inverse);font-size:28px}
  #workspaceView .transfer-audio-button>strong{display:none}
  #workspaceView .is-transfer-mode .transfer-completion{display:grid;gap:3px;margin:0 0 12px;padding:12px 14px;color:var(--ink);background:var(--accent-soft);border:1px solid rgba(var(--accent-rgb),.24);border-radius:12px;text-align:center;animation:transfer-completion-in .32s var(--ease) both}
  #workspaceView .is-transfer-mode .transfer-completion strong{font-size:14px}
  #workspaceView .is-transfer-mode .transfer-completion span{color:var(--muted-strong);font-size:12px}
  #workspaceView .is-transfer-mode .workspace-transcript-card .transcript-panel{max-height:none;overflow:hidden}
  #workspaceView .is-transfer-mode .transcript-list{height:45vh;height:45dvh;min-height:0;max-height:480px;overflow-y:auto;overscroll-behavior-y:contain;scroll-padding-bottom:72px;padding-bottom:72px;touch-action:pan-y;-webkit-overflow-scrolling:touch}
  #workspaceView .is-transfer-mode .transcript-list .cue-row:last-child{margin-bottom:24px}
  #workspaceView .is-transfer-mode .cue-en{font-size:17px}
  #workspaceView .is-transfer-mode .cue-pt{font-size:15px}
}
@keyframes transfer-completion-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* Keep only the audio, language choice and reading content in Transfer. */
#workspaceView .is-transfer-mode .workspace-rail-tabs,
#workspaceView .is-transfer-mode #workspaceTranscriptEyebrow,
#workspaceView .is-transfer-mode #workspaceTranscriptTitle,
#workspaceView .is-transfer-mode #transferContextIntro,
#workspaceView .is-transfer-mode .workspace-stage-guide-kicker,
#workspaceView .is-transfer-mode #workspaceStageGuideTitle,
#workspaceView .is-transfer-mode #workspaceStageGuideText{display:none}
#workspaceView .is-transfer-mode .player-media-shell{position:absolute;width:1px;height:1px;min-height:0;overflow:hidden;opacity:0;pointer-events:none}
#workspaceView .is-transfer-mode .workspace-study-controls,
#workspaceView .is-transfer-mode .audio-background-control,
#workspaceView .is-transfer-mode .materials{display:none}
#workspaceView .is-transfer-mode .transfer-audio-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:310px;width:100%;padding:28px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--accent);cursor:pointer}
#workspaceView .is-transfer-mode .transfer-audio-button>span{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:var(--accent);color:var(--ink-inverse);font-size:32px}
#workspaceView .is-transfer-mode .transfer-audio-button>strong{display:block;font:700 15px var(--font-body)}
#workspaceView .is-transfer-mode .transfer-completion{display:grid;gap:3px;margin:12px 0 0;padding:12px 14px;color:var(--ink);background:var(--accent-soft);border:1px solid rgba(var(--accent-rgb),.24);border-radius:12px;text-align:center;animation:transfer-completion-in .32s var(--ease) both}
#workspaceView .is-transfer-mode .transfer-completion strong{font-size:14px}
#workspaceView .is-transfer-mode .transfer-completion span{color:var(--muted-strong);font-size:12px}
#workspaceView .is-transfer-mode .cue-row-actions{display:none!important}
#workspaceView .is-transfer-mode .cue-row{cursor:default}
#workspaceView .is-transfer-mode .transcript-header h2::after{display:none}
#workspaceView .is-transfer-mode .transfer-transcript-modes{display:flex;flex:1;gap:8px;margin:0;justify-content:center}
#workspaceView .is-transfer-mode .transfer-transcript-modes button{min-width:58px;min-height:38px;padding:6px 12px;font-size:12px}
#workspaceView .is-transfer-mode .transcript-header{display:flex;justify-content:center;padding:0 0 10px;position:sticky;top:0;z-index:3;background:var(--surface)}
#workspaceView .is-transfer-mode .workspace-stage-guide{display:none}

/* Workspace V3.6.1 · transfer transcript controls + per-cue playback */
#workspaceView .transfer-transcript-modes .transfer-transcript-label{
  align-self:center;
  margin-right:2px;
  color:var(--muted);
  font:700 11px var(--font-body);
  letter-spacing:.08em;
  text-transform:uppercase;
}
#workspaceView .cue-row{
  position:relative;
}
#workspaceView .cue-row .cue-play-inline{
  grid-column:1;
  justify-self:center;
  align-self:start;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  margin-top:23px;
  padding:0;
  border:1px solid rgba(var(--accent-rgb),.22);
  border-radius:999px;
  background:rgba(var(--accent-rgb),.08);
  color:var(--accent-strong);
  font:800 12px/1 var(--font-body);
  cursor:pointer;
  transition:transform .15s ease,background .15s ease,border-color .15s ease;
  z-index:2;
}
#workspaceView .cue-row .cue-play-inline:hover{
  transform:scale(1.06);
  background:rgba(var(--accent-rgb),.15);
  border-color:rgba(var(--accent-rgb),.4);
}
#workspaceView .cue-row .cue-play-inline.is-playing{
  background:var(--accent);
  color:var(--ink-inverse);
  border-color:var(--accent);
}
#workspaceView .is-transfer-mode .cue-row.is-active{
  box-shadow:inset 3px 0 0 var(--accent);
}
@media (max-width:700px){
  #workspaceView .transfer-transcript-modes .transfer-transcript-label{display:none}
  #workspaceView .cue-row .cue-play-inline{width:34px;height:34px;margin-top:21px}
}

#workspaceView .is-transfer-mode .cue-row{
  grid-template-columns:47px 34px minmax(0,1fr);
  column-gap:8px;
}
#workspaceView .is-transfer-mode .cue-row .cue-time{grid-column:1}
#workspaceView .is-transfer-mode .cue-row .cue-play-inline{
  grid-column:2;
  margin-top:0;
  align-self:center;
}
#workspaceView .is-transfer-mode .cue-row .cue-content-box{grid-column:3}


/* Workspace V3.6.2 · shared Text + Audio speed control */
#workspaceView .transfer-speed-control{display:none}
#workspaceView .is-transfer-mode .transfer-speed-control{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin:10px 0 14px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
#workspaceView .transfer-speed-control>span{margin-right:4px;color:var(--muted);font:700 11px var(--font-body);letter-spacing:.08em;text-transform:uppercase}
#workspaceView .transfer-speed-control button{min-width:48px;min-height:38px;padding:6px 9px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);font:700 12px var(--font-body);cursor:pointer}
#workspaceView .transfer-speed-control button.is-active{background:var(--accent);border-color:var(--accent);color:var(--ink-inverse)}
@media(max-width:600px){#workspaceView .transfer-speed-control{gap:4px}#workspaceView .transfer-speed-control button{min-width:44px;padding:6px}}

/* V3.6.3 · Text + Audio is an independent entry point, not a learning-stage screen. */
#workspaceView.is-textaudio-entry .workspace-progress-row,
#workspaceView.is-textaudio-entry #learningStages,
#workspaceView.is-textaudio-entry .player-experience-heading,
#workspaceView.is-textaudio-entry .workspace-stage-guide,
#workspaceView.is-textaudio-entry [data-workspace-rail-tab="progress"] { display:none !important; }
#workspaceView.is-textaudio-entry .workspace-header-v4{padding-bottom:12px}
#workspaceView.is-textaudio-entry .workspace-kit-badge{display:none}
#workspaceView.is-textaudio-entry .workspace-title p{display:none}
#workspaceView.is-textaudio-entry .workspace-divider{margin-top:0}
#workspaceView.is-textaudio-entry .workspace-rail-tabs{display:none}

/* Subtitle mode must be unmistakably visible in both Transfer and standalone Text + Audio. */
#workspaceView .is-transfer-mode .transfer-transcript-modes{
  display:flex !important; align-items:center; gap:6px; flex-wrap:wrap; margin-top:10px;
  padding:6px; width:max-content; max-width:100%; border:1px solid var(--line); border-radius:11px; background:var(--surface);
}
#workspaceView .is-transfer-mode .transfer-transcript-modes[hidden]{display:flex !important}
#workspaceView .transfer-transcript-modes .transfer-transcript-label{font:700 10px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:0 4px}
#workspaceView .transfer-transcript-modes button{min-width:48px;min-height:34px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:800 11px var(--font-body);cursor:pointer}
#workspaceView .transfer-transcript-modes button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--ink-inverse)}

#workspaceView .transfer-support-material{display:none;align-items:center;justify-content:center;gap:8px;min-height:44px;margin:0 0 14px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--accent);font:800 12px var(--font-body);text-decoration:none}
#workspaceView .is-transfer-mode .transfer-support-material:not([hidden]){display:flex}
#workspaceView .transfer-support-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}

/* V3.6.14 · Workspace Transfer adopts the approved Text + Audio study language.
   This is a real Workspace stage, so the 1–6 learning path remains visible. */
#workspaceView .study-layout.is-transfer-mode{
  grid-template-columns:minmax(300px,360px) minmax(0,1fr);
  gap:18px;
  align-items:start;
}
#workspaceView .study-layout.is-transfer-mode .player-column{
  position:sticky;
  top:calc(var(--desktop-nav-h) + 18px);
  min-width:0;
  padding:22px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
}
#workspaceView .study-layout.is-transfer-mode .player-experience{
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
}
#workspaceView .is-transfer-mode .player-experience-heading{display:none}
#workspaceView .is-transfer-mode .transfer-player-heading{
  display:grid;
  gap:6px;
  margin:0 0 14px;
  padding:0 0 14px;
  border-bottom:1px solid var(--line-soft);
  text-align:center;
}
#workspaceView .is-transfer-mode .transfer-player-heading[hidden]{display:none}
#workspaceView .is-transfer-mode .transfer-player-heading span{
  color:var(--accent-strong);
  font-size:10px;
  font-weight:850;
  letter-spacing:.12em;
}
#workspaceView .is-transfer-mode .transfer-player-heading strong{
  overflow:hidden;
  color:var(--ink);
  font-size:14px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#workspaceView .is-transfer-mode .transfer-audio-button{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:160px;
  width:100%;
  padding:20px;
  border:0;
  border-radius:14px;
  background:var(--surface-soft);
  color:var(--accent);
  cursor:pointer;
}
#workspaceView .is-transfer-mode .transfer-audio-button::before{
  content:"";
  display:block;
  width:min(100%,250px);
  height:56px;
  margin-bottom:4px;
  border-radius:12px;
  background:
    linear-gradient(90deg,transparent 0 4%,rgba(var(--accent-rgb),.14) 4% 6%,transparent 6% 10%,rgba(var(--accent-rgb),.2) 10% 12%,transparent 12% 16%,rgba(var(--accent-rgb),.28) 16% 18%,transparent 18% 22%,rgba(var(--accent-rgb),.36) 22% 24%,transparent 24% 28%,rgba(var(--accent-rgb),.52) 28% 30%,transparent 30% 34%,rgba(var(--accent-rgb),.68) 34% 36%,transparent 36% 40%,var(--accent) 40% 43%,transparent 43% 47%,rgba(var(--accent-rgb),.72) 47% 49%,transparent 49% 54%,rgba(var(--accent-rgb),.55) 54% 56%,transparent 56% 62%,rgba(var(--accent-rgb),.38) 62% 64%,transparent 64% 70%,rgba(var(--accent-rgb),.28) 70% 72%,transparent 72% 78%,rgba(var(--accent-rgb),.2) 78% 80%,transparent 80% 86%,rgba(var(--accent-rgb),.14) 86% 88%,transparent 88% 100%);
  opacity:.95;
}
#workspaceView .is-transfer-mode .transfer-audio-button>span{
  width:58px;
  height:58px;
  font-size:22px;
}
#workspaceView .is-transfer-mode .transfer-audio-button>strong{
  display:block;
  color:var(--accent-strong);
  font-size:13px;
}
#workspaceView .is-transfer-mode .transfer-speed-control{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin:16px 0 0;
  padding:16px 0 0;
  border:0;
  border-top:1px solid var(--line-soft);
  border-radius:0;
  background:transparent;
}
#workspaceView .is-transfer-mode .transfer-speed-control>span{
  margin:0;
  color:var(--muted-strong);
  font-size:10px;
  font-weight:850;
}
#workspaceView .is-transfer-mode .transfer-speed-control button{
  min-width:0;
  min-height:40px;
  border-radius:10px;
  background:var(--surface-soft);
}
#workspaceView .is-transfer-mode .transfer-speed-control{
  grid-template-columns:repeat(5,minmax(0,1fr));
}
#workspaceView .is-transfer-mode .transfer-speed-control>span{grid-column:1/-1}
#workspaceView .is-transfer-mode .transfer-support-material:not([hidden]){
  display:flex;
  min-height:50px;
  margin:18px 0 0;
  color:var(--accent-strong);
  background:var(--accent-soft);
  border-color:rgba(var(--accent-rgb),.24);
}
#workspaceView .study-layout.is-transfer-mode .workspace-study-rail{
  min-width:0;
}
#workspaceView .study-layout.is-transfer-mode .workspace-transcript-card{
  min-height:0;
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
}
#workspaceView .study-layout.is-transfer-mode .workspace-transcript-card .transcript-panel{
  max-height:none;
}
#workspaceView .is-transfer-mode .workspace-rail-tabs{display:none}
#workspaceView .is-transfer-mode #workspaceTranscriptEyebrow{display:none}
#workspaceView .is-transfer-mode #workspaceTranscriptTitle,
#workspaceView .is-transfer-mode #transferContextIntro{display:block}
#workspaceView .is-transfer-mode .transcript-header{
  position:sticky;
  top:0;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:16px 18px;
  background:var(--surface);
  border-bottom:1px solid var(--line-soft);
}
#workspaceView .is-transfer-mode .transcript-header>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  width:100%;
}
#workspaceView .is-transfer-mode .transcript-header h2{
  margin:0;
  color:var(--ink);
  font-size:14px;
}
#workspaceView .is-transfer-mode .transfer-context-intro{
  margin:3px 0 0;
  color:var(--muted);
  font-size:11px;
}
#workspaceView .is-transfer-mode .transfer-transcript-modes,
#workspaceView .is-transfer-mode .transfer-transcript-modes[hidden]{
  display:flex !important;
  flex:0 0 auto;
  gap:5px;
  width:auto;
  margin:0;
  padding:3px;
  background:var(--surface-soft);
  border:1px solid var(--line);
  border-radius:12px;
}
#workspaceView .is-transfer-mode .transfer-transcript-modes .transfer-transcript-label{display:none}
#workspaceView .is-transfer-mode .transfer-transcript-modes button{
  min-width:64px;
  min-height:38px;
  padding:0 12px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:var(--ink-soft);
  font-size:12px;
  font-weight:850;
}
#workspaceView .is-transfer-mode .transfer-transcript-modes button[aria-pressed="true"]{
  color:var(--ink-inverse);
  background:var(--accent);
  border-color:var(--accent);
}
#workspaceView .is-transfer-mode .transcript-list{
  height:auto;
  min-height:360px;
  max-height:560px;
  padding:0 18px 12px;
  overflow-y:auto;
}
#workspaceView .is-transfer-mode .cue-row{
  grid-template-columns:48px minmax(0,1fr);
  gap:14px;
  padding:18px 4px;
  border-bottom:1px solid var(--line-soft);
  background:transparent;
}
#workspaceView .is-transfer-mode .cue-row .cue-time{
  grid-column:2;
  margin:0 0 6px;
}
#workspaceView .is-transfer-mode .cue-row .cue-play-inline{
  grid-column:1;
  grid-row:1 / span 3;
  align-self:start;
  width:42px;
  height:42px;
  margin-top:16px;
}
#workspaceView .is-transfer-mode .cue-row .cue-content-box{
  grid-column:2;
}
#workspaceView .is-transfer-mode .cue-row.is-active{
  margin-inline:-18px;
  padding-inline:22px;
  background:linear-gradient(90deg,var(--accent-soft),transparent);
  box-shadow:inset 3px 0 0 var(--accent);
}
#workspaceView .is-transfer-mode .cue-en{
  color:var(--ink);
  font-family:var(--font-display);
  font-size:16px;
  font-weight:800;
  line-height:1.45;
}
#workspaceView .is-transfer-mode .cue-pt{
  margin-top:5px;
  color:var(--muted-strong);
  font-size:14px;
  line-height:1.5;
}

@media(max-width:900px){
  #workspaceView .study-layout.is-transfer-mode{grid-template-columns:1fr;gap:12px}
  #workspaceView .study-layout.is-transfer-mode .player-column{position:static;grid-column:1;grid-row:auto}
  #workspaceView .study-layout.is-transfer-mode .workspace-study-rail{grid-column:1;grid-row:auto}
  #workspaceView .is-transfer-mode .transcript-header>div{align-items:stretch;flex-direction:column}
  #workspaceView .is-transfer-mode .transfer-transcript-modes{width:100%}
  #workspaceView .is-transfer-mode .transfer-transcript-modes button{flex:1;min-width:0}
  #workspaceView .is-transfer-mode .transcript-list{max-height:none}
}
@media(max-width:600px){
  #workspaceView .study-layout.is-transfer-mode .player-column{padding:16px}
  #workspaceView .is-transfer-mode .transfer-speed-control{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
  #workspaceView .is-transfer-mode .transfer-speed-control button{padding-inline:3px;font-size:11px}
  #workspaceView .is-transfer-mode .transcript-list{padding-inline:12px}
  #workspaceView .is-transfer-mode .cue-row{grid-template-columns:40px minmax(0,1fr);gap:10px;padding-block:15px}
  #workspaceView .is-transfer-mode .cue-row .cue-play-inline{width:36px;height:36px;margin-top:15px}
  #workspaceView .is-transfer-mode .cue-en{font-size:15px}
  #workspaceView .is-transfer-mode .cue-pt{font-size:13px}
}

/* V3.6.15 working · Workspace stage rail belongs to normal page flow.
   The learning path is a sibling above study-layout, never a child of player-column. */
#workspaceView .learning-stages{
  width:100%;
  max-width:none;
  position:relative;
  z-index:auto;
  margin:0 0 14px;
}
@media(min-width:901px){
  #workspaceView .learning-stages{width:100%;max-width:none}
  #workspaceView .study-layout.is-transfer-mode{container-type:normal}
  #workspaceView .is-transfer-mode .learning-stages{width:100%;max-width:none}
}

/* PT-only must carry the same reading hierarchy as EN-only.
   DUAL typography is deliberately untouched. */
#workspaceView .is-transfer-mode #transcriptList[data-transfer-language="pt"] .cue-pt{
  margin-top:0;
  color:var(--ink);
  font-family:var(--font-display);
  font-size:16px;
  font-weight:800;
  line-height:1.45;
}
@media(max-width:600px){
  #workspaceView .is-transfer-mode #transcriptList[data-transfer-language="pt"] .cue-pt{
    font-size:15px;
  }
}

/* V3.6.16 · Mobile Transfer compact sticky player + vocabulary action. */
#workspaceView .transfer-explanation-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:16px;
}
#workspaceView .transfer-explanation-actions .primary-button{
  min-height:42px;
}

@media(max-width:700px){
  /* The player is a compact persistent study toolbar on mobile. */
  #workspaceView .study-layout.is-transfer-mode{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }
  #workspaceView .study-layout.is-transfer-mode .player-column{
    position:sticky;
    top:calc(var(--mobile-nav-h, 64px) + 4px);
    z-index:12;
    grid-column:1;
    grid-row:auto;
    padding:10px 12px;
    border-radius:14px;
    box-shadow:0 6px 18px rgba(15,42,45,.08);
  }
  #workspaceView .is-transfer-mode .player-experience{
    display:block;
  }
  #workspaceView .is-transfer-mode .transfer-player-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin:0 0 8px;
    padding:0 0 8px;
    text-align:left;
  }
  #workspaceView .is-transfer-mode .transfer-player-heading span{
    display:none;
  }
  #workspaceView .is-transfer-mode .transfer-player-heading strong{
    min-width:0;
    font-size:12px;
  }
  #workspaceView .is-transfer-mode .transfer-audio-button{
    position:absolute;
    top:8px;
    right:10px;
    width:40px;
    min-height:40px;
    height:40px;
    padding:0;
    border:0;
    border-radius:999px;
    background:var(--accent);
  }
  #workspaceView .is-transfer-mode .transfer-audio-button::before,
  #workspaceView .is-transfer-mode .transfer-audio-button>strong{
    display:none;
  }
  #workspaceView .is-transfer-mode .transfer-audio-button>span{
    width:40px;
    height:40px;
    font-size:16px;
    background:transparent;
  }
  #workspaceView .is-transfer-mode .transfer-speed-control{
    display:flex;
    align-items:center;
    gap:4px;
    margin:0;
    padding:0;
    border:0;
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
  }
  #workspaceView .is-transfer-mode .transfer-speed-control::-webkit-scrollbar{display:none}
  #workspaceView .is-transfer-mode .transfer-speed-control>span{
    flex:0 0 auto;
    margin-right:2px;
    font-size:9px;
  }
  #workspaceView .is-transfer-mode .transfer-speed-control button{
    flex:0 0 auto;
    min-width:44px;
    min-height:32px;
    padding:4px 7px;
    font-size:10px;
    border-radius:8px;
  }
  #workspaceView .is-transfer-mode .transfer-support-material:not([hidden]){
    min-height:34px;
    margin:8px 0 0;
    padding:5px 9px;
    font-size:10px;
  }
  #workspaceView .is-transfer-mode .transfer-completion{display:none}

  /* Transcript gets the majority of the viewport and owns vertical scrolling. */
  #workspaceView .study-layout.is-transfer-mode .workspace-study-rail{
    min-height:0;
  }
  #workspaceView .study-layout.is-transfer-mode .workspace-transcript-card{
    min-height:0;
  }
  #workspaceView .is-transfer-mode .workspace-transcript-card .transcript-panel{
    display:flex;
    flex-direction:column;
    min-height:0;
    max-height:none;
    overflow:hidden;
  }
  #workspaceView .is-transfer-mode .transcript-header{
    position:sticky;
    top:0;
    flex:0 0 auto;
    padding:10px 12px;
  }
  #workspaceView .is-transfer-mode .transcript-header>div{
    gap:8px;
  }
  #workspaceView .is-transfer-mode .transcript-header h2{font-size:12px}
  #workspaceView .is-transfer-mode .transfer-context-intro{font-size:10px}
  #workspaceView .is-transfer-mode .transfer-transcript-modes button{
    min-height:34px;
    font-size:11px;
  }
  #workspaceView .is-transfer-mode .transcript-list{
    height:calc(100dvh - 305px);
    min-height:320px;
    max-height:none;
    overflow-y:auto;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
    padding-bottom:96px;
  }
}

/* Final mobile transfer composition. These controls are outside the scrolling
   cue pane, so normal positioning keeps them fixed without sticky overlap. */
@media(max-width:700px){
  #workspaceView .study-layout.is-transfer-mode{gap:0}
  #workspaceView .study-layout.is-transfer-mode .player-column{
    grid-template-areas:
      "heading play"
      "speed speed"
      "language language"
      "support support";
    padding:9px 11px;
    border-radius:14px 14px 0 0;
    box-shadow:none;
  }
  #workspaceView .study-layout.is-transfer-mode .workspace-transcript-card{
    border-top:0;
    border-radius:0 0 14px 14px;
  }
  #workspaceView .is-transfer-mode .transcript-header{
    position:relative;
    top:auto;
    padding:8px 11px 10px;
    border-top:1px solid var(--line-soft);
    border-right:0;
    border-bottom:1px solid var(--line-soft);
    border-left:0;
    border-radius:0;
  }
  #workspaceView .is-transfer-mode .transcript-header h2,
  #workspaceView .is-transfer-mode .transfer-context-intro{display:none}
  #workspaceView .is-transfer-mode .transfer-transcript-modes{gap:4px;width:100%}
  #workspaceView .is-transfer-mode .player-column>.transfer-transcript-modes,
  #workspaceView .is-transfer-mode .player-experience>.transfer-transcript-modes{
    grid-area:language;
    margin:0;
  }
  #workspaceView .study-layout.has-mobile-transfer-controls .transcript-header{display:none}
  #workspaceView .is-transfer-mode .transcript-list{
    height:clamp(340px,60dvh,680px);
    max-height:calc(100dvh - 264px);
    padding-bottom:88px;
  }
}

/* Mobile parity with the standalone Text + Audio reader: the compact audio
   dock and subtitle selector read as one fixed unit while cues scroll. */
@media(max-width:700px){
  #workspaceView .study-layout.is-transfer-mode{gap:0}
  #workspaceView .study-layout.is-transfer-mode .player-column{
    top:calc(var(--mobile-nav-h,64px) + 4px);
    padding:9px 11px;
    border-radius:14px 14px 0 0;
    box-shadow:none;
  }
  #workspaceView .is-transfer-mode .transfer-player-heading strong{
    font-size:13px;
    line-height:1.2;
  }
  #workspaceView .is-transfer-mode .transfer-audio-button{
    width:42px;
    min-height:42px;
    height:42px;
  }
  #workspaceView .is-transfer-mode .transfer-audio-button>span{
    width:42px;
    height:42px;
    font-size:16px;
  }
  #workspaceView .is-transfer-mode .transfer-speed-control{
    padding-top:7px;
  }
  #workspaceView .is-transfer-mode .transfer-speed-control button{
    min-height:31px;
    font-size:10px;
  }
  #workspaceView .study-layout.is-transfer-mode .workspace-transcript-card{
    border-top:0;
    border-radius:0 0 14px 14px;
  }
  #workspaceView .is-transfer-mode .transcript-header{
    position:relative;
    top:auto;
    padding:8px 11px 10px;
    border-top:1px solid var(--line-soft);
    border-right:0;
    border-bottom:1px solid var(--line-soft);
    border-left:0;
    border-radius:0;
  }
  #workspaceView .is-transfer-mode .transcript-header h2,
  #workspaceView .is-transfer-mode .transfer-context-intro{display:none}
  #workspaceView .is-transfer-mode .transfer-transcript-modes{gap:4px;width:100%}
  #workspaceView .is-transfer-mode .transfer-transcript-modes button{
    min-height:34px;
    font-size:11px;
  }
  #workspaceView .is-transfer-mode .transcript-list{
    height:clamp(340px,60dvh,680px);
    max-height:calc(100dvh - 264px);
    padding-bottom:88px;
  }
}

/* V3.6.17 · Mobile Transfer sticky study chrome refinement.
   Keep the compact player and subtitle controls visible while the cue list scrolls. */
@media(max-width:700px){
  #workspaceView .study-layout.is-transfer-mode{
    gap:8px;
  }

  /* Compact sticky player. The play control stays in layout flow, never floating over speed buttons. */
  #workspaceView .study-layout.is-transfer-mode .player-column{
    position:sticky;
    top:calc(var(--mobile-nav-h, 64px) + 6px);
    z-index:14;
    display:grid;
    grid-template-columns:minmax(0,1fr) 42px 44px;
    grid-template-areas:
      "heading support play"
      "speed speed speed";
    gap:8px 10px;
    padding:10px 12px;
  }
  #workspaceView .is-transfer-mode .player-experience{
    display:contents;
  }
  #workspaceView .is-transfer-mode .transfer-player-heading{
    grid-area:heading;
    align-self:center;
    margin:0;
    padding:0;
    border:0;
  }
  #workspaceView .is-transfer-mode .transfer-player-heading strong{
    font-size:14px;
    line-height:1.25;
  }
  #workspaceView .is-transfer-mode .transfer-audio-button{
    grid-area:play;
    position:static;
    align-self:center;
    justify-self:end;
    width:44px;
    min-height:44px;
    height:44px;
    padding:0;
    border-radius:999px;
  }
  #workspaceView .is-transfer-mode .transfer-audio-button::before,
  #workspaceView .is-transfer-mode .transfer-audio-button>strong{
    display:none;
  }
  #workspaceView .is-transfer-mode .transfer-audio-button>span{
    width:44px;
    height:44px;
    font-size:18px;
  }
  #workspaceView .is-transfer-mode .transfer-speed-control{
    grid-area:speed;
    display:grid;
    grid-template-columns:auto repeat(5,minmax(0,1fr));
    align-items:center;
    gap:4px;
    overflow:visible;
    padding-top:8px;
    border-top:1px solid var(--line-soft);
  }
  #workspaceView .is-transfer-mode .transfer-speed-control>span{
    grid-column:auto;
    margin-right:4px;
    font-size:9px;
  }
  #workspaceView .is-transfer-mode .transfer-speed-control button{
    min-width:0;
    width:100%;
    min-height:34px;
    padding:4px 2px;
    color:var(--ink);
    background:var(--surface-soft);
    border:1px solid var(--line);
  }
#workspaceView .is-transfer-mode .transfer-speed-control button.is-active{
  color:#fff !important;
  background:var(--accent) !important;
  border-color:var(--accent) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}

/* Keep the selected playback speed legible after all compact-player overrides. */
#workspaceView .is-transfer-mode .transfer-speed-control button.is-active{
  color:#fff !important;
  background:var(--accent) !important;
  border-color:var(--accent) !important;
  text-shadow:none;
}
  #workspaceView .is-transfer-mode .transfer-support-material:not([hidden]){
    grid-area:support;
    width:42px;
    min-height:42px;
    height:42px;
    margin:0;
    padding:0;
    border-radius:12px;
  }
  #workspaceView .is-transfer-mode .transfer-support-material strong{display:none}
  #workspaceView .is-transfer-mode .transfer-support-icon{width:20px;height:20px}

  /* Subtitle header remains visible below the compact player while cues scroll. */
  #workspaceView .study-layout.is-transfer-mode .workspace-study-rail{
    min-height:0;
  }
  #workspaceView .study-layout.is-transfer-mode .workspace-transcript-card{
    min-height:0;
    overflow:hidden;
  }
  #workspaceView .is-transfer-mode .workspace-transcript-card .transcript-panel{
    display:flex;
    flex-direction:column;
    min-height:0;
    overflow:hidden;
    isolation:isolate;
  }
  #workspaceView .is-transfer-mode .transcript-header{
    position:sticky;
    top:calc(var(--mobile-nav-h, 64px) + 124px);
    z-index:13;
    padding:10px 12px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:12px 12px 0 0;
  }
  #workspaceView .is-transfer-mode .transcript-list{
    height:clamp(340px,56dvh,680px);
    min-height:0;
    max-height:calc(100dvh - 300px);
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
    padding-bottom:96px;
    touch-action:pan-y;
    background:var(--surface);
  }
}

/* Final mobile transfer composition. Playback and language controls sit
   outside the internally scrolling cue list, preventing overlap. */
@media(max-width:700px){
  #workspaceView .study-layout.is-transfer-mode{gap:0}
  #workspaceView .study-layout.is-transfer-mode .player-column{
    grid-template-columns:minmax(0,1fr) 42px 44px;
    grid-template-areas:
      "heading support play"
      "speed speed speed"
      "language language language";
    padding:9px 11px;
    border-radius:14px 14px 0 0;
    box-shadow:none;
  }
  #workspaceView .study-layout.is-transfer-mode .workspace-transcript-card{
    border-top:0;
    border-radius:0 0 14px 14px;
  }
  #workspaceView .is-transfer-mode .transcript-header{
    position:relative;
    top:auto;
    padding:8px 11px 10px;
    border-top:1px solid var(--line-soft);
    border-right:0;
    border-bottom:1px solid var(--line-soft);
    border-left:0;
    border-radius:0;
  }
  #workspaceView .is-transfer-mode .transcript-header h2,
  #workspaceView .is-transfer-mode .transfer-context-intro{display:none}
  #workspaceView .is-transfer-mode .transfer-transcript-modes{gap:4px;width:100%}
  #workspaceView .is-transfer-mode .player-experience>.transfer-transcript-modes{
    grid-area:language;
    margin:0;
  }
  #workspaceView .is-transfer-mode .transfer-support-material:not([hidden]){
    grid-area:support;
    width:42px;
    min-height:42px;
    height:42px;
    margin:0;
    padding:0;
    border-radius:12px;
  }
  #workspaceView .is-transfer-mode .transfer-support-material strong{display:none}
  #workspaceView .is-transfer-mode .transfer-support-icon{width:20px;height:20px}
  #workspaceView .study-layout.has-mobile-transfer-controls .transcript-header{display:none}
  #workspaceView .is-transfer-mode .transcript-list{
    height:clamp(340px,60dvh,680px);
    max-height:calc(100dvh - 264px);
    padding-bottom:88px;
  }
}
/* Subtitle Challenge pilot */
.subtitle-challenge-launch {
  border: 1px solid color-mix(in srgb, var(--ink, #12252a) 18%, transparent);
  background: #f9f6ef;
  color: #124f51;
  border-radius: 999px;
  font: 700 0.75rem/1.1 var(--font-sans, Inter, sans-serif);
  padding: 0.62rem 0.8rem;
  white-space: nowrap;
}

.subtitle-challenge-dialog {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgb(7 22 25 / 68%);
  backdrop-filter: blur(8px);
}

.subtitle-challenge-card {
  position: relative;
  width: min(100%, 620px);
  max-height: min(720px, calc(100vh - 2rem));
  overflow: auto;
  padding: clamp(1.35rem, 3vw, 2.25rem);
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: 24px;
  background: #fffdf8;
  box-shadow: 0 24px 80px rgb(0 0 0 / 30%);
  color: #10272a;
}
.subtitle-challenge-card.game-result-correct { animation: game-correct 420ms ease-out; }
.subtitle-challenge-card.game-result-wrong { animation: game-wrong 320ms ease-out; }
@keyframes game-correct {
  0% { box-shadow: 0 24px 80px rgb(0 0 0 / 30%); }
  45% { box-shadow: 0 0 0 4px rgb(38 172 128 / 22%), 0 24px 80px rgb(0 0 0 / 25%); }
  100% { box-shadow: 0 24px 80px rgb(0 0 0 / 30%); }
}
@keyframes game-wrong {
  0%, 100% { transform: translateX(0); }
  28% { transform: translateX(-4px); }
  62% { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .subtitle-challenge-card.game-result-correct,
  .subtitle-challenge-card.game-result-wrong { animation: none; }
}

.subtitle-challenge-card h2 { margin: 0.35rem 2.25rem 0 0; font-size: clamp(1.7rem, 4vw, 2.35rem); letter-spacing: -0.055em; }
.game-suite-grid { display: grid; gap: 0.65rem; margin-top: 1.35rem; }
.game-suite-section { margin: 0.45rem 0 -0.15rem; color: #648085; font: 800 0.68rem/1 var(--font-mono, monospace); letter-spacing: .11em; text-transform: uppercase; }
.game-suite-option { display: grid; grid-template-columns: 2.3rem 1fr; gap: 0.15rem 0.75rem; align-items: center; padding: 0.95rem; border: 1px solid #dce5df; border-radius: 14px; background: #fff; color: #143236; text-align: left; transition: transform 160ms ease, border-color 160ms ease, background 160ms ease; }
.game-suite-option-featured { grid-template-columns: 2.6rem 1fr; padding: 1.1rem; border-color: #e4ae46; background: linear-gradient(130deg, #fff9e8, #effaf5); box-shadow: 0 10px 24px rgb(14 83 70 / 12%); }
.game-suite-option-featured span { width: 2.6rem; height: 2.6rem; background: #f1b942; color: #173539; }
.game-suite-option strong { display: flex; align-items: center; gap: .45rem; }
.game-suite-option strong em { padding: .22rem .38rem; border-radius: 999px; background: #173539; color: #fff5d8; font: 800 .58rem/1 var(--font-mono, monospace); font-style: normal; letter-spacing: .07em; text-transform: uppercase; }
.game-suite-option:hover { transform: translateY(-2px); border-color: #3aa491; background: #f1faf6; }
.game-suite-option span { grid-row: span 2; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 9px; background: #dbf1ea; color: #087c72; font: 800 0.72rem/1 var(--font-mono, monospace); }
.game-suite-option strong { font-size: 0.96rem; }.game-suite-option small { color: #60757a; font-weight: 600; }
.subtitle-challenge-intro { margin: 0.35rem 0 1rem; color: #597075; }
.subtitle-challenge-close { position: absolute; top: 1rem; right: 1rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: #edf2ee; color: #10272a; font-size: 1.5rem; }
.subtitle-challenge-return { display: inline-flex; align-items: center; gap: .35rem; min-height: 2rem; margin: -.3rem 0 .55rem; padding: .35rem .55rem; border: 0; border-radius: 8px; background: transparent; color: #527075; font: 800 .7rem/1 var(--font-sans, Inter, sans-serif); }
.subtitle-challenge-return:hover { background: #edf5f1; color: #087b70; }
.subtitle-challenge-score { display: inline-block; padding: 0.4rem 0.65rem; border-radius: 999px; background: #e2f4ef; color: #08796f; font: 700 0.72rem/1 var(--font-mono, monospace); }
.subtitle-challenge-prompt { margin: 1.25rem 0 0.8rem; font-weight: 700; font-size: 1.05rem; }
.subtitle-challenge-listen, .subtitle-challenge-check, .subtitle-challenge-secondary { min-height: 2.75rem; padding: 0.65rem 1rem; border-radius: 10px; font: 800 0.82rem/1 var(--font-sans, Inter, sans-serif); }
.subtitle-challenge-listen, .subtitle-challenge-check { border: 0; background: #0d8f88; color: #fff; }
.subtitle-challenge-listen { margin-bottom: 1rem; }
.game-audio-speed { display:flex; align-items:center; gap:.28rem; margin:-.45rem 0 1rem; color:#6b8285; font:800 .62rem/1 var(--font-mono, monospace); text-transform:uppercase; letter-spacing:.07em; }
.game-audio-speed button { min-width:2.65rem; padding:.35rem .38rem; border:1px solid #d5e2dc; border-radius:999px; background:#fff; color:#547176; font:800 .66rem/1 var(--font-sans, Inter, sans-serif); }
.game-audio-speed button.is-active { border-color:#168f83; background:#e1f5ee; color:#08766d; }
.subtitle-challenge-answer, .subtitle-challenge-bank { display: flex; min-height: 3.6rem; flex-wrap: wrap; gap: 0.48rem; align-content: center; padding: 0.7rem; border-radius: 12px; }
.subtitle-challenge-answer { border: 1px dashed #82aaa3; background: #eff8f4; }
.subtitle-challenge-bank { margin-top: 0.65rem; border: 1px solid #e5e4dc; }
.subtitle-challenge-token { border: 1px solid #d5ded9; border-radius: 8px; background: #fff; color: #153136; padding: 0.54rem 0.64rem; font-weight: 700; cursor: grab; touch-action: manipulation; }
.subtitle-challenge-token.is-selected { background: #cceee4; border-color: #68b8a8; }
.subtitle-challenge-token.is-dragging { opacity: 0.38; cursor: grabbing; }
.subtitle-challenge-answer:has(.is-dragging), .subtitle-challenge-bank:has(.is-dragging) { outline: 2px solid #63b8a9; outline-offset: 2px; }
.subtitle-challenge-feedback { min-height: 1.35rem; margin: 0.9rem 0; color: #587074; font-weight: 650; }
.subtitle-challenge-feedback[data-state="success"] { color: #087b5f; }
.subtitle-challenge-feedback[data-state="error"] { color: #aa542a; }
.quick-challenge-prompt { margin: 1.25rem 0 0.8rem; padding: 1rem; border-left: 4px solid #40a891; background: #eff8f4; border-radius: 0 10px 10px 0; font-size: clamp(1.12rem, 2.5vw, 1.45rem); font-weight: 800; line-height: 1.35; }
.quick-challenge-choices { display: grid; gap: 0.55rem; }
.quick-challenge-choice { width: 100%; padding: 0.8rem 0.9rem; border: 1px solid #d7e0db; border-radius: 10px; background: #fff; color: #153136; font: 700 0.94rem/1.35 var(--font-sans, Inter, sans-serif); text-align: left; }
.quick-challenge-choice:hover:not(:disabled) { border-color: #159989; background: #ecf9f5; }.quick-challenge-choice:disabled { opacity: 0.62; }
.subtitle-challenge-actions { display: flex; justify-content: flex-end; gap: 0.65rem; }
.subtitle-challenge-actions[hidden] { display: none; }
.subtitle-challenge-secondary { border: 1px solid #d5ddd8; background: transparent; color: #315356; }
.subtitle-challenge-check:disabled { opacity: 0.45; cursor: not-allowed; }

@media (max-width: 640px) {
  .subtitle-challenge-launch { width: 100%; margin-top: 0.35rem; }
  .subtitle-challenge-actions { flex-direction: column-reverse; }
  .subtitle-challenge-actions button { width: 100%; }
  .subtitle-challenge-return span { font-size: .72rem; }
}