body {
  -webkit-font-smoothing: antialiased;
}

/* 滚动条样式 */
.scrollbar-thin::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}
.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.6);
  border-radius: 999px;
}

/* ✅ 词汇高亮：极淡薄雾效果 + 区分样式 */
.token-word {
  border: 1px solid rgba(200, 202, 215, 0.30);   /* 中性框：C1/C2/无级别词（透明度由 0.15 提到 0.30，看得见不抢眼） */
  border-radius: 3px;
  padding: 1px 3px;
  cursor: pointer;
  transition: all 0.15s;
}
/* 按级别上淡色：A2 青绿 / B1 品红 / B2 金黄；C1·C2 维持上面的中性框 */
.token-word[data-cefr="A2"] { border-color: rgba(45, 212, 191, 0.60); }
.token-word[data-cefr="B1"] { border-color: rgba(244, 114, 182, 0.64); }
.token-word[data-cefr="B2"] { border-color: rgba(250, 204, 21, 0.66); }

.token-word:hover {
  background: rgba(255, 255, 255, 0.05);
}

.token-phrase,
.token-phrase-part {
  border-bottom: 2px dashed rgba(200, 202, 215, 0.42);   /* 词组中性下划线（C1·C2） */
  padding-bottom: 1px;
  cursor: pointer;
  transition: all 0.15s;
}
.token-phrase[data-cefr="A2"], .token-phrase-part[data-cefr="A2"] { border-bottom-color: rgba(45, 212, 191, 0.60); }
.token-phrase[data-cefr="B1"], .token-phrase-part[data-cefr="B1"] { border-bottom-color: rgba(244, 114, 182, 0.64); }
.token-phrase[data-cefr="B2"], .token-phrase-part[data-cefr="B2"] { border-bottom-color: rgba(250, 204, 21, 0.66); }

/* nuance 提示小灯：浅浅的中性灰(沿用 C1 灰)，不新增颜色，只悄悄提示"这词有玄机" */
.nuance-dot { font-size: 0.6em; color: rgba(154, 160, 171, 0.85); margin-left: 2px; vertical-align: super; }

.token-phrase:hover,
.token-phrase-part:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* 级别标签：平铺在底部控制条，兼当颜色图例（标签间留足间距、点着不挤） */
.level-chips { display: flex; }
.level-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; min-width: 34px; padding: 4px 8px;
  border: none; background: transparent;
  font-size: 0.82rem; font-weight: 500; line-height: 1; border-radius: 9px; cursor: pointer;
}
/* 用 margin 拉间距（老版安卓/小米浏览器不认 flex gap，会糊成一团） */
.level-chip + .level-chip { margin-left: 7px; }
/* 字母自带级别颜色＝兼当图例：A2 青绿 / B1 品红 / B2 金黄 / C1·C2 灰 */
.level-chip[data-level="A2+"] { color: #2dd4bf; }
.level-chip[data-level="B1+"] { color: #f472b6; }
.level-chip[data-level="B2+"] { color: #facc15; }
.level-chip[data-level="C1+"] { color: #9aa0ab; }
.level-chip:hover { background: rgba(255, 255, 255, 0.06); }
.level-chip.active { background: rgba(255, 255, 255, 0.12); }   /* 选中＝字母底下加背景 */

/* CEFR 过滤：隐藏状态 */
.cefr-filtered {
  opacity: 0.25;
  pointer-events: none;
}

/* 当前句高亮 */
.subtitle-line-current {
  background: radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.22), transparent 55%);
  border-radius: 1rem;
}

/* 底部弹层 */
.sheet-backdrop {
  background: radial-gradient(circle at 50% 0%, rgba(15, 23, 42, 0.1), rgba(15, 23, 42, 0.95));
}
.sheet {
  transform: translateY(100%);
  transition: transform 0.28s ease-out;
}
.sheet-open {
  transform: translateY(0%);
}

/* 语言切换：原位置 + 横铺一行（底部控制区内，可左右滑） */
.lang-btn.lang-btn-active {
  background: #0e7490;
  color: #e0f2fe;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.45);
}
.lang-strip-wrap {
  margin-top: 0.15rem;
  padding-bottom: 0.2rem;
}
.lang-strip-wrap.is-closed {
  display: none !important;
}
.lang-strip-wrap:not(.is-closed) {
  display: block;
  border-top: 1px solid rgba(56, 189, 248, 0.25);
  padding-top: 0.45rem;
  background: rgba(15, 23, 42, 0.55);
  border-radius: 0.75rem;
}
.lang-strip-scroll {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.45rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 0.15rem 0.1rem 0.35rem;
}
.lang-strip-scroll::-webkit-scrollbar {
  display: none;
}
.lang-strip-scroll .lang-option {
  flex: 0 0 auto;
  min-height: 2rem;
  padding: 0.4rem 0.85rem;
  border-radius: 9999px;
  border: 1px solid rgba(51, 65, 85, 0.95);
  background: rgba(30, 41, 59, 0.85);
  color: #e2e8f0;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.lang-strip-scroll .lang-option:active {
  transform: scale(0.97);
}
.lang-strip-scroll .lang-option.is-active {
  border-color: rgba(56, 189, 248, 0.7);
  background: rgba(14, 116, 144, 0.45);
  color: #e0f2fe;
}

/* 倍速横铺：和语言横条同一做法（外层样式复用 .lang-strip-wrap / .lang-strip-scroll），选项样式单独写 */
.speed-strip-scroll {
  gap: 0.3rem;
}
.speed-strip-scroll .speed-option {
  flex: 1 1 0; /* 6 档平分整行宽度，窄屏（320px）也一次全部显示，不用左右滑 */
  min-width: 0;
  min-height: 2.25rem;
  padding: 0.4rem 0.1rem;
  border-radius: 9999px;
  border: 1px solid rgba(51, 65, 85, 0.95);
  background: rgba(30, 41, 59, 0.85);
  color: #e2e8f0;
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.speed-strip-scroll .speed-option:active {
  transform: scale(0.97);
}
.speed-strip-scroll .speed-option.is-active {
  border-color: rgba(56, 189, 248, 0.7);
  background: rgba(14, 116, 144, 0.45);
  color: #e0f2fe;
}
#speedBtn.speed-btn-active {
  background: #0e7490;
  color: #e0f2fe;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.45);
}

/* ASR 评分文本标注 */
.asr-sentence-display {
  line-height: 2.0;
  word-spacing: 0.2em;
}
.asr-w-correct { color: #34d399; }
.asr-w-sub { color: #f87171; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: rgba(248,113,113,0.45); }
.asr-w-del { color: rgba(148,163,184,0.8); text-decoration: line-through; opacity: 0.7; }
.asr-w-ins { color: #fbbf24; font-size: 0.95em; background: rgba(251,191,36,0.12); padding: 1px 4px; border-radius: 6px; }
.asr-sub-annotation { font-size: 0.72em; color: #fca5a5; vertical-align: super; margin-left: 2px; }

@keyframes asrPulse {
  0% { opacity: 1; }
  50% { opacity: 0.55; }
  100% { opacity: 1; }
}
.asr-recording {
  animation: asrPulse 1s infinite;
}


/* ASR 分数徽章（字幕行右上角） */
.line-score-badge{
  position:absolute;
  top:10px;
  right:10px;
  min-width:36px;
  height:22px;
  padding:0 8px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.06em;
  border:1px solid rgba(148,163,184,0.25);
  background:rgba(30,41,59,0.65);
  color:rgba(226,232,240,0.95);
  backdrop-filter: blur(8px);
}
.line-score-badge.good{ border-color: rgba(52,211,153,0.35); color: rgba(167,243,208,0.95); background: rgba(16,185,129,0.08); }
.line-score-badge.mid{ border-color: rgba(56,189,248,0.35); color: rgba(186,230,253,0.95); background: rgba(14,165,233,0.08); }
.line-score-badge.low{ border-color: rgba(251,191,36,0.35); color: rgba(253,230,138,0.95); background: rgba(245,158,11,0.08); }
.line-score-badge.bad{ border-color: rgba(251,113,133,0.35); color: rgba(254,202,202,0.95); background: rgba(244,63,94,0.08); }


/* ==================== 简化筛选 UI（短语/单词独立） ==================== */
.filter-pill{
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 10px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.35);
  color: rgba(226, 232, 240, 0.9);
  cursor: pointer;
  transition: all 0.15s ease;
}
.filter-pill:hover{ border-color: rgba(148, 163, 184, 0.4); background: rgba(15, 23, 42, 0.5); }
.filter-pill.filter-on{
  border-color: rgba(52, 211, 153, 0.45);
  background: rgba(52, 211, 153, 0.12);
  color: rgba(226, 232, 240, 0.95);
}
.filter-select{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(15, 23, 42, 0.35);
  color: rgba(226, 232, 240, 0.95);
}
.filter-select:disabled{
  opacity: 0.55;
}

/* Phrase OFF: 变为纯文本 */
.phrase-hidden{
  border-bottom-color: transparent !important;
  padding-bottom: 0 !important;
  cursor: default !important;
}

/* Word OFF: 变为纯文本 */
.word-disabled{
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  cursor: default !important;
}

/* ==================== 响应式布局 (v4.4) ==================== */

/* CSS 变量 */
:root {
  --safe-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  --player-control-pad-x: 4px;
}

/* 全局触摸优化 */
html {
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  height: -webkit-fill-available;
}

/* 
 * 手机 + 平板（<1024px）：锁定整页高度，字幕区弹性填充，控制条始终贴底可见
 * 覆盖 iPhone / iPad Safari 的 100vh 与地址栏伸缩问题
 */
@media (max-width: 1023px) {
  html {
    height: 100%;
    height: -webkit-fill-available;
  }
  body {
    height: 100%;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    overflow: hidden;
  }
  body > div,
  body > div > main {
    height: 100% !important;
    min-height: 0 !important;
  }
  main {
    padding-top: max(8px, env(safe-area-inset-top, 0px));
  }
  #subtitleSection {
    flex: 1 1 0 !important;
    min-height: 0;
  }
  #subtitleContainer {
    max-height: none !important;
    flex: 1 1 0;
    min-height: 0;
  }
  #playerControlsFooter {
    overflow: visible;
    position: relative;
    z-index: 12;
  }

}

/* 
 * 桌面（>=1024px）：自然滚动，字幕区限高
 */
@media (min-width: 1024px) {
  html, body {
    height: auto !important;
    min-height: 100vh;
    overflow: auto;
  }
  body > div,
  body > div > main {
    height: auto !important;
    min-height: auto;
  }
  #subtitleContainer {
    min-height: 200px;
    max-height: 50vh;
  }
  #subtitleSection {
    flex: none !important;
  }
}

/* 字幕区：滚动优化 */
#subtitleContainer {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* 控制栏区域：禁止横向溢出，适配 iPhone 安全区 */
#subtitleSection > .flex-shrink-0 {
  padding-bottom: var(--safe-bottom);
  max-width: 100%;
  overflow-x: hidden;
}

/* 底部控制栏：单行横排（与 HTML 内 Tailwind 双保险） */
.player-controls-bar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  max-width: 100%;
  gap: 0;
  padding: 0 4px;
  box-sizing: border-box;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.player-controls-bar > .player-ctrl-btn,
.player-controls-bar > .relative {
  flex: 0 0 auto;
}

/* 老安卓不认 flex gap：用相邻按钮 margin 兜底 */
.player-controls-bar > * + * {
  margin-left: 6px;
}

/* 极窄屏略缩小，仍保持横排 */
@media (max-width: 359px) {
  .player-controls-bar {
    gap: 4px;
    padding: 0 2px;
  }
  .player-controls-bar > * + * {
    margin-left: 4px;
  }
  #playPauseBtn {
    min-width: 48px;
    min-height: 48px;
    width: 48px !important;
    height: 48px !important;
  }
  #prevBtn, #nextBtn {
    min-width: 40px;
    min-height: 40px;
    width: 40px !important;
    height: 40px !important;
  }
  #loopBtn, #asrQuickBtn, #favoriteFilterBtn {
    min-width: 36px;
    min-height: 36px;
    width: 36px !important;
    height: 36px !important;
  }
}

/* 
 * ⚠️ 重要：不要用 button {} 选择器！
 * 会影响 .token-word, .token-phrase, .inline-btn 等内联按钮
 * 只针对特定控制按钮使用 ID 选择器
 */

/* 播放控制按钮 - 精准选择器 */
#playPauseBtn {
  min-width: 56px;
  min-height: 56px;
  touch-action: manipulation;
}

#prevBtn, #nextBtn {
  min-width: 48px;
  min-height: 48px;
  touch-action: manipulation;
}

#loopBtn, #asrQuickBtn, #speedBtn {
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
}

/* 进度条增大触摸区域 */
#progressBar {
  min-height: 24px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* 字幕行增加内边距提升可点击性 */
.subtitle-line {
  padding: 12px 8px;
  margin: 2px 0;
}

/* 字幕区滚动优化 - 基础样式在上方定义 */

/* 词汇/短语按钮触摸优化 */
.token-word,
.token-phrase,
.token-phrase-part {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* 内联按钮（句末 💬📖 小气泡） */
.inline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  padding: 2px 7px;
  min-width: 30px;
  min-height: 30px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 999px;
  background: rgba(30, 41, 59, 0.8);
  font-size: 14px;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s, transform 0.1s;
}

.inline-btn:active {
  transform: scale(0.95);
  background: rgba(51, 65, 85, 0.95);
}

/* 浮层关闭按钮 - 精准选择器 */
#lexCloseBtn,
#sentCloseBtn,
#structCloseBtn,
#asrCloseBtn {
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
}

/* 浮层底部安全区域 */
.sheet > div {
  padding-bottom: env(safe-area-inset-bottom, 8px);
}

/* 词/句浮层：大按钮（手机好点） */
.sheet-touch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  min-width: 48px;
  padding: 10px 16px;
  border: none;
  border-radius: 999px;
  background: #1e293b;
  color: #e2e8f0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s;
}
.sheet-touch-btn:hover { background: #334155; }
.sheet-touch-btn:active { background: #475569; transform: scale(0.98); }

.sheet-pron-btn {
  min-width: 52px;
  min-height: 52px;
  padding: 0;
  border-radius: 50%;
  font-size: 1.1rem;
}

.sheet-listen-btn {
  flex-shrink: 0;
  padding: 10px 18px;
}

.sheet-trans-btn {
  padding: 10px 16px;
  margin-top: 4px;
}
.sheet-trans-btn .fa-globe {
  font-size: 0.95rem;
  color: #7dd3fc;
}
.sheet-trans-chevron {
  font-size: 0.65rem;
  opacity: 0.85;
}
.sheet-trans-hint {
  margin-top: 6px;
  font-size: 0.68rem;
  color: #64748b;
  line-height: 1.4;
}

/* 词条标题：不依赖 Tailwind，避免部分安卓浏览器类名未生效导致「单词看不见」 */
.lex-head {
  margin-bottom: 6px;
}
.lex-word-text {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.35;
  color: #f8fafc;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.lex-root-text {
  display: block;
  margin-top: 2px;
  font-size: 0.875rem;
  line-height: 1.35;
  color: #94a3b8;
  word-break: break-word;
}
.lex-root-text:empty {
  display: none;
}

/* 手机端配图缩小，避免占半屏 */
.lex-image-col {
  width: 100%;
  max-width: 168px;
  margin: 4px auto 0;
}
.lex-image-frame {
  width: 100%;
  aspect-ratio: 1;
  max-height: 168px;
}
@media (min-width: 640px) {
  .lex-image-col {
    width: 14rem;
    max-width: none;
    margin: 0;
  }
  .lex-image-frame {
    max-height: none;
  }
}

#lexIpaWrap {
  max-width: 100%;
}

#lexIpaWrap.hidden {
  display: none;
}

.lex-ipa-text,
#lexIpa {
  max-width: 100%;
  word-break: break-word;
  font-family: "Times New Roman", "Lucida Sans Unicode", "DejaVu Sans", "Arial Unicode MS", serif;
  font-size: 1rem;
  line-height: 1.45;
  color: #7dd3fc;
  letter-spacing: 0.02em;
}

/* 筛选按钮增大触摸区域 */
.filter-pill {
  min-height: 36px;
  padding: 8px 12px;
}

.filter-select {
  min-height: 36px;
}

/* 速度选项增大触摸区域 */
.speed-option {
  min-height: 44px;
  padding: 12px 20px;
}

/* 控制按钮点击反馈 - 只针对特定按钮 */
#playPauseBtn:active,
#prevBtn:active,
#nextBtn:active,
#loopBtn:active,
#asrQuickBtn:active,
#speedBtn:active,
#lexCloseBtn:active,
#sentCloseBtn:active,
#structCloseBtn:active,
#asrCloseBtn:active {
  transform: scale(0.95);
  transition: transform 0.1s;
}

/* 小屏幕适配（iPhone SE等 375px以下） */
@media (max-width: 375px) {
  #playPauseBtn {
    min-width: 52px;
    min-height: 52px;
  }
  
  #prevBtn, #nextBtn {
    min-width: 44px;
    min-height: 44px;
  }
  
  #loopBtn, #asrQuickBtn, #speedBtn {
    min-width: 40px;
    min-height: 40px;
  }
}

/* iPhone 11/12/13 适配（414px左右） */
@media (max-width: 430px) and (min-width: 376px) {
  /* 控制栏按钮稍微紧凑 */
  #playPauseBtn {
    min-width: 52px;
    min-height: 52px;
  }
  
  #prevBtn, #nextBtn {
    min-width: 44px;
    min-height: 44px;
  }
  
  #loopBtn, #asrQuickBtn {
    min-width: 40px;
    min-height: 40px;
  }
  
  #speedBtn {
    min-width: 36px;
    min-height: 40px;
    padding: 0 8px;
    font-size: 11px;
  }
  
  /* 筛选按钮更紧凑 */
  .filter-pill {
    padding: 6px 8px;
    font-size: 10px;
  }
  
  .filter-select {
    padding: 6px 8px;
    font-size: 11px;
  }
}

/* 大屏幕居中 */
@media (min-width: 768px) {
  main {
    max-width: 768px;
    margin: 0 auto;
  }
}

/* ==================== 字号调节按钮 ==================== */
#subtitleContainer {
  font-size: 0.88rem; /* 默认字号，会被 JS 覆盖 */
}

#fontSizeDown,
#fontSizeUp {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s;
}

#fontSizeDown:active,
#fontSizeUp:active {
  background-color: rgba(56, 189, 248, 0.2);
}

/* ==================== 收藏功能 ==================== */

/* 收藏图标基础样式 */
.favorite-icon {
  transition: transform 0.15s ease, opacity 0.2s ease;
  user-select: none;
}

.favorite-icon:hover {
  transform: scale(1.15);
}

.favorite-icon:active {
  transform: scale(0.9);
}

.favorite-icon.favorited {
  opacity: 1 !important;
}

/* 收藏过滤按钮 */
#favoriteFilterBtn {
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
  transition: all 0.2s ease;
}

#favoriteFilterBtn:active {
  transform: scale(0.95);
}

/* 收藏过滤激活状态 */
#favoriteFilterBtn.has-favorites:not(.bg-rose-500) {
  box-shadow: 0 0 0 1px rgba(244, 63, 94, 0.35);
}

#favoriteFilterBtn.bg-rose-500 {
  box-shadow: 0 0 12px rgba(244, 63, 94, 0.4);
}

/* 收藏句子行高亮（可选） */
.subtitle-line[data-line-index] .favorite-icon.favorited + div p {
  /* 已收藏的句子可以有微妙的视觉提示 */
}

/* 字幕行内的收藏图标容器 */
.subtitle-line > div {
  display: flex;
  align-items: flex-start;
}

/* 移动端收藏图标稍大 */
@media (max-width: 767px) {
  .favorite-icon {
    font-size: 18px !important;
    margin-right: 8px !important;
  }
}