/* 防 SVG 异常膨胀全景基础防御 */
svg {
  max-width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
  vertical-align: middle;
}
/* 2027 考研专业课双轨随身背诵手卷 · 独立研读专版样式 */
:root {
  /* Claude UI & Master Spec · Palette B: Warm Parchment (典籍暖纸色系) */
  --bg-canvas: #faf9f5;
  --bg-sidebar: #f3f1ea;
  --bg-card: #f3f1ea;
  --bg-card-hover: #ebe7dc;
  --bg-card-active: #e3ded1;
  --bg-dock: rgba(243, 241, 234, 0.96);
  
  --ink-primary: #141413;
  --ink-secondary: #5c5a53;
  --ink-muted: #8c887e;
  --ink-subtle: #a6a298;
  
  --line-main: #e4e1d6;
  --line-subtle: #eae7dc;
  --line-strong: #cfcab8;
  
  /* Claude Signature Terracotta (陶土红金主色) */
  --vermilion: #d97757;
  --vermilion-soft: rgba(217, 119, 87, 0.08);
  --vermilion-border: rgba(217, 119, 87, 0.28);
  --vermilion-hover: #c46545;
  
  /* Claude Signature Accents: Slate & Botanical */
  --amber: #c46b16;
  --amber-soft: rgba(196, 107, 22, 0.08);
  --pine: #2f7d4a;
  --pine-soft: rgba(47, 125, 74, 0.08);
  --accent-slate: #4a7c9b;
  --accent-slate-soft: rgba(74, 124, 155, 0.08);
  
  /* 朗读高亮聚焦 (Karaoke Spotlight: Warm Terracotta Underline & Subtle Highlight) */
  --spotlight-bg: rgba(217, 119, 87, 0.12);
  --spotlight-border: #d97757;
  --spotlight-glow: rgba(217, 119, 87, 0.18);
  --spotlight-text: #141413;

  /* Liquid Glass 光学材质变量系统 (Lumno × VisionOS) */
  --glass-dock-bg: radial-gradient(110% 80% at 20% 0%, rgba(255, 255, 255, 0.76) 0%, rgba(246, 243, 236, 0.6) 60%, rgba(243, 239, 230, 0.78) 100%);
  --glass-dock-blur: blur(20px) saturate(210%) contrast(104%) brightness(1.02);
  --glass-dock-border: rgba(255, 255, 255, 0.65);
  --glass-dock-shadow: 
    inset 0 1px 0.5px 0 rgba(255, 255, 255, 0.95),
    inset 1px 1.5px 2.5px 0 rgba(199, 210, 254, 0.3),
    inset 0 -1.5px 2px 0 rgba(254, 215, 170, 0.22),
    0 -8px 28px -6px rgba(45, 36, 28, 0.08),
    0 -1px 3px 0 rgba(0, 0, 0, 0.02);

  --glass-trough-bg: rgba(0, 0, 0, 0.035);
  --glass-trough-border: rgba(0, 0, 0, 0.06);

  --glass-crystal-card: linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.48) 50%, rgba(255, 255, 255, 0.72) 100%);
  --glass-crystal-border: rgba(255, 255, 255, 0.75);
  --glass-crystal-shadow: 
    inset 0 1px 0.8px 0 rgba(255, 255, 255, 0.95),
    inset 1px 1px 2px 0 rgba(199, 210, 254, 0.35),
    0 4px 14px -3px rgba(45, 36, 28, 0.1);

  --glass-btn-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.45) 100%);
  --glass-btn-hover: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.38) 50%, rgba(255, 255, 255, 0.65) 100%);
  --glass-btn-border: rgba(255, 255, 255, 0.6);
  --glass-btn-shadow: inset 0 0.8px 0.5px 0 rgba(255, 255, 255, 0.85), 0 2px 6px -1px rgba(0,0,0,0.06);

  
  /* Typography Stacks */
  --font-serif: Georgia, "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-body: var(--font-current);
  
  --font-base: 17px;
  --sidebar-w: 360px;
  --header-h: 60px;
  --dock-h: 88px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  
  /* Pure-Flat Architecture: Zero Shadows Everywhere */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
}

[data-theme="dark"] {
  --bg-canvas: #161514;
  --bg-sidebar: #1e1c1a;
  --bg-card: #23211e;
  --bg-card-hover: #2a2723;
  --bg-card-active: #2f2a24;
  --bg-dock: rgba(22, 21, 20, 0.94);
  
  --ink-primary: #e6e2da;
  --ink-secondary: #aba195;
  --ink-muted: #7d7367;
  --ink-subtle: #574f45;
  
  --line-main: #332f29;
  --line-subtle: #292621;
  --line-strong: #453f37;
  
  --vermilion: #d96248;
  --vermilion-soft: #38211d;
  --vermilion-border: #5a2e26;
  --vermilion-hover: #eb745b;
  
  --amber: #dca03f;
  --amber-soft: #382a17;
  --wood: #a68c72;
  --wood-soft: #2b251f;
  
  --pine: #4ca382;
  --pine-soft: #182e25;
  
  --spotlight-bg: #4a3410;
  --spotlight-border: #c48a29;
  --spotlight-glow: rgba(196, 138, 41, 0.3);
  --spotlight-text: #fff3db;

  /* Liquid Glass 光学材质变量系统 - 黑曜石夜间模式 (Dark) */
  --glass-dock-bg: radial-gradient(110% 80% at 20% 0%, rgba(38, 35, 32, 0.82) 0%, rgba(24, 22, 21, 0.72) 60%, rgba(20, 18, 17, 0.88) 100%);
  --glass-dock-blur: blur(24px) saturate(220%) contrast(106%) brightness(1.12);
  --glass-dock-border: rgba(255, 255, 255, 0.12);
  --glass-dock-shadow: 
    inset 0 1px 0.5px 0 rgba(255, 255, 255, 0.28),
    inset 1px 1px 2px 0 rgba(147, 197, 253, 0.12),
    inset 0 -1.5px 2px 0 rgba(0, 0, 0, 0.45),
    0 -10px 36px -4px rgba(0, 0, 0, 0.55),
    0 -1px 3px 0 rgba(0, 0, 0, 0.3);

  --glass-trough-bg: rgba(255, 255, 255, 0.04);
  --glass-trough-border: rgba(255, 255, 255, 0.08);

  --glass-crystal-card: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 50%, rgba(255, 255, 255, 0.09) 100%);
  --glass-crystal-border: rgba(255, 255, 255, 0.22);
  --glass-crystal-shadow: 
    inset 0 1px 0.8px 0 rgba(255, 255, 255, 0.35),
    inset 1px 1px 2px 0 rgba(147, 197, 253, 0.15),
    0 6px 18px -4px rgba(0, 0, 0, 0.4);

  --glass-btn-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 50%, rgba(255, 255, 255, 0.08) 100%);
  --glass-btn-hover: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.07) 50%, rgba(255, 255, 255, 0.14) 100%);
  --glass-btn-border: rgba(255, 255, 255, 0.16);
  --glass-btn-shadow: inset 0 0.8px 0.5px 0 rgba(255, 255, 255, 0.3), 0 2px 6px -1px rgba(0,0,0,0.25);

  
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  height: 100dvh;
  overflow-x: hidden;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  background-color: var(--bg-canvas);
  color: var(--ink-primary);
  line-height: 1.7;
  font-size: var(--font-base);
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* 顶部主导航栏 */
.app-header {
  height: var(--header-h);
  background-color: var(--bg-canvas);
  border-bottom: 1px solid var(--line-main);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  flex-shrink: 0;
  z-index: 100;
}

.brand-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--vermilion);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.brand-title-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brand-main-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--ink-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.brand-sub-badge {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 10px;
  background-color: var(--vermilion-soft);
  color: var(--vermilion);
  border: 1px solid var(--vermilion-border);
  font-weight: 600;
  white-space: nowrap;
}

.brand-voice-info {
  font-size: 12px;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.voice-badge {
  color: var(--vermilion);
  font-weight: 600;
}

/* 科目切换大药丸 */
.subject-pill-group {
  display: inline-flex;
  background-color: var(--bg-sidebar);
  border: 1px solid var(--line-main);
  padding: 4px;
  border-radius: 30px;
  gap: 4px;
}

.subject-btn {
  border: none;
  background: transparent;
  padding: 6px 18px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.subject-name-mobile {
  display: none;
}

.track-tab-short {
  display: none;
}

.sidebar-backdrop {
  display: none;
}

.subject-btn .count-tag {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 12px;
  background-color: rgba(0, 0, 0, 0.06);
  color: var(--ink-muted);
}

.subject-btn.active {
  background-color: var(--bg-card);
  color: var(--vermilion);
  box-shadow: var(--shadow-sm);
}

.subject-btn.active .count-tag {
  background-color: var(--vermilion-soft);
  color: var(--vermilion);
}

/* 顶部右侧控制区 */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.action-btn {
  background: var(--bg-card);
  border: 1px solid var(--line-main);
  color: var(--ink-secondary);
  height: 36px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s ease;
}

.action-btn:hover {
  background: var(--bg-card-hover);
  color: var(--ink-primary);
  border-color: var(--line-strong);
}

.action-btn svg {
  width: 17px;
  height: 17px;
  display: block;
}

.mobile-menu-toggle {
  display: inline-flex;
}

/* 主内容双栏布局 */
.app-body {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
  position: relative;
}

/* 左侧题库导航列表栏 */
.sidebar {
  width: var(--sidebar-w);
  background-color: var(--bg-sidebar);
  border-right: 1px solid var(--line-main);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: margin-left 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), width 0.28s ease, opacity 0.2s ease;
}

.sidebar-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--line-subtle);
  background: var(--bg-sidebar);
}

.sidebar-title-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-secondary);
}

.sidebar-close-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--line-main);
  background: var(--bg-card);
  color: var(--ink-secondary);
  font-size: 11.5px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sidebar-close-btn:hover {
  color: var(--vermilion);
  border-color: var(--vermilion-border);
  background: var(--vermilion-soft);
}

/* 大屏与 iPad 折叠侧边栏时主舞台全屏扩展 */
@media (min-width: 769px) {
  .app-body.sidebar-collapsed .sidebar {
    display: none !important;
    margin-left: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border-right: none !important;
    overflow: hidden !important;
  }

  .app-body.sidebar-collapsed .main-stage {
    margin-left: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    flex: 1 1 100% !important;
    transition: max-width 0.28s ease;
  }
}

.sidebar-search-box {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line-subtle);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.search-input-wrap {
  position: relative;
  width: 100%;
}

.search-input-wrap .search-leading-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--ink-muted);
  pointer-events: none;
}

.search-clear-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.search-clear-btn:hover {
  background: rgba(184, 51, 42, 0.10);
  color: var(--vermilion, #b8332a);
}

.search-input {
  width: 100%;
  height: 36px;
  padding: 0 32px 0 34px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-main);
  background: var(--bg-card);
  color: var(--ink-primary);
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}

.search-input:focus {
  border-color: var(--vermilion);
}

.filter-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.filter-pill {
  border: 1px solid var(--line-main);
  background: var(--bg-card);
  color: var(--ink-secondary);
  padding: 3px 10px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.filter-pill:hover {
  border-color: var(--vermilion);
}

.filter-pill.active {
  background: var(--vermilion);
  color: #fff;
  border-color: var(--vermilion);
}

.item-list-container {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 考点卡片 (强制不压缩，保证标题完整呈现与触控流畅) */
.question-card-item {
  background: var(--bg-card);
  border: 1px solid var(--line-main);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  min-height: 76px;
  box-sizing: border-box;
  transition: all 0.18s ease;
  position: relative;
  overflow: hidden;
}

.question-card-item:hover {
  background: var(--bg-card-hover);
  border-color: var(--line-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.question-card-item.active {
  background: var(--bg-card-active);
  border-color: var(--vermilion);
  box-shadow: var(--shadow-sm);
}

.question-card-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: var(--vermilion);
}

.card-top-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.card-tag-group {
  display: flex;
  align-items: center;
  gap: 5px;
}

.tier-badge {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* 正文顶部分级胶囊可点击交互 (T0 / T1 / 题眼) */
#stage-tier {
  cursor: pointer !important;
  user-select: none;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease, filter 0.18s ease !important;
  position: relative;
  overflow: hidden;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
}

#stage-tier:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#stage-tier:active {
  transform: scale(0.92);
  filter: brightness(0.92);
}

#stage-tier::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.45) 10%, transparent 70%);
  opacity: 0;
  transform: scale(2);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}

#stage-tier:active::after {
  opacity: 1;
  transform: scale(0);
  transition: 0s;
}

.tier-T0 {
  background-color: var(--vermilion-soft);
  color: var(--vermilion);
  border: 1px solid var(--vermilion-border);
}

.tier-T1 {
  background-color: var(--pine-soft);
  color: var(--pine);
  border: 1px solid rgba(46, 102, 79, 0.2);
}

.tier-T2 {
  background-color: var(--wood-soft);
  color: var(--wood);
  border: 1px solid rgba(109, 86, 66, 0.2);
}

.score-badge {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  background-color: var(--amber-soft);
  color: var(--amber);
  border: 1px solid rgba(176, 105, 23, 0.2);
  font-weight: 600;
}

.card-audio-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--ink-muted);
}

.card-audio-status.has-audio {
  color: var(--vermilion);
  font-weight: 600;
}

.card-audio-status svg {
  width: 14px;
  height: 14px;
}

.card-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-desc-meta {
  font-size: 12px;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 右侧核心研读与听读舞台 */
.main-stage {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px max(60px, calc(40px + env(safe-area-inset-bottom, 20px)));
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stage-wrapper {
  width: 100%;
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 顶部考题看板 */
.stage-header-card {
  background: var(--bg-card);
  border: 1px solid var(--line-main);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.question-nav-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-muted);
}

.breadcrumb-item {
  color: var(--ink-secondary);
  font-weight: 500;
}

.stage-question-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink-primary);
  letter-spacing: -0.3px;
}

/* 双轨切换控制栏 */
.track-switcher-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line-subtle);
  padding-top: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.track-tabs {
  display: inline-flex;
  background-color: var(--bg-sidebar);
  padding: 4px;
  border-radius: 10px;
  gap: 4px;
}

.track-tab-btn {
  border: none;
  background: transparent;
  padding: 8px 16px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.track-tab-btn.active {
  background-color: var(--bg-card);
  color: var(--vermilion);
  box-shadow: var(--shadow-sm);
}

.track-tab-btn svg {
  width: 16px;
  height: 16px;
}

.track-meta-tip {
  font-size: 12px;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.track-voice-pill {
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--vermilion-soft);
  color: var(--vermilion);
  font-weight: 600;
  font-size: 11px;
}

/* 正文渲染纸面 */
.paper-container {
  width: 100% !important;
  max-width: min(68ch, 100%) !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  line-height: 1.85 !important;
  font-family: var(--font-serif) !important;
  padding: 24px 20px 140px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

.paper-section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 2px solid var(--vermilion);
  padding-bottom: 8px;
  margin-top: 10px;
}

.paper-section-title:first-child {
  margin-top: 0;
}

.paper-paragraph {
  font-size: var(--font-base);
  line-height: 2.1;
  color: var(--ink-primary);
  text-align: justify;
  letter-spacing: 0.3px;
  margin-bottom: 12px;
}

/* 句子微元 (Sentences) 与聚光高亮 (Karaoke Spotlight) */
.recite-sent {
  padding: 2px 3px;
  border-radius: 4px;
  cursor: pointer;
  transition: box-shadow 0.08s ease;
  position: relative;
}

.recite-sent:hover {
  background-color: rgba(245, 176, 65, 0.15);
}

.recite-sent.active-spotlight,
.tj-sent-span.active-spotlight,
.recite-part-badge.active-spotlight,
[data-sent-idx].active-spotlight,
[data-linked-sent-idx].active-spotlight,
.recite-sent-item.active-spotlight,
.recite-sentence.active-spotlight,
.xt-day-point-card.active-spotlight {
  background-color: var(--spotlight-bg) !important;
  color: var(--spotlight-text);
  box-shadow: 0 0 0 2px var(--spotlight-border), 0 2px 8px var(--spotlight-glow) !important;
  border-radius: 6px;
  transition: none !important;
  font-weight: 500;
}

[data-theme="dark"] .recite-sent.active-spotlight,
[data-theme="dark"] .tj-sent-span.active-spotlight,
[data-theme="dark"] .recite-part-badge.active-spotlight,
[data-theme="dark"] [data-sent-idx].active-spotlight,
[data-theme="dark"] [data-linked-sent-idx].active-spotlight,
[data-theme="dark"] .recite-sent-item.active-spotlight,
[data-theme="dark"] .recite-sentence.active-spotlight,
[data-theme="dark"] .xt-day-point-card.active-spotlight {
  background-color: rgba(245, 158, 11, 0.2) !important;
  box-shadow: 0 0 0 2px #f59e0b, 0 2px 10px rgba(245, 158, 11, 0.3) !important;
}

.recite-sent strong {
  font-weight: 700;
  color: var(--vermilion);
  border-bottom: 1px solid rgba(166, 58, 36, 0.35);
  padding-bottom: 1px;
}

.active-spotlight strong {
  color: #801d0a;
}

/* 底部常驻悬浮控制底座 (Audio Dock) */
.player-dock {
  height: auto;
  min-height: fit-content;
  background-color: var(--bg-dock);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-main);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px max(16px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-bottom, 12px)) max(16px, env(safe-area-inset-right));
  box-sizing: border-box;
  flex-shrink: 0;
  z-index: 100;
  box-shadow: var(--shadow-md);
}

/* 进度条轨道 */
.dock-progress-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.progress-time {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
  width: 42px;
  text-align: center;
  font-weight: 600;
}

.progress-track-wrapper {
  flex: 1;
  height: 18px;
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.progress-bar-bg {
  width: 100%;
  height: 5px;
  background-color: var(--line-strong);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  transition: height 0.15s ease;
}

.progress-track-wrapper:hover .progress-bar-bg {
  height: 8px;
}

.progress-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, #d4654e, var(--vermilion));
  border-radius: 3px;
  transition: width 0.08s linear;
}
.progress-sec-tick {
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: var(--gold-accent, #c89b40);
  opacity: 0.75;
  border-radius: 1px;
  pointer-events: none;
  z-index: 2;
}


/* 控制按键排 */
.dock-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.dock-left-info {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 280px;
  overflow: hidden;
}

.dock-active-topic {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dock-active-track {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 10px;
  background-color: var(--vermilion-soft);
  color: var(--vermilion);
  white-space: nowrap;
}

.dock-center-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

.dock-btn {
  background: transparent;
  border: none;
  color: var(--ink-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  transition: all 0.15s ease;
}

.dock-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--ink-primary);
}

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

.dock-btn-play {
  width: 48px;
  height: 48px;
  background-color: var(--vermilion);
  color: #fff;
  box-shadow: 0 4px 12px rgba(166, 58, 36, 0.35);
}

.dock-btn-play:hover {
  background-color: var(--vermilion-hover);
  color: #fff;
  transform: scale(1.04);
}

.dock-btn-play svg {
  width: 24px;
  height: 24px;
}

.dock-right-settings {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 280px;
  justify-content: flex-end;
}

/* 模式与倍速切换小胶囊 */
.pill-mode-btn {
  border: 1px solid var(--line-main);
  background: var(--bg-card);
  color: var(--ink-secondary);
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: all 0.15s;
}

.pill-mode-btn.active {
  background: var(--amber-soft);
  color: var(--amber);
  border-color: var(--amber);
}

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

/* ========================================================
   响应式移动端与全屏幕适配系统 (iOS / iPhone / Android / iPad)
   ======================================================== */

/* 1. 中大平板与 iPad 横竖屏 (<= 1100px) 顶栏自适应与防遮挡排版 */
@media (max-width: 1100px) {
  :root {
    --header-h: 96px;
  }

  .app-header {
    height: auto;
    min-height: var(--header-h);
    padding: 8px 14px max(8px, env(safe-area-inset-right));
    flex-wrap: wrap;
    align-items: center;
    row-gap: 8px;
    box-sizing: border-box;
    overflow: visible;
  }

  .brand-section {
    order: 1;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
  }

  .brand-icon {
    width: 32px;
    height: 32px;
  }

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

  .brand-main-title {
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .brand-sub-badge,
  .brand-voice-info {
    display: none !important;
  }

  .header-actions {
    order: 2;
    flex-shrink: 0;
    gap: 6px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: max(6px, env(safe-area-inset-right));
  }

  .header-actions .action-btn {
    height: 32px;
    padding: 0 8px;
    font-size: 12px;
    gap: 4px;
  }

  .subject-pill-group {
    order: 3;
    width: 100%;
    display: flex;
    margin: 0;
    padding: 3px;
    border-radius: 20px;
    background-color: var(--bg-sidebar);
    box-sizing: border-box;
  }

  .subject-btn {
    flex: 1;
    min-width: 0;
    justify-content: center;
    padding: 6px 4px;
    font-size: 13px;
    white-space: nowrap;
    gap: 4px;
  }

  .subject-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }

  .subject-btn .count-tag {
    font-size: 11px;
    padding: 1px 5px;
  }
}

/* 2. 平板竖屏与窄屏桌面 (<= 1024px portrait, <= 900px) 侧边栏抽屉化与舞台适配 */
@media (max-width: 1024px) and (orientation: portrait), (max-width: 900px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(340px, 85vw);
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
  }
  
  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-backdrop {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 190;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }

  .sidebar-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }
  
  .mobile-menu-toggle {
    display: inline-flex;
  }
  
  .main-stage {
    padding: 16px 14px calc(140px + env(safe-area-inset-bottom, 12px));
  }
  
  .paper-container {
  width: 100% !important;
  max-width: min(68ch, 100%) !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  line-height: 1.85 !important;
  font-family: var(--font-serif) !important;
  padding: 24px 20px 140px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}
  
  /* cleaned up legacy 1024px dock grid */
}

/* 3. 移动端平板竖屏与手机横屏 (<= 768px) 核心自适应与零碰撞排版 */
@media (max-width: 768px) {
  :root {
    --header-h: 90px;
  }

  .app-header {
    height: auto;
    min-height: unset;
    padding: 8px 12px 9px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    row-gap: 8px;
    box-sizing: border-box;
  }

  .brand-section {
    order: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
  }

  .brand-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
  }

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

  .brand-main-title {
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .brand-sub-badge,
  .brand-voice-info {
    display: none !important;
  }

  .header-actions {
    order: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex: 0 0 auto;
    margin-left: auto;
    padding-right: max(4px, env(safe-area-inset-right));
  }

  .header-actions .action-btn {
    height: 32px;
    padding: 0 7px;
    font-size: 12px;
    border-radius: 8px;
    gap: 4px;
  }

  .subject-pill-group {
    order: 3;
    width: 100%;
    flex: 1 1 100%;
    display: flex;
    margin: 0;
    padding: 3px;
    border-radius: 20px;
    background-color: var(--bg-sidebar);
    box-sizing: border-box;
    gap: 3px;
  }

  .subject-btn {
    flex: 1 1 33.333%;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 3px;
    font-size: 12.5px;
    white-space: nowrap;
    border-radius: 17px;
    gap: 3px;
    box-sizing: border-box;
  }

  .subject-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }

  .subject-btn .count-tag {
    font-size: 10.5px;
    padding: 1px 4px;
  }

  .subject-name-full {
    display: none !important;
  }

  .subject-name-mobile {
    display: inline !important;
  }

  .main-stage {
    padding: 12px 10px calc(140px + env(safe-area-inset-bottom, 12px));
    width: 100%;
    box-sizing: border-box;
  }

  .stage-wrapper {
    width: 100%;
    gap: 12px;
  }

  .stage-header-card {
    padding: 14px 12px;
    gap: 10px;
    border-radius: 12px;
  }

  .question-nav-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
    margin-bottom: 6px;
  }

  .stage-question-title {
    font-size: 18px;
    line-height: 1.42;
    word-break: break-word;
    margin-bottom: 12px;
  }

  .track-switcher-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding-top: 10px;
    width: 100%;
  }

  .track-tabs {
    display: flex;
    width: 100%;
    padding: 3px;
    background: var(--bg-sidebar);
    border-radius: 20px;
    box-sizing: border-box;
    gap: 4px;
  }

  .track-tab-btn {
    flex: 1 1 50%;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 4px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    border-radius: 17px;
    gap: 4px;
  }

  .track-tab-full {
    display: none !important;
  }

  .track-tab-short {
    display: inline !important;
  }

  .track-tab-btn svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
  }

  .track-meta-tip {
    justify-content: center;
    font-size: 11px;
    gap: 6px;
  }

  .paper-container {
  width: 100% !important;
  max-width: min(68ch, 100%) !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  line-height: 1.85 !important;
  font-family: var(--font-serif) !important;
  padding: 24px 20px 140px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

  /* 底部播放器移动端紧凑排布与安全防遮挡 */
  .player-dock {
    height: auto;
    min-height: calc(76px + env(safe-area-inset-bottom, 0px));
    padding: 6px 10px max(12px, env(safe-area-inset-bottom));
    box-shadow: 0 -4px 20px rgba(42, 34, 27, 0.08);
  }

  .dock-hud-bar {
    margin-bottom: 4px;
    padding: 0 4px;
  }

  .hud-title-text {
    max-width: 110px;
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hud-framework-pill {
    max-width: 125px;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dock-progress-row {
    gap: 6px;
    margin-bottom: 4px;
  }

  .progress-time {
    font-size: 10px;
    width: 30px;
  }

  .dock-controls-row {
    width: 100%;
    justify-content: center;
  }

  .dock-center-controls {
    gap: 6px;
  }

  .dock-btn {
    width: 35px;
    height: 35px;
  }

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

  .dock-btn-play {
    width: 44px;
    height: 44px;
  }

  .dock-btn-play svg {
    width: 22px;
    height: 22px;
  }

  .dock-right-settings {
    gap: 6px;
    flex-shrink: 0;
  }

  #btn-loop-mode {
    width: auto !important;
    min-width: 48px !important;
    height: 33px !important;
    padding: 0 8px !important;
    gap: 3px !important;
    justify-content: center;
    border-radius: 17px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  #btn-loop-mode .mode-text {
    display: inline !important;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
  }

  #btn-speed {
    min-width: 48px !important;
    height: 33px !important;
    padding: 0 8px !important;
    border-radius: 17px !important;
    font-size: 11px !important;
  }
}

/* 4. iPhone 与紧凑手机竖屏 (<= 520px) 极简全功能布局 */
@media (max-width: 520px) {
  .brand-main-title {
    font-size: 14px !important;
  }

  .mobile-menu-toggle {
    display: inline-flex !important;
    height: 30px !important;
    padding: 0 7px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--line-strong) !important;
    border-radius: 8px !important;
    color: var(--ink-primary) !important;
    gap: 3px !important;
    flex-shrink: 0 !important;
  }

  .mobile-menu-toggle svg {
    width: 14px !important;
    height: 14px !important;
  }

  .menu-btn-text {
    display: inline !important;
  }

  .font-size-btn {
    display: inline-flex !important;
    padding: 0 4px !important;
    height: 30px !important;
    font-size: 11px !important;
    min-width: 24px !important;
    justify-content: center !important;
  }

  .font-size-btn svg {
    display: none !important;
  }

  .theme-text {
    display: none !important;
  }

  .header-actions {
    gap: 3px !important;
    padding-right: max(4px, env(safe-area-inset-right)) !important;
  }

  .action-btn {
    height: 30px !important;
    padding: 0 6px !important;
    font-size: 11.5px !important;
  }

  #btn-font-switch {
    padding: 0 6px !important;
    font-size: 11px !important;
    min-width: 32px !important;
    justify-content: center !important;
  }

  #btn-font-switch svg {
    display: none !important;
  }

  #btn-study-dashboard span,
  #btn-cloze-mode #cloze-mode-name {
    display: none !important;
  }

  #btn-study-dashboard,
  #btn-cloze-mode {
    width: 30px !important;
    padding: 0 !important;
    justify-content: center !important;
  }

  #btn-theme-toggle {
    width: 30px !important;
    padding: 0 !important;
    justify-content: center !important;
  }

  .paper-container {
  width: 100% !important;
  max-width: min(68ch, 100%) !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  line-height: 1.85 !important;
  font-family: var(--font-serif) !important;
  padding: 24px 20px 140px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

  .exam-spec-banner {
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px;
  }

  .spec-title {
    font-size: 12px;
  }

  .spec-chip {
    font-size: 11px;
    padding: 2px 7px;
  }

  .exam-section-card {
    padding: 12px 10px;
    margin-bottom: 14px;
  }

  .sec-title {
    font-size: 15px;
  }

  .section-card-header {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
    padding-bottom: 6px;
    top: 0;
  }

  .sec-badge {
    font-size: 12px;
    padding: 2px 8px;
  }

  .sec-desc {
    font-size: 11.5px;
    line-height: 1.4;
  }

  .exam-title-box {
    gap: 8px;
    margin-bottom: 16px;
  }

  .title-seal {
    font-size: 10px;
    padding: 3px 6px;
  }

  .exam-title-h2 {
    font-size: 17px;
    line-height: 1.45;
  }

  .section-thesis-box {
    padding: 9px 10px;
    margin-bottom: 10px;
    border-left-width: 3px;
  }

  .thesis-pill {
    font-size: 10.5px;
    padding: 1px 5px;
  }

  .thesis-statement {
    font-size: 15px;
    line-height: 1.8;
  }

  .section-body-text {
    font-size: 15px;
    line-height: 1.85;
  }

  .global-framework-box {
    padding: 12px 10px;
    margin-bottom: 14px;
  }

  .framework-banner {
    font-size: 14px;
  }

  .framework-tip {
    font-size: 11.5px;
  }

  .logic-block-card {
    padding: 12px 10px;
    margin-bottom: 14px;
  }

  .logic-block-title h3 {
    font-size: 15px;
  }

  .gold-sent-card {
    padding: 10px 10px;
    margin: 10px 0;
    border-left-width: 3px;
  }

  .gold-content {
    font-size: 15px;
    line-height: 1.8;
  }

  .teacher-explain-card {
    padding: 10px 10px;
    margin-bottom: 12px;
  }

  .explain-content {
    font-size: 14px;
    line-height: 1.8;
  }

  .dock-center-controls {
    gap: 4px;
  }

  .dock-btn {
    width: 33px;
    height: 33px;
  }

  .dock-btn svg {
    width: 16px;
    height: 16px;
  }

  .dock-btn-play {
    width: 42px;
    height: 42px;
  }

  .dock-btn-play svg {
    width: 20px;
    height: 20px;
  }
}


/* ========================================================
   2027 考研专业课双轨随身背诵手卷 · 字体体系与高保真研读排版系统
   ======================================================== */

/* 多样化研读字体体系（四大学术字系：文人雅宋 / 霞鹜温楷 / 现代精黑 / 典雅仿宋，针对 Apple iOS/iPadOS 原生中文字体深度映射） */
:root {
  --font-song: "Songti SC", "STSongti-SC-Regular", "Noto Serif SC", "Source Han Serif SC", SimSun, serif;
  --font-kai: "Kaiti SC", "STKaiti", "LXGW WenKai Screen", "LXGWWenKaiScreen", KaiTi, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "SF Pro Text", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-fangsong: "STFangsong", "FangSong", "FangSong SC", "仿宋", "STSongti-SC-Regular", serif;

  --font-current: var(--font-song);
  --font-body: var(--font-current);
}

[data-font="song"] { --font-current: var(--font-song); --font-body: var(--font-song); }
[data-font="kai"] { --font-current: var(--font-kai); --font-body: var(--font-kai); }
[data-font="sans"], [data-font="hei"] { --font-current: var(--font-sans); --font-body: var(--font-sans); }
[data-font="fangsong"] { --font-current: var(--font-fangsong); --font-body: var(--font-fangsong); }

body,
.paper-container,
.paper-card,
.paper-content,
#paper-content,
.exam-section-card,
.section-card-content,
.section-thesis-box,
.section-body-text,
.logic-block-card,
.logic-block-body,
.framework-qa-card,
.framework-subtitle-text,
.gold-quote-box,
.gold-quote-body,
.teacher-explain-row,
.recite-sent,
.thesis-sent,
.gold-sent-active,
.quote-gold-core,
.paper-paragraph,
/* 考研政治三模块（政治47章背诵/微考点、徐涛16天、腿姐11天）学术字系全局统一绑定 */
.pol-scope,
.pol-body,
.pol-card,
.xt-card,
.xt-part-box,
.xt-part-body,
.xt-part-title,
.xt-part-hint,
.xt-sec-title,
.xt-title-text,
.xt-item-row,
.xt-item-content,
.xt-text-para,
.xt-keyword,
.xt-example-lead,
.xt-trap-card,
.xt-trap-header,
.xt-trap-body,
.xt-table,
.xt-table th,
.xt-table td,
.xt-day-points-grid,
.xt-day-point-card,
.xt-point-content,
.xt-point-text,
.xt-point-group,
.xt-point-title,
.stream-card,
.stream-card-label,
.stream-card-lecture,
.stream-card-golden,
.stream-card-outline,
.stream-card-alert,
.stream-card-core,
.card-audio-stream-pane,
.lecture-structured-wrap,
.stream-intro-row,
.stream-outline-content,
.stream-outline-row,
.stream-takeaway-box,
.stream-takeaway-tag,
.stream-takeaway-text,
.stream-tip-box,
.stream-tip-badge,
.stream-tip-body,
.sub-card-title,
.sub-card-badge,
.pol-subcard-body,
.recite-bar-title,
.recite-bar-badge,
.play-btn-text,
.tj-handbook-card,
.tj-card-header,
.tj-card-tag,
.tj-card-status,
.tj-card-title,
.tj-sentence-flow,
.tj-sent-span,
.tj-points-box,
.tj-points-title,
.tj-points-list,
.tj-point-card,
.tj-point-label,
.tj-point-text,
.recite-sent-item,
.recite-sentence,
.recite-pol-sent,
.recite-pol-card,
.recite-pol-item {
  font-family: var(--font-current) !important;
}

/* 顶部操作栏字体切换按钮 */
.font-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-secondary);
  background: var(--bg-card);
  border: 1px solid var(--line-main);
  cursor: pointer;
  transition: all 0.2s ease;
}

.font-switch-btn:hover {
  background: var(--bg-card-hover);
  color: var(--vermilion);
  border-color: var(--vermilion-border);
}

/* --- 考场规格顶部大条 --- */
.exam-spec-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--line-main);
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.spec-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

.chip-type {
  background: var(--vermilion-soft);
  color: var(--vermilion);
  border: 1px solid var(--vermilion-border);
}

.chip-score {
  background: rgba(176, 105, 23, 0.1);
  color: var(--amber);
  border: 1px solid rgba(176, 105, 23, 0.25);
}

.chip-time {
  background: var(--wood-soft, rgba(109, 86, 66, 0.1));
  color: var(--wood);
  border: 1px solid rgba(109, 86, 66, 0.2);
}

.chip-words {
  background: var(--pine-soft, rgba(46, 102, 79, 0.1));
  color: var(--pine);
  border: 1px solid rgba(46, 102, 79, 0.25);
}

/* --- 大题标题区域 --- */
.exam-title-box {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--line-main);
}

.title-seal {
  background: var(--vermilion);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 1px;
}

.exam-title-h2 {
  font-size: 21px;
  font-weight: 700;
  color: var(--ink-primary);
  margin: 0;
  line-height: 1.4;
}

/* --- 考场答题板块卡片 --- */
.exam-section-card {
  background: var(--bg-card);
  border: 1px solid var(--line-main);
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 22px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.02);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.exam-section-card:hover {
  border-color: var(--line-strong);
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.section-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line-subtle);
}

.sec-badge {
  font-size: 13.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 4px;
}

.badge-intro {
  background: var(--vermilion-soft);
  color: var(--vermilion);
  border: 1px solid var(--vermilion-border);
}

.badge-point {
  background: var(--amber-soft);
  color: var(--amber);
  border: 1px solid rgba(176, 105, 23, 0.25);
}

.badge-conclusion {
  background: var(--pine-soft);
  color: var(--pine);
  border: 1px solid rgba(46, 102, 79, 0.25);
}

.sec-desc {
  font-size: 12px;
  color: var(--ink-muted);
}

.section-card-content {
  font-size: var(--font-base);
  line-height: 2.0;
  color: var(--ink-primary);
  text-align: justify;
}

/* --- 论述中心句高亮与专属立论横幅 --- */
.section-thesis-box {
  background: rgba(166, 58, 36, 0.06);
  border-left: 3.5px solid var(--vermilion);
  padding: 12px 16px;
  border-radius: 4px;
  margin-bottom: 14px;
  line-height: 1.9;
  font-size: calc(var(--font-base) + 0.5px);
}

.thesis-pill {
  display: inline-flex;
  align-items: center;
  background: var(--vermilion);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
  margin-right: 8px;
  vertical-align: middle;
  line-height: 1.4;
  letter-spacing: 0.5px;
}

.thesis-sent {
  font-weight: 600;
  color: var(--ink-primary);
}

.section-body-text {
  font-size: var(--font-base);
  line-height: 2.05;
  color: var(--ink-primary);
  text-align: justify;
}

/* 轨道二逐句咬合行内排版 */
.gold-quote-box {
  background: rgba(166, 58, 36, 0.05);
  border: 1px solid var(--vermilion-border);
  border-left: 4px solid var(--vermilion);
  border-radius: 6px;
  padding: 12px 16px;
  margin: 12px 0 10px;
}

.gold-quote-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.gold-badge {
  background: rgba(166, 58, 36, 0.08);
  color: var(--vermilion);
  border: 1px solid var(--vermilion-border);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
}

.gold-tip {
  font-size: 11px;
  color: var(--ink-muted);
}

.gold-quote-body {
  font-size: var(--font-base);
  line-height: 1.9;
  color: var(--ink-primary);
}

.quote-prompt-lead {
  font-size: calc(var(--font-base) - 2px);
  font-weight: normal;
  color: var(--ink-secondary);
  margin-right: 6px;
}

.quote-connector-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(166, 58, 36, 0.12);
  color: var(--vermilion);
  font-size: 12px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: 1px;
}

.quote-gold-core {
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--ink-primary);
  line-height: 1.9;
}

[data-theme="dark"] .quote-connector-badge {
  background: rgba(255, 120, 96, 0.18);
  color: #ff7860;
}

.teacher-explain-row {
  font-size: calc(var(--font-base) - 1px);
  line-height: 1.9;
  color: var(--ink-secondary);
  padding: 6px 0;
}

/* --- 核心关键词标红粗体 --- */
.kw-red {
  color: var(--vermilion);
  font-weight: 700;
  border-bottom: 1.5px solid rgba(166, 58, 36, 0.35);
  padding-bottom: 1px;
}

/* --- 轨道二：全局审题与立意建构卡片 --- */
.global-framework-box {
  background: var(--bg-card);
  border: 1.5px solid var(--vermilion-border);
  border-radius: 8px;
  padding: 18px 22px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(166, 58, 36, 0.04);
}

.framework-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--vermilion);
  margin-bottom: 6px;
}

.framework-tip {
  font-size: 12.5px;
  color: var(--ink-muted);
  line-height: 1.6;
}

.framework-qa-card {
  background: rgba(176, 105, 23, 0.06);
  border-left: 3.5px solid var(--amber);
  padding: 10px 14px;
  border-radius: 4px;
  margin: 10px 0;
}

.qa-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--amber);
  margin-bottom: 4px;
}

/* --- 轨道二：逻辑板块与金句卡片 --- */
.logic-block-card {
  background: var(--bg-card);
  border: 1px solid var(--line-main);
  border-radius: 8px;
  padding: 20px 22px;
  margin-bottom: 24px;
}

.logic-block-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--line-main);
}

.logic-sec-pill {
  background: var(--wood);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
}

.logic-block-title h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-primary);
  margin: 0;
}

.gold-sent-card {
  background: rgba(166, 58, 36, 0.05);
  border: 1.5px solid var(--vermilion-border);
  border-left: 4px solid var(--vermilion);
  border-radius: 6px;
  padding: 14px 18px;
  margin: 14px 0 10px 0;
}

.gold-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.gold-badge {
  background: rgba(166, 58, 36, 0.08);
  color: var(--vermilion);
  border: 1px solid var(--vermilion-border);
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
}

.gold-tip {
  font-size: 11.5px;
  color: var(--ink-muted);
}

.gold-content {
  font-size: 17.5px;
  font-weight: 600;
  line-height: 1.85;
  color: var(--ink-primary);
}

.teacher-explain-card {
  background: var(--bg-canvas);
  border: 1px solid var(--line-main);
  border-radius: 6px;
  padding: 12px 18px;
  margin-bottom: 18px;
}

.explain-card-header {
  margin-bottom: 6px;
}

.explain-badge {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-secondary);
}

.explain-content {
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink-secondary);
}

/* 暗色夜间模式适配 */
[data-theme="dark"] .exam-spec-banner,
[data-theme="dark"] .exam-section-card,
[data-theme="dark"] .global-framework-box,
[data-theme="dark"] .logic-block-card {
  background: var(--bg-card);
  border-color: var(--line-main);
}

[data-theme="dark"] .kw-red,
[data-theme="dark"] .thesis-statement {
  color: #ff7860;
  border-bottom-color: rgba(255, 120, 96, 0.5);
}

[data-theme="dark"] .gold-sent-card {
  background: rgba(255, 120, 96, 0.08);
  border-color: rgba(255, 120, 96, 0.35);
}

[data-theme="dark"] .teacher-explain-card {
  background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .section-thesis-box {
  background: rgba(255, 120, 96, 0.08);
  border-left-color: #ff7860;
}

[data-theme="dark"] .thesis-pill {
  background: #d44d37;
  color: #ffffff;
}


/* ========================================================
   考研双轨背诵手卷 · 云端版本检测与强刷系统 (Version & Cache System)
   ======================================================== */

.sidebar-footer {
  padding: 10px 14px max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-subtle);
  background: var(--bg-sidebar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
}

.app-version-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  background: var(--bg-card);
  border: 1px solid var(--line-main);
  border-radius: 14px;
  font-size: 11.5px;
  color: var(--ink-secondary);
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
}

.app-version-badge:hover, .app-version-badge:active {
  color: var(--vermilion);
  border-color: var(--vermilion-border);
}

.version-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2e7d32;
  flex-shrink: 0;
  display: inline-block;
}

.app-version-badge.has-update .version-dot {
  background: var(--vermilion);
  box-shadow: 0 0 6px rgba(166, 58, 36, 0.6);
  animation: pulseDot 1.5s infinite;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.3); }
}

.refresh-cache-btn {
  border: 1px solid var(--line-main);
  background: var(--bg-card);
  color: var(--ink-secondary);
  padding: 4px 9px;
  border-radius: 14px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.refresh-cache-btn:hover {
  background: var(--vermilion-soft);
  color: var(--vermilion);
  border-color: var(--vermilion-border);
}

.refresh-cache-btn svg {
  width: 13px;
  height: 13px;
}

/* 顶部新版本浮动胶囊 */
.update-banner-pill {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  padding: 3px 6px 3px 12px;
  background: rgba(38, 30, 24, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fdfaf3;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 24px;
  box-shadow: 0 10px 28px rgba(44, 36, 29, 0.35);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  z-index: 10000;
  user-select: none;
  animation: slideDownFade 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.update-banner-pill .pill-body {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  padding: 4px 2px;
}

.update-banner-pill .pill-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 6px;
  padding: 0;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.2s ease;
}

.update-banner-pill .pill-icon-spin {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff7860;
  animation: rotateSpin 2.5s linear infinite;
}

@keyframes rotateSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes slideDownFade {
  from { opacity: 0; transform: translate(-50%, -12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Toast 提示 */
.toast-container {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.toast-msg,
.toast-prompt {
  background: rgba(30, 24, 20, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  animation: toastFadeIn 0.25s ease, toastFadeOut 0.25s ease 2.2s forwards;
  max-width: 90vw;
  text-align: center;
  word-break: break-word;
  pointer-events: auto;
}

@keyframes toastFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes toastFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}


/* ========================================================
   底部常驻悬浮控制底座 (Audio Dock) · 7 键黄金对称居中布局
   ======================================================== */
.player-dock {
  height: auto;
  min-height: fit-content;
  background-color: var(--bg-dock);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line-main);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px max(16px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-bottom, 12px)) max(16px, env(safe-area-inset-right));
  box-sizing: border-box;
  flex-shrink: 0;
  z-index: 100;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.04);
}

.dock-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  position: relative;
  margin-top: 4px;
}

.dock-left-info {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 240px;
  flex-shrink: 0;
  overflow: hidden;
}

.dock-right-info-spacer {
  width: 240px;
  flex-shrink: 0;
}

.dock-unified-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex: 1;
  max-width: 540px;
  margin: 0 auto;
}

.dock-btn {
  background: transparent;
  border: none;
  color: var(--ink-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
}

.dock-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--ink-primary);
}

.dock-btn:active {
  transform: scale(0.92);
}

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

.dock-btn-play {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #c44d34 0%, var(--vermilion) 100%);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(166, 58, 36, 0.38);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dock-btn-play:hover {
  background: linear-gradient(135deg, #b83d25 0%, var(--vermilion-hover) 100%);
  transform: scale(1.04);
}

.dock-btn-play:active {
  transform: scale(0.94) !important;
  box-shadow: 0 2px 8px rgba(166, 58, 36, 0.3) !important;
}

.dock-btn-play svg {
  width: 22px;
  height: 22px;
}

.dock-tool-btn {
  border: 1px solid var(--line-main);
  background: var(--bg-card);
  color: var(--ink-secondary);
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.dock-tool-btn:hover {
  border-color: var(--vermilion-border);
  color: var(--vermilion);
}

.dock-tool-btn:active {
  transform: scale(0.92);
}

.dock-tool-btn.active {
  background: var(--amber-soft);
  color: var(--amber);
  border-color: var(--amber);
}

.speed-btn {
  min-width: 42px;
  font-variant-numeric: tabular-nums;
}


/* 移动端 7 键绝对居中对称布局 (严格以播放/暂停为中心中轴) */
/* cleaned up legacy 768px dock grid 1 */

/* ========================================================
   方案一：【金石朱墨 · 典雅文人学术纸境】权威定制样式表
   - 东方古雅文人书卷视觉
   - 暖杏道林纸微肌理
   - 金石朱墨双线印章体系
   - 朱丝栏垂直引导线
   - 纯量化数学绝对居中 7 键底座
   - 烛光暖晕跟读聚光灯 (Candlelight Spotlight)
   ======================================================== */

/* 1. 道林暖杏纸面微肌理与古雅底色 */
:root {
  --bg-canvas: #f5f2e9;
  --bg-sidebar: #ece6d8;
  --bg-card: #fdfbf7;
  --bg-card-hover: #ffffff;
  --bg-card-active: #f7f1e4;
  --bg-dock: rgba(245, 242, 233, 0.96);
  
  --ink-primary: #2a221b;
  --ink-secondary: #56483c;
  --ink-muted: #857463;
  --ink-subtle: #b2a392;
  
  --line-main: #dfd7c5;
  --line-subtle: #eae4d6;
  --line-strong: #c7bea8;
  
  --vermilion: #a63a24;
  --vermilion-soft: #fbf1ef;
  --vermilion-border: rgba(166, 58, 36, 0.22);
  
  --amber-gold: #c4732b;
  --amber-soft: #fcf4eb;
  
  --pine-green: #2e664f;
  --pine-soft: #eff6f2;
}

[data-theme="dark"] {
  --bg-canvas: #191613;
  --bg-sidebar: #221e1a;
  --bg-card: #27221d;
  --bg-card-hover: #2f2a24;
  --bg-card-active: #362f28;
  --bg-dock: rgba(25, 22, 19, 0.96);
  
  --ink-primary: #ede4d8;
  --ink-secondary: #c5b8a6;
  --ink-muted: #968877;
  --ink-subtle: #685d50;
  
  --line-main: #3a332a;
  --line-subtle: #2d2720;
  --line-strong: #4f4538;
  
  --vermilion: #d9624c;
  --vermilion-soft: rgba(217, 98, 76, 0.12);
  --vermilion-border: rgba(217, 98, 76, 0.28);
  
  --amber-gold: #e59344;
  --amber-soft: rgba(229, 147, 68, 0.12);
  
  --pine-green: #48a682;
  --pine-soft: rgba(72, 166, 130, 0.12);
}

body {
  background-color: var(--bg-canvas) !important;
  background-image: radial-gradient(rgba(165, 145, 115, 0.18) 1px, transparent 1px) !important;
  
  color: var(--ink-primary) !important;
}

/* 2. 纯 SVG 金石印章 Badge 体系 (严禁外部图标字体，全量双线印章质感) */
.seal-badge, .tier-badge, .score-badge, .title-seal {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 2px 8px !important;
  border: 1.5px solid var(--vermilion) !important;
  color: var(--vermilion) !important;
  background: var(--vermilion-soft) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  border-radius: 4px !important;
  box-shadow: inset 0 0 0 1px rgba(166, 58, 36, 0.14) !important;
  letter-spacing: 0.5px !important;
  font-family: var(--font-current) !important;
}

.tier-T0 {
  border-color: #a63a24 !important;
  color: #a63a24 !important;
  background: rgba(166, 58, 36, 0.08) !important;
}

.tier-T1 {
  border-color: var(--pine-green) !important;
  color: var(--pine-green) !important;
  background: var(--pine-soft) !important;
  box-shadow: inset 0 0 0 1px rgba(46, 102, 79, 0.14) !important;
}

.tier-T2 {
  border-color: #7d654c !important;
  color: #7d654c !important;
  background: rgba(125, 101, 76, 0.08) !important;
  box-shadow: inset 0 0 0 1px rgba(125, 101, 76, 0.14) !important;
}

/* 3. 朱丝栏垂直引导线与典雅学术正文卡片 */
.paper-container {
  width: 100% !important;
  max-width: min(68ch, 100%) !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  line-height: 1.85 !important;
  font-family: var(--font-serif) !important;
  padding: 24px 20px 140px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

.stage-header-card {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--line-main) !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 14px rgba(42, 34, 27, 0.04) !important;
  padding: 18px 22px 16px !important;
  margin-bottom: 18px !important;
}

.section-thesis-box {
  border-left: 3.5px solid var(--vermilion) !important;
  background: rgba(166, 58, 36, 0.04) !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 12px 16px !important;
  margin-bottom: 14px !important;
}

.thesis-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 1px 7px !important;
  border-radius: 4px !important;
  background: rgba(166, 58, 36, 0.08) !important;
  border: 1px solid var(--vermilion-border) !important;
  color: var(--vermilion) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  margin-right: 6px !important;
  font-family: var(--font-current) !important;
}

/* 审题指引与立意维度卡片 (纯 SVG 矢量图标引导) */
.framework-qa-card {
  border-left: 3.5px solid var(--amber-gold) !important;
  background: #faf4ea !important;
  border-top: 1px solid rgba(196, 115, 43, 0.16) !important;
  border-right: 1px solid rgba(196, 115, 43, 0.16) !important;
  border-bottom: 1px solid rgba(196, 115, 43, 0.16) !important;
  border-radius: 0 10px 10px 0 !important;
  padding: 12px 16px !important;
  margin-bottom: 14px !important;
}

[data-theme="dark"] .framework-qa-card {
  background: #2a2319 !important;
  border-color: rgba(229, 147, 68, 0.22) !important;
}

.qa-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  color: #94551b !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  margin-bottom: 6px !important;
  font-family: var(--font-sans), sans-serif !important;
}

[data-theme="dark"] .qa-badge {
  color: #e59344 !important;
}

.qa-badge svg {
  width: 13px !important;
  height: 13px !important;
  stroke: currentColor !important;
}

/* 考场原句黄金提取框 */
.gold-quote-box {
  border: 1px solid rgba(196, 115, 43, 0.28) !important;
  background: #fdfbf7 !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  margin: 14px 0 !important;
  box-shadow: 0 2px 12px rgba(184, 120, 30, 0.05) !important;
}

[data-theme="dark"] .gold-quote-box {
  background: #28221b !important;
  border-color: rgba(229, 147, 68, 0.3) !important;
}

.gold-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  background: rgba(166, 58, 36, 0.08) !important;
  border: 1px solid var(--vermilion-border) !important;
  box-shadow: inset 0 0 0 1px rgba(166, 58, 36, 0.12) !important;
  color: var(--vermilion) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  font-family: var(--font-current) !important;
}

.gold-badge svg {
  width: 12px !important;
  height: 12px !important;
  stroke: var(--vermilion) !important;
  fill: none !important;
}

[data-theme="dark"] .gold-badge {
  background: rgba(217, 98, 76, 0.14) !important;
  border-color: rgba(217, 98, 76, 0.3) !important;
  box-shadow: inset 0 0 0 1px rgba(217, 98, 76, 0.2) !important;
  color: var(--vermilion) !important;
}

[data-theme="dark"] .gold-badge svg {
  stroke: var(--vermilion) !important;
}

.logic-sec-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  background: rgba(166, 58, 36, 0.08) !important;
  color: var(--vermilion) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.logic-sec-pill svg {
  width: 12px !important;
  height: 12px !important;
  stroke: var(--vermilion) !important;
}

/* 4. 烛光暖晕聚光跟读高光 (Candlelight Active Spotlight) */
.recite-sent {
  transition: box-shadow 0.08s ease !important;
}

.recite-sent.active-spotlight {
  background-color: #faeed0 !important;
  color: #1a120b !important;
  border-radius: 4px !important;
  box-shadow: 0 0 0 3.5px #faeed0, 0 2px 16px rgba(184, 120, 30, 0.22) !important;
  font-weight: 600 !important;
  display: inline !important;
  transition: none !important;
}

.active-spotlight strong,
.active-spotlight .kw-red,
.active-spotlight .quote-gold-core {
  color: #872310 !important;
}

[data-theme="dark"] .recite-sent.active-spotlight {
  background-color: #3f3018 !important;
  color: #fff2db !important;
  box-shadow: 0 0 0 3.5px #3f3018, 0 2px 18px rgba(229, 147, 68, 0.3) !important;
}

[data-theme="dark"] .active-spotlight strong,
[data-theme="dark"] .active-spotlight .kw-red,
[data-theme="dark"] .active-spotlight .quote-gold-core {
  color: #ff9d85 !important;
}

/* 5. 底部播放 Dock：iPhone PWA 严格物理居中 7 键布局 */
/* cleaned up legacy 768px dock grid 2 */


/* ========================================================
   全科拓展 · 考研英语写作与听力磨耳沉浸版样式体系
   ======================================================== */
.en-sentence-box {
  padding: 16px 20px;
  background: var(--bg-paper);
  border-radius: var(--radius-md);
  border-left: 3.5px solid var(--vermilion);
  font-family: Georgia, "Times New Roman", -apple-system, BlinkMacSystemFont, "Segoe UI", serif;
  font-size: 1.15em;
  line-height: 1.8;
  color: var(--ink-primary);
  letter-spacing: 0.25px;
  margin: 10px 0;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02);
}

.en-quote-highlight {
  color: var(--vermilion) !important;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.en-variant-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(160, 90, 44, 0.05);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  border: 1px solid rgba(160, 90, 44, 0.14);
  font-size: 0.96em;
  line-height: 1.65;
}

.en-variant-arrow {
  color: #8A4B1A;
  font-size: 13px;
  flex-shrink: 0;
}

.en-variant-text {
  color: var(--ink-primary);
}

.en-variant-text code {
  background: rgba(160, 90, 44, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.92em;
  color: #8A4B1A;
  font-weight: 600;
}

.en-template-para-box {
  padding: 14px 18px;
  font-family: Georgia, "Times New Roman", -apple-system, BlinkMacSystemFont, "Segoe UI", serif;
  font-size: 1.08em;
  line-height: 1.85;
  color: var(--ink-primary);
  letter-spacing: 0.2px;
}

/* 英语写作专用标签徽章 */
.tier-书信告示 {
  background-color: rgba(46, 125, 50, 0.1) !important;
  color: #2e7d32 !important;
  border: 1px solid rgba(46, 125, 50, 0.25) !important;
}

.tier-图画图表 {
  background-color: rgba(2, 119, 189, 0.1) !important;
  color: #0277bd !important;
  border: 1px solid rgba(2, 119, 189, 0.25) !important;
}

.tier-论辩说理 {
  background-color: rgba(198, 40, 40, 0.1) !important;
  color: #c62828 !important;
  border: 1px solid rgba(198, 40, 40, 0.25) !important;
}

.tier-点睛谚语 {
  background-color: rgba(184, 115, 51, 0.12) !important;
  color: #8a4b1a !important;
  border: 1px solid rgba(184, 115, 51, 0.3) !important;
}

.tier-冲刺模版 {
  background-color: rgba(106, 27, 154, 0.1) !important;
  color: #6a1b9a !important;
  border: 1px solid rgba(106, 27, 154, 0.25) !important;
}

/* 英语写作专用标签徽章与考场高分范文排版体系 */
.tier-小作文·书信,
.tier-小作文·告示 {
  background-color: rgba(46, 125, 50, 0.1) !important;
  color: #2e7d32 !important;
  border: 1px solid rgba(46, 125, 50, 0.25) !important;
}

.tier-大作文·图画 {
  background-color: rgba(2, 119, 189, 0.1) !important;
  color: #0277bd !important;
  border: 1px solid rgba(2, 119, 189, 0.25) !important;
}

.tier-大作文·图表 {
  background-color: rgba(106, 27, 154, 0.1) !important;
  color: #6a1b9a !important;
  border: 1px solid rgba(106, 27, 154, 0.25) !important;
}

[data-theme="dark"] .en-variant-row {
  background: rgba(246, 173, 85, 0.08);
  border-color: rgba(246, 173, 85, 0.22);
}

[data-theme="dark"] .en-variant-arrow {
  color: #f6ad55;
}

[data-theme="dark"] .en-variant-text code {
  background: rgba(246, 173, 85, 0.16);
  color: #fbd38d;
}

[data-theme="dark"] .tier-书信告示,
[data-theme="dark"] .tier-小作文·书信,
[data-theme="dark"] .tier-小作文·告示 {
  background-color: rgba(72, 187, 120, 0.18) !important;
  color: #9ae6b4 !important;
  border-color: rgba(72, 187, 120, 0.35) !important;
}

[data-theme="dark"] .tier-图画图表,
[data-theme="dark"] .tier-大作文·图画 {
  background-color: rgba(66, 153, 225, 0.18) !important;
  color: #90cdf4 !important;
  border-color: rgba(66, 153, 225, 0.35) !important;
}

[data-theme="dark"] .tier-论辩说理 {
  background-color: rgba(245, 101, 101, 0.18) !important;
  color: #feb2b2 !important;
  border-color: rgba(245, 101, 101, 0.35) !important;
}

[data-theme="dark"] .tier-点睛谚语 {
  background-color: rgba(237, 137, 54, 0.18) !important;
  color: #fbd38d !important;
  border-color: rgba(237, 137, 54, 0.38) !important;
}

[data-theme="dark"] .tier-冲刺模版,
[data-theme="dark"] .tier-大作文·图表 {
  background-color: rgba(183, 148, 244, 0.18) !important;
  color: #d6bcfa !important;
  border-color: rgba(183, 148, 244, 0.35) !important;
}

[data-theme="dark"] #paper-content [style*="color: #2d3748" i],
[data-theme="dark"] #paper-content [style*="color:#2d3748" i],
[data-theme="dark"] #paper-content [style*="color: #4a5568" i],
[data-theme="dark"] #paper-content [style*="color:#4a5568" i] {
  color: #d5cfc6 !important;
}

[data-theme="dark"] #paper-content [style*="color: #718096" i],
[data-theme="dark"] #paper-content [style*="color:#718096" i] {
  color: #a89f94 !important;
}

[data-theme="dark"] #paper-content [style*="color: #8A4B1A" i],
[data-theme="dark"] #paper-content [style*="color:#8A4B1A" i],
[data-theme="dark"] #paper-content [style*="color: #744210" i],
[data-theme="dark"] #paper-content [style*="color:#744210" i],
[data-theme="dark"] #paper-content [style*="color: #975a16" i],
[data-theme="dark"] #paper-content [style*="color:#975a16" i] {
  color: #f3c27d !important;
}

[data-theme="dark"] #paper-content [style*="color: #2b6cb0" i],
[data-theme="dark"] #paper-content [style*="color:#2b6cb0" i] {
  color: #7cc4fa !important;
}

/* ========================================================
   英语写作专属西文典藏排版系统 (Western Typography Engine)
   遵循 Claude UI 规范：Charter/Georgia 衬线体、自然齐左、1.58 黄金行高、齐头块状排版
   ======================================================== */
.en-task-prompt-box {
  background: rgba(240, 244, 248, 0.7);
  border-left: 3.5px solid #2b6cb0;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  font-size: 0.96rem;
  color: #2d3748;
  line-height: 1.55;
  text-align: left !important;
  cursor: pointer;
  word-break: normal;
  overflow-wrap: break-word;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.en-task-prompt-box:hover {
  background: rgba(232, 241, 250, 0.9);
  border-left-color: var(--vermilion, #d97757);
}

[data-theme="dark"] .en-task-prompt-box {
  background: rgba(43, 108, 176, 0.12);
  border-left-color: #4299e1;
  color: #cbd5e0;
}

[data-theme="dark"] .en-task-prompt-box:hover {
  background: rgba(43, 108, 176, 0.22);
  border-left-color: #f59e0b;
}

.en-task-prompt-text {
  margin: 0;
  font-style: italic;
  text-align: left !important;
  line-height: 1.55;
}

/* 审题指令导引与范文起音衔接提示条 (Pure SVG + 宣纸金石风) */
.en-intro-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: rgba(43, 108, 176, 0.09) !important;
  color: #245894 !important;
  border: 1px solid rgba(43, 108, 176, 0.25) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.en-intro-badge:hover {
  background: rgba(43, 108, 176, 0.15) !important;
  transform: translateY(-0.5px);
}

[data-theme="dark"] .en-intro-badge {
  background: rgba(66, 153, 225, 0.15) !important;
  color: #63b3ed !important;
  border-color: rgba(66, 153, 225, 0.32) !important;
}

.en-prompt-audio-pill-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  padding-top: 9px;
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .en-prompt-audio-pill-wrap {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.en-audio-jump-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: 9999px;
  background: var(--vermilion, #d97757);
  color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 7px rgba(217, 119, 87, 0.25);
  line-height: 1.25;
  user-select: none;
  -webkit-user-select: none;
}

.en-audio-jump-pill:hover {
  background: #c66646;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(217, 119, 87, 0.35);
}

.en-audio-jump-pill:active {
  transform: scale(0.97);
}

.en-audio-jump-pill svg {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

.en-audio-pill-note {
  font-size: 0.81rem;
  color: var(--ink-secondary, #718096);
  line-height: 1.4;
}

[data-theme="dark"] .en-audio-pill-note {
  color: #a0aec0;
}

/* 范文容器：纯平底托与优雅留白 */
.en-full-essay-box {
  background: rgba(255, 255, 255, 0.95);
  padding: 20px 18px 22px;
  border-radius: var(--radius-md);
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  text-align: left !important;
  word-break: normal;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

[data-theme="dark"] .en-full-essay-box {
  background: rgba(30, 30, 28, 0.95);
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* 书信体专用：称呼顶格独立成行 (Salutation) */
.en-letter-salutation-wrap {
  margin: 0 0 1rem 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

.en-salutation {
  display: inline-block;
  font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, "Times New Roman", serif !important;
  font-size: 1.12rem !important;
  font-weight: 700 !important;
  color: var(--ink-primary);
  line-height: 1.4 !important;
  letter-spacing: -0.005em !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

/* 告示通知专用：大写标题居中 (Notice Heading) */
.en-notice-title-wrap {
  margin: 0 0 1.15rem 0 !important;
  padding: 0 0 0.65rem 0 !important;
  text-align: center !important;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .en-notice-title-wrap {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.en-notice-heading {
  display: inline-block;
  font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif !important;
  font-size: 1.16rem !important;
  font-weight: 700 !important;
  color: #b7791f !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase;
  line-height: 1.35 !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

[data-theme="dark"] .en-notice-heading {
  color: #d69e2e !important;
}

/* 范文正文段落：现代考试与出版级 Block Format（齐头块状排版） */
.en-essay-para {
  margin: 0 0 1.15rem 0 !important;
  text-indent: 0 !important;
  line-height: 1.58 !important;
  font-size: 1.04rem !important;
  font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, "Times New Roman", serif !important;
  color: var(--ink-primary) !important;
  text-align: left !important;
  letter-spacing: -0.01em !important;
  word-spacing: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  -webkit-hyphens: auto !important;
  hyphens: auto !important;
  -webkit-font-smoothing: antialiased;
}

/* 书信与告示专用：结尾署名与日期 (Sign-off & Date) */
.en-letter-signoff-wrap,
.en-notice-signoff-wrap {
  margin: 1.25rem 0 0 0 !important;
  padding-top: 0.5rem !important;
  text-align: right !important;
}

.en-signoff {
  display: inline-block;
  font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif !important;
  font-size: 1.02rem !important;
  font-style: italic;
  font-weight: 600;
  color: var(--ink-primary);
  line-height: 1.45 !important;
  text-align: right !important;
}

/* 英语听读句子微元 (Sentence Spotlight) 视觉微调：边缘圆润细腻与西文连字换行 */
.en-full-essay-box .recite-sent {
  padding: 1px 2px !important;
  border-radius: 4px !important;
  margin: 0 1px;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  -webkit-hyphens: auto !important;
  hyphens: auto !important;
}

.en-full-essay-box .recite-sent.active-spotlight {
  background-color: rgba(217, 119, 87, 0.15) !important;
  color: #141413 !important;
  box-shadow: 0 0 0 1.5px rgba(217, 119, 87, 0.45) !important;
  font-weight: 500;
}

[data-theme="dark"] .en-full-essay-box .recite-sent.active-spotlight {
  background-color: rgba(217, 119, 87, 0.28) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 1.5px rgba(217, 119, 87, 0.6) !important;
}

/* 覆盖祖先容器可能施加的 text-align: justify */
[data-subject="en"] .section-card-content,
[data-subject="en"] .section-body-text,
[data-subject="en"] #paper-content p {
  text-align: left !important;
  text-justify: auto !important;
}

/* ========================================================
   英语写作移动端专属横向宽度极致释放引擎 (Mobile Reading Width Optimization)
   解决嵌套 padding 累积高达 148px 导致单行仅容纳 4-5 词的严重窄屏痛点
   释放后移动端纯文本阅读净宽达 305px~330px，舒适容纳 8~12 词/行
   ======================================================== */
@media (max-width: 768px) {
  [data-subject="en"] .main-stage {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  
  [data-subject="en"] .paper-container {
    padding-left: 10px !important;
    padding-right: 10px !important;
    max-width: 100% !important;
  }
  
  [data-subject="en"] .exam-section-card {
    padding: 16px 14px !important;
    border-radius: 16px !important;
    margin-bottom: 14px !important;
  }
  
  .en-full-essay-box {
    padding: 16px 14px 18px !important;
  }

  .en-task-prompt-box {
    padding: 10px 12px !important;
    font-size: 0.93rem !important;
  }
}

@media (max-width: 640px) {
  [data-subject="en"] .main-stage {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  [data-subject="en"] .paper-container {
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-top: 14px !important;
  }

  [data-subject="en"] .exam-section-card {
    padding: 14px 12px !important;
    border-radius: 14px !important;
    margin-bottom: 12px !important;
  }

  .en-full-essay-box {
    padding: 14px 12px 16px !important;
    border-radius: 10px !important;
  }

  .en-task-prompt-box {
    padding: 9px 11px !important;
    font-size: 0.91rem !important;
    line-height: 1.5 !important;
  }

  .en-essay-para {
    font-size: 1.015rem !important;
    line-height: 1.56 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 0.95rem !important;
  }

  .en-letter-salutation-wrap {
    margin-bottom: 0.75rem !important;
  }

  .en-salutation {
    font-size: 1.05rem !important;
  }

  .en-letter-signoff-wrap,
  .en-notice-signoff-wrap {
    margin-top: 1rem !important;
  }

  .en-prompt-audio-pill-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

@media (max-width: 480px) {
  [data-subject="en"] .main-stage {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  [data-subject="en"] .paper-container {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  [data-subject="en"] .exam-section-card {
    padding: 12px 10px !important;
    border-radius: 12px !important;
  }

  .en-full-essay-box {
    padding: 12px 10px 14px !important;
  }

  .en-essay-para {
    font-size: 1.0rem !important;
    line-height: 1.54 !important;
    letter-spacing: -0.012em !important;
  }

  .en-audio-jump-pill {
    padding: 4px 11px;
    font-size: 0.8rem;
  }

  .en-audio-pill-note {
    font-size: 0.77rem;
  }
}


/* ========================================================
   全息动态感知条 (Now-Playing HUD) 与骨架大纲体系
   ======================================================== */
.dock-hud-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
  padding: 0 4px;
  margin-bottom: 6px;
  box-sizing: border-box;
}

.hud-left-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.hud-track-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid transparent;
}

.hud-track-badge:hover {
  transform: translateY(-1px);
}

.hud-track-badge:active {
  transform: translateY(0) scale(0.97);
}

.hud-track-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

/* 轨一：朱墨金 · 考场答题版 */
.hud-track-badge.track1-mode {
  background: rgba(184, 51, 42, 0.1);
  color: #B8332A;
  border-color: rgba(184, 51, 42, 0.28);
}

.hud-track-badge.track1-mode .hud-track-dot {
  background: #B8332A;
  box-shadow: 0 0 5px rgba(184, 51, 42, 0.6);
}

/* 轨二：沉香赭 · 逻辑精解版 */
.hud-track-badge.track2-mode {
  background: rgba(138, 75, 26, 0.12);
  color: #8A4B1A;
  border-color: rgba(138, 75, 26, 0.3);
}

.hud-track-badge.track2-mode .hud-track-dot {
  background: #8A4B1A;
  box-shadow: 0 0 5px rgba(138, 75, 26, 0.6);
}

.hud-title-text {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.hud-right-framework {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  flex-shrink: 0;
  max-width: 48%;
  overflow: hidden;
}

.hud-framework-pill {
  background: rgba(42, 34, 27, 0.05);
  border: 1px solid var(--line-main);
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  color: var(--ink-secondary);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.2s ease;
}

.hud-framework-icon {
  flex-shrink: 0;
  color: var(--ink-muted);
}

.hud-right-framework:hover .hud-framework-pill {
  background: rgba(184, 51, 42, 0.08);
  border-color: rgba(184, 51, 42, 0.25);
  color: #B8332A;
}

.hud-right-framework:hover .hud-framework-icon {
  color: #B8332A;
}

.hud-drawer-btn {
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-secondary);
  padding: 2px 7px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.hud-drawer-btn:hover {
  background: var(--line-main);
  color: var(--ink-primary);
}

/* 考点卡片当前高亮与吸顶效果 */
.exam-section-card {
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.exam-section-card.active-section-card {
  box-shadow: 0 4px 20px rgba(184, 51, 42, 0.08), 0 0 0 1.5px rgba(184, 51, 42, 0.3) !important;
  border-left-color: var(--vermilion) !important;
}

.section-card-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg-card);
  padding: 8px 12px;
  margin: -4px -6px 12px -6px;
  border-bottom: 1px solid var(--line-subtle);
  border-radius: 8px 8px 0 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.2s ease;
}

/* 答题思维骨架抽屉 (Outline Drawer) */
.outline-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 400;
  transition: opacity 0.25s ease;
}

.outline-drawer {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 105%);
  width: min(680px, 100vw);
  max-height: 75vh;
  background: var(--bg-card);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 36px rgba(0, 0, 0, 0.2);
  z-index: 401;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-top: 1px solid var(--line-strong);
  padding-bottom: max(24px, env(safe-area-inset-bottom, 24px));
  box-sizing: border-box;
}

.outline-drawer.open {
  transform: translate(-50%, 0);
}

.outline-drawer-handle-bar {
  display: flex;
  justify-content: center;
  padding-top: 8px;
  padding-bottom: 2px;
}

.outline-drawer-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--line-strong);
}

.outline-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px 6px;
}

.outline-drawer-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.outline-drawer-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-primary);
}

.outline-drawer-track-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
}

.outline-drawer-track-badge.track1-mode {
  background: rgba(184, 51, 42, 0.1);
  color: #B8332A;
}

.outline-drawer-track-badge.track2-mode {
  background: rgba(138, 75, 26, 0.12);
  color: #8A4B1A;
}

[data-theme="dark"] .outline-drawer-track-badge.track2-mode {
  background: rgba(243, 184, 104, 0.16);
  color: #f3b868;
}

.outline-drawer-close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ink-muted);
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.outline-drawer-close:hover {
  background: var(--line-main);
  color: var(--ink-primary);
}

.outline-drawer-sub {
  font-size: 12px;
  color: var(--ink-secondary);
  padding: 0 20px 10px;
  border-bottom: 1px solid var(--line-main);
}

.outline-drawer-body {
  overflow-y: auto;
  padding: 12px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.outline-node-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(42, 34, 27, 0.02);
  border: 1px solid var(--line-main);
  cursor: pointer;
  transition: all 0.18s ease;
}

.outline-node-item:hover {
  background: rgba(184, 51, 42, 0.04);
  border-color: rgba(184, 51, 42, 0.2);
}

.outline-node-item.active-node {
  background: rgba(184, 51, 42, 0.08);
  border-color: rgba(184, 51, 42, 0.35);
  box-shadow: 0 2px 8px rgba(184, 51, 42, 0.08);
}

.outline-node-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--vermilion);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  margin-top: 1px;
}

.outline-node-info {
  flex: 1;
  min-width: 0;
}

.outline-node-header {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}

.outline-node-badge {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-primary);
}

.outline-node-badge.badge-type-spec {
  color: var(--amber);
}

.outline-node-badge.badge-type-intro {
  color: var(--vermilion);
}

.outline-node-badge.badge-type-conclusion {
  color: var(--pine);
}

.outline-node-desc {
  font-size: 11.5px;
  color: var(--ink-muted);
}

.outline-node-snippet {
  font-size: 12px;
  color: var(--ink-secondary);
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.outline-node-action {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-top: 2px;
}

.outline-node-time {
  font-size: 11px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.outline-jump-icon {
  color: var(--ink-muted);
  transition: transform 0.15s ease, color 0.15s ease;
}

.outline-node-item:hover .outline-jump-icon {
  color: var(--vermilion);
  transform: translateX(2px);
}

/* 移动端细化调优 */
@media (max-width: 768px) {
  .hud-title-text {
    max-width: 140px;
  }
  .hud-framework-pill {
    max-width: 130px;
  }
}

/* 夜间深色模式适配 */
[data-theme="dark"] .dock-hud-bar {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .hud-track-badge.track1-mode {
  background: rgba(255, 120, 96, 0.15);
  color: #ff9d85;
  border-color: rgba(255, 120, 96, 0.35);
}

[data-theme="dark"] .hud-track-badge.track2-mode {
  background: rgba(229, 147, 68, 0.16);
  color: #f5b06d;
  border-color: rgba(229, 147, 68, 0.35);
}

[data-theme="dark"] .hud-framework-pill {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: #d8cec4;
}

[data-theme="dark"] .hud-drawer-btn {
  background: #25221e;
  border-color: rgba(255, 255, 255, 0.15);
  color: #d8cec4;
}

[data-theme="dark"] .outline-drawer {
  background: #221e1a;
  border-top-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .outline-drawer-sub {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  color: #a89c92;
}

[data-theme="dark"] .outline-node-item {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .outline-node-item.active-node {
  background: rgba(255, 120, 96, 0.12);
  border-color: rgba(255, 120, 96, 0.4);
}

[data-theme="dark"] .section-card-header {
  background: var(--bg-card);
}

/* 播放模式特效（单句循环、单段循环高光） */
.recite-sent.active-spotlight.loop-sent-active {
  background: rgba(176, 105, 23, 0.16) !important;
  color: var(--amber) !important;
  box-shadow: 0 0 0 1.5px var(--amber), 0 2px 8px rgba(176, 105, 23, 0.2) !important;
  border-radius: 4px;
}

.exam-section-card.active-section-card.loop-sec-active {
  border-left-width: 4px !important;
  border-left-color: var(--amber) !important;
  box-shadow: 0 4px 20px rgba(176, 105, 23, 0.12), 0 0 0 1.5px rgba(176, 105, 23, 0.4) !important;
}

.exam-section-card.active-section-card.loop-sec-active .section-card-header {
  border-bottom-color: rgba(176, 105, 23, 0.35);
}

.pill-mode-btn.active {
  background: var(--amber-soft) !important;
  color: var(--amber) !important;
  border-color: var(--amber) !important;
}

/* 播放循环模式选择抽屉 (Play Mode Drawer) */
.mode-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1200 !important;
  transition: opacity 0.25s ease;
}

.mode-drawer {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 105%);
  width: min(560px, 100vw);
  max-height: 75vh;
  background: var(--bg-card);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 36px rgba(0, 0, 0, 0.22);
  z-index: 1210 !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.mode-drawer.open {
  transform: translate(-50%, 0);
}

.mode-drawer-handle-bar {
  display: flex;
  justify-content: center;
  padding-top: 8px;
  padding-bottom: 2px;
}

.mode-drawer-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--line-strong);
}

.mode-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px 6px;
}

.mode-drawer-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-primary);
}

.mode-drawer-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-primary);
}

.mode-drawer-close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ink-muted);
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.mode-drawer-close:hover {
  background: var(--line-main);
  color: var(--ink-primary);
}

.mode-drawer-sub {
  font-size: 12px;
  color: var(--ink-muted);
  padding: 0 20px 10px;
  border-bottom: 1px solid var(--line-main);
}

.mode-drawer-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px calc(24px + env(safe-area-inset-bottom, 16px)) !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.mode-option-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--line-main);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.mode-option-card:hover {
  border-color: var(--line-strong);
  background: var(--bg-hover);
}

.mode-option-card.active-mode-card {
  border-color: var(--amber);
  background: var(--amber-soft);
  box-shadow: 0 0 0 1px var(--amber);
}

.mode-option-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--bg-body);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink-secondary);
}

.mode-option-card.active-mode-card .mode-option-icon {
  background: var(--bg-card);
  color: var(--amber);
}

.mode-option-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mode-option-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mode-option-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-primary);
}

.mode-option-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--line-main);
  color: var(--ink-secondary);
}

.mode-option-card.active-mode-card .mode-option-badge {
  background: rgba(176, 105, 23, 0.2);
  color: var(--amber);
}

.mode-option-desc {
  font-size: 11.5px;
  color: var(--ink-muted);
  line-height: 1.4;
}

.mode-option-check {
  width: 20px;
  height: 20px;
  color: var(--amber);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-theme="dark"] .mode-drawer {
  background: var(--bg-card);
}
[data-theme="dark"] .mode-drawer-sub {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  color: #a89c92;
}
[data-theme="dark"] .mode-option-card {
  background: #2a2520;
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .mode-option-card.active-mode-card {
  background: rgba(176, 105, 23, 0.2);
  border-color: var(--amber);
}


.mode-option-card.has-repeat-pills {
  flex-wrap: wrap;
  align-items: flex-start;
}

.mode-repeat-pills {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px dashed var(--line-subtle);
}

.mode-repeat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-muted);
  margin-right: 2px;
}

.mode-repeat-pill,
.mode-gap-pill {
  border: 1px solid var(--line-main);
  background: var(--bg-body);
  color: var(--ink-secondary);
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.16s ease;
  -webkit-tap-highlight-color: transparent;
}

.mode-repeat-pill:hover,
.mode-gap-pill:hover {
  border-color: var(--amber);
  color: var(--amber);
}

.mode-repeat-pill.active,
.mode-gap-pill.active {
  background: var(--amber);
  border-color: var(--amber);
  color: #fff;
}

[data-theme="dark"] .mode-repeat-pill,
[data-theme="dark"] .mode-gap-pill {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .mode-repeat-pill.active,
[data-theme="dark"] .mode-gap-pill.active {
  background: var(--amber);
  border-color: var(--amber);
  color: #1a1510;
}

.mode-gap-card {
  margin-top: 4px;
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--bg-sidebar);
  border: 1px dashed var(--line-main);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

[data-theme="dark"] .mode-gap-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.12);
}

.mode-gap-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.mode-gap-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-primary);
}

.mode-gap-sub {
  font-size: 11px;
  color: var(--ink-muted);
}

.mode-gap-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* 背诵自测遮罩模式 (Recitation Cloze Mode) */

#paper-content.cloze-keyword .recite-sent:not(.active-spotlight) strong:not([data-ghost]):not(.cloze):not(.kw-red):not(.quote-gold-core) {
  filter: blur(5px);
  background: rgba(180, 140, 80, 0.18);
  border-radius: 3px;
  transition: filter 0.2s ease;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  #paper-content.cloze-keyword .recite-sent:not(.active-spotlight) strong:not([data-ghost]):not(.cloze):not(.kw-red):not(.quote-gold-core):hover {
    filter: none;
  }
}

#paper-content.cloze-body .tj-point-card:not(.active-spotlight):not(.cloze-revealed) {
  cursor: pointer;
}

#paper-content.cloze-body .recite-sent:not(.thesis-sent):not(.active-spotlight):not(.cloze-revealed),
#paper-content.cloze-body .tj-sent-span:not(.active-spotlight):not(.cloze-revealed),
#paper-content.cloze-body .recite-sent-item:not(.active-spotlight):not(.cloze-revealed),
#paper-content.cloze-body .recite-sentence:not(.active-spotlight):not(.cloze-revealed),
#paper-content.cloze-body .xt-day-point-card:not(.active-spotlight):not(.cloze-revealed) .xt-point-content,
#paper-content.cloze-body .tj-point-card:not(.active-spotlight):not(.cloze-revealed) .tj-point-text {
  filter: blur(6px);
  opacity: 0.65;
  transition: filter 0.25s ease, opacity 0.25s ease;
  cursor: pointer;
}

#paper-content.cloze-body .recite-sent.cloze-revealed,
#paper-content.cloze-body .tj-sent-span.cloze-revealed,
#paper-content.cloze-body .recite-sent-item.cloze-revealed,
#paper-content.cloze-body .recite-sentence.cloze-revealed,
#paper-content.cloze-body .xt-day-point-card.cloze-revealed .xt-point-content,
#paper-content.cloze-body .tj-point-card.cloze-revealed .tj-point-text {
  filter: none;
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  #paper-content.cloze-body .recite-sent:not(.thesis-sent):not(.active-spotlight):hover,
  #paper-content.cloze-body .tj-sent-span:not(.active-spotlight):hover,
  #paper-content.cloze-body .recite-sent-item:not(.active-spotlight):hover,
  #paper-content.cloze-body .recite-sentence:not(.active-spotlight):hover,
  #paper-content.cloze-body .xt-day-point-card:not(.active-spotlight):hover .xt-point-content,
  #paper-content.cloze-body .tj-point-card:not(.active-spotlight):hover .tj-point-text {
    filter: none;
    opacity: 1;
  }
}



.action-btn.cloze-mode-btn.active {

  background: var(--amber-soft);

  color: var(--amber);

  border-color: var(--amber);

  font-weight: 600;

}

[data-theme="dark"] .action-btn.cloze-mode-btn.active {

  background: rgba(176, 105, 23, 0.2);

  color: #f5b041;

  border-color: #f5b041;

}



/* ========================================================
   金石朱墨 · 考题掌握状态 & 研学看板模块 (v1.9.1)
   ======================================================== */

/* 顶部研学看板按钮 */
.action-btn.study-dashboard-btn {
  background: var(--bg-card);
  color: var(--vermilion);
  border-color: var(--line-main);
  gap: 5px;
  font-weight: 600;
}

.action-btn.study-dashboard-btn:hover {
  background: var(--vermilion-soft);
  border-color: var(--vermilion-border);
  color: var(--vermilion-hover);
}

[data-theme="dark"] .action-btn.study-dashboard-btn {
  color: #ff7b63;
  border-color: var(--line-main);
}

[data-theme="dark"] .action-btn.study-dashboard-btn:hover {
  background: rgba(209, 86, 61, 0.18);
  border-color: #ff7b63;
}

/* 考题掌握状态切换印章按钮 */
.mastery-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--line-strong);
  background: var(--bg-card);
  color: var(--ink-muted);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  margin-left: 4px;
}

.mastery-toggle-btn:hover {
  transform: translateY(-1px);
}

.mastery-toggle-btn.status-unlearned {
  border-color: var(--line-strong);
  background: var(--bg-card);
  color: var(--ink-muted);
}

.mastery-toggle-btn.status-familiar {
  border-color: var(--amber);
  background: var(--amber-soft);
  color: var(--amber);
}

.mastery-toggle-btn.status-mastered {
  border-color: var(--vermilion);
  background: var(--vermilion-soft);
  color: var(--vermilion);
  box-shadow: 0 1px 4px rgba(166, 58, 36, 0.18);
}

[data-theme="dark"] .mastery-toggle-btn.status-unlearned {
  background: #23211e;
  border-color: #443e38;
  color: #a89f91;
}

[data-theme="dark"] .mastery-toggle-btn.status-familiar {
  background: rgba(176, 105, 23, 0.2);
  border-color: #f5b041;
  color: #f5b041;
}

[data-theme="dark"] .mastery-toggle-btn.status-mastered {
  background: rgba(209, 86, 61, 0.2);
  border-color: #ff7b63;
  color: #ff7b63;
}

/* 侧边栏题目卡片掌握状态印章 */
.card-mastery-badge {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 600;
}

.card-mastery-badge.seal-mastered {
  background: var(--vermilion-soft);
  color: var(--vermilion);
  border: 1px solid var(--vermilion-border);
}

.card-mastery-badge.badge-familiar {
  background: var(--amber-soft);
  color: var(--amber);
  border: 1px solid #f2dbb8;
}

.card-mastery-badge.badge-unlearned {
  background: var(--bg-sidebar);
  color: var(--ink-muted);
  border: 1px solid var(--line-main);
  opacity: 0.85;
}

[data-theme="dark"] .card-mastery-badge.seal-mastered {
  background: rgba(209, 86, 61, 0.22);
  color: #ff7b63;
  border-color: rgba(209, 86, 61, 0.4);
}

[data-theme="dark"] .card-mastery-badge.badge-familiar {
  background: rgba(176, 105, 23, 0.2);
  color: #f5b041;
  border-color: rgba(245, 176, 65, 0.35);
}

[data-theme="dark"] .card-mastery-badge.badge-unlearned {
  background: #23211e;
  color: #8a7c6f;
  border-color: #383430;
}

/* 侧边栏掌握度二级筛选行 */
.filter-pills-mastery {
  margin-top: 6px;
  border-top: 1px dashed var(--line-main);
  padding-top: 6px;
}

.filter-pills-mastery .filter-pill {
  font-size: 11.5px;
  padding: 3px 8px;
}

.filter-pills-mastery .filter-pill.active {
  background: var(--ink-primary);
  color: var(--bg-card);
}

.filter-pills-mastery .filter-pill[data-mastery="mastered"].active {
  background: var(--vermilion);
  color: #ffffff;
}

/* ========================================================
   金石朱墨 · 研学进度看板抽屉 (Study Dashboard Drawer)
   ======================================================== */
.dashboard-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 420;
  transition: opacity 0.25s ease;
}

.dashboard-drawer {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 105%);
  width: min(640px, 100vw);
  max-height: 82vh;
  background: var(--bg-card);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.26);
  z-index: 421;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-top: 1px solid var(--line-strong);
  padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
  box-sizing: border-box;
}

.dashboard-drawer.open {
  transform: translate(-50%, 0);
}

.dashboard-drawer-handle-bar {
  display: flex;
  justify-content: center;
  padding-top: 8px;
  padding-bottom: 2px;
}

.dashboard-drawer-handle {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--line-strong);
}

.dashboard-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px 4px;
}

.dashboard-drawer-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dashboard-drawer-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-primary);
  font-family: var(--font-serif, inherit);
}

.dashboard-seal-pill {
  font-size: 11px;
  padding: 2px 7px;
  background: var(--vermilion-soft);
  color: var(--vermilion);
  border: 1px solid var(--vermilion-border);
  border-radius: 4px;
  font-weight: 600;
}

.dashboard-drawer-close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ink-muted);
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.dashboard-drawer-close:hover {
  background: var(--line-main);
  color: var(--ink-primary);
}

.dashboard-drawer-sub {
  font-size: 12px;
  color: var(--ink-muted);
  padding: 0 20px 10px;
  border-bottom: 1px solid var(--line-main);
}

.dashboard-drawer-body {
  padding: 14px 20px 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 研学 Hero 连续打卡与全科总进度卡 */
.dash-hero-card {
  background: linear-gradient(145deg, var(--bg-card), var(--bg-canvas));
  border: 1px solid var(--line-main);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.dash-streak-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--line-main);
}

.dash-streak-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.streak-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--vermilion-soft);
  color: var(--vermilion);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--vermilion-border);
}

.streak-days-val {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink-primary);
  line-height: 1.1;
}

.streak-unit {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
}

.streak-label {
  font-size: 12px;
  color: var(--ink-muted);
}

.dash-punch-btn {
  background: var(--vermilion);
  color: #ffffff;
  border: none;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 2px 8px rgba(166, 58, 36, 0.25);
}

.dash-punch-btn:hover {
  background: var(--vermilion-hover);
  transform: translateY(-1px);
}

.dash-punch-btn.punched {
  background: var(--vermilion-soft);
  color: var(--vermilion);
  border: 1px solid var(--vermilion-border);
  box-shadow: none;
}

.dash-total-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dash-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
}

.dash-meta-title {
  font-weight: 600;
  color: var(--ink-primary);
}

.dash-meta-numbers {
  font-weight: 700;
  color: var(--vermilion);
}

.dash-progress-track {
  height: 10px;
  border-radius: 5px;
  background: var(--line-main);
  overflow: hidden;
  position: relative;
  display: flex;
}

.dash-progress-track.compact {
  height: 6px;
  border-radius: 3px;
}

.dash-progress-bar-mastered {
  height: 100%;
  background: linear-gradient(90deg, #b0351f, var(--vermilion));
  transition: width 0.4s ease;
}

.dash-progress-bar-familiar {
  height: 100%;
  background: linear-gradient(90deg, #c78024, var(--amber));
  transition: width 0.4s ease;
}

.dash-legend-row {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 11.5px;
  color: var(--ink-muted);
  margin-top: 4px;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

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

.legend-dot.dot-mastered {
  background: var(--vermilion);
}

.legend-dot.dot-familiar {
  background: var(--amber);
}

.legend-dot.dot-unlearned {
  background: var(--line-strong);
}

/* 研学分栏标题 */
.dash-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-primary);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

/* 分科攻克卡片栅格 */
.dash-subject-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (max-width: 640px) {
  .dash-subject-cards-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.dash-sub-card {
  background: var(--bg-card);
  border: 1px solid var(--line-main);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dash-sub-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dash-sub-tag {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-primary);
}

.dash-sub-ratio {
  font-size: 11px;
  font-weight: 600;
  color: var(--vermilion);
}

.dash-sub-details {
  font-size: 11px;
  color: var(--ink-muted);
}

/* T0 / T1 必背攻克卡片 */
.dash-tier-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.dash-tier-card {
  background: var(--bg-card);
  border: 1px solid var(--line-main);
  border-radius: var(--radius-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dash-tier-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dash-tier-header .tier-val {
  font-size: 15px;
  font-weight: 800;
  color: var(--vermilion);
}

.dash-tier-desc {
  font-size: 11.5px;
  color: var(--ink-muted);
}

/* 随机抽查大按键 */
.dash-action-box {
  margin-top: 4px;
}

.dash-random-pick-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--vermilion), #912c18);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-md);
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(166, 58, 36, 0.28);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.dash-random-pick-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(166, 58, 36, 0.38);
}

.dash-random-pick-btn:active {
  transform: translateY(0);
}

/* 今日听读时长微胶囊行与导出/导入备份按钮 */
.dash-listen-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 10px;
  background: var(--bg-body);
  border: 1px solid var(--line-subtle);
  font-size: 12px;
  color: var(--ink-secondary);
}

.dash-listen-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.dash-listen-item svg {
  color: var(--vermilion);
  flex-shrink: 0;
}

.dash-listen-item strong {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-primary);
}

.dash-listen-divider {
  color: var(--ink-muted);
}

.dash-backup-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 2px;
}

.dash-backup-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-main);
  background: var(--bg-card);
  color: var(--ink-secondary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}

.dash-backup-btn:hover {
  border-color: var(--vermilion-border);
  color: var(--vermilion);
  background: var(--vermilion-soft);
}

.dash-backup-btn:active {
  transform: scale(0.98);
}

/* 暗夜模式适配 */
[data-theme="dark"] .dashboard-drawer {
  background: var(--bg-card);
  border-color: #383430;
}

[data-theme="dark"] .dashboard-drawer-sub {
  border-color: #383430;
}

[data-theme="dark"] .dash-hero-card {
  background: linear-gradient(145deg, #24221f, #1b1917);
  border-color: #3a3632;
}

[data-theme="dark"] .dash-sub-card,
[data-theme="dark"] .dash-tier-card,
[data-theme="dark"] .dash-backup-btn {
  background: #23211e;
  border-color: #383430;
}

[data-theme="dark"] .dash-listen-row {
  background: rgba(255, 255, 255, 0.04);
  border-color: #383430;
  color: #c2b8ae;
}

[data-theme="dark"] .dash-listen-item strong {
  color: #f3ede4;
}

[data-theme="dark"] .dash-backup-btn {
  color: #d5cfc6;
}

[data-theme="dark"] .dash-backup-btn:hover {
  border-color: rgba(209, 86, 61, 0.55);
  color: #f6ad55;
  background: rgba(209, 86, 61, 0.14);
}

[data-theme="dark"] .streak-icon-wrap {
  background: rgba(209, 86, 61, 0.2);
  border-color: rgba(209, 86, 61, 0.4);
}

[data-theme="dark"] .dash-random-pick-btn {
  background: linear-gradient(135deg, #d1563d, #aa3922);
}


/* ==========================================================================
   全新移动端原生 App 底部浮动导航栏 (Bottom Tab Bar) & 手卷排版抽屉 (v1.9.4)
   ========================================================================== */
.app-bottom-nav {
  display: none; /* 桌面端/大屏默认不显示，完全交由顶栏操作 */
}

/* 手卷排版视觉设置抽屉 (Appearance Sheet) */
.appearance-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1190;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.appearance-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.appearance-drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;
  background: var(--bg-canvas);
  border-top: 1px solid var(--line-main);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18);
  transform: translateY(105%);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

@media (min-width: 769px) {
  /* 桌面端将手卷设置居中展示为精美卡片 */
  .appearance-drawer {
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    top: 50% !important;
    transform: translate(-50%, -46%) scale(0.96) !important;
    width: 480px !important;
    max-width: 90vw !important;
    border-radius: 16px !important;
    border: 1px solid var(--line-main) !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .appearance-drawer.open {
    transform: translate(-50%, -50%) scale(1) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

.appearance-drawer.open {
  transform: translateY(0);
}

.appearance-handle-bar {
  display: flex;
  justify-content: center;
  padding: 10px 0 4px;
}

.appearance-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--border-light, rgba(0,0,0,0.15));
}

.appearance-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 18px 12px;
  border-bottom: 1px solid var(--line-subtle);
}

.appearance-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.appearance-header-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.appearance-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-primary);
  margin: 0;
}

.appearance-sub {
  font-size: 11px;
  color: var(--ink-secondary);
}

.appearance-close {
  background: none;
  border: none;
  padding: 6px;
  border-radius: 50%;
  color: var(--ink-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.appearance-body {
  padding: 16px 18px calc(16px + env(safe-area-inset-bottom, 8px));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.appearance-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.appearance-sec-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-primary);
}

.appearance-sec-desc {
  font-size: 11px;
  color: var(--ink-muted, #7c7267);
  font-weight: 400;
}

.theme-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.theme-card-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--line-main);
  background: var(--bg-card);
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  position: relative;
}

.theme-card-btn.active {
  border-color: var(--vermilion, #b8332a);
  background: rgba(184, 51, 42, 0.05);
}

.theme-preview-box {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--line-main);
  flex-shrink: 0;
}

.parchment-preview {
  background: #f5f2e9;
}

.dark-preview {
  background: #1c1b18;
}

.theme-card-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.theme-card-text strong {
  font-size: 13px;
  color: var(--ink-primary);
}

.theme-card-text small {
  font-size: 11px;
  color: var(--ink-secondary);
}

.font-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.font-card-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--line-main);
  background: var(--bg-card);
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
}

.font-card-btn.active {
  border-color: var(--vermilion, #b8332a);
  background: rgba(184, 51, 42, 0.05);
}

.font-card-glyph {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: var(--bg-sidebar);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--vermilion, #b8332a);
  flex-shrink: 0;
}

.font-card-glyph.font-yasong { font-family: "Songti SC", "Noto Serif SC", serif; }
.font-card-glyph.font-kaiti { font-family: "Kaiti SC", "LXGW WenKai Screen", serif; }
.font-card-glyph.font-fangsong { font-family: "STFangsong", "FangSong", serif; }
.font-card-glyph.font-system { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; }

.font-card-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.font-card-meta strong {
  font-size: 13px;
  color: var(--ink-primary);
}

.font-card-meta small {
  font-size: 10px;
  color: var(--ink-secondary);
}

.font-stepper-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--bg-card);
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--line-main);
}

.stepper-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-sidebar);
  border: 1px solid var(--line-subtle);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-primary);
  cursor: pointer;
  transition: background 0.18s ease;
}

.stepper-btn:active {
  background: var(--line-main);
}

.stepper-reset {
  background: none;
  border: none;
  font-size: 12px;
  color: var(--ink-muted, #7c7267);
  cursor: pointer;
  padding: 4px 8px;
}

/* 核心移动端与平板竖屏排版优化与 App 规范 */
@media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) and (orientation: portrait), (min-width: 768px) and (max-width: 834px), (orientation: landscape) and (max-height: 500px) and (max-width: 960px) {
  .app-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: calc(100% - var(--header-h, 60px)) !important;
    display: flex !important;
    overflow: hidden !important;
  }

  .nav-tab-item {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
  }
  .app-bottom-nav {
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: calc(52px + env(safe-area-inset-bottom, 8px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 8px) !important;
    background: var(--bg-dock) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-top: 1px solid var(--line-main) !important;
    z-index: 1000 !important;
    box-shadow: 0 -2px 14px rgba(42, 34, 27, 0.05) !important;
  }

  .nav-bottom-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    height: 52px !important;
    max-width: 460px !important;
    margin: 0 auto !important;
    padding: 0 6px !important;
  }

  .nav-tab-item {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: none !important;
    border: none !important;
    outline: none !important;
    cursor: pointer !important;
    padding: 3px 0 !important;
    color: var(--ink-muted, #7c7267) !important;
    transition: color 0.22s ease, transform 0.18s ease !important;
    position: relative !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  .nav-tab-item:active {
    transform: scale(0.92) !important;
  }

  .nav-tab-icon {
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
  }

  .nav-tab-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    margin-top: 2px !important;
    letter-spacing: -0.2px !important;
  }

  .nav-tab-dot {
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background-color: var(--vermilion, #b8332a) !important;
    margin-top: 2px !important;
    opacity: 0 !important;
    transform: scale(0) !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .nav-tab-item.active {
    color: var(--vermilion, #b8332a) !important;
  }

  .nav-tab-item.active .nav-tab-dot {
    opacity: 1 !important;
    transform: scale(1) !important;
  }

  /* 移动端播放坞浮动在底部导航栏正上方 */
  .player-dock {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(52px + env(safe-area-inset-bottom, 8px)) !important;
    z-index: 990 !important;
    padding: 5px 10px 6px !important;
    border-top: 1px solid var(--line-subtle) !important;
    box-shadow: 0 -3px 12px rgba(42, 34, 27, 0.06) !important;
  }

  /* 主舞台留足呼吸边距，彻底杜绝内容被播放坞遮挡 */
  .main-stage {
    padding-bottom: calc(230px + env(safe-area-inset-bottom, 12px)) !important;
  }

  /* 移动端顶栏精炼化：隐藏 cramped 的 6 键辅助操作行与旧汉堡按钮 */
  .header-actions {
    display: none !important;
  }

  #btn-mobile-menu {
    display: none !important;
  }

  .app-header {
    height: auto !important;
    min-height: unset !important;
    padding: 8px 12px 6px !important;
    row-gap: 6px !important;
  }

  .brand-voice-info {
    display: none !important; /* 节省移动端竖向空间 */
  }

  .brand-main-title {
    font-size: 15px !important;
  }

  .subject-pill-group {
    width: 100% !important;
    justify-content: space-between !important;
    gap: 4px !important;
  }

  .subject-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 5px 3px !important;
    justify-content: center !important;
    font-size: 11.5px !important;
  }

  .subject-btn .count-tag {
    display: none !important; /* 移动端药丸只保留科目名，去除挤占空间的计数标签 */
  }

  /* 修复双轨按钮溢出重叠 Bug */
  .track-switcher-wrap {
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 6px !important;
  }

  .track-tabs {
    width: 100% !important;
    display: flex !important;
    box-sizing: border-box !important;
  }

  .track-tab-btn {
    flex: 1 1 50% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    padding: 7px 4px !important;
    justify-content: center !important;
  }

  .track-tab-btn span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .track-tab-full {
    display: none !important;
  }

  .track-tab-short {
    display: inline !important;
  }
}

/* Kubai 矢量图标自适应尺寸与平滑渲染 */
.kubai-icon-svg {
  display: block;
  width: 22px;
  height: 20px;
  overflow: visible;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-tab-item:hover .kubai-icon-svg {
  transform: translateY(-1px);
}

.nav-tab-item:active .kubai-icon-svg {
  transform: scale(0.92);
}

/* 播放栏平滑退下/隐藏类 */
.player-dock.dock-receded {
  transform: translateY(140%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease !important;
}

.player-dock {
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease !important;
}

/* ==========================================================================
   未播放时驻留的精致圆形播放键 (FAB) & 播放时平滑弹出胶囊 (v1.9.4)
   ========================================================================== */
.dock-fab-play {
  position: fixed;
  right: 18px;
  bottom: calc(64px + env(safe-area-inset-bottom, 8px));
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c53a30, #9f2a22);
  color: #ffffff;
  border: none;
  cursor: pointer;
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(184, 51, 42, 0.42), 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: all 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  animation: fabGlow 3s infinite;
  user-select: none;
  -webkit-user-select: none;
}

@keyframes fabGlow {
  0% { box-shadow: 0 0 0 0 rgba(184, 51, 42, 0.45), 0 6px 18px rgba(184, 51, 42, 0.35); }
  70% { box-shadow: 0 0 0 9px rgba(184, 51, 42, 0), 0 6px 18px rgba(184, 51, 42, 0.35); }
  100% { box-shadow: 0 0 0 0 rgba(184, 51, 42, 0), 0 6px 18px rgba(184, 51, 42, 0.35); }
}

.dock-fab-play:hover {
  transform: scale(1.08);
}

.dock-fab-play:active {
  transform: scale(0.92);
}

.fab-play-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
}

.fab-play-tooltip {
  display: none;
}

/* 当播放坞收起时 */
.player-dock.dock-collapsed {
  transform: translateY(140%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 当播放坞展开时隐藏圆键 */
body.dock-expanded .dock-fab-play {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: scale(0.4) !important;
}

/* 当抽屉展开时，圆键也彻底退下 */
.dock-fab-play.dock-receded {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(60px) scale(0.5) !important;
}

.hud-collapse-dock-btn {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid var(--line-subtle);
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 11px;
  color: var(--ink-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: all 0.2s ease;
}

.hud-collapse-dock-btn:hover {
  background: var(--line-main);
  color: var(--ink-primary);
}

@media (min-width: 769px) {
  .dock-fab-play {
    bottom: 24px;
    right: 28px;
    width: 52px;
    height: 52px;
  }
}

/* ==========================================================================
   底栏正中突出播放主按键 & 全新 5 Tab 结构 (v1.9.5)
   ========================================================================== */
.nav-tab-center-play {
  flex: 1.15 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  margin-top: -14px !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
  outline: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  z-index: 1010 !important;
}

.center-play-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c53a30, #9f2a22);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(184, 51, 42, 0.42), 0 2px 5px rgba(0, 0, 0, 0.12);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease;
}

.nav-tab-center-play:active .center-play-circle {
  transform: scale(0.92);
}

.center-play-svg {
  width: 19px;
  height: 19px;
  margin-left: 2px;
}

.center-pause-svg {
  width: 18px;
  height: 18px;
}

.nav-tab-center-play .nav-tab-label {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: var(--vermilion, #b8332a) !important;
  margin-top: 2px !important;
}

/* 播放坞折叠与展开状态 */
.player-dock.dock-collapsed {
  transform: translateY(140%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease !important;
}

/* 播放坞退下状态（遇到侧边栏、看板、设置等抽屉） */
.player-dock.dock-receded {
  transform: translateY(140%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   方案 C：播放控制坞与底部 5-Tab 导航栏互斥吸附替换机制 (v1.9.6)
   ========================================================================== */

/* 动态 SVG 矢量图标基础样式与微交互动效 */
.svg-tab-icon {
  width: 22px;
  height: 22px;
  display: block;
  overflow: visible;
  transition: transform 0.25s cubic-bezier(0.2, 1, 0.3, 1), stroke 0.2s ease;
}

/* 1. 题库动效：考点纸张滑出 */
.svg-folder .folder-paper,
.svg-folder .folder-line {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), fill-opacity 0.25s ease;
}

.nav-tab-item.active .svg-folder .folder-paper,
.nav-tab-item:active .svg-folder .folder-paper,
.nav-tab-item:hover .svg-folder .folder-paper {
  transform: translateY(-3.5px);
  fill-opacity: 0.45;
}

.nav-tab-item.active .svg-folder .folder-line,
.nav-tab-item:active .svg-folder .folder-line,
.nav-tab-item:hover .svg-folder .folder-line {
  transform: translateY(-3.5px);
}

/* 2. 自测动效：瞳孔放大聚焦与眨眼微动效 */
.svg-eye .eye-pupil {
  transform-origin: 12px 12px;
  transition: transform 0.25s cubic-bezier(0.2, 1, 0.3, 1), fill 0.2s ease;
}

.svg-eye .eye-contour {
  transform-origin: 12px 12px;
  transition: transform 0.18s ease;
}

.nav-tab-item.active .svg-eye .eye-pupil {
  transform: scale(1.35);
  fill: var(--vermilion, #b8332a);
}

.nav-tab-item:active .svg-eye .eye-contour {
  transform: scaleY(0.25);
}

/* 3. 看板动效：三根柱状生长 */
.svg-chart .chart-bar {
  transform-origin: bottom;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-tab-item.active .svg-chart .bar-1 {
  transform: scaleY(1.3);
  transform-origin: 6px 20px;
}

.nav-tab-item.active .svg-chart .bar-2 {
  transform: scaleY(1.15);
  transform-origin: 12px 20px;
}

.nav-tab-item.active .svg-chart .bar-3 {
  transform: scaleY(1.4);
  transform-origin: 18px 20px;
}

/* 4. 设置动效：齿轮顺时针平滑旋转 60度 */
.svg-gear {
  transform-origin: 12px 12px;
  transition: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1);
}

.nav-tab-item.active .svg-gear,
.nav-tab-item:hover .svg-gear,
.nav-tab-item:active .svg-gear {
  transform: rotate(60deg);
}

/* 全新【功能与研读设置中心】抽屉 (Settings Sheet) */
.settings-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1190;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.settings-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.settings-drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;
  background: var(--bg-canvas);
  border-top: 1px solid var(--line-main);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18);
  transform: translateY(105%);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

.settings-drawer.open {
  transform: translateY(0);
}

@media (min-width: 769px) {
  .settings-drawer {
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    top: 50% !important;
    transform: translate(-50%, -46%) scale(0.96) !important;
    width: 480px !important;
    max-width: 90vw !important;
    border-radius: 16px !important;
    border: 1px solid var(--line-main) !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none !important;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.25s !important;
  }

  .settings-drawer.open {
    transform: translate(-50%, -50%) scale(1) !important;
    opacity: 1 !important;
    visibility: visible;
    pointer-events: auto !important;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s !important;
  }
}

.settings-handle-bar {
  display: flex;
  justify-content: center;
  padding: 10px 0 4px;
}

.settings-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--border-light, rgba(0,0,0,0.15));
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 18px 12px;
  border-bottom: 1px solid var(--line-subtle);
}

.settings-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.settings-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-primary);
  margin: 0;
}

.settings-sub {
  font-size: 11px;
  color: var(--ink-secondary);
}

.settings-close {
  background: none;
  border: none;
  padding: 6px;
  border-radius: 50%;
  color: var(--ink-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-body {
  padding: 16px 18px calc(16px + env(safe-area-inset-bottom, 8px));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.settings-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-sec-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-primary);
}

.settings-sec-desc {
  font-size: 11px;
  color: var(--ink-muted, #7c7267);
  font-weight: 400;
}

.settings-info-box {
  line-height: 1.65;
  font-size: 12px;
  color: var(--ink-secondary);
  background: var(--bg-card);
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line-subtle);
}

.settings-shortcut-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.shortcut-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(184, 51, 42, 0.06);
  border: 1px solid var(--line-main);
  font-size: 11px;
  color: var(--ink-secondary);
}

.shortcut-chip kbd {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-primary);
}


/* ==========================================================================
   Scheme B · 移动端与 iPad 竖屏优雅分层播控坞
   ========================================================================== */

@media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) and (orientation: portrait), (min-width: 768px) and (max-width: 834px), (orientation: landscape) and (max-height: 500px) and (max-width: 960px) {
  /* 1. 移动端 App 底部 5 导航主栏 */
  .app-bottom-nav {
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: calc(52px + env(safe-area-inset-bottom, 8px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 8px) !important;
    background: var(--bg-dock) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-top: 1px solid var(--line-main) !important;
    z-index: 990 !important;
    box-shadow: 0 -2px 14px rgba(42, 34, 27, 0.05) !important;
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease !important;
  }

  /* 2. 移动端播放控制坞 (初始收起藏于屏幕底外) */
  .player-dock {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1000 !important;
    padding: 3px 12px calc(8px + env(safe-area-inset-bottom, 10px)) !important;
    background: var(--bg-dock) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-top: 1px solid var(--line-main) !important;
    box-shadow: 0 -6px 24px rgba(42, 34, 27, 0.1) !important;
    transform: translateY(120%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease !important;
  }

  /* 展开态：控制坞滑入顶替底栏，底栏滑下隐藏 */
  body.dock-expanded .player-dock {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.dock-expanded .app-bottom-nav {
    transform: translateY(140%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* 抽屉打开时，底栏与控制坞均平滑下沉避让 */
  .player-dock.dock-receded,
  .app-bottom-nav.dock-receded {
    transform: translateY(140%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* 页面底边距防遮挡垫高 */
  .main-stage {
    padding-bottom: calc(130px + env(safe-area-inset-bottom, 16px)) !important;
  }

  body.dock-expanded .main-stage {
    padding-bottom: calc(190px + env(safe-area-inset-bottom, 16px)) !important;
  }
}

/* ==========================================================================
   播控坞分层视觉架构 (Row 1: Meta + Row 2: Timeline + Row 3: 5 Transport)
   ========================================================================== */
.player-dock {
  box-sizing: border-box;
}

/* 顶部触摸收起条 */
.dock-top-bar {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 2px;
}

.dock-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 14px;
  cursor: pointer;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.handle-bar-pill {
  width: 36px;
  height: 3.5px;
  border-radius: 2px;
  background: var(--ink-secondary);
  opacity: 0.35;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.dock-drag-handle:active .handle-bar-pill {
  opacity: 0.8;
  transform: scaleY(1.3);
}

/* 第一排：考题信息与辅助操作行 */
.dock-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 6px;
  min-height: 28px;
  box-sizing: border-box;
}

.dock-meta-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.dock-meta-left .hud-track-badge {
  display: inline-flex;
  align-items: center;
  gap: 3.5px;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  background: var(--bg-sidebar);
  border: 1px solid var(--line-subtle);
  color: var(--ink-primary);
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.15s ease;
}

.dock-meta-left .hud-track-badge:active {
  transform: scale(0.95);
  background: rgba(184, 51, 42, 0.08);
}

.hud-track-dot {
  width: 5.5px;
  height: 5.5px;
  border-radius: 50%;
  background: var(--vermilion, #b8332a);
}

.dock-meta-left .hud-title-text {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--ink-primary) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1;
  min-width: 0;
  letter-spacing: -0.2px;
}

.dock-meta-right {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.hud-outline-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2.5px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  background: var(--bg-sidebar);
  border: 1px solid var(--line-subtle);
  color: var(--ink-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.hud-outline-pill-btn:hover,
.hud-outline-pill-btn:active {
  border-color: var(--vermilion, #b8332a);
  color: var(--vermilion, #b8332a);
}

.hud-repeat-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2.5px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--amber, #b06917);
  background: var(--amber-soft, rgba(176, 105, 23, 0.12));
  border: 1px solid rgba(176, 105, 23, 0.35);
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.18s ease;
}

.hud-repeat-pill.is-gap-waiting {
  color: var(--vermilion, #b8332a);
  background: rgba(184, 51, 42, 0.1);
  border-color: rgba(184, 51, 42, 0.35);
}

.live-repeat-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 1.5px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--amber, #b06917);
  background: var(--amber-soft, rgba(176, 105, 23, 0.14));
  border: 1px solid rgba(176, 105, 23, 0.36);
  white-space: nowrap;
}

.live-repeat-badge.is-gap-waiting {
  color: var(--vermilion, #b8332a);
  background: rgba(184, 51, 42, 0.12);
  border-color: rgba(184, 51, 42, 0.38);
}

[data-theme="dark"] .hud-repeat-pill,
[data-theme="dark"] .live-repeat-badge {
  color: #f3b868;
  background: rgba(243, 184, 104, 0.14);
  border-color: rgba(243, 184, 104, 0.35);
}

[data-theme="dark"] .hud-repeat-pill.is-gap-waiting,
[data-theme="dark"] .live-repeat-badge.is-gap-waiting {
  color: #ff8a75;
  background: rgba(217, 98, 72, 0.2);
  border-color: rgba(217, 98, 72, 0.5);
}

/* 大号醒目【收起 ∨】按钮 */
.dock-collapse-close-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  background: rgba(184, 51, 42, 0.08) !important;
  color: var(--vermilion, #b8332a) !important;
  border: 1px solid rgba(184, 51, 42, 0.3) !important;
  border-radius: 12px !important;
  padding: 2.5px 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.dock-collapse-close-btn:hover,
.dock-collapse-close-btn:active {
  background: var(--vermilion, #b8332a) !important;
  color: #ffffff !important;
  transform: scale(0.95);
}

/* 第二排：细腻时间进度条 */
.dock-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 3px 0;
  padding: 0 2px;
  box-sizing: border-box;
}

.dock-progress-row .progress-time {
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink-muted, #7c7267);
  font-weight: 500;
  min-width: 32px;
}

.dock-progress-row .progress-track-wrapper {
  flex: 1;
  height: 18px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: pan-x;
}

.dock-progress-row .progress-bar-bg {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--line-subtle);
  position: relative;
  overflow: hidden;
}

.dock-progress-row .progress-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: var(--vermilion, #b8332a);
  transition: width 0.1s linear;
}

/* 第三排：核心 5 大键居中舒展排布 (盲操极佳，绝无拥挤) */
.dock-controls-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 2px 0 0 !important;
}

.dock-core-transport {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 360px !important;
  margin: 0 auto !important;
}

.dock-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  color: var(--ink-secondary) !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease !important;
}

.dock-btn svg {
  width: 19px !important;
  height: 19px !important;
}

.dock-btn:active {
  transform: scale(0.88) !important;
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--ink-primary) !important;
}

/* 核心正中大红圆播放按键 */
.dock-btn-play {
  width: 50px !important;
  height: 50px !important;
  background: linear-gradient(135deg, #c53a30, #9f2a22) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(184, 51, 42, 0.38) !important;
  margin: 0 4px !important;
}

.dock-btn-play svg {
  width: 22px !important;
  height: 22px !important;
  fill: #ffffff !important;
}

.dock-btn-play:active {
  transform: scale(0.92) !important;
  box-shadow: 0 2px 8px rgba(184, 51, 42, 0.3) !important;
}


.dock-btn-tool {
  width: auto !important;
  min-width: 50px !important;
  height: 34px !important;
  padding: 0 10px !important;
  border-radius: 17px !important;
  gap: 4px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  background: var(--bg-sidebar) !important;
  border: 1px solid var(--line-subtle) !important;
  color: var(--ink-secondary) !important;
}

.dock-btn-tool .mode-text {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.2px;
}

.dock-btn-tool:active {
  transform: scale(0.9) !important;
  border-color: var(--vermilion, #b8332a) !important;
  color: var(--vermilion, #b8332a) !important;
}

.dock-core-transport {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 440px !important;
  margin: 0 auto !important;
  padding: 0 4px !important;
}


/* ==========================================================================
   Claude UI Engineering Integration (Typography & Pure-Flat 0.5px Details)
   ========================================================================== */
.progress-time,
.dock-time,
.pill-mode-btn,
.speed-btn,
.item-badge-pill,
.item-score-pill,
.dash-metric-number,
.dash-streak-number {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums !important;
}

/* Three-Color Semantic Highlights (Terracotta + Slate Blue + Botanical Green) */
.quote-gold-core,
.quote-highlight {
  color: var(--accent-slate) !important;
  font-weight: 600 !important;
}

.kw-red,
.keyword-highlight {
  color: var(--vermilion) !important;
  font-weight: 600 !important;
}

.timeline-period,
.era-highlight {
  color: var(--pine) !important;
  font-weight: 600 !important;
}


/* ==========================================================================
   Claude UI Anti-Slop: 彻底移除首屏高度重复的累赘卡片，直接畅读正文
   ========================================================================== */
.exam-spec-banner {
  display: none !important; /* 顶层已有大题属性徽章，绝不再重复堆叠第二层 */
}

.exam-title-box {
  display: none !important; /* 顶层已有大标题，绝不再重复第 3 次显示大框 */
}

/* 顶层属性看板纯平化与克制留白 */
.stage-header-card {
  background-color: var(--bg-card) !important;
  border: 0.5px solid var(--line-main) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  padding: 16px 18px 14px !important;
  margin-bottom: 14px !important;
}

.stage-question-title {
  font-family: var(--font-serif) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--ink-primary) !important;
  letter-spacing: -0.015em !important;
  line-height: 1.35 !important;
  margin: 8px 0 12px !important;
}

/* 规范正文卡片纯平美学 */
.structure-card,
.exam-section-card,
.logic-block-card,
.global-framework-box {
  border: 0.5px solid var(--line-main) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  background: var(--bg-card) !important;
}







/* ==============================================================
   Liquid Glass (液态玻璃) 光学材质系统 · 旗舰增强全套 (v2.0.6)
   ============================================================== */

/* --------------------------------------------------------------
   1. 底部随身视听播放坞 (修复 iPhone 飘飞截断 + 桌面端优雅悬浮)
   -------------------------------------------------------------- */
.player-dock {
  background: var(--glass-dock-bg) !important;
  backdrop-filter: var(--glass-dock-blur) !important;
  -webkit-backdrop-filter: var(--glass-dock-blur) !important;
  border: 1px solid var(--glass-dock-border) !important;
  box-shadow: var(--glass-dock-shadow) !important;
  z-index: 990 !important;
  display: flex !important;
  flex-direction: column !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  overflow: hidden !important;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease !important;
}

/* 顶部微弧纳米高光刃口 */
.player-dock::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 8% !important;
  right: 8% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.95) 50%, transparent 100%) !important;
  pointer-events: none !important;
}
[data-theme="dark"] .player-dock::before {
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%) !important;
}

/* 桌面与平铺大屏 (>= 769px)：居中悬浮胶囊托盘 */
@media (min-width: 769px) {
  .player-dock {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    bottom: 24px !important;
    width: calc(100% - 48px) !important;
    max-width: 860px !important;
    border-radius: 32px !important;
    padding: 12px 22px 14px !important;
  }
  .player-dock.dock-receded,
  .player-dock.dock-collapsed {
    transform: translate(-50%, calc(100% + 40px)) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* Desktop (>= 1367px) 底栏隐藏时播控胶囊常驻可见，防止桌面端失去播放/倍速/循环入口 */
@media (min-width: 1367px) {
  .player-dock.dock-collapsed:not(.dock-receded) {
    transform: translateX(-50%) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  body:has(.app-body:not(.sidebar-collapsed)) .player-dock {
    left: calc(50% + 140px) !important;
    max-width: min(820px, calc(100vw - 340px)) !important;
  }
  .dock-collapse-close-btn {
    display: none !important;
  }
}

/* 移动端与 iPad 竖屏：双向锁定且悬浮在底栏正上方 */
@media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) and (orientation: portrait), (min-width: 768px) and (max-width: 834px), (orientation: landscape) and (max-height: 500px) and (max-width: 960px) {
  .player-dock {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    bottom: calc(58px + env(safe-area-inset-bottom, 8px)) !important;
    max-width: 680px !important;
    margin: 0 auto !important;
    border-radius: 24px !important;
    padding: 10px 14px 12px !important;
    box-sizing: border-box !important;
  }
  body.dock-expanded .player-dock {
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .player-dock.dock-receded,
  .player-dock.dock-collapsed {
    transform: translateY(calc(100% + 30px)) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* 2. 播放/暂停大宝石按键 (VisionOS Specular Play Hub) */
.dock-btn-play {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #e98668 0%, var(--vermilion) 55%, #b65234 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: 
    inset 0 1.2px 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 0 14px 0 rgba(255, 255, 255, 0.25),
    inset 0 -2px 3px 0 rgba(0, 0, 0, 0.2),
    0 6px 20px -2px rgba(217, 119, 87, 0.48),
    0 2px 6px 0 rgba(0, 0, 0, 0.08) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dock-btn-play:hover {
  transform: scale(1.06) translateY(-1px) !important;
  filter: brightness(1.08) !important;
  box-shadow: 
    inset 0 1.5px 1.2px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 18px 0 rgba(255, 255, 255, 0.35),
    0 10px 26px -2px rgba(217, 119, 87, 0.58) !important;
}

.dock-btn-play:active {
  transform: scale(0.95) !important;
}

/* 3. 辅助控制按键 (VisionOS 纯水晶圆按钮) */
.dock-btn:not(.dock-btn-play) {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: var(--glass-btn-bg) !important;
  border: 1px solid var(--glass-btn-border) !important;
  backdrop-filter: blur(12px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
  box-shadow: var(--glass-btn-shadow) !important;
  color: var(--ink-secondary) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dock-btn:not(.dock-btn-play):hover {
  background: var(--glass-btn-hover) !important;
  color: var(--ink-primary) !important;
  transform: translateY(-1.5px) scale(1.04) !important;
  box-shadow: inset 0 1px 0.8px 0 rgba(255, 255, 255, 0.9), 0 4px 10px -2px rgba(0, 0, 0, 0.1) !important;
}

.dock-btn:not(.dock-btn-play):active {
  transform: scale(0.94) !important;
}

/* 4. 倍速与循环模式小胶囊 */
.pill-mode-btn, .dock-btn-tool {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 12px !important;
  border-radius: 20px !important;
  background: var(--glass-btn-bg) !important;
  border: 1px solid var(--glass-btn-border) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: var(--glass-btn-shadow) !important;
  color: var(--ink-secondary) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.pill-mode-btn:hover, .dock-btn-tool:hover {
  background: var(--glass-btn-hover) !important;
  color: var(--ink-primary) !important;
  transform: translateY(-1px) !important;
}

.pill-mode-btn.active, .dock-btn-tool.active {
  background: var(--vermilion-soft) !important;
  color: var(--vermilion) !important;
  border-color: rgba(217, 119, 87, 0.3) !important;
}

/* 5. 双轨切换槽 (VisionOS Track Tabs) */
.track-tabs {
  display: inline-flex !important;
  background: var(--glass-trough-bg) !important;
  border: 1px solid var(--glass-trough-border) !important;
  border-radius: 14px !important;
  padding: 4px !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  gap: 6px !important;
}

.track-tab-btn {
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  padding: 9px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink-secondary) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.track-tab-btn.active {
  background: var(--glass-crystal-card) !important;
  border: 1px solid var(--glass-crystal-border) !important;
  box-shadow: var(--glass-crystal-shadow) !important;
  color: var(--vermilion) !important;
  font-weight: 700 !important;
}

/* 6. 科目分段切换胶囊槽 (VisionOS Segmented Control) */
.subject-pill-group {
  display: inline-flex !important;
  background: var(--glass-trough-bg) !important;
  border: 1px solid var(--glass-trough-border) !important;
  border-radius: 36px !important;
  padding: 4px !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  gap: 4px !important;
}

.subject-btn {
  border: 1px solid transparent !important;
  border-radius: 30px !important;
  padding: 7px 18px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--ink-secondary) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.subject-btn.active {
  background: var(--glass-crystal-card) !important;
  border: 1px solid var(--glass-crystal-border) !important;
  box-shadow: var(--glass-crystal-shadow) !important;
  color: var(--vermilion) !important;
}

.subject-btn.active .count-tag {
  background: var(--vermilion-soft) !important;
  color: var(--vermilion) !important;
}

/* 7. 顶部主导航栏 (Lumno Glass Header) */
.app-header {
  background: var(--glass-dock-bg) !important;
  backdrop-filter: var(--glass-dock-blur) !important;
  -webkit-backdrop-filter: var(--glass-dock-blur) !important;
  border-bottom: 1px solid var(--glass-dock-border) !important;
  box-shadow: 0 4px 16px -2px rgba(45, 36, 28, 0.04) !important;
}

/* --------------------------------------------------------------
   8. 考点目录侧滑抽屉 (图2) 全套 Liquid Glass 玻璃材质升级
   -------------------------------------------------------------- */

/* 侧滑抽屉底座 */
.sidebar {
  background: var(--glass-dock-bg) !important;
  backdrop-filter: var(--glass-dock-blur) !important;
  -webkit-backdrop-filter: var(--glass-dock-blur) !important;
  border-right: 1px solid var(--glass-dock-border) !important;
  box-shadow: 4px 0 28px rgba(45, 36, 28, 0.08) !important;
}

/* 侧栏顶栏与收起按钮 */
.sidebar-header-row {
  border-bottom: 1px solid var(--glass-trough-border) !important;
}
.sidebar-close-btn {
  background: var(--glass-btn-bg) !important;
  border: 1px solid var(--glass-btn-border) !important;
  border-radius: 20px !important;
  padding: 4px 12px !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: var(--glass-btn-shadow) !important;
  color: var(--ink-secondary) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.sidebar-close-btn:hover {
  background: var(--glass-btn-hover) !important;
  color: var(--ink-primary) !important;
  transform: translateY(-1px) !important;
}

/* 搜索框 (VisionOS 凹槽水晶) */
.sidebar-search-box {
  border-bottom: 1px solid var(--glass-trough-border) !important;
}
.search-input-wrap {
  background: var(--glass-trough-bg) !important;
  border: 1px solid var(--glass-trough-border) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.search-input-wrap:focus-within {
  background: var(--glass-crystal-card) !important;
  border-color: var(--vermilion-border) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03), 0 0 12px var(--vermilion-soft) !important;
}

/* 筛选胶囊群 (VisionOS 纯水晶小药丸) */
.filter-pills {
  gap: 6px !important;
}
.filter-pill {
  border-radius: 20px !important;
  background: var(--glass-btn-bg) !important;
  border: 1px solid var(--glass-btn-border) !important;
  color: var(--ink-secondary) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: var(--glass-btn-shadow) !important;
  padding: 5px 12px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.filter-pill:hover {
  background: var(--glass-btn-hover) !important;
  color: var(--ink-primary) !important;
  transform: translateY(-1px) !important;
}
.filter-pill.active {
  background: var(--vermilion-soft) !important;
  color: var(--vermilion) !important;
  border-color: rgba(217, 119, 87, 0.35) !important;
  box-shadow: inset 0 1px 0.8px rgba(255, 255, 255, 0.85), 0 2px 8px rgba(217, 119, 87, 0.2) !important;
}

/* 考点列表卡片 (Tactile Optical Glass 拟真实体晶体卡片) */
.question-card-item {
  position: relative !important;
  border-radius: 18px !important;
  background: var(--glass-crystal-card) !important;
  border: 1px solid var(--glass-crystal-border) !important;
  backdrop-filter: blur(14px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(190%) !important;
  box-shadow: 
    inset 0 0.8px 0.5px 0 rgba(255, 255, 255, 0.85),
    inset 1px 1px 2px 0 rgba(199, 210, 254, 0.25),
    0 3px 10px -2px rgba(45, 36, 28, 0.06) !important;
  margin-bottom: 10px !important;
  padding: 14px 16px !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.question-card-item:hover {
  transform: translateY(-2px) !important;
  box-shadow: 
    inset 0 1px 0.8px 0 rgba(255, 255, 255, 0.95),
    inset 1.5px 1.5px 3px 0 rgba(199, 210, 254, 0.35),
    0 8px 20px -3px rgba(45, 36, 28, 0.1) !important;
}
.question-card-item.active {
  border-color: rgba(217, 119, 87, 0.45) !important;
  box-shadow: 
    inset 0 1px 0.8px 0 rgba(255, 255, 255, 0.95),
    inset 3px 0 0 0 var(--vermilion),
    0 6px 18px -2px rgba(217, 119, 87, 0.2) !important;
}

/* 考点卡片内部小微晶胶囊 */
.tier-badge, .score-badge, .card-mastery-badge, .card-audio-status {
  border-radius: 12px !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
}
[data-theme="dark"] .tier-badge, 
[data-theme="dark"] .score-badge, 
[data-theme="dark"] .card-mastery-badge, 
[data-theme="dark"] .card-audio-status {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* 侧边栏底部 */
.sidebar-footer {
  background: var(--glass-trough-bg) !important;
  border-top: 1px solid var(--glass-trough-border) !important;
  backdrop-filter: blur(12px) !important;
}
.app-version-badge, .btn-force-refresh {
  border-radius: 20px !important;
}

/* --------------------------------------------------------------
   9. 正文多板块平滑 R 角 (Squircle) 与优雅胶囊
   -------------------------------------------------------------- */

/* 顶部考题规格 Chip 栏全量胶囊化 */
.exam-spec-banner {
  gap: 8px !important;
  margin-bottom: 20px !important;
}
.spec-chip {
  border-radius: 20px !important;
  padding: 6px 14px !important;
  background: var(--glass-crystal-card) !important;
  border: 1px solid var(--glass-crystal-border) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: var(--glass-crystal-shadow) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* 正文各分论点卡片 (Apple 级平滑大圆角 22px) */
.exam-section-card {
  border-radius: 22px !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--line-main) !important;
  box-shadow: 0 4px 20px -3px rgba(45, 36, 28, 0.04) !important;
  padding: 22px 24px !important;
  margin-bottom: 22px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.exam-section-card:hover {
  box-shadow: 0 8px 24px -4px rgba(45, 36, 28, 0.07) !important;
}

/* 卡片标题大胶囊徽章 (【引论 · 立论破题】等) */
.sec-badge {
  border-radius: 30px !important;
  padding: 5px 16px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  border: 1px solid rgba(217, 119, 87, 0.25) !important;
  box-shadow: inset 0 1px 0.8px rgba(255, 255, 255, 0.6) !important;
}

/* 立论破题句与论证引语卡片平滑圆角 16px */
.section-thesis-box {
  border-radius: 16px !important;
  padding: 14px 18px !important;
  border: 1px solid var(--vermilion-border) !important;
  background: linear-gradient(135deg, rgba(217, 119, 87, 0.06) 0%, rgba(217, 119, 87, 0.02) 100%) !important;
  margin-bottom: 16px !important;
}

/* 【立论破题句】微晶小胶囊 */
.thesis-pill {
  border-radius: 20px !important;
  padding: 3px 10px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  background: var(--vermilion-soft) !important;
  color: var(--vermilion) !important;
  border: 1px solid rgba(217, 119, 87, 0.25) !important;
  margin-right: 6px !important;
}

/* 沉浸式阅读底板内衬留白避让 */
.paper-container {
  padding-bottom: 140px !important;
}
@media (max-width: 768px) {
  .paper-container {
    padding-bottom: 160px !important;
  }
}



/* ==========================================================================
   方案 A 经典复原与地毯式 Bug 修复加固 (v2.4.0 稳定版)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Bug 修复 1：移动端顶部导航栏溢出破损 (彻底消灭右侧眼睛方块截断)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .app-header {
    height: 48px !important;
    min-height: 48px !important;
    margin: 6px 8px 8px 8px !important;
    width: calc(100% - 16px) !important;
    padding: 0 5px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    border-radius: 9999px !important;
    background: var(--bg-card, #ffffff) !important;
    border: 1px solid var(--line-main, rgba(0, 0, 0, 0.08)) !important;
    box-shadow: 0 2px 10px rgba(45, 36, 28, 0.05) !important;
  }

  [data-theme="dark"] .app-header {
    background: var(--bg-card, #23211e) !important;
    border: 1px solid var(--line-main, rgba(255, 255, 255, 0.08)) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
  }

  .brand-title-wrap, .brand-voice-info, .brand-icon {
    display: none !important;
  }

  /* 彻底隐藏 brand-section，避免在 <=768px 下挤压学科按钮 */
  .brand-section {
    display: none !important;
  }

  .brand-section .mobile-menu-toggle {
    display: none !important;
  }

  /* 中间：学科切换 */
  .subject-pill-group {
    order: 2 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    gap: 2px !important;
    margin: 0 4px 0 0 !important;
    padding: 0 !important;
  }

  .subject-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 32px !important;
    padding: 0 4px !important;
    border-radius: 9999px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    border: 1px solid transparent !important;
    white-space: nowrap !important;
  }

  .subject-btn .count-tag {
    display: none !important;
  }

  .subject-btn.active {
    background: var(--vermilion, #d97757) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(217, 119, 87, 0.35) !important;
  }

  /* 隐藏桌面端功能按钮 */
  .header-actions {
    display: flex !important;
    order: 3 !important;
    flex: 0 0 auto !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .header-actions #btn-font-dec,
  .header-actions #btn-font-inc,
  .header-actions #btn-study-dashboard,
  .header-actions #btn-cloze-mode,
  .header-actions #btn-font-switch {
    display: none !important;
  }

  /* 右侧浅色/深色切换按钮 */
  .header-actions #btn-theme-toggle {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 9999px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--bg-canvas, #faf7f0) !important;
    border: 1px solid var(--line-main, rgba(0, 0, 0, 0.1)) !important;
  }

  .header-actions .theme-text {
    display: none !important;
  }
}

@media (max-width: 430px) {
  .subject-pill-group .subject-btn svg {
    display: none !important;
  }
}

/* iPad 竖屏顶栏适配 (769px ~ 1024px 竖屏)：单行弹性排布，全称药丸舒适饱满 */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait), (min-width: 769px) and (max-width: 834px) {
  .app-header {
    height: 52px !important;
    min-height: 52px !important;
    margin: 8px 12px 10px !important;
    width: calc(100% - 24px) !important;
    padding: 0 12px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    border-radius: 26px !important;
    background: var(--bg-card, #ffffff) !important;
    border: 1px solid var(--line-main, rgba(0, 0, 0, 0.08)) !important;
    box-shadow: 0 2px 10px rgba(45, 36, 28, 0.05) !important;
  }

  [data-theme="dark"] .app-header {
    background: var(--bg-card, #23211e) !important;
    border: 1px solid var(--line-main, rgba(255, 255, 255, 0.08)) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
  }

  .brand-section {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
  }

  .brand-section .mobile-menu-toggle {
    display: inline-flex !important;
  }

  .brand-icon {
    display: flex !important;
    width: 28px !important;
    height: 28px !important;
  }

  .brand-title-wrap {
    display: flex !important;
    flex-direction: column !important;
  }

  .brand-main-title {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  .brand-sub-badge,
  .brand-voice-info {
    display: none !important;
  }

  .subject-pill-group {
    order: 2 !important;
    flex: 0 1 auto !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--bg-sidebar, #f4efe6) !important;
    border-radius: 20px !important;
    gap: 4px !important;
    margin: 0 8px !important;
    padding: 3px !important;
  }

  .subject-btn {
    flex: 0 1 auto !important;
    height: 32px !important;
    padding: 0 10px !important;
    border-radius: 16px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
  }

  .subject-name-full {
    display: inline !important;
  }

  .subject-name-mobile {
    display: none !important;
  }

  .subject-btn .count-tag {
    display: inline-block !important;
    font-size: 10px !important;
    padding: 1px 5px !important;
  }

  .header-actions {
    order: 3 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
  }

  .header-actions #btn-theme-toggle {
    display: inline-flex !important;
  }
}

/* --------------------------------------------------------------------------
   Bug 修复 2：抽屉与遮罩层级穿透修复 (确保抽屉全屏最顶层)
   -------------------------------------------------------------------------- */
.sidebar-backdrop, .appearance-backdrop, .outline-drawer-backdrop {
  z-index: 2400 !important;
}

.sidebar, .appearance-drawer, .outline-drawer {
  z-index: 2500 !important;
}

/* --------------------------------------------------------------------------
   Bug 修复 3：底部安全避让留白 (保证正文滑到底部绝不被底栏/悬浮托盘遮盖)
   -------------------------------------------------------------------------- */
.paper-container {
  padding-bottom: 170px !important;
}
@media (max-width: 768px) {
  .paper-container {
    padding-bottom: 160px !important;
  }
}

/* --------------------------------------------------------------------------
   移动端与 iPad 竖屏原生底部导航栏优化
   -------------------------------------------------------------------------- */
@media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) and (orientation: portrait), (min-width: 768px) and (max-width: 834px), (orientation: landscape) and (max-height: 500px) and (max-width: 960px) {
  .app-bottom-nav {
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: calc(52px + env(safe-area-inset-bottom, 8px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 8px) !important;
    background: var(--bg-card, #ffffff) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid var(--line-main, rgba(0, 0, 0, 0.08)) !important;
    z-index: 1000 !important;
    box-shadow: 0 -2px 14px rgba(42, 34, 27, 0.06) !important;
  }

  [data-theme="dark"] .app-bottom-nav {
    background: var(--bg-card, #23211e) !important;
    border-top: 1px solid var(--line-main, rgba(255, 255, 255, 0.08)) !important;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.4) !important;
  }
}


/* 跟读聚光同频校准选择器 (金石朱墨宣纸风) */
.sync-options-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.sync-card-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 6px;
  border-radius: 12px;
  background: var(--bg-card, #ffffff);
  border: 1.5px solid var(--line-main, rgba(0, 0, 0, 0.08));
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
}

.sync-card-btn:active {
  transform: scale(0.96);
}

.sync-card-btn .sync-card-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-primary);
  margin-bottom: 2px;
}

.sync-card-btn .sync-card-sub {
  font-size: 10px;
  color: var(--ink-secondary);
}

.sync-card-btn.active {
  border-color: var(--vermilion, #d97757);
  background: var(--vermilion-soft, rgba(217, 119, 87, 0.08));
  box-shadow: inset 0 0 0 1px var(--vermilion, #d97757);
}

.sync-card-btn.active .sync-card-title {
  color: var(--vermilion, #d97757);
}

@media (max-width: 480px) {
  .sync-options-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .sync-card-btn {
    flex-direction: row;
    justify-content: space-between;
    padding: 10px 14px;
  }
}


/* ==========================================================================
   播放倍速选择小弹窗样式 (Speed Modal · 金石朱墨宣纸风)
   ========================================================================== */
.speed-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 2400;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.speed-modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.speed-modal {
  position: fixed;
  left: 50%;
  bottom: 84px;
  transform: translate(-50%, 16px) scale(0.96);
  width: 330px;
  max-width: 92vw;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--line-main, rgba(0, 0, 0, 0.1));
  border-radius: 18px;
  box-shadow: 0 12px 36px rgba(42, 34, 27, 0.2);
  z-index: 2500;
  padding: 16px;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1), transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.speed-modal.open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}

[data-theme="dark"] .speed-modal {
  background: var(--bg-card, #23211e);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
}

.speed-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.speed-modal-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-primary);
}

.speed-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--bg-canvas, rgba(0, 0, 0, 0.04));
  color: var(--ink-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.speed-modal-close:active {
  transform: scale(0.92);
}

.speed-modal-sub {
  font-size: 11px;
  color: var(--ink-secondary);
  margin-bottom: 14px;
}

.speed-modal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.speed-option-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-radius: 12px;
  background: var(--bg-canvas, #faf7f0);
  border: 1px solid var(--line-main, rgba(0, 0, 0, 0.08));
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 4px 2px;
  box-sizing: border-box;
}

[data-theme="dark"] .speed-option-btn {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

.speed-option-btn:active {
  transform: scale(0.93);
}

.speed-option-btn .speed-opt-val {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-primary);
  letter-spacing: -0.2px;
}

.speed-option-btn .speed-opt-tag {
  font-size: 9.5px;
  color: var(--ink-muted);
  margin-top: 1px;
  line-height: 1;
}

.speed-option-btn.active {
  background: var(--vermilion, #d97757) !important;
  border-color: var(--vermilion, #d97757) !important;
  box-shadow: 0 3px 10px rgba(217, 119, 87, 0.38) !important;
}

.speed-option-btn.active .speed-opt-val,
.speed-option-btn.active .speed-opt-tag {
  color: #ffffff !important;
}

/* 全局可视化版本更新进度弹窗 (Visual Update Progress Modal) */
.update-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(26, 20, 15, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 20000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.update-modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.update-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -46%) scale(0.95);
  width: 330px;
  max-width: 90vw;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--line-main, rgba(0, 0, 0, 0.12));
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(42, 34, 27, 0.28);
  z-index: 20001;
  padding: 24px 20px 20px;
  box-sizing: border-box;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.update-modal.open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.update-modal-icon-wrap {
  position: relative;
  width: 54px;
  height: 54px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.update-modal-spin-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2.5px solid rgba(217, 119, 87, 0.18);
  border-top-color: var(--vermilion, #d97757);
  animation: spinRing 1s linear infinite;
}

@keyframes spinRing {
  to { transform: rotate(360deg); }
}

.update-modal-icon {
  color: var(--vermilion, #d97757);
}

.update-modal-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-primary);
  font-family: var(--font-heading, "Songti SC", "SimSun", serif);
  letter-spacing: 0.2px;
}

.update-modal-badges {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-body, #faf7f0);
  border: 1px solid var(--line-main);
  border-radius: 20px;
  padding: 3px 10px;
  margin-bottom: 14px;
  font-size: 12px;
  color: var(--ink-muted);
}

.update-badge-old {
  font-weight: 500;
  color: var(--ink-muted);
}

.update-badge-new {
  font-weight: 700;
  color: var(--vermilion, #d97757);
}

.update-modal-status {
  margin: 0 0 16px;
  font-size: 12.5px;
  color: var(--ink-primary);
  line-height: 1.45;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.update-progress-container {
  width: 100%;
  background: var(--bg-body, #faf7f0);
  border-radius: 12px;
  padding: 12px;
  box-sizing: border-box;
  border: 1px solid var(--line-main);
}

.update-progress-track {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

[data-theme="dark"] .update-progress-track {
  background: rgba(255, 255, 255, 0.12);
}

.update-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #d97757, #f5b041);
  border-radius: 6px;
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 8px rgba(217, 119, 87, 0.4);
}

.update-progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-size: 11px;
}

.update-step-label {
  color: var(--ink-muted);
  font-weight: 500;
}

.update-percent-val {
  color: var(--vermilion, #d97757);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   全局与政治专属 SVG 矢量图标规范 (Bug 1 Fix)
   ========================================================================== */
.ui-svg {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
}
.ui-svg.xs { width: 13px !important; height: 13px !important; }
.ui-svg.sm { width: 16px !important; height: 16px !important; }
.ui-svg.md { width: 20px !important; height: 20px !important; }
.pol-scope svg {
  max-width: 18px;
  max-height: 18px;
  flex-shrink: 0;
}
/* 政治模块纯矢量 SVG 图标高保真规范 */
.pol-scope .xt-part-badge svg,
.pol-scope .stream-card-label svg,
.pol-scope .card-audio-btn svg,
.pol-scope .playlist-chip-btn svg,
.pol-submode-btn svg,
.xt-voice-btn svg,
.pol-btn-svg {
  display: inline-block !important;
  width: 13px !important;
  height: 13px !important;
  min-width: 13px;
  max-width: 13px;
  max-height: 13px;
  vertical-align: -2px;
  flex-shrink: 0;
}
/* 章节播放/暂停按键图标显隐联动 */
.pol-scope .recite-chapter-play-btn .icon-pause { display: none !important; }
.pol-scope .recite-chapter-play-btn.playing .icon-play { display: none !important; }
.pol-scope .recite-chapter-play-btn.playing .icon-pause { display: inline-block !important; }

/* ==========================================================================
   全局与政治主舞台严格宽度包含与防移动端横向溢出 (Bug 2 Fix)
   ========================================================================== */
.main-stage {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.stage-wrapper {
  width: 100% !important;
  max-width: 860px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

.stage-header-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 860px !important;
  box-sizing: border-box !important;
}
.paper-container {
  width: 100% !important;
  max-width: min(68ch, 100%) !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}
#paper-content,
.pol-scope,
.pol-subcard-body,
.pol-scope .lecture-structured-wrap,
.pol-scope .stream-card,
.pol-scope .xt-part-box,
.pol-scope .xt-day-point-card,
.pol-scope .tj-handbook-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}
@media (max-width: 768px) {
  .paper-container {
    padding: 12px 4px 160px !important;
  }
}

/* ==========================================================================
   主舞台考研政治切换栏 (.stage-pol-nav) 与移动端横向滚动 (Bug 5 Fix)
   ========================================================================== */
.stage-pol-nav {
  margin-bottom: 6px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line-subtle, rgba(0, 0, 0, 0.08));
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .stage-pol-cats {
    display: flex;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .stage-pol-cats::-webkit-scrollbar {
    display: none;
  }
}

/* ==========================================================================
   政治专属 48 类正文卡片与导读组件体系 (Bug 4 Fix)
   ========================================================================== */
/* 1. Part Box & Headers */
.pol-scope .xt-part-box.xt-part-recite { border-left: 4px solid var(--vermilion, #b91c1c); }
.pol-scope .xt-part-box.xt-part-understand { border-left: 4px solid #2e5b88; }
.pol-scope .xt-part-badge-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px dashed var(--line-main, rgba(0,0,0,0.1)); }
.pol-scope .xt-part-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.pol-scope .xt-part-badge.recite { background: rgba(185, 28, 28, 0.1); color: var(--vermilion, #b91c1c); }
.pol-scope .xt-part-badge.understand { background: rgba(46, 91, 136, 0.12); color: #2e5b88; }
[data-theme="dark"] .pol-scope .xt-part-badge.understand { background: rgba(78, 134, 184, 0.2); color: #7eccf5; }
.pol-scope .xt-part-hint { font-size: 12px; color: var(--ink-muted, #78716c); }

/* 2. Recite Audio Bar (.recite-audio-bar) */
.pol-scope .recite-audio-bar { margin: 10px 0 14px 0; padding: 10px 12px; background: var(--bg-sidebar, rgba(0,0,0,0.025)); border: 1px solid var(--line-main, rgba(0,0,0,0.08)); border-left: 3.5px solid var(--vermilion, #b91c1c); border-radius: 10px; }
.pol-scope .recite-bar-main { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pol-scope .recite-bar-info { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 180px; }
.pol-scope .recite-bar-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: rgba(185, 28, 28, 0.1); color: var(--vermilion, #b91c1c); border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.pol-scope .recite-bar-title { font-size: 13px; font-weight: 700; color: var(--ink-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pol-scope .recite-bar-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.pol-scope .recite-chapter-play-btn { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; background: var(--bg-card, #fff); border: 1px solid var(--vermilion, #b91c1c); border-radius: 999px; color: var(--vermilion, #b91c1c); font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.18s ease; }
.pol-scope .recite-chapter-play-btn.playing { background: var(--vermilion, #b91c1c); color: #fff; }
[data-theme="dark"] .pol-scope .recite-chapter-play-btn { background: var(--bg-card, #23211e); }
[data-theme="dark"] .pol-scope .recite-chapter-play-btn.playing { background: var(--vermilion, #b91c1c); color: #fff; }

/* 3. Section Titles, Numbered Rows & Paragraphs (.xt-sec-title, .xt-item-row, .xt-text-para, etc.) */
.pol-scope .xt-sec-title { display: flex; align-items: baseline; gap: 8px; font-size: 15.5px; font-weight: 700; color: var(--ink-primary); margin: 16px 0 8px 0; padding-bottom: 5px; border-bottom: 1px solid var(--line-subtle); }
.pol-scope .xt-title-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--vermilion, #b91c1c); display: inline-block; flex-shrink: 0; transform: translateY(-1px); }
.pol-scope .xt-item-row { display: flex; align-items: flex-start; gap: 6px; margin: 7px 0; line-height: 1.8; font-size: var(--font-base, 16px); color: var(--ink-primary); }
.pol-scope .xt-num-badge { flex-shrink: 0; font-weight: 700; color: var(--vermilion, #b91c1c); min-width: 18px; }
.pol-scope .xt-num-badge.sub-bullet { color: var(--ink-muted); }
.pol-scope .xt-item-content { flex: 1; min-width: 0; }
.pol-scope .xt-example-lead { font-size: calc(var(--font-base, 17px) * 0.86); font-weight: 700; color: #2e5b88; margin: 10px 0 4px 0; }
[data-theme="dark"] .pol-scope .xt-example-lead { color: #7eccf5; }
.pol-scope .xt-text-para { margin: 7px 0; line-height: 1.8; font-size: var(--font-base, 17px); color: var(--ink-primary); }
.pol-scope .xt-keyword { color: var(--vermilion, #b91c1c); font-weight: 700; }
[data-theme="dark"] .pol-scope .xt-keyword { color: #f87171; }
.pol-scope .xt-trap-body { font-size: calc(var(--font-base, 17px) * 0.88); line-height: 1.75; }
.pol-scope .xt-point-content, .pol-scope .tj-sentence-flow, .pol-scope .tj-point-text { line-height: 1.85; font-size: calc(var(--font-base, 17px) * 0.92); color: var(--ink-primary); }

/* 4. Track 2 Subcard Header & 4-Part Stream Cards (.sub-card-audio-ctrl, .stream-card-*) */
.pol-scope .sub-card-audio-ctrl { background: var(--bg-card, #fff); border: 1px solid var(--line-main); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
[data-theme="dark"] .pol-scope .sub-card-audio-ctrl { background: var(--bg-card, #1c1917); border-color: rgba(255,255,255,0.08); }
.pol-scope .sub-card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; flex-wrap: wrap; }
.pol-scope .sub-card-badge { font-size: 11px; font-weight: 700; color: var(--vermilion, #b91c1c); background: rgba(185, 28, 28, 0.1); padding: 2px 7px; border-radius: 999px; flex-shrink: 0; }
.pol-scope .sub-card-title { font-size: calc(var(--font-base, 17px) * 0.92); font-weight: 700; color: var(--ink-primary); margin: 0; flex: 1; min-width: 140px; line-height: 1.38; }
.pol-scope .card-audio-btn { display: inline-flex; align-items: center; gap: 4px; background: rgba(185, 28, 28, 0.1); border: 1px solid rgba(185, 28, 28, 0.25); color: var(--vermilion, #b91c1c); border-radius: 999px; padding: 4px 11px; font-size: 11.5px; font-weight: 700; cursor: pointer; flex-shrink: 0; }
.pol-scope .card-audio-btn.playing { background: var(--vermilion, #b91c1c); color: #fff; border-color: var(--vermilion, #b91c1c); }
.pol-scope .stream-intro-row, .pol-scope .stream-outline-intro, .pol-scope .stream-lecture-intro { font-size: calc(var(--font-base, 17px) * 0.85); color: var(--ink-secondary); margin-bottom: 6px; line-height: 1.7; }
.pol-scope .stream-outline-content { display: flex; flex-direction: column; gap: 7px; font-size: calc(var(--font-base, 17px) * 0.92); }
.pol-scope .stream-outline-row { padding: 7px 10px; background: var(--bg-canvas, rgba(0,0,0,0.02)); border-radius: 6px; border: 1px solid var(--line-subtle); line-height: 1.85; }
.pol-scope .stream-card-lecture { border-left: 4px solid #059669; }
.pol-scope .stream-card-lecture .stream-card-label { color: #059669; }
[data-theme="dark"] .pol-scope .stream-card-lecture .stream-card-label { color: #34d399; }
.pol-scope .stream-takeaway-box { margin-top: 8px; padding: 8px 11px; background: rgba(5, 150, 105, 0.08); border-radius: 6px; border-left: 3px solid #059669; }
.pol-scope .stream-takeaway-tag { font-size: 11.5px; font-weight: 700; color: #059669; margin-bottom: 3px; }
[data-theme="dark"] .pol-scope .stream-takeaway-tag { color: #34d399; }
.pol-scope .stream-takeaway-text { font-weight: 600; color: var(--ink-primary); line-height: 1.8; font-size: calc(var(--font-base, 17px) * 0.90); }
.pol-scope .stream-card-tips { display: flex; flex-direction: column; gap: 8px; border: none !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; }
.pol-scope .stream-tip-box { padding: 10px 12px; border-radius: 8px; line-height: 1.8; font-size: calc(var(--font-base, 17px) * 0.90); }
.pol-scope .stream-tip-box.xt { background: rgba(185, 28, 28, 0.05); border-left: 3.5px solid var(--vermilion, #b91c1c); }
.pol-scope .stream-tip-badge.xt { display: inline-block; font-size: 12px; font-weight: 700; color: var(--vermilion, #b91c1c); margin-bottom: 3px; }
.pol-scope .stream-tip-box.xiao { background: rgba(217, 119, 6, 0.08); border-left: 3.5px solid #d97706; }
.pol-scope .stream-tip-badge.xiao { display: inline-block; font-size: 12px; font-weight: 700; color: #b45309; margin-bottom: 3px; }
[data-theme="dark"] .pol-scope .stream-tip-badge.xiao { color: #fbbf24; }
.pol-scope .recite-sent-item, .pol-scope .recite-sentence { cursor: pointer; border-radius: 4px; transition: box-shadow 0.08s ease; }

/* ==========================================================================
   考研政治专属组件样式 (.pol-scope) & 全科首字弱提示 (Ghost Hint) 系统
   V2.0 终极整合架构师规范定稿 · 包含完整深浅色主题自适应与移动端横向平滑滚动
   ========================================================================== */

/* ---------------- 1. 政治侧边栏三子模块切换与五大学科筛选 ---------------- */
.pol-submode-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding: 4px;
  background: var(--line-subtle, rgba(0, 0, 0, 0.04));
  border-radius: 10px;
}

[data-theme="dark"] .pol-submode-bar {
  background: rgba(255, 255, 255, 0.05);
}

.pol-submode-btn {
  flex: 1;
  padding: 6px 4px;
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  border: none;
  background: transparent;
  color: var(--ink-muted, #78716c);
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.pol-submode-btn:hover {
  color: var(--ink-primary, #1c1917);
}

.pol-submode-btn.active {
  background: var(--bg-card, #ffffff);
  color: var(--vermilion, #b91c1c);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .pol-submode-btn.active {
  background: var(--bg-elevated, #292524);
  color: #f87171;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.pol-category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}

/* ---------------- 2. 政治正文排版与章节结构 (.pol-scope) ---------------- */
.pol-scope {
  color: var(--ink-primary, #1c1917);
  font-family: var(--font-current) !important;
  line-height: 1.75;
}

/* 政治三子模块（政治47章背诵/微考点、徐涛16天选择题、腿姐11天冲刺）学术字系继承穿透规范 */
.pol-scope,
.pol-scope p,
.pol-scope span:not(.ui-svg):not(.pol-btn-svg):not(.seal-mark),
.pol-scope div:not(.ui-svg):not(.pol-btn-svg),
.pol-scope strong,
.pol-scope em,
.pol-scope table,
.pol-scope th,
.pol-scope td,
.pol-scope h1,
.pol-scope h2,
.pol-scope h3,
.pol-scope h4,
.pol-scope h5,
.pol-scope article,
.pol-body,
.pol-card,
.xt-card,
.xt-part-box,
.xt-part-body,
.xt-sec-title,
.xt-title-text,
.xt-item-row,
.xt-item-content,
.xt-text-para,
.xt-keyword,
.xt-num-badge,
.xt-example-lead,
.xt-trap-card,
.xt-trap-header,
.xt-trap-body,
.xt-table,
.xt-table th,
.xt-table td,
.xt-day-points-grid,
.xt-day-point-card,
.xt-day-point-header,
.xt-point-num-tag,
.xt-point-content,
.xt-point-text,
.xt-point-group,
.xt-point-title,
.stream-card,
.stream-card-label,
.stream-card-lecture,
.stream-card-golden,
.stream-card-outline,
.stream-card-alert,
.stream-card-core,
.card-audio-stream-pane,
.lecture-structured-wrap,
.stream-intro-row,
.stream-outline-content,
.stream-outline-row,
.stream-takeaway-box,
.stream-takeaway-tag,
.stream-takeaway-text,
.stream-tip-box,
.stream-tip-badge,
.stream-tip-body,
.sub-card-title,
.sub-card-badge,
.pol-subcard-body,
.recite-bar-title,
.recite-bar-badge,
.play-btn-text,
.tj-handbook-card,
.tj-card-header,
.tj-card-tag,
.tj-card-status,
.tj-card-title,
.tj-sentence-flow,
.tj-sent-span,
.tj-points-box,
.tj-points-title,
.tj-points-list,
.tj-point-card,
.tj-point-label,
.tj-point-text,
.framework-subtitle-text,
.recite-sent,
.recite-sent-item,
.recite-sentence,
.recite-pol-sent,
.recite-pol-card,
.recite-pol-item {
  font-family: var(--font-current) !important;
}

.pol-scope button,
.pol-scope input {
  font-family: var(--font-current) !important;
}

.pol-scope .xt-part-box {
  margin-bottom: 28px;
  padding: 18px 20px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--line-main, rgba(0, 0, 0, 0.08));
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .pol-scope .xt-part-box {
  background: var(--bg-card, #1c1917);
  border-color: var(--line-main, rgba(255, 255, 255, 0.08));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.pol-scope .xt-part-title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--line-main, rgba(0, 0, 0, 0.08));
}

.pol-scope .xt-part-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--vermilion, #b91c1c);
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-theme="dark"] .pol-scope .xt-part-title {
  color: #f87171;
}

.pol-scope .xt-section {
  margin: 16px 0;
}

.pol-scope .xt-section-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink-primary, #1c1917);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pol-scope .xt-point-group {
  margin: 10px 0;
  padding-left: 12px;
  border-left: 2px solid var(--line-subtle, rgba(185, 28, 28, 0.2));
}

.pol-scope .xt-point-title {
  font-weight: 600;
  color: var(--ink-secondary, #44403c);
  margin-bottom: 4px;
}

/* 句级同频卡拉OK高亮与悬停 */
.pol-scope span[data-sent-idx] {
  cursor: pointer;
  border-radius: 3px;
  padding: 1px 2px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.pol-scope span[data-sent-idx]:hover {
  background: rgba(185, 28, 28, 0.08);
}

[data-theme="dark"] .pol-scope span[data-sent-idx]:hover {
  background: rgba(248, 113, 113, 0.15);
}

.pol-scope span[data-sent-idx].sent-active {
  background: rgba(185, 28, 28, 0.16) !important;
  color: var(--vermilion, #b91c1c) !important;
  font-weight: 600;
  border-bottom: 1.5px solid var(--vermilion, #b91c1c);
}

[data-theme="dark"] .pol-scope span[data-sent-idx].sent-active {
  background: rgba(248, 113, 113, 0.22) !important;
  color: #fca5a5 !important;
  border-bottom-color: #f87171;
}

/* ---------------- 3. 理解部分对比表格 (.xt-table) ---------------- */
.pol-scope .xt-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 16px 0;
  border-radius: 8px;
  border: 1px solid var(--line-main, rgba(0, 0, 0, 0.1));
}

.pol-scope .xt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  line-height: 1.6;
  text-align: left;
}

.pol-scope .xt-table th,
.pol-scope .xt-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-subtle, rgba(0, 0, 0, 0.06));
}

.pol-scope .xt-table th {
  background: var(--line-subtle, rgba(0, 0, 0, 0.03));
  font-weight: 700;
  color: var(--ink-primary, #1c1917);
  white-space: nowrap;
}

[data-theme="dark"] .pol-scope .xt-table th {
  background: rgba(255, 255, 255, 0.06);
}

.pol-scope .xt-table tr:last-child td {
  border-bottom: none;
}

.pol-scope .xt-table tr:hover td {
  background: rgba(0, 0, 0, 0.015);
}

[data-theme="dark"] .pol-scope .xt-table tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}

/* ---------------- 对比表格行实时高亮样式穿透 (Bug Fix 3) ---------------- */
.pol-scope .xt-table tr.recite-sent-item.active-spotlight td,
.pol-scope .xt-table tr.recite-sent-item.active-spotlight th,
.pol-scope table tr.active-spotlight td,
.pol-scope table tr.active-spotlight th {
  background-color: var(--spotlight-bg, rgba(217, 119, 87, 0.16)) !important;
  color: var(--spotlight-text, #8b261d) !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.pol-scope .xt-table tr.recite-sent-item.active-spotlight td:first-child,
.pol-scope .xt-table tr.recite-sent-item.active-spotlight th:first-child {
  box-shadow: inset 3px 0 0 var(--vermilion, #b8332a) !important;
}

[data-theme="dark"] .pol-scope .xt-table tr.recite-sent-item.active-spotlight td,
[data-theme="dark"] .pol-scope .xt-table tr.recite-sent-item.active-spotlight th,
[data-theme="dark"] .pol-scope table tr.active-spotlight td,
[data-theme="dark"] .pol-scope table tr.active-spotlight th {
  background-color: rgba(245, 158, 11, 0.2) !important;
  color: #fff2db !important;
}
[data-theme="dark"] .pol-scope .xt-table tr.recite-sent-item.active-spotlight td:first-child,
[data-theme="dark"] .pol-scope .xt-table tr.recite-sent-item.active-spotlight th:first-child {
  box-shadow: inset 3px 0 0 #f59e0b !important;
}

/* ---------------- 4. 徐涛命题思路与避坑红线框 (.xt-trap-card) ---------------- */
.pol-scope .xt-trap-card {
  background: rgba(185, 28, 28, 0.035);
  border: 1px solid rgba(185, 28, 28, 0.18);
  border-left: 4px solid var(--vermilion, #b91c1c);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 14px 0;
}

[data-theme="dark"] .pol-scope .xt-trap-card {
  background: rgba(248, 113, 113, 0.06);
  border-color: rgba(248, 113, 113, 0.25);
  border-left-color: #f87171;
}

.pol-scope .xt-trap-header {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--vermilion, #b91c1c);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

[data-theme="dark"] .pol-scope .xt-trap-header {
  color: #f87171;
}

.pol-scope .badge-exam-wrong {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 700;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.1);
  padding: 1px 7px;
  border-radius: 4px;
  border: 1px solid rgba(220, 38, 38, 0.25);
  margin-right: 6px;
}

.pol-scope .badge-exam-right {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 700;
  color: #15803d;
  background: rgba(21, 128, 61, 0.1);
  padding: 1px 7px;
  border-radius: 4px;
  border: 1px solid rgba(21, 128, 61, 0.25);
  margin-right: 6px;
}

/* ---------------- 5. 轨道二章内微考点胶囊与四段式伴读卡 ---------------- */
.pol-subcard-pills {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: 8px 2px 14px 2px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line-subtle, rgba(0, 0, 0, 0.08));
}

.pol-subcard-pills::-webkit-scrollbar {
  height: 4px;
}

.pol-subcard-pills::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

.playlist-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--line-main, rgba(0, 0, 0, 0.12));
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-secondary, #44403c);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] .playlist-chip-btn {
  background: var(--bg-elevated, #292524);
  border-color: rgba(255, 255, 255, 0.1);
  color: #d6d3d1;
}

.playlist-chip-btn:hover {
  border-color: var(--vermilion, #b91c1c);
  color: var(--vermilion, #b91c1c);
}

.playlist-chip-btn.active {
  background: var(--vermilion, #b91c1c);
  border-color: var(--vermilion, #b91c1c);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(185, 28, 28, 0.28);
}

[data-theme="dark"] .playlist-chip-btn.active {
  background: #dc2626;
  border-color: #dc2626;
  color: #ffffff;
}

/* 四段式微考点伴读卡片 */
.pol-scope .card-audio-stream-pane {
  animation: fadeIn 0.25s ease;
}

.pol-scope .lecture-structured-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}

.pol-scope .stream-card {
  border-radius: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line-main, rgba(0, 0, 0, 0.1));
  background: var(--bg-card, #ffffff);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .pol-scope .stream-card {
  background: var(--bg-card, #1c1917);
  border-color: rgba(255, 255, 255, 0.08);
}

.pol-scope .stream-card-label {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pol-scope .stream-card-golden {
  border-left: 4px solid #d97706;
}
.pol-scope .stream-card-golden .stream-card-label {
  color: #d97706;
}

.pol-scope .stream-card-outline {
  border-left: 4px solid #2563eb;
}
.pol-scope .stream-card-outline .stream-card-label {
  color: #2563eb;
}

.pol-scope .stream-card-alert {
  border-left: 4px solid #dc2626;
}
.pol-scope .stream-card-alert .stream-card-label {
  color: #dc2626;
}

.pol-scope .stream-card-core {
  border-left: 4px solid #059669;
}
.pol-scope .stream-card-core .stream-card-label {
  color: #059669;
}

/* ---------------- 6. 徐涛 16 天选择题带背视图 ---------------- */
.xt-voice-switcher {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  background: var(--line-subtle, rgba(0, 0, 0, 0.05));
  border-radius: 8px;
}

[data-theme="dark"] .xt-voice-switcher {
  background: rgba(255, 255, 255, 0.06);
}

.xt-voice-btn {
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--ink-muted, #78716c);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.16s ease;
}

.xt-voice-btn.active {
  background: var(--bg-card, #ffffff);
  color: var(--vermilion, #b91c1c);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .xt-voice-btn.active {
  background: var(--bg-elevated, #292524);
  color: #f87171;
}

.xt-day-points-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

.xt-day-point-card {
  padding: 14px 16px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--line-main, rgba(0, 0, 0, 0.08));
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

[data-theme="dark"] .xt-day-point-card {
  background: var(--bg-card, #1c1917);
  border-color: rgba(255, 255, 255, 0.08);
}

.xt-day-point-card:hover {
  border-color: var(--vermilion, #b91c1c);
  transform: translateY(-1px);
}

.xt-day-point-card.playing {
  border-color: var(--vermilion, #b91c1c);
  background: rgba(185, 28, 28, 0.04);
  box-shadow: 0 2px 10px rgba(185, 28, 28, 0.12);
}

[data-theme="dark"] .xt-day-point-card.playing {
  background: rgba(248, 113, 113, 0.1);
  border-color: #f87171;
}

.xt-day-point-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.xt-point-jump-hint {
  font-size: 11px;
  color: var(--ink-muted);
  margin-left: auto;
  flex-shrink: 0;
}

.xt-day-point-header .live-repeat-badge {
  margin-left: 0;
}

.tj-point-card[data-jump-idx] {
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.16s ease;
}

.tj-point-card[data-jump-idx]:hover {
  border-color: var(--vermilion-border, rgba(185, 28, 28, 0.35)) !important;
  box-shadow: 0 2px 10px rgba(185, 28, 28, 0.08);
}

.tj-point-jump-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--vermilion, #b91c1c);
  background: var(--vermilion-soft, rgba(185, 28, 28, 0.08));
  border: 1px solid rgba(185, 28, 28, 0.22);
  vertical-align: middle;
  white-space: nowrap;
}

[data-theme="dark"] .tj-point-jump-pill {
  color: #fca5a5;
  background: rgba(248, 113, 113, 0.14);
  border-color: rgba(248, 113, 113, 0.32);
}

.xt-point-num-tag {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--vermilion, #b91c1c);
  background: rgba(185, 28, 28, 0.08);
  padding: 2px 8px;
  border-radius: 4px;
}

[data-theme="dark"] .xt-point-num-tag {
  color: #f87171;
  background: rgba(248, 113, 113, 0.15);
}

/* ---------------- 7. 「落印研毕」朱砂印章按钮 (.seal-btn) ---------------- */
.seal-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1.5px solid var(--line-main, rgba(0, 0, 0, 0.15));
  background: transparent;
  color: var(--ink-secondary, #57534e);
}

.seal-btn:hover {
  border-color: #b91c1c;
  color: #b91c1c;
}

.seal-btn:active {
  transform: scale(0.94);
}

.seal-btn.sealed {
  background: #faece6;
  border-color: #b91c1c;
  color: #b91c1c;
  box-shadow: 0 2px 6px rgba(185, 28, 28, 0.2);
}

[data-theme="dark"] .seal-btn.sealed {
  background: rgba(248, 113, 113, 0.15);
  border-color: #f87171;
  color: #fca5a5;
}

.seal-mark {
  display: inline-block;
  font-family: var(--font-song, "SimSun", "Songti SC", serif) !important;
  border: 1px solid currentColor;
  padding: 0 3px;
  font-size: 11px;
  border-radius: 2px;
}

/* ---------------- 8. 全科通用首字弱提示 (Ghost Hint) 挖空交互 ---------------- */
.cloze-keyword .cloze:not(.revealed),
.cloze-keyword .kw-red[data-ghost]:not(.revealed),
.cloze-keyword .stream-kw.cloze:not(.revealed),
.cloze-keyword-active .cloze:not(.revealed),
.cloze-keyword-active .kw-red:not(.revealed),
.cloze-keyword-active .stream-kw:not(.revealed) {
  color: transparent !important;
  filter: none !important;
  background: var(--cloze-bg, rgba(180, 83, 9, 0.10));
  border-bottom: 1.5px dashed var(--accent-primary, #b45309);
  border-radius: 4px;
  padding: 0 5px;
  margin: 0 1px;
  display: inline-block;
  max-width: 100%;
  min-width: 2.6em;
  vertical-align: baseline;
  line-height: inherit;
  cursor: pointer;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.cloze-keyword .cloze:not(.revealed) svg,
.cloze-keyword-active .cloze:not(.revealed) svg {
  opacity: 0;
}

.cloze-keyword .cloze:not(.revealed)::after,
.cloze-keyword .kw-red[data-ghost]:not(.revealed)::after,
.cloze-keyword .stream-kw.cloze:not(.revealed)::after,
.cloze-keyword-active .cloze:not(.revealed)::after,
.cloze-keyword-active .kw-red:not(.revealed)::after,
.cloze-keyword-active .stream-kw:not(.revealed)::after {
  content: attr(data-ghost);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 6px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-muted, #9ca3af);
  font-size: 0.85em;
  font-weight: 500;
  pointer-events: none;
  letter-spacing: 0.5px;
}

.cloze-keyword .cloze.revealed,
.cloze-keyword .kw-red.revealed,
.cloze-keyword .stream-kw.revealed,
.cloze-keyword .active-spotlight .cloze,
.cloze-keyword .active-spotlight .kw-red,
.cloze-keyword .active-spotlight .stream-kw,
.cloze-keyword .active-spotlight .stream-kw.cloze,
.cloze-keyword .active-spotlight .kw-red.cloze,
.cloze-keyword-active .cloze.revealed,
.cloze-keyword-active .kw-red.revealed,
.cloze-keyword-active .stream-kw.revealed,
.cloze-keyword-active .active-spotlight .cloze,
.cloze-keyword-active .active-spotlight .kw-red,
.cloze-keyword-active .active-spotlight .stream-kw,
.cloze-keyword-active .active-spotlight .stream-kw.cloze,
.cloze-keyword-active .active-spotlight .kw-red.cloze {
  color: var(--accent-primary, #b45309) !important;
  background: rgba(180, 83, 9, 0.08) !important;
  border-bottom: 1.5px solid var(--accent-primary, #b45309) !important;
  border-radius: 4px;
  padding: 0 5px;
  margin: 0 1px;
  display: inline;
  line-height: inherit;
  cursor: pointer;
  animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cloze-keyword .active-spotlight .cloze::after,
.cloze-keyword .active-spotlight .kw-red::after,
.cloze-keyword .active-spotlight .stream-kw::after,
.cloze-keyword-active .active-spotlight .cloze::after,
.cloze-keyword-active .active-spotlight .kw-red::after,
.cloze-keyword-active .active-spotlight .stream-kw::after {
  content: none !important;
  display: none !important;
}

[data-theme="dark"] .cloze-keyword .cloze:not(.revealed),
[data-theme="dark"] .cloze-keyword .kw-red[data-ghost]:not(.revealed),
[data-theme="dark"] .cloze-keyword .stream-kw.cloze:not(.revealed),
[data-theme="dark"] .cloze-keyword-active .cloze:not(.revealed),
[data-theme="dark"] .cloze-keyword-active .kw-red:not(.revealed),
[data-theme="dark"] .cloze-keyword-active .stream-kw:not(.revealed) {
  background: rgba(245, 158, 11, 0.12);
  border-bottom-color: #f59e0b;
}

[data-theme="dark"] .cloze-keyword .cloze:not(.revealed)::after,
[data-theme="dark"] .cloze-keyword .kw-red[data-ghost]:not(.revealed)::after,
[data-theme="dark"] .cloze-keyword .stream-kw.cloze:not(.revealed)::after,
[data-theme="dark"] .cloze-keyword-active .cloze:not(.revealed)::after,
[data-theme="dark"] .cloze-keyword-active .kw-red:not(.revealed)::after,
[data-theme="dark"] .cloze-keyword-active .stream-kw:not(.revealed)::after {
  color: #a8a29e;
}

[data-theme="dark"] .cloze-keyword .cloze.revealed,
[data-theme="dark"] .cloze-keyword .kw-red.revealed,
[data-theme="dark"] .cloze-keyword .stream-kw.revealed,
[data-theme="dark"] .cloze-keyword .active-spotlight .cloze,
[data-theme="dark"] .cloze-keyword .active-spotlight .kw-red,
[data-theme="dark"] .cloze-keyword .active-spotlight .stream-kw,
[data-theme="dark"] .cloze-keyword .active-spotlight .stream-kw.cloze,
[data-theme="dark"] .cloze-keyword .active-spotlight .kw-red.cloze,
[data-theme="dark"] .cloze-keyword-active .cloze.revealed,
[data-theme="dark"] .cloze-keyword-active .kw-red.revealed,
[data-theme="dark"] .cloze-keyword-active .stream-kw.revealed,
[data-theme="dark"] .cloze-keyword-active .active-spotlight .cloze,
[data-theme="dark"] .cloze-keyword-active .active-spotlight .kw-red,
[data-theme="dark"] .cloze-keyword-active .active-spotlight .stream-kw,
[data-theme="dark"] .cloze-keyword-active .active-spotlight .stream-kw.cloze,
[data-theme="dark"] .cloze-keyword-active .active-spotlight .kw-red.cloze {
  color: #fbbf24 !important;
  background: rgba(245, 158, 11, 0.16) !important;
  border-bottom-color: #f59e0b !important;
}

/* 移动端点词朗读与触摸增强 (v3.0.6) */
.recite-sent, .recite-sent-item, .recite-sentence, .xt-day-point-card, .tj-sent-span, .t1-linked-sent, [data-linked-sent-idx] {
  cursor: pointer !important;
  -webkit-tap-highlight-color: rgba(184, 51, 42, 0.15) !important;
  touch-action: manipulation !important;
}
/* 彻底根除移动端 SVG 异常膨胀遮挡 */
svg.ui-svg, .pol-scope svg, .xt-part-badge svg {
  max-width: 20px !important;
  max-height: 20px !important;
  overflow: hidden !important;
}

/* ==========================================================================
   移动端抽屉滚动穿透锁与触摸手势隔离 (Mobile Drawer Scroll Lock & Touch Isolation)
   ========================================================================== */

/* 1. 抽屉打开时，彻底锁定 html 和 body 根容器滚动链 */
html.drawer-scroll-locked,
body.drawer-scroll-locked {
  overflow: hidden !important;
  touch-action: none !important;
  height: 100% !important;
}

/* 2. 底层主舞台在抽屉展开时彻底禁止触摸与滚动穿透 */
body.drawer-scroll-locked .main-stage,
body.drawer-scroll-locked #mainStage {
  overflow: hidden !important;
  touch-action: none !important;
}

/* 3. 抽屉与侧边栏独立接管纵向手势，杜绝滚动手势链漏到下层页面；未开启的浮动抽屉禁止拦截点击 */
.outline-drawer:not(.open),
.mode-drawer:not(.open),
.dashboard-drawer:not(.open),
.settings-drawer:not(.open) {
  pointer-events: none !important;
}

.sidebar,
#sidebar,
.item-list-container,
#item-list,
.outline-drawer.open,
#outlineDrawer.open,
.outline-drawer-body,
.mode-drawer.open,
#playModeDrawer.open,
.mode-drawer-body,
.play-mode-list,
#playModeList,
.dashboard-drawer.open,
#studyDashboardDrawer.open,
.dashboard-drawer-body,
.settings-drawer.open,
#settingsDrawer.open,
.settings-body,
.appearance-drawer {
  overscroll-behavior: contain !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  pointer-events: auto !important;
}

/* 4. 遮罩层禁止触摸与滚动手势 */
.sidebar-backdrop,
#sidebar-backdrop,
.outline-drawer-backdrop,
#outlineDrawerBackdrop,
.mode-drawer-backdrop,
#playModeBackdrop,
.dashboard-drawer-backdrop,
#studyDashboardBackdrop,
.settings-backdrop,
#settingsModalBackdrop,
.speed-modal-backdrop,
#speedModalBackdrop,
.update-modal-backdrop,
#updateModalBackdrop,
.drawer-backdrop {
  touch-action: none !important;
  overscroll-behavior: none !important;
}



/* ==========================================================================
   iPad 横屏 (Landscape) 与平板双栏布局优化规则 (Warm Editorial 黄金标准)
   ========================================================================== */
@media (min-width: 835px) and (max-width: 1366px) and (orientation: landscape) and (min-height: 501px), (min-width: 769px) and (max-width: 1100px) and (orientation: landscape) and (min-height: 501px) {
  :root {
    --sidebar-w: 280px;
    --header-h: 56px;
  }

  /* 1. 底栏在横屏双栏模式下不显示，完全交由顶栏操作 */
  .app-bottom-nav {
    display: none !important;
  }

  /* 2. 左侧侧边栏优雅收窄为 280px，释放横向黄金空间给正文研读 */
  .sidebar {
    position: static !important;
    width: var(--sidebar-w, 280px) !important;
    min-width: var(--sidebar-w, 280px) !important;
    max-width: var(--sidebar-w, 280px) !important;
    transform: none !important;
    box-shadow: none !important;
    border-right: 1px solid var(--line-main) !important;
    display: flex !important;
    flex-direction: column !important;
    flex-shrink: 0 !important;
    z-index: 100 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: margin-left 0.28s cubic-bezier(0.16, 1, 0.3, 1), width 0.28s ease !important;
  }

  .sidebar-backdrop {
    display: none !important;
  }

  .mobile-menu-toggle {
    display: inline-flex !important;
  }

  .app-body.sidebar-collapsed .sidebar {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    margin-left: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* 2.1 确保侧边栏收起时内容绝对水平居中，两翼对称，绝不靠左偏倚 */
  .app-body.sidebar-collapsed {
    justify-content: center !important;
  }

  .app-body.sidebar-collapsed .main-stage {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    padding-left: max(32px, env(safe-area-inset-left)) !important;
    padding-right: max(32px, env(safe-area-inset-right)) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .app-body.sidebar-collapsed .stage-wrapper,
  .app-body.sidebar-collapsed .paper-container {
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 860px !important;
  }

  /* 3. 正文主舞台最大宽度放宽至 860px，正文阅读区居中，行宽舒适 */
  .main-stage {
    flex: 1 1 auto !important;
    max-width: 100% !important;
    padding: 18px 24px calc(110px + env(safe-area-inset-bottom, 16px)) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .stage-wrapper {
    width: 100% !important;
    max-width: 860px !important;
    margin: 0 auto !important;
  }

  .paper-container {
    width: 100% !important;
    max-width: 860px !important;
    margin: 0 auto !important;
    padding: 20px 24px calc(120px + env(safe-area-inset-bottom, 16px)) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* 4. 顶栏科目标签单行排列，避免折行挤压 */
  .app-header {
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--line-main) !important;
    background: var(--bg-card, #ffffff) !important;
    box-shadow: 0 1px 4px rgba(45, 36, 28, 0.04) !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    row-gap: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  [data-theme="dark"] .app-header {
    background: var(--bg-card, #23211e) !important;
    border-bottom: 1px solid var(--line-main, rgba(255, 255, 255, 0.08)) !important;
  }

  .brand-section {
    order: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }

  .brand-title-wrap {
    display: flex !important;
    flex-direction: column !important;
  }

  .brand-icon {
    display: flex !important;
    width: 30px !important;
    height: 30px !important;
  }

  .brand-main-title {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  .brand-sub-badge,
  .brand-voice-info {
    display: none !important;
  }

  .subject-pill-group {
    order: 2 !important;
    width: auto !important;
    flex: 0 1 auto !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 8px !important;
    padding: 3px !important;
    gap: 4px !important;
    background-color: var(--bg-sidebar) !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
  }

  .subject-btn {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    padding: 5px 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    border-radius: 17px !important;
    gap: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .subject-name-full {
    display: inline !important;
  }

  .subject-name-mobile {
    display: none !important;
  }

  .subject-btn .count-tag {
    display: inline-block !important;
    font-size: 10px !important;
    padding: 1px 5px !important;
  }

  .header-actions {
    order: 3 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    padding: 0 !important;
  }

  .header-actions .action-btn {
    height: 32px !important;
    padding: 0 7px !important;
    font-size: 12px !important;
    gap: 3px !important;
    display: inline-flex !important;
  }

  /* 5. 悬浮播控条在横屏模式下优雅浮动居中，宽度适度收窄，晶透磨砂质感 */
  .player-dock {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    bottom: calc(18px + env(safe-area-inset-bottom, 8px)) !important;
    width: calc(100% - 48px) !important;
    max-width: 760px !important;
    border-radius: 28px !important;
    padding: 8px 18px 10px !important;
    background: var(--bg-dock) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border: 1px solid var(--line-main) !important;
    box-shadow: 0 8px 32px rgba(42, 34, 27, 0.14) !important;
    box-sizing: border-box !important;
    z-index: 990 !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease !important;
  }

  .player-dock.dock-receded,
  .player-dock.dock-collapsed {
    transform: translate(-50%, calc(100% + 40px)) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* ==========================================================================
   iPad 竖屏 (Portrait) 底部导航栏、抽屉与正文安全距离终极规则 (Highest Priority)
   ========================================================================== */
@media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) and (orientation: portrait), (min-width: 768px) and (max-width: 834px), (orientation: landscape) and (max-height: 500px) and (max-width: 960px) {
  /* 1. 底栏必须完整显示，5 个 Tab 居中且具备 52px 良好触控热区 */
  .app-bottom-nav {
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: calc(52px + env(safe-area-inset-bottom, 8px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 8px) !important;
    background: var(--bg-card, #ffffff) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid var(--line-main, rgba(0, 0, 0, 0.08)) !important;
    z-index: 1000 !important;
    box-shadow: 0 -2px 14px rgba(42, 34, 27, 0.06) !important;
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease !important;
  }

  [data-theme="dark"] .app-bottom-nav {
    background: var(--bg-card, #23211e) !important;
    border-top: 1px solid var(--line-main, rgba(255, 255, 255, 0.08)) !important;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.4) !important;
  }

  /* 开始播放展开控制坞时，底栏自动平滑退出（暂停或收起控制坞后恢复） */
  body.dock-expanded .app-bottom-nav {
    transform: translateY(140%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .nav-bottom-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    height: 52px !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    padding: 0 8px !important;
  }

  .nav-tab-item {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
  }

  .nav-tab-item:not(.nav-tab-center-play) {
    flex: 1 !important;
    height: 52px !important;
    min-height: 52px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2px 0 !important;
    box-sizing: border-box !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
  }

  .nav-tab-center-play {
    flex: 1.15 !important;
    margin-top: -14px !important;
    height: auto !important;
    min-height: unset !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .center-play-circle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
  }

  .nav-tab-item .nav-tab-icon svg,
  .nav-tab-item .kubai-icon-svg {
    width: 22px !important;
    height: 22px !important;
  }

  .nav-tab-item .nav-tab-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    margin-top: 2px !important;
  }

  /* 2. 悬浮播放条（底栏已退出后优雅贴底悬浮） */
  .player-dock {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: 680px !important;
    margin: 0 auto !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 8px)) !important;
    z-index: 990 !important;
    border-radius: 24px !important;
    padding: 8px 14px 10px !important;
    box-sizing: border-box !important;
    transform: translateY(calc(100% + 80px)) !important;
  }

  body.dock-expanded .player-dock {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .player-dock.dock-receded,
  .player-dock.dock-collapsed {
    transform: translateY(calc(100% + 80px)) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* 3. 正文主舞台保持充分安全下边距，杜绝遮挡正文与打卡印章 */
  .main-stage {
    padding-bottom: calc(130px + env(safe-area-inset-bottom, 16px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.dock-expanded .main-stage {
    padding-bottom: calc(180px + env(safe-area-inset-bottom, 16px)) !important;
  }

  .paper-container {
    padding-bottom: calc(140px + env(safe-area-inset-bottom, 16px)) !important;
  }

  /* 抽屉打开时平滑下沉避让 */
  .player-dock.dock-receded,
  .app-bottom-nav.dock-receded {
    transform: translateY(140%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* 4. 侧边栏默认作为抽屉打开 (Drawer 模式)，不再常驻霸占屏幕 */
  .sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: min(340px, 85vw) !important;
    max-width: 85vw !important;
    z-index: 2500 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .sidebar.open {
    transform: translateX(0) !important;
  }

  .sidebar-backdrop {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    z-index: 2400 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease !important;
  }

  .sidebar-backdrop.open {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .mobile-menu-toggle {
    display: inline-flex !important;
  }
}


/* ==========================================================================
   v3.2.3 跨端响应式统一精修：iPhone / iPad 横竖屏 / Desktop 零溢出与全导航规范
   ========================================================================== */

/* 1. Desktop 与大屏平板 (1367px ~ 1580px)：消除 1440px 顶栏横向溢出 */
@media (min-width: 1367px) and (max-width: 1580px) {
  .app-header {
    padding: 0 14px !important;
    gap: 10px !important;
  }
  .brand-voice-info {
    display: none !important;
  }
  .subject-pill-group {
    padding: 3px !important;
    gap: 3px !important;
  }
  .subject-btn {
    padding: 6px 12px !important;
    font-size: 13px !important;
    gap: 5px !important;
  }
  .header-actions {
    gap: 6px !important;
  }
  .header-actions .action-btn {
    padding: 0 9px !important;
    font-size: 12.5px !important;
  }
}

@media (min-width: 1367px) and (max-width: 1480px) {
  .brand-sub-badge {
    display: none !important;
  }
}

/* 2. iPad 竖屏 (769px ~ 1024px portrait, 以及 769px ~ 834px)：两行工整排布，零溢出 */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait),
       (min-width: 769px) and (max-width: 834px) and (min-height: 501px) {
  :root {
    --header-h: 96px;
  }
  .app-header {
    height: auto !important;
    min-height: 92px !important;
    padding: 8px 16px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    row-gap: 8px !important;
    column-gap: 8px !important;
    box-sizing: border-box !important;
  }
  .brand-section {
    order: 1 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 8px !important;
  }
  .brand-sub-badge,
  .brand-voice-info {
    display: none !important;
  }
  .header-actions {
    order: 2 !important;
    flex: 0 0 auto !important;
    gap: 5px !important;
    margin-left: auto !important;
    padding-right: 0 !important;
  }
  .header-actions .action-btn {
    height: 32px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }
  .subject-pill-group {
    order: 3 !important;
    width: 100% !important;
    flex: 1 1 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    margin: 0 !important;
    padding: 3px !important;
    gap: 4px !important;
    box-sizing: border-box !important;
  }
  .subject-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    justify-content: center !important;
    padding: 6px 8px !important;
    font-size: 13px !important;
  }
  .dock-fab-play {
    display: none !important;
  }
}

/* 3. iPhone 竖屏 (<= 767px)：恢复规范 5-Tab 底栏与悬浮在底栏上方的 Liquid Glass 播放坞 */
@media (max-width: 767px) {
  .app-bottom-nav {
    display: block !important;
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease !important;
  }
  body.dock-expanded .app-bottom-nav {
    transform: translateY(140%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .app-bottom-nav.dock-receded {
    transform: translateY(140%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .nav-bottom-inner {
    height: 54px !important;
    padding: 0 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
  }
  .dock-fab-play {
    display: none !important;
  }
  body.dock-expanded .player-dock {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: calc(100vw - 20px) !important;
    margin: 0 auto !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 8px)) !important;
    border-radius: 22px !important;
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .player-dock.dock-collapsed,
  .player-dock.dock-receded {
    transform: translateY(calc(100% + 90px)) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .main-stage {
    min-height: 0 !important;
    height: 100% !important;
    padding-bottom: calc(136px + env(safe-area-inset-bottom, 16px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.dock-expanded .main-stage {
    padding-bottom: calc(156px + env(safe-area-inset-bottom, 16px)) !important;
  }
}

/* 4. iPhone / 手机横屏 (orientation: landscape, height <= 500px)：侧栏切为抽屉，避免挤占阅读区与顶栏溢出 */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 960px) {
  :root {
    --header-h: 48px;
  }
  .app-header {
    height: 48px !important;
    min-height: 48px !important;
    padding: 4px 10px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }
  .brand-section {
    display: flex !important;
    flex: 0 0 auto !important;
    gap: 0 !important;
  }
  .brand-icon,
  .brand-text-group,
  .brand-sub-badge,
  .brand-voice-info {
    display: none !important;
  }
  .brand-section .mobile-menu-toggle {
    display: inline-flex !important;
    width: 34px !important;
    height: 32px !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .subject-pill-group {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 2px !important;
    gap: 2px !important;
  }
  .subject-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 4px 6px !important;
    font-size: 12px !important;
    gap: 3px !important;
    justify-content: center !important;
  }
  .subject-btn .count-tag,
  .subject-btn svg {
    display: none !important;
  }
  .header-actions {
    flex: 0 0 auto !important;
    gap: 4px !important;
  }
  .header-actions .action-btn {
    height: 30px !important;
    padding: 0 7px !important;
    font-size: 11.5px !important;
  }
  .header-actions #btn-study-dashboard,
  .header-actions #btn-cloze-mode,
  .header-actions #btn-font-dec,
  .header-actions #btn-font-inc,
  .header-actions #btn-font-switch,
  .header-actions .theme-text {
    display: none !important;
  }
  .sidebar {
    position: fixed !important;
    left: 0 !important;
    top: var(--header-h) !important;
    bottom: 0 !important;
    width: min(320px, 75vw) !important;
    max-width: 320px !important;
    z-index: 950 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.25s ease !important;
    display: flex !important;
  }
  .sidebar.open {
    transform: translateX(0) !important;
  }
  .main-stage {
    width: 100% !important;
    margin-left: 0 !important;
    padding-bottom: calc(110px + env(safe-area-inset-bottom, 10px)) !important;
  }
  .stage-wrapper {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 12px 14px !important;
  }
  .app-bottom-nav {
    display: block !important;
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  body.dock-expanded .app-bottom-nav,
  .app-bottom-nav.dock-receded {
    transform: translateY(140%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .nav-bottom-inner {
    height: 46px !important;
  }
  .dock-fab-play {
    display: none !important;
  }
  body.dock-expanded .player-dock {
    bottom: calc(8px + env(safe-area-inset-bottom, 6px)) !important;
  }
}

/* 5. iPad 横屏 (835px ~ 1366px landscape, min-height 501px)：
      顶栏单行零溢出 + 底部居中玻璃胶囊 5-Tab 导航栏常驻 + 收起侧栏完美居中 */
@media (min-width: 835px) and (max-width: 1366px) and (orientation: landscape) and (min-height: 501px),
       (min-width: 769px) and (max-width: 1100px) and (orientation: landscape) and (min-height: 501px) {
  :root {
    --header-h: 56px;
  }
  .app-header {
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 12px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }
  .brand-section {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    gap: 8px !important;
  }
  .brand-sub-badge,
  .brand-voice-info {
    display: none !important;
  }
  .brand-main-title {
    font-size: 15px !important;
    white-space: nowrap !important;
  }
  .subject-pill-group {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 3px !important;
    gap: 3px !important;
  }
  .subject-btn {
    padding: 5px 11px !important;
    font-size: 13px !important;
    gap: 4px !important;
    white-space: nowrap !important;
  }
  .subject-btn .count-tag {
    display: none !important;
  }
  .header-actions {
    flex: 0 0 auto !important;
    gap: 4px !important;
    padding-right: 0 !important;
  }
  .header-actions .action-btn {
    height: 32px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    gap: 3px !important;
    white-space: nowrap !important;
  }
  .header-actions .theme-text {
    display: none !important;
  }
  #btn-font-dec svg,
  #btn-font-inc svg {
    display: none !important;
  }

  /* iPad 横屏保持桌面级双栏静态 280px 侧边栏（折叠时彻底收起居中） */
  .sidebar {
    position: static !important;
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    height: auto !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: auto !important;
    display: flex !important;
    flex-direction: column !important;
    transition: width 0.28s ease, opacity 0.25s ease !important;
  }
  .app-body.sidebar-collapsed .sidebar {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    margin-left: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* 恢复 iPad 横屏底部 5-Tab Liquid Glass 胶囊导航栏 */
  .nav-tab-item {
    position: relative !important;
    flex: 1 1 0 !important;
    height: 46px !important;
    border: none !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 0 !important;
    cursor: pointer !important;
    color: var(--ink-secondary) !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .nav-tab-item:not(.nav-tab-center-play) {
    border-radius: 16px !important;
    height: 42px !important;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, color 0.2s ease !important;
  }
  .nav-tab-item:not(.nav-tab-center-play):hover {
    background: var(--glass-btn-bg) !important;
    color: var(--vermilion) !important;
  }
  .nav-tab-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
  }
  .nav-tab-label {
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    line-height: 1 !important;
    font-family: var(--font-sans) !important;
  }
  .nav-tab-dot {
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: var(--vermilion) !important;
    position: absolute !important;
    bottom: 2px !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
  }
  .nav-tab-item.active {
    color: var(--vermilion) !important;
  }
  .nav-tab-item.active .nav-tab-dot {
    opacity: 1 !important;
  }
  .nav-tab-center-play {
    flex: 0 0 64px !important;
  }
  .center-play-circle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 30% 30%, #e06b52 0%, var(--vermilion) 65%, #a8321b 100%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.72) !important;
    box-shadow: 0 4px 14px rgba(196, 61, 35, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.45) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease !important;
  }
  .app-bottom-nav {
    display: block !important;
    position: fixed !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(500px, calc(100vw - 48px)) !important;
    border-radius: 28px !important;
    background: var(--glass-dock-bg) !important;
    backdrop-filter: var(--glass-dock-blur) !important;
    -webkit-backdrop-filter: var(--glass-dock-blur) !important;
    border: 1px solid var(--glass-dock-border) !important;
    box-shadow: var(--glass-dock-shadow) !important;
    padding-bottom: 0 !important;
    z-index: 940 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease !important;
  }
  [data-theme="dark"] .app-bottom-nav {
    background: var(--glass-dock-bg) !important;
    border-color: var(--glass-dock-border) !important;
  }
  body:has(.app-body:not(.sidebar-collapsed)) .app-bottom-nav {
    left: calc(50% + 140px) !important;
    width: min(480px, calc(100vw - 320px)) !important;
  }
  body.dock-expanded .app-bottom-nav,
  .app-bottom-nav.dock-receded {
    transform: translate(-50%, 150%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .nav-bottom-inner {
    height: 52px !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
  }
  .dock-fab-play {
    display: none !important;
  }
  body.dock-expanded .player-dock {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translateX(-50%) !important;
    left: 50% !important;
    width: min(760px, calc(100vw - 48px)) !important;
    max-width: calc(100vw - 48px) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  body:has(.app-body:not(.sidebar-collapsed)).dock-expanded .player-dock {
    left: calc(50% + 140px) !important;
    width: min(712px, calc(100vw - 312px)) !important;
    max-width: calc(100vw - 312px) !important;
  }
  .player-dock.dock-collapsed,
  .player-dock.dock-receded {
    transform: translate(-50%, calc(100% + 90px)) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .main-stage {
    padding-bottom: calc(136px + env(safe-area-inset-bottom, 16px)) !important;
  }
  body.dock-expanded .main-stage {
    padding-bottom: calc(200px + env(safe-area-inset-bottom, 16px)) !important;
  }
}

@media (min-width: 835px) and (max-width: 1120px) and (orientation: landscape) and (min-height: 501px) {
  .header-actions #btn-study-dashboard span,
  .header-actions #btn-cloze-mode #cloze-mode-name {
    display: none !important;
  }
  .header-actions #btn-study-dashboard,
  .header-actions #btn-cloze-mode,
  .header-actions #btn-theme-toggle {
    width: 32px !important;
    padding: 0 !important;
    justify-content: center !important;
  }
  .subject-btn {
    padding: 5px 8px !important;
    font-size: 12px !important;
  }
}

/* ==========================================================================
   v3.4.0 DeepSeek AI 伴学抽背与多端云同步样式系统 (Warm Parchment / Dark Night)
   ========================================================================== */

/* 1. 顶栏 AI 伴学入口按钮（桌面端 + 移动端自适应） */
.header-actions .ai-assistant-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--vermilion);
  border-color: var(--vermilion-border);
  background: var(--vermilion-soft);
  font-weight: 600;
}

.header-actions .ai-assistant-btn:hover {
  background: var(--vermilion);
  color: #ffffff;
  border-color: var(--vermilion);
}

@media (max-width: 768px) {
  .header-actions {
    gap: 5px !important;
  }
  .header-actions #btn-ai-assistant {
    display: inline-flex !important;
    height: 30px !important;
    padding: 0 8px !important;
    border-radius: 9999px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
  .header-actions #btn-ai-assistant .ai-btn-text {
    display: inline !important;
  }
}

@media (max-width: 390px) {
  .header-actions #btn-ai-assistant .ai-btn-text {
    display: none !important;
  }
  .header-actions #btn-ai-assistant {
    width: 30px !important;
    padding: 0 !important;
    justify-content: center !important;
  }
}

@media (min-width: 835px) and (max-width: 1120px) and (orientation: landscape) and (min-height: 501px) {
  .header-actions #btn-ai-assistant .ai-btn-text {
    display: none !important;
  }
  .header-actions #btn-ai-assistant {
    width: 32px !important;
    padding: 0 !important;
    justify-content: center !important;
  }
}

/* 2. 卡片头部内联「AI 伴学 / 抽背」按钮 */
.card-ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 999px;
  border: 0.5px solid var(--vermilion-border);
  background: var(--vermilion-soft);
  color: var(--vermilion);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.card-ai-btn:hover {
  background: var(--vermilion);
  color: #ffffff;
  border-color: var(--vermilion);
}

.card-ai-btn svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.card-ai-btn-inline {
  margin-left: 8px;
  vertical-align: middle;
}

.section-card-header .card-ai-btn,
.logic-block-title .card-ai-btn,
.xt-part-badge-row .card-ai-btn,
.stream-card-label .card-ai-btn,
.xt-day-point-header .card-ai-btn,
.tj-card-header .card-ai-btn,
.sub-card-title-row .card-ai-btn {
  margin-left: auto;
}

.xt-day-point-header .xt-point-jump-hint + .card-ai-btn {
  margin-left: 6px;
}

/* 3. 划词提问底部安全胶囊（避让 iOS Safari 原生弹出菜单） */
.ai-selection-pill {
  position: fixed;
  left: 50%;
  bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 1080;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px 5px 12px;
  border-radius: 999px;
  background: var(--ink-primary);
  color: var(--bg-canvas);
  border: 1px solid var(--line-strong);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  max-width: calc(100vw - 28px);
}

body.dock-expanded .ai-selection-pill {
  bottom: calc(156px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 769px) {
  .ai-selection-pill {
    bottom: 112px;
  }
  body.dock-expanded .ai-selection-pill {
    bottom: 124px;
  }
}

.ai-selection-ask-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: inherit;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 3px 4px;
  white-space: nowrap;
}

.ai-selection-ask-btn svg {
  color: var(--vermilion);
}

.ai-selection-dismiss-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(128, 128, 128, 0.22);
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
}

/* 4. 防偷看盲背模糊遮罩 */
#paper-content.ai-blind-mask {
  filter: blur(8px);
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  transition: filter 0.2s ease;
}

/* 5. AI 伴学抽屉（移动端 Bottom Sheet / 平板与桌面 Right Drawer） */
.ai-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 19, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 2590;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  touch-action: none !important;
  overscroll-behavior: none !important;
}

.ai-drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.ai-assistant-drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2600;
  background: var(--bg-canvas);
  color: var(--ink-primary);
  border-top: 1px solid var(--line-main);
  border-radius: 20px 20px 0 0;
  max-height: 84dvh;
  height: 84dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(105%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.ai-assistant-drawer:not(.open) {
  pointer-events: none !important;
}

.ai-assistant-drawer.open {
  transform: translateY(0);
  pointer-events: auto !important;
}

.ai-drawer-handle-bar {
  display: flex;
  justify-content: center;
  padding: 9px 0 3px;
  flex-shrink: 0;
}

.ai-drawer-handle {
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: var(--line-strong);
}

@media (min-width: 768px) {
  .ai-assistant-drawer {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 440px;
    max-width: 92vw;
    height: 100dvh;
    max-height: 100dvh;
    border-top: none;
    border-left: 1px solid var(--line-main);
    border-radius: 16px 0 0 16px;
    transform: translateX(105%);
    padding-bottom: 0;
  }
  .ai-assistant-drawer.open {
    transform: translateX(0);
  }
  .ai-drawer-handle-bar {
    display: none;
  }
}

.ai-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px 10px;
  border-bottom: 1px solid var(--line-subtle);
  flex-shrink: 0;
}

.ai-drawer-title-group {
  min-width: 0;
  flex: 1;
}

.ai-drawer-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.ai-drawer-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-primary);
}

.ai-model-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 0.5px solid var(--line-strong);
  color: var(--ink-secondary);
}

.ai-drawer-scope-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.ai-scope-badge {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 280px;
}

.ai-scope-reset-btn {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--vermilion);
  background: var(--vermilion-soft);
  border: 0.5px solid var(--vermilion-border);
  border-radius: 999px;
  padding: 1px 8px;
  cursor: pointer;
}

.ai-drawer-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.ai-header-icon-btn,
.ai-drawer-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0.5px solid transparent;
  background: transparent;
  color: var(--ink-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ai-header-icon-btn:hover,
.ai-drawer-close:hover {
  background: var(--bg-card);
  border-color: var(--line-main);
  color: var(--ink-primary);
}

/* Tabs */
.ai-drawer-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 8px 16px;
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--line-subtle);
  flex-shrink: 0;
}

.ai-tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 0.5px solid transparent;
  background: transparent;
  color: var(--ink-secondary);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.ai-tab-btn.active {
  background: var(--bg-canvas);
  color: var(--vermilion);
  border-color: var(--vermilion-border);
}

/* Memory Box */
.ai-memory-box {
  border-bottom: 1px solid var(--line-subtle);
  background: var(--bg-card);
  padding: 6px 16px;
  flex-shrink: 0;
}

.ai-memory-summary-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-sans);
  font-size: 12px;
}

.ai-memory-summary-toggle::-webkit-details-marker {
  display: none;
}

.ai-memory-title {
  font-weight: 700;
  color: var(--ink-primary);
}

.ai-memory-stats {
  font-size: 12px;
  color: var(--ink-muted);
}

.ai-memory-body {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ai-memory-body textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid var(--line-main);
  border-radius: 8px;
  background: var(--bg-canvas);
  color: var(--ink-primary);
  padding: 7px 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
}

.ai-memory-actions {
  display: flex;
  justify-content: flex-end;
}

/* Tab Panels */
.ai-tab-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ai-drawer-body {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.ai-quote-box {
  margin: 10px 16px 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 0.5px solid var(--vermilion-border);
  background: var(--vermilion-soft);
  flex-shrink: 0;
}

.ai-quote-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
}

.ai-quote-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--vermilion);
}

.ai-quote-clear {
  border: none;
  background: transparent;
  color: var(--ink-secondary);
  font-size: 12px;
  cursor: pointer;
}

.ai-quote-text {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--ink-primary);
  line-height: 1.5;
  max-height: 64px;
  overflow-y: auto;
}

.ai-quick-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px 6px;
  overflow-x: auto;
  flex-shrink: 0;
}

.ai-chip-btn {
  border: 0.5px solid var(--line-strong);
  background: var(--bg-card);
  color: var(--ink-primary);
  border-radius: 999px;
  padding: 4px 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.ai-chip-btn:hover {
  border-color: var(--vermilion);
  color: var(--vermilion);
}

.ai-chip-btn.subtle {
  color: var(--ink-muted);
}

.ai-chat-stream {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.ai-empty-hint {
  padding: 14px;
  border-radius: 10px;
  border: 1px dashed var(--line-strong);
  background: var(--bg-card);
  color: var(--ink-secondary);
  font-size: 13px;
  line-height: 1.6;
}

.ai-msg {
  display: flex;
  flex-direction: column;
}

.ai-msg-user {
  align-items: flex-end;
}

.ai-msg-assistant {
  align-items: flex-start;
}

.ai-msg-bubble {
  max-width: 92%;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.65;
  word-break: break-word;
}

.ai-msg-user .ai-msg-bubble {
  background: var(--vermilion);
  color: #ffffff;
  border-bottom-right-radius: 4px;
}

.ai-msg-assistant .ai-msg-bubble {
  background: var(--bg-card);
  color: var(--ink-primary);
  border: 0.5px solid var(--line-main);
  border-bottom-left-radius: 4px;
}

.ai-ask-composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 16px 12px;
  border-top: 1px solid var(--line-subtle);
  background: var(--bg-canvas);
  flex-shrink: 0;
}

.ai-ask-composer textarea {
  flex: 1;
  resize: none;
  min-height: 42px;
  max-height: 110px;
  border: 1px solid var(--line-main);
  border-radius: 10px;
  padding: 8px 11px;
  background: var(--bg-card);
  color: var(--ink-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
}

.ai-send-btn {
  height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  border: none;
  background: var(--vermilion);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}

.ai-send-btn:disabled,
.ai-grade-submit-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Tab 2: Recite Grading */
.ai-recite-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 16px 6px;
  flex-shrink: 0;
}

.ai-blind-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-primary);
  cursor: pointer;
}

.ai-blind-toggle input[type="checkbox"] {
  accent-color: var(--vermilion);
  width: 16px;
  height: 16px;
}

.ai-recite-char-count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
}

.ai-recite-input-card {
  margin: 0 16px 8px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--line-main);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.ai-recite-input-card textarea {
  width: 100%;
  min-height: 110px;
  max-height: 220px;
  resize: vertical;
  border: 1px solid var(--line-main);
  border-radius: 8px;
  padding: 9px 10px;
  background: var(--bg-canvas);
  color: var(--ink-primary);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.58;
}

.ai-recite-btn-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.ai-recite-helpers {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ai-mini-btn {
  padding: 5px 10px;
  border-radius: 7px;
  border: 0.5px solid var(--line-strong);
  background: var(--bg-canvas);
  color: var(--ink-secondary);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.ai-mini-btn:hover {
  color: var(--ink-primary);
  border-color: var(--ink-secondary);
}

.ai-mini-btn.danger:hover {
  color: var(--vermilion);
  border-color: var(--vermilion-border);
}

.ai-grade-submit-btn {
  padding: 7px 16px;
  border-radius: 8px;
  border: none;
  background: var(--vermilion);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.ai-recite-result {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 16px 16px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.ai-grading-card {
  padding: 12px 14px;
  border-radius: 12px;
  border: 0.5px solid var(--line-main);
  background: var(--bg-card);
  font-size: 14px;
  line-height: 1.65;
}

.ai-error-box {
  border-color: var(--vermilion-border);
  background: var(--vermilion-soft);
  color: var(--vermilion);
}

/* Markdown-lite & 原句跳转按钮 */
.ai-md-h {
  font-family: var(--font-serif);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink-primary);
  margin: 10px 0 5px;
}

.ai-md-h:first-child {
  margin-top: 0;
}

.ai-md-p {
  margin: 0 0 6px;
}

.ai-md-list {
  margin: 4px 0 8px 18px;
  padding: 0;
}

.ai-md-list li {
  margin-bottom: 5px;
}

.ai-msg-bubble code,
.ai-grading-card code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-canvas);
  border: 0.5px solid var(--line-main);
}

.ai-sent-jump-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 3px 4px 3px 0;
  padding: 3px 9px;
  border-radius: 999px;
  border: 0.5px solid var(--vermilion-border);
  background: var(--vermilion-soft);
  color: var(--vermilion);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  vertical-align: middle;
}

.ai-sent-jump-btn:hover {
  background: var(--vermilion);
  color: #ffffff;
}

.ai-summary-archived-card {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border-left: 3px solid var(--pine);
  background: var(--pine-soft);
}

.ai-summary-archived-tag {
  font-size: 12px;
  font-weight: 700;
  color: var(--pine);
  margin-bottom: 2px;
}

.ai-summary-archived-text {
  font-size: 13px;
  color: var(--ink-primary);
  line-height: 1.5;
}

.ai-reasoning-block {
  margin-bottom: 8px;
  padding: 6px 9px;
  border-radius: 8px;
  background: var(--bg-canvas);
  border: 0.5px solid var(--line-main);
  font-size: 12.5px;
  color: var(--ink-secondary);
}

.ai-reasoning-block summary {
  cursor: pointer;
  font-weight: 600;
}

.ai-reasoning-body {
  margin-top: 6px;
  max-height: 160px;
  overflow-y: auto;
  line-height: 1.55;
}

.ai-recite-history-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-secondary);
  margin: 6px 0 8px;
}

.ai-recite-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-history-item {
  border: 0.5px solid var(--line-main);
  border-radius: 10px;
  background: var(--bg-card);
  padding: 8px 10px;
}

.ai-history-item summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12px;
}

.ai-history-score {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--vermilion);
}

.ai-history-block {
  flex: 1;
  color: var(--ink-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-history-time {
  color: var(--ink-muted);
  font-size: 11.5px;
}

.ai-history-body {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line-main);
  font-size: 13.5px;
}

/* 6. 设置抽屉「AI 伴学与云端同步」卡片 */
.ai-sync-settings-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 10px;
  background: var(--bg-card);
  border: 1px solid var(--line-main);
}

.ai-sync-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ai-sync-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-secondary);
}

.ai-sync-field input,
.ai-sync-field select {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--line-main);
  background: var(--bg-canvas);
  color: var(--ink-primary);
  font-family: var(--font-sans);
  font-size: 13.5px;
}

.ai-sync-secret-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.ai-sync-secret-wrap input {
  padding-right: 38px;
}

.ai-secret-toggle {
  position: absolute;
  right: 6px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ai-sync-status-meta {
  font-size: 12px;
  color: var(--ink-secondary);
  line-height: 1.5;
}

.ai-sync-actions-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ai-sync-btn {
  flex: 1 1 auto;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--bg-canvas);
  color: var(--ink-primary);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.ai-sync-btn.primary {
  background: var(--vermilion);
  border-color: var(--vermilion);
  color: #ffffff;
}

.sync-tone-ok { color: var(--pine) !important; font-weight: 600 !important; }
.sync-tone-warn { color: var(--amber) !important; font-weight: 600 !important; }
.sync-tone-error { color: var(--vermilion) !important; font-weight: 600 !important; }
.sync-tone-busy { color: var(--accent-slate) !important; font-weight: 600 !important; }

/* iOS Safari 防自动放大：移动端输入框强制 >= 16px */
@media (max-width: 767px) {
  .ai-assistant-drawer input,
  .ai-assistant-drawer textarea,
  .ai-assistant-drawer select,
  #settingsAiSyncSection input,
  #settingsAiSyncSection select {
    font-size: 16px !important;
  }
}