* {
  box-sizing: border-box;
}

:root {
  /* ---- 中性色阶（与后台 admin.css 同一套，全站唯一灰源） ---- */
  --n-0:   #ffffff;
  --n-25:  #fcfcfd;
  --n-50:  #f7f8fa;
  --n-100: #f1f3f6;
  --n-150: #eaedf2;
  --n-200: #e3e7ee;
  --n-300: #cdd4e0;
  --n-400: #9aa3b2;
  --n-500: #6e7887;
  --n-600: #525c6b;
  --n-700: #3a4351;
  --n-800: #232a35;
  --n-900: #12161d;

  /* ---- 品牌色：蓝（主）+ 蓝紫（辅）---- */
  --accent:        #2f6feb;
  --accent-strong: #1f57c9;
  --accent-soft:   #eff4ff;
  --accent-line:   #c8dbff;
  --indigo:        #6e5af2;
  --indigo-soft:   #f1efff;
  --indigo-line:   #d9d4fb;

  /* ---- 语义色 ---- */
  --ok:   #0f7b3f;
  --ok-soft: #f2fdf6;
  --warn: #a35a06;
  --warn-soft: #fffaef;
  --danger: #c02525;
  --danger-soft: #fef5f5;
  --amber: #f0a020;      /* 跟读当前词的「卡拉OK」高亮，保留暖色语义 */
  --amber-soft: #fdf0da;
  --on-accent: #ffffff;     /* 品牌蓝等彩色底上的白字，两主题皆白 */
  --tooltip-bg: #12161d;   /* tooltip 两主题皆深底（深色段不再反转它） */

  /* ---- 兼容旧变量名（老规则继续生效，值统一到新色板） ---- */
  --bg:           var(--n-50);
  --panel:        var(--n-0);
  --panel-soft:   var(--n-50);
  --panel-strong: var(--n-0);
  --line:         var(--n-200);
  --line-strong:  var(--n-300);
  --text:         var(--n-900);
  --muted:        var(--n-500);
  --cyan:         var(--accent);        /* 旧主色名 → 品牌蓝 */
  --blue:         var(--accent);
  --green:        var(--ok);
  --purple:       var(--indigo-soft);    /* 旧「紫底」→ 蓝紫浅底 */
  --rose:         var(--danger);
  --yellow-bg:    var(--amber-soft);

  /* ---- 阴影：克制，主要靠边框分层 ---- */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.07);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);
  --shadow: none;

  /* ---- 圆角 ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-full: 999px;

  font-family: Inter, "PingFang SC", "Microsoft YaHei", "HarmonyOS Sans SC", Arial, sans-serif;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  /* 页面底色与装饰走主题 token（themes.js 注入）；未加载时退回 :root 默认浅色 */
  background-color: var(--bg);
  background-image: var(--page-bg-decor, none);
  background-attachment: fixed;
  color: var(--text);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

*::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 4px;
}

button,
select,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

.mobile-top-tab,
.mobile-bottom-toolbar,
.mobile-settings-button,
.mobile-settings-sheet {
  display: none;
}

.page-shell {
  display: grid;
  /* 右侧字幕面板约 40vw（2026-10-13 微调：42vw → 40vw，把省下的宽度让给视频，视频更大）。
     整页**靠左贴住左侧图标栏**（不再水平居中 —— 宽屏下居中会在左边空一大块）。
     上限 2040 = 1120(视频上限) + 40(padding) + 860(面板上限) + 20(gap)，
     这样左列永远 ≤ 视频上限，视频与标题左对齐、且与右面板之间不会出现空档。 */
  grid-template-columns: minmax(0, 1fr) clamp(400px, 40vw, 820px);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 20px;
  width: min(100%, 2040px);
  height: 100vh;
  margin: 0;
  padding: 20px;
  overflow: hidden;
}

/* 顶栏横跨整页：左标题 / 右学习模式条 —— 对齐 TECo Lab 的页面头部 */
.page-shell > .video-header {
  grid-column: 1 / -1;
  grid-row: 1;
}

.page-shell.reading-mode {
  grid-template-columns: minmax(0, 1fr) clamp(420px, 34vw, 540px);
  grid-template-rows: auto minmax(0, 1fr);
}

.video-section {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: 18px;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.video-header {
  min-height: 58px;
  border-bottom: 1px solid var(--line);
}

.video-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  padding-bottom: 14px;
}

/* 顶栏右侧：学习模式条 + 两个图标钮。不可压缩 —— 让它保持完整宽度，由标题去让位 */
.video-header-tools {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 10px;
}

.video-title-row {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  gap: 14px;
}

.video-back-button,
.mobile-top-back {
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel-soft);
  color: var(--cyan);
}

.video-back-button {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
}

.video-title-row h1 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 26px;
  font-weight: 700;
  line-height: 34px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 顶栏标题 = 「影听工作坊 › 第 N 期」（同 TECo Lab 两段式） */
.video-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 21px;
  font-weight: 700;
  line-height: 30px;
}

.video-title-brand {
  color: var(--text);
}

.video-title-sep {
  color: #C9CDD4;
  font-weight: 500;
}

.video-title-issue {
  color: var(--muted);
  font-weight: 600;
  font-size: 17px;
}

.video-title:not(.has-issue) .video-title-sep,
.video-title:not(.has-issue) .video-title-issue {
  display: none;
}

/* 顶栏右侧工具区：模式条 + 👁⚙。flex:0 0 auto —— 绝不压缩（曾被压扁裁掉） */
.video-header-tools {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 10px;
  min-width: 0;
}

.video-meta {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
}

.video-meta span {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--n-600);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 12px;
}

.video-player {
  position: relative;
  justify-self: center;
  width: min(100%, 1120px);
  aspect-ratio: 16 / 9;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: #000000;
  box-shadow: none;
}

.video-player::before {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 2;
  pointer-events: none;
  border: 1px solid none;
  border-radius: var(--r-md);
}

.practice-floating-close {
  display: none;
}

.video-wrapper,
.lesson-video,
.video-controls-overlay {
  width: 100%;
  height: 100%;
}

.lesson-video {
  display: block;
  object-fit: cover;
  background: #000000;
}

.lesson-video.is-audio-source {
  object-fit: contain;
  background:
    radial-gradient(circle at 50% 42%, rgba(245, 166, 35, 0.15), transparent 28%),
    linear-gradient(135deg, var(--n-0), var(--n-100) 58%, #E8E8E8);
}

.video-controls-overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 180ms ease;
  background: linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, 0.4) 100%);
}

.video-wrapper:hover .video-controls-overlay,
.video-wrapper.controls-visible .video-controls-overlay {
  opacity: 1;
}

.video-controls {
  position: absolute;
  right: 20px;
  bottom: 18px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-strong);
  padding: 12px 14px;
  box-shadow: var(--shadow-md);
}

.control-button {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  color: var(--text);
}

.control-button svg,
.toggle-button-icon svg {
  width: 16px;
  height: 16px;
}

.toolbar-icon-btn svg {
  width: 18px;
  height: 18px;
}

/* --- 音频课：播放区必须一眼看出「能播---------------------------------
   MP3 既没有画面也没有海报图，默认「悬停才淡入控件」会让人以为是个空盒子   script.js lesson.type .video-wrapper is-audio   大播放键常驻 + 控制条常+ 空白区可点播*/
/* 课程封面：音频课没有画面，用这张 16:9 图铺满播放区当「画面」   深色半透明的播放键在这张浅色封面上也能看清*/
/* 注意：这里不能给 z-index。给了就会盖住后面的控制条图层—   DOM 顺序（video img 控制播放键）自然叠才对*/
.audio-cover {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 封面不吃点击——点它要能落<video> 上继续播暂停 */
  pointer-events: none;
  transition: opacity 260ms ease;
}

.video-wrapper.is-audio.has-cover .audio-cover {
  display: block;
}

/* --- 播放控制条（TECo Lab 同款）-----------------------------------------
   视频下方独立一行，11 个「图标/字符 + 中文标签」控件。
   规格对着 TECo Lab 实机量的：容器 padding 4px / 高 56px / space-between /
   文字 rgba(0,0,0,.7)；控件 flex column 居中、高 48px、标签 12px；
   次控件图标 16px，主控件（上一句/播放/下一句）图标 32px；
   hover scale(1.05)、active scale(0.95)。 */
.player-controlbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2px;
  flex: 0 0 auto;
  padding: 4px;
  min-height: 56px;
  color: var(--n-500);
  user-select: none;
}

.pc-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 0 0 auto;
  height: 48px;
  min-width: 32px;
  padding: 0 4px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: transform 300ms ease-out, color 160ms ease;
}

.pc-item:hover {
  transform: scale(1.05);
  color: var(--n-700);
}

.pc-item:active {
  transform: scale(0.95);
}

/* 主操作（上一句/播放/下一句）= 控制条视觉重心：更深、更大 */
.pc-item--main {
  color: var(--n-900);
  gap: 4px;
  padding: 0 8px;
}

.pc-item--main:hover {
  color: var(--accent);
}

.pc-item--main .pc-label {
  font-size: 12px;
  font-weight: 500;
}

/* 辅助控件（倍速/隐藏视频/全屏/音标/A点/循环/间隔/暂停）标签更小更淡 */
.pc-item:not(.pc-item--main) .pc-label {
  font-size: 11px;
}

.pc-item.is-on {
  color: var(--accent);
}

.pc-glyph {
  font-size: 16px;
  font-weight: 600;
  line-height: 16px;
}

.pc-label {
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.pc-icon {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
}

.pc-icon svg {
  width: 16px;
  height: 16px;
}

.pc-item--main .pc-icon,
.pc-item--main .pc-icon svg {
  width: 32px;
  height: 32px;
}

/* 单句循环：次数叠在图标右上角（同 TECo Lab 的「1」角标） */
.pc-badge-host {
  position: relative;
}

.pc-badge-host[data-badge]::after {
  content: attr(data-badge);
  position: absolute;
  top: -5px;
  right: -7px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: var(--amber);
}

/* 播放/倍速/全屏已移到下方控制条，浮层只留进度条 + 时间（与 TECo Lab 一致） */
.video-controls-overlay #desktopPlay,
.video-controls-overlay #desktopRate,
.video-controls-overlay #fullscreenButton {
  display: none;
}

/* 窄屏：11 个控件放不下就横向滚动，不压缩、不换行 */
@media (max-width: 900px) {
  .player-controlbar {
    justify-content: flex-start;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .player-controlbar::-webkit-scrollbar {
    display: none;
  }
}

/* 移动端已有底部工具栏，避免重复 */
@media (max-width: 1024px), (max-width: 1400px) and (hover: none) and (pointer: coarse) {
  .player-controlbar {
    display: none;
  }
}

/* --- 移动端底部控制条（同 TECo Lab 手机版）--------------------------------
   与桌面控制条共用 .pc-* 的控件样式，只是容器换成「贴底一整行」。
   手机版 TECo 只留 7 个控件：倍速 / 隐藏 / 上一句 / 播放 / 下一句 / A点 / 精听。 */
.mobile-controlbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2px;
  color: rgba(0, 0, 0, 0.7);
  user-select: none;
}

@media (max-width: 380px) {
  .mobile-controlbar .pc-label {
    font-size: 11px;
  }

  .mobile-controlbar .pc-item--main .pc-icon,
  .mobile-controlbar .pc-item--main .pc-icon svg {
    width: 28px;
    height: 28px;
  }
}

/* 控制条「隐藏视频」：画面淡出，声音与字幕照常走 */
.video-wrapper.pc-video-hidden {
  background: #0F1115;
}

.video-wrapper.pc-video-hidden video,
.video-wrapper.pc-video-hidden .audio-cover {
  opacity: 0;
  pointer-events: none;
}

/* 控制条「音标」：在英文行下方补一行音标 */
.subtitle-phonetic {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: #8A8A8A;
}

.subtitle-phonetic-item b {
  margin-right: 3px;
  font-weight: 600;
  color: #5A5A5A;
}

/* --- 音频课：封面之后，逐句英文 -----------------------------------------
   封面只当「海报」用：没播过之前铺封面；一旦播起来就淡出，换成逐句英文   数据源跟右侧「动态字幕」是同一subtitles[]，由 setActiveSubtitle() 驱动   所以点字幕跳转 / 单句循环 / 变都会自动跟着走   下沿20%：桌面端控制条是 absolute 胶囊，压在播放区 82%~96% 的高度上   （移动端 .video-controls-overlay display:none，另有覆盖规则放到底。） */
.audio-lyrics {
  display: none;
  position: absolute;
  inset: 0 0 20% 0;
  align-items: center;
  justify-content: center;
  padding: 0 7%;
  /* 不吃点击——点歌词要能落到 <video> 上播暂停 */
  pointer-events: none;
  opacity: 0;
  transition: opacity 260ms ease;
}

.video-wrapper.is-audio.has-lyrics .audio-lyrics {
  display: flex;
}

.video-wrapper.is-audio.has-started .audio-lyrics {
  opacity: 1;
}

/* 填空练习模式（缩成右上角小窗）下必须关掉逐句英文——不然答案直接印在播放区里，
   右边字幕在挖空、左边把词全报出来。放在顶层：练习模式的样式块都在媒体查询里，
   1440 宽那档压根不匹配（踩过）。选择器多一body 才压得住上面display:flex*/
body.practice-blank-mode .video-wrapper.is-audio.has-lyrics .audio-lyrics {
  display: none;
}

.video-wrapper.is-audio.has-started .audio-cover {
  opacity: 0;
}

/* 大播放键是「这盒子能播」的提示，播过之后就是多余的—   而且它会正好压在英文句子中间。控制条里那个播放键常驻，够用*/
.video-wrapper.is-audio.has-started .audio-play-badge {
  opacity: 0;
  pointer-events: none;
}

.audio-lyric-text {
  max-width: 100%;
  margin: 0;
  color: #F5F5F7;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  /* cqw 跟着播放区宽度走video-wrapper.is-audio 是容器），别vw */
  font-size: clamp(17px, 4.4cqw, 40px);
  font-weight: 600;
  line-height: 1.46;
  letter-spacing: 0.01em;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

/* 歌词里的高亮词：下划线加粗一点，远看也认得出 */
.audio-lyric-text .word-highlight,
.audio-lyric-text .phrase-highlight {
  cursor: default;
}

.audio-lyric-text .word-highlight::after,
.audio-lyric-text .phrase-highlight::after {
  bottom: -1px;
  height: 4px;
}

.video-wrapper.is-audio {
  container-type: inline-size;
}

.audio-play-badge {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  place-items: center;
  width: 92px;
  height: 92px;
  border: 1px solid rgba(47, 111, 235, 0.7);
  border-radius: 50%;
  background: var(--n-0);
  color: var(--cyan);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.audio-play-badge svg {
  width: 38px;
  height: 38px;
}

.video-wrapper.is-audio .audio-play-badge {
  display: grid;
}

.audio-play-badge:hover {
  border-color: var(--cyan);
  background: rgba(47, 111, 235, 0.16);
  transform: translate(-50%, -50%) scale(1.05);
}

.audio-play-badge:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 5px;
}

/* ---- 画面上两组圆钮（照 TECo 原版：‹ › 在左上、✓ ⋯ 在右上）-----------------
   ‹ › 落在左上角课程角标的正下方。角标是烧录进视频帧的，实测占 x 4%~26%、y 6%~17%
   （有两种版式：深蓝 logo + 标题 / 半透明胶囊；**宽度随标题长短变**，所以「放下面」
   比「放右边」稳）。✓ ⋯ 在右上角，右缩 11% 避开烧录的「1 / 48」计数（占右起 6.3%~8.9%）。
   .video-player 是最近的定位祖先。半透明黑底 + 毛玻璃，白图标；到头的那个置灰。
   ⚠️ 两组都永远显示，绝不整块隐藏（藏起来等于让人以为功能没做）。 */
.lesson-nav {
  position: absolute;
  z-index: 5;
  display: flex;
  gap: 8px;
}

/* ‹ ›：左上角，**直接压在课程角标上**（用户 2026-10-10 拍板：不用避让，盖上去就行）。
   角标是烧录进视频帧的、y 6%~17%，所以用同一个百分比 6% 对齐它的上沿 ——
   这样任何视口下都落在角标这一行。 */
.lesson-nav--prevnext {
  top: 6%;
  left: 5%;
}

/* ✓ ⋯：右上角，与 ‹ › 同一行（也是 6%），右缩 11% 避开烧录的「1 / 48」计数 */
.lesson-nav--actions {
  top: 6%;
  right: 11%;
}

.lesson-nav-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(17, 19, 24, 0.42);
  color: var(--on-accent);
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background 180ms ease, opacity 180ms ease, color 180ms ease;
}

.lesson-nav-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}

.lesson-nav-btn:hover:not(:disabled) {
  background: rgba(17, 19, 24, 0.64);
}

.lesson-nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

/* ✓ 已学完：琥珀实心圆 + 深色勾（同站内其它「选中」态） */
.lesson-nav-btn--done.is-active {
  background: var(--amber, #F5A623);
  color: var(--n-900);
}

.lesson-nav-btn--done.is-active:hover {
  background: var(--amber, #F5A623);
}

.lesson-nav-btn:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 3px;
}

/* 播放区中央大播放键（对齐 TECo：白色描边三角、无底衬，暂停时才出现）
   状态由 .video-wrapper.is-paused 控制，由 updatePlayIcons() 同步；
   音频课（.is-audio）另有居中徽标，这里让位。 */
.video-play-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  display: none;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--on-accent);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform 160ms ease;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
}

.video-play-overlay svg {
  width: 100%;
  height: 100%;
  display: block;
}

.video-wrapper.is-paused:not(.is-audio) .video-play-overlay {
  display: grid;
}

.video-play-overlay:hover {
  transform: translate(-50%, -50%) scale(1.06);
}

.video-play-overlay:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 4px;
  border-radius: 50%;
}

@media (max-width: 1024px), (max-width: 1400px) and (hover: none) and (pointer: coarse) {
  .video-play-overlay {
    width: 58px;
    height: 58px;
  }
}

/* 不要用底部渐变压暗来垫控制条——那会把封面的下半张糊掉   改成控制条自带半透明底衬，这样封面整张都能看清*/
.video-wrapper.is-audio .video-controls-overlay {
  opacity: 1;
  pointer-events: none;
  background: none;
}

/* overlay 不吃点击，点空白处就落到 <video> 播放/暂停 */
.video-wrapper.is-audio .video-controls {
  pointer-events: auto;
  background: var(--n-0);
}

.progress-container {
  position: relative;
  flex: 1 1 auto;
  height: 7px;
  border: 0;
  border-radius: 999px;
  background: none;
  padding: 0;
}

.progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: inherit;
  background: var(--accent);
}

.desktop-time {
  flex: 0 0 auto;
  color: var(--n-600);
  font-size: 12px;
  font-weight: 700;
}

.playback-rate-select {
  flex: 0 0 auto;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  color: var(--text);
  padding: 0 10px;
}

.playback-rate-select option {
  background: var(--n-0);
  color: var(--n-900);
}

/* 视频简介：收紧（2026-10-13）——图标缩小、间距压紧，不再占大块空间 */
.description-card {
  /* 2026-10-15 用户要求：简介栏不要任何背景/边框，纯文字 */
  background: transparent;
  border: none;
  padding-top: 14px;
  color: var(--n-900);
}
.description-card .description-text h4 { color: var(--n-900); }
.description-card .description-text p { color: var(--n-800); }

.description-content {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.description-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 16px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}

.description-text h4 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--n-700);
}

.description-text p {
  max-width: 100%;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 22px;
}

.subtitle-section {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  /* 表面 token 化（2026-10-16）：原写死 rgba(255,255,255,.94) 白渐变在深色主题下
     不随主题反转 → 白底 + var(--text) 浅字 = 英文行隐形（用户截图实锤）。 */
  background: linear-gradient(180deg, var(--panel), var(--panel-soft));
  box-shadow: none;
}

.subtitle-display,
.subtitle-list {
  width: 100%;
  height: 100%;
}

/* 字幕栏列表：纵向 flex —— header 自然高度、列表吃掉剩余空间
   （原来 .subtitle-items-container 写死 calc(100% - 82px)，header 一变高就错位） */
.subtitle-list {
  display: flex;
  flex-direction: column;
}

/* 面板顶部：只放「模式条落脚点」—— 窄屏（<1290px）顶栏整体隐藏时 #modeBar 由 JS 搬进
   `.mode-toolbar-slot`。769~1289px 时 7 个工具图标也由 placeToolIcons() 搬进来，跟模式条同一行。
   搜索框与那排图标**已从面板移除**（2026-10-10，用户要求，图标改住顶栏/⋯ 面板）。 */
/* ⚠️ 上下内边距只给 5px（2026-10-10 用户贴图说模式条「太宽了，扁一点」）：
   原来 12px 让这一条高到 59~61px，TECo 参考图只有 ~45px。
   现在 5 + 34（模式条）+ 5 + 1（底线）= **45px**，别再加回去。 */
.subtitle-panel-top {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 5px 16px;
  border-bottom: 1px solid var(--line);
}

/* ≥1290px：模式条在顶栏、工具图标也在顶栏 → 这一行空着，整行去掉（连同内边距与分隔线） */
@media (min-width: 1290px) {
  .subtitle-panel-top {
    display: none;
  }
}

.subtitle-panel-top .subtitle-search {
  flex: 1 1 220px;
  min-width: 0;
}

.subtitle-panel-top .subtitle-header-controls {
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

.subtitle-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  border: 1px solid var(--n-200);
  border-radius: 9px;
  background: var(--n-50);
  padding: 0 10px;
  transition: border-color 150ms ease, background 150ms ease;
}

.subtitle-search:focus-within {
  border-color: var(--n-300);
  background: var(--n-0);
}

.subtitle-search-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.subtitle-search-icon svg {
  width: 16px;
  height: 16px;
}

.subtitle-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  outline: none;
}

.subtitle-search-input::placeholder {
  color: var(--muted);
}

/* 去掉 type=search 的原生清除钮，用我们自己的圆形 × */
.subtitle-search-input::-webkit-search-cancel-button {
  display: none;
}

.subtitle-search-clear {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: var(--n-200);
  color: var(--n-700);
  padding: 0;
  cursor: pointer;
}

.subtitle-search-clear[hidden] {
  display: none;
}

.subtitle-search-clear svg {
  width: 12px;
  height: 12px;
}

.subtitle-empty {
  color: var(--muted);
  font-size: 14px;
  padding: 28px 16px;
  text-align: center;
}

/* 头部：标题左 + 工具右，同一行。原来是 column 居中堆叠，窄栏下标题占一行、
   图标再占一行，还被挤压成竖排文字 */
.subtitle-list-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 0 0 auto;
  min-height: 0;
  border-bottom: 1px solid var(--line);
  padding: 12px 14px;
}

.subtitle-list-title {
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  white-space: nowrap;
  flex: 0 0 auto;
}

.subtitle-list-title::before {
  display: none;
}

/* 工具图标：允许折行，绝不压缩子项（原来 nowrap + 可压缩 → 图标被压成竖长条） */
.subtitle-header-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}

.toggle-button-icon {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--n-500);
  padding: 0;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.toggle-button-icon:hover {
  background: var(--n-0);
  color: var(--n-800);
}

.toggle-button-icon.active,
.toggle-button-icon.is-active {
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--accent);
}

.toggle-button-icon:disabled {
  opacity: 0.5;
  cursor: progress;
}

/* 离线缓存状态：不再常驻占位。
   原来是一整句「未缓存 · 点此离线下载」，窄栏里被挤成 12px 宽的竖排字。
   现在状态由「离线缓存」图标自己表达：已缓存→图标转绿、缓存中→图标转琥珀，
   完整说明走 title tooltip；元素本身只留给读屏器播报（aria-live）。 */
.offline-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 缓存中：进度百分比需要看得见，临时显形 */
.offline-status.is-busy {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip-path: none;
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1;
  color: var(--amber);
  white-space: nowrap;
}

/* 状态内联到图标 */
.toggle-button-icon.is-cached {
  color: var(--accent);
}

.toggle-button-icon.is-cached:hover {
  background: rgba(46, 158, 79, 0.12);
  color: var(--accent);
}

.toggle-button-icon.is-busy {
  color: var(--amber);
}

.subtitle-items-container {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden auto;
  padding: 12px 14px 28px;
}

/* 字幕条目 = 连贯列表项（2026-10-13 视觉升级）：
   英文（主）→ 中文（次）→ 底部「时间范围 + 复制·收藏·跟读·下载·播放 5 个小图标」。
   由「独立白卡」改为「分隔线列表」：去掉左右边框/圆角/卡间距，行间用 1px 底线分隔，
   阅读更连贯、空间利用更高；当前句用浅蓝底 + 左侧蓝条一眼定位。 */
.subtitle-item {
  position: relative;
  display: block;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding: 13px 10px 12px;
  margin-bottom: 0;
  transition: background 150ms ease, box-shadow 150ms ease;
}

.subtitle-item:last-child {
  border-bottom: 0;
}

.subtitle-item:hover {
  background: var(--n-50);
}

/* 当前句 = 跟读场景主视觉焦点；形态由主题决定（vel componentVariants：glow/border/filled，
   themes.js 的 applyTheme 写 html[data-subtitle-active-style]，色值走 --sub-active-* token） */
.subtitle-item.is-active {
  background: var(--sub-active-bg, var(--accent-soft));
  border-color: var(--sub-active-border, var(--accent-line));
  box-shadow: inset 3px 0 0 var(--accent);
}
/* filled：实感填充底 + 左侧主题色条（森林石板/石墨薄荷/摩卡玫瑰/北极银/莓果奶油） */
html[data-subtitle-active-style="filled"] .subtitle-item.is-active {
  background: var(--sub-active-bg);
  border-color: var(--sub-active-border);
  box-shadow: inset 3px 0 0 var(--accent);
}
/* border：透明底描边，纸感阅读型（暖象牙） */
html[data-subtitle-active-style="border"] .subtitle-item.is-active {
  background: transparent;
  border-color: var(--sub-active-border);
  box-shadow: inset 3px 0 0 var(--accent);
}
/* glow：柔光底 + 辉光扩散 + 左侧主题色条（午夜靛蓝/深海青/余烬之夜/极光紫/赛博青柠/皇家李紫） */
html[data-subtitle-active-style="glow"] .subtitle-item.is-active {
  background: var(--sub-active-bg);
  border-color: var(--sub-active-border);
  box-shadow: var(--sub-active-glow, none), inset 3px 0 0 var(--accent);
}

/* 跳转目标：暖色瞬态提示（点字幕跳句时闪一下） */
.subtitle-item.is-jump-target {
  background: var(--amber-soft);
}

.subtitle-item.is-jump-target.is-active {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}

/* 英文原文 = 一级信息：更大、更深 */
.subtitle-text {
  color: var(--text);
  /* 「字幕大小」滑杆（⋯ 面板，12~20，基准 16 = 现在的观感）通过 --subtitle-scale 缩放。
     scale = 值 / 16，写在 .page-shell 上，见 setSubtitleScale()。 */
  font-size: calc(15.5px * var(--subtitle-scale, 1));
  font-weight: 500;
  line-height: calc(29px * var(--subtitle-scale, 1));
  letter-spacing: 0.005em;
  word-break: break-word;
}

/* 词与词之间的 › 分隔符（同 TECo）——弱化，不打断整句阅读 */
.st-sep {
  display: inline-block;
  margin: 0 3px;
  color: #D5D9E0;
  font-size: 10px;
  line-height: 1;
  vertical-align: 1px;
  user-select: none;
}

/* 中文翻译 = 二级信息：灰、比英文小一档 */
.subtitle-translation {
  color: var(--n-500);
  font-size: calc(13px * var(--subtitle-scale, 1));
  line-height: calc(22px * var(--subtitle-scale, 1));
  margin-top: 6px;
}

/* 条目底部：左时间范围 / 右 5 个小图标 */
.subtitle-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

/* 时间戳 = 三级信息：最弱、等宽数字不跳动 */
.subtitle-card-time {
  color: var(--n-400);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.subtitle-card-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}

.st-act {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #A3A8B0;
  padding: 0;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.st-act svg {
  width: 15px;
  height: 15px;
}

.st-act:hover {
  background: #F3F4F6;
  color: #4B5563;
}

.st-act--fav.is-favorite {
  color: #E5484D;
}

.st-act--fav.is-favorite:hover {
  background: #FDECEC;
  color: #E5484D;
}

/* 卡片内重点词：单词卡 = 琥珀底 / 短语卡 = 紫底（同 TECo，不再是下划线） */
.subtitle-item .word-highlight,
.subtitle-item .phrase-highlight {
  border-radius: 4px;
  padding: 1px 4px;
  margin: 0 -1px;
}

.subtitle-item .word-highlight {
  background: var(--amber-soft);
  color: var(--n-900);
}

.subtitle-item .phrase-highlight {
  background: var(--indigo-soft);
  color: var(--n-900);
}

.subtitle-item .word-highlight::after,
.subtitle-item .phrase-highlight::after {
  display: none;
}

/* 旧的「时间戳 + 收藏圆钮」元素已不在字幕卡里，保留样式给词卡/阅读等复用场景 */
.subtitle-time {
  color: var(--cyan);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}

.subtitle-favorite-btn {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel-soft);
  color: var(--muted);
  padding: 0;
}

.word-highlight,
.phrase-highlight {
  position: relative;
  color: var(--text);
}

.word-highlight::after,
.phrase-highlight::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 3px;
  border-radius: 999px;
}

.word-highlight::after {
  background: var(--cyan);
}

.phrase-highlight::after {
  background: var(--amber);
}

.content-hide-notes .word-highlight::after,
.content-hide-notes .phrase-highlight::after {
  display: none;
}

.content-study-section {
  display: none;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: linear-gradient(180deg, var(--panel), var(--panel-soft));
  box-shadow: none;
}

.page-shell.reading-mode .content-study-section {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.page-shell.reading-mode .video-section {
  grid-column: 1;
  grid-row: 2;
  grid-template-columns: minmax(0, 1fr);
  height: 100%;
}

.page-shell.reading-mode .subtitle-section {
  display: none;
}

.page-shell.reading-mode .content-study-section {
  grid-column: 2;
  grid-row: 2;
  height: 100%;
  min-height: 0;
}

.content-study-header {
  border-bottom: 1px solid var(--line);
  padding: 18px;
}

.page-shell.reading-mode .content-study-header {
  padding: 18px;
}

.content-study-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.page-shell.reading-mode .content-study-heading {
  margin-bottom: 16px;
}

.content-study-title {
  margin: 0;
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
}

.page-shell.reading-mode .content-study-title {
  font-size: 20px;
  line-height: 28px;
}

.content-study-title::before {
  content: "学习检查器";
  display: block;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

.content-study-close {
  flex: 0 0 auto;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  padding: 0 14px;
}

.content-study-tabs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.page-shell.reading-mode .content-study-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.study-tab,
.filter-tag,
.study-toggle {
  border: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.study-tab {
  min-height: 38px;
  border-radius: 14px;
  padding: 0 12px;
  text-align: left;
}

.page-shell.reading-mode .study-tab {
  min-height: 34px;
  border-radius: 999px;
  padding: 0 8px;
  text-align: center;
}

.study-tab.active,
.filter-tag.active,
.study-toggle.active {
  border-color: rgba(255, 176, 46, 0.55);
  background: rgba(245, 166, 35, 0.1);
  color: var(--amber);
}

.content-study-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-shell.reading-mode .content-study-filters {
  gap: 6px;
}

.filter-tag,
.study-toggle {
  min-height: 30px;
  border-radius: 999px;
  padding: 0 10px;
}

.page-shell.reading-mode .filter-tag,
.page-shell.reading-mode .study-toggle {
  min-height: 28px;
  padding: 0 9px;
}

.content-study-body {
  min-height: 0;
  overflow: hidden;
  padding: 16px;
}

.page-shell.reading-mode .content-study-body {
  padding: 16px;
}

.word-cards-panel {
  height: 100%;
  min-height: 0;
}

.word-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 14px;
  height: 100%;
  overflow: hidden auto;
  padding-right: 4px;
}

.word-card {
  height: max-content;
  min-height: max-content;
  overflow: hidden;
  border: 1px solid var(--line);
  border-left: 5px solid var(--amber);
  border-radius: var(--r-md);
  background: var(--panel-soft);
  padding: 16px;
}

.word-card[data-seek] {
  cursor: pointer;
}

.word-card[data-seek]:hover {
  border-color: rgba(255, 176, 46, 0.52);
}

.page-shell.reading-mode .word-card {
  height: max-content;
  min-height: max-content;
  padding: 16px;
}

.word-card-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.word-card h4 {
  margin: 0;
  color: var(--text);
  font-size: 22px;
  line-height: 28px;
}

.page-shell.reading-mode .word-card h4 {
  font-size: 20px;
  line-height: 26px;
}

.word-status {
  display: flex;
  gap: 6px;
}

.word-status button,
.word-icon-button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
}

.word-icon-button {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
}

.word-icon-button svg {
  width: 17px;
  height: 17px;
}

.word-known {
  color: var(--cyan) !important;
}

.word-unknown {
  color: var(--rose) !important;
}

.word-status button.active {
  background: rgba(0, 0, 0, 0.06);
  font-weight: 700;
}

.word-icon-button.active {
  border-color: rgba(255, 176, 46, 0.55);
  background: rgba(245, 166, 35, 0.12);
  color: var(--amber);
}

.word-card.known {
  border-left-color: var(--cyan);
}

.word-card.unknown {
  border-left-color: var(--rose);
}

.word-card-actions {
  display: flex;
  gap: 6px;
}

.word-card.is-collapsed .word-meaning,
.word-card.is-collapsed .word-english,
.word-card.is-collapsed .word-example,
.content-hide-chinese .content-study-section .word-meaning,
.content-hide-chinese .content-study-section .word-example-zh,
.content-hide-notes .content-study-section .word-example {
  display: none;
}

.word-phonetic-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.word-phonetic,
.word-meaning,
.word-english,
.word-translation {
  color: var(--muted);
}

.word-sound-button {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.word-sound-button:hover {
  background: var(--accent-line);
  color: var(--accent-strong);
}

.word-sound-button:active {
  transform: scale(0.94);
}

/* 展开区词条的发音按钮：比学习卡上的小一号（22×22）。
   ⚠️ `.wordlist-head` 是 baseline 对齐，按钮必须自己改回 center，否则会被英文词条的大字号顶下去。 */
.wordlist-sound.word-sound-button {
  width: 22px;
  height: 22px;
  align-self: center;
  flex: none;
}

.wordlist-sound.word-sound-button svg {
  width: 14px;
  height: 14px;
}

.word-meaning {
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  margin-bottom: 12px;
}

.word-english {
  margin-bottom: 10px;
}

.word-example {
  border-radius: 16px;
  background: rgba(46, 158, 79, 0.08);
  padding: 12px;
}

.page-shell.reading-mode .word-example {
  padding: 10px;
}

.word-example p {
  margin: 0;
}

.word-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

.page-shell.reading-mode .word-card-footer {
  margin-top: 12px;
}

.study-jump {
  border: 0;
  border-radius: 999px;
  background: rgba(245, 166, 35, 0.12);
  color: var(--amber);
  font-weight: 700;
  padding: 8px 12px;
}

.caption-english .subtitle-translation,
.hide-translations .subtitle-translation,
.caption-hidden .subtitle-text,
.caption-hidden .subtitle-translation {
  display: none;
}

.caption-chinese .subtitle-text {
  display: none;
}

.large-subtitles .subtitle-text {
  font-size: calc(19px * var(--subtitle-scale, 1));
  line-height: calc(30px * var(--subtitle-scale, 1));
}

.learning-drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  background: rgba(0, 0, 0, 0.3);
}

.learning-drawer.is-open {
  display: block;
}

.drawer-panel {
  position: absolute;
  top: 24px;
  right: 24px;
  bottom: 24px;
  width: min(420px, calc(100vw - 48px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--n-0);
  box-shadow: none;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding: 16px;
}

.drawer-header h3 {
  margin: 0;
}

.drawer-close {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
}

.drawer-body {
  height: calc(100% - 65px);
  overflow: hidden auto;
  padding: 16px;
}

.drawer-stack {
  display: grid;
  gap: 12px;
}

.drawer-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel-soft);
  padding: 14px;
}

.drawer-card h4 {
  margin: 0 0 8px;
}

.drawer-card p {
  margin: 0;
  color: var(--muted);
  line-height: 22px;
}

.drawer-action-row,
.drawer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.drawer-action,
.drawer-pill {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  padding: 7px 10px;
}

.drawer-action.is-active {
  color: var(--amber);
}

.drawer-list-button {
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
}

.desktop-tool-popover {
  position: fixed;
  z-index: 90;
  display: none;
  min-width: 180px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--n-0);
  box-shadow: none;
  padding: 10px;
}

.desktop-tool-popover.is-open {
  display: block;
}

.dlp-title {
  color: var(--cyan);
  font-size: 12px;
  font-weight: 700;
  margin: 6px 8px;
}

.dlp-item {
  display: flex;
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  padding: 9px 8px;
  text-align: left;
  transition: background 140ms ease;
}

/* 悬停 / 按下都是琥珀黄（用户 2026-10-10：「应该是悬停的地方黄色 然后按下去也是黄色的」）。
   跟 `.dlp-item.active` 共用同一套配色 —— 悬停 → 按下 → 成为当前档，颜色是连续的、不会闪。
   ⚠️ 用 `.desktop-tool-popover` 作用域是为了压过 `.dlp-item.active` 的普通态。 */
.desktop-tool-popover .dlp-item:hover {
  background: rgba(245, 166, 35, 0.1);
  color: var(--amber);
}

/* 按住不放的那一下再深一点，给点触感（仍然是黄的） */
.desktop-tool-popover .dlp-item:active {
  background: rgba(245, 166, 35, 0.18);
  color: var(--amber);
}

.dlp-item.active {
  background: rgba(245, 166, 35, 0.1);
  color: var(--amber);
}

/* 「⋯ 更多」里没得点的项（比如本期没有原文链接）：保留在菜单里但置灰 */
.dlp-item.is-disabled,
.dlp-item:disabled {
  opacity: 0.42;
  cursor: default;
}

.desktop-tool-popover.more {
  min-width: 210px;
}

/* 倍速菜单：一列 14 档（照参考图的下拉列表）。太长就滚动，别把整屏撑满；
   `overscroll-behavior:contain` 防止滚到底之后把页面一起带着滚。
   ⚠️ 宽度：档位文字（`0.3x`）实测只有 31px，所以这里**不写死宽度、跟着内容走**
   （用户 2026-10-10 连说两次「太宽了 / 还是太厚了 再窄一点」：150px → 96px → 跟内容）。
   内边距压到最小、勾选列 12px；另外 **滚动条必须换成 6px 细条** ——
   Windows 默认滚动条约 15px，光它就占掉菜单六分之一宽。 */
.desktop-tool-popover.rate {
  min-width: 0;
  padding: 5px 2px;
  max-height: min(58vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #D7DAE0 transparent;
}

.desktop-tool-popover.rate::-webkit-scrollbar {
  width: 4px;
}

.desktop-tool-popover.rate::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #D7DAE0;
}

.desktop-tool-popover.rate::-webkit-scrollbar-track {
  background: transparent;
}

.desktop-tool-popover.rate .dlp-title {
  margin: 2px 3px 5px;
  font-size: 11px;
}

/* 档位数字居中、去掉勾选列（`.dlp-check` 在 rate 里不再输出），
   当前档靠 `.active` 的琥珀底 + 加粗区分 —— 跟参考图一样只靠高亮。
   ⚠️ 行高压到 ~26px 是**为了宽度**：14 档全塞进 max-height 就不用滚动条，
   而滚动条本身要占 4~6px 宽。字号 12.5px 也是这个道理（参考图里数字占满整条）。 */
.desktop-tool-popover.rate .dlp-item {
  justify-content: center;
  padding: 4px 3px;
  font-size: 12.5px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

.desktop-tool-popover.rate .dlp-item.active {
  font-weight: 700;
}

/* 「⋯ 更多」里每项的第二行说明（原来是内联的，挤成一行读不动） */
.dlp-sub {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
}

.dlp-check {
  width: 20px;
}

.dlp-divider {
  height: 1px;
  background: var(--line);
  margin: 8px 0;
}

.export-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  place-items: center;
  background: var(--n-0);
  backdrop-filter: blur(16px);
}

.export-overlay.is-open {
  display: grid;
}

.export-dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1040px, calc(100vw - 48px));
  height: min(780px, calc(100vh - 48px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: linear-gradient(135deg, var(--panel), var(--panel-soft));
  box-shadow: none;
}

.export-dialog-header,
.export-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-color: var(--line);
  padding: 20px 24px;
}

.export-dialog-header {
  border-bottom: 1px solid var(--line);
}

.export-dialog-footer {
  border-top: 1px solid var(--line);
}

.export-dialog h2 {
  margin: 0;
  font-size: 20px;
}

.export-close,
.export-dialog-btn,
.export-option-btn {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-soft);
  color: var(--text);
  padding: 9px 14px;
}

.export-dialog-body {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 20px;
  min-height: 0;
  padding: 22px 24px;
}

.export-options {
  display: grid;
  align-content: start;
  gap: 12px;
}

.export-option-btn.active {
  border-color: rgba(47, 111, 235, 0.5);
  background: rgba(47, 111, 235, 0.12);
  color: var(--cyan);
}

.export-preview {
  height: 100%;
  overflow: hidden auto;
  border-radius: 20px;
  background: #f7f4ec;
  color: var(--n-900);
  padding: 32px 40px;
}

.export-preview h3 {
  text-align: center;
}

.export-preview-rule {
  height: 1px;
  background: #c9c4b7;
  margin: 18px 0 28px;
}

.export-line {
  border-bottom: 1px solid #ddd8cc;
  padding: 16px 0;
}

.export-line time {
  color: var(--muted);
  font-family: Consolas, monospace;
  font-size: 12px;
}

.export-line p {
  margin: 8px 0 0;
}

.export-dialog-btn-primary {
  border-color: transparent;
  background: var(--amber);
  color: var(--n-900);
  font-weight: 700;
}

/* --- 「添加笔记」弹窗（同 TECo Lab：底部抽屉式 + 蓝色主按钮） --- */
.note-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(2px);
  animation: note-fade-in 160ms ease;
}
.note-modal[hidden] {
  display: none;
}

.note-sheet {
  position: relative;
  width: min(520px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  border-radius: 18px 18px 0 0;
  background: var(--card, var(--n-0));
  padding: 22px 20px 18px;
  box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.18);
  animation: note-slide-up 200ms ease;
}

/* 顶部那根小横杠（同 TECo 的 sheet 把手） */
.note-sheet::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.35);
}

.note-sheet h2 {
  margin: 8px 0 14px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink, var(--n-900));
}

.note-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted, var(--muted));
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.note-close:hover {
  background: rgba(100, 116, 139, 0.12);
}

/* 原文引用框：英文 + 中文，只读展示 */
.note-source {
  border: 1px solid var(--line, var(--n-200));
  border-radius: 10px;
  background: var(--surface, var(--n-0));
  padding: 11px 13px;
  margin-bottom: 14px;
}
.note-source-en {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 700;
  color: var(--ink, var(--n-900));
}
.note-source-zh {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted, var(--muted));
}

.note-label {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted, var(--muted));
}

.note-input {
  width: 100%;
  border: 1px solid var(--line, var(--n-200));
  border-radius: 10px;
  background: var(--card, var(--n-0));
  padding: 11px 13px;
  font: inherit;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink, var(--n-900));
  resize: vertical;
  min-height: 96px;
}
.note-input:focus {
  outline: none;
  border-color: var(--brand, #3B82F6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16);
}

.note-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}
.note-btn {
  border: 0;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.note-btn--ghost {
  background: transparent;
  color: var(--muted, var(--muted));
}
.note-btn--ghost:hover {
  background: rgba(100, 116, 139, 0.1);
}
.note-btn--primary {
  background: var(--brand, #3B82F6);
  color: var(--on-accent);
}
.note-btn--primary:hover {
  filter: brightness(1.06);
}

/* 有笔记的句子：笔图标点亮，提示「这句记过」 */
.st-act.has-note {
  color: var(--amber, #F59E0B);
}

@keyframes note-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes note-slide-up {
  from { transform: translateY(18px); opacity: 0.4; }
  to { transform: translateY(0); opacity: 1; }
}

/* 桌面端：弹窗居中，不用抽屉感 */
@media (min-width: 1025px) and (hover: hover) {
  .note-modal {
    align-items: center;
  }
  .note-sheet {
    border-radius: 16px;
    animation: note-fade-in 160ms ease;
  }
}

/* --- 手机跟读 · TECo 单句聚焦形态 ----------------------------------------
   布局对齐 TECo：视频在上，句子内容垂直居中在中间大留白里（无卡片边框感），
   麦克风沉底。注意：repeat-mode 的 .subtitle-item 是 grid 双列布局，
   聚焦卡必须整卡覆盖，否则 rf-* 子元素会被塞进格子挤成竖排。 */
@media (max-width: 1024px), (max-width: 1400px) and (hover: none) and (pointer: coarse) {
  /* ⚠️ 2026-10-13 修正：原选择器 `.subtitle-items` 在 DOM 里根本不存在（JS 里 subtitleItems
     指向的是 .subtitle-items-container），所以这条规则一直是死的 → 聚焦卡拿不到 flex 父级，
     高度只能靠 min-height:56vh 硬撑，比可视区高 92px，底部被滚出视口、视觉中心偏低。 */
  body.practice-repeat-mode .subtitle-items-container {
    display: flex;
    flex-direction: column;
    padding: 12px 14px;          /* 上下对称 → 卡片中心 = 可视区中心 */
  }
  body.practice-repeat-mode .subtitle-item.repeat-focus-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;             /* 改为铺满可视区（原来是 56vh，会溢出容器） */
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 8px 14px 0;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
  }
}

.rf-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;     /* 句子内容垂直居中（TECo 中间大留白） */
  text-align: center;
  align-items: center;
}

.rf-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--muted, var(--muted));
}
.rf-head .rf-progress {
  font-weight: 700;
  color: var(--ink, var(--n-900));
  font-size: 13px;
}
.rf-head .st-act {
  border: 0;
  background: transparent;
  color: var(--muted, var(--muted));
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
}
.rf-head .st-act svg { width: 16px; height: 16px; }
.rf-head .st-act.is-favorite { color: #EF4444; }
.rf-head .st-act.has-note { color: var(--amber, #F59E0B); }
.rf-head .st-act.is-dim { opacity: 0.45; }
.rf-head .rf-time { margin-left: auto; font-variant-numeric: tabular-nums; }

.rf-phonetic {
  margin: 12px 0 4px;
  font-size: calc(12px * var(--subtitle-scale, 1));
  line-height: 1.6;
  font-style: italic;
  color: var(--muted, var(--muted));
  word-break: break-word;
}
.rf-phonetic:empty { display: none; }

.rf-english {
  font-size: calc(23px * var(--subtitle-scale, 1));
  line-height: 1.65;
  font-weight: 600;
  overflow-wrap: anywhere;
  color: var(--ink, var(--n-900));
}
.rf-english .st-sep { color: rgba(100, 116, 139, 0.25); font-weight: 400; }

.rf-zh {
  margin-top: 10px;
  font-size: calc(14px * var(--subtitle-scale, 1));
  line-height: 1.7;
  color: var(--muted, var(--muted));
}

.rf-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-top: 16px;
}
.rf-nav-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line, var(--n-200));
  border-radius: 999px;
  background: var(--card, var(--n-0));
  color: var(--ink, var(--n-900));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.rf-nav-btn svg { width: 20px; height: 20px; }
.rf-nav-btn[data-repeat-nav="-1"] svg { transform: rotate(180deg); }
.rf-nav-btn:disabled { opacity: 0.35; cursor: default; }
.rf-mic {
  width: 62px;
  height: 62px;
}
.rf-mic svg { width: 26px; height: 26px; }

/* ⚠️ 2026-10-13：.rf-subrow（▶ 播原声 / ▶ 回放 + 「点麦克风录音」提示）已按用户要求整行删除，
   样式一并撤掉；手机跟读只剩「‹ 🎙 ›」一排。要恢复就把 markup 加回 renderRepeatFocusCard()。 */

/* 句子和按钮整组居中；可缩的配平空白先让位，再只滚动文本。
   不允许把录音/翻句按钮一同滚出视口，也不恢复已删除的底部操作行。 */
@media (max-width: 1024px), (max-width: 1400px) and (hover: none) and (pointer: coarse) {
  body.practice-repeat-mode .subtitle-items-container {
    overflow: hidden;
  }
  body.practice-repeat-mode .subtitle-item.repeat-focus-card {
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
    padding: 8px 14px;
  }
  .repeat-focus-card .rf-focus-group {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-height: 0;
    width: 100%;
  }
  .repeat-focus-card .rf-focus-group::after {
    content: "";
    flex: 0 10 28px;
    min-height: 0;
  }
  .repeat-focus-card .rf-head {
    flex: 0 0 auto;
    gap: 8px;
    white-space: nowrap;
  }
  .repeat-focus-card .rf-head .rf-time {
    font-size: 11px;
  }
  body.practice-repeat-mode .repeat-focus-card .rf-body {
    display: block;
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-line) transparent;
    text-align: center;
  }
  .repeat-focus-card .rf-text {
    width: 100%;
  }
  .repeat-focus-card .rf-body:focus-visible {
    outline: 2px solid var(--accent-line);
    outline-offset: -2px;
    border-radius: 6px;
  }
  body.practice-repeat-mode .repeat-focus-card .rf-nav {
    flex: 0 0 auto;
    width: 100%;
    justify-content: center;
  }
  .repeat-focus-card .rf-nav > button {
    flex-shrink: 0;
  }
}

/* 桌面不受影响：聚焦卡只在手机端使用 */
@media (min-width: 1025px) and (hover: hover) {
  .repeat-focus-card { display: none; }
}

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 120;
  opacity: 0;
  transform: translateY(10px);
  border-radius: var(--r-sm);
  background: var(--tooltip-bg);
  color: var(--on-accent);
  font-weight: 600;
  padding: 10px 16px;
  transition: 180ms ease;
  /* 提示条只是通知，绝不能挡住下面的按钮（移动端会压住底部控制条） */
  pointer-events: none;
}

/* 移动端：抬到底部控制条上方 */
@media (max-width: 1024px), (max-width: 1400px) and (hover: none) and (pointer: coarse) {
  .toast {
    right: 12px;
    bottom: calc(126px + env(safe-area-inset-bottom));
  }
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1289px) and (min-width: 1025px) and (hover: hover) {
  .page-shell,
  .page-shell.reading-mode {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 0;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 100vh;
    margin: 0;
    padding: 0 16px;
    overflow: visible;
  }

  .video-section,
  .page-shell.reading-mode .video-section {
    display: block;
    grid-column: 1;
    grid-row: 1;
    height: auto;
    min-height: 0;
    padding: 0;
  }

  .subtitle-section,
  .content-study-section {
    height: auto;
    min-height: 0;
  }

  .video-player,
  .page-shell.reading-mode .video-player {
    position: fixed;
    top: 8px;
    right: 16px;
    z-index: 60;
    width: clamp(260px, 28.6vw, 320px);
    max-width: calc(100vw - 32px);
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    box-shadow: none;
    cursor: grab;
    touch-action: none;
    user-select: none;
  }

  .video-player.is-dragging {
    cursor: grabbing;
  }

  .video-player::before {
    display: none;
  }

  .video-wrapper,
  .lesson-video,
  .video-controls-overlay {
    height: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
  }

  .lesson-video {
    object-fit: cover;
  }

  .video-controls-overlay {
    display: none;
  }

  .practice-floating-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: var(--n-0);
    color: var(--on-accent);
    padding: 0;
  }

  .practice-floating-close svg {
    width: 22px;
    height: 22px;
  }

  body.practice-video-closed .video-player {
    display: none;
  }

  .description-card {
    display: block;
    width: min(642px, calc(100vw - 464px));
    min-height: 126px;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 18px 22px;
  }

  body.practice-video-closed .description-card {
    width: min(720px, 100%);
  }

  .video-header {
    display: none;
  }

  .subtitle-section,
  .page-shell.reading-mode .subtitle-section {
    display: block;
    grid-column: 1;
    grid-row: 2;
    width: calc(100% + 32px);
    height: auto;
    min-height: 0;
    margin: 0 -16px;
    border-radius: 0;
    box-shadow: none;
  }

  .subtitle-items-container,
  .page-shell.reading-mode .subtitle-items-container {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .page-shell.reading-mode .content-study-section {
    display: none;
  }

}

@media (max-width: 1024px), (max-width: 1400px) and (hover: none) and (pointer: coarse), (min-width: 1290px) {
  body:not(.practice-blank-mode) .video-player {
    inset: auto !important;
  }
}

@media (max-width: 1024px), (max-width: 1400px) and (hover: none) and (pointer: coarse) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .mobile-top-tab {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 54px;
    border-bottom: 1px solid var(--line);
    background: var(--n-0);
    padding: 0 16px;
  }

  .mobile-top-back {
    width: 34px;
    height: 34px;
  }

  .mobile-top-title {
    flex: 1 1 auto;
    font-size: 18px;
    font-weight: 700;
  }

  .mobile-settings-button {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--accent);
    padding: 0;
  }

  .mobile-settings-button svg {
    width: 23px;
    height: 23px;
  }

   .page-shell,
   .page-shell.reading-mode {
     display: flex;
     flex-direction: column;
     width: 100%;
     max-width: 100%;
     /* 固定高度：满- 顶部- 底部工具栏，让视频固定、字幕滚*/
     height: calc(100vh - 54px);
     gap: 14px;
     /* 底部工具栏 = 进度行 + 控制条，约 118px */
     padding: 14px 16px calc(118px + env(safe-area-inset-bottom));
     overflow: hidden;
   }

   .video-header,
   .description-card {
     display: none;
   }

   /* 视频区：自然高度，不参与滚动 */
   .video-section {
     display: block;
     flex: 0 0 auto;
     height: auto;
     min-height: 0;
   }

   .page-shell.reading-mode .video-section {
     display: block;
     flex: 0 0 auto;
     height: auto;
   }

   .video-player,
   .video-wrapper,
   .lesson-video {
     height: auto;
     aspect-ratio: 16 / 9;
     border-radius: 24px;
   }

   .video-controls-overlay {
     display: none;
   }

   /* 移动端没有浮在播放区上的控制条，逐句英文就能用满整高 */
   .audio-lyrics {
     inset: 0;
     padding: 0 8%;
   }

   .audio-lyric-text {
     font-size: clamp(17px, 5.6cqw, 34px);
   }

   /* 字幕区：占据剩余空间，内部滚*/
   .subtitle-section,
   .content-study-section {
     flex: 1 1 auto;
     min-height: 0;
     height: auto;
     max-height: none;
     overflow: hidden;
     border-radius: 24px;
   }

   .content-study-section {
     order: 2;
     max-height: none;
     overflow: hidden;
   }

   .subtitle-section {
     order: 3;
   }

   .page-shell.reading-mode .subtitle-section {
     display: none;
   }

   /* 字幕列表容器：占满字幕区高度，可滚动 */
   .subtitle-list {
     height: 100%;
   }

   .subtitle-list-header {
     padding: 12px 14px;
     flex: 0 0 auto;
   }

   .subtitle-list-title {
     font-size: 15px;
   }

   .subtitle-list-title::before {
     display: none;
   }

   .subtitle-header-controls {
     gap: 2px;
   }

   .toggle-button-icon {
     width: 28px;
     height: 28px;
   }

   /* 字幕列表：占满剩余空间，内部滚动 */
   .subtitle-display,
   .subtitle-list {
     display: flex;
     flex-direction: column;
     width: 100%;
     height: 100%;
   }

   .subtitle-list-header {
     min-height: 66px;
     padding: 14px;
     flex: 0 0 auto;
   }

   .subtitle-items-container::before {
     left: 62px;
   }

  .subtitle-item {
    padding: 12px 13px 9px;
    margin-bottom: 9px;
  }

  .subtitle-text {
    font-size: calc(15px * var(--subtitle-scale, 1));
    line-height: calc(26px * var(--subtitle-scale, 1));
  }

  .content-study-tabs {
    grid-template-columns: 1fr;
  }

  .word-cards-grid {
    max-height: calc(72vh - 220px);
    overflow: hidden auto;
  }

  .mobile-bottom-toolbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    display: grid;
    gap: 10px;
    border-top: 1px solid var(--line);
    background: var(--n-0);
    padding: 14px;
    backdrop-filter: blur(18px);
  }

  .mobile-secondary-toolbar,
  .mobile-primary-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .toolbar-icon-btn {
    display: inline-grid;
    place-items: center;
    min-width: 42px;
    border: 0;
    background: transparent;
    color: var(--muted);
  }

  .toolbar-label {
    display: block;
    font-size: 11px;
    margin-top: 4px;
  }

  .mobile-toolbar-progress {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 8px;
  }

  .mobile-toolbar-time {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
  }

  .mobile-toolbar-current-time {
    color: var(--amber);
  }

  .mobile-toolbar-progress-input {
    width: 100%;
    accent-color: var(--amber);
  }

  .toolbar-play-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--amber);
    color: var(--n-900);
  }

  .mobile-settings-sheet {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: block;
    pointer-events: none;
  }

  .mobile-settings-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 180ms ease;
  }

  .mobile-settings-panel {
    position: absolute;
    right: 10px;
    bottom: 0;
    left: 10px;
    display: grid;
    gap: 10px;
    border: 1px solid #d9dee8;
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    background: #f6f7fb;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.18);
    transform: translateY(110%);
    transition: transform 220ms ease;
  }

  .mobile-settings-sheet.is-open {
    pointer-events: auto;
  }

  .mobile-settings-sheet.is-open .mobile-settings-backdrop {
    opacity: 1;
  }

  .mobile-settings-sheet.is-open .mobile-settings-panel {
    transform: translateY(0);
  }

  .mobile-sheet-handle {
    justify-self: center;
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: #cfd5df;
    margin: 0 0 3px;
  }

  .mobile-setting-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    border: 1px solid var(--n-200);
    border-radius: 12px;
    background: var(--n-0);
    color: var(--n-900);
    padding: 10px 14px;
  }

  .mobile-setting-label {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 92px;
    color: var(--n-900);
    font-size: 15px;
    font-weight: 780;
  }

  .mobile-setting-label svg {
    width: 23px;
    height: 23px;
    color: var(--n-600);
  }

  .mobile-segmented {
    justify-self: end;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    min-width: 178px;
    border-radius: 999px;
    background: #eef1f5;
    padding: 3px;
  }

  .mobile-segmented button {
    min-height: 32px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    padding: 0 12px;
  }

  .mobile-segmented button.active {
    background: #16b983;
    color: var(--on-accent);
    box-shadow: 0 6px 14px rgba(22, 185, 131, 0.22);
  }

  .mobile-switch {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    width: 54px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: #e5e9ef;
    padding: 3px;
    transition: background 160ms ease;
  }

  .mobile-switch span {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--n-0);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
    transition: transform 160ms ease;
  }

  .mobile-switch.is-on {
    background: #16b983;
  }

  .mobile-switch.is-on span {
    transform: translateX(22px);
  }

  .mobile-rate-slider {
    width: 100%;
    min-width: 0;
    accent-color: #16b983;
  }

  .mobile-rate-value {
    min-width: 44px;
    color: #1f2937;
    font-size: 14px;
    text-align: right;
  }

  .export-dialog {
    width: calc(100vw - 24px);
    height: calc(100vh - 24px);
    border-radius: var(--r-md);
  }

  .export-dialog-body {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
  }

  .export-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

   .export-preview {
     padding: 22px;
   }
}

/* ============================================
   超窄屏适配 480px）：让底部工具栏更紧   ============================================ */
@media (max-width: 480px) {
   .page-shell,
   .page-shell.reading-mode {
     padding: 14px 12px calc(118px + env(safe-area-inset-bottom));
   }

   /* 隐藏次要按钮的标签文字，只留图标 */
   .toolbar-label {
     display: none;
   }

   .toolbar-icon-btn {
     min-width: 36px;
   }

   /* 秒级工具栏按钮缩*/
   .toolbar-secondary-btn svg {
     width: 18px;
     height: 18px;
   }

   /* 主工具栏按钮缩小 */
   .toolbar-primary-btn svg {
     width: 20px;
     height: 20px;
   }

   .toolbar-play-btn {
     width: 50px;
     height: 50px;
   }

   .mobile-bottom-toolbar {
     padding: 10px 12px;
     gap: 10px;
   }

   .mobile-secondary-toolbar,
   .mobile-primary-toolbar {
     gap: 6px;
   }

   /* 秒级工具栏只保留核心 3 个：字幕、倍速、闪*/
   .mobile-secondary-toolbar [data-action="favorites"],
   .mobile-secondary-toolbar [data-action="practice"] {
     display: none;
   }

   /* 隐藏设置按钮（用底部 sheet 代替*/
   .mobile-settings-button {
     width: 36px;
     height: 36px;
   }

   .mobile-settings-button svg {
     width: 20px;
     height: 20px;
   }

   /* 视频播放区圆角加*/
   .video-player,
   .video-wrapper,
   .lesson-video {
     border-radius: 20px;
   }

   /* 字幕区圆角加*/
   .subtitle-section,
   .content-study-section {
     border-radius: 20px;
   }

   /* 字幕项间距缩*/
   .subtitle-item {
     padding: 11px 12px 8px;
     margin-bottom: 8px;
   }

   .subtitle-text {
     font-size: calc(14px * var(--subtitle-scale, 1));
     line-height: calc(22px * var(--subtitle-scale, 1));
   }

   .subtitle-translation {
     font-size: calc(12px * var(--subtitle-scale, 1));
     line-height: calc(18px * var(--subtitle-scale, 1));
   }

   /* 设置面板文字缩小 */
   .mobile-setting-label {
     font-size: 14px;
   }

   .mobile-setting-label svg {
     width: 20px;
     height: 20px;
   }

   .mobile-segmented {
     min-width: 140px;
   }

   .mobile-segmented button {
     font-size: 12px;
     padding: 0 8px;
   }
}

/* ============================================
   中等窄屏81px - 768px）：保持标签但缩小间   ============================================ */
@media (max-width: 600px) {
   .toolbar-icon-btn {
     min-width: 38px;
   }

   .toolbar-label {
     font-size: 10px;
     margin-top: 2px;
   }

   .mobile-bottom-toolbar {
     padding: 12px 14px;
   }
}

/* Balanced tri-pane reading mode: video + transcript + study stay visible together. */
@media (min-width: 1290px) and (max-width: 1439px) {
  .page-shell.reading-mode {
    grid-template-columns: minmax(0, 1fr) 350px 380px;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
    width: 100%;
    height: 100vh;
    max-width: none;
    padding: 20px;
    margin: 0;
  }

  .page-shell.reading-mode .video-section {
    grid-column: 1;
    grid-row: 2;
    grid-template-rows: auto auto auto;
    align-content: start;
    gap: 12px;
    height: 100%;
  }

  .page-shell.reading-mode .video-player {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .page-shell.reading-mode .video-wrapper,
  .page-shell.reading-mode .lesson-video,
  .page-shell.reading-mode .video-controls-overlay {
    height: 100%;
  }

  .page-shell.reading-mode .lesson-video {
    object-fit: contain;
  }

  .page-shell.reading-mode .subtitle-section {
    display: block;
    grid-column: 2;
    grid-row: 2;
    height: 100%;
    border-radius: 24px;
  }

  .page-shell.reading-mode .content-study-section {
    display: grid;
    grid-column: 3;
    grid-row: 2;
    height: 100%;
    border-radius: 24px;
  }
}

@media (min-width: 1440px) {
  .page-shell.reading-mode {
    grid-template-columns: minmax(0, 1fr) 400px 420px;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 16px;
    width: min(100%, 2040px);
    height: 100vh;
    max-width: 2040px;
    padding: 20px;
    margin: 0;
  }

  .page-shell.reading-mode .video-section {
    grid-column: 1;
    grid-row: 2;
    grid-template-rows: auto auto auto;
    align-content: start;
    gap: 12px;
    height: 100%;
  }

  .page-shell.reading-mode .video-player {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .page-shell.reading-mode .video-wrapper,
  .page-shell.reading-mode .lesson-video,
  .page-shell.reading-mode .video-controls-overlay {
    height: 100%;
  }

  .page-shell.reading-mode .lesson-video {
    object-fit: contain;
  }

  .page-shell.reading-mode .subtitle-section {
    display: block;
    grid-column: 2;
    grid-row: 2;
    height: 100%;
    border-radius: 24px;
  }

  .page-shell.reading-mode .content-study-section {
    display: grid;
    grid-column: 3;
    grid-row: 2;
    height: 100%;
    border-radius: 24px;
  }

  .page-shell.reading-mode .subtitle-list-header {
    min-height: 76px;
    padding: 16px 14px 14px;
  }

  .page-shell.reading-mode .subtitle-header-controls {
    gap: 4px;
  }

  .page-shell.reading-mode .subtitle-items-container {
    padding: 10px 14px 24px;
  }

  .page-shell.reading-mode .subtitle-items-container::before {
    left: 62px;
  }

  .page-shell.reading-mode .subtitle-item {
    grid-template-columns: 46px minmax(0, 1fr) 30px;
    gap: 0 12px;
    padding: 15px 0;
  }

  .page-shell.reading-mode .subtitle-item::before {
    left: 40px;
  }

  .page-shell.reading-mode .subtitle-item::after {
    left: 58px;
  }

  .page-shell.reading-mode .subtitle-text {
    font-size: calc(15px * var(--subtitle-scale, 1));
    line-height: calc(24px * var(--subtitle-scale, 1));
  }

  .page-shell.reading-mode .subtitle-translation {
    font-size: calc(12px * var(--subtitle-scale, 1));
    line-height: calc(20px * var(--subtitle-scale, 1));
  }

  .page-shell.reading-mode .content-study-header {
    padding: 15px;
  }

  .page-shell.reading-mode .content-study-heading {
    margin-bottom: 12px;
  }

  .page-shell.reading-mode .content-study-title {
    font-size: 18px;
    line-height: 25px;
  }

  .page-shell.reading-mode .content-study-tabs {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 10px;
  }

  .page-shell.reading-mode .study-tab {
    min-height: 34px;
    border-radius: 14px;
    padding: 0 12px;
    text-align: left;
  }

  .page-shell.reading-mode .content-study-filters {
    gap: 6px;
  }

  .page-shell.reading-mode .filter-tag,
  .page-shell.reading-mode .study-toggle {
    min-height: 28px;
    padding: 0 8px;
  }

  .page-shell.reading-mode .content-study-body {
    padding: 12px;
  }

  .page-shell.reading-mode .word-card {
    height: max-content;
    min-height: max-content;
    padding: 14px;
  }

  .page-shell.reading-mode .word-card h4 {
    font-size: 20px;
    line-height: 26px;
  }

  .page-shell.reading-mode .word-example {
    padding: 10px;
  }
}

body.practice-blank-mode .subtitle-section {
  border-color: rgba(182, 197, 214, 0.26);
  background: var(--n-0);
  color: var(--text);
}

body.practice-blank-mode .subtitle-list-header {
  min-height: 74px;
  border-bottom-color: var(--line);
  background: var(--n-0);
}

body.practice-blank-mode .subtitle-list-title {
  color: var(--on-accent);
}

body.practice-blank-mode .subtitle-list-title::before {
  content: "填空练习";
  color: var(--accent);
}

body.practice-blank-mode .toggle-button-icon {
  border-color: var(--line);
  background: var(--n-0);
  color: var(--n-600);
}

body.practice-blank-mode .toggle-button-icon:hover,
body.practice-blank-mode .toggle-button-icon.active,
body.practice-blank-mode .toggle-button-icon.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

body.practice-blank-mode .subtitle-items-container {
  height: calc(100% - 74px);
  padding: 12px 14px 28px;
  background: linear-gradient(180deg, var(--n-0), var(--n-0));
}

body.practice-blank-mode .subtitle-items-container::before,
body.practice-blank-mode .subtitle-item::before,
body.practice-blank-mode .subtitle-item::after {
  display: none;
}

.practice-inline-banner {
  position: sticky;
  top: 8px;
  z-index: 2;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 10px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 700;
  line-height: 28px;
  padding: 0 16px;
  box-shadow: 0 8px 18px rgba(29, 95, 66, 0.18);
}

body.practice-blank-mode .subtitle-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 0 12px;
  align-items: start;
  margin: 0 0 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--n-0);
  box-shadow: 0 10px 24px rgba(25, 44, 72, 0.06);
  padding: 16px;
}

body.practice-blank-mode .subtitle-item.is-active {
  border-color: var(--accent-line);
  background: var(--n-100);
}

body.practice-blank-mode .subtitle-time {
  grid-column: 1;
  grid-row: 1;
  color: #337df1;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}

body.practice-blank-mode .subtitle-favorite-btn {
  grid-column: 2;
  grid-row: 1 / span 4;
  align-self: center;
  width: 36px;
  height: 36px;
  border-color: var(--line);
  background: var(--n-0);
  color: var(--muted);
  box-shadow: 0 8px 18px rgba(25, 44, 72, 0.08);
}

body.practice-blank-mode .subtitle-favorite-btn.is-favorite {
  color: #f7a11b;
}

body.practice-blank-mode .subtitle-text {
  grid-column: 1;
  color: var(--on-accent);
  font-size: calc(18px * var(--subtitle-scale, 1));
  font-weight: 760;
  line-height: calc(30px * var(--subtitle-scale, 1));
  margin-top: 7px;
}

body.practice-blank-mode .subtitle-translation {
  grid-column: 1;
  color: var(--n-600);
  font-size: calc(14px * var(--subtitle-scale, 1));
  line-height: calc(24px * var(--subtitle-scale, 1));
  margin-top: 2px;
}

.practice-blank-token {
  display: inline-block;
  width: 54px;
  height: 23px;
  margin: 0 4px;
  border-radius: 6px;
  background: #c9f7df;
  vertical-align: -5px;
}

.practice-blank-token-phrase {
  width: 64px;
  background: #ffe8c9;
}

.practice-card-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(300px, 100%);
  min-height: 54px;
  margin-top: 13px;
  border-radius: 12px;
  background: var(--n-100);
  padding: 9px 14px;
}

.practice-round-btn {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 0;
  border-radius: 50%;
  color: var(--on-accent);
  padding: 0;
  box-shadow: 0 8px 16px rgba(25, 44, 72, 0.16);
}

.practice-round-btn svg {
  width: 17px;
  height: 17px;
}

.practice-play-btn {
  background: #337df1;
}

.practice-record-btn {
  background: #ff3e4f;
}

.practice-replay-btn {
  background: var(--line);
  color: var(--muted);
  box-shadow: none;
}

.practice-replay-btn:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.practice-fill-panel {
  display: grid;
  gap: 12px;
}

.practice-fill-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--n-0);
  color: var(--text);
  padding: 15px;
}

.practice-fill-time {
  color: #337df1;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
}

.practice-fill-star {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--n-0);
  color: var(--muted);
}

.practice-fill-main {
  padding-right: 42px;
  margin-top: 8px;
  color: var(--on-accent);
  font-size: 18px;
  font-weight: 760;
  line-height: 30px;
}

.practice-fill-sub {
  padding-right: 42px;
  color: var(--n-600);
  font-size: 14px;
  line-height: 24px;
}

body.practice-blank-mode.caption-chinese .subtitle-text,
body.practice-blank-mode.caption-hidden .subtitle-text,
body.practice-blank-mode.caption-hidden .subtitle-translation {
  display: block;
}

body.practice-blank-mode .page-shell.reading-mode .subtitle-items-container {
  height: calc(100% - 74px);
  padding: 10px;
}

body.practice-blank-mode .page-shell.reading-mode .subtitle-item {
  grid-template-columns: minmax(0, 1fr) 36px;
  gap: 0 10px;
  padding: 14px;
}

body.practice-blank-mode .page-shell.reading-mode .subtitle-text {
  font-size: calc(16px * var(--subtitle-scale, 1));
  line-height: calc(27px * var(--subtitle-scale, 1));
}

body.practice-blank-mode .page-shell.reading-mode .subtitle-translation {
  font-size: calc(12px * var(--subtitle-scale, 1));
  line-height: calc(21px * var(--subtitle-scale, 1));
}

body.practice-blank-mode .page-shell.reading-mode .practice-card-actions {
  width: 100%;
  gap: 12px;
}

/* 上下对称；聚焦卡在内部用可缩空白配平，不再靠固定底部 padding。 */
body.practice-repeat-mode .subtitle-items-container {
  padding: 10px 14px;
}

body.practice-repeat-mode .subtitle-items-container::before,
body.practice-repeat-mode .subtitle-item::before,
body.practice-repeat-mode .subtitle-item::after {
  display: none;
}

body.practice-repeat-mode .subtitle-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 0 12px;
  align-items: start;
  margin: 0 0 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-soft);
  padding: 16px;
}

body.practice-repeat-mode .subtitle-item.is-active {
  border-color: rgba(47, 111, 235, 0.28);
  background: rgba(47, 111, 235, 0.09);
}

body.practice-repeat-mode .subtitle-time {
  grid-column: 1;
  grid-row: 1;
  color: var(--cyan);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}

body.practice-repeat-mode .subtitle-text {
  grid-column: 1;
  color: var(--text);
  font-size: calc(17px * var(--subtitle-scale, 1));
  line-height: calc(27px * var(--subtitle-scale, 1));
  margin-top: 7px;
}

body.practice-repeat-mode .subtitle-translation {
  grid-column: 1;
  color: var(--muted);
  font-size: calc(13px * var(--subtitle-scale, 1));
  line-height: calc(22px * var(--subtitle-scale, 1));
  margin-top: 2px;
}

body.practice-repeat-mode .subtitle-favorite-btn {
  grid-column: 2;
  grid-row: 1 / span 4;
  align-self: center;
  width: 36px;
  height: 36px;
}

body.practice-repeat-mode .practice-card-actions {
  grid-column: 1 / -1;
  width: min(500px, 100%);
  margin-top: 12px;
  background: var(--panel-soft);
}

@media (max-width: 1289px) and (min-width: 1025px) and (hover: hover) {
  body.practice-blank-mode {
    background: var(--n-0);
    color: var(--text);
    overflow: auto;
  }

  body.practice-blank-mode .page-shell,
  body.practice-blank-mode .page-shell.reading-mode {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 100vh;
    gap: 0;
    margin: 0;
    padding: 0 16px 0;
    overflow: visible;
  }

  body.practice-blank-mode .video-section,
  body.practice-blank-mode .page-shell.reading-mode .video-section {
    display: block;
    grid-column: 1;
    grid-row: 1;
    height: auto;
    min-height: 0;
    padding: 0;
  }

  body.practice-blank-mode .video-header {
    display: none;
  }

  body.practice-blank-mode .video-player,
  body.practice-blank-mode .page-shell.reading-mode .video-player {
    position: fixed;
    top: 8px;
    right: 16px;
    z-index: 60;
    width: clamp(260px, 28.6vw, 320px);
    max-width: calc(100vw - 32px);
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    box-shadow: none;
    cursor: grab;
    touch-action: none;
    user-select: none;
  }

  body.practice-blank-mode .video-player.is-dragging {
    cursor: grabbing;
  }

  body.practice-blank-mode .video-player::before {
    display: none;
  }

  body.practice-blank-mode .video-wrapper,
  body.practice-blank-mode .lesson-video,
  body.practice-blank-mode .video-controls-overlay {
    height: 100%;
    border-radius: 10px;
  }

  body.practice-blank-mode .lesson-video {
    object-fit: cover;
  }

  body.practice-blank-mode .video-controls-overlay {
    display: none;
  }

  body.practice-blank-mode .practice-floating-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: var(--n-0);
    color: var(--on-accent);
    padding: 0;
  }

  body.practice-blank-mode .practice-floating-close svg {
    width: 22px;
    height: 22px;
  }

  body.practice-blank-mode.practice-video-closed .video-player {
    display: none;
  }

  body.practice-blank-mode .description-card {
    display: block;
    width: min(642px, calc(100vw - 464px));
    min-height: 126px;
    margin: 0 0 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--n-0);
    color: var(--text);
    box-shadow: 0 8px 18px rgba(17, 31, 51, 0.05);
    padding: 18px 22px;
  }

  body.practice-blank-mode.practice-video-closed .description-card {
    width: min(720px, 100%);
  }

  body.practice-blank-mode .description-content {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 14px;
  }

  body.practice-blank-mode .description-icon {
    width: 30px;
    height: 30px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body.practice-blank-mode .description-text h4 {
    color: var(--on-accent);
    font-size: 18px;
    line-height: 22px;
    margin-bottom: 4px;
  }

  body.practice-blank-mode .description-text p {
    color: var(--n-600);
    font-size: 13px;
    line-height: 22px;
  }

  body.practice-blank-mode .subtitle-section,
  body.practice-blank-mode .page-shell.reading-mode .subtitle-section {
    display: block;
    grid-column: 1;
    grid-row: 2;
    width: calc(100% + 32px);
    height: auto;
    min-height: 0;
    margin: 0 -16px;
    border-width: 1px 0 0;
    border-radius: 0;
    background: var(--n-0);
    box-shadow: none;
  }

  body.practice-blank-mode .subtitle-list-header {
    min-height: 70px;
    padding: 20px;
    border-bottom: 1px solid #e5e7eb;
    background: var(--n-0);
  }

  body.practice-blank-mode .subtitle-list-title::before {
    content: none;
  }

  body.practice-blank-mode .subtitle-header-controls {
    display: none;
  }

  body.practice-blank-mode .subtitle-items-container,
  body.practice-blank-mode .page-shell.reading-mode .subtitle-items-container {
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 0 16px 24px;
    background: var(--n-0);
  }

  body.practice-blank-mode .practice-inline-banner {
    display: none;
  }

  body.practice-blank-mode .subtitle-item,
  body.practice-blank-mode .page-shell.reading-mode .subtitle-item {
    grid-template-columns: minmax(0, 1fr) 40px;
    min-height: 96px;
    margin: 0 0 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--n-0);
    box-shadow: none;
    padding: 14px 16px;
  }

  body.practice-blank-mode .subtitle-item.is-active {
    border-color: #f1dc8a;
    background: var(--amber-soft);
  }

  body.practice-blank-mode .subtitle-time {
    color: var(--accent);
    font-size: 12px;
    line-height: 18px;
  }

  body.practice-blank-mode .subtitle-text,
  body.practice-blank-mode .page-shell.reading-mode .subtitle-text {
    color: var(--on-accent);
    font-size: calc(18px * var(--subtitle-scale, 1));
    font-weight: 760;
    line-height: calc(30px * var(--subtitle-scale, 1));
    margin-top: 6px;
  }

  body.practice-blank-mode .subtitle-translation,
  body.practice-blank-mode .page-shell.reading-mode .subtitle-translation {
    color: var(--n-600);
    font-size: calc(14px * var(--subtitle-scale, 1));
    line-height: calc(24px * var(--subtitle-scale, 1));
    margin-top: 0;
  }

  body.practice-blank-mode .subtitle-favorite-btn {
    align-self: start;
    margin-top: 0;
  }

  body.practice-blank-mode .practice-card-actions {
    display: none;
  }

  body.practice-blank-mode .content-study-section,
  body.practice-blank-mode .page-shell.reading-mode .content-study-section {
    display: none;
  }
}

@media (max-width: 1024px), (max-width: 1400px) and (hover: none) and (pointer: coarse) {
  body.practice-blank-mode .subtitle-list-header {
    min-height: 66px;
  }

  body.practice-blank-mode .subtitle-items-container {
    height: auto;
    padding: 10px 12px 28px;
  }

  body.practice-blank-mode .subtitle-item {
    grid-template-columns: minmax(0, 1fr) 38px;
    border-radius: 13px;
    padding: 15px 16px;
  }

  body.practice-blank-mode .subtitle-text {
    font-size: calc(17px * var(--subtitle-scale, 1));
    line-height: calc(29px * var(--subtitle-scale, 1));
  }

  .practice-card-actions {
    width: 100%;
  }
}

/* Repeat practice stays inside the existing dynamic subtitle column, including when content reading is open. */
body.practice-repeat-mode .subtitle-item,
body.practice-repeat-mode .page-shell.reading-mode .subtitle-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px !important;
  gap: 0 12px !important;
  align-items: start;
  min-width: 0;
}

body.practice-repeat-mode .subtitle-time,
body.practice-repeat-mode .subtitle-text,
body.practice-repeat-mode .subtitle-translation,
body.practice-repeat-mode .practice-card-actions,
body.practice-repeat-mode .page-shell.reading-mode .subtitle-time,
body.practice-repeat-mode .page-shell.reading-mode .subtitle-text,
body.practice-repeat-mode .page-shell.reading-mode .subtitle-translation,
body.practice-repeat-mode .page-shell.reading-mode .practice-card-actions {
  grid-column: 1 !important;
  min-width: 0;
  max-width: 100%;
  word-break: normal;
  overflow-wrap: normal;
}

body.practice-repeat-mode .subtitle-text,
body.practice-repeat-mode .page-shell.reading-mode .subtitle-text {
  white-space: normal;
}

body.practice-repeat-mode .subtitle-text-selectable,
body.practice-repeat-mode .word-highlight,
body.practice-repeat-mode .phrase-highlight {
  display: inline;
}

body.practice-repeat-mode .subtitle-favorite-btn,
body.practice-repeat-mode .page-shell.reading-mode .subtitle-favorite-btn {
  grid-column: 2 !important;
  grid-row: 1 / span 4 !important;
  justify-self: center;
  align-self: center;
}

body.practice-repeat-mode .practice-card-actions,
body.practice-repeat-mode .page-shell.reading-mode .practice-card-actions {
  display: flex;
  width: min(500px, 100%);
}

@media (min-width: 1025px) and (hover: hover) {
  body.practice-repeat-mode .page-shell.reading-mode .subtitle-section {
    display: block;
  }

  body.practice-repeat-mode .page-shell.reading-mode .content-study-section {
    display: grid;
  }

  body.practice-repeat-mode .page-shell.reading-mode .subtitle-section,
  body.practice-repeat-mode .page-shell.reading-mode .content-study-section {
    border-color: var(--line);
    background: var(--n-0);
    color: var(--text);
  }

  body.practice-repeat-mode .page-shell.reading-mode .subtitle-list-header,
  body.practice-repeat-mode .page-shell.reading-mode .content-study-header {
    border-bottom-color: var(--line);
    background: var(--n-0);
  }

  body.practice-repeat-mode .page-shell.reading-mode .subtitle-list-title,
  body.practice-repeat-mode .page-shell.reading-mode .content-study-title {
    color: var(--on-accent);
  }

  body.practice-repeat-mode .page-shell.reading-mode .subtitle-list-title::before {
    color: var(--accent);
  }

  body.practice-repeat-mode .page-shell.reading-mode .subtitle-items-container {
    background: linear-gradient(180deg, var(--n-0), var(--n-0));
  }

  body.practice-repeat-mode .page-shell.reading-mode .subtitle-item {
    margin: 0 0 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--n-0);
    box-shadow: none;
    padding: 16px;
  }

  body.practice-repeat-mode .page-shell.reading-mode .subtitle-item.is-active {
    border-color: #d9e5f5;
    background: var(--n-100);
  }

  body.practice-repeat-mode .page-shell.reading-mode .subtitle-text {
    color: var(--on-accent);
    font-size: calc(17px * var(--subtitle-scale, 1));
    font-weight: 760;
    line-height: calc(28px * var(--subtitle-scale, 1));
  }

  body.practice-repeat-mode .page-shell.reading-mode .subtitle-translation {
    color: var(--n-600);
    font-size: calc(14px * var(--subtitle-scale, 1));
    line-height: calc(23px * var(--subtitle-scale, 1));
  }

  body.practice-repeat-mode .page-shell.reading-mode .practice-card-actions {
    min-height: 54px;
    border-radius: 10px;
    background: var(--n-100);
  }

  body.practice-repeat-mode .page-shell.reading-mode .word-highlight,
  body.practice-repeat-mode .page-shell.reading-mode .phrase-highlight {
    color: var(--on-accent);
  }

  body.practice-repeat-mode .page-shell.reading-mode .content-study-body {
    background: var(--n-0);
  }

  body.practice-repeat-mode .page-shell.reading-mode .study-tab,
  body.practice-repeat-mode .page-shell.reading-mode .filter-tag,
  body.practice-repeat-mode .page-shell.reading-mode .study-toggle {
    border-color: var(--line);
    background: var(--n-0);
    color: var(--n-600);
  }

  body.practice-repeat-mode .page-shell.reading-mode .study-tab.active,
  body.practice-repeat-mode .page-shell.reading-mode .filter-tag.active,
  body.practice-repeat-mode .page-shell.reading-mode .study-toggle.active {
    border-color: var(--accent);
    background: var(--ok-soft);
    color: #1f7b53;
  }

  body.practice-repeat-mode .page-shell.reading-mode .word-card {
    border-color: var(--line);
    border-left-color: #f5a623;
    background: var(--n-0);
    box-shadow: 0 10px 24px rgba(21, 34, 52, 0.08);
  }

  body.practice-repeat-mode .page-shell.reading-mode .word-card h4 {
    color: var(--on-accent);
  }

  body.practice-repeat-mode .page-shell.reading-mode .word-phonetic,
  body.practice-repeat-mode .page-shell.reading-mode .word-meaning,
  body.practice-repeat-mode .page-shell.reading-mode .word-english,
  body.practice-repeat-mode .page-shell.reading-mode .word-translation {
    color: var(--n-600);
  }

  body.practice-repeat-mode .page-shell.reading-mode .word-meaning {
    border-bottom-color: var(--line);
  }

  body.practice-repeat-mode .page-shell.reading-mode .word-example {
    background: var(--ok-soft);
    color: #3D3D3D;
  }

  body.practice-repeat-mode .page-shell.reading-mode .word-status button,
  body.practice-repeat-mode .page-shell.reading-mode .word-icon-button {
    border-color: var(--line);
    background: var(--n-0);
    color: var(--muted);
  }

  body.practice-repeat-mode .page-shell.reading-mode .study-jump {
    background: var(--ok-soft);
    color: var(--accent);
  }
}

@media (max-width: 1289px) and (min-width: 1025px) and (hover: hover) {
  body.practice-repeat-mode .page-shell.reading-mode {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 16px;
    padding: 0 16px 24px;
  }

  body.practice-repeat-mode .page-shell.reading-mode .video-section {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  body.practice-repeat-mode .page-shell.reading-mode .description-card {
    width: min(642px, calc(50vw - 24px));
  }

  body.practice-repeat-mode .page-shell.reading-mode .subtitle-section {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    height: calc(100vh - 156px);
    margin: 0;
    border-width: 1px;
    border-radius: 18px;
    overflow: hidden;
  }

  body.practice-repeat-mode .page-shell.reading-mode .content-study-section {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    height: calc(100vh - 156px);
    border-radius: 18px;
    overflow: hidden;
  }

  body.practice-repeat-mode .page-shell.reading-mode .subtitle-items-container,
  body.practice-repeat-mode .page-shell.reading-mode .content-study-body {
    height: calc(100% - 76px);
    overflow: hidden auto;
  }
}

/* Fill-blank practice uses the dark study surface instead of the old white exercise page. */
body.practice-blank-mode {
  background:
    none,
    linear-gradient(135deg, var(--n-0) 0%, var(--n-0) 50%, var(--n-0) 100%) !important;
  color: var(--text);
}

body.practice-blank-mode .mobile-top-tab {
  border-bottom-color: var(--line);
  background: var(--n-0);
  color: var(--text);
}

body.practice-blank-mode .subtitle-section,
body.practice-blank-mode .page-shell.reading-mode .subtitle-section {
  border-color: var(--line) !important;
  background: var(--panel) !important;
  color: var(--text) !important;
}

body.practice-blank-mode .subtitle-list-header,
body.practice-blank-mode .page-shell.reading-mode .subtitle-list-header {
  border-bottom-color: var(--line) !important;
  background: var(--panel) !important;
}

body.practice-blank-mode .subtitle-list-title,
body.practice-blank-mode .page-shell.reading-mode .subtitle-list-title {
  color: var(--text) !important;
}

body.practice-blank-mode .subtitle-list-title::before,
body.practice-blank-mode .page-shell.reading-mode .subtitle-list-title::before {
  color: var(--cyan) !important;
}

body.practice-blank-mode .subtitle-items-container,
body.practice-blank-mode .page-shell.reading-mode .subtitle-items-container {
  background: linear-gradient(180deg, var(--n-0), var(--n-0)) !important;
}

body.practice-blank-mode .toggle-button-icon,
body.practice-blank-mode .page-shell.reading-mode .toggle-button-icon {
  border-color: var(--line) !important;
  background: var(--panel-soft) !important;
  color: var(--muted) !important;
}

body.practice-blank-mode .toggle-button-icon:hover,
body.practice-blank-mode .toggle-button-icon.active,
body.practice-blank-mode .toggle-button-icon.is-active,
body.practice-blank-mode .page-shell.reading-mode .toggle-button-icon:hover,
body.practice-blank-mode .page-shell.reading-mode .toggle-button-icon.active,
body.practice-blank-mode .page-shell.reading-mode .toggle-button-icon.is-active {
  border-color: var(--line-strong) !important;
  background: rgba(46, 158, 79, 0.12) !important;
  color: var(--cyan) !important;
}

body.practice-blank-mode .subtitle-item,
body.practice-blank-mode .page-shell.reading-mode .subtitle-item {
  border-color: rgba(184, 204, 211, 0.18) !important;
  background: var(--n-0) !important;
  color: var(--text) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16) !important;
}

body.practice-blank-mode .subtitle-item.is-active,
body.practice-blank-mode .page-shell.reading-mode .subtitle-item.is-active {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
}

body.practice-blank-mode .subtitle-time,
body.practice-blank-mode .page-shell.reading-mode .subtitle-time {
  color: var(--cyan) !important;
}

body.practice-blank-mode .subtitle-text,
body.practice-blank-mode .page-shell.reading-mode .subtitle-text {
  color: var(--text) !important;
}

body.practice-blank-mode .subtitle-translation,
body.practice-blank-mode .page-shell.reading-mode .subtitle-translation {
  color: var(--muted) !important;
}

body.practice-blank-mode .subtitle-favorite-btn,
body.practice-blank-mode .page-shell.reading-mode .subtitle-favorite-btn {
  border-color: var(--line) !important;
  background: var(--panel-soft) !important;
  color: var(--muted) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2) !important;
}

body.practice-blank-mode .subtitle-favorite-btn.is-favorite,
body.practice-blank-mode .page-shell.reading-mode .subtitle-favorite-btn.is-favorite {
  color: var(--amber) !important;
}

body.practice-blank-mode .practice-card-actions,
body.practice-blank-mode .page-shell.reading-mode .practice-card-actions {
  background: #EDEDEE !important;
}

body.practice-blank-mode .practice-blank-token {
  background: rgba(78, 235, 172, 0.72);
}

body.practice-blank-mode[data-blank-theme="classic"] .practice-blank-token-phrase {
  background: rgba(255, 201, 117, 0.7);
}

body.practice-blank-mode .description-card,
body.practice-blank-mode .page-shell.reading-mode .description-card {
  border: none !important;
  background: transparent !important;
  color: var(--n-900) !important;
}

body.practice-blank-mode .description-text h4 {
  color: var(--n-900) !important;
}

body.practice-blank-mode .description-text p {
  color: var(--n-800) !important;
}

.feature-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.feature-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel-soft);
  padding: 13px;
}

.feature-check {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: rgba(46, 158, 79, 0.12);
  color: var(--cyan);
  font-weight: 700;
}

.feature-card h4 {
  margin: 0 0 5px;
  color: var(--text);
  font-size: 15px;
}

.feature-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 18px;
}

.definition-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel-soft);
  padding: 16px;
}

.definition-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.definition-card h4 {
  margin: 10px 0 6px;
  color: var(--text);
  font-size: 28px;
  line-height: 1.1;
}

.definition-phonetic,
.definition-sub {
  color: var(--muted);
}

.definition-main {
  color: var(--text);
  font-size: 16px;
  font-weight: 760;
}

.definition-example {
  margin-top: 14px;
  border-left: 3px solid var(--cyan);
  border-radius: 12px;
  background: rgba(46, 158, 79, 0.08);
  padding: 12px;
}

.definition-card p {
  margin: 8px 0 0;
  line-height: 1.6;
}

.definition-jump {
  margin-top: 16px;
}

.word-highlight,
.phrase-highlight {
  cursor: pointer;
}

.practice-record-btn.is-recording {
  background: #f97316;
  animation: recordingPulse 1s ease-in-out infinite;
}

.practice-replay-btn.has-recording {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 8px 16px rgba(40, 185, 129, 0.22);
}

@keyframes recordingPulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.42);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 0 8px rgba(249, 115, 22, 0);
  }
}

@media (max-width: 560px) {
  .feature-panel {
    grid-template-columns: 1fr;
  }
}

/* Reference fill-blank view: keep the original light subtitle list and only replace marked words with blanks. */
body.practice-blank-mode {
  background: var(--n-0) !important;
  color: var(--on-accent) !important;
}

body.practice-blank-mode .subtitle-section,
body.practice-blank-mode .page-shell.reading-mode .subtitle-section {
  border-color: var(--line) !important;
  background: var(--n-0) !important;
  color: var(--on-accent) !important;
}

body.practice-blank-mode .subtitle-list-header,
body.practice-blank-mode .page-shell.reading-mode .subtitle-list-header {
  min-height: 70px;
  border-bottom-color: var(--line) !important;
  background: var(--n-0) !important;
}

body.practice-blank-mode .subtitle-list-title,
body.practice-blank-mode .page-shell.reading-mode .subtitle-list-title {
  color: var(--on-accent) !important;
}

body.practice-blank-mode .subtitle-list-title::before,
body.practice-blank-mode .page-shell.reading-mode .subtitle-list-title::before {
  color: var(--accent) !important;
}

body.practice-blank-mode .subtitle-items-container,
body.practice-blank-mode .page-shell.reading-mode .subtitle-items-container {
  background: var(--n-0) !important;
  padding: 12px 16px 28px !important;
}

body.practice-blank-mode .subtitle-items-container::before,
body.practice-blank-mode .subtitle-item::before,
body.practice-blank-mode .subtitle-item::after {
  display: none !important;
}

body.practice-blank-mode .toggle-button-icon,
body.practice-blank-mode .page-shell.reading-mode .toggle-button-icon {
  border-color: var(--line) !important;
  background: var(--n-0) !important;
  color: var(--n-600) !important;
}

body.practice-blank-mode .toggle-button-icon:hover,
body.practice-blank-mode .toggle-button-icon.active,
body.practice-blank-mode .toggle-button-icon.is-active,
body.practice-blank-mode .page-shell.reading-mode .toggle-button-icon:hover,
body.practice-blank-mode .page-shell.reading-mode .toggle-button-icon.active,
body.practice-blank-mode .page-shell.reading-mode .toggle-button-icon.is-active {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
  color: var(--on-accent) !important;
}

body.practice-blank-mode .subtitle-item,
body.practice-blank-mode .page-shell.reading-mode .subtitle-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px !important;
  gap: 0 12px !important;
  min-height: 96px;
  margin: 0 0 10px;
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--n-0) !important;
  box-shadow: none !important;
  padding: 15px 18px !important;
}

body.practice-blank-mode .subtitle-item.is-active,
body.practice-blank-mode .page-shell.reading-mode .subtitle-item.is-active {
  background: var(--line) !important;
}

body.practice-blank-mode .subtitle-time,
body.practice-blank-mode .page-shell.reading-mode .subtitle-time {
  grid-column: 1 !important;
  grid-row: 1 !important;
  color: var(--accent) !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}

body.practice-blank-mode .subtitle-text,
body.practice-blank-mode .page-shell.reading-mode .subtitle-text {
  grid-column: 1 !important;
  color: var(--on-accent) !important;
  font-size: calc(16px * var(--subtitle-scale, 1)) !important;
  font-weight: 760;
  line-height: calc(25px * var(--subtitle-scale, 1)) !important;
  margin-top: 7px;
  white-space: normal;
}

body.practice-blank-mode .subtitle-text-selectable,
body.practice-blank-mode .word-highlight,
body.practice-blank-mode .phrase-highlight {
  display: inline;
}

body.practice-blank-mode .subtitle-translation,
body.practice-blank-mode .page-shell.reading-mode .subtitle-translation {
  grid-column: 1 !important;
  color: var(--n-600) !important;
  font-size: calc(14px * var(--subtitle-scale, 1)) !important;
  line-height: calc(22px * var(--subtitle-scale, 1)) !important;
  margin-top: 3px;
}

body.practice-blank-mode .subtitle-favorite-btn,
body.practice-blank-mode .page-shell.reading-mode .subtitle-favorite-btn {
  grid-column: 2 !important;
  grid-row: 1 / span 3 !important;
  align-self: center;
  width: 34px;
  height: 34px;
  border-color: var(--line) !important;
  background: var(--n-0) !important;
  color: var(--muted) !important;
  box-shadow: 0 8px 18px rgba(20, 34, 52, 0.08) !important;
}

body.practice-blank-mode .practice-card-actions,
body.practice-blank-mode .page-shell.reading-mode .practice-card-actions {
  display: none !important;
}

/* ============================================================ 填空练习主题配色 ============================================================ */

/* 默认主题：高对比度经典（推荐深色背景使用）
   注意：JS 启动时会无条件写入 data-blank-theme="classic"，
   所以这里必须带属性选择器，与其他 3 套特异性一致，
   否则同级的深色主题规则（文件更靠后）会按"后者胜出"把它压掉。 */
body.practice-blank-mode[data-blank-theme="classic"] .practice-blank-token {
  display: inline-block;
  width: 54px;
  height: 23px;
  margin: 0 4px;
  border-radius: 6px;
  background: #3B82F6 !important;
  border: 2px solid #60A5FA;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
  vertical-align: -5px;
  transition: all 0.2s ease;
}

body.practice-blank-mode[data-blank-theme="classic"] .practice-blank-token:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

body.practice-blank-mode[data-blank-theme="classic"] .practice-blank-token-phrase {
  width: 78px;
  background: #8B5CF6 !important;
  border-color: #A78BFA;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

body.practice-blank-mode[data-blank-theme="classic"] .practice-blank-token-phrase:hover {
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

/* 主题2：柔和渐变（现代感） */
body.practice-blank-mode[data-blank-theme="soft"] .practice-blank-token {
  background: linear-gradient(135deg, #2DD4BF 0%, #14B8A6 100%) !important;
  border-color: #5EEAD4;
  box-shadow: 0 2px 8px rgba(45, 212, 191, 0.3);
}

body.practice-blank-mode[data-blank-theme="soft"] .practice-blank-token:hover {
  box-shadow: 0 4px 12px rgba(45, 212, 191, 0.4);
}

body.practice-blank-mode[data-blank-theme="soft"] .practice-blank-token-phrase {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%) !important;
  border-color: #FBBF24;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

body.practice-blank-mode[data-blank-theme="soft"] .practice-blank-token-phrase:hover {
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

/* 主题3：极简白色（最清晰） */
body.practice-blank-mode[data-blank-theme="minimal"] .practice-blank-token {
  background: var(--n-0) !important;
  border: 2px solid #3B82F6;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

body.practice-blank-mode[data-blank-theme="minimal"] .practice-blank-token:hover {
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

body.practice-blank-mode[data-blank-theme="minimal"] .practice-blank-token-phrase {
  background: var(--n-0) !important;
  border-color: #8B5CF6;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.2);
}

body.practice-blank-mode[data-blank-theme="minimal"] .practice-blank-token-phrase:hover {
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

/* 主题4：原版（项目原本的青绿/琥珀，与主色 cyan/amber 一致） */
body.practice-blank-mode[data-blank-theme="brand"] .practice-blank-token {
  background: rgba(78, 235, 172, 0.72) !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.practice-blank-mode[data-blank-theme="brand"] .practice-blank-token:hover {
  background: rgba(78, 235, 172, 0.88) !important;
  transform: none !important;
  box-shadow: none !important;
}
body.practice-blank-mode[data-blank-theme="brand"] .practice-blank-token-phrase {
  background: rgba(255, 201, 117, 0.7) !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.practice-blank-mode[data-blank-theme="brand"] .practice-blank-token-phrase:hover {
  background: rgba(255, 201, 117, 0.85) !important;
  box-shadow: none !important;
}

/* Final fill-blank color decision: dark theme with English blanks, no practice controls. */
body.practice-blank-mode {
  background:
    none,
    linear-gradient(135deg, var(--n-0) 0%, var(--n-0) 50%, var(--n-0) 100%) !important;
  color: var(--text) !important;
}

body.practice-blank-mode .subtitle-section,
body.practice-blank-mode .page-shell.reading-mode .subtitle-section {
  border-color: var(--line) !important;
  background: var(--panel) !important;
  color: var(--text) !important;
}

body.practice-blank-mode .subtitle-list-header,
body.practice-blank-mode .page-shell.reading-mode .subtitle-list-header {
  border-bottom-color: var(--line) !important;
  background: var(--panel) !important;
}

body.practice-blank-mode .subtitle-list-title,
body.practice-blank-mode .page-shell.reading-mode .subtitle-list-title {
  color: var(--text) !important;
}

body.practice-blank-mode .subtitle-list-title::before,
body.practice-blank-mode .page-shell.reading-mode .subtitle-list-title::before {
  color: var(--cyan) !important;
}

body.practice-blank-mode .subtitle-items-container,
body.practice-blank-mode .page-shell.reading-mode .subtitle-items-container {
  background: linear-gradient(180deg, var(--n-0), var(--n-0)) !important;
}

body.practice-blank-mode .toggle-button-icon,
body.practice-blank-mode .page-shell.reading-mode .toggle-button-icon {
  border-color: var(--line) !important;
  background: var(--panel-soft) !important;
  color: var(--muted) !important;
}

body.practice-blank-mode .toggle-button-icon:hover,
body.practice-blank-mode .toggle-button-icon.active,
body.practice-blank-mode .toggle-button-icon.is-active,
body.practice-blank-mode .page-shell.reading-mode .toggle-button-icon:hover,
body.practice-blank-mode .page-shell.reading-mode .toggle-button-icon.active,
body.practice-blank-mode .page-shell.reading-mode .toggle-button-icon.is-active {
  border-color: var(--line-strong) !important;
  background: rgba(46, 158, 79, 0.12) !important;
  color: var(--cyan) !important;
}

body.practice-blank-mode .subtitle-item,
body.practice-blank-mode .page-shell.reading-mode .subtitle-item {
  border: 1px solid rgba(184, 204, 211, 0.18) !important;
  background: var(--n-0) !important;
  color: var(--text) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16) !important;
}

body.practice-blank-mode .subtitle-item.is-active,
body.practice-blank-mode .page-shell.reading-mode .subtitle-item.is-active {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
}

body.practice-blank-mode .subtitle-time,
body.practice-blank-mode .page-shell.reading-mode .subtitle-time {
  color: var(--cyan) !important;
}

body.practice-blank-mode .subtitle-text,
body.practice-blank-mode .page-shell.reading-mode .subtitle-text {
  color: var(--text) !important;
}

body.practice-blank-mode .subtitle-translation,
body.practice-blank-mode .page-shell.reading-mode .subtitle-translation {
  color: var(--muted) !important;
}

body.practice-blank-mode .subtitle-favorite-btn,
body.practice-blank-mode .page-shell.reading-mode .subtitle-favorite-btn {
  border-color: var(--line) !important;
  background: var(--panel-soft) !important;
  color: var(--muted) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2) !important;
}

body.practice-blank-mode .practice-card-actions,
body.practice-blank-mode .page-shell.reading-mode .practice-card-actions {
  display: none !important;
}

body.practice-blank-mode .description-card,
body.practice-blank-mode .page-shell.reading-mode .description-card {
  border: none !important;
  background: transparent !important;
  color: var(--n-900) !important;
}

body.practice-blank-mode .description-text h4 {
  color: var(--n-900) !important;
}

body.practice-blank-mode .description-text p {
  color: var(--n-800) !important;
}

/* ---------------------------------------------------------------- 学习模式条
   规格对齐 TECo 网页版顶栏的「灰底胶囊组」：
   整条 = 浅灰圆角容器（#F1F1F3，radius 999px，内边距 3px）；
   8 个标签 双语/英语/中文/听写/挖空 | 阅读/中译英 | 词卡，组间一条 1px 竖分隔线；
   选中项 = 白底胶囊 + 轻微投影；👁⚙ 两个圆钮在容器外。 */
.mode-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  min-width: 0;
  padding: 3px;
  background: var(--n-50);
  border-radius: 999px;
}

.mode-pill {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--n-700);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 18px;
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

/* 挖空主题选择器（mode-toolbar 的独立子项，非按钮内部） */
.blank-theme-select {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  outline: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  margin-left: 4px;
  flex: 0 0 auto;
  align-self: center;
  height: 22px;
  line-height: 18px;
}

.blank-theme-select:hover {
  border-color: rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 1);
}

.blank-theme-select:focus {
  border-color: #3B82F6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.blank-theme-select option {
  padding: 4px 8px;
  font-size: 12px;
}

/* 深色主题下的选择器（token 化：适配全部深色主题，不写死色值） */
body[data-player-theme="dark"] .blank-theme-select {
  background: var(--panel-strong) !important;
  border-color: var(--line-strong) !important;
  color: var(--text) !important;
}
body[data-player-theme="dark"] .blank-theme-select:hover {
  background: var(--line-strong) !important;
}
body[data-player-theme="dark"] .blank-theme-select option {
  background: var(--panel);
  color: var(--text);
}

.mode-pill:hover {
  color: var(--n-900);
}

.mode-pill.active {
  background: var(--n-0);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.14);
}

.mode-pill-icon {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
}

.mode-pill-icon svg {
  width: 14px;
  height: 14px;
}

.mode-toolbar-divider {
  flex: 0 0 auto;
  width: 1px;
  height: 14px;
  margin: 0 5px;
  background: #D8DBE0;
}

.mode-icon-btn {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  padding: 0;
  transition: transform 150ms ease, color 150ms ease;
}

.mode-icon-btn:hover {
  transform: scale(1.05);
}

.mode-icon-btn:active {
  transform: scale(0.95);
}

.mode-icon-btn.active {
  color: var(--amber);
}

.mode-icon-btn svg {
  width: 20px;
  height: 20px;
}

/* 模式条 + 👁⚙ 打包成一个整体：桌面住顶栏，窄屏由 JS 整体搬进字幕面板 */
.mode-bar {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 10px;
}

/* 模式条落脚点（窄屏专用）：<1290px 顶栏整体隐藏，模式条搬到这里 */
.mode-toolbar-slot {
  display: none;
  align-items: stretch;
  flex: 1 0 100%;
  min-width: 0;
}

.mode-toolbar-slot .mode-bar {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 1289px) {
  .mode-toolbar-slot {
    display: flex;
  }
}

/* ---------------------------------------------------------------- 手机版模式条
   ≤768px 换成 TECo 移动端的 4 个下划线标签：字幕(带 ✎) / 听写 / 跟读 / 词卡。
   桌面那 8 个灰底胶囊在手机宽度下隐藏；👁⚙ 也收起（字幕语言/隐藏/倍速都在
   顶栏 ⚙「学习设置」面板里，见 `.mobile-settings-sheet`）。
   选择器用 `.mode-bar .mode-toolbar--mobile` 提权，避免被后面的 `.mode-toolbar{gap:1px}` 覆盖。 */
.mode-toolbar--mobile {
  display: none;
}

.mode-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  padding: 9px 2px 11px;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  transition: color 160ms ease;
}

.mode-tab:hover {
  color: var(--n-700);
}

.mode-tab.active {
  color: var(--n-900);
}

.mode-tab.active::after {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--n-900);
}

.mode-tab .mode-pill-icon {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
}

.mode-tab .mode-pill-icon svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 1024px), (max-width: 1400px) and (hover: none) and (pointer: coarse) {
  .mode-bar .mode-toolbar:not(.mode-toolbar--mobile) {
    display: none;
  }

  .mode-bar .mode-toolbar--mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 12px;
    background: transparent;
    border-radius: 0;
  }

  .mode-bar > .mode-icon-btn {
    display: none;
  }
}

/* ---------------------------------------------------------------- 听写 / 中译英 练习卡 */
.subtitle-drill-card {
  padding: 13px 15px 16px;
}

.drill {
  display: grid;
  gap: 10px;
}

.drill-prompt {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 760;
  line-height: 25px;
}

.drill-input-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.drill-play-btn {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--n-0);
  color: var(--cyan);
  padding: 0;
}

.drill-play-btn:hover {
  border-color: var(--cyan);
}

.drill-input {
  width: 100%;
  min-height: 62px;
  resize: vertical;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--n-0);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  line-height: 23px;
  padding: 10px 12px;
}

.drill-input:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(46, 158, 79, 0.12);
}

.drill-actions {
  display: flex;
  gap: 8px;
}

.drill-btn {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--n-0);
  color: #555555;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 14px;
}

.drill-btn:hover {
  color: var(--text);
  border-color: #B9B9BC;
}

.drill-btn-primary {
  border-color: transparent;
  background: rgba(46, 158, 79, 0.12);
  color: var(--cyan);
}

.drill-btn-primary:hover {
  background: rgba(46, 158, 79, 0.2);
  color: var(--cyan);
}

.drill-result {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-soft);
  padding: 12px;
}

.drill-result.good { border-color: rgba(46, 158, 79, 0.45); background: rgba(46, 158, 79, 0.07); }
.drill-result.ok { border-color: rgba(245, 166, 35, 0.45); background: rgba(245, 166, 35, 0.08); }
.drill-result.bad { border-color: rgba(255, 111, 145, 0.45); background: rgba(255, 111, 145, 0.08); }

.drill-score {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
}

.drill-score span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.drill-answer {
  margin: 0;
  font-size: 15px;
  line-height: 26px;
  word-break: break-word;
}

.drill-token {
  padding: 0 1px;
  border-radius: 4px;
}

.drill-token.ok { color: var(--cyan); }
.drill-token.missed { color: #D1436A; background: rgba(255, 111, 145, 0.14); }

.drill-extra,
.drill-zh {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 21px;
}

.drill-marks {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 20px;
}

.drill-marks li.ok { color: var(--cyan); }
.drill-marks li.miss { color: #D1436A; }

/* 中译英的题干本身就是中文，答案再重复一遍没意义 */
body.practice-translate-mode .drill-zh { display: none; }

/* 挖空 / 听写 / 中译英 时，字幕正文不能被「只看中文」「隐藏」规则吃掉 */
.caption-chinese .subtitle-item.subtitle-practice-card .subtitle-text,
.caption-hidden .subtitle-item.subtitle-practice-card .subtitle-text,
.caption-chinese .subtitle-item.subtitle-drill-card .subtitle-text,
.caption-hidden .subtitle-item.subtitle-drill-card .subtitle-text {
  display: block;
}

/* 窄屏：模式条在面板里可能放不下，允许横向滚动（首项不被裁） */
@media (max-width: 1289px) {
  .mode-toolbar-slot .mode-toolbar {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .mode-toolbar-slot .mode-toolbar::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 1024px), (max-width: 1400px) and (hover: none) and (pointer: coarse) {
  .mode-pill {
    font-size: 12px;
    padding: 5px 9px;
  }

  .mode-toolbar {
    gap: 1px;
  }

  .subtitle-panel-top {
    padding: 2px 12px;
  }
}

/* ============================================================ 词卡列表（TECo Lab 同款）
   点模式条「词卡」时，在视频下方铺开一列清单（不再是右侧抽屉）。
   结构：工具栏（筛选 ▾ / 列表·类别·标签 / N 条）+ 列表（序号 · 单词 · 标签 · 箭头）。 */
/* 词卡模式：字幕列表让位。注意 `.subtitle-list` 里还挂着模式条落脚点
   （窄屏时模式条搬进 `.mode-toolbar-slot`），所以不能整块 display:none，
   只能把它压成「自然高度」，剩下的高度留给词卡列表。 */
.subtitle-display {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.subtitle-display > .subtitle-list {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}

.page-shell.wordlist-mode .subtitle-list-header,
.page-shell.wordlist-mode .subtitle-items-container {
  display: none;
}

.page-shell.wordlist-mode .subtitle-display > .subtitle-list {
  flex: 0 0 auto;
}

/* 词卡模式下的让位规则见文件末尾「工具图标三档安置」一节
   （面板那行现在只装模式条 + 769~1289px 的工具图标，搜索框已整块移除）。 */

.wordlist-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  height: auto;
}

.wordlist-panel[hidden] {
  display: none;
}

/* --- 工具栏 --- */
.wordlist-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--line);
  padding: 12px 14px;
}

.wordlist-filter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  border: 1px solid #E3E4E8;
  border-radius: 9px;
  background: var(--n-0);
  color: var(--n-700);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 10px;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.wordlist-filter:hover {
  border-color: #CFD2D8;
  background: var(--n-0);
}

.wordlist-filter.is-open {
  border-color: var(--n-300);
  background: #F4F4F6;
  color: var(--text);
}

.wordlist-filter-icon,
.wordlist-caret {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
}

.wordlist-filter-icon svg,
.wordlist-caret svg {
  width: 14px;
  height: 14px;
}

.wordlist-caret {
  transition: transform 180ms ease;
}

.wordlist-filter.is-open .wordlist-caret {
  transform: rotate(180deg);
}

.wordlist-views {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1 1 auto;
  min-width: 0;
}

.wordlist-view {
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 5px 11px;
  white-space: nowrap;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.wordlist-view:hover {
  color: var(--n-700);
}

/* 选中的视图是一个浅底描边小胶囊（同 TECo 的「列表」） */
.wordlist-view.is-active {
  border-color: #E3E4E8;
  background: var(--n-0);
  color: var(--text);
  font-weight: 700;
}

.wordlist-count {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* --- 筛选面板：单列竖排，一组「标题 + 一排可换行的圆角标签」（照 TECo 的类别 / 考试标签） --- */
.wordlist-menu {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  background: var(--n-0);
  padding: 12px 12px 14px;
}

.wordlist-menu[hidden] {
  display: none;
}

.wordlist-filter-group {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.wordlist-filter-title {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
}

.wordlist-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

/* 标签：白底浅描边灰字；选中 = 琥珀底 —— 同 TECo 的「单词」 */
.wordlist-chip {
  border: 1px solid var(--n-200);
  border-radius: 7px;
  background: var(--n-0);
  color: #374151;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  padding: 5px 11px;
  white-space: nowrap;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.wordlist-chip:hover {
  border-color: #CFD2D8;
  background: var(--n-50);
}

.wordlist-chip.is-active {
  border-color: #F0C97F;
  background: var(--amber-soft);
  color: #B7791F;
  font-weight: 700;
}

/* --- 列表 --- */
.wordlist-items {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.wordlist-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--n-0);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 8px 16px;
  position: sticky;
  top: 0;
  z-index: 1;
}

.wordlist-row {
  border-bottom: 1px solid var(--line);
}

/* 「列表」视图的一行（照 TECo「列表」页，2026-10-10）：
   序号 + 中文释义（主文本）+ 考试标签 chip（蓝）+ 类别 chip（类别色）+ › 箭头。
   ⚠️ 行高 **57px**（量参考图：分隔线 y = 148/205/263/… 间距 57）——
   实现成 `min-height:56px` + 外层 `.wordlist-row` 的 1px 底线 = 57px，
   别再用 `padding:13px` 那种跟着内容飘的做法（内容一变行高就变）。 */
.wordlist-row-main {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 8px 14px;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease;
}

.wordlist-row-main:hover {
  background: var(--n-50);
}

/* 序号：参考图里序号和箭头是**同一个中灰**（量得 #8E8E8E / #8C8C8C）= `--muted`。 */
.wordlist-index {
  flex: 0 0 auto;
  width: 22px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* 主文本 = **中文释义**（参考图行里只有中文；英文词条在展开区里）。
   16px / 500 —— 量参考图：ink 高 15px，字重是常规偏中，不是粗体。 */
.wordlist-word {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wordlist-tags {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* 列表行的胶囊 chip：**同色字 + 10% 同色底 + 25% 同色边**（颜色走行内 style）。
   尺寸与「类别 / 标签」视图的 `.wordlist-cat-chip` 完全一致：12px 字 + `padding:3px 8px`
   + 1px 边 = **40×20**（2 字），量参考图定的。 */
.wordlist-tag {
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 3px 8px;
  white-space: nowrap;
}

/* 考试标签超过 2 个时的「+N」灰 chip（我们一张卡常有 3~5 个考试标签，全铺出来会把主文本挤没） */
.wordlist-tag--more {
  color: var(--muted);
  background: #F3F4F6;
  border-color: var(--n-200);
}

.wordlist-arrow {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--muted);
  transition: transform 180ms ease;
}

.wordlist-arrow svg {
  width: 16px;
  height: 16px;
}

.wordlist-row.is-open .wordlist-arrow {
  transform: rotate(90deg);
}

.wordlist-detail {
  display: grid;
  gap: 6px;
  background: var(--n-0);
  padding: 4px 14px 16px 48px;
}

.wordlist-detail p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--n-700);
}

/* 展开区首行 = 英文词条（主文本已经改成中文了，这里把英文还回来）+ 音标 / 词性 */
.wordlist-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.wordlist-head-word {
  color: var(--text) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}

.wordlist-head-sub {
  color: var(--muted) !important;
  font-size: 13px !important;
}

.wordlist-def {
  color: var(--text) !important;
  font-weight: 700;
}

.wordlist-en {
  color: var(--muted) !important;
  font-style: italic;
}

.wordlist-example {
  color: var(--text) !important;
}

.wordlist-translation {
  color: var(--muted) !important;
}

.wordlist-jump {
  justify-self: start;
  border: 0;
  border-radius: 999px;
  background: var(--amber);
  color: var(--n-900);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  margin-top: 4px;
  padding: 7px 14px;
}

.wordlist-empty {
  color: var(--muted);
  font-size: 14px;
  padding: 28px 16px;
  text-align: center;
}

/* --- 标签视图：环形饼图 + 图例 + 计数（照 TECo 的「标签」面板） --- */
.wordlist-tag-chart {
  flex: 0 0 auto;
  padding: 14px 12px 8px;
  border-bottom: 1px solid var(--line);
}

.wordlist-tag-chart[hidden] {
  display: none;
}

/* 环形图在左、两列图例在右，左右并排（照参考图「标签」页）。
   ⚠️ 用户 2026-10-10：「标签的话应该和左边一样的」→「**应该是左右结构**」。
   **必须始终左右**：之前 `.wordlist-legend` 写了 `flex:1 1 240px; min-width:200px`，
   面板一窄（可用宽 < ~378px）就整块换行、堆到环形图下面去了 —— 用户看到的就是那个。
   现在改成**可压缩**（`flex:1 1 150px; min-width:0`），只有真的挤不下（< ~290px）才换行。 */
.wordlist-chart-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
}

.wordlist-chart-donut {
  position: relative;
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
}

.wordlist-chart-svg {
  display: block;
  width: 120px;
  height: 120px;
}

.wordlist-arc {
  cursor: pointer;
  transition: stroke-width 140ms ease, opacity 140ms ease;
}

.wordlist-arc:hover,
.wordlist-arc.is-active {
  stroke-width: 22;
}

.wordlist-chart-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  pointer-events: none;
}

.wordlist-chart-center-num {
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.wordlist-chart-center-label {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  margin-top: 2px;
}

/* 图例（照参考图）：圆点 + 标签 + 计数，**两列**，整行可点。
   10 项齐全（9 个考试标签 + 无标签）；计数 0 的项保留但置灰、不可点。 */
.wordlist-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 12px;
  flex: 1 1 150px;
  min-width: 0;
}

.wordlist-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  padding: 3px 4px;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease;
}

.wordlist-legend-item:hover {
  background: var(--n-0);
}

.wordlist-legend-item.is-active {
  background: var(--amber-soft);
  color: #B7791F;
  font-weight: 700;
}

.wordlist-legend-item.is-zero {
  cursor: default;
  opacity: 0.4;
}

.wordlist-legend-item.is-zero:hover {
  background: transparent;
}

.wordlist-legend-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.wordlist-legend-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.wordlist-legend-count {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ⚠️ 这里**故意没有**「窄屏改成竖排」的兜底 —— 用户要的是**始终左右结构**。
   真挤不下时由上面的 `flex-wrap:wrap` 自然换行，不需要媒体查询去主动堆叠。 */

/* 分类目录（「类别」和「标签」两个视图共用这一套行样式）：
   10 行竖排，每行 彩色胶囊 chip（同色字 + 10% 同色底 + 25% 同色边）+「N 条」+ 右侧 › 箭头。
   - 「标签」视图里它挂在 `#wordlistTagChart` 内部的 `.wordlist-cat-list`（环形图 + 图例下方）；
   - 「类别」视图里它自己就是 `#wordlistCategoryList`（没有环形图，直接一列）。
   ⚠️ 用户 2026-10-10 20:44 贴了 TECo 完整参考图说「**应该像这样有分类的**」——
   「图例」和「分类列表」**两层都要**，别再把这一层删掉。
   尺寸是**量参考图**定的（别再凭感觉放大）：chip 42×20（2 字）/ 54×20（3 字）→
   即 12px 字 + `padding:3px 8px` + 1px 边；行距 **39px** → `padding:9px 4px` + 1px 底线；
   chip 与计数字间距 10px；箭头贴右、离行右缘约 4px。 */
.wordlist-cat-list,
.wordlist-cat-dir {
  display: flex;
  flex-direction: column;
}

.wordlist-cat-list {
  margin-top: 12px;
  border-top: 1px solid var(--line);
}

/* 「类别」视图的目录：不跟着 `.wordlist-items` 一起滚，行自己的底线当分隔
   （最后一行没有底线 → 由容器的 border-bottom 收口）。 */
.wordlist-cat-dir {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--line);
}

.wordlist-cat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  padding: 9px 4px;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease;
}

/* ⚠️ 分隔线规则：每行（类别行 / 词条行）各自带底线，**只把容器的最后一个孩子**的底线去掉，
   由容器的 border-bottom 收口。展开时容器的最后一个孩子是 `.wordlist-cat-items`（它自带底线），
   收起时是最后一个 `.wordlist-cat-row` —— 两种情况都由这条规则统一处理，别写回 `:last-child` 到行上。 */
.wordlist-cat-list > :last-child,
.wordlist-cat-dir > :last-child {
  border-bottom: 0;
}

.wordlist-cat-row:hover {
  background: var(--n-0);
}

.wordlist-cat-row.is-active {
  background: var(--amber-soft);
}

.wordlist-cat-row.is-zero {
  cursor: default;
  opacity: 0.45;
}

.wordlist-cat-row.is-zero:hover {
  background: transparent;
}

/* 展开态：「类别」视图点一行后箭头 › 转成 ⌄（转 90°）。 */
.wordlist-cat-row.is-open .wordlist-cat-arrow {
  transform: rotate(90deg);
}

/* 展开出来的词条块（照参考图：序号 + 主文本 + 右侧 ›）。
   ⚠️ 尺寸全部量参考图定的：**条目行距 57px、主文本 16px**（比类别行的 chip 文字 12px 明显大），
   条目之间各有 1px 底线，但**整块的底部没有线**（所以最后一条到下一个类别行之间只有留白 —— 照抄）。
   主文本用**中文释义**、英文词条跟在后面当次要信息 —— 参考图里展开的 3 条习语就是中文
   （拐弯抹角 / 脸朝下摔倒在地 / 跌入某人的怀里）。点一条 = 跳到该词在视频里出现的位置。 */
.wordlist-cat-items {
  display: flex;
  flex-direction: column;
  /* 兜底：某课某类别条目特别多时不至于把面板撑爆（≤6 条 = 342px，不会触发） */
  max-height: 380px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.wordlist-cat-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  line-height: 1.25;
  padding: 18px 4px;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease;
}

.wordlist-cat-items > .wordlist-cat-entry:last-child {
  border-bottom: 0;
}

.wordlist-cat-entry:hover {
  background: var(--n-0);
}

.wordlist-cat-entry-index {
  flex: 0 0 auto;
  width: 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.wordlist-cat-entry-def {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--muted);
  font-size: 12.5px;
  text-align: right;
}

.wordlist-cat-entry-word {
  flex: 0 0 auto;
  max-width: 45%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
}

.wordlist-cat-entry .wordlist-cat-arrow {
  margin-left: auto;
}

.wordlist-cat-chip {
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.wordlist-cat-count {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.wordlist-cat-arrow {
  flex: 0 0 auto;
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: var(--n-300);
  transition: transform 160ms ease;
}

.wordlist-cat-arrow svg {
  width: 16px;
  height: 16px;
}

/* --- 标签视图：当前过滤值摘要（chip + 计数 + ×），点 × 取消该值 --- */
.wordlist-tag-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 0 0 auto;
  padding: 8px 12px;
  background: var(--n-0);
  border-bottom: 1px solid var(--line);
}

.wordlist-tag-summary[hidden] {
  display: none;
}

.wordlist-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #F0C97F;
  border-radius: 999px;
  background: var(--amber-soft);
  color: #B7791F;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 4px 4px 10px;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.wordlist-tag-chip:hover {
  background: #FAE5BD;
  border-color: #E5B95E;
}

.wordlist-tag-chip-count {
  color: #B7791F;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.wordlist-tag-chip-x {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(183, 121, 31, 0.15);
  color: #B7791F;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.wordlist-tag-chip:hover .wordlist-tag-chip-x {
  background: rgba(183, 121, 31, 0.25);
}

@media (max-width: 1024px), (max-width: 1400px) and (hover: none) and (pointer: coarse) {
  .wordlist-toolbar {
    gap: 10px;
    padding: 10px 12px;
  }

  .wordlist-views {
    gap: 14px;
  }

  .wordlist-row-main {
    padding: 12px;
  }

  .wordlist-detail {
    padding-left: 42px;
  }
}

/* ============================================================ 工具图标三档安置（2026-10-10）
   用户要求把面板顶部那行「搜索框 + 7 个工具图标」整行去掉，图标挪进顶栏。
   同一份 DOM（#headerToolIcons），由 script.js 的 placeToolIcons() 搬到三个落脚点：
     ≥1290px → .video-header-content（标题右侧、模式条左边）
     769~1289px → .subtitle-panel-top（跟模式条同一行；模式条本来就落在 .mode-toolbar-slot）
     ≤768px  → 顶栏 ⋯ 打开的 #mobileToolsSheet 里
   ⚠️ 只能搬，不能复制 —— 复制会让 querySelector('[data-action=…].toggle-button-icon')
      （script.js:197 起）只给第一份注入图标，另一份永远空着。 */

/* 桌面顶栏那一份：贴着模式条左侧，收进一个浅灰胶囊里「成组」，与模式条拉开层次 */
.video-header-content > .subtitle-header-controls {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 2px;
  margin-right: 6px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--n-50);
}

/* 769~1289px：模式条落脚点让出宽度，好让图标挤在同一行（挤不下时 flex-wrap 自动换行） */
@media (max-width: 1289px) and (min-width: 1025px) and (hover: hover) {
  .subtitle-panel-top .mode-toolbar-slot {
    flex: 1 1 auto;
  }
}

/* 词卡模式：769~1289px 那一行只留模式条（同 TECo 词卡页没有工具图标行）。
   桌面顶栏那一份不受影响 —— 选择器限定在 .subtitle-panel-top 里。 */
.page-shell.wordlist-mode .subtitle-panel-top .subtitle-header-controls {
  display: none;
}

/* 手机顶栏的 ⋯ 按钮（跟 ⚙ 并排） */
.mobile-tools-button {
  display: none;
}

.mobile-tools-button svg {
  width: 22px;
  height: 22px;
}

/* 「更多工具」面板顶部的快捷入口行：3 个本面板专属 + 搬进来的 7 个工具 = 10 个，
   5 列正好两行（同 TECo 快捷行 5 个一行的比例）。图标下面带中文标签（用 data-label）。 */
.mobile-tools-slot {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px 4px;
  padding: 4px 0 12px;
  border-bottom: 1px solid #e0e5ee;
}

.mobile-tools-slot .subtitle-header-controls {
  display: contents;
}

.mobile-tools-slot .toggle-button-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto;
  height: auto;
  min-height: 62px;
  border-radius: 14px;
  background: var(--n-50);
  padding: 10px 4px;
  color: var(--n-700);
}

.mobile-tools-slot .toggle-button-icon svg {
  width: 22px;
  height: 22px;
}

.mobile-tools-slot .toggle-button-icon::after {
  content: attr(data-label);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--n-700);
  white-space: nowrap;
}

.mobile-tools-slot .toggle-button-icon.is-active,
.mobile-tools-slot .toggle-button-icon.active {
  background: var(--amber-soft);
  color: #B7791F;
}

.mobile-tools-slot .toggle-button-icon.is-active::after,
.mobile-tools-slot .toggle-button-icon.active::after {
  color: #B7791F;
}

/* 「原文」按钮没有 sourceUrl 时会被 JS 设 hidden —— 得压过上面的 display:flex */
.mobile-tools-slot .toggle-button-icon[hidden] {
  display: none;
}

/* 离线缓存图标的状态色在面板里也要能看出来 */
.mobile-tools-slot .toggle-button-icon.is-cached {
  color: var(--accent);
}

.mobile-tools-slot .offline-status {
  display: none;
}

/* ⚙ 设置面板 / ⋯ 工具面板都要盖过底部工具栏 */
.mobile-tools-sheet,
#mobileSettingsSheet {
  z-index: 112;
}

/* ⚙ 设置面板顶部的快捷入口行照 TECo = 5 个（全屏/收藏/字幕PDF/音频/原文），五列平分整行 */
.mobile-tools-slot--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* 快捷行里点了会等一会儿的按钮（音频提取）压暗 + 禁点 */
.mobile-tools-slot .toggle-button-icon.is-busy {
  opacity: 0.45;
  pointer-events: none;
}

/* 没有原文链接时「原文」置灰（不隐藏 —— 这一行必须恒为 5 格） */
.mobile-tools-slot .toggle-button-icon.is-unavailable {
  opacity: 0.38;
}

@media (max-width: 1024px), (max-width: 1400px) and (hover: none) and (pointer: coarse) {
  .mobile-tools-button {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--n-700);
    padding: 0;
  }
}

/* ---- ⋯ 面板 = TECo 式「更多工具 + 学习设置」（2026-10-10） ----
   结构：头部（拖拽条 + ×）→ 快捷入口行（.mobile-tools-slot）→ 一列设置项。
   设置项复用 ⚙ 面板那套 .mobile-setting-row / .mobile-switch / .mobile-segmented。 */
@media (max-width: 1024px), (max-width: 1400px) and (hover: none) and (pointer: coarse) {
  .mobile-tools-panel {
    /* 内容比 ⚙ 面板长得多：限高 + 内部滚动，别顶出屏幕 */
    max-height: 88vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: 8px;
  }

  .mobile-sheet-head {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 22px;
  }

  .mobile-sheet-head .mobile-sheet-handle {
    margin: 0;
  }

  .mobile-sheet-close {
    position: absolute;
    right: 0;
    top: 50%;
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--n-700);
    padding: 0;
    transform: translateY(-50%);
  }

  .mobile-sheet-close svg {
    width: 18px;
    height: 18px;
  }

  /* 字幕大小：标签一行 + 滑杆整行 */
  .mobile-setting-block {
    display: grid;
    gap: 8px;
    border: 1px solid var(--n-200);
    border-radius: 12px;
    background: var(--n-0);
    color: var(--n-900);
    padding: 10px 14px;
  }

  .mobile-setting-block .mobile-rate-value {
    margin-left: auto;
    font-weight: 700;
  }

  /* 文字当图标用（Tt / ə），跟 .mobile-setting-label svg 同尺寸同色 */
  .mobile-setting-glyph {
    display: inline-grid;
    place-items: center;
    width: 23px;
    height: 23px;
    color: var(--n-600);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.5px;
  }

  /* 动态字幕 / 视频底部字幕四选：列宽按内容自适应（四等分会把「不显示」挤成两行），且不换行 */
  .mobile-segmented--4 {
    grid-template-columns: repeat(4, auto);
    min-width: 0;
  }

  .mobile-segmented--4 button {
    padding: 0 8px;
    white-space: nowrap;
  }
}

/* ---------------------------------------------------------------- 2026-10-15
   不再随模式切成画中画小窗 —— 用户要求视频尺寸恒定。 */

/* ================================================================
/* ================================================================
   2026-10-15 用户拍板：视频列固定宽度 —— 任何模式下视频恒定不变，
   右侧内容区（字幕/词卡/练习卡）宽窄自己定。仅宽屏（≥1290）生效。
   ================================================================ */
@media (min-width: 1290px) {
  .page-shell,
  .page-shell.reading-mode,
  body[class*="practice-"] .page-shell,
  body[class*="practice-"] .page-shell.reading-mode,
  body[class*="wordcard"] .page-shell {
    /* 视频列 = 50vw 比例固定（500~760 上下限），右栏弹性自适应：
       模式间视频恒定，窗口缩放等比，永不出血。 */
    grid-template-columns: clamp(560px, 58vw, 880px) minmax(380px, 1fr) !important;
  }
}

/* ================================================================
   2026-10-15 设置面板新增三项：小窗播放 / 深色主题 / 隐藏标题栏
   ================================================================ */

/* 隐藏标题栏 */
body.hide-video-header .video-header {
  display: none !important;
}

/* ============================================================
   深色主题 = 单一 token 交换（开源主题系统标准做法：组件只引用 token，
   主题切换只改 :root 的 token 值，不做逐组件覆盖）。浅色值见 :root。
   之前「逐类打补丁」的根因：只改具体类、没改语义变量，导致用 var(--text)
   的文字在深色下仍是近黑。现改为反转整条中性色阶 + 语义层 + 状态色变体。
   ============================================================ */
/* 深色主题现在由 themes.js 把整套 token 写到 <html> 内联样式来接管；
   这里只保留 color-scheme 提示（原生控件/滚动条走深色），不再重复声明 token，
   避免属性选择器在 body 上的显式声明覆盖 <html> 内联的主题 token。 */
body[data-player-theme="dark"] {
  color-scheme: dark;
}

/* 主题选择卡（照 vel 设置面板）：由 themes.js 的 renderThemeSheet 渲染到
   [id=themeSheet]（移动端设置面板）或 #themeSheetDrawer（桌面字幕设置抽屉）。
   每张卡 = 某主题的 mini 预览 + 名称 + 描述 + 「当前」徽标。 */
.theme-picker-block { margin-top: 6px; }
.theme-picker-block .theme-picker-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
}
.theme-sheet {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.theme-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .08s;
}
.theme-card:hover { border-color: var(--accent); }
.theme-card:active { transform: translateY(1px); }
.theme-card.is-current {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.theme-card__preview {
  display: block;
  height: 60px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--swatch-preview, var(--swatch-bg, var(--bg)));
  border: 1px solid rgba(127, 127, 127, .18);
}
.theme-card__bar {
  display: block;
  height: 8px;
  background: var(--swatch-accent, var(--accent));
}
.theme-card__title {
  display: block;
  margin: 8px 10px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--swatch-text, var(--text));
}
.theme-card__line {
  display: block;
  margin: 3px 10px 0;
  font-size: 10px;
  color: var(--swatch-text, var(--text));
  opacity: .72;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.theme-card__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 2px 2px;
}
.theme-card__name { font-size: 14px; font-weight: 600; }
.theme-card__desc { font-size: 12px; color: var(--text); opacity: .72; line-height: 1.45; }
.theme-card__badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
}

/* --- iPad 横屏（矮屏）专用：左右分栏 ------------------------------------
   背景：把 ≤1100px 并入移动档后，1024×768 横屏下 16:9 全宽视频高度 = 576px，
   顶栏 60 + 视频 576 + 控制条 110 把字幕完全挤出可视区。
   上下布局在 768 高度下物理放不下（字幕只剩 1 条），横屏改用左右分栏：
   左边视频保持大尺寸，右边字幕占满整列高度。
   ⚠️ 必须限定触摸设备：1280×800 笔记本同样满足 landscape + max-height:860px，
   不限定会把桌面小窗撑成 1280px 宽并横向溢出。 */
@media (orientation: landscape) and (max-height: 860px) and (hover: none) and (pointer: coarse) {
  .page-shell,
  .page-shell.reading-mode {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 0;
    align-items: stretch;
    padding: 10px 12px calc(100px + env(safe-area-inset-bottom));
  }

  .video-section,
  .page-shell.reading-mode .video-section {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
    min-height: 0;
    padding: 0;
  }

  .video-player,
  .page-shell.reading-mode .video-player {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 0;
  }

  .subtitle-section,
  .content-study-section,
  .page-shell.reading-mode .subtitle-section,
  .page-shell.reading-mode .content-study-section {
    grid-column: 2;
    grid-row: 1;
    height: 100%;
    min-height: 0;
  }
}