/* =========================================================
   IMMERSIONHUB — PLAYER SYSTEM
   Player, workspace, transcript and playback controls.
   Synchronization remains in player.js.
   ========================================================= */

/* Workspace ------------------------------------------------ */
.workspace-view {
  width:min(calc(100% - 28px),1540px);
  max-width:1540px;
  padding-top:8px;
}
.workspace-header {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(230px,300px);
  grid-template-areas:
    "kicker kicker"
    "title progress";
  gap:8px 24px;
  align-items:center;
  padding:5px 2px 10px;
}
.workspace-header::before { display:none; }
.workspace-kicker-row {
  grid-area:kicker;
  min-height:34px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 2px;
}
.workspace-back-link {
  min-height:34px;
  display:inline-flex;
  align-items:center;
  padding:0;
  color:var(--muted-strong);
  background:transparent;
  border:0;
  font-size:.7em;
  font-weight:780;
  cursor:pointer;
}
.workspace-back-link:hover { color:var(--accent-strong); }
.workspace-back-link:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:4px; }
.workspace-kit-badge { margin-left:2px; }
.workspace-mobile-intro { display:none; }
.workspace-mobile-intro-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.workspace-learning-path-anchor{display:none}
.workspace-library-action { margin-left:auto; }
.workspace-title {
  grid-area:title;
  min-width:0;
  margin:0;
}
.workspace-title h1 {
  max-width:980px;
  margin:0;
  color:var(--ink);
  font-size:clamp(1.4em,2.1vw,2em);
  font-weight:780;
  line-height:1.06;
  letter-spacing:-.042em;
}
.workspace-title .mode-description {
  max-width:760px;
  margin:4px 0 0;
  color:var(--muted-strong);
  font-size:.7em;
  line-height:1.45;
}
.workspace-progress-row {
  grid-area:progress;
  width:100%;
  margin:0;
  padding:10px 12px;
  background:rgba(255,253,248,.92);
  border:1px solid rgba(203,203,194,.82);
  border-radius:12px;
  box-shadow:none;
}
.workspace-progress-labels {
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:7px;
  color:var(--muted);
  font-size:.5em;
  font-weight:820;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.workspace-progress-labels strong { color:var(--ink); font:800 1.2em var(--font-mono); }
.workspace-progress-track { height:5px; overflow:hidden; background:#e2ded4; border-radius:var(--r-pill); }
.workspace-progress-track i { display:block; height:100%; background:linear-gradient(90deg,var(--accent),#50b7ad 62%,var(--gold)); border-radius:inherit; transition:width .4s var(--ease); }
.workspace-divider { height:1px; margin:0 2px 10px; background:linear-gradient(90deg,var(--line),rgba(217,216,208,.35),transparent); }
.study-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:28px; align-items:start; width:100%; }
.player-column { min-width:0; width:100%; max-width:none; }
.transcript-panel { min-width:0; }

/* Player shell --------------------------------------------- */
/* The player is the visual anchor of Workspace. The outer experience is intentionally
   quiet; navigation, media and transport read as one continuous component. */
.player-experience {
  --experience-color:var(--ink);
  --experience-bg:transparent;
  --experience-border:transparent;
  --experience-shadow:none;
  --experience-kicker:var(--accent-strong);
  --experience-heading:var(--ink);
  --experience-muted:var(--muted);
  --mode-line:var(--line);
  --mode-color:var(--muted-strong);
  --mode-small:var(--muted);
  --mode-hover-color:var(--ink);
  --mode-hover-bg:rgba(var(--accent-rgb),.06);
  --mode-active-color:#fff;
  --mode-active-small:#c7dfda;
  --stage-line:var(--line);
  --stage-color:var(--muted-strong);
  --stage-bg:transparent;
  --stage-border:transparent;
  --stage-hover-border:transparent;
  --stage-hover-bg:rgba(255,255,255,.6);
  --stage-active-color:var(--ink);
  --stage-active-border:transparent;
  --stage-active-bg:#fff;
  --stage-active-shadow:0 2px 8px rgba(17,32,39,.08);
  --stage-number-color:var(--muted);
  --stage-number-bg:rgba(255,255,255,.68);
  --stage-number-border:rgba(203,203,194,.8);
  --stage-copy-small:var(--muted);
  --stage-active-small:var(--muted-strong);
  --tool-label:var(--player-muted);
  --tool-color:var(--player-muted);
  --tool-hover-color:var(--player-text);
  --tool-hover-bg:var(--player-3);
  --tool-active-color:#fff;
  --tool-active-bg:var(--accent);
  --tool-active-border:var(--accent);
  --player-frame-aspect:16 / 9;
  --player-theater-height:512px;
  --player-control-height:27px;
  --player-control-font:.66667em;
  --player-play-width:38px;
  position:relative;
  overflow:visible;
  width:100%;
  max-width:none;
  padding:0;
  color:var(--experience-color);
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.player-experience::before,
.player-experience::after { display:none; }
/* The Workspace title above already supplies context. Removing this duplicate heading
   gives the media surface priority without deleting any semantic/player content. */
.player-experience-heading { display:none; }

/* Mode selector -------------------------------------------- */
.lesson-mode-tabs {
  position:relative;
  display:flex;
  gap:8px;
  margin:0 0 9px;
  padding:0;
  border:0;
  background:transparent;
}
.lesson-mode-tab {
  position:relative;
  min-width:0;
  min-height:48px;
  flex:1 1 0;
  display:grid;
  align-content:center;
  gap:2px;
  padding:7px 14px;
  color:var(--mode-color);
  background:rgba(255,253,248,.86);
  border:1px solid var(--line);
  border-radius:12px;
  text-align:center;
  cursor:pointer;
  transition:color .16s ease,background .16s ease,border-color .16s ease,transform .16s var(--ease);
}
.lesson-mode-tab::after { display:none; }
.lesson-mode-tab span { overflow:hidden; font-size:15px; font-weight:820; line-height:1.15; text-overflow:ellipsis; white-space:nowrap; }
.lesson-mode-tab small { overflow:hidden; color:var(--mode-small); font-size:11px; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.lesson-mode-tab:hover { color:var(--mode-hover-color); background:#fff; border-color:var(--line-strong); transform:translateY(-1px); }
.lesson-mode-tab.is-active { color:var(--mode-active-color); background:var(--ink); border-color:var(--ink); box-shadow:0 7px 18px rgba(17,32,39,.10); }
.lesson-mode-tab.is-active small { color:var(--mode-active-small); }

/* Practice session ----------------------------------------- */
.practice-session {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:0 0 9px;
  padding:9px 11px;
  color:var(--ink);
  background:#edf3f1;
  border:1px solid rgba(var(--accent-rgb),.16);
  border-radius:11px;
}
.practice-session-copy { min-width:0; display:flex; align-items:center; gap:10px; }
.practice-session-copy .eyebrow { color:var(--accent-strong); font-size:10px; white-space:nowrap; }
.practice-session-copy strong { font-size:13px; white-space:nowrap; }
.practice-session-copy small { overflow:hidden; color:var(--muted); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.practice-stop-button { flex:0 0 auto; min-height:32px; padding:0 13px; color:#fff; background:#a84d4d; border:1px solid rgba(255,255,255,.1); border-radius:9px; font-size:11px; font-weight:800; }
.player-column.is-practice-mode .learning-stages { display:none; }

/* Learning stages ------------------------------------------ */
.learning-stages {
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:4px;
  margin:0 0 9px;
  padding:4px;
  background:#efede6;
  border:1px solid rgba(203,203,194,.76);
  border-radius:12px;
}
.learning-stages::before { display:none; }
.learning-stage {
  position:relative;
  z-index:var(--z-base);
  min-width:0;
  min-height:48px;
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  align-items:center;
  gap:8px;
  padding:5px 8px;
  color:var(--stage-color);
  background:var(--stage-bg);
  border:1px solid var(--stage-border);
  border-radius:9px;
  box-shadow:none;
  line-height:16px;
  text-align:left;
  transition:background .16s ease,color .16s ease,box-shadow .16s ease;
}
.learning-stage:hover { transform:none; border-color:var(--stage-hover-border); background:var(--stage-hover-bg); }
.learning-stage.is-active { color:var(--stage-active-color); border-color:var(--stage-active-border); background:var(--stage-active-bg); box-shadow:var(--stage-active-shadow); }
.stage-icon { display:none; }
.stage-number {
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  color:var(--stage-number-color);
  background:var(--stage-number-bg);
  border:1px solid var(--stage-number-border);
  border-radius:8px;
  font:800 10px var(--font-mono);
  transition:color .16s ease,background .16s ease,border-color .16s ease;
}
.learning-stage.is-active .stage-number { color:#fff; background:var(--accent); border-color:var(--accent); box-shadow:none; }
.stage-copy { min-width:0; display:grid; gap:1px; }
.stage-copy strong { overflow:hidden; font-size:13px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.stage-copy small { overflow:hidden; color:var(--stage-copy-small); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.learning-stage.is-active .stage-copy small { color:var(--stage-active-small); }

/* Video surface -------------------------------------------- */
.player-media-shell {
  position:relative;
  width:100%;
  min-width:0;
  margin-inline:auto;
  overflow:hidden;
  background:linear-gradient(180deg,var(--player),var(--player-2));
  border:0;
  border-radius:14px;
  box-shadow:0 18px 46px rgba(3,10,13,.24);
  isolation:isolate;
}
.player-theater-stage { width:100%; aspect-ratio:var(--player-frame-aspect); overflow:hidden; background:#020405; }
.player-media-shell:fullscreen,
.player-media-shell:-webkit-full-screen {
  width:100vw;
  height:100vh;
  min-width:100vw;
  min-height:100vh;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  align-items:stretch;
  padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
  background:#05090b;
  border:0;
  border-radius:0;
}
.player-media-shell:fullscreen .player-theater-stage,
.player-media-shell:-webkit-full-screen .player-theater-stage { height:auto; min-height:0; aspect-ratio:auto; }
.player-media-shell:fullscreen .video-frame,
.player-media-shell:-webkit-full-screen .video-frame { width:100%; height:100%; min-height:0; }
.player-media-shell:fullscreen .player-transport-slot,
.player-media-shell:-webkit-full-screen .player-transport-slot { width:100%; margin:0; }
.video-frame { position:relative; overflow:hidden; width:100%; height:100%; background:#020405; border:0; border-radius:0; box-shadow:none; isolation:isolate; }
.video-frame::after { content:""; position:absolute; inset:0; z-index:var(--z-raised); background:linear-gradient(180deg,rgba(0,0,0,.01),transparent 64%,rgba(0,0,0,.12)); pointer-events:none; }
#simpleYouTubePlayer { position:relative; z-index:var(--z-base); width:100%; height:100%; border:0; }
.video-click-shield { position:absolute; inset:0; z-index:var(--z-raised); background:transparent; }
.player-column.is-shadowing-mode .video-click-shield {
  z-index:65;
  pointer-events:auto;
  touch-action:none;
  cursor:default;
}
.player-column.is-shadowing-mode #videoSeek { pointer-events:none; }
.player-column.is-shadowing-mode #workspaceStudyControls { display:none; }
.youtube-play-button { position:absolute; z-index:var(--z-player-controls); top:50%; left:50%; width:68px; height:48px; padding:0; overflow:visible; opacity:1; transform:translate(-50%,-50%); background:transparent; border:0; border-radius:12px; cursor:pointer; filter:drop-shadow(0 2px 5px rgba(0,0,0,.28)); transition:opacity .16s ease,transform .12s ease,filter .12s ease; }
.youtube-play-button:hover { transform:translate(-50%,-50%) scale(1.04); filter:drop-shadow(0 3px 7px rgba(0,0,0,.36)); }
.youtube-play-button:focus-visible { outline:3px solid #fff; outline-offset:4px; }
.youtube-play-button.is-playing { opacity:0; }
.youtube-play-button.is-playing.is-controls-visible { opacity:1; }
.youtube-play-button svg { display:block; width:100%; height:100%; }
.youtube-play-button-bg { fill:#f00; }
.youtube-play-button-icon,.youtube-pause-button-icon { fill:#fff; }
.youtube-pause-button-icon { display:none; }
.youtube-play-button.is-playing .youtube-play-button-icon { display:none; }
.youtube-play-button.is-playing .youtube-pause-button-icon { display:block; }
.video-replay-button { position:absolute; z-index:calc(var(--z-player-controls) + 1); top:50%; left:50%; display:inline-flex; align-items:center; gap:10px; transform:translate(-50%,-50%); padding:13px 20px; border:1px solid rgba(255,255,255,.28); border-radius:999px; color:#fff; background:rgba(5,18,14,.9); font:700 14px/1.1 var(--font-sans); cursor:pointer; backdrop-filter:blur(8px); }
.video-replay-button[hidden] { display:none; }
.video-replay-button:hover { background:#17b37a; border-color:#17b37a; }
.video-replay-button span { font-size:22px; line-height:1; }
.video-status { position:absolute; z-index:var(--z-player-controls); top:11px; left:11px; min-height:26px; display:inline-flex; align-items:center; padding:0 10px; color:#f7e6b7; background:rgba(7,13,16,.62); border:1px solid rgba(255,255,255,.08); border-radius:var(--r-pill); font:800 10px var(--font-mono); letter-spacing:.05em; backdrop-filter:blur(10px); }
.video-player-message { position:absolute; inset:0; z-index:var(--z-player-dock); display:grid; place-items:center; padding:28px; color:#d8e0e1; background:var(--player-deep); text-align:center; font-size:.73333em; }

/* Subtitles ------------------------------------------------ */
.video-subtitles { position:absolute; z-index: var(--z-workspace-layer); left:5.5%; right:5.5%; bottom:7%; text-align:center; pointer-events:none; transition:opacity .16s ease,transform .2s var(--ease); }
.video-subtitles.is-hidden { opacity:0; transform:translateY(8px); }
.video-subtitle-speaker { width:fit-content; margin:0 auto 7px; padding:4px 9px; color:#c9d3d5; background:rgba(3,6,8,.58); border:1px solid rgba(255,255,255,.08); border-radius:var(--r-pill); font-size:.46667em; font-weight:800; letter-spacing:.08em; text-transform:uppercase; backdrop-filter:blur(8px); }
.video-subtitle-en { width:fit-content; max-width:100%; margin:0 auto; padding:7px 10px; color:#fbfdfd; background:rgba(3,6,8,.74); border-radius:10px; box-decoration-break:clone; -webkit-box-decoration-break:clone; font-size:clamp(1.33333em,2.2vw,2.26667em); font-weight:740; line-height:1.48; letter-spacing:-.028em; text-shadow:0 2px 9px rgba(0,0,0,.34); backdrop-filter:blur(6px); }
.video-subtitle-pt { width:fit-content; max-width:88%; margin:8px auto 0; padding:5px 9px; color:#d4dddf; background:rgba(3,6,8,.58); border-radius:8px; font-size:clamp(.73333em,1.15vw,1.06667em); line-height:1.35; }
.video-subtitle-speaker:empty,.video-subtitle-en:empty,.video-subtitle-pt:empty { display:none; }
.video-subtitles.mode-en-only .video-subtitle-pt { display:none; }
.video-subtitles.mode-pt-only .video-subtitle-en { display:none; }
.video-subtitles.mode-pt-only .video-subtitle-pt { max-width:100%; margin:0 auto; padding:7px 10px; color:#fbfdfd; background:rgba(3,6,8,.74); border-radius:10px; font-size:clamp(1.33333em,2.2vw,2.26667em); font-weight:740; line-height:1.48; letter-spacing:-.028em; text-shadow:0 2px 9px rgba(0,0,0,.34); backdrop-filter:blur(6px); }
.video-subtitle-en .subtitle-word,.video-subtitle-pt .subtitle-word,.audio-study-en .subtitle-word,.audio-study-pt .subtitle-word,.video-subtitle-en .subtitle-punctuation,.video-subtitle-pt .subtitle-punctuation,.audio-study-en .subtitle-punctuation,.audio-study-pt .subtitle-punctuation { display:inline-block; margin:0 .065em; opacity:.43; transform-origin:center bottom; transition:opacity .1s linear,color .1s linear,transform .13s var(--ease),text-shadow .13s ease; }
.video-subtitle-en .subtitle-word.is-sung,.video-subtitle-pt .subtitle-word.is-sung,.audio-study-en .subtitle-word.is-sung,.audio-study-pt .subtitle-word.is-sung { opacity:.80; }
.video-subtitle-en .subtitle-word.is-active,.video-subtitle-pt .subtitle-word.is-active,.audio-study-en .subtitle-word.is-active,.audio-study-pt .subtitle-word.is-active { opacity:1; color:#f4cf72; font-weight:900; transform:translateY(-2px) scale(1.025); text-shadow:0 0 18px rgba(244,207,114,.24); animation:subtitle-word-hop .2s var(--ease) both; }
.video-subtitle-en .subtitle-punctuation.is-active,.video-subtitle-pt .subtitle-punctuation.is-active,.audio-study-en .subtitle-punctuation.is-active,.audio-study-pt .subtitle-punctuation.is-active { opacity:1; color:#f4cf72; font-weight:900; }
.video-subtitle-en .subtitle-punctuation,.video-subtitle-pt .subtitle-punctuation,.audio-study-en .subtitle-punctuation,.audio-study-pt .subtitle-punctuation { margin:0; }
.video-subtitle-en .subtitle-practice-highlight,.audio-study-en .subtitle-practice-highlight { color:#52d6b2; font-weight:900; text-shadow:0 0 16px rgba(82,214,178,.22); }
.video-subtitle-en .subtitle-word.subtitle-practice-highlight { opacity:1; }
.video-subtitle-en .subtitle-practice-highlight.is-cue-pause-highlight { display:inline-block; animation:subtitle-practice-recall .48s cubic-bezier(.22,.61,.36,1) both; }
@keyframes subtitle-word-hop { 0% { transform:translateY(0) scale(.985); } 48% { transform:translateY(-5px) scale(1.055); } 100% { transform:translateY(-2px) scale(1.025); } }
/* Per-kit caption treatments. Each also styles the complete cue when Word by Word is off. */
body[data-subtitle-style="karaoke"] .video-subtitle-en { color:#fff; background:rgba(2,16,18,.92); border:1px solid rgba(83,227,189,.55); box-shadow:0 4px 20px rgba(0,0,0,.48); }
body[data-subtitle-style="karaoke"] .video-subtitle-en .subtitle-word { opacity:.67; }
body[data-subtitle-style="karaoke"] .video-subtitle-en .subtitle-word.is-active,
body[data-subtitle-style="karaoke"] .video-subtitle-pt .subtitle-word.is-active,
body[data-subtitle-style="karaoke"] .audio-study-en .subtitle-word.is-active,
body[data-subtitle-style="karaoke"] .audio-study-pt .subtitle-word.is-active { color:#64f2cb; transform:translateY(-1px) scale(1.045); text-shadow:0 0 20px rgba(83,227,189,.55); animation:subtitle-word-karaoke .28s var(--ease) both; }
body[data-subtitle-style="pop"] .video-subtitle-en { color:#fff; background:rgba(28,5,18,.94); border:1px solid rgba(255,129,184,.78); box-shadow:0 4px 22px rgba(0,0,0,.52); }
body[data-subtitle-style="pop"] .video-subtitle-en .subtitle-word { opacity:.7; }
body[data-subtitle-style="pop"] .video-subtitle-en .subtitle-word.is-active,
body[data-subtitle-style="pop"] .video-subtitle-pt .subtitle-word.is-active,
body[data-subtitle-style="pop"] .audio-study-en .subtitle-word.is-active,
body[data-subtitle-style="pop"] .audio-study-pt .subtitle-word.is-active { color:#fff; background:#c83d78; border-radius:.22em; padding:0 .12em; margin-left:0; margin-right:0; transform:translateY(-3px) scale(1.075) rotate(-1deg); text-shadow:0 1px 2px rgba(0,0,0,.72); animation:subtitle-word-pop .3s cubic-bezier(.18,.89,.32,1.28) both; }
body[data-subtitle-style="focus"] .video-subtitle-en { color:#fff; background:rgba(3,6,8,.92); border-left:4px solid #f4cf72; border-radius:4px; box-shadow:0 4px 20px rgba(0,0,0,.54); }
body[data-subtitle-style="focus"] .video-subtitle-en .subtitle-word,
body[data-subtitle-style="focus"] .video-subtitle-pt .subtitle-word,
body[data-subtitle-style="focus"] .audio-study-en .subtitle-word,
body[data-subtitle-style="focus"] .audio-study-pt .subtitle-word { opacity:.3; }
body[data-subtitle-style="focus"] .video-subtitle-en .subtitle-word.is-active,
body[data-subtitle-style="focus"] .video-subtitle-pt .subtitle-word.is-active,
body[data-subtitle-style="focus"] .audio-study-en .subtitle-word.is-active,
body[data-subtitle-style="focus"] .audio-study-pt .subtitle-word.is-active { color:#f4cf72; transform:scale(1.11); text-shadow:0 0 22px rgba(244,207,114,.46); animation:subtitle-word-focus .22s var(--ease) both; }
body[data-subtitle-style="box"] .video-subtitle-en { color:#071315; background:#fff; border:3px solid #071315; border-radius:0; box-shadow:0 4px 18px rgba(0,0,0,.56); font-weight:850; text-shadow:none; }
body[data-subtitle-style="box"] .video-subtitle-en .subtitle-word { color:#24302f; opacity:.72; }
body[data-subtitle-style="box"] .video-subtitle-en .subtitle-word.is-active,
body[data-subtitle-style="box"] .video-subtitle-pt .subtitle-word.is-active,
body[data-subtitle-style="box"] .audio-study-en .subtitle-word.is-active,
body[data-subtitle-style="box"] .audio-study-pt .subtitle-word.is-active { color:#071315; background:#f4cf72; border-radius:.14em; opacity:1; transform:translateY(-2px) scale(1.045); text-shadow:none; animation:subtitle-word-box .22s var(--ease) both; }
body[data-subtitle-style="underline"] .video-subtitle-en { color:#fff; background:rgba(3,6,8,.93); border-bottom:5px solid #f4cf72; border-radius:5px; box-shadow:0 4px 20px rgba(0,0,0,.55); }
body[data-subtitle-style="underline"] .video-subtitle-en .subtitle-word { opacity:.7; }
body[data-subtitle-style="underline"] .video-subtitle-en .subtitle-word.is-active,
body[data-subtitle-style="underline"] .video-subtitle-pt .subtitle-word.is-active,
body[data-subtitle-style="underline"] .audio-study-en .subtitle-word.is-active,
body[data-subtitle-style="underline"] .audio-study-pt .subtitle-word.is-active { color:#fff; opacity:1; text-decoration:underline 4px #f4cf72; text-underline-offset:.2em; transform:translateY(-1px); text-shadow:0 0 16px rgba(244,207,114,.36); animation:subtitle-word-underline .23s var(--ease) both; }
body[data-subtitle-style="cinema"] .video-subtitle-en { color:#fff; background:rgba(0,0,0,.96); border-radius:1px; box-shadow:0 4px 20px rgba(0,0,0,.7); letter-spacing:.005em; }
body[data-subtitle-style="cinema"] .video-subtitle-en .subtitle-word { opacity:.74; }
body[data-subtitle-style="cinema"] .video-subtitle-en .subtitle-word.is-active,
body[data-subtitle-style="cinema"] .video-subtitle-pt .subtitle-word.is-active,
body[data-subtitle-style="cinema"] .audio-study-en .subtitle-word.is-active,
body[data-subtitle-style="cinema"] .audio-study-pt .subtitle-word.is-active { color:#fff; opacity:1; transform:none; text-shadow:0 1px 7px rgba(0,0,0,.8); animation:none; }
/* Translation-only mode has no English caption element, so it receives the same
   full-cue treatment and remains readable when Word by Word is disabled. */
body[data-subtitle-style="karaoke"] .video-subtitles.mode-pt-only .video-subtitle-pt { color:#fff; background:rgba(2,16,18,.92); border:1px solid rgba(83,227,189,.55); }
body[data-subtitle-style="pop"] .video-subtitles.mode-pt-only .video-subtitle-pt { color:#fff; background:rgba(28,5,18,.94); border:1px solid rgba(255,129,184,.78); }
body[data-subtitle-style="focus"] .video-subtitles.mode-pt-only .video-subtitle-pt { color:#fff; background:rgba(3,6,8,.92); border-left:4px solid #f4cf72; border-radius:4px; }
body[data-subtitle-style="box"] .video-subtitles.mode-pt-only .video-subtitle-pt { color:#071315; background:#fff; border:3px solid #071315; border-radius:0; font-weight:850; text-shadow:none; }
body[data-subtitle-style="underline"] .video-subtitles.mode-pt-only .video-subtitle-pt { color:#fff; background:rgba(3,6,8,.93); border-bottom:5px solid #f4cf72; border-radius:5px; }
body[data-subtitle-style="cinema"] .video-subtitles.mode-pt-only .video-subtitle-pt { color:#fff; background:rgba(0,0,0,.96); border-radius:1px; letter-spacing:.005em; }
@keyframes subtitle-word-karaoke { 0% { transform:translateX(-.08em) scale(.98); filter:brightness(.8); } 100% { transform:translateY(-1px) scale(1.045); filter:brightness(1.16); } }
@keyframes subtitle-word-pop { 0% { transform:translateY(3px) scale(.68) rotate(2deg); } 72% { transform:translateY(-4px) scale(1.11) rotate(-1deg); } 100% { transform:translateY(-3px) scale(1.075) rotate(-1deg); } }
@keyframes subtitle-word-focus { 0% { transform:scale(.92); opacity:.45; } 100% { transform:scale(1.11); opacity:1; } }
@keyframes subtitle-word-box { 0% { transform:translateY(1px) scale(.92); } 100% { transform:translateY(-2px) scale(1.045); } }
@keyframes subtitle-word-underline { 0% { text-decoration-color:transparent; transform:translateY(1px); } 100% { text-decoration-color:#f4cf72; transform:translateY(-1px); } }
@keyframes subtitle-practice-recall { 0%,100% { transform:translateY(0) scale(1); } 48% { transform:translateY(-6px) scale(1.065); color:#8af0d7; text-shadow:0 0 24px rgba(82,214,178,.52); } }
@media (prefers-reduced-motion:reduce) { .video-subtitle-en .subtitle-practice-highlight.is-cue-pause-highlight { animation:none; } }

/* Canonical transport slot ---------------------------------- */
.player-transport-slot {
  width:100%;
  margin:0;
  padding:10px 14px 9px;
  background:linear-gradient(180deg,var(--player-2),var(--player));
  border-top:1px solid var(--player-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.player-transport-slot[aria-hidden="true"] { display:none; }

/* Playback dock -------------------------------------------- */
.player-controls {
  width:100%;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 48px;
  grid-template-rows:20px 34px auto;
  align-items:center;
  gap:6px 8px;
  margin:0;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.player-controls .control-btn,
.player-controls .primary-button.compact {
  min-width:0;
  min-height:var(--player-control-height);
  height:var(--player-control-height);
  padding:0 8px;
  border-radius:var(--r-pill);
  font-size:var(--player-control-font);
  font-weight:820;
  box-shadow:none;
}
.player-controls .control-btn { color:var(--player-text); background:var(--player-3); border:1px solid var(--player-line); }
.player-controls .control-btn:hover { color:var(--player-text); background:#1b343a; border-color:rgba(255,255,255,.18); }
.player-controls .primary-button.compact { color:#fff; background:var(--accent); border:1px solid var(--accent); box-shadow:0 4px 12px rgba(var(--accent-rgb),.16); }
.player-controls .primary-button.compact:hover { color:#fff; background:var(--accent-strong); border-color:var(--accent-strong); }
#videoCurrentTime { grid-column:1; grid-row:1; justify-self:start; }
#videoSeek { grid-column:2; grid-row:1; position:static; width:100%; min-width:0; height:20px; }
#videoDuration { grid-column:3; grid-row:1; justify-self:end; }
#videoBackButton { grid-column:1; grid-row:2; justify-self:center; }
#videoPlayButton { grid-column:2; grid-row:2; width:var(--player-play-width); justify-self:center; }
.player-column.is-shadowing-mode #videoPlayButton,
.player-column.is-shadowing-mode #youtubePlayButton {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
#videoForwardButton { grid-column:3; grid-row:2; justify-self:center; }
.time-display { color:var(--player-muted); font:10px var(--font-mono); font-variant-numeric:tabular-nums; text-align:center; }
.seek-range { --seek-progress:0%; width:100%; height:20px; margin:0; background:transparent; accent-color:var(--player-progress-end); cursor:pointer; }
.seek-range::-webkit-slider-runnable-track { height:3px; background:linear-gradient(90deg,var(--player-progress-start) 0,var(--player-progress-end) var(--seek-progress),var(--player-progress-rest) var(--seek-progress),var(--player-progress-rest) 100%); border-radius:var(--r-pill); box-shadow:0 0 10px var(--player-progress-glow); }
.seek-range::-webkit-slider-thumb { margin-top:-5px; }
.seek-range::-moz-range-track { height:3px; background:var(--player-progress-rest); border-radius:var(--r-pill); }
.seek-range::-moz-range-progress { height:3px; background:linear-gradient(90deg,var(--player-progress-start),var(--player-progress-end)); border-radius:var(--r-pill); box-shadow:0 0 10px var(--player-progress-glow); }
.player-tools { grid-column:1/-1; grid-row:3; display:flex; justify-content:center; align-items:center; margin:0; padding:1px 0 0; background:transparent; border:0; }
.speed-control { display:flex; align-items:center; gap:4px; }
.speed-control>span { margin-right:6px; color:var(--player-muted); font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.speed-control button { min-width:42px; min-height:27px; height:27px; padding:0 7px; color:var(--player-muted); background:transparent; border:1px solid transparent; border-radius:8px; font-size:11px; }
.speed-control button:hover { color:var(--player-text); background:var(--player-3); }
.speed-control button.is-active { color:#fff; background:var(--accent); border-color:var(--accent); }
.workspace-fullscreen-button{display:inline-grid;place-items:center;width:28px;height:28px;margin-left:8px;padding:0;color:var(--player-muted);background:transparent;border:1px solid transparent;border-radius:8px;cursor:pointer}.workspace-fullscreen-button:hover,.workspace-fullscreen-button.is-active{color:var(--player-text);background:var(--player-3);border-color:var(--player-line)}.workspace-fullscreen-button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* Audio / practice overlays -------------------------------- */
.audio-study-overlay,
.connected-speech-overlay,
.shadowing-repeat-overlay {
  position: absolute;
  inset: 0;
  z-index: var(--z-player-overlay);
  display: grid;
  place-content: center;
  padding: clamp(24px,5vw,64px);
  color: var(--player-text);
  background: rgba(8,13,16,.94);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.audio-study-overlay.is-active,
.connected-speech-overlay.is-active,
.shadowing-repeat-overlay.is-active { opacity: 1; }

.audio-study-visual {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-bottom: 14px;
}
.audio-study-visual span {
  width: 4px;
  height: 10px;
  background: #e0bc68;
  border-radius: 4px;
  animation: audio-bars .75s ease-in-out infinite alternate;
}
.audio-study-visual span:nth-child(2) { height: 24px; animation-delay: -.2s; }
.audio-study-visual span:nth-child(3) { height: 32px; animation-delay: -.4s; }
.audio-study-visual span:nth-child(4) { height: 18px; animation-delay: -.1s; }
.audio-study-visual span:nth-child(5) { height: 27px; animation-delay: -.35s; }
@keyframes audio-bars { to { transform: scaleY(.45); opacity: .45; } }

.audio-study-eyebrow,
.connected-speech-overlay-eyebrow,
.shadowing-repeat-eyebrow {
  color: #839497;
  font-size: .5em;
  font-weight: 820;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.audio-study-speaker { margin-top: 8px; color: #cbd5d6; font-size: .6em; }
.audio-study-en {
  max-width: 840px;
  margin: 11px auto 0;
  font-size: clamp(1.53333em,3.4vw,3.2em);
  font-weight: 750;
  line-height: 1.18;
  letter-spacing: -.03em;
}
.audio-study-pt {
  max-width: 720px;
  margin: 11px auto 0;
  color: var(--player-copy-muted);
  font-size: clamp(.8em,1.4vw,1.2em);
}

.connected-speech-overlay {
  background:
    radial-gradient(circle at 50% 0, rgba(var(--accent-rgb),.16), transparent 40%),
    rgba(8,13,16,.96);
}
.connected-speech-overlay-type {
  width: fit-content;
  margin: 10px auto 0;
  padding: 4px 8px;
  color: #a9d9d4;
  background: rgba(var(--accent-rgb),.16);
  border: 1px solid rgba(73,170,161,.16);
  border-radius: var(--r-pill);
  font-size: .53333em;
}
.connected-speech-overlay-focus {
  max-width: 820px;
  margin: 12px auto 0;
  font-size: clamp(1.86667em,4vw,3.6em);
  line-height: 1.1;
}
.connected-speech-overlay-pronunciation { margin-top: 8px; color: #e9c978; font: .8em var(--font-mono); }
.connected-speech-overlay-explanation,
.connected-speech-overlay-practice { max-width: 720px; margin: 11px auto 0; color: var(--player-copy-muted); font-size: .73333em; }
.connected-speech-overlay-countdown,
.shadowing-repeat-countdown { margin-top: 20px; color: #fff; font: 700 2.8em var(--font-mono); }
.shadowing-repeat-overlay { background: rgba(8,13,16,.96); }
.shadowing-repeat-overlay.is-pause-plan {
  background:rgba(3,8,10,.48);
  -webkit-backdrop-filter:blur(18px) brightness(.58);
  backdrop-filter:blur(18px) brightness(.58);
}
.shadowing-repeat-overlay.is-pause-plan {
  transition: opacity 200ms ease-out;
}
/* Keep the pause appearance during fade-out; playback itself is never delayed. */
.shadowing-repeat-overlay[aria-hidden="true"] { pointer-events:none; }
.video-frame #simpleYouTubePlayer { transition:filter 200ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  .shadowing-repeat-overlay,
  .shadowing-repeat-overlay.is-pause-plan,
  .video-frame #simpleYouTubePlayer,
  .word-study-progress b { transition:none!important; }
}
.shadowing-repeat-overlay.is-pause-plan.is-visible {
  grid-template-columns:minmax(0,1fr);
  align-content:center;
  justify-items:center;
  gap:clamp(18px,3.2vh,30px);
  padding:clamp(28px,5vw,64px) clamp(22px,7vw,88px);
  pointer-events:auto;
}
.shadowing-repeat-overlay.is-pause-plan .shadowing-repeat-eyebrow,
.shadowing-repeat-overlay.is-pause-plan .shadowing-repeat-instruction,
.shadowing-repeat-overlay.is-pause-plan .shadowing-repeat-subtitle { display:none; }
.shadowing-repeat-instruction { max-width: 760px; margin: 12px auto 0; font-size: clamp(1.86667em,4vw,3.46667em); }
.shadowing-repeat-cues {
  width:min(820px,100%);
  max-height:42vh;
  margin:18px auto 0;
  padding:14px 18px;
  overflow:auto;
  background:rgba(5,8,10,.38);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  backdrop-filter:blur(4px);
}
.shadowing-repeat-overlay.is-pause-plan .shadowing-repeat-cues {
  order:1;
  width:min(960px,100%);
  max-height:none;
  margin:0;
  padding:0;
  overflow:visible;
  background:transparent;
  border:0;
  border-radius:0;
  backdrop-filter:none;
}
.shadowing-repeat-cue {
  margin:0;
  color:#fff;
  font-size:clamp(1em,2vw,1.46667em);
  font-weight:720;
  line-height:1.35;
  text-wrap:balance;
}
.shadowing-repeat-overlay.is-pause-plan .shadowing-repeat-cue {
  font-size:clamp(1.4em,3vw,2.66667em);
  font-weight:760;
  line-height:1.18;
  letter-spacing:-.025em;
  text-shadow:0 3px 16px rgba(0,0,0,.6);
}
.shadowing-repeat-overlay.is-complete .shadowing-repeat-cue {
  max-width:780px;
  color:#fff;
  font-size:clamp(1.65em,3.5vw,3.2em);
  font-weight:820;
  line-height:1.12;
  letter-spacing:-.035em;
}
.shadowing-repeat-cue + .shadowing-repeat-cue { margin-top:8px; }
.shadowing-repeat-overlay.is-pause-plan .shadowing-repeat-cue + .shadowing-repeat-cue { margin-top:10px; }
.shadowing-repeat-subtitle { max-width: 720px; margin: 10px auto 0; color: var(--player-copy-muted); font-size: .8em; }
.shadowing-repeat-overlay.is-pause-plan .shadowing-repeat-countdown {
  order:2;
  margin:0;
  color:#fff;
  font-size:clamp(2em,3.8vw,3.06667em);
  line-height:1;
  font-variant-numeric:tabular-nums;
  text-shadow:0 3px 16px rgba(0,0,0,.65);
}
.video-frame.is-shadowing-pause .video-status,
.video-frame.is-shadowing-pause .video-subtitles {
  opacity:0;
  visibility:hidden;
}
.video-frame.is-shadowing-pause #simpleYouTubePlayer {
  filter:blur(10px) brightness(.62);
  transform:none;
}
.video-subtitle-toggle.shadowing-repeat-toggle {
  z-index:calc(var(--z-player-overlay) + 5);
  pointer-events:auto;
}
.shadowing-repeat-toggle > span { font-size:14px; }

/* Transcript ------------------------------------------------ */
.transcript-panel {
  position:static;
  max-height:none;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:rgba(255,253,248,.88);
  border:1px solid rgba(201,201,193,.84);
  border-radius:24px;
  box-shadow:0 22px 64px rgba(16,24,28,.075);
  backdrop-filter:blur(18px);
}
.transcript-header { padding:24px 22px 14px; border-bottom:1px solid rgba(217,216,208,.7); }
.transcript-header h2 { margin:3px 0 0; font-size:1.86667em; letter-spacing:-.045em; }
.transcript-search { display:flex; align-items:center; gap:7px; margin:11px 12px 8px; min-height:40px; padding:0 12px; color:var(--muted); background:#f4f0e7; border:1px solid #dfdcd3; border-radius:12px; }
.transcript-search.wide { flex:1; margin:0; }
.transcript-search input { min-width:0; width:100%; color:var(--ink); background:transparent; border:0; outline:0; font-size:.66667em; }
.transcript-search:focus-within { border-color:rgba(var(--accent-rgb),.42); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.08); }
.transcript-stage-message { margin:4px 12px 9px; padding:11px 12px; background:#f8ebca; border:1px solid #ead49b; border-radius:11px; }
.transcript-stage-message strong,.transcript-stage-message span { display:block; }
.transcript-stage-message strong { font-size:.56667em; }
.transcript-stage-message span { margin-top:3px; color:var(--muted-strong); font-size:.53333em; line-height:1.4; }
.transcript-list { display:block; overflow-y:auto; padding:3px 9px 14px; scrollbar-width:thin; scrollbar-color:#c8cbc6 transparent; }
.cue-row { position:relative; display:grid; grid-template-columns:47px minmax(0,1fr); gap:10px; margin:3px 0; padding:13px 11px; border:1px solid transparent; border-radius:13px; cursor:pointer; transition:background .14s ease,transform .14s var(--ease),border-color .14s ease; }
.cue-row:first-child { border-top: 0; }
.cue-row::before { content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px; background:transparent; border-radius:3px; }
.cue-row:hover { background:rgba(17,32,39,.035); border-color:rgba(201,201,193,.45); }
.cue-row.is-active { background:linear-gradient(90deg,#e2f1ee,#f7f1df); border-color:rgba(var(--accent-rgb),.12); transform:translateX(2px); }
.cue-row.is-active::before { background:linear-gradient(180deg,var(--accent),var(--gold)); }
.cue-time { padding-top:2px; color:#96a0a2; font:.5em var(--font-mono); font-variant-numeric:tabular-nums; }
.cue-content-box { min-width:0; }
.cue-speaker { display:block; margin-bottom:4px; color:var(--accent-strong); font-size:.45333em; font-weight:850; letter-spacing:.09em; text-transform:uppercase; }
.cue-en { display:block; color:var(--ink); font-size:.84333em; font-weight:650; line-height:1.5; }
.transcript-practice-highlight { display:inline; padding:0 .12em; color:var(--accent-strong); background:var(--accent-soft); border:0; border-radius:4px; font:inherit; font-weight:850; text-decoration:none; cursor:pointer; }
.transcript-practice-highlight:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.cue-pt { display:block; margin-top:4px; color:#728087; font-size:.667em; line-height:1.44; }
.cue-row-actions { grid-column:2; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:8px; margin-top:9px; }
.cue-inline-button,.cue-add-vocab,.cue-play-scene { display:inline-flex; align-items:center; justify-content:center; width:auto; min-width:148px; min-height:44px; padding:0 16px; color:#63747a; background:rgba(255,255,255,.72); border:1px solid #d9d7cf; border-radius:10px; font-size:.73333em; font-weight:750; line-height:1.15; text-align:center; }
.cue-inline-button:hover,.cue-add-vocab:hover,.cue-play-scene:hover { color:var(--accent-strong); border-color:rgba(var(--accent-rgb),.25); }

/* Materials ------------------------------------------------- */
.materials {
  --ih-bg-page: transparent;
  --ih-card-bg: #ffffff;
  --ih-card-bg-hover: #f7f8f5;
  --ih-radius: 16px;
  --ih-accent: var(--teal);
  --ih-text-title: #16181c;
  --ih-text-meta: #6b7471;
  --ih-pdf-icon-bg: rgba(208,88,75,.16);
  --ih-pdf-icon-fg: #e47165;
  --ih-anki-icon-bg: rgba(109,99,222,.18);
  --ih-anki-icon-fg: #9188ef;
  --ih-mp3-icon-bg: rgba(37,162,113,.16);
  --ih-mp3-icon-fg: #4fc28f;
  --ih-video-icon-bg: rgba(47,111,98,.20);
  --ih-video-icon-fg: #65aa9b;
  background: var(--ih-bg-page);
  padding: 34px 2px 48px;
}

.materials__eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ih-accent);
}

.materials__title {
  margin: 0 0 24px;
  font-size: 28px;
  font-weight: 600;
  color: #16181c;
}

.materials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.material-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--ih-card-bg);
  border-radius: var(--ih-radius);
  padding: 18px;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}

.material-card:hover,
.material-card:focus-visible {
  background: var(--ih-card-bg-hover);
  transform: translateY(-2px);
}

.material-card:focus-visible {
  outline: 2px solid var(--ih-accent);
  outline-offset: 2px;
}

.material-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.material-card__icon svg {
  width: 18px;
  height: 18px;
}

.material-card__icon--pdf {
  background: var(--ih-pdf-icon-bg);
  color: var(--ih-pdf-icon-fg);
}

.material-card__icon--anki {
  background: var(--ih-anki-icon-bg);
  color: var(--ih-anki-icon-fg);
}

.material-card__icon--mp3 {
  background: var(--ih-mp3-icon-bg);
  color: var(--ih-mp3-icon-fg);
}

.material-card__icon--video {
  background: var(--ih-video-icon-bg);
  color: var(--ih-video-icon-fg);
}

.material-card__body {
  flex: 1;
}

.material-card__title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ih-text-title);
  line-height: 1.3;
}

.material-card__meta {
  margin: 0;
  font-size: 13px;
  color: var(--ih-text-meta);
}

.material-card__action {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ih-accent);
}

.material-card__action svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 480px) {
  .materials {
    padding: 28px 12px 40px;
  }

  .materials__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (hover: hover) and (pointer: fine) {
  .learning-stage:not(.is-active):hover .stage-number { color:#7f8b8e; }
}

/* Overlay visibility and lesson-tab helpers shared by all player modes. */
.audio-study-overlay.is-visible,
.connected-speech-overlay.is-visible,
.shadowing-repeat-overlay.is-visible {
  opacity: 1;
}


.lesson-mode-tabs.has-two-tabs {
  grid-template-columns: repeat(2,minmax(0,1fr));
}

.lesson-mode-tabs.has-three-tabs {
  grid-template-columns: repeat(3,minmax(0,1fr));
}

/* Responsive rules are colocated with their owning component (V109). */
@media (min-width:1024px) {
  .cue-en { font-size:17px; }
  .cue-pt { font-size:15px; }

  .player-theater-stage {
    height:var(--player-theater-height);
    min-height:0;
    aspect-ratio:auto;
  }

  .player-controls {
    grid-template-columns:54px minmax(80px,1fr) 38px 46px 38px minmax(80px,1fr) auto 54px;
    grid-template-rows:20px 34px;
    column-gap:8px;
    row-gap:7px;
  }
  #videoCurrentTime { grid-column:1; grid-row:1; justify-self:start; }
  #videoSeek { grid-column:2/8; grid-row:1; position:static; width:100%; height:20px; }
  #videoDuration { grid-column:8; grid-row:1; justify-self:end; }
  #videoBackButton { grid-column:3; grid-row:2; justify-self:end; }
  #videoPlayButton { grid-column:4; grid-row:2; justify-self:center; }
  #videoForwardButton { grid-column:5; grid-row:2; justify-self:start; }
  .player-tools { grid-column:6/8; grid-row:2; justify-self:end; justify-content:flex-end; padding:0; }

  .transcript-panel { position:static; width:100%; max-width:none; max-height:none; border-radius:20px; }
  .transcript-header { display:flex; align-items:end; justify-content:space-between; gap:18px; padding-bottom:14px; }
  .transcript-list { display:block; max-height:520px; padding:7px 10px 14px; }
  .cue-row { align-content:start; }
}

@media (max-width:900px) {
  .workspace-view { width:min(100% - 18px,1540px); }
  .workspace-header {
    grid-template-columns:1fr;
    grid-template-areas:"kicker" "title" "progress";
    gap:7px;
  }
  .workspace-progress-row { max-width:none; }
  .study-layout { grid-template-columns:1fr; }
  .player-theater-stage { height:auto; aspect-ratio:16/9; }
  .transcript-panel { position:static; max-height:none; }
  .transcript-list { display:block; max-height:520px; }
}

@media (max-width:700px) {
  .workspace-view { width:100%; padding:6px 8px 0; }
  .workspace-header{display:block;position:sticky;top:var(--topbar-h,62px);z-index:70;margin:-6px -8px 8px;padding:6px 10px 8px;background:var(--bg);box-shadow:0 8px 14px rgba(16,24,28,.09)}
  .workspace-kicker-row { min-height:34px; }
  .workspace-mobile-intro { display:block; margin-top:7px; }
  .workspace-mobile-intro-row{align-items:center;}
  .workspace-mobile-intro h1 { margin:0; font-size:1.33333em; letter-spacing:-.035em; }
  .workspace-learning-path-anchor{display:inline-flex;align-items:center;min-height:30px;padding:0 10px;flex:0 0 auto;color:var(--accent-strong);background:var(--accent-soft);border:1px solid rgba(var(--accent-rgb),.22);border-radius:999px;font-size:.56em;font-weight:850;text-decoration:none;white-space:nowrap}.workspace-learning-path-anchor:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  #workspaceKitProgressPanel{scroll-margin-top:234px}
  .workspace-mobile-kit-title { display:block; margin-top:4px; color:var(--accent-strong); font-size:.6em; font-weight:800; }
  .workspace-kit-badge,.workspace-library-action,.workspace-title { display:none; }
  .workspace-progress-row { margin-top:8px; padding:9px 10px; }
  .workspace-divider { margin-bottom:8px; }

  .lesson-mode-tabs { gap:6px; margin-bottom:7px; overflow-x:auto; scrollbar-width:none; }
  .lesson-mode-tabs::-webkit-scrollbar { display:none; }
  .lesson-mode-tab { min-width:142px; min-height:44px; padding:6px 10px; }
  .lesson-mode-tab span { font-size:14px; }
  .lesson-mode-tab small { display:none; }

  .practice-session { margin-bottom:7px; padding:8px 9px; }
  .practice-session-copy { display:grid; gap:1px; }
  .practice-session-copy .eyebrow { display:none; }
  .practice-session-copy strong { font-size:12px; }
  .practice-session-copy small { font-size:10px; }

  .learning-stages { display:flex; overflow-x:auto; gap:3px; margin-bottom:7px; padding:3px; scrollbar-width:none; }
  .learning-stages::-webkit-scrollbar { display:none; }
  .learning-stage { flex:0 0 132px; min-height:44px; grid-template-columns:25px minmax(0,1fr); gap:6px; padding:4px 6px; }
  .stage-number { width:25px; height:25px; }
  .stage-copy strong { font-size:12px; }
  .stage-copy small { font-size:10px; }

  .player-media-shell { border-radius:10px; }
  .video-status { top:8px; left:8px; min-height:22px; font-size:9px; }
  .video-subtitles { left:4%; right:4%; bottom:6%; }
  .video-subtitle-en { font-size:clamp(.93333em,4.6vw,1.46667em); }
  .video-subtitle-pt { font-size:clamp(.56667em,2.9vw,.83333em); }
  .video-subtitles.mode-pt-only .video-subtitle-pt { font-size:clamp(.93333em,4.6vw,1.46667em); }
  .player-transport-slot { padding:8px 9px 8px; }
  .player-controls { grid-template-columns:44px minmax(0,1fr) 44px; grid-template-rows:20px 34px auto; gap:5px 7px; }
  .player-controls .control-btn,.player-controls .primary-button.compact { padding:0 6px; font-size:.7em; }
  .player-tools { overflow-x:auto; justify-content:flex-start; padding:3px 0 0; scrollbar-width:none; }
  .player-tools::-webkit-scrollbar { display:none; }
  .speed-control { flex:0 0 auto; }
  .speed-control>span { font-size:9px; }
  .speed-control button { min-width:39px; font-size:10px; }

  .shadowing-repeat-overlay.is-pause-plan { gap:16px; padding:24px 18px; }
  .shadowing-repeat-overlay.is-pause-plan .shadowing-repeat-countdown { font-size:clamp(1.73333em,9vw,2.4em); }
  .shadowing-repeat-overlay.is-pause-plan .shadowing-repeat-cue { font-size:clamp(1.2em,6.5vw,1.86667em); line-height:1.2; }

  .transcript-header { padding:16px 15px 10px; }
  .transcript-header h2 { font-size:1.33333em; }
  .transcript-search { margin:8px 9px 6px; }
  .transcript-list { padding:2px 6px 10px; }
  .cue-row { grid-template-columns:42px minmax(0,1fr); padding:10px 8px; }
  .cue-row-actions { grid-column:2; gap:6px; margin-top:8px; }
  .cue-inline-button,.cue-add-vocab,.cue-play-scene { min-width:132px; min-height:44px; padding:0 12px; font-size:.73333em; }

  .materials { padding:28px 8px 40px; }
}

@media (max-width:420px) {
  .workspace-view { padding-inline:5px; }
  .lesson-mode-tab { min-width:132px; }
  .learning-stage { flex-basis:124px; }
  .player-media-shell { border-radius:8px; }
}

/* VIP study preview ----------------------------------------- */
.learning-stage.is-vip-locked {
  cursor: pointer;
  opacity: .72;
  border-style: dashed;
}
.learning-stage.is-vip-locked::after {
  content: "🔒";
  position: absolute;
  top: 7px;
  right: 8px;
  font-size: .73333em;
  line-height: 1;
}
.learning-stage.is-vip-locked:hover {
  opacity: 1;
}

.vip-subtitle-lock {
  position: absolute;
  z-index: var(--z-workspace-layer);
  left: 50%;
  bottom: 7%;
  width: min(520px, 88%);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 9px;
  row-gap: 2px;
  align-items: center;
  padding: 10px 13px;
  color: #f7f9f9;
  background: rgba(3,6,8,.76);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  text-align: left;
  pointer-events: none;
  backdrop-filter: blur(8px);
}
.vip-subtitle-lock[hidden] { display: none; }
.vip-subtitle-lock > span { grid-row: 1 / 3; font-size: 1.06667em; }
.vip-subtitle-lock strong { font-size: .86667em; line-height: 1.2; }
.vip-subtitle-lock small { color: #c8d1d3; font-size: .73333em; line-height: 1.3; }

.transcript-vip-lock {
  width: calc(100% - 24px);
  margin: 12px;
  padding: 18px 16px;
  display: grid;
  gap: 5px;
  justify-items: start;
  text-align: left;
  color: var(--ink);
  background: #fff;
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  cursor: pointer;
}
.transcript-vip-lock > span { font-size: 1.2em; }
.transcript-vip-lock strong { font-size: .93333em; }
.transcript-vip-lock small { color: var(--muted); font-size: .8em; line-height: 1.35; }

.material-card.is-vip-locked {
  position: relative;
  width: 100%;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.material-card__lock {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  background: #f3f0e7;
  border: 1px solid #e1dccf;
  border-radius: 999px;
  font-size: .8em;
}
.material-card.is-vip-locked .material-card__action {
  color: var(--muted-strong);
}

@media (max-width: 700px) {
  .vip-subtitle-lock {
    bottom: 6%;
    width: 90%;
    padding: 8px 10px;
  }
  .vip-subtitle-lock strong { font-size: .8em; }
  .vip-subtitle-lock small { font-size: .66667em; }
}
.lesson-mode-tab.is-vip-locked {
  cursor: pointer;
  opacity: .72;
}
.lesson-mode-tab.is-vip-locked::before {
  content: "🔒";
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: .73333em;
  line-height: 1;
}
.lesson-mode-tab.is-vip-locked:hover { opacity: 1; }

/* v101 — Dual Shadowing media transition. Reuses the existing player overlay. */
.shadowing-repeat-overlay.is-dual-transition {
  background: rgba(0,0,0,.90);
}
.shadowing-repeat-overlay.is-dual-transition > * {
  opacity: 0;
}

/* =========================================================
   V109 — Dialogue stages: EN -> Dual -> Shadowing -> Text+Audio
   ========================================================= */
.learning-stages {
  grid-template-columns: repeat(5,minmax(0,1fr));
}
.learning-stages.is-music-mode {
  grid-template-columns: repeat(3,minmax(0,1fr));
}

#workspaceView.is-word-study .study-layout{grid-template-columns:minmax(0,1fr)}
#workspaceView.is-word-study .player-media-shell,
#workspaceView.is-word-study .transcript-panel,
#workspaceView.is-word-study .materials,
#workspaceView.is-word-study .player-experience-heading,
#workspaceView.is-word-study #workspaceStudyControls{display:none!important}
.word-study-panel{margin:0;padding:clamp(16px,2vw,22px);background:linear-gradient(145deg,#071411 0%,#0b201a 100%);border:1px solid rgba(82,214,178,.24);border-radius:18px;color:#eef8f5;box-shadow:0 20px 54px rgba(1,12,9,.2)}
.word-study-panel[hidden]{display:none!important}
.word-study-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.09)}
.word-study-heading-copy{display:grid;gap:3px}.word-study-heading-copy>span{color:#52d6b2;font:900 10px var(--font-mono);letter-spacing:.12em}.word-study-heading-copy>strong{font-size:clamp(20px,2.1vw,26px);line-height:1.15}.word-study-heading-copy>small{color:#a8bdb7;font-size:13px}
.word-study-progress{display:grid;gap:7px;min-width:150px;color:#d8e7e2;font:800 12px var(--font-mono);text-align:right}.word-study-progress i{display:block;width:100%;height:6px;overflow:hidden;background:rgba(255,255,255,.09);border-radius:999px}.word-study-progress b{display:block;height:100%;background:#52d6b2;border-radius:inherit;transition:width .2s ease}
.word-study-sentence{position:relative;display:grid;gap:8px;margin:24px 0;padding:20px 150px 20px 22px;background:#f7faf8;border-radius:14px;color:#10221d}.word-study-sentence>span{color:#588077;font:900 10px var(--font-mono);letter-spacing:.1em}.word-study-sentence>strong{font-size:clamp(21px,3vw,30px);line-height:1.25}.word-study-sentence>button{position:absolute;top:50%;right:18px;min-height:38px;padding:0 14px;transform:translateY(-50%);color:#176b56;background:#e4f4ef;border:1px solid #c7e5dc;border-radius:9px;font-size:12px;font-weight:850;cursor:pointer}
.word-study-units{display:grid;gap:10px}.word-study-unit{display:grid;grid-template-columns:minmax(150px,1fr) minmax(190px,1.15fr) 68px;align-items:stretch;gap:10px;padding:12px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);border-radius:13px}.word-study-unit.is-group{border-color:rgba(239,190,79,.34)}
.word-study-unit-en{display:grid;align-content:center;gap:4px;padding:3px 8px}.word-study-unit-en span,.word-study-meaning small{color:#79a99c;font:850 9px var(--font-mono);letter-spacing:.09em}.word-study-unit.is-group .word-study-unit-en span{color:#e7bc61}.word-study-unit-en strong{font-size:18px;line-height:1.25}
.word-study-meaning{display:grid;align-content:center;gap:3px;min-height:58px;padding:8px 13px;color:#a8bdb7;background:rgba(0,0,0,.16);border:1px dashed rgba(255,255,255,.18);border-radius:10px;text-align:left;cursor:pointer}.word-study-meaning b{font-size:14px}.word-study-meaning.is-revealed{color:#f3faf7;background:rgba(82,214,178,.1);border-style:solid;border-color:rgba(82,214,178,.32)}
.word-study-audio{display:grid;place-content:center;gap:2px;color:#071814;background:#52d6b2;border:0;border-radius:10px;cursor:pointer}.word-study-audio span{font-size:16px}.word-study-audio small{font-size:9px;font-weight:900}.word-study-audio:hover{background:#72e3c4}
.word-study-cue-nav{display:flex;justify-content:space-between;gap:10px;margin-top:6px;padding-top:8px;border-top:1px solid rgba(255,255,255,.09)}.word-study-cue-nav button{min-height:39px;padding:0 15px;color:#dcebe6;background:transparent;border:1px solid rgba(255,255,255,.17);border-radius:10px;font-size:12px;font-weight:850;cursor:pointer}.word-study-cue-nav button.is-primary{color:#071814;background:#52d6b2;border-color:#52d6b2}.word-study-cue-nav button:disabled{opacity:.35;cursor:default}.word-study-empty{font-size:15px}
.wbw-practice-card{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(320px,1.1fr);min-height:278px;margin-top:16px;overflow:hidden;background:#f7faf8;border-radius:14px;color:#10221d}.wbw-practice-prompt{display:grid;align-content:center;justify-items:start;gap:8px;padding:clamp(22px,3vw,34px);background:linear-gradient(145deg,#f7faf8,#edf6f2)}.wbw-practice-prompt>span,.wbw-practice-answer section>span{color:#287f69;font:900 9px var(--font-mono);letter-spacing:.11em}.wbw-practice-prompt>strong{font-size:clamp(29px,4vw,44px);line-height:1.04;letter-spacing:-.035em}.wbw-practice-prompt>small{color:#60766f;font-size:13px}.wbw-practice-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}.wbw-practice-actions button{min-height:39px;padding:0 14px;border-radius:9px;font-size:11px;font-weight:900;cursor:pointer}.wbw-practice-actions .word-study-audio{display:flex;align-items:center;gap:7px;color:#0a211a;background:#cceee4;border:1px solid #afe1d3}
.wbw-practice-answer{display:grid;align-content:center;gap:0;padding:clamp(18px,2.5vw,28px);background:#102a23;color:#eef8f5}.wbw-practice-answer[hidden]{display:grid;visibility:hidden}.wbw-practice-answer section{display:grid;gap:4px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.1)}.wbw-practice-answer section:last-child{border-bottom:0}.wbw-practice-answer section>span{color:#73dabb}.wbw-practice-answer strong{font-size:18px;line-height:1.25}.wbw-practice-answer p{margin:0;color:#c8d9d4;font-size:13px;line-height:1.42}.wbw-practice-example small{color:#9fb8b0;font-size:12px}
.wbw-add-vocabulary{min-height:39px;padding:0 14px;color:#176b56;background:#fff;border:1px solid #9fd7c8;border-radius:9px;font-size:11px;font-weight:900;cursor:pointer}.wbw-add-vocabulary:hover{background:#e4f4ef}
@media(max-width:700px){.word-study-panel{padding:16px}.word-study-head{display:grid;gap:14px}.word-study-progress{min-width:0;text-align:left}.word-study-sentence{padding:17px}.word-study-sentence>button{position:static;width:max-content;margin-top:5px;transform:none}.word-study-unit{grid-template-columns:minmax(0,1fr) 58px}.word-study-unit-en,.word-study-meaning{grid-column:1}.word-study-audio{grid-column:2;grid-row:1/3}.word-study-cue-nav{display:grid;grid-template-columns:1fr 1fr}.word-study-cue-nav button{padding:0 8px}}
@media(max-width:760px){.wbw-practice-card{grid-template-columns:1fr;min-height:0}.wbw-practice-prompt,.wbw-practice-answer{padding:26px 20px}.wbw-practice-answer[hidden]{display:none}}
.word-study-panel{container-type:inline-size}
.wbw-practice-card{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.wbw-practice-prompt,.wbw-practice-answer,.wbw-practice-answer section{min-width:0}
.wbw-practice-prompt>strong,.wbw-practice-answer strong,.wbw-practice-answer p,.wbw-practice-answer small{overflow-wrap:anywhere}
@container (max-width:560px){.wbw-practice-card{grid-template-columns:minmax(0,1fr);min-height:0}.wbw-practice-prompt,.wbw-practice-answer{padding:22px}.wbw-practice-answer[hidden]{display:none}}
@media(max-width:760px){.wbw-practice-card{grid-template-columns:minmax(0,1fr)}}

/* Keep playback speed separate from the shared transport buttons at every width. */
#workspaceView .player-controls { grid-template-rows:20px 34px auto; }
#workspaceView .player-controls .player-tools { grid-column:1 / -1; grid-row:3; justify-self:stretch; justify-content:center; min-width:0; overflow:visible; }
#workspaceView .player-controls .speed-control { flex:0 1 auto; flex-wrap:wrap; justify-content:center; }

.video-subtitle-toggle {
  position:absolute;
  z-index:var(--z-player-controls);
  top:11px;
  right:11px;
  min-height:30px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0 10px;
  color:#f7f9f9;
  background:rgba(7,13,16,.72);
  border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-pill);
  font:800 10px var(--font-mono);
  letter-spacing:.02em;
  cursor:pointer;
  backdrop-filter:blur(10px);
  transition:background .16s ease,border-color .16s ease,opacity .16s ease;
}
.video-subtitle-mode { position:absolute; z-index:calc(var(--z-player-overlay) + 6); top:11px; right:11px; display:flex; gap:2px; padding:3px; background:rgba(7,13,16,.72); border:1px solid rgba(255,255,255,.13); border-radius:var(--r-pill); backdrop-filter:blur(10px); pointer-events:auto; }
.video-subtitle-mode button { min-height:24px; padding:0 9px; color:#c8d5d4; background:transparent; border:0; border-radius:var(--r-pill); font:800 10px var(--font-mono); cursor:pointer; pointer-events:auto; touch-action:manipulation; }
.video-subtitle-mode button.is-active { color:#08201c; background:#dff1ed; }
.video-subtitle-toggle:hover {
  background:rgba(18,38,43,.9);
  border-color:rgba(255,255,255,.24);
}
.video-subtitle-toggle > span {
  display:grid;
  place-items:center;
  min-width:23px;
  height:18px;
  padding:0 4px;
  color:#fff;
  background:var(--accent);
  border-radius:5px;
  font-size:9px;
  letter-spacing:.04em;
}
.video-subtitle-toggle strong {
  font:inherit;
  color:#fff;
}
.video-subtitle-toggle em {
  min-width:24px;
  color:#9ed8d0;
  font-style:normal;
}
.video-subtitle-toggle.is-off {
  opacity:.82;
}
.video-subtitle-toggle.is-off > span {
  color:#d4dcdd;
  background:#39494d;
}
.video-subtitle-toggle.is-off em {
  color:#c0c9ca;
}
.video-subtitle-toggle[hidden] { display:none; }

@media (max-width:700px) {
  .video-subtitle-toggle {
    top:8px;
    right:8px;
    min-height:28px;
    gap:5px;
    padding:0 8px;
    font-size:9px;
  }
  .video-subtitle-toggle strong { display:none; }
}

.music-full-youtube{display:inline-block;align-self:flex-start;font-size:12px;color:inherit;opacity:.65;text-decoration:none;margin:0 0 12px}.music-full-youtube:hover,.music-full-youtube:focus-visible{opacity:1;text-decoration:underline}.music-full-youtube[hidden]{display:none!important}