/* ════════════════════════════════════════════════
   阶段2：播放器专用样式
══════════════════════════════════════ */

/* 五列导航行 */
.player-nav-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* box-sizing: border-box（base.css 全局）下 height 含 padding；
     safe-area 非 0 的容器（PWA / Tauri iOS）里 padding-top 会吃掉 content area，
     按钮被压成 0 高度。height 改为内容高 + safe-top 才能在所有环境正确撑开。 */
  height: calc(44px + var(--safe-top));
  background: var(--card);
  border-bottom: 0.5px solid var(--separator);
  flex-shrink: 0;
  padding-top: var(--safe-top);
}
.pnav-btn {
  background: none;
  border: none;
  border-right: 0.5px solid var(--separator);
  color: var(--blue);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.pnav-btn:last-child { border-right: none; }
.pnav-btn:active { background: var(--blue-light); }
.pnav-btn.active { color: var(--blue); }

/* 视频区 */
.video-wrapper {
  position: relative;
  background: #000;
  flex-shrink: 0;
  min-height: 44px; /* 无视频时防止高度塌陷压缩字幕区 */
}
.lp-video-element {
  width: 100%;
  display: block;
  max-height: 38vh;
  background: #000;
}
.empty-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 48px;
  background: #f2f2f7;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 12px;
  color: #007aff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.empty-action-btn:active {
  background: #e5e5ea;
  transform: scale(0.98);
}
.empty-action-btn.ai-btn {
  background: #007aff;
  color: #fff;
  border: none;
}
.empty-action-btn.ai-btn:active {
  background: #0056b3;
}

/* AI 转录进度展示区 */
.ai-progress-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: #fff;
  height: 100%;
}
.ai-progress-bar-wrap {
  width: 100%;
  max-width: 260px;
  height: 10px;
  background: #f2f2f7;
  border-radius: 5px;
  overflow: hidden;
  margin: 15px 0;
}
.ai-progress-bar-fill {
  height: 100%;
  background: #007aff;
  width: 0%;
  transition: width 0.3s ease;
}
.ai-cancel-btn {
  margin-top: 20px;
  padding: 8px 20px;
  background: #fff;
  border: 1px solid #ff3b30;
  color: #ff3b30;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.player-tool-bar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  height: 40px;
  background: var(--card);
  border-top: 0.5px solid var(--separator);
  border-bottom: 0.5px solid var(--separator);
  flex-shrink: 0;
}
.ptool-btn {
  background: none;
  border: none;
  border-right: 0.5px solid var(--separator);
  color: var(--blue);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.ptool-btn:last-child { border-right: none; }
.ptool-btn:active { background: var(--bg); }
.ptool-btn.active { color: var(--blue); }

.ptool-controls-btn {
  color: #fff;
}

.ptool-controls-icon {
  width: 30px;
  height: 24px;
  border-radius: 9px;
  background: #1c1c1e;
  box-shadow: 0 1px 4px rgba(0,0,0,0.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* 默认（闭锁）：锁身 */
.ptool-controls-icon::before {
  content: '';
  width: 11px;
  height: 10px;
  border: 2px solid #fff;
  border-top: none;
  border-radius: 0 0 3px 3px;
  margin: 3px 0 0;
}

/* 默认（闭锁）：锁扣圆弧，两腿对齐锁身 */
.ptool-controls-icon::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 8px;
  border: 2px solid #fff;
  border-bottom: none;
  border-radius: 7px 7px 0 0;
  top: 5px;
}

/* 触发后（开锁）：背景微亮 */
.ptool-controls-btn.active .ptool-controls-icon {
  background: #2c2c2e;
  box-shadow: 0 1px 4px rgba(0,0,0,0.20);
}

/* 触发后（开锁）：锁身变淡 */
.ptool-controls-btn.active .ptool-controls-icon::before {
  border-color: rgba(255,255,255,0.55);
  width: 11px;
  height: 10px;
  border-top: none;
  border-radius: 0 0 3px 3px;
  margin: 3px 0 0;
}

/* 触发后（开锁）：锁扣右腿抬起，右侧无边框 */
.ptool-controls-btn.active .ptool-controls-icon::after {
  border-color: rgba(255,255,255,0.55);
  border-right: none;
  border-bottom: none;
  border-radius: 5px 0 0 5px;
  width: 9px;
  height: 9px;
  top: 2px;
  left: 4px;
}

/* 字幕列表容器 */
.transcript-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--card);
  min-height: 0;
  position: relative;
}

/* ══════════════════════════════════════
   字幕搜索栏
══════════════════════════════════════ */
.search-bar {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--card);
  border-bottom: 0.5px solid var(--separator);
  flex-shrink: 0;
}
.search-bar.open { display: flex; }

.search-input {
  flex: 1;
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: none;
  background: var(--bg);
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  outline: none;
  -webkit-appearance: none;
}
.search-input:focus { background: var(--bg); }

.search-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: var(--bg);
  color: var(--blue);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.search-nav-btn:disabled { color: var(--text-dim); }
.search-nav-btn:active   { background: var(--blue-light); }

.search-close-btn {
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  border: none;
  background: var(--bg);
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
}
.search-close-btn:active { background: var(--blue-light); }

.search-count {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  min-width: 36px;
  text-align: center;
}

/* 高亮匹配行 */
.line.search-match { background: rgba(0,122,255,0.06) !important; }
.line.search-current { background: rgba(0,122,255,0.14) !important; }
.search-highlight {
  background: rgba(255,214,0,0.55);
  border-radius: 2px;
}
/* 字幕行 */
.line {
  --line-separator: rgba(60, 60, 67, 0.05);
  width: 100%;
  padding: 5px 4px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 1px solid var(--line-separator);
  box-sizing: border-box;
  background: transparent;
  transition: border-color 0.12s;
}

.line.active {
  border-color: var(--border);
}


/* 按钮列（播放按钮，左侧）*/
.btns-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  flex-shrink: 0;
  min-width: 32px;
}

/* 剪辑标记点（右侧，默认淡显）*/
.mark-btn {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid #b0b0b8;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s, background 0.2s, opacity 0.2s;
  display: block;
  opacity: 0.55;
  margin-left: 10px;
  margin-right: 6px;
}
/* 移动端：扩大 mark-btn 触控热区到 44×44pt，视觉大小不变 */
body.is-coarse-pointer .mark-btn {
  position: relative;
}
body.is-coarse-pointer .mark-btn::after {
  content: '';
  position: absolute;
  top: -16px;
  right: -10px;
  bottom: -16px;
  left: -16px;
}
/* 剪辑模式激活后圆点正常可见 */
.range-mode-on .mark-btn {
  opacity: 0.6;
  border-color: #c0c0c5;
}
/* 闪烁提示动画（点剪辑时触发）*/
.mark-btn.clip-hint {
  animation: clipHint 2.5s ease-out forwards;
}
@keyframes clipHint {
  0%   { opacity: 0.3;  border-color: #d2d2d7; transform: scale(1); }
  20%  { opacity: 1;    border-color: var(--orange); transform: scale(1.3); }
  45%  { opacity: 0.5;  border-color: #d2d2d7; transform: scale(1); }
  65%  { opacity: 1;    border-color: var(--orange); transform: scale(1.2); }
  100% { opacity: 0.3;  border-color: #d2d2d7; transform: scale(1); }
}
.mark-btn:active { transform: scale(0.85); }
.line.marked-point .mark-btn {
  background: var(--orange);
  border-color: var(--orange);
  box-shadow: 0 0 6px rgba(255,149,0,0.55);
  opacity: 1;
}
.line.in-range { background: rgba(255,149,0,0.05) !important; }
/* 已创建过卡片的字幕行：按片段编号区分颜色 */
.line.has-card .mark-btn {
  background: var(--clip-color, #34c759);
  border-color: var(--clip-color, #34c759);
  opacity: 1;
}
/* 已剪辑行左侧色条标识（与圆点同色） */
.line.has-card {
  border-left: none;
}
.range-mode-on .line.has-card .mark-btn {
  background: var(--clip-color, #34c759);
  border-color: var(--clip-color, #34c759);
  opacity: 0.85;
}

/* 选中起点、等待选择终点：高亮其它可选圆点，暗示继续操作 */
.range-mode-on.range-await-end .mark-btn {
  opacity: 0.95;
  border-color: #7303f4;
}
.range-mode-on.range-await-end .line.marked-point .mark-btn {
  /* 起点/终点仍保持橙色强调 */
  border-color: var(--orange);
}

/* 播放按钮 */
.play-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
}
.play-btn:hover { border-color: var(--blue); color: var(--blue); }
.line.active .play-btn {
  background: var(--card);
  color: var(--text-dim);
  border-color: var(--border);
  box-shadow: none;
}
/* 播放按钮高亮（上次点击记录，不随 active 改变）*/
.play-btn.last-played {
  border-color: var(--orange);
  color: var(--orange);
}
.line.active .play-btn.last-played {
  background: var(--card);
  color: var(--orange);
  border-color: var(--orange);
}

/* 字幕文本内容 */
.content {
  flex: 1;
  position: relative;       /* needed: .lp-selection-band is absolute inside here */
  line-height: 1.3;
  font-size: var(--subtitle-font-size, 17px);
  color: var(--text);
  text-align: var(--player-subtitle-text-align, center);
  word-wrap: break-word;
  white-space: normal;
  margin: 0;
  padding: 4px 6px 4px 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* 全端统一 DIY 选区，禁用浏览器原生文本选区 */
.word-span {
  -webkit-user-select: none;
  user-select: none;
}

/* 已配图词：只标正文字幕/字幕抽屉，不进入视频浮动字幕；挖空态不能泄露额外提示。 */
.lp-transcript-container .word-span.lp-has-word-image:not(.cloze-blank) {
  position: relative;
}
.lp-transcript-container .word-span.lp-has-word-image:not(.cloze-blank)::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(0, 122, 255, 0.58);
  transform: translateX(-50%);
  pointer-events: none;
}
/* 绿点 = 该词至少还有一张图缺语境例句，点开大图可用当前字幕补录。 */
.lp-transcript-container .word-span.lp-has-word-image.lp-word-image-needs-example:not(.cloze-blank)::after {
  background: rgba(52, 199, 89, 0.62);
}
@media (hover: hover) {
  .lp-transcript-container .word-span.lp-has-word-image:not(.cloze-blank):hover::after {
    background: rgba(0, 122, 255, 0.92);
  }
  .lp-transcript-container .word-span.lp-has-word-image.lp-word-image-needs-example:not(.cloze-blank):hover::after {
    background: rgba(52, 199, 89, 0.95);
  }
}

/* 已配图短语：整段一条连续下划线。三个词打三个点会读成三张互不相干的词图，一条线才说明
   这几个词是一体的。圆点占了 ::after，这里用 ::before，一个词同时属于两者时不打架。 */
/* 线色必须不透明：每个词各画一段并向词间空白外扩 0.2em，空格窄于 0.4em 时两段必然重叠，
   半透明色叠两层就会加深（0.46 → 等效 0.708），肉眼是空格上一截更深的色块。下面存的是把
   原半透明色在容器底色上预混后的等效值，公式 c = bg + (fg - bg) * alpha。
   ⚠ 改容器背景或改这几档 alpha，8 个值要整套重算（暗色一份在文件末「深色主题」段）。
   字幕抽屉恒白底——不是「碰巧没写暗色」，是 base.css「抽屉恒浅色」一节在 body.dark 下
   把抽屉作用域的 --text/--card/--border/--separator 钉回浅色主动维持的，故它只吃这份
   浅色默认值。 */
.lp-transcript-container {
  --phrase-underline:            #94c7ff;  /* rgba(0,122,255,0.42) on #fff */
  --phrase-underline-hover:      #268eff;  /* rgba(0,122,255,0.85) on #fff */
  --phrase-underline-todo:       #a2e5b3;  /* rgba(52,199,89,0.46) on #fff */
  --phrase-underline-todo-hover: #48cd6a;  /* rgba(52,199,89,0.90) on #fff */
}
.lp-transcript-container .word-span.lp-has-phrase-image:not(.cloze-blank) {
  position: relative;
}
.lp-transcript-container .word-span.lp-has-phrase-image:not(.cloze-blank)::before {
  content: '';
  position: absolute;
  /* 向两侧探出，盖住词间空白文本节点，相邻词的线才连得上；首尾两端收回到词边界。 */
  left: -0.2em;
  right: -0.2em;
  bottom: -1px;
  height: 2px;
  border-radius: 1px;
  background: var(--phrase-underline);
  pointer-events: none;
}
.lp-transcript-container .word-span.lp-has-phrase-image.lp-phrase-image-start:not(.cloze-blank)::before {
  left: 0;
}
.lp-transcript-container .word-span.lp-has-phrase-image.lp-phrase-image-end:not(.cloze-blank)::before {
  right: 0;
}
/* 圆点与下划线落在同一个词上时圆点让位。默认位置（容器底边下方 0~4px）会咬进
   下划线（-1~1px）1px，两个标记糊成一团；下移到 4~8px 后中间留出 3px 空隙。 */
.lp-transcript-container .word-span.lp-has-word-image.lp-has-phrase-image:not(.cloze-blank)::after {
  bottom: -8px;
}
/* 绿线 = 该短语至少还有一张图缺语境例句，与词级绿点同一套语义。 */
.lp-transcript-container .word-span.lp-has-phrase-image.lp-phrase-image-needs-example:not(.cloze-blank)::before {
  background: var(--phrase-underline-todo);
}
@media (hover: hover) {
  .lp-transcript-container .word-span.lp-has-phrase-image:not(.cloze-blank):hover::before {
    background: var(--phrase-underline-hover);
  }
  .lp-transcript-container .word-span.lp-has-phrase-image.lp-phrase-image-needs-example:not(.cloze-blank):hover::before {
    background: var(--phrase-underline-todo-hover);
  }
}
.tc {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.lp-transcript-container .word-span.lp-selected-word {
  background: rgba(0, 122, 255, 0.22);
  border-radius: 4px;
}

.lp-transcript-container .line.lp-selected-sentence .content {
  background: transparent;
  border-radius: 0;
}

.lp-transcript-container .word-span.lp-selected-range {
  /* 视觉完全由 .lp-selection-band 覆盖（按视觉行整行画，无词间断层）*/
  background: transparent !important;
}

.lp-selection-band {
  /* absolute inside .content — scrolls with transcript natively, no JS reflow */
  position: absolute;
  background: rgba(0, 122, 255, 0.22);
  border-radius: 3px;
  pointer-events: none;
  z-index: 0;
}

.selection-handle {
  /* absolute inside the scroll container — scrolls with transcript natively */
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #0a84ff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
  z-index: 2500;
  touch-action: none;
}

/* Expanded touch target */
.selection-handle::before {
  content: '';
  position: absolute;
  left: -14px;
  top: -14px;
  right: -14px;
  bottom: -14px;
}

/* Stem / caret line connecting circle to text edge */
.selection-handle::after {
  content: '';
  position: absolute;
  width: 2px;
  height: var(--stem-height, 22px);
  background: #0a84ff;
  left: 50%;
  transform: translateX(-50%);
}

/* Start: circle above word top-left, stem points downward */
.selection-handle[data-edge="start"]::after {
  top: calc(100% - 1px);
}

/* End: circle below word bottom-right, stem points upward */
.selection-handle[data-edge="end"]::after {
  bottom: calc(100% - 1px);
}

.selection-handle.hidden {
  display: none;
}
/* 播放中：与 G8 保持一致，无字号/字重变化 */
.line.active .content { color: var(--text); font-weight: 400; }

/* 加粗样式（保留原 G8 类名）*/
.custom-bold {
  font-weight: 700 !important;
  color: var(--text) !important;
}
#repoTranscript .word-span.custom-bold[data-syl-state="done"],
#srsTranscript .word-span.custom-bold[data-syl-state="done"] {
  font-weight: 400 !important;
}
/* 标记 → 声块着色的中间态（尚无 sylState / pending）：字幕列表里先保持普通正文，
   着色一到直接跳到彩色，不闪黑粗体（用户要求 2026-07-17）。
   missing/fail（库里无切分）不匹配本规则 → 回落 .custom-bold 黑粗体，作为标记的兜底可见样式。
   :not(.cloze-blank) 排除挖空遮罩/渐进态——它有自己的橙色样式，本规则的 !important 不得压过。
   仅限两个列表容器：浮动字幕全员白粗体、overlay/学习页不经声块着色，均不适用。 */
#repoTranscript .word-span.custom-bold:not([data-syl-state]):not(.cloze-blank),
#srsTranscript .word-span.custom-bold:not([data-syl-state]):not(.cloze-blank),
#repoTranscript .word-span.custom-bold[data-syl-state="pending"]:not(.cloze-blank),
#srsTranscript .word-span.custom-bold[data-syl-state="pending"]:not(.cloze-blank) {
  font-weight: 400 !important;
  color: inherit !important;
}
#repoFloatingText .custom-bold,
#srsFloatingText .custom-bold {
  color: #ffeb3b !important;
  text-shadow: inherit;
}
#repoFloatingText,
#srsFloatingText {
  background: transparent !important;
  box-shadow: none !important;
  font-size: var(--subtitle-font-size, 17px);
  font-weight: 700;
  line-height: 1.3;
  text-align: var(--player-subtitle-text-align, center);
  padding: 4px 12px;
  text-shadow:
    1px 1px 0 #000, -1px -1px 0 #000,
    1px -1px 0 #000, -1px 1px 0 #000,
    2px 2px 4px rgba(0,0,0,0.8);
}
#repoFloatingText .line,
#srsFloatingText .line,
#repoFloatingText .content,
#srsFloatingText .content {
  display: inline;
  color: #ffeb3b;
  font-size: inherit;
  font-weight: 700;
  text-align: inherit;
  padding: 0;
}
#repoFloatingText .word-span,
#srsFloatingText .word-span {
  color: #ffeb3b;
  font-weight: 700;
}
#repoFloatingText .word-span.lp-selected-word,
#srsFloatingText .word-span.lp-selected-word {
  background: rgba(0, 122, 255, 0.36);
  border-radius: 4px;
  color: #ffeb3b;
}
#repoFloatingText .word-span.lp-selected-range,
#srsFloatingText .word-span.lp-selected-range {
  background: transparent !important;
  color: #ffeb3b;
}

/* 进度导航栏 */
.player-progress-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(46px + var(--safe-bottom));
  padding: 0 16px var(--safe-bottom);
  background: var(--card);
  border-top: 0.5px solid var(--separator);
  flex-shrink: 0;
}
.prog-btn {
  background: none;
  border: none;
  color: var(--blue);
  font-size: 28px;
  font-weight: 300;
  cursor: pointer;
  padding: 4px 12px;
  line-height: 1;
  min-width: 50px;
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
}
.prog-btn:active { opacity: 0.5; }
.prog-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.prog-btn.active { color: var(--orange); }
.prog-review-btn {
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  background: rgba(0,122,255,0.1);
  border-radius: 12px;
  padding: 4px 10px;
  min-width: 56px;
  white-space: nowrap;
}

/* ══ 收藏单词面板 ══ */
#boldWordsPanel {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  flex-direction: column;
}
#boldWordsPanel.open { display: flex; }

.bold-words-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}

.bold-words-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--card);
  border-radius: 16px 16px 0 0;
  display: flex;
  flex-direction: column;
  max-height: 60vh;
  animation: bwSlideUp 0.3s ease;
}
@keyframes bwSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.bold-words-handle {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 10px auto 4px;
  flex-shrink: 0;
}

.bold-words-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 10px;
  flex-shrink: 0;
  border-bottom: 0.5px solid var(--separator);
}

.bold-words-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.bold-words-close-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}

.bold-words-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--safe-bottom) + 12px);
}

.bold-words-empty {
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.8;
  padding: 32px 24px;
}

.bold-word-item {
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  border-bottom: 0.5px solid var(--separator);
  gap: 4px;
}

.bold-word-phrase {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bold-word-text {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}

.bold-word-play {
  background: var(--blue-light);
  border: none;
  color: var(--blue);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.bold-word-play:active { opacity: 0.6; }

.bold-word-sentence {
  display: none;
  flex-direction: column;
  gap: 8px;
}
.bold-word-sentence.visible { display: flex; }

.bold-word-sentence-text {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
}

.bold-word-sentence-btns {
  display: flex;
  align-items: center;
  gap: 14px;
}

.bold-word-video-btn {
  background: var(--blue-light);
  border: none;
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.bold-word-video-btn:active { opacity: 0.6; }

.bold-word-sentence-toggle,
.bold-word-show-btn {
  background: none;
  border: none;
  color: var(--blue);
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.bold-word-sentence-toggle:active,
.bold-word-show-btn:active { opacity: 0.6; }

.bold-word-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.bw-action {
  background: none;
  border: 0.5px solid var(--separator);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bw-action:active { opacity: 0.6; }

.bw-remove {
  color: var(--red);
  border-color: transparent;
  margin-left: auto;
}

/* 上传区域 */
.upload-zone {
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 18px 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  background: var(--bg);
}
.upload-zone:active,
.upload-zone:hover { border-color: var(--blue); background: var(--blue-light); }
.upload-zone.filled { border-style: solid; border-color: var(--green); background: #f0fff4; }
.upload-zone-sub { padding: 13px 12px; }
.upload-zone-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}
.upload-zone-label {
  font-size: 14px;
  color: var(--text-dim);
  font-weight: 500;
}
.upload-zone.filled .upload-zone-label { color: #2e7d32; font-weight: 600; }

/* ══ 闪卡（text 卡）样式 ══ */
.fc-flashcard {
  flex: 1;
  width: 100%;
  background: var(--card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px;
  cursor: pointer;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: transparent;
}
.fc-flashcard:active { opacity: 0.92; }
.fc-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto 0;
}
.fc-q {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
  width: 100%;
  text-align: center;
  color: var(--text);
}
.fc-hint {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 14px;
  text-align: center;
}
.fc-divider {
  width: 60px;
  height: 1.5px;
  background: var(--border);
  margin: 24px auto;
  display: none;
}
.fc-a {
  font-size: 18px;
  color: var(--text-dim);
  line-height: 1.6;
  display: none;
  white-space: pre-wrap;
  word-break: break-word;
  width: 100%;
  text-align: center;
}
.fc-flashcard.flipped .fc-divider,
.fc-flashcard.flipped .fc-a    { display: block; }
.fc-flashcard.flipped .fc-hint { display: none; }

/* ══ 传统卡图片 ══ */
.fc-image {
  width: 100%;
  max-height: 200px;
  object-fit: contain;
  border-radius: 10px;
  margin-bottom: 14px;
  display: none;
}
.fc-image.visible { display: block; }
.fc-audio-btn {
  display: none;
  align-items: center;
  gap: 6px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
  margin-bottom: 14px;
  transition: background 0.12s;
}
.fc-audio-btn.visible { display: flex; }
.fc-audio-btn:active  { background: var(--blue-light); }

/* ══ 阅读卡 ══ */
.reading-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--card);
}
.reading-card-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 24px 20px 16px;
}
.reading-card-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 16px;
  word-break: break-word;
}
.reading-card-image {
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  border-radius: 10px;
  margin-bottom: 16px;
  display: none;
}
.reading-card-image.visible { display: block; }
.reading-card-audio-btn {
  display: none;
  align-items: center;
  gap: 6px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
  margin-bottom: 16px;
  transition: background 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.reading-card-audio-btn.visible { display: flex; }
.reading-card-audio-btn:active  { background: var(--blue-light); }
.reading-card-body {
  font-size: 17px;
  line-height: 1.8;
  color: var(--text);
  word-break: break-word;
  white-space: pre-wrap;
}
/* 阅读卡评分栏（直接显示，无需翻牌）*/
.reading-rating-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: calc(52px + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: var(--card);
  border-top: 0.5px solid var(--separator);
  flex-shrink: 0;
}

/* ══ 设置开关 toggle ══ */
.settings-toggle {
  position: relative;
  width: 51px;
  height: 31px;
  flex-shrink: 0;
}
.settings-toggle input { opacity: 0; width: 0; height: 0; }
.settings-toggle-track {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 16px;
  transition: background 0.2s;
  cursor: pointer;
}
.settings-toggle input:checked + .settings-toggle-track { background: var(--green); }
.settings-toggle-track::after {
  content: '';
  position: absolute;
  width: 27px; height: 27px;
  left: 2px; top: 2px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.settings-toggle input:checked + .settings-toggle-track::after {
  transform: translateX(20px);
}

/* ══ SRS 评分行 ══ */
/* 复习模式选择器 */
.review-mode-picker {
  display: flex;
  gap: 0;
  background: var(--bg-secondary, #f0f0f0);
  border-radius: 10px;
  padding: 3px;
  width: 100%;
  max-width: 240px;
}
.review-mode-btn {
  flex: 1;
  padding: 8px 0;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  color: var(--text-secondary, #888);
  cursor: pointer;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.review-mode-btn.active {
  background: #fff;
  color: var(--text, #333);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* ══ 复习底栏 ══
   常驻流内（不再 fixed）：正面是「菜单 / 视频名 / 进度⌃」，点一下绕 X 轴翻面成四个评分按钮。
   两面等高 56px，翻转期间容器高度不变；顶部 4 段彩条不参与翻转，既当翻转的轴，
   也预告背面有四个选项（旧版收起态那条 3px 彩线的信息量就落在这里）。

   ⚠ 不要给本元素或其后代加 backdrop-filter：它会把 perspective 的 3D 上下文压平，
   使 backface-visibility 失效、翻过去仍显示正面（实测不稳定复现，随首帧合成层分配而变）。
   旧版 fixed 悬浮在字幕列表上时毛玻璃才有意义；改常驻流内后它下方没有内容，纯属白烧一层。 */
.srs-rating-bar {
  position: relative;
  flex-shrink: 0;
  height: calc(56px + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: var(--card);
  border-top: 0.5px solid var(--separator);
  perspective: 900px;
  -webkit-user-select: none;
  user-select: none;
}

/* 翻转途中不吃点击：原地翻面时手指停在同一像素上，不挡住会把「点标题」变成「点陌生」。
   由 srs-session.js 的 _flipRatingBar 加/摘。 */
.srs-rating-bar.flipping { pointer-events: none; }

/* 四段彩条：固定在栏顶，不随翻转走 */
.srs-bar-stripes {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  z-index: 3;
  pointer-events: none;
}
.srs-bar-stripes i { display: block; opacity: 0.8; }
.srs-bar-stripes i:nth-child(1) { background: #ff3b30; }
.srs-bar-stripes i:nth-child(2) { background: #ff9500; }
.srs-bar-stripes i:nth-child(3) { background: #007aff; }
.srs-bar-stripes i:nth-child(4) { background: #34c759; }

.srs-bar-flip {
  position: relative;
  height: 56px;
  z-index: 1;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}
.srs-rating-bar.open .srs-bar-flip { transform: rotateX(-180deg); }

/* 两面都必须留在渲染树里（只靠 3D 背面隐藏）：评分快捷键 1-4 用
   bar.getClientRects() 判可见，任一面改成 display:none 都会让键盘评分静默失效。 */
.srs-bar-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 正面：菜单按钮 / 视频名 / 进度与提示箭头。左侧原是「本轮进度 1/28」，2026-09-28 让位给菜单、进度挪到右侧
   （第一项「重评上一张」，见 srs-session.js _bindRatingMenu）。 */
.srs-bar-title {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 3px 16px 0 6px;
  gap: 4px;
}
/* 44px 点击区（栏高 56）。点击不冒泡到底栏的「点任意处翻面」，由 JS stopPropagation 保证。 */
.srs-bar-menu {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--blue);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.srs-bar-menu svg { fill: currentColor; }
.srs-bar-menu:active { background: rgba(0,0,0,0.06); }
/* 不用 --text-dim：#8e8e93 在白底上对比度约 3:1，低于 WCAG AA 正文的 4.5:1，
   12px 小字更吃亏。这里是复习时唯一能回答「这句出自哪个视频」的地方，要被读的，
   不是装饰标签；且整条栏是翻面热区，标题灰成静态标签会连「可以点」都传达不出去。 */
.srs-bar-name {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 右侧「本轮进度⌃」：进度与可点提示挨在一起，整块和底栏其余地方一样点了翻面（不单独绑事件）。
   2026-09-28 左侧让位给菜单后挪到这里；手机上浮动按钮的默认位置会压住这一块，可拖走或关掉。 */
.srs-bar-right {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  margin-left: 6px;
}
.srs-bar-progress {
  font-size: 12px;
  font-weight: 600;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}
/* 可点提示，比标题弱一档但不能像原来那样用边框色——那个淡到等于没有 */
.srs-bar-chev {
  font-size: 12px;
  color: var(--text-dim);
  flex-shrink: 0;
}

/* 背面：四个评分按钮 */
.srs-bar-rate {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 100%;
  padding-top: 3px;
  transform: rotateX(180deg);
}

.srs-rate-btn {
  background: none;
  border: none;
  border-right: 0.5px solid var(--separator);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 2px;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
.srs-rate-btn:last-child { border-right: none; }
.srs-rate-btn:active { background: rgba(0,0,0,0.05); }

/* 图标 / 名字 / 间隔预览各占一行。三行在 56px 栏高内实测占 48.3px，按钮可用 53px
   （56 减去 .srs-bar-rate 的 padding-top），余量 4.7px。改这三个字号、行高或 gap
   前先量一遍：总高超过 53px 就会裁字。50px 栏高试过，三行过于拥挤。 */
.rate-icon {
  font-size: 18px;
  line-height: 1;
}
.rate-name {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}
.rate-label {
  font-size: 9px;
  color: var(--text-dim);
  line-height: 1.1;
}

.rate-again .rate-name { color: #d84315; }
.rate-hard  .rate-name { color: #ad7b00; }
.rate-good  .rate-name { color: #1976d2; }
.rate-easy  .rate-name { color: #2e7d32; }

/* 字幕输入来源切换 */
.sub-tab-btn {
  flex: 1;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.sub-tab-btn.active {
  border-color: var(--blue);
  background: var(--blue-light);
  color: var(--blue);
}

/* ══ CardCreator 卡组选择器 ══ */
.cc-deck-option {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  border: 2px solid var(--border);
  background: var(--bg);
  cursor: pointer;
  transition: all 0.15s;
  gap: 10px;
}
.cc-deck-option.selected {
  border-color: var(--blue);
  background: var(--blue-light);
}
.cc-deck-option:active { opacity: 0.7; }
.cc-deck-name  { flex: 1; font-size: 15px; font-weight: 600; color: var(--text); }
.cc-deck-option.selected .cc-deck-name { color: var(--blue); }
.cc-deck-count { font-size: 12px; color: var(--text-dim); }
.cc-deck-check {
  width: 20px; height: 20px; border-radius: 10px;
  border: 2px solid var(--border); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: white;
}
.cc-deck-option.selected .cc-deck-check { background: var(--blue); border-color: var(--blue); }
.cc-new-deck-btn {
  margin-top: 8px; width: 100%; padding: 11px;
  border-radius: 12px; border: 2px dashed var(--border);
  background: transparent; color: var(--blue);
  font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background 0.15s;
}
.cc-new-deck-btn:active { background: var(--blue-light); }

.repo-card-item {
  display: flex;
  align-items: center;
  padding: 13px 16px;
  background: var(--card);
  border-radius: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: opacity 0.12s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  -webkit-user-select: none;
  user-select: none;
}
.repo-card-item:active { opacity: 0.7; }
.repo-card-item.current-playing {
  border: 2px solid var(--blue);
}
.repo-card-item.selected {
  background: var(--blue-light);
  border: 2px solid var(--blue);
}
.repo-card-check {
  width: 22px;
  height: 22px;
  border-radius: 11px;
  border: 2px solid var(--border);
  margin-right: 12px;
  flex-shrink: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: white;
  background: transparent;
  transition: all 0.15s;
}
.manage-mode .repo-card-check { display: flex; }
.repo-card-item.selected .repo-card-check {
  background: var(--blue);
  border-color: var(--blue);
}
.repo-card-thumb {
  font-size: 24px;
  margin-right: 12px;
  flex-shrink: 0;
  line-height: 1;
}
.repo-card-info { flex: 1; min-width: 0; }
.repo-card-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.repo-card-sub {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.repo-card-playing-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--green);
  flex-shrink: 0;
  margin-left: 8px;
  display: none;
}
.repo-card-item.current-playing .repo-card-playing-dot { display: block; }

/* ══════════════════════════════════════
   视频网格列表（方案 B）
══════════════════════════════════════ */
#repoCardsList {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 10px;
  align-content: start;
}
#repoCardsList .empty-state { grid-column: 1 / -1; }

.video-grid-item {
  background: var(--card);
  border-radius: 12px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
  cursor: pointer;
  transition: opacity 0.12s;
  -webkit-user-select: none;
  user-select: none;
  border: 2px solid transparent;
  display: flex;
  flex-direction: column;
}
.video-grid-item:active { opacity: 0.7; }
.video-grid-item.current-playing { border-color: var(--blue); }
.video-grid-item.selected { border-color: var(--blue); background: var(--blue-light); }

.video-grid-thumb {
  width: 100%;
  /* padding-bottom 替代 aspect-ratio，iOS 兼容性更好 */
  padding-bottom: 56.25%;
  height: 0;
  background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 100%);
  position: relative;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}
.video-grid-thumb-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}
.video-grid-thumb img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.25s;
}
.video-grid-thumb img.thumb-loaded { opacity: 1; }

.video-grid-duration {
  position: absolute;
  bottom: 4px; right: 5px;
  background: rgba(0,0,0,0.72);
  color: #fff;
  font-size: 10px; font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  pointer-events: none;
}
.video-grid-check {
  position: absolute;
  top: 6px; left: 6px;
  width: 22px; height: 22px;
  border-radius: 11px;
  border: 2px solid rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.35);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
}
.manage-mode .video-grid-check { display: flex; }
.video-grid-item.selected .video-grid-check { background: var(--blue); border-color: var(--blue); }

.video-grid-info { padding: 9px 12px 11px; }
.video-grid-name {
  font-size: 13px; font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.video-grid-playing {
  display: none;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}
.video-grid-item.current-playing .video-grid-playing { display: flex; }
.video-grid-playing-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: vgPulse 1.2s ease-in-out infinite;
}
@keyframes vgPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.video-grid-playing-label { font-size: 10px; color: var(--green); font-weight: 600; }

/* SRS 卡库中视频/片段卡的缩略图样式 */
.srs-card-item.has-media {
  padding: 0;
  overflow: hidden;
  align-items: stretch;
}
.srs-media-thumb {
  width: 96px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.srs-media-thumb img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.25s;
}
.srs-media-thumb img.thumb-loaded { opacity: 1; }
.srs-media-body {
  flex: 1; min-width: 0;
  padding: 10px 10px 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.srs-media-body .srs-card-info { flex: 1; min-width: 0; }

/* ══════════════════════════════════════
   深色主题
══════════════════════════════════════ */
body.dark {
  --bg:        #1c1c1e;
  --card:      #2c2c2e;
  --text:      #f2f2f7;
  --text-dim:  #8e8e93;
  --border:    #3a3a3c;
  --separator: rgba(255,255,255,0.10);
  --blue-light: rgba(0,122,255,0.18);
}

/* 容器背景 */
body.dark .transcript-container,
body.dark .fc-flashcard,
body.dark .reading-card,
body.dark .reading-card-scroll,
body.dark .list-scroll,
body.dark .page           { background: var(--bg); }

/* 短语下划线预混值的暗色一份：容器底色由 #fff 变成 var(--bg) = #1c1c1e，整套重算。
   定义处与公式见上方「已配图短语」。选择器不含 .lp-transcript-container，是因为字幕抽屉
   （同样带该 class）在暗色下由 base.css「抽屉恒浅色」一节锁死为白底，不能跟着换。 */
body.dark .transcript-container {
  --phrase-underline:            #10437d;  /* rgba(0,122,255,0.42) on #1c1c1e */
  --phrase-underline-hover:      #046cdd;  /* rgba(0,122,255,0.85) on #1c1c1e */
  --phrase-underline-todo:       #276b39;  /* rgba(52,199,89,0.46) on #1c1c1e */
  --phrase-underline-todo-hover: #32b653;  /* rgba(52,199,89,0.90) on #1c1c1e */
}

/* 字幕文本 */
body.dark .line {
  --line-separator: rgba(255,255,255,0.04);
}
body.dark .custom-bold    { color: #fff !important; }

/* 导航 & 栏 */
body.dark .tab-bar        { background: rgba(28,28,30,0.94); }
body.dark .top-nav        { background: rgba(44,44,46,0.92); }
body.dark .player-nav-bar { background: #2c2c2e; border-bottom-color: var(--separator); }
body.dark .player-tool-bar{ background: #2c2c2e; border-top-color: var(--separator); border-bottom-color: var(--separator); }
body.dark .pnav-btn,
body.dark .ptool-btn      { border-right-color: var(--separator); }
body.dark .player-progress-bar { background: #2c2c2e; border-top-color: var(--separator); }
body.dark .review-mode-picker { background: #1c1c1e; }
body.dark .review-mode-btn { color: #8e8e93; }
body.dark .review-mode-btn.active { background: #3a3a3c; color: #fff; box-shadow: none; }
body.dark #srsTrainingArea { background: #1c1c1e; }

/* 卡组 & 卡片列表项 */
body.dark .deck-item,
body.dark .srs-card-item,
body.dark .repo-card-item { background: #2c2c2e; box-shadow: none; }
body.dark .deck-item:active,
body.dark .srs-card-item:active,
body.dark .repo-card-item:active { opacity: 0.6; }
body.dark .deck-name,
body.dark .srs-card-front,
body.dark .repo-card-name { color: var(--text); }

/* Modal & ActionSheet */
body.dark .modal-sheet    { background: #2c2c2e; }
body.dark .action-group,
body.dark .action-cancel  { background: rgba(58,58,60,0.98); }
body.dark .action-item    { color: var(--text); border-bottom-color: var(--separator); }
body.dark .action-item.danger { color: var(--red); }

/* 表单 */
body.dark .form-input     { background: #3a3a3c; border-color: transparent; color: var(--text); }
body.dark .form-input:focus { background: #48484a; border-color: var(--blue); }
body.dark .sheet-title,
body.dark .confirm-title  { color: var(--text); }
body.dark .confirm-msg    { color: var(--text-dim); }
body.dark .sheet-handle   { background: #48484a; }

/* 设置页 */
body.dark .settings-group { background: #2c2c2e; }
body.dark .settings-row-btn:active { background: rgba(255,255,255,0.06); }

/* 闪卡 */
body.dark .fc-q           { color: var(--text); }
body.dark .fc-a           { color: #adadb8; }
body.dark .fc-divider     { background: var(--border); }
body.dark .fc-hint        { color: var(--text-dim); }
body.dark #fcEmpty,
body.dark #fcDone         { background: var(--bg); }

/* CardCreator 卡组选项 */
body.dark .cc-deck-option { background: #3a3a3c; border-color: var(--border); }
body.dark .cc-new-deck-btn{ border-color: var(--border); }

/* 上传区 */
body.dark .upload-zone    { background: #3a3a3c; border-color: var(--border); }
body.dark .upload-zone.filled { background: #1a2e1a; }

/* ══════════════════════════════════════
   设置页样式
══════════════════════════════════════ */
.settings-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 20px 4px 6px;
  -webkit-user-select: none;
  user-select: none;
}
.settings-group {
  background: var(--card);
  border-radius: 13px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  -webkit-user-select: none;
  user-select: none;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  min-height: 48px;
  -webkit-user-select: none;
  user-select: none;
}
.settings-row-col {
  flex-direction: column;
  align-items: flex-start;
}
.settings-row-btn { cursor: pointer; -webkit-user-select: none; user-select: none; }
.settings-row-btn:active { background: rgba(0,0,0,0.04); }
.settings-label  { font-size: 16px; color: var(--text); -webkit-user-select: none; user-select: none; }
.settings-value  { font-size: 15px; color: var(--text-dim); -webkit-user-select: none; user-select: none; }
.settings-chevron { font-size: 18px; color: var(--border); font-weight: 600; -webkit-user-select: none; user-select: none; }
.settings-separator {
  height: 0.5px;
  background: var(--separator);
  margin-left: 16px;
}

/* 主题选择器 */
.theme-picker {
  display: flex;
  gap: 12px;
}
.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.theme-preview {
  width: 52px;
  height: 36px;
  border-radius: 8px;
  border: 2px solid var(--border);
  transition: border-color 0.15s;
}
.theme-preview-light {
  background: linear-gradient(135deg, #f2f2f7 50%, #ffffff 50%);
}
.theme-preview-dark {
  background: linear-gradient(135deg, #1c1c1e 50%, #2c2c2e 50%);
}
.theme-option.active .theme-preview { border-color: var(--blue); }
.theme-name {
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 500;
}
.theme-option.active .theme-name { color: var(--blue); font-weight: 600; }

/* 字号预览 */
.font-preview {
  font-size: 15px;
  color: var(--text-dim);
  flex: 1;
  text-align: center;
  padding: 0 8px;
  transition: font-size 0.15s;
}

.segmented-control {
  display: inline-grid;
  grid-auto-flow: column;
  background: var(--bg-secondary);
  border: 0.5px solid var(--separator);
  border-radius: 8px;
  overflow: hidden;
}
.segmented-control button {
  min-width: 44px;
  height: 30px;
  border: none;
  border-right: 0.5px solid var(--separator);
  background: transparent;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.segmented-control button:last-child { border-right: none; }
.segmented-control button.active {
  background: var(--blue);
  color: #fff;
}

/* ══════════════════════════════════════
   卡库卡片列表样式（复用 repo-card-item）
══════════════════════════════════════ */
.srs-card-item {
  background: var(--card);
  border-radius: 12px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  padding: 13px 16px;
  gap: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.srs-card-item:active { opacity: 0.7; }
.srs-card-item.selected {
  background: var(--blue-light);
  border: 2px solid var(--blue);
}
.srs-card-check {
  width: 22px; height: 22px;
  border-radius: 11px;
  border: 2px solid var(--border);
  flex-shrink: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 13px; color: white;
}
.srs-manage-mode .srs-card-check { display: flex; }
.srs-card-item.selected .srs-card-check { background: var(--blue); border-color: var(--blue); }
.srs-card-info { flex: 1; min-width: 0; }
.srs-card-front {
  font-size: 15px; font-weight: 600;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.srs-card-back {
  font-size: 12px; color: var(--text-dim);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.srs-card-meta {
  font-size: 11px; color: var(--text-dim); margin-top: 3px;
}
.srs-card-actions { display: flex; gap: 6px; flex-shrink: 0; }
.srs-ci-btn {
  background: none; border: none; font-size: 17px;
  cursor: pointer; padding: 4px; border-radius: 8px;
  transition: background 0.12s;
}
.srs-ci-btn:active { background: rgba(0,0,0,0.06); }

/* 卡库卡片列表按来源视频分组（srs-card-groups.js）：组头 + 展开后的短片行 */
.srs-cards-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 16px 0;
  font-size: 12px; color: var(--text-dim);
}
.srs-cards-toolbar-btns { display: flex; gap: 6px; flex-shrink: 0; }
.srs-cards-sort-btn {
  border: none; background: var(--blue-light); color: var(--blue);
  font-size: 12px; padding: 5px 10px; border-radius: 14px; cursor: pointer;
}
.srs-cards-sort-btn:active { opacity: 0.6; }
.srs-card-group { margin-bottom: 8px; }
.srs-card-group-head {
  display: flex; align-items: center; gap: 10px;
  background: var(--card);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.srs-card-group-head:active { opacity: 0.7; }
.srs-card-group-chevron {
  width: 12px; flex-shrink: 0;
  font-size: 20px; line-height: 1; color: var(--text-dim);
  transition: transform 0.15s;
}
.srs-card-group.open .srs-card-group-chevron { transform: rotate(90deg); }
.srs-card-group-info { flex: 1; min-width: 0; }
.srs-card-group-title {
  font-size: 15px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.srs-card-group-meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.srs-card-group-new { color: var(--blue); }
.srs-card-group-due { color: var(--orange); }
.srs-card-group-suspended { color: var(--text-dim); font-weight: 600; }
/* 暂停复习的卡：内容压暗，勾选框与操作按钮保持原样（管理模式里照常能选） */
.srs-card-item.is-suspended .srs-card-info,
.srs-card-item.is-suspended .srs-media-thumb { opacity: 0.5; }
.srs-card-suspended-tag { font-weight: 600; }
.srs-card-group-bar {
  height: 3px; border-radius: 2px; margin-top: 7px; overflow: hidden;
  background: var(--separator);
}
.srs-card-group-bar i { display: block; height: 100%; background: var(--green); }
.srs-card-group-body { padding: 8px 0 0 12px; }
.srs-card-group-body:empty { display: none; }
body.dark .srs-card-group-head { box-shadow: none; }

/* 卡片列表：字幕搜索框（srs-card-search.js）与行内那一句 */
.srs-cards-search {
  position: relative;
  padding: 8px 16px 0;
}
.srs-cards-search input {
  width: 100%;
  height: 36px;
  padding: 0 34px 0 12px;
  border: none;
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font-size: 16px;            /* < 16px 时 iOS 聚焦会整页放大 */
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}
.srs-cards-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.srs-cards-search input::placeholder { color: var(--text-dim); }
.srs-cards-search button {
  position: absolute; right: 22px; top: 14px;   /* 上内边距 8 + 输入框半高 18 − 按钮半高 12 */
  width: 24px; height: 24px; border-radius: 12px;
  border: none; background: var(--separator); color: var(--text-dim);
  font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.srs-card-snippet {
  font-size: 12px; line-height: 1.4; color: var(--text-dim);
  margin-top: 2px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;        /* 最多两行：命中词在句尾时也看得到 */
  line-clamp: 2;
}
.srs-card-snippet mark {
  background: rgba(255,204,0,0.45);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}

/* 卡片列表：状态筛选条（srs-card-filter.js） */
.srs-cards-filters {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 16px 0;
}
.srs-cards-filter {
  border: none; border-radius: 14px;
  padding: 5px 10px;
  background: var(--card); color: var(--text);
  font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.srs-cards-filter span { color: var(--text-dim); font-size: 12px; }
.srs-cards-filter.on { background: var(--blue); color: #fff; }
.srs-cards-filter.on span { color: rgba(255,255,255,0.8); }
.srs-cards-filter:active { opacity: 0.7; }

/* 管理模式：组头「选中本集」 */
.srs-card-group-select {
  flex-shrink: 0;
  border: none; border-radius: 14px;
  padding: 5px 10px;
  background: var(--blue-light); color: var(--blue);
  font-size: 12px; cursor: pointer;
}
.srs-card-group-select.on { background: var(--blue); color: #fff; }
.srs-card-group-selcount { color: var(--blue); }

/* 管理模式导航栏：标题（「已选 N 张」）紧跟「取消」左对齐、限宽，不和右侧四个按钮（全选 / 移动 / 暂停 / 删除，
   连右边距共 204px）重叠。字号比普通标题小 1px：375px 宽时「已选 2557 张」约 96px，上限 99px 刚好放得下、
   不出省略号（2026-10-06 实测：文字止于 168px，「全选」起于 171px） */
#srsCardsNav.srs-cards-managing .nav-title {
  left: 72px;
  transform: none;
  max-width: calc(100% - 72px - 204px);
  font-size: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 批量移动合集面板（srs-card-move.js） */
.srs-move-sub { font-size: 13px; color: var(--text-dim); margin-bottom: 12px; }
.srs-move-deck-list { display: flex; flex-direction: column; gap: 8px; }
.srs-move-deck {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 12px 14px;
  border: none; border-radius: 12px;
  background: var(--bg); color: var(--text);
  font-size: 15px; text-align: left; cursor: pointer;
}
.srs-move-deck:active { opacity: 0.7; }
.srs-move-deck-count { font-size: 13px; color: var(--text-dim); flex-shrink: 0; }
.srs-move-empty { font-size: 13px; color: var(--text-dim); padding: 4px 2px; }
.srs-move-new { display: flex; gap: 8px; margin-top: 14px; }
.srs-move-new input {
  flex: 1; min-width: 0; height: 40px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--card); color: var(--text);
  font-size: 16px;            /* < 16px 时 iOS 聚焦会整页放大 */
}
.srs-move-new button {
  flex-shrink: 0; border: none; border-radius: 10px; padding: 0 14px;
  background: var(--blue); color: #fff; font-size: 14px; cursor: pointer;
}
.srs-move-error { font-size: 13px; color: var(--red); margin-top: 8px; }

/* 卡片预览弹层（srs-card-preview.js）：只读，视频 + 片段内各句 */
.srs-preview-sheet { max-width: 640px; }
.srs-preview-head {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 16px 10px;
}
.srs-preview-title {
  flex: 1; min-width: 0;
  font-size: 15px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.srs-preview-close {
  width: 30px; height: 30px; border-radius: 15px; flex-shrink: 0;
  border: none; background: var(--separator); color: var(--text-dim);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.srs-preview-stage {
  position: relative;
  background: #000;
  aspect-ratio: 16 / 9;
  max-height: 45vh;
  flex-shrink: 0;
}
.srs-preview-stage video {
  width: 100%; height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
}
.srs-preview-stage.loading::after {
  content: '加载中…';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.75); font-size: 13px;
  pointer-events: none;
}
.srs-preview-play {
  position: absolute; left: 50%; top: 50%;
  width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 28px; border: none;
  background: rgba(0,0,0,0.55); color: #fff;
  font-size: 22px; line-height: 1; padding-left: 4px;
  cursor: pointer;
}
.srs-preview-msg {
  position: absolute; left: 16px; right: 16px; top: 50%;
  transform: translateY(-50%);
  text-align: center; color: #fff; font-size: 13px;
}
.srs-preview-lines {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 12px 4px;
  min-height: 0;
}
.srs-preview-line {
  font-size: 15px; line-height: 1.45; color: var(--text);
  padding: 8px 10px; border-radius: 10px;
  cursor: pointer;
}
.srs-preview-line:active { background: var(--separator); }
.srs-preview-line.active { background: var(--blue-light); color: var(--blue); }

/* --- 在 css/player.css 末尾添加 --- */

/* 仓库：等待选终点时统一强调圆点（无呼吸 / 无逐行动画） */
.is-pulse-hint .mark-btn {
  border-color: #7303f4 !important;
  opacity: 0.8 !important;
}

.is-pulse-hint .line.marked-point .mark-btn {
  background: var(--orange) !important;
  border-color: var(--orange) !important;
  transform: scale(1.2);
  opacity: 1 !important;
}

/*
 * 失焦 / 后台（html.lp-app-in-background）：暂停「点剪辑」触发的 clip-hint 短时动画，并去掉圆点 transition。
 */
html.lp-app-in-background .mark-btn.clip-hint {
  animation: none !important;
}
html.lp-app-in-background .range-mode-on .mark-btn {
  transition: none !important;
}

/* ══════════════════════════════════════
   训练页跟打样式
══════════════════════════════════════ */
.tc          { position: relative; }
.tc-correct  { color: #43a047; }
.tc-wrong    { color: #ff5252; background: #ffebee; border-radius: 2px; }
/* 上格原文刻意**不画光标** —— 光标属于「你要敲进去的位置」，也就是下面的回显格。
   例外只有听写模式：那时回显行整行收起，光标必须回到上格（见本节末尾）。 */

/* ══════════════════════════════════════
   跟打双行对照：上格原文、下格回显实际敲入的字符
   结构见 typing-render.js。断行只发生在词块（.tw）之间，
   词块内部 nowrap —— 上下两格因此永远成对断行、绝不错位。
══════════════════════════════════════ */
.tw               { display: inline-block; vertical-align: top; white-space: nowrap; }
/* 配对靠间距说话：pair 内两格收紧、pair 之间拉开，否则连续几行下来
   分不清哪行是原文、哪行是自己敲的（行距一律 1.6 时实测就是这样）。 */
.tw-orig, .tw-echo{ display: block; line-height: 1.35; }
.tw-echo          { min-height: 1.35em; padding-bottom: .5em; }
/* 回显格锁死一字宽：回显的是用户实际敲的字符，iOS 中文键盘可能敲进全角字，
   一个 2ch 宽的字就会撑宽词块、把上下两格错开一格。锁宽后输入什么都不撑格。 */
.te               { display: inline-block; width: 1ch; overflow: hidden; color: #43a047; }
.te-wrong         { color: #ff5252; background: #ffebee; border-radius: 2px; }
.te-current       { border-bottom: 3px solid var(--blue); background: #e8f5e9; }

/* ── 声块着色：原文按「跟读着色声块」交替上色 ──
   加类的是 typing-syllable-paint.js（播放页「拼写」浮层与训练页跟打共用），
   颜色与 syllable-highlight.js 的 PALETTE 逐个对齐 —— 同一个词在字幕里、翻译面板里、
   跟打原文里必须是同一组颜色，否则「按颜色记音块」在页面之间就断了。
   :not(.tc-correct):not(.tc-wrong) 是刻意的：敲对转绿、敲错转红，颜色永远先表达
   「这一格现在是什么状态」，声块色只负责还没敲的那部分。 */
.tc-syl-0:not(.tc-correct):not(.tc-wrong) { color: #e53935; }
.tc-syl-1:not(.tc-correct):not(.tc-wrong) { color: #1e88e5; }

/* 打对后 tc-wrong 被摘掉、红色消失，这个标记不清：打完一遍能一眼看出哪些词老是错。 */
.tc-everwrong.tc-correct { background: rgba(255, 82, 82, .13); border-radius: 2px; }
.tc-tap-hl   { background: rgba(0,122,255,.18); border-radius: 2px; }
.tc-selected-word {
  background: rgba(0, 122, 255, 0.24);
  border-radius: 2px;
}
.tc-selected-range,
.tc-selected-sentence {
  background: rgba(0, 122, 255, 0.14);
  border-radius: 2px;
}

/* ── 听写模式：字母藏成下划线空位，逐字母揭示 ──
   仅字母/数字（.tc-hideable）会被藏，空格与标点（无此类）始终可见 →
   自动露出「每个词有几个字母」的骨架。等宽字体保证藏/露占同宽、揭示零重排。
   容器 #typingBox 加 .dictation 时生效，去掉即恢复全文可见（完全可逆）。 */
/* 听写的前提是原文看不见，与「上格一直摆着答案」的双行对照天然互斥 →
   整行收起回显格，退回就地覆写。纯 CSS，DOM 一个节点都不重建：
   听写开关因此保持即时可逆，也不会在 iOS 上因重建 DOM 丢焦点、软键盘弹不回来。 */
.dictation .tw-echo { display: none; }
/* 回显行收起后光标没了落点 → 回到上格，恢复旧版光标样式 */
.dictation .tc-current { color: #1a1a1a; border-bottom: 3px solid var(--blue); background: #e8f5e9; }
/* 上面为「配对分组」收紧的行距只对双行有意义；退回单行必须还原成旧版的 1.6，
   否则听写模式的行距会跟着变紧——那是现存体验，不在本次改动范围内。 */
.dictation .tw-orig { line-height: 1.6; }

.dictation .tc-hideable:not(.tc-correct) {
  color: transparent;                       /* 未打的字母不显形 */
  border-bottom: 2px solid #cfd4da;         /* 只留一条空位下划线 */
}
/* 当前正在读的整词：浅蓝高亮带，满屏空位时指明「耳朵听到的词在哪一格」 */
.dictation .tc-hideable.tc-cur-word { background: #f2f7ff; cursor: pointer; }
/* 光标格：蓝下划线 + 蓝底，但依旧不露字母（沿用上面的 color:transparent） */
.dictation .tc-hideable.tc-current:not(.tc-correct) {
  border-bottom-color: var(--blue);
  background: #e8f0fe;
}
/* 打错：空位闪红，绝不揭示正确答案（否则打错即等于看到答案） */
.dictation .tc-hideable.tc-wrong:not(.tc-correct) {
  border-bottom-color: #ff5252;
  background: #ffebee;
}
/* 听写模式下字母本就藏着（上面的 color:transparent）。声块色的特异性比那条高，
   不兜这一层就会把答案直接染出来 —— 而开关随时可切，切过去时格子上的 .tc-syl-* 还在。
   刻意放在 peek 规则**之前**：按空格看提示时那一格要浮现橙色字母，那条得赢过这条。 */
.dictation .tc-hideable.tc-syl-0:not(.tc-correct),
.dictation .tc-hideable.tc-syl-1:not(.tc-correct) { color: transparent; }
/* 听写提示（只显示、不代打）：按空格让当前空位浮现橙色正确字母，光标不前进、仍要自己敲。
   :not(.tc-correct) → 用户自己敲对后 tc-correct 生效、此规则失效，字母转为正常绿。
   刻意只「显示」不「填入」，保留自己按键的动作以练肌肉记忆。 */
.dictation .tc-hideable.tc-peek:not(.tc-correct) { color: #f57c00; }

/* 听写状态条：小、非模态，固定在顶部居中，提示当前处于就地重练、打完自动回位 */
.training-drill-badge {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(26, 26, 26, 0.9);
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

.global-action-menu {
  position: fixed;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  /* 浅色毛玻璃 + 黑字（用户 2026-08-22 指定）。刻意不做全透明：工具条既会浮在白色字幕列表上、
     也会浮在深色视频画面上，75% 白底 + 强模糊在两种底色下都能把黑字托住。
     backdrop-filter 不生效的浏览器仍落到这层实色上，不会退化成看不见。 */
  background: rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  z-index: 2600;

  /* 按钮数量随可用能力浮动（跟读/编辑声块/编辑字幕都是条件出现），
     窄屏放不下时横向滚动，绝不换行、绝不溢出视口。
     overscroll-behavior 挡住滚到头后把字幕列表一起带走（那会触发选区清除、菜单当场消失）。 */
  max-width: calc(100vw - 16px);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.global-action-menu::-webkit-scrollbar {
  display: none;
}

.global-action-menu.hidden {
  display: none;
}

.global-action-item {
  flex: 0 0 auto;
  white-space: nowrap;
  /* 给下面那条分隔线当定位锚 */
  position: relative;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #1c1c1e;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
    "Heiti SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  padding: 8px 14px;
  min-height: 34px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.global-action-item:active {
  background: rgba(0, 0, 0, 0.09);
}

/* 置灰项（global-action-menu.js items[].disabled） */
.global-action-item:disabled {
  color: rgba(28, 28, 30, 0.35);
  cursor: default;
}
.global-action-item:disabled:active {
  background: transparent;
}

/* 说明行（global-action-menu.js items[].info）：只显示信息，是 span 不是按钮 */
.global-action-info {
  color: rgba(28, 28, 30, 0.6);
  font-weight: 500;
  cursor: default;
}
.global-action-info:active {
  background: transparent;
}

/* 相邻两项之间的发丝分隔线（用户 2026-09-04 要求）。菜单最多能到 8 项，
   纯靠 2px 的 gap 分不开，一排中文读起来是连成一片的。

   为什么是绝对定位的伪元素，而不是 border-left / 真 DOM 节点：
     · `border-left` 落在按钮自己的圆角矩形边上，:active 那层灰底一压就盖掉半截；
       而线落在 gap 的中线上（left:-1.5px = gap[-2px,0] 的正中），与按下态互不干扰。
     · 真 DOM 分隔节点要改 global-action-menu.js 的建项循环，还会混进 flex 流影响
       横向滚动宽度，并让 `menu.children` 不再与 items 一一对应。
   `+` 相邻兄弟选择器保证首项左边不长线；条件出现的按钮（跟读/编辑声块/编辑字幕）
   增减时也不用管，谁在最左谁自动没线。 */
.global-action-item + .global-action-item::before {
  content: '';
  position: absolute;
  left: -1.5px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background: rgba(0, 0, 0, 0.14);
  pointer-events: none;
}

/* ══════════════════════════════════════
   训练区左上角播放按钮（开关行左侧，全端显示）
══════════════════════════════════════ */
.training-play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-right: auto;
  border-radius: 50%;
  border: none;
  background: var(--blue, #007aff);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-user-select: none;
  user-select: none;
}