/* =====================================================
   Speakfrench 法语字幕页改版 — Style Override
   按照 Codex 执行指令_字幕页改版.md 实现
   ===================================================== */

/* 0. 字体加载 */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,500&family=Noto+Sans+SC:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* 1. 设计 Token（浅色主题） */
:root {
  --sf-accent:        #B4762F;
  --sf-accent-soft:   rgba(180,118,47,0.10);
  --sf-accent-line:   rgba(180,118,47,0.35);
  --sf-mark-blue:     #3A5478;
  --sf-mark-blue-bg:  rgba(58,84,120,0.09);
  --sf-mark-green:    #4E7A56;
  --sf-mark-green-bg: rgba(78,122,86,0.10);
  --sf-text-hi:       #22241F;
  --sf-text-mid:      #706C62;
  --sf-text-low:      #ACA89C;
  --sf-line:          #E2E0D8;
  --sf-line-soft:     #EAE8E1;
  --sf-bg-surface:    #F5F5F1;
  --sf-surface:       #EEEDE7;
  --sf-bg-page:       #F8F9FA;
}

/* ===================================================
   2. 顶部导航栏
   =================================================== */
.mobile-top-tab {
  background: var(--sf-bg-surface) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--sf-line) !important;
}
.mobile-top-back {
  color: var(--sf-text-mid) !important;
}
.mobile-top-title {
  font-family: 'Noto Sans SC', sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--sf-text-hi) !important;
}
.mobile-top-favorites {
  background: transparent !important;
  border: 1px solid var(--sf-line) !important;
  color: var(--sf-accent) !important;
  border-radius: 20px !important;
  box-shadow: none !important;
}

/* ===================================================
   3. 视频区 — 原文/中文切换按钮高亮
   =================================================== */
.vlp-player-subtitle-toggle.active {
  background: var(--sf-accent) !important;
  border-color: var(--sf-accent) !important;
  color: #fff !important;
}

/* ===================================================
   4. 字幕列表
   =================================================== */

/* 滚动区上下渐隐遮罩 */
.vlp-subtitle-items {
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0,
    #000 16px,
    #000 calc(100% - 24px),
    transparent 100%
  ) !important;
  mask-image: linear-gradient(
    180deg,
    transparent 0,
    #000 16px,
    #000 calc(100% - 24px),
    transparent 100%
  ) !important;
  padding: 6px 0 14px !important;
}

/* 每条字幕：从卡片改为列表行 */
.vlp-subtitle-item {
  padding: 14px 20px !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--sf-line-soft) !important;
  box-shadow: none !important;
  transform: none !important;
  animation: none !important;
  position: relative !important;
  /* flex 布局：时间戳+星标在同一行，正文和译文各占整行 */
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0 !important;
}

/* 当前播放行：左侧 3px 色条 + 渐变底色 */
.vlp-subtitle-item.active {
  background: linear-gradient(
    90deg,
    var(--sf-accent-soft),
    transparent 60%
  ) !important;
  border-color: var(--sf-line-soft) !important;
  box-shadow: none !important;
  transform: none !important;
  animation: none !important;
}
.vlp-subtitle-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--sf-accent);
  border-radius: 0 2px 2px 0;
  pointer-events: none;
}

/* 时间戳 */
.vlp-subtitle-time {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10.5px !important;
  color: var(--sf-text-low) !important;
  letter-spacing: 0.4px !important;
  font-weight: 400 !important;
  margin-bottom: 6px !important;
  order: 1 !important;
  flex: 1 !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  min-width: 0 !important;
}
.vlp-subtitle-item.active .vlp-subtitle-time {
  color: var(--sf-accent) !important;
  font-weight: 600 !important;
}

/* 收藏星标：移到时间戳右侧 */
.subtitle-favorite-btn {
  display: inline-flex !important;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  order: 2 !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  margin-bottom: 6px !important;
  width: 15px !important;
  height: 15px !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: var(--sf-text-low) !important;
  z-index: 1 !important;
  align-items: center !important;
  justify-content: center !important;
}
.vlp-subtitle-item.active .subtitle-favorite-btn {
  color: var(--sf-accent) !important;
}
.subtitle-favorite-btn.favorited {
  color: var(--sf-accent) !important;
}
.subtitle-favorite-btn:active {
  background: transparent !important;
  color: var(--sf-accent) !important;
}

/* 法语正文（衬线字体） */
.vlp-subtitle-text {
  font-family: 'Newsreader', serif !important;
  font-size: 16.5px !important;
  line-height: 1.55 !important;
  color: var(--sf-text-hi) !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
  margin-bottom: 0 !important;
  order: 3 !important;
  width: 100% !important;
  flex-basis: 100% !important;
}
.vlp-subtitle-item.active .vlp-subtitle-text {
  font-weight: 600 !important;
  color: var(--sf-text-hi) !important;
}

/* 中文译文 */
.vlp-subtitle-translation {
  font-family: 'Noto Sans SC', sans-serif !important;
  font-size: 12.5px !important;
  line-height: 1.6 !important;
  color: var(--sf-text-mid) !important;
  margin-top: 5px !important;
  order: 4 !important;
  width: 100% !important;
  flex-basis: 100% !important;
}
.vlp-subtitle-item.active .vlp-subtitle-translation {
  color: var(--sf-text-mid) !important;
}

/* 跟读模式录音控件排到最后 */
.subtitle-recording-controls {
  order: 5 !important;
  width: 100% !important;
  flex-basis: 100% !important;
}

/* ===================================================
   5. 生词高亮：从底部描线改为圆角色块标签
   =================================================== */
.word-highlight {
  border-bottom: none !important;
  padding: 1px 5px !important;
  border-radius: 5px !important;
  background: var(--sf-mark-green-bg) !important;
  color: var(--sf-mark-green) !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: opacity 0.15s ease !important;
  position: static !important;
  z-index: auto !important;
  margin: 0 1px !important;
}
.word-highlight::after,
.word-highlight::before {
  display: none !important;
}
.word-highlight:hover {
  background: var(--sf-mark-green-bg) !important;
  opacity: 0.8 !important;
}

/* ===================================================
   6. 底部功能栏 — 贴底，去掉悬浮胶囊效果
   =================================================== */
.mobile-bottom-toolbar {
  box-shadow: none !important;
  border-radius: 0 !important;
  background: var(--sf-bg-surface) !important;
  border-top: 1px solid var(--sf-line) !important;
  padding: 11px 8px calc(11px + env(safe-area-inset-bottom, 10px)) !important;
  gap: 0 !important;
  justify-content: space-around !important;
}

/* 图标按钮颜色 */
.toolbar-icon-btn {
  color: var(--sf-text-mid) !important;
  min-width: 56px !important;
  padding: 8px 4px !important;
}
.toolbar-icon-btn.active {
  color: var(--sf-accent) !important;
}

/* 标签文字 */
.toolbar-label {
  font-family: 'Noto Sans SC', sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px !important;
  color: inherit !important;
}

/* 播放按钮：蓝改橙 */
.toolbar-play-btn {
  background: linear-gradient(160deg, #C88A45, var(--sf-accent)) !important;
  box-shadow: 0 6px 16px -4px rgba(180,118,47,0.45) !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
}

/* 倍速菜单配色 */
.toolbar-speed-menu {
  background: #2A2520 !important;
}
.toolbar-speed-option:hover {
  background: rgba(180,118,47,0.15) !important;
  color: var(--sf-accent) !important;
}