/* ══════════════════════════════════════
   CSS 变量 & 全局重置
══════════════════════════════════════ */
:root {
  --blue:        #007aff;
  --blue-light:  rgba(0,122,255,0.10);
  --green:       #34c759;
  --orange:      #ff9500;
  --red:         #ff3b30;
  --bg:          #f2f2f7;
  --card:        #ffffff;
  --text:        #1c1c1e;
  --text-dim:    #8e8e93;
  --border:      #d1d1d6;
  --separator:   rgba(60,60,67,0.12);
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --nav-h:       44px;
  --tab-h:       104px;

  /* 改进后的软色彩系统 */
  --grad-orange: linear-gradient(135deg, #FF9F0A 0%, #FF8000 100%);
  --grad-green: linear-gradient(135deg, #34C759 0%, #248A3D 100%);
  --grad-blue: linear-gradient(135deg, #007AFF 0%, #0056B3 100%);
}

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

html, body {
  height: 100%;
  background: var(--bg);
  font-family: -apple-system, "SF Pro Text", "PingFang SC", "Helvetica Neue", sans-serif;
  overflow: hidden;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.vc-switch {
  display: none !important;
}

/* ══════════════════════════════════════
   页面切换框架
══════════════════════════════════════ */
.page {
  display: none;
  position: fixed;
  /* iOS Safari 底部地址栏不缩小 inset:0 / 100vh 的参考高度，也不计入 env(safe-area-inset-bottom)，
     会把底部内容（如 srs-deck 的「开始复习」按钮）压到地址栏后面并触发滚动条；PWA standalone 无
     地址栏故安全。改用 dvh（动态视口高度）让页面底边随地址栏伸缩、始终等于真实可见区。
     100vh 为不支持 dvh 的旧浏览器回退，等同旧行为不会更糟。dvh 是 layout viewport 概念，
     软键盘弹出只改 visual viewport、不改 dvh，训练模式弹键盘时页面不会被顶缩。 */
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  flex-direction: column;
  padding-top: var(--safe-top);
  padding-bottom: 0;
  background: var(--bg);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.page.active { display: flex; }

html.app-booting.boot-auth .page.active {
  display: none;
}

html.app-booting.boot-auth #page-auth {
  display: flex;
}

html.app-booting.boot-auth #mainTabBar {
  display: none;
}

html.app-booting.boot-logged-in:not(.boot-cache-ready) .page.active {
  display: none;
}

html.app-booting.boot-logged-in:not(.boot-cache-ready) #mainTabBar {
  display: none;
}

#page-srs-deck {
  background: linear-gradient(180deg, #fff5ec 0%, #fef0f4 100%);
}

#page-srs-deck .top-nav {
  background: transparent;
  border-bottom: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#page-srs-deck .nav-title {
  color: #2a1a12;
  font-size: 18px;
  font-weight: 800;
}

#page-srs-deck .nav-btn {
  color: #ff4f3f;
  font-weight: 800;
}

#page-srs-deck .nav-btn.icon {
  color: #3d352f;
  font-weight: 700;
}

/* 播放器页面：顶部/底部均由内部 nav-bar 自行处理 safe-area */
#page-player-view,
#page-repo-view,
#page-repo-player,
#page-srs-player,
#page-background-listen,
#page-srs-flashcard,
#page-srs-reading,
#page-collab-guest {
  padding-top: 0;
  padding-bottom: 0;
}

/* ══════════════════════════════════════
   顶部导航栏（主页面用）
══════════════════════════════════════ */
.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  padding: 0 16px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 0.5px solid var(--separator);
  flex-shrink: 0;
  -webkit-user-select: none;
  user-select: none;
}

.nav-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-user-select: none;
  user-select: none;
}

.list-scroll.memory-dashboard-scroll,
.list-scroll.learning-dashboard-scroll,
.list-scroll.repo-dashboard-scroll {
  padding: 20px 20px 120px;
  background: var(--bg);
}
.list-scroll.learning-dashboard-scroll {
  padding-top: 8px;
}
.list-scroll.memory-dashboard-scroll,
.list-scroll.repo-dashboard-scroll {
  padding-top: 0;
}

.memory-page-header,
.learning-page-header,
.repo-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
  padding: 0 0 20px;
}

.memory-page-header {
  transition: padding-bottom 0.34s cubic-bezier(0.22, 0.8, 0.22, 1);
}

.memory-page-header.has-sync-status {
  /* 右侧按钮行保持原位，只从按钮下沿向下展开提示空间。 */
  padding-bottom: 48px;
}

.memory-page-brand,
.learning-page-brand,
.repo-page-brand {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: #111;
  margin: 12px 0 4px;
}

.memory-page-add,
.learning-page-admin,
.repo-settings-entry {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #ececf1;
  background: #f9f9fb;
  color: var(--text-dim);
  font-size: 16px;
  cursor: pointer;
}

.memory-page-add,
.learning-page-admin {
  border: none;
  background: transparent;
  color: #111;
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
}

/* ── 主页头部主动同步按钮 + 下方状态行 ── */
.memory-page-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: relative;
}

.memory-page-actions-btns {
  display: flex;
  align-items: center;
  gap: 2px;
}

.home-sync-btn {
  position: relative;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.16s ease, background 0.16s ease, color 0.2s ease;
}
.home-sync-btn:active { transform: scale(0.9); background: rgba(0,0,0,0.05); }
.home-sync-btn:disabled { cursor: default; }
.home-sync-btn:focus-visible { outline: 3px solid rgba(0,122,255,0.28); outline-offset: 1px; }

.home-sync-icon { width: 23px; height: 23px; overflow: visible; }
.home-sync-icon .cloud,
.home-sync-icon .arrow {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-sync-dot {
  position: absolute;
  top: 6px;
  right: 5px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--bg);
  border-radius: 50%;
  background: transparent;
  transform: scale(0);
  transition: transform 0.18s ease, background 0.18s ease;
}

.home-sync-btn[data-state="syncing"] { color: var(--blue); }
/* 只旋转内部刷新箭头，云朵保持正立——整图旋转时云朵转到 ~180° 会变成「幽灵」轮廓 */
.home-sync-btn[data-state="syncing"] .arrow {
  transform-box: view-box;
  transform-origin: center;
  animation: home-sync-spin 1s linear infinite;
}
.home-sync-btn[data-state="success"] { color: var(--green); }
.home-sync-btn[data-state="pending"] .home-sync-dot { background: var(--orange); transform: scale(1); }
.home-sync-btn[data-state="error"] { color: var(--red); }
.home-sync-btn[data-state="error"] .home-sync-dot { background: var(--red); transform: scale(1); }
.home-sync-btn[data-state="offline"] { color: #b6b6bc; }

@keyframes home-sync-spin { to { transform: rotate(360deg); } }

.home-sync-status {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  color: var(--text-dim);
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(0 0 100% 0);
  transform: translateY(-7px);
  transform-origin: top right;
  transition:
    opacity 0.18s ease,
    clip-path 0.28s ease,
    transform 0.34s cubic-bezier(0.22, 0.8, 0.22, 1);
}
.home-sync-status.visible {
  opacity: 1;
  pointer-events: auto;
  clip-path: inset(0);
  transform: translateY(0);
}
.home-sync-status.error { color: var(--red); }
.home-sync-status .home-sync-retry {
  padding: 3px 9px;
  border: none;
  border-radius: 7px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .memory-page-header,
  .home-sync-status {
    transition-duration: 0.01ms;
  }
}

/* ── P2P 媒体同步角标（左下角，与右上角云朵同步点区分） ── */
.blob-sync-badge {
  position: absolute;
  bottom: 5px;
  left: 5px;
  width: 7px;
  height: 7px;
  border: 2px solid var(--bg);
  border-radius: 50%;
  background: #1D9E75;
  transform: scale(0);
  transition: transform 0.18s ease;
}
.blob-sync-badge.visible { transform: scale(1); }
.blob-sync-badge.pulsing { animation: blob-sync-pulse 1.3s ease-in-out infinite; }
@keyframes blob-sync-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.72); }
}

/* ── P2P 媒体同步状态条（仅传输中/完成闪现时可见，空闲:empty隐藏） ── */
#blobSyncStatus { margin: 10px 0 2px; }
#blobSyncStatus:empty { display: none; }
.bss-pill { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px;
  padding: 5px 11px; font-size: 12px; line-height: 1.3; border: 0.5px solid var(--border);
  background: var(--surface-2); color: var(--text-secondary); }
.bss-pill.online { background: var(--bg-success, #E1F5EE); border-color: #1D9E75; color: #085041; }
.bss-pill.warn { background: var(--bg-warning, #FDF0E6); border-color: #C2410C; color: #7C2D12; }
.bss-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.bss-card { background: var(--surface-2); border: 0.5px solid #1D9E75; border-radius: 12px;
  padding: 11px 14px; display: flex; flex-direction: column; gap: 8px; }
.bss-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.bss-row .bss-name { color: #085041; font-weight: 500; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; max-width: 170px; }
.bss-row .bss-bytes { color: var(--text-secondary); margin-left: auto; flex-shrink: 0; }
.bss-pulse { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%;
  background: #0F6E56; animation: bsspulse 1.3s ease-in-out infinite; }
.bss-bar { height: 5px; background: var(--bg-success, #E1F5EE); border-radius: 999px; overflow: hidden; }
.bss-bar > i { position: relative; display: block; height: 100%; background: #1D9E75;
  border-radius: 999px; overflow: hidden; transition: width 0.25s ease; }
.bss-bar > i::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40px; width: 36px;
  background: rgba(255,255,255,0.4); transform: skewX(-20deg); animation: bssflow 1.15s linear infinite; }
.bss-hint { font-size: 11px; color: var(--text-muted); }
@keyframes bsspulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.78); } }
@keyframes bssflow { from { left: -40px; } to { left: 100%; } }

.memory-hero-card {
  margin: 0 0 24px;
  padding: 24px;
  border-radius: 28px;
  background: var(--grad-orange);
  color: #fff;
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.learning-channel-rail {
  margin-bottom: 18px;
}
#page-learning > .learning-page-header,
#page-learning > .learning-channel-rail {
  padding-left: 20px;
  padding-right: 20px;
  flex-shrink: 0;
}

.learning-channel-tabs {
  display: flex;
  gap: 4px;
  min-width: 0;
  width: 100%;
  padding: 3px;
  border-radius: 12px;
  border: none;
  background: rgba(0,0,0,0.04);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.learning-channel-tabs.is-even {
  display: grid;
  grid-template-columns: repeat(var(--learning-channel-count, 3), minmax(0, 1fr));
  gap: 4px;
  overflow: hidden;
}

.learning-channel-tabs::-webkit-scrollbar {
  display: none;
}

.learning-channel-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 8px 0;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  appearance: none;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.learning-channel-tabs.is-even .learning-channel-tab {
  width: 100%;
  min-width: 0;
}

.learning-channel-tab.active {
  background: #fff;
  color: #000;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}

.learning-channel-tab.is-draft:not(.active) {
  opacity: 0.7;
}

.learning-channel-draft-badge {
  font-size: 10px;
  font-weight: 700;
  opacity: 0.8;
}

.memory-hero-label {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.94);
  margin-bottom: 10px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.12);
}

.memory-hero-value {
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.12);
}

.memory-hero-unit {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255,255,255,0.98);
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.repo-dashboard-stats {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 12px;
  padding: 0 0 8px;
  flex-shrink: 0;
}

.repo-library-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 22px 0 10px;
}

.repo-library-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: #111;
}

.repo-library-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  padding-top: 1px;
}

.repo-library-action {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #ececf1;
  background: #f7f7fb;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

.repo-library-action:active {
  opacity: 0.72;
}

.repo-library-action.is-icon {
  width: 28px;
  height: 28px;
  min-width: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: #111;
  font-size: 21px;
  font-weight: 200;
  line-height: 1;
  transform: translateY(-2px);
}

.repo-library-action.is-manage {
  color: var(--text-dim);
}

.repo-library-action.is-danger-ready {
  background: #111;
  border-color: #111;
  color: #fff;
}

.repo-library-add {
  border: none;
  background: transparent;
  color: #111;
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transform: none;
}

.repo-stat-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--separator);
  border-radius: 28px;
  padding: 20px;
}

.repo-stat-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.repo-stat-card.is-accent {
  background: var(--grad-blue);
  border: none;
  color: #fff;
  box-shadow: 0 10px 24px rgba(0,122,255,0.12);
}

.repo-streak-card {
  position: relative;
  cursor: pointer;
}

.repo-dashboard-stats .repo-stat-card:first-child {
  min-height: 104px;
  background: var(--grad-green);
  border: none;
  padding: 16px 18px;
  box-shadow: 0 10px 24px rgba(52,199,89,0.12);
}

.repo-dashboard-stats .repo-stat-card:first-child .repo-stat-label {
  color: rgba(255,255,255,0.85);
}

.repo-dashboard-stats .repo-stat-card:first-child .repo-stat-value {
  color: #fff;
}

.repo-dashboard-stats .repo-stat-card:first-child .repo-stat-unit,
.repo-dashboard-stats .repo-stat-card:first-child .repo-stat-meta,
.repo-dashboard-stats .repo-stat-card:first-child .repo-stat-meta-dot {
  color: rgba(255,255,255,0.75);
}

.repo-stat-label {
  font-size: 15px;
  font-weight: 700;
  color: #5f6470;
  margin-bottom: 0;
  white-space: nowrap;
}

.repo-stat-card.is-accent .repo-stat-label {
  color: rgba(255,255,255,0.76);
}

.repo-stat-card.is-accent .repo-stat-value {
  display: block;
  font-size: 26px;
  color: #fff;
}

.repo-stat-value {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  color: #111;
}

.repo-stat-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  flex-wrap: wrap;
}

.repo-stat-meta {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-dim);
  white-space: nowrap;
}

.repo-stat-meta-dot {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #c1c3cc;
}

.repo-stat-unit {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
}

.repo-stat-card.is-accent .repo-stat-unit {
  color: #fff;
  font-size: 16px;
}

.srs-deck-overview-scroll {
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: transparent;
}

/* 固定底部操作区：开始复习按钮移出滚动区、常驻底部，任何滚动位置都可见可点（移动端标准的「内容滚动 + 固定 CTA」）。
   padding-bottom 含 safe-bottom 避让 home indicator；顶部柔和阴影与上方滚动内容分层。 */
.srs-deck-actions {
  flex-shrink: 0;
  padding: 10px 16px calc(12px + var(--safe-bottom));
  background: #fef0f4;
  box-shadow: 0 -10px 18px -10px rgba(255, 104, 35, 0.18);
}

/* iOS 独立模式（PWA 添加到主屏 / iOS Tauri 原生 webview，由 init.js 的 lp-standalone 类标记）：
   底部 CTA 改为固定 20px 距底，与主页悬浮 tab-bar 的 standalone `bottom:20px` 视觉对齐——
   不再「基线 + 整段 safe-bottom（~34px）」叠加导致按钮下方留白过高。20px < home indicator 安全区但
   与 tab-bar 同一处理（轻微进入安全区可接受，主屏 tab-bar 已验证此距感）。
   注意：Tauri WKWebView 不上报 display-mode:standalone，故用 JS 加的类而非 @media 判定，桌面 PWA /
   桌面 Tauri / 全部浏览器都不加此类，仍走上面的 calc(基线 + safe-bottom) 原行为。 */
html.lp-standalone .srs-deck-actions {
  padding-bottom: 20px;
}

.srs-deck-summary-card {
  padding: 18px;
  border: 1px solid #ffe0c9;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 8px rgba(255, 104, 35, 0.08);
}

.srs-deck-summary-top {
  display: flex;
  align-items: center;
  gap: 16px;
}

.srs-deck-progress-ring {
  --srs-deck-progress: 0%;
  width: 96px;
  height: 96px;
  flex: 0 0 96px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#ff4f3f 0 var(--srs-deck-progress), #eaf0fb var(--srs-deck-progress) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.srs-deck-progress-ring-hole {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 50%;
  background: #fff;
}

.srs-deck-progress-percent {
  color: #ff4f3f;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}

.srs-deck-progress-label {
  margin-top: 2px;
  color: #8f6b5e;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.srs-deck-summary-copy {
  min-width: 0;
  flex: 1;
}

.srs-deck-eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 1px;
  color: #ff5a2c;
}

.srs-deck-eyebrow::before {
  content: none;
}

.srs-deck-bignum {
  display: none;
  align-items: baseline;
  gap: 6px;
  margin-top: 8px;
}

.srs-deck-bignum > span:first-child {
  font-size: 40px;
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: 0;
  color: #ff3f49;
}

.srs-deck-bignum-unit {
  font-size: 13px;
  font-weight: 900;
  color: #a8644a;
}

.srs-deck-summary-title {
  margin-top: 6px;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
  color: #2a1712;
}

.srs-deck-summary-subtitle {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: #766176;
}

.srs-deck-meter {
  width: 100%;
  height: 12px;
  display: flex;
  margin-top: 16px;
  overflow: hidden;
  border-radius: 6px;
  background: #e9edf6;
}

.srs-deck-meter-segment {
  height: 100%;
  transition: width 200ms ease;
}

.srs-deck-meter-segment.is-reviewed {
  background: linear-gradient(90deg, #ff4f3f, #ff2f78);
}

.srs-deck-meter-segment.is-due {
  background: linear-gradient(90deg, #ffb347, #ff8a00);
}

.srs-deck-meter-segment.is-ahead {
  background: repeating-linear-gradient(45deg, #ff5a2c, #ff5a2c 4px, #ff9163 4px, #ff9163 8px);
}

.srs-deck-meter-segment.is-new {
  background: #43a5f5;
}

.srs-deck-meter-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 11px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  color: #9a7057;
}

.srs-deck-meter-row span {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  white-space: nowrap;
}

.srs-deck-meter-row i {
  width: 8px;
  height: 8px;
  display: inline-block;
  margin-right: 5px;
  border-radius: 2px;
}

.srs-deck-meter-row i.is-reviewed {
  background: #ff4f3f;
}

.srs-deck-meter-row i.is-due {
  background: #ff8a00;
}

.srs-deck-meter-row i.is-ahead {
  background: repeating-linear-gradient(45deg, #ff5a2c, #ff5a2c 3px, #ff9163 3px, #ff9163 6px);
}

.srs-deck-meter-row i.is-new {
  background: #43a5f5;
}

.srs-deck-info-panel {
  padding: 14px;
  border: 1px solid #ffe0c9;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 22px rgba(255, 104, 35, 0.08);
}

.srs-deck-section-title {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  color: #2a1712;
}

.srs-deck-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 12px;
}

.srs-deck-metric-cell {
  display: block;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(255, 224, 201, 0.78);
  border-radius: 15px;
  background: #fff4e7;
}

.srs-deck-metric-cell:nth-child(2) {
  background: #eaf4ff;
  border-color: #d5e8ff;
}

.srs-deck-metric-cell:nth-child(3) {
  background: #f4efff;
  border-color: #e5dbff;
}

.srs-deck-metric-cell:nth-child(4) {
  background: #f2f4f7;
  border-color: #e5e8ee;
}

/* 概览「总短片里有 N 个已暂停复习」：只在合集里有暂停的卡时出现 */
.srs-deck-suspended-note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-dim);
}

.srs-deck-metric-label {
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  color: #8a6650;
}

.srs-deck-metric-cell:nth-child(2) .srs-deck-metric-label {
  color: #5577aa;
}

.srs-deck-metric-cell:nth-child(3) .srs-deck-metric-label {
  color: #7a6caa;
}

.srs-deck-metric-cell:nth-child(4) .srs-deck-metric-label {
  color: #7d838c;
}

.srs-deck-metric-value {
  margin-top: 7px;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  color: #ff7a00;
}

.srs-deck-metric-cell:nth-child(2) .srs-deck-metric-value {
  color: #2f7bff;
}

.srs-deck-metric-cell:nth-child(3) .srs-deck-metric-value {
  color: #7c4dff;
}

.srs-deck-metric-cell:nth-child(4) .srs-deck-metric-value {
  color: #6b7280;
}

/* 「到期待复习」完成态：今日已学习且当前到期为 0 → 绿色「已清」；尚未学习时保留裸 0 */
.srs-deck-metric-cell.is-cleared {
  background: #eafaf0;
  border-color: #c7ecd4;
}

.srs-deck-metric-cell.is-cleared .srs-deck-metric-label {
  color: #3a8f5b;
}

.srs-deck-metric-cell.is-cleared .srs-deck-metric-value {
  color: #2ba84a;
  font-size: 19px;
  white-space: nowrap;
}

.srs-deck-control-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid #ffe0c9;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 22px rgba(255, 104, 35, 0.08);
}

.srs-deck-control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.srs-deck-control-label {
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  color: #2a1712;
}

.srs-deck-control-hint {
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.25;
  color: #a8744f;
}

.srs-deck-limit-stepper {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border-radius: 14px;
  background: #fff1e3;
}

.srs-deck-limit-stepper button,
.srs-deck-limit-stepper input {
  height: 34px;
  border: none;
  background: transparent;
  color: #ff6a00;
  font: inherit;
}

.srs-deck-limit-stepper button {
  width: 36px;
  font-size: 18px;
  font-weight: 800;
  color: #ff6a00;
  cursor: pointer;
}

.srs-deck-limit-stepper button:active {
  background: rgba(255, 122, 0, 0.12);
}

.srs-deck-limit-stepper input {
  width: 42px;
  text-align: center;
  font-size: 15px;
  font-weight: 900;
  line-height: 34px;
  outline: none;
  border-left: 1px solid rgba(255, 122, 0, 0.16);
  border-right: 1px solid rgba(255, 122, 0, 0.16);
  appearance: textfield;
  -moz-appearance: textfield;
}

.srs-deck-limit-stepper input::-webkit-outer-spin-button,
.srs-deck-limit-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.srs-deck-range-wrap {
  width: 100%;
  margin-top: 0;
}

.srs-deck-range-wrap input[type="range"] {
  width: 100%;
  height: 24px;
  margin: 0;
  accent-color: #ff6a00;
}

.srs-deck-range-labels {
  display: flex;
  justify-content: space-between;
  margin-top: -2px;
  padding: 0 2px;
  color: #b88565;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.srs-deck-control-card .srs-deck-mode-picker {
  width: 100%;
  max-width: none;
  display: flex;
  gap: 0;
  margin-top: 0;
  padding: 4px;
  border-radius: 15px;
  background: #fff1e3;
  border-bottom: none;
}

.srs-deck-control-card .srs-deck-mode-picker .review-mode-btn {
  flex: 1 1 0;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 11px;
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  font-weight: 800;
  color: #b06a45;
  position: relative;
}

.srs-deck-control-card .srs-deck-mode-picker .review-mode-btn.active {
  background: #fff;
  box-shadow: 0 4px 12px rgba(255, 122, 0, 0.2);
  color: #ff5a00;
  font-weight: 900;
}

.srs-deck-control-card .srs-deck-mode-picker .review-mode-btn.active::after {
  content: none;
}

.srs-deck-warning {
  width: 100%;
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid #e8e0d0;
  background: #faf7f0;
  color: #8a6a2a;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
}

.srs-deck-start-btn {
  width: 100%;
  min-height: 52px;
  position: static;
  margin-top: 0;
  border: none;
  border-radius: 18px;
  background: linear-gradient(120deg, #ff8a00, #ff4d6d);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 7px 0 #d63a2e, 0 13px 22px rgba(255, 77, 109, 0.24);
}

.srs-deck-start-btn:active {
  transform: scale(0.985);
}

.srs-deck-start-btn:disabled {
  cursor: default;
  transform: none;
  opacity: 0.4;
}

/* ── 未来 7 天到期预测（竖向柱状，方案 A，沿用概览橙色语言）── */
.srs-deck-forecast-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.srs-deck-forecast-sum {
  font-size: 11.5px;
  font-weight: 700;
  color: #a8744f;
}

.srs-deck-forecast-sum b {
  font-size: 13px;
  font-weight: 900;
  color: #ff6a00;
}

/* 周/月/年 跨度切换：分段按钮，沿用橙色系，选中态填充橙底白字 */
.srs-deck-forecast-seg {
  display: flex;
  gap: 6px;
  margin-top: 11px;
}

.srs-deck-forecast-seg-btn {
  flex: 1 1 0;
  height: 28px;
  border-radius: 9px;
  border: 0.5px solid #ffd9bd;
  background: transparent;
  color: #a8744f;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 150ms, color 150ms, border-color 150ms;
}

.srs-deck-forecast-seg-btn.active {
  background: #ff7a00;
  border-color: #ff7a00;
  color: #fff;
}

.srs-deck-forecast-bars {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 84px;
  margin-top: 12px;
}

.srs-deck-fbar {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.srs-deck-fbar-num {
  margin-bottom: 5px;
  font-size: 11.5px;
  font-weight: 900;
  line-height: 1;
  color: #7a4a2c;
  white-space: nowrap;
}

.srs-deck-fbar-num u {
  margin-left: 1px;
  font-size: 9.5px;
  text-decoration: none;
  color: #ff3b30;
}

.srs-deck-fbar-track {
  position: relative;
  width: 100%;
  max-width: 30px;
  height: 50px;
}

.srs-deck-fbar-col {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column-reverse;
  overflow: hidden;
  border-radius: 7px 7px 3px 3px;
  background: #ffe7cf;
}

.srs-deck-fbar-seg {
  display: block;
  transition: height 200ms cubic-bezier(0.3, 0.8, 0.4, 1);
}

.srs-deck-fbar-seg.is-due {
  background: linear-gradient(180deg, #ffb347, #ff7a00);
}

.srs-deck-fbar-seg.is-ahead {
  background: repeating-linear-gradient(45deg, #ff5a2c, #ff5a2c 4px, #ff9163 4px, #ff9163 8px);
}

.srs-deck-fbar-seg.is-ghost {
  background: transparent;
  border-top: 2px dashed rgba(255, 122, 0, 0.4);
}

.srs-deck-fbar-day {
  margin-top: 7px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: #9a7057;
}

.srs-deck-fbar.is-today .srs-deck-fbar-track::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 2px solid #ff5a2c;
  border-radius: 9px;
  pointer-events: none;
}

.srs-deck-fbar.is-today .srs-deck-fbar-day {
  color: #ff5a2c;
  font-weight: 900;
}

.srs-deck-fbar.is-sel .srs-deck-fbar-col {
  box-shadow: 0 0 0 2px #ff2f78 inset;
}

.srs-deck-fbar.is-sel .srs-deck-fbar-day {
  color: #ff2f78;
  font-weight: 900;
}

.srs-deck-forecast-detail {
  margin-top: 10px;
  padding: 7px 11px;
  border-radius: 11px;
  background: #fff1e3;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.4;
  color: #a8744f;
  min-height: 30px;
}

.srs-deck-forecast-detail b {
  color: #ff5a2c;
}

/* 今天柱完成态：今日已学习且当前到期为 0 时，用绿色基线 + ✓ 表示当前已清 */
.srs-deck-fbar.is-done .srs-deck-fbar-col::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: #2ba84a;
  border-radius: 0 0 3px 3px;
}

.srs-deck-fbar-done,
.srs-deck-detail-done {
  color: #2ba84a;
  font-weight: 900;
}

/* ── 控制卡：每日上限 / 提前复习 分隔线 + 提前复习张数徽标 ── */
.srs-deck-limit-estimate {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 8px;
  overflow: hidden;
  color: #a8744f;
  font-weight: 600;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.srs-deck-control-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #ffe0c9 25%, #ffe0c9 75%, transparent);
}

.srs-deck-ahead-badge {
  flex: 0 0 auto;
  min-width: 52px;
  height: 30px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 11px;
  background: linear-gradient(120deg, #ff7a4d, #ff5a2c);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

/* 手机竖屏紧凑：配合固定底部 CTA，让主流 6.1" 概览一屏放下、减少滚动。
   只压 padding / gap / 进度环直径等留白与装饰，字号仅微降，触控尺寸（stepper 34、mode-btn 36、start-btn 52）保持不变。
   极小屏（SE 等）压不进时 .srs-deck-overview-scroll 仍可滚，固定 CTA 保证开始复习始终可点。 */
/* 手机竖屏一屏适配（含 forecast 面板 + 提前复习滑杆后内容更高）：进一步压留白/字号/把
   任务构成 2×2 改单排 4 格，保持触控尺寸（stepper 34、mode-btn 34、start-btn 固定底部）。
   实测 375×812 内容 ~672px ≤ 可用 690px，一屏不溢出；更窄/带键盘时 scroll 仍可滚、CTA 固定可点。 */
@media (max-width: 480px) {
  .srs-deck-overview-scroll { gap: 5px; }
  .srs-deck-summary-card { padding: 10px; }
  .srs-deck-summary-top { gap: 12px; }
  .srs-deck-progress-ring { width: 62px; height: 62px; flex-basis: 62px; }
  .srs-deck-progress-ring-hole { width: 50px; height: 50px; }
  .srs-deck-progress-percent { font-size: 17px; }
  .srs-deck-progress-label { font-size: 9px; }
  .srs-deck-summary-title { margin-top: 3px; font-size: 16px; }
  .srs-deck-summary-subtitle { margin-top: 2px; font-size: 11.5px; line-height: 1.4; }
  .srs-deck-meter { margin-top: 8px; height: 10px; }
  .srs-deck-meter-row { margin-top: 6px; gap: 10px; }

  .srs-deck-info-panel { padding: 9px 10px; }
  /* 2×2 → 单排 4 格（参考模板方案 A），省一整行高度 */
  .srs-deck-metrics-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-top: 7px; }
  .srs-deck-metric-cell { padding: 6px 6px; border-radius: 11px; }
  .srs-deck-metric-label { font-size: 10.5px; white-space: nowrap; }
  .srs-deck-metric-value { margin-top: 3px; font-size: 17px; }

  .srs-deck-forecast-bars { height: 80px; margin-top: 9px; }
  .srs-deck-forecast-detail { margin-top: 7px; padding: 6px 10px; min-height: 22px; line-height: 1.35; }

  .srs-deck-control-card { gap: 5px; padding: 9px 10px; }
  .srs-deck-control-hint { margin-top: 2px; font-size: 10.5px; }
  .srs-deck-range-wrap input[type="range"] { height: 22px; }
  .srs-deck-control-card .srs-deck-mode-picker { padding: 3px; }
  .srs-deck-control-card .srs-deck-mode-picker .review-mode-btn { min-height: 34px; }
  /* 把回调的标签/轨道高度从底部 CTA 区借空间：按钮 52→46（仍 ≥44 触控线，字号不变不伤可读），
     固定底栏留白略收，净腾出 ~一两像素、保持一屏不溢出 */
  .srs-deck-actions { padding: 8px 16px calc(10px + var(--safe-bottom)); }
  .srs-deck-start-btn { min-height: 46px; }
}

.repo-streak-bubble {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: max-content;
  max-width: calc(100vw - 48px);
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(19, 19, 24, 0.96);
  color: #fff;
  box-shadow: 0 16px 32px rgba(12, 16, 24, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  pointer-events: none;
  z-index: 20;
}

.repo-streak-bubble::after {
  content: '';
  position: absolute;
  right: 28px;
  bottom: 100%;
  width: 12px;
  height: 12px;
  background: rgba(19, 19, 24, 0.96);
  transform: rotate(45deg) translateY(6px);
  border-radius: 2px;
}

.repo-streak-bubble.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.repo-streak-bubble-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: rgba(255,255,255,0.96);
}

.repo-streak-bubble-rule {
  font-size: 12px;
  color: rgba(255,255,255,0.72);
  line-height: 1.6;
  margin-top: 2px;
}


.repo-library-list {
  background: transparent;
}

.repo-library-item {
  background: var(--card);
  border-radius: 20px;
  padding: 14px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  border: 1px solid var(--separator);
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.12s ease;
  -webkit-user-select: none;
  user-select: none;
}

.repo-library-item:active {
  transform: scale(0.985);
  opacity: 0.92;
}

.repo-library-item.selected {
  background: rgba(17, 17, 17, 0.04);
}

.repo-library-item-main {
  flex: 1;
  min-width: 0;
}

.repo-library-item-name {
  font-size: 19px;
  font-weight: 600;
  color: #111;
  margin-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.repo-library-status {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 16px;
}

.repo-library-select-dot {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1.5px solid #d8d8de;
  background: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: transparent;
}

.repo-library-manage .repo-library-select-dot {
  display: inline-flex;
}

.repo-library-item.selected .repo-library-select-dot {
  background: #111;
  border-color: #111;
  color: #fff;
}

.repo-library-chevron {
  color: var(--text-dim);
  font-size: 18px;
  font-weight: 600;
}

.nav-btn {
  background: none;
  border: none;
  color: var(--blue);
  font-size: 17px;
  font-weight: 400;
  cursor: pointer;
  padding: 8px 4px;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  -webkit-user-select: none;
  user-select: none;
}
.nav-btn:active { opacity: 0.5; }
.nav-btn.icon { font-size: 22px; font-weight: 400; }

/* ══════════════════════════════════════
   底部 TabBar
══════════════════════════════════════ */
.tab-bar {
  position: fixed;
  left: 50%;
  bottom: calc(4px + var(--safe-bottom));
  transform: translateX(-50%);
  height: auto;
  width: auto;
  min-width: 0;
  max-width: calc(100vw - 32px);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
  border: 0.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 35px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  z-index: 900;
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), opacity 0.25s cubic-bezier(0.4,0,0.2,1);
}
@media (display-mode: standalone) {
  .tab-bar { bottom: 20px; }
}
.tab-bar.hidden {
  transform: translate(-50%, 140%);
  opacity: 0;
  pointer-events: none;
}

.tab-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: rgba(0,0,0,0.4);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, opacity 0.15s;
  padding: 10px 20px;
  border-radius: 28px;
  -webkit-user-select: none;
  user-select: none;
}
.tab-item.active {
  color: #fff;
  background: #000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.tab-item .tab-icon { display: none; }

.learning-video-status-btn {
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}

/* ══════════════════════════════════════
   Learning Browser
══════════════════════════════════════ */
.browser-page {
  padding-bottom: 0;
  background: #fff;
  overflow: hidden;
}

.browser-toolbar {
  flex: 0 0 auto;
  display: block;
  padding: 8px 12px;
  background: rgba(248, 249, 250, 0.96);
  border-bottom: 0.5px solid var(--separator);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  z-index: 3;
}

.browser-main-row {
  display: grid;
  grid-template-columns: 34px 34px 34px minmax(60px, 1fr) 48px 34px 34px 34px;
  gap: 6px;
  align-items: center;
  min-height: 36px;
  grid-auto-flow: column;
}

.browser-status-line {
  min-height: 18px;
  margin-top: 6px;
  color: #586069;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.browser-icon-btn,
.browser-text-btn {
  height: 34px;
  border: 1px solid #d9dde3;
  border-radius: 8px;
  background: #fff;
  color: #1f2328;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  appearance: none;
}

.browser-icon-btn {
  width: 34px;
  font-size: 15px;
  line-height: 1;
}

.browser-text-btn {
  min-width: 48px;
  padding: 0 10px;
}

.browser-icon-btn:disabled,
.browser-text-btn:disabled {
  opacity: 0.42;
  cursor: default;
}

.browser-url-input {
  width: 100%;
  height: 34px;
  min-width: 0;
  padding: 0 12px;
  border: 1px solid #d9dde3;
  border-radius: 8px;
  background: #fff;
  color: #1f2328;
  font-size: 14px;
  outline: none;
}

.browser-url-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
}

.browser-url-input.is-error {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.14);
}

.browser-text-btn.is-error {
  border-color: var(--red);
  color: var(--red);
}

.browser-body {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: row;
}

.browser-webview-slot {
  flex: 1 1 0%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #fff;
  padding-bottom: 80px;
  z-index: 0;
}

.browser-transcript-drawer {
  flex: 0 0 360px;
  display: none;
  flex-direction: column;
  background: #fff;
  border-left: 0.5px solid var(--separator);
  padding-bottom: 80px;
  min-height: 0;
}

.browser-transcript-drawer.is-open {
  display: flex;
}

.browser-transcript-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(248, 249, 250, 0.96);
  border-bottom: 0.5px solid var(--separator);
}

.browser-transcript-title {
  font-size: 14px;
  font-weight: 700;
  color: #1f2328;
  flex: 0 0 auto;
}

.browser-transcript-count {
  flex: 1 1 auto;
  font-size: 12px;
  color: #909499;
}

.browser-transcript-list {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 0;
  scroll-behavior: smooth;
}

.browser-transcript-empty {
  padding: 20px 14px;
  color: #909499;
  font-size: 13px;
  text-align: center;
}

.browser-transcript-cue {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 8px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: #586069;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}

.browser-transcript-cue:hover {
  background: rgba(0, 122, 255, 0.06);
}

.browser-transcript-cue.is-current {
  background: rgba(0, 122, 255, 0.1);
  color: #1f2328;
  border-left-color: var(--blue);
  font-weight: 600;
}

.browser-transcript-cue-time {
  display: block;
  font-size: 11px;
  color: #909499;
  margin-bottom: 2px;
  font-variant-numeric: tabular-nums;
}

/* ─── 抽屉恒浅色：暗色下把主题变量在抽屉作用域内钉回浅色一份 ───
   浏览器页整块 chrome 都是硬编码浅色（.browser-page / toolbar / 图标按钮 / URL 栏 /
   .browser-transcript-header / -title / -count 一律 #fff + #1f2328，全仓没有一条
   body.dark .browser-* ），抽屉是这块浅色面板的一部分；右侧 webview 里又是站点自己的
   页面。抽屉单独翻暗＝浅色工具栏底下挂一块暗板，故这里选择锁浅色而不是补暗色。
   widget 化之前 .browser-transcript-cue 用 color:#586069 显式钉死深色文字，就是同一个
   约定；改由 TranscriptWidget 渲染后 .line/.content 落回继承 var(--text)，body.dark 下
   --text = #f2f2f7，白底白字。

   做法是重声明变量而非逐条写死颜色：抽屉子树内 var(--text) / var(--card) / var(--border)
   自动解析成浅色一份（.content 的文字色、.play-btn 的底/描边都在此列），widget 日后新增
   的 var 驱动样式不必再补规则。变量解析从元素自身开始，故抽屉自己那条
   border-left: var(--separator) 也吃这份浅色值。
   ⚠ 本节同时是 player.css「已配图短语」预混值的前提：抽屉恒白底，
   .lp-transcript-container 上那份按 #fff 算的浅色预混值才成立；要改抽屉底色，
   必须同步重算那 4 个值并更新 player.css 两处注释。 */
body.dark .browser-transcript-drawer {
  --text:      #1c1c1e;
  --card:      #ffffff;
  --border:    #d1d1d6;
  --separator: rgba(60, 60, 67, 0.12);
}

/* 下面四处钉不住：暗色值是硬编码字面量，不经变量，只能逐条压回。 */
body.dark .browser-transcript-drawer .custom-bold {
  /* player.css: body.dark .custom-bold { color:#fff !important } —— 白底上等于隐形 */
  color: #1c1c1e !important;
}
body.dark .browser-transcript-drawer .line {
  /* player.css: body.dark .line 把分隔线改成 rgba(255,255,255,0.04) */
  --line-separator: rgba(60, 60, 67, 0.05);
}
body.dark .browser-transcript-drawer .transcript-widget__empty {
  /* transcript-widget.css 暗色版是 rgba(255,255,255,0.45)；与静态占位
     .browser-transcript-empty 的 #909499 对齐 */
  color: #909499;
}
/* 多带一层 .transcript-widget--list：transcript-widget.css 的
   body.dark .transcript-widget--list .line.is-current 与本条同为 (0,4,1)，
   而该文件在 base.css 之后加载，平权时它赢——必须靠特异性压过，不能靠顺序。 */
body.dark .browser-transcript-drawer .transcript-widget--list .line.is-current {
  /* transcript-widget.css 暗色版是 rgba(10,132,255,0.18)，回到浅色档 */
  background: rgba(0, 122, 255, 0.1);
}

@media (max-width: 720px) {
  .browser-toolbar {
    padding: 7px 8px;
  }

  .browser-main-row {
    grid-template-columns: 32px 32px 32px minmax(72px, 1fr) 42px 32px 32px 32px;
    gap: 5px;
  }

  .browser-icon-btn {
    width: 32px;
  }

  .browser-icon-btn,
  .browser-text-btn,
  .browser-url-input {
    height: 32px;
  }

  .browser-transcript-drawer {
    flex: 0 0 280px;
  }
}

.learning-video-status-btn.is-live {
  border-color: var(--orange);
  color: var(--orange);
  background: rgba(255, 149, 0, 0.08);
}

/* ══════════════════════════════════════
   滚动列表容器
══════════════════════════════════════ */
.list-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px 20px;
}

/* ══════════════════════════════════════
   大标题（iOS 风格）
══════════════════════════════════════ */
.large-title {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.5px;
  padding: 8px 16px 4px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════
   卡组列表项
══════════════════════════════════════ */
/* 公共内容分区标题 */
.list-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 4px 8px;
}

.deck-item {
  background: var(--card);
  border-radius: 20px;
  padding: 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  border: 1px solid var(--separator);
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.12s ease;
  -webkit-user-select: none;
  user-select: none;
}

.deck-item:active {
  transform: scale(0.985);
  opacity: 0.92;
}

.deck-item-left { flex: 1; min-width: 0; }
.deck-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}
.deck-sub {
  font-size: 13px;
  color: var(--text-dim);
}

.deck-item-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: 8px;
}

.deck-badge {
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: 13px;
  background: var(--blue);
  color: white;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.deck-badge.orange { background: var(--orange); }
.deck-badge.empty  { background: #e5e5ea; color: var(--text-dim); }

.deck-chevron {
  color: var(--border);
  font-size: 15px;
  font-weight: 600;
}

.media-list-card {
  background: var(--card);
  border-radius: 20px;
  padding: 14px;
  margin-bottom: 12px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  border: 1px solid var(--separator);
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.12s ease;
  -webkit-user-select: none;
  user-select: none;
}

.media-list-card:active {
  transform: scale(0.985);
  opacity: 0.92;
}

.media-list-card.current-playing {
  border-color: var(--blue);
  box-shadow: 0 4px 12px rgba(0,122,255,0.12);
}

.media-list-thumb {
  position: relative;
  width: 90px;
  height: 60px;
  flex: 0 0 90px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, #ececf1, #dbdbe3);
}

.media-list-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.media-list-thumb img.thumb-loaded {
  opacity: 1;
}

/* 图来自缓存（onload 耗时 < 50ms）时由 learning.js 一并挂上，跳过淡入直接显示。
   淡入是为了缓和「等网络等出来的图突然弹出」；图本来就在本地时，那 0.2s 动画
   就是用户看到的全部「加载过程」。必须和 .thumb-loaded 同一帧加，否则过渡照常触发。 */
.media-list-thumb img.thumb-instant {
  transition: none;
}

.media-list-thumb-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: rgba(28, 28, 30, 0.5);
}

.media-list-duration {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255,255,255,0.92);
  color: #111;
  font-size: 9px;
  font-weight: 700;
}

.media-list-body {
  flex: 1;
  min-width: 0;
}

.media-list-body.compact .media-list-title-row {
  margin-bottom: 10px;
}

.media-list-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  min-width: 0;
}

.media-list-title {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media-list-meta {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 8px;
}

.media-list-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.media-list-progress-track {
  flex: 1;
  min-width: 0;
  height: 4px;
  border-radius: 999px;
  background: #e5e5ea;
  overflow: hidden;
}

.media-list-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
}

.media-list-progress-fill.done {
  background: var(--green);
}

.media-list-progress-fill.failed {
  background: var(--red);
}

.media-list-progress-label {
  min-width: 36px;
  text-align: right;
  font-size: 11px;
  color: var(--blue);
  font-weight: 700;
}

.media-list-progress-label.done {
  color: var(--green);
}

.media-list-progress-label.failed {
  color: var(--red);
}

.media-list-side {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
}

.repo-card-select-check {
  position: absolute;
  left: 6px;
  top: 6px;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,0.92);
  background: rgba(0,0,0,0.24);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.manage-mode .repo-card-select-check {
  display: flex;
}

.media-list-card.selected {
  border-color: var(--blue);
  background: var(--blue-light);
}

.media-list-card.selected .repo-card-select-check {
  display: flex;
  background: var(--blue);
  border-color: var(--blue);
}

.media-list-current-badge {
  font-size: 11px;
  color: var(--green);
  font-weight: 700;
  white-space: nowrap;
}

.media-deck-card {
  background: var(--card);
  border-radius: 20px;
  padding: 14px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 0.5px solid var(--separator);
  box-shadow: 0 6px 18px rgba(0,0,0,0.035);
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.12s ease;
  -webkit-user-select: none;
  user-select: none;
}

.media-deck-card:active {
  transform: scale(0.988);
  opacity: 0.94;
}

.media-deck-thumb {
  position: relative;
  width: 82px;
  height: 82px;
  flex: 0 0 82px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, #ececf1, #dbdbe3);
}

.media-deck-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.media-deck-thumb img.thumb-loaded {
  opacity: 1;
}

.media-deck-thumb-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: rgba(28, 28, 30, 0.42);
}

.media-deck-count-badge {
  position: absolute;
  right: 6px;
  bottom: 6px;
  min-width: 34px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.96);
  color: #111;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.media-deck-body {
  flex: 1;
  min-width: 0;
}

.media-deck-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 6px;
}

.media-deck-meta {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 10px;
}

.media-deck-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.media-deck-progress-track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: #e7e8ee;
  overflow: hidden;
}

.media-deck-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4da2ff, #007aff);
}

.media-deck-progress-fill.done {
  background: linear-gradient(90deg, #54d36d, #34c759);
}

.media-deck-progress-label {
  min-width: 44px;
  text-align: right;
  font-size: 11px;
  font-weight: 800;
  color: var(--blue);
}

.media-deck-progress-label.done {
  color: var(--green);
}

.media-deck-side {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  align-self: stretch;
  padding-top: 4px;
}


/* ══════════════════════════════════════
   统计摘要卡片（卡库页顶部）
══════════════════════════════════════ */
.stats-summary-card {
  background: var(--card);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 1px 6px rgba(0,0,0,0.04);
  cursor: pointer;
  transition: opacity 0.12s;
  -webkit-user-select: none;
  user-select: none;
}
.stats-summary-card:active { opacity: 0.7; }

.stats-summary-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.stats-summary-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.stats-summary-chevron {
  color: var(--border);
  font-size: 15px;
  font-weight: 600;
}

.stats-summary-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 环形进度 */
.stats-ring-wrap {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}
.stats-ring-wrap svg {
  transform: rotate(-90deg);
}
.stats-ring-bg { fill: none; stroke: var(--bg); stroke-width: 5; }
.stats-ring-fg { fill: none; stroke: var(--blue); stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset 0.6s ease; }
.stats-ring-fg.done { stroke: var(--green); }
.stats-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.stats-ring-num {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.stats-ring-denom {
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 1px;
}

/* 右侧数据列 */
.stats-summary-info {
  flex: 1;
  display: flex;
  gap: 0;
  flex-direction: column;
  justify-content: center;
}
.stats-info-item {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 0;
}
.stats-info-val {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.stats-info-label {
  font-size: 12px;
  color: var(--text-dim);
}
.stats-streak-flame { font-size: 16px; }

/* ══════════════════════════════════════
   统计详情底部面板
══════════════════════════════════════ */
#statsPanel {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  flex-direction: column;
  -webkit-user-select: none;
  user-select: none;
}
#statsPanel.open { display: flex; }

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

.stats-sheet {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  background: var(--bg);
  border-radius: 20px 20px 0 0;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

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

.stats-sheet-title {
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  padding: 12px 16px 4px;
  flex-shrink: 0;
}

.stats-sheet-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px 24px;
}

/* 统计区块 */
.stats-section {
  background: var(--card);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 12px;
}
.stats-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 12px;
}

/* 今日详情大数字行 */
.stats-today-row {
  display: flex;
  justify-content: space-around;
  text-align: center;
}
.stats-today-item {}
.stats-today-num {
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.stats-today-num.blue  { color: var(--blue); }
.stats-today-num.green { color: var(--green); }
.stats-today-num.orange{ color: var(--orange); }
.stats-today-label {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 4px;
}

/* 进度条 */
.stats-progress-wrap {
  margin-top: 12px;
  background: var(--bg);
  border-radius: 4px;
  height: 6px;
  overflow: hidden;
}
.stats-progress-bar {
  height: 100%;
  background: var(--blue);
  border-radius: 4px;
  transition: width 0.6s ease;
}
.stats-progress-bar.done { background: var(--green); }
.stats-progress-label {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 6px;
  text-align: right;
}

/* 7天柱状图 */
.stats-bar-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 80px;
  gap: 4px;
}
.stats-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
.stats-bar {
  width: 100%;
  background: var(--blue-light);
  border-radius: 4px 4px 0 0;
  min-height: 3px;
  transition: height 0.4s ease;
  position: relative;
}
.stats-bar.today { background: var(--blue); }
.stats-bar.has-data { background: rgba(0,122,255,0.35); }
.stats-bar-label {
  font-size: 10px;
  color: var(--text-dim);
  text-align: center;
  flex-shrink: 0;
}
.stats-bar-num {
  font-size: 10px;
  color: var(--text-dim);
  text-align: center;
}

/* 总览行（掌握率）*/
.stats-overview-row {
  display: flex;
  justify-content: space-around;
  text-align: center;
}
.stats-overview-item {}
.stats-overview-num {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.stats-overview-label {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 4px;
}

/* 掌握率进度条 */
.stats-mastery-bar-wrap {
  margin-top: 14px;
  background: var(--bg);
  border-radius: 6px;
  height: 8px;
  overflow: hidden;
}
.stats-mastery-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--green));
  border-radius: 6px;
  transition: width 0.6s ease;
}

/* Streak 大展示 */
.stats-streak-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.stats-streak-big {
  font-size: 48px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}
.stats-streak-right {}
.stats-streak-fire { font-size: 32px; line-height: 1; }
.stats-streak-desc { font-size: 13px; color: var(--text-dim); margin-top: 2px; }

/* 深色模式适配 */
body.dark .stats-summary-card,
body.dark .stats-section { background: #2c2c2e; box-shadow: none; }
body.dark .stats-ring-bg { stroke: #3a3a3c; }
body.dark .stats-bar.has-data { background: rgba(0,122,255,0.4); }
body.dark .stats-progress-wrap,
body.dark .stats-mastery-bar-wrap { background: #3a3a3c; }

/* ══════════════════════════════════════
   快速继续复习入口（底部胶囊）
══════════════════════════════════════ */
/* 卡库内容容器 */
.srs-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* 列表按内容高度，不足时可缩小，溢出时滚动 */
#srs-quick-resume {
  position: fixed;
  left: 50%;
  bottom: calc(102px + var(--safe-bottom));
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
  z-index: 850;
}
#srs-quick-resume.dock-visible {
  opacity: 1;
  visibility: visible;
}
.quick-resume-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #000;
  border-radius: 40px;
  padding: 10px 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  cursor: pointer;
  width: auto;
  min-width: 0;
  max-width: min(292px, calc(100vw - 56px));
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  transition: opacity 0.12s, transform 0.1s;
}
.quick-resume-pill:active {
  opacity: 0.65;
  transform: scale(0.98);
}
.quick-resume-pill-icon {
  width: auto;
  height: auto;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  flex-shrink: 0;
}
.quick-resume-pill-body {
  flex: 1;
  min-width: 0;
}
.quick-resume-pill-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quick-resume-pill-badge {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  min-width: 24px;
  text-align: center;
}

@media (max-width: 640px) {
  .tab-bar {
    width: auto;
    max-width: calc(100vw - 32px);
    gap: 4px;
    padding: 8px;
    border-radius: 28px;
  }

  .tab-item {
    flex: 0 0 auto;
    min-width: 84px;
    padding: 10px 18px;
  }

  #srs-quick-resume {
    bottom: calc(98px + var(--safe-bottom));
    width: auto;
    max-width: min(292px, calc(100vw - 56px));
  }

  .quick-resume-pill {
    width: auto;
    justify-content: flex-start;
  }
}

#srs-list {
  padding: 0 0 16px;
}

/* #page-srs specific overrides removed to follow modern card design */
#page-srs .deck-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0;
}

#page-srs .deck-item-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 14px;
}

#page-srs .deck-badge {
  min-width: 32px;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background: #000;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

#page-srs .deck-badge.empty {
  background: var(--bg);
  color: var(--text-dim);
}

#page-srs .deck-chevron {
  color: var(--text-dim);
  font-size: 16px;
  opacity: 0.5;
}

.learning-video-list {
  background: transparent;
}

#page-learning .media-list-card {
  margin-bottom: 14px;
}

#page-learning .media-list-card:active {
  opacity: 0.92;
}

#page-learning .media-list-body.compact .media-list-title-row {
  margin-bottom: 10px;
}

#page-learning .media-list-progress {
  gap: 12px;
}

#page-learning .media-list-progress-label {
  min-width: 40px;
}

#page-learning .learning-video-status-btn {
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  background: #fff;
}

.memory-dashboard-scroll .empty-state,
.learning-dashboard-scroll .empty-state,
.repo-dashboard-scroll .empty-state {
  padding-top: 72px;
}

/* ══════════════════════════════════════
   空状态
══════════════════════════════════════ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 30px;
  color: var(--text-dim);
  text-align: center;
}
.empty-state .empty-icon { font-size: 52px; line-height: 1; }
.empty-state .empty-title { font-size: 17px; font-weight: 600; color: var(--text); }
.empty-state .empty-desc  { font-size: 14px; line-height: 1.5; }
.empty-state .empty-btn {
  margin-top: 8px;
  padding: 10px 24px;
  background: var(--blue);
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.empty-state .empty-btn:active { opacity: 0.75; }


/* ══════════════════════════════════════
   分组标题（Section Header）
══════════════════════════════════════ */
.section-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 18px 4px 6px;
}

/* ══════════════════════════════════════
   Modal 底部弹窗
══════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.40);
  z-index: 1000;
  display: none;
  align-items: flex-end;
  justify-content: center;
}
.modal-overlay.open {
  display: flex;
  animation: overlayIn 0.2s ease;
}
@keyframes overlayIn { from { opacity:0 } to { opacity:1 } }

.modal-overlay-center {
  align-items: center !important;
}
.modal-dialog-center {
  width: calc(100% - 56px);
  max-width: 320px;
  background: var(--card);
  border-radius: 16px;
  padding: 24px 20px 16px;
  animation: dialogPop 0.25s cubic-bezier(0.32,0.72,0,1);
}
.center-confirm-subtle {
  display: block;
  margin: 8px auto 0;
  padding: 6px 8px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.center-confirm-subtle:active {
  opacity: .55;
}
@keyframes dialogPop { from { opacity:0; transform:scale(0.9) } to { opacity:1; transform:scale(1) } }

/* 隐藏 number input 的 spinner */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }

.modal-sheet {
  width: 100%;
  max-width: 560px;
  background: var(--card);
  border-radius: 20px 20px 0 0;
  padding: 0 0 calc(16px + var(--safe-bottom));
  animation: sheetUp 0.3s cubic-bezier(0.32,0.72,0,1);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@keyframes sheetUp {
  from { transform: translateY(100%) }
  to   { transform: translateY(0) }
}

.sheet-handle {
  width: 36px;
  height: 5px;
  background: var(--border);
  border-radius: 3px;
  margin: 12px auto 16px;
  flex-shrink: 0;
}

.sheet-title {
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  padding: 0 20px 16px;
  flex-shrink: 0;
  color: var(--text);
}

.sheet-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 20px;
}

#statsDaySheet .sheet-body {
  padding-bottom: 16px;
}

.sheet-btns {
  display: flex;
  gap: 10px;
  padding: 16px 20px 0;
  flex-shrink: 0;
}

.sheet-btn {
  flex: 1;
  height: 50px;
  border-radius: 14px;
  border: none;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.12s;
}
.sheet-btn:active { opacity: 0.75; }
.sheet-btn:disabled { cursor: default; opacity: 0.42; }
.btn-cancel  { background: #e5e5ea; color: var(--text); }
.btn-confirm { background: var(--blue); color: white; }
.btn-danger  { background: var(--red); color: white; }

/* 归属未知图片：默认隔离核对，明确确认后可删除二次复核仍无引用的交集。 */
.unknown-image-inspector-sheet { max-width: 720px; }
.unknown-image-inspector-note {
  margin: -4px 20px 12px;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  flex-shrink: 0;
}
.unknown-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  padding: 0 0 16px;
}
.unknown-image-card {
  overflow: hidden;
  border: 1px solid var(--separator);
  border-radius: 12px;
  background: var(--bg);
}
.unknown-image-thumbnail {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 128px;
  overflow: hidden;
  color: var(--text-dim);
  font-size: 12px;
  text-align: center;
  background: #e5e5ea;
}
.unknown-image-thumbnail.loading { animation: unknownImagePulse 1.2s ease-in-out infinite alternate; }
.unknown-image-thumbnail.unavailable { padding: 12px; background: #fff3cd; color: #7a5a00; }
.unknown-image-thumbnail img {
  display: block;
  width: 100%;
  height: 156px;
  object-fit: cover;
  cursor: zoom-in;
}
.unknown-image-file-size {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 2px 5px;
  border-radius: 5px;
  background: rgba(0, 0, 0, .58);
  color: #fff;
  font-size: 10px;
}
.unknown-image-details { padding: 9px; }
.unknown-image-id {
  display: block;
  margin-bottom: 7px;
  overflow: hidden;
  color: var(--text);
  font-size: 10px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.unknown-image-meta-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 5px;
  color: var(--text-dim);
  font-size: 10px;
  line-height: 1.32;
}
.unknown-image-meta-row span:last-child { color: var(--text); }
.unknown-image-empty {
  padding: 30px 0 40px;
  color: var(--text-dim);
  text-align: center;
  font-size: 14px;
}
.unknown-image-preview {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 22px;
  background: rgba(0, 0, 0, .92);
}
.unknown-image-preview[hidden] { display: none; }
.unknown-image-preview img {
  max-width: 100%;
  max-height: calc(88vh - 110px);
  object-fit: contain;
}
.unknown-image-preview code {
  max-width: 100%;
  overflow-wrap: anywhere;
  color: #fff;
  font-size: 11px;
  text-align: center;
}
.unknown-image-preview-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  font-size: 27px;
  line-height: 1;
}
@keyframes unknownImagePulse { from { opacity: .65; } to { opacity: 1; } }

/* ══════════════════════════════════════
   表单字段
══════════════════════════════════════ */
.form-field { margin-bottom: 16px; }
.form-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
  margin-bottom: 6px;
  display: block;
}
.form-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  font-family: inherit;
  background: var(--bg);
  border: 1.5px solid transparent;
  border-radius: 11px;
  outline: none;
  color: var(--text);
  transition: border-color 0.2s, background 0.2s;
  -webkit-appearance: none;
}
.form-input:focus {
  background: var(--card);
  border-color: var(--blue);
}

/* ══════════════════════════════════════
   类型选择器（卡库/仓库）
══════════════════════════════════════ */
.type-picker {
  display: flex;
  gap: 10px;
  margin-bottom: 4px;
}
.type-option {
  flex: 1;
  padding: 14px 10px;
  border-radius: 13px;
  border: 2px solid var(--border);
  background: var(--bg);
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
}
.type-option.selected {
  border-color: var(--blue);
  background: var(--blue-light);
}
.type-option .type-icon { font-size: 26px; line-height: 1; display: block; margin-bottom: 5px; }
.type-option .type-name { font-size: 14px; font-weight: 600; color: var(--text); }
.type-option .type-desc { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.type-option.selected .type-name { color: var(--blue); }

/* 挖空策略选择：带描述的选项竖向列表(横向 flex:1 会挤),左对齐;用 N 的选项行尾内联一个 N 输入框。 */
.cloze-strat-picker { display: flex; flex-direction: column; gap: 8px; }
.cloze-strat-picker .type-option { text-align: left; display: flex; align-items: center; gap: 12px; }
.cloze-strat-main { flex: 1; min-width: 0; }
.cloze-strat-n {
  width: 62px; flex-shrink: 0; text-align: center; font-size: 16px; font-family: inherit;
  padding: 9px 6px; border: 1.5px solid var(--border); border-radius: 9px;
  background: var(--card); color: var(--text); outline: none; -webkit-appearance: none;
}
.cloze-strat-n:focus { border-color: var(--blue); }

/* ══════════════════════════════════════
   长按菜单（Action Sheet）
══════════════════════════════════════ */
.action-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 1100;
  display: none;
  align-items: flex-end;
  padding: 0 8px calc(var(--safe-bottom) + 8px);
}
.action-sheet-overlay.open {
  display: flex;
  animation: overlayIn 0.2s ease;
}
.action-sheet {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}
.action-group {
  background: rgba(255,255,255,0.97);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 8px;
}
.action-item {
  padding: 16px 20px;
  font-size: 17px;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 0.5px solid var(--separator);
  -webkit-user-select: none;
  user-select: none;
}
.action-item:last-child { border-bottom: none; }
.action-item:active { background: rgba(0,0,0,0.06); }
.action-item.danger { color: var(--red); }
.action-item .action-icon { font-size: 20px; }
.action-cancel {
  background: rgba(255,255,255,0.97);
  border-radius: 14px;
  padding: 16px 20px;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
}
.action-cancel:active { background: rgba(0,0,0,0.06); }

/* ══════════════════════════════════════
   重命名内联输入框
══════════════════════════════════════ */
.rename-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 16px;
  font-family: inherit;
  background: var(--bg);
  border: 1.5px solid var(--blue);
  border-radius: 10px;
  outline: none;
  color: var(--text);
  margin-bottom: 12px;
}

/* ══════════════════════════════════════
   Toast 提示
══════════════════════════════════════ */
.lp-toast {
  position: fixed;
  bottom: calc(var(--tab-h) + var(--safe-bottom) + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(28,28,30,0.88);
  color: white;
  padding: 9px 18px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  /* 压过所有会自己弹 toast 的浮层：翻译面板 2401（不透明全屏）、词典 2701、Bing 9999、
     词卡 10001、配图面板 10003、图片预览 10010——原先 2000 时在这些层里触发的提示全被盖住。
     让开拼写门禁 10020：它同样贴底、正好压在 toast 的位置上，用户正对着它敲字母。
     字幕/声块编辑器（100000）仍在上面，编辑器里的提示照旧被它的遮罩压暗。理由见 DECISIONS.md。
     全屏播放时 #toast 由 player-fullscreen.js 挪进全屏容器。 */
  z-index: 10015;
  white-space: nowrap;
  backdrop-filter: blur(10px);
}
.lp-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* 带操作按钮的提示（ui.js showActionToast）。版式跟着 has-action 走、淡出时不跳；
   吃点击只在可见时（.show）——普通提示与淡出后的透明提示都不挡下面的内容。 */
.lp-toast.has-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 5px 5px 18px;
}
.lp-toast.has-action.show { pointer-events: auto; }
.lp-toast-action {
  border: none;
  border-radius: 16px;
  background: rgba(255,255,255,0.18);
  color: #fff;
  font: inherit;
  font-weight: 600;
  padding: 7px 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lp-toast-action:active { background: rgba(255,255,255,0.3); }

/* ══════════════════════════════════════
   浮动操作按钮
══════════════════════════════════════ */
#floatBtn {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  z-index: 1500;
  display: none; /* 只在播放器页面显示 */
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  box-shadow: 0 3px 12px rgba(0,0,0,0.22), 0 1px 4px rgba(0,0,0,0.14);
  transition: background 0.18s, opacity 0.18s, transform 0.12s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
#floatBtn.fb-idle {
  background: rgba(142,142,147,0.55);
  opacity: 0.55;
}
#floatBtn.fb-word {
  background: var(--blue);
  opacity: 1;
}
#floatBtn.fb-sentence {
  background: var(--orange);
  opacity: 1;
}
#floatBtn.fb-loading {
  animation: fbSpin 1s linear infinite;
  opacity: 0.75;
}
@keyframes fbSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
#floatBtn.fb-playing {
  animation: fbPulse 0.8s ease-in-out infinite;
}
@keyframes fbPulse {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
#floatBtn:active { transform: scale(0.92); }

/* ══════════════════════════════════════
   AI 翻译浮动按钮
══════════════════════════════════════ */
#translateBtn {
  position: fixed;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  z-index: 1499;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  background: #7c3aed;
  box-shadow: 0 3px 12px rgba(0,0,0,0.22), 0 1px 4px rgba(0,0,0,0.14);
  transition: background 0.18s, opacity 0.18s, transform 0.12s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
#translateBtn:active { transform: scale(0.92); }
#translateBtn.tb-loading {
  animation: fbPulse 0.8s ease-in-out infinite;
  opacity: 0.75;
}

/* ══════════════════════════════════════
   AI 翻译结果面板
══════════════════════════════════════ */
/* ══════════════════════════════════════
   单词查询弹窗
══════════════════════════════════════ */
#wordPopupOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 10000;
}
#wordPopupOverlay.active { display: block; }



#wordPopupCard {
  display: none;
  position: fixed;
  z-index: 10001;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(88vw, 380px);
  max-height: 75vh;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0,0,0,.22);
  overflow: hidden;
  flex-direction: column;
}
#wordPopupCard.active {
  display: flex;
}

#wordPopupHeader {
  display: flex;
  align-items: flex-start;
  /* 右侧留出关闭 + 实拍两个 28px 圆钮 */
  padding: 14px 80px 10px 16px;
  flex-shrink: 0;
}
#wordPopupTitle {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  line-height: 1.5;
}
#wordPopupWord {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  flex-shrink: 0;
}
#wordPopupDefText {
  font-size: 14px;
  color: #444;
  line-height: 1.5;
  min-width: 0;
  word-break: break-word;
}
#wordPopupDefText .wp-loading {
  color: #aaa;
  font-style: italic;
}
#wordPopupSpeaker {
  border: none;
  background: rgba(0,122,255,0.1);
  color: var(--blue, #007aff);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
}
#wordPopupSpeaker:active {
  background: rgba(0,122,255,0.18);
}
#wordPopupSpeaker svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* 实拍按钮：与关闭按钮同一排，靠左一格。未收集为中性灰，已收集点亮为蓝，
   状态由 ui-word-popup 在打开弹窗时按 RealShot.has 派生，不新增持久化字段。 */
#wordPopupRealShot {
  position: absolute;
  top: 12px;
  right: 48px;
  border: none;
  background: #f0f0f0;
  color: #888;
  width: 28px; height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
#wordPopupRealShot[hidden] { display: none; }
#wordPopupRealShot:active { background: #e4e4e4; }
#wordPopupRealShot.is-collected {
  background: rgba(0,122,255,0.12);
  color: var(--blue, #007aff);
}
#wordPopupRealShot svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#wordPopupClose {
  position: absolute;
  top: 12px;
  right: 12px;
  border: none;
  background: #f0f0f0;
  color: #666;
  font-size: 18px;
  width: 28px; height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* 图片放大 lightbox */
#wpImgLightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.85);
  /* 必须高于配图挑选面板（10003）：预览是从面板的格子里点开的，盖不住就等于打不开。
     单词弹窗（10001）同理。 */
  z-index: 10010;
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-out;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
#wpImgLightbox img {
  max-width: 92vw; max-height: 88vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  -webkit-user-select: none;
  user-select: none;
  z-index: 1;
}
/* 预览层的单主操作：图库候选图用「用这张」。 */
#wpImgLightbox .wp-img-lightbox-action {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(24px, env(safe-area-inset-bottom, 0px) + 16px);
  min-width: 140px;
  padding: 11px 26px;
  border: none;
  border-radius: 999px;
  background: var(--blue, #007aff);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
#wpImgLightbox .wp-img-lightbox-action:active { transform: translateX(-50%) scale(.97); }
#wpImgLightbox .wp-img-lightbox-action.is-danger { background: #ff3b30; }
#wpImgLightbox .wp-img-lightbox-action:disabled {
  background: rgba(255,255,255,.28);
  color: rgba(255,255,255,.75);
  cursor: default;
}
/* ── 大图下方的例句说明区（一张图挂多句语境例句）──
   例句在这之前只落库、从不展示，用户看不见自己挂了什么。有说明区时图片主动让出下方空间，
   而不是把文字压在画面上——例句是要逐句读的，不是水印。 */
#wpImgLightbox .wp-img-lightbox-caption {
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: min(560px, 92vw);
  max-height: 22vh;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 13px;
  background: rgba(34,34,36,.62);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 4px 18px rgba(0,0,0,.22);
  cursor: default;
  touch-action: pan-y;
}
/* 没有例句时 caption 要真正消失：上面那条 display:flex 的特异度压过 UA 的 [hidden]，
   否则空说明区仍占着 560px 的 flex 位，把 row 布局里的图片整体挤向左边。 */
#wpImgLightbox .wp-img-lightbox-caption[hidden] { display: none; }
/* 阅读态一个控件都不挂：取下的入口在底部工具栏。行内曾常驻一个 × 按钮，它 24px 的通道
   从行首贯到行尾，两行以上的例句每行都被挤窄，单行例句还被它 34px 的触屏点击区撑高整行。 */
#wpImgLightbox .wp-img-example {
  padding: 4px 8px;
  border-radius: 9px;
}
/* 选择态：整行就是按钮，热区等于整句。这里只重置 UA 的按钮样式，可点的线索交给下面的
   左侧红竖条——背景色那一维已经被 is-current 占着，再用底色标「可点」两者会打架。 */
#wpImgLightbox .wp-img-example.is-droppable {
  position: relative;
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* 竖条走绝对定位的伪元素，不用 inset box-shadow：阴影会跟着这一行 9px 的圆角走，
   两端被裁成弧形，看着像半个括号而不是标记条。 */
#wpImgLightbox .wp-img-example.is-droppable::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  border-radius: 1px;
  background: rgba(255,107,99,.85);
}
/* 当前字幕那一条高亮：刚挂上去的是哪句，一眼可见。必须排在 is-droppable 之后——两条
   特异度相同，写在前面会被上面那句 background: transparent 抹掉。 */
#wpImgLightbox .wp-img-example.is-current { background: rgba(255,255,255,.08); }
#wpImgLightbox .wp-img-example-text {
  display: block;
  color: rgba(255,255,255,.74);
  /* 字号与对齐都跟随设置页的字幕设定：例句是逐句读的正文，与字幕同一套阅读排版 */
  font-size: var(--subtitle-font-size, 17px);
  text-align: var(--player-subtitle-text-align, center);
  line-height: 1.45;
  word-break: break-word;
}
#wpImgLightbox .wp-img-example.is-current .wp-img-example-text { color: rgba(255,255,255,.95); }
/* 选择态的抬头。工具栏那边此时只剩「取消」，「现在要干什么」得由离操作目标最近的地方讲。 */
#wpImgLightbox .wp-img-example-hint {
  padding: 1px 8px 5px;
  color: rgba(255,157,151,.82);
  font-size: 11px;
  line-height: 1.4;
}
/* 多句例句一次只显示一句，由翻页条切换。整列列出时字号一大就把图片挤没了——
   例句跟随设置字号，24px 下三四句就能占掉半屏。 */
#wpImgLightbox .wp-img-example-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 2px;
}
#wpImgLightbox .wp-img-example-page-btn {
  width: 40px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: rgba(255,255,255,.82);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
@media (hover: hover) {
  #wpImgLightbox .wp-img-example-page-btn:hover:not(:disabled) { background: rgba(255,255,255,.09); }
}
#wpImgLightbox .wp-img-example-page-btn:active:not(:disabled) { background: rgba(255,255,255,.14); }
#wpImgLightbox .wp-img-example-page-btn:disabled { color: rgba(255,255,255,.22); cursor: default; }
#wpImgLightbox .wp-img-example-page-count {
  min-width: 44px;
  color: rgba(255,255,255,.6);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
@media (hover: hover) {
  #wpImgLightbox .wp-img-example.is-droppable:hover { background: rgba(255,59,48,.13); }
}
#wpImgLightbox .wp-img-example.is-droppable:active { background: rgba(255,59,48,.18); }
#wpImgLightbox .wp-img-example.is-droppable:disabled { cursor: default; opacity: .5; }

/* 已配图片的编辑操作收进一条轻量工具栏，平时再收在底部一个图标后面（下方 menu-toggle）：
   预览是主角，追加/删除只在需要时才被注意到。 */
#wpImgLightbox .wp-img-lightbox-actions {
  position: absolute;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom, 0px) + 14px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 13px;
  background: rgba(34,34,36,.62);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 4px 18px rgba(0,0,0,.22);
  z-index: 2;

  /* 按钮数量随状态浮动（「加为例句」「取下例句」都是条件出现），四项齐发时 375px 下只剩
     23px 余量，320px 屏就直接溢出。窄屏横向滚动，绝不换行、绝不溢出视口——与划词菜单
     （player.css .global-action-menu）同一套处理。overscroll-behavior 挡住滚到头后把
     底下的 overlay 一起带走（那会被当成翻页手势）。 */
  max-width: calc(100vw - 16px);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
#wpImgLightbox .wp-img-lightbox-actions::-webkit-scrollbar { display: none; }
/* 收起态：上面那条 display:flex 的特异度压过 UA 的 [hidden]，得显式写回来。 */
#wpImgLightbox .wp-img-lightbox-actions[hidden] { display: none; }
/* 平时只露底部正中这一个图标，点开才展开工具栏（见 openImageLightbox）。与工具栏同一底边、
   同一套毛玻璃，展开 / 收起在原位替换，图片与例句都不跳。 */
#wpImgLightbox .wp-img-lightbox-menu-toggle {
  position: absolute;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom, 0px) + 14px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 999px;
  background: rgba(34,34,36,.62);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 4px 18px rgba(0,0,0,.22);
  color: rgba(255,255,255,.82);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  z-index: 4;
}
#wpImgLightbox .wp-img-lightbox-menu-toggle[hidden] { display: none; }
#wpImgLightbox .wp-img-lightbox-menu-toggle svg { fill: currentColor; }
@media (hover: hover) {
  #wpImgLightbox .wp-img-lightbox-menu-toggle:hover { background: rgba(58,58,62,.72); color: #fff; }
}
#wpImgLightbox .wp-img-lightbox-menu-toggle:active { transform: translateX(-50%) scale(.94); }
/* 菜单展开时的透明遮罩：盖住图片、翻页钮与例句（z 2），托住工具栏（z 4）。 */
#wpImgLightbox .wp-img-lightbox-menu-scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  cursor: default;
}
#wpImgLightbox .wp-img-lightbox-menu-scrim[hidden] { display: none; }
#wpImgLightbox .wp-img-lightbox-actions.is-editing {
  z-index: 4;
  transform-origin: 50% 100%;
  animation: wp-img-menu-in .16s ease-out;
}
@keyframes wp-img-menu-in {
  from { opacity: 0; transform: translateX(-50%) scale(.94); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #wpImgLightbox .wp-img-lightbox-actions.is-editing { animation: none; }
}
#wpImgLightbox .wp-img-lightbox-actions .wp-img-lightbox-action {
  position: static;
  left: auto;
  /* 不许压缩：否则 flex-shrink 会先去挤 padding，上面那条横向滚动兜底永远轮不到生效，
     按钮则一路缩到文字贴边、最后被裁。宁可滚，不要挤。 */
  flex: none;
  min-width: 0;
  padding: 8px 13px;
  transform: none;
  border-radius: 9px;
  background: transparent;
  color: rgba(255,255,255,.76);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: none;
}
#wpImgLightbox .wp-img-lightbox-actions .wp-img-lightbox-action.is-danger-subtle {
  color: rgba(255,157,151,.82);
}
@media (hover: hover) {
  #wpImgLightbox .wp-img-lightbox-actions .wp-img-lightbox-action:hover {
    background: rgba(255,255,255,.09);
    color: #fff;
  }
  #wpImgLightbox .wp-img-lightbox-actions .wp-img-lightbox-action.is-danger-subtle:hover {
    background: rgba(255,59,48,.12);
    color: #ffaaa5;
  }
}
#wpImgLightbox .wp-img-lightbox-actions .wp-img-lightbox-action:active {
  transform: scale(.97);
  background: rgba(255,255,255,.12);
}
#wpImgLightbox .wp-img-lightbox-actions .wp-img-lightbox-action:disabled {
  background: transparent;
  color: rgba(255,255,255,.42);
}
/* 看大图期间下层的白色卡片（单词弹窗 / 配图挑选面板）先让位，别透过 .85 遮罩显成一块浅灰。 */
.is-behind-lightbox { visibility: hidden; }

/* 有操作按钮时给图片留出底部空间，避免按钮压在图上 */
#wpImgLightbox:has(.wp-img-lightbox-action) img { max-height: 76vh; }

/* ── 有例句说明区时改成纵向流 ──
   图片在 overlay 里是 flex 居中的，说明区若绝对定位在底部，缩小图片只会让它上下同时收缩，
   永远算不出「一定不重叠」的高度组合。改成 column：图片与说明区作为一组一起居中，
   底部 padding 给绝对定位的编辑工具栏留位。这两条必须排在上面的 `:has` 规则之后——
   两者特异度相同（id + class + 元素），靠顺序决胜负。 */
#wpImgLightbox.has-caption {
  flex-direction: column;
  gap: 10px;
  padding: 20px 0 calc(max(22px, env(safe-area-inset-bottom, 0px) + 14px) + 52px);
}
#wpImgLightbox.has-caption img { max-height: 62vh; }
#wpImgLightbox.has-caption .wp-img-lightbox-caption { position: static; transform: none; }
/* 横屏手机这类矮视口：例句与图片按比例各让一步，否则两者相加会超出一屏。 */
@media (max-height: 560px) {
  #wpImgLightbox.has-caption img { max-height: 44vh; }
  #wpImgLightbox.has-caption .wp-img-lightbox-caption { max-height: 30vh; }
}

#wpImgLightbox .wp-img-lightbox-counter {
  position: absolute;
  top: max(14px, env(safe-area-inset-top, 0px) + 8px);
  right: 14px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  z-index: 2;
}
#wpImgLightbox .wp-img-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 64px;
  border: none;
  border-radius: 999px;
  background: rgba(0,0,0,0.46);
  color: #fff;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 18px rgba(0,0,0,0.32);
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  z-index: 2;
}
#wpImgLightbox .wp-img-lightbox-nav:hover {
  background: rgba(0,0,0,0.62);
}
#wpImgLightbox .wp-img-lightbox-nav:active {
  transform: translateY(-50%) scale(0.96);
}
#wpImgLightbox .wp-img-lightbox-nav[hidden] {
  display: none;
}
#wpImgLightbox .wp-img-lightbox-prev {
  left: 18px;
}
#wpImgLightbox .wp-img-lightbox-next {
  right: 18px;
}
@media (hover: none) and (pointer: coarse) {
  #wpImgLightbox .wp-img-lightbox-nav {
    display: none;
  }
}
/* 阻止 iOS 长按图片弹出系统菜单（共享/保存/拷贝） */
#wordPopupGallery img,
#wordImagePickerGrid img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ── 单词弹窗的多图配图区 ── */
#wordPopupImageArea {
  position: relative;
  padding: 0 16px 18px;
  flex-shrink: 0;
}
#wordPopupImageArea.wip-drop-active::after,
#wordPopupImageArea.wip-drop-busy::after {
  content: '松手上传图片';
  position: absolute;
  inset: 0 16px 18px;
  z-index: 5;
  min-height: 56px;
  display: grid;
  place-items: center;
  border: 2px dashed var(--blue, #007aff);
  border-radius: 10px;
  background: rgba(247, 251, 255, .96);
  color: var(--blue, #007aff);
  font-size: 15px;
  font-weight: 600;
  pointer-events: none;
}
#wordPopupImageArea.wip-drop-busy::after {
  content: '正在添加图片…';
  border-style: solid;
}
#wordPopupGallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 0;
}
#wordPopupGallery.single {
  grid-template-columns: minmax(0, 1fr);
}
#wordPopupGallery.single .word-popup-image-item {
  aspect-ratio: auto;
}
#wordPopupGallery.single .word-popup-image-preview {
  height: auto;
  line-height: 0;
}
#wordPopupGallery.single .word-popup-image-preview img {
  height: auto;
  max-height: 42vh;
  object-fit: contain;
  background: #f5f5f5;
}
#wordPopupGallery[hidden] { display: none; }
.word-popup-image-item {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: #f5f5f5;
}
.word-popup-image-preview,
.word-popup-image-retry {
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
}
.word-popup-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.word-popup-image-retry {
  padding: 12px 28px 12px 12px;
  color: #777;
  font-size: 12px;
  line-height: 1.4;
  white-space: pre-line;
  cursor: pointer;
}
#wordPopupAddImage {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border: 1px dashed #d0d0d0;
  border-radius: 10px;
  background: none;
  color: #888;
  font-size: 13px;
  cursor: pointer;
}
#wordPopupAddImage:active { background: #f7f7f7; }
#wordPopupAddImage[hidden] { display: none; }
#wordPopupAddImage svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
/* ── 配图挑选面板 ── */
#wordImagePickerOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 10002;
}
#wordImagePickerOverlay.active { display: block; }

#wordImagePickerCard {
  display: none;
  position: fixed;
  z-index: 10003;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 420px);
  height: min(94vh, 780px);
  height: min(94dvh, 780px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0,0,0,.22);
  overflow: hidden;
  flex-direction: column;
}
#wordImagePickerCard.active { display: flex; }
#wordImagePickerCard.wip-drop-active::after,
#wordImagePickerCard.wip-drop-busy::after {
  content: '松手添加图片';
  position: absolute;
  inset: 12px;
  z-index: 20;
  display: grid;
  place-items: center;
  border: 2px dashed var(--blue, #007aff);
  border-radius: 12px;
  background: rgba(247, 251, 255, .94);
  color: var(--blue, #007aff);
  font-size: 18px;
  font-weight: 600;
  pointer-events: none;
}
#wordImagePickerCard.wip-drop-busy::after {
  content: '正在添加图片…';
  border-style: solid;
}

#wordImagePickerHeader {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 8px;
  flex-shrink: 0;
}
#wordImagePickerTitle {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#wordImagePickerHeader button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  color: #666;
  font-size: 13px;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}
#wordImagePickerHeader svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

#wordImagePickerSearchBar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 14px;
  padding: 0 10px;
  height: 36px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  flex-shrink: 0;
}
#wordImagePickerSearchBar button {
  border: none; background: none; padding: 0;
  color: #999; cursor: pointer;
  display: inline-flex; align-items: center;
}
#wordImagePickerSearchBar svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round;
}
#wordImagePickerInput {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  font-size: 14px;
  color: #1a1a1a;
  background: none;
}
#wordImagePickerRecommendations {
  display: flex;
  flex-wrap: wrap;   /* 两个推荐词（这句 / 常见）窄屏放不下时换行，不挤成省略号 */
  align-items: center;
  gap: 4px 5px;
  min-width: 0;
  margin: 7px 14px 0;
  color: #999;
  font-size: 12px;
  line-height: 1.35;
  flex-shrink: 0;
}
#wordImagePickerRecommendations[hidden] { display: none; }
.wip-recommendation-label { flex-shrink: 0; }
.wip-recommendation-query {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  padding: 3px 8px;
  color: var(--blue, #007aff);
  background: #eef6ff;
  font: inherit;
  line-height: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.wip-recommendation-kind {
  margin-right: 4px;
  padding-right: 4px;
  border-right: 1px solid rgba(0, 122, 255, .25);
  color: #6a8fb8;
  font-size: 11px;
}
.wip-recommendation-query:focus-visible {
  outline: 2px solid var(--blue, #007aff);
  outline-offset: 1px;
}
#wordImagePickerHint {
  margin: 6px 16px 0;
  font-size: 11.5px;
  color: #bbb;
  line-height: 1.5;
  flex-shrink: 0;
}

#wordImagePickerGrid {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  margin-top: 10px;
  padding: 0 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.wip-cell {
  display: block;
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  line-height: 0;
}
.wip-cell-preview {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  border-radius: 8px;
  cursor: pointer;
  line-height: 0;      /* 去掉 inline 上下文给图片留的基线空隙 */
}
.wip-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  background: #f5f5f5;
}
/* 无选中态：点格子直接进全屏预览，选定动作在预览层的「用这张」上。
   保留一个轻的按下反馈，让格子看起来可点。 */
.wip-cell-preview:active img { opacity: .82; }
.wip-cell-preview:focus-visible {
  outline: 2px solid var(--blue, #007aff);
  outline-offset: 1px;
}
.wip-source-dot {
  position: absolute;
  left: 2px;
  bottom: 2px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  text-decoration: none;
  z-index: 1;
}
.wip-source-dot::before {
  content: '';
  width: 8px;
  height: 8px;
  border: 1.5px solid rgba(255,255,255,.96);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.45);
}
.wip-source-pixabay::before { background: #4c8bf5; }
.wip-source-pexels::before { background: #05a081; }
.wip-source-dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -3px;
  border-radius: 50%;
}
.wip-status {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px 16px;
  color: #bbb;
  font-size: 13px;
}

#wordImagePickerFooter {
  padding: 12px 14px 14px;
  flex-shrink: 0;
}
#wordImagePickerPager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}
#wordImagePickerPager[hidden] { display: none; }
#wordImagePickerPager button {
  padding: 8px 10px;
  border: 1px solid #eee;
  border-radius: 8px;
  background: none;
  color: #888;
  font-size: 12.5px;
  cursor: pointer;
}
#wordImagePickerPager button:disabled {
  color: #ccc;
  cursor: default;
}
#wordImagePickerPage {
  min-width: 54px;
  color: #777;
  font-size: 12.5px;
  text-align: center;
}
#wordImagePickerActions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
#wordImagePickerActions button {
  padding: 8px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}
#wordImagePickerCancel {
  flex: 1;
  border: 1px solid #e2e2e2;
  background: none;
  color: #666;
}

.tp-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 2400;
}
.tp-panel {
  position: fixed;
  inset: 0;
  background: #fff;
  border-radius: 0;
  z-index: 2401;
  display: flex;
  flex-direction: column;
  transform: translateY(16px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.22s ease, opacity 0.22s ease;
  padding:
    env(safe-area-inset-top, 0px)
    env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px)
    env(safe-area-inset-left, 0px);
  box-sizing: border-box;
  font-size: var(--subtitle-font-size, 17px);
}
.tp-panel.active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.tp-panel.active ~ .tp-overlay,
.tp-overlay:has(~ .tp-panel.active) {
  display: block;
}
/* 兼容性写法：overlay 通过 JS 控制 */
.tp-overlay.active { display: block; }

.tp-handle {
  display: none;
}
.tp-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 14px 4px;
  flex-shrink: 0;
}
.tp-title {
  font-size: 0.88em;
  font-weight: 600;
  color: #8e8e93;
  letter-spacing: 0;
}
.tp-close-btn {
  background: none;
  border: none;
  font-size: 1.05em;
  color: #8e8e93;
  cursor: pointer;
  width: 24px;
  height: 24px;
  padding: 0;
  line-height: 1;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.tp-body {
  overflow-y: auto;
  padding: 0 14px 88px;
  flex: 1;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* 骨架屏 */
.tp-skeleton { padding: 8px 0; }
.tp-sk-line {
  height: 14px;
  background: rgba(255,255,255,0.08);
  border-radius: 6px;
  margin-bottom: 10px;
  animation: tpSkPulse 1.4s ease-in-out infinite;
}
.tp-sk-line.w70 { width: 70%; }
.tp-sk-line.w50 { width: 50%; }
.tp-sk-line.w85 { width: 85%; }
@keyframes tpSkPulse {
  0%,100% { opacity: 0.5; }
  50%     { opacity: 1; }
}

/* 打字光标 */
.tp-cursor {
  display: inline-block;
  color: var(--blue);
  animation: tpBlink 0.8s step-end infinite;
  font-size: 0.82em;
  vertical-align: middle;
  margin-left: 1px;
}
@keyframes tpBlink { 0%,100%{opacity:1} 50%{opacity:0} }

/* 原文行内播放按钮（跟在句末） */
.tp-play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,122,255,0.1);
  border: none;
  color: var(--blue, #007aff);
  cursor: pointer;
  padding: 0;
  margin-right: 5px;
  -webkit-tap-highlight-color: transparent;
}
.tp-play-btn:active { background: rgba(0,122,255,0.18); }
.tp-play-btn:disabled { opacity: 0.35; cursor: default; }
.tp-play-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 原文 */
.tp-original {
  font-size: 0.88em;
  font-weight: 600;
  color: #1c1c1e;
  line-height: 1.5;
  padding: 8px 0 10px;
  border-bottom: none;
  margin-bottom: 10px;
}
.tp-original .line {
  border-bottom: none;
}
.tp-original .content {
  border-bottom: none;
}
.tp-original .line,
.tp-original .content {
  display: inline;
}
.tp-original .word-span {
  display: inline;
  cursor: pointer;
}

.tp-en-word {
  cursor: pointer;
}
/* 翻译大字 */
.tp-translation {
  font-size: 1.18em;
  font-weight: 700;
  color: #8e8e93;
  line-height: 1.5;
  margin-bottom: 4px;
}
/* 分区标题 */
.tp-section-title {
  font-size: 0.65em;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #b0b0b5;
  text-transform: none;
  margin: 16px 0 8px;
  opacity: 0.7;
}
/* 句型讲解 / 解析 列表项：英文上，中文下 */
.tp-bd-row {
  position: relative;
  padding: 2px 0 8px 18px;
  margin: 0 0 8px;
}
.tp-bd-row::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.68em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1c1c1e;
  opacity: 0.9;
}
.tp-bd-en {
  font-size: 0.86em;
  font-weight: 700;
  color: #1c1c1e;
  line-height: 1.45;
}
.tp-bd-en strong { color: #ff9500; }
.tp-bd-cn {
  font-size: 0.8em;
  font-weight: 400;
  color: #8e8e93;
  line-height: 1.55;
  margin-top: 3px;
}
.tp-original .word-span,
.tp-en-word,
.tp-bd-en {
  transition: background-color 180ms ease, box-shadow 180ms ease;
}
.tp-original .word-span.tp-pronounce-flash,
.tp-en-word.tp-pronounce-flash {
  background: rgba(0, 122, 255, 0.16);
  box-shadow: 0 0 0 1px rgba(0, 122, 255, 0.06) inset;
  border-radius: 6px;
}
/* 流式纯文本行 */
.tp-md-text {
  font-size: 0.82em;
  color: #8e8e93;
  line-height: 1.6;
  padding: 2px 0;
  margin: 0;
}
.tp-md-text strong {
  color: #1c1c1e;
}

/* ── 习语出处「更多」按钮 + 同窗翻页视图（SPA 翻译面板；overlay.css 有同名一套供 overlay/划词浮窗）── */
.tp-origin-btn {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 8px;
  font-size: 0.72em;
  font-weight: 600;
  line-height: 1.5;
  color: #007aff;
  background: rgba(0, 122, 255, 0.10);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  vertical-align: baseline;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 140ms ease;
}
.tp-origin-btn:hover { background: rgba(0, 122, 255, 0.18); }
.tp-origin-btn:active { background: rgba(0, 122, 255, 0.26); }

.tp-origin-view { display: flex; flex-direction: column; }
.tp-origin-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
}
.tp-origin-back {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  padding: 4px 10px 4px 5px;
  font-size: 0.8em;
  font-weight: 600;
  color: #1c1c1e;
  background: rgba(0, 0, 0, 0.05);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 140ms ease;
}
.tp-origin-back:hover { background: rgba(0, 0, 0, 0.09); }
.tp-origin-back svg { width: 15px; height: 15px; display: block; }
.tp-origin-phrase {
  min-width: 0;
  font-size: 0.92em;
  font-weight: 700;
  color: #ff9500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tp-origin-section {
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #007aff;
  margin: 15px 0 7px;
}
.tp-origin-section:first-child { margin-top: 2px; }
.tp-origin-step {
  display: flex;
  gap: 8px;
  padding: 2px 0 8px;
}
.tp-origin-step-n {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62em;
  font-weight: 700;
  color: #fff;
  background: #ff9500;
  border-radius: 50%;
}
.tp-origin-step-t {
  font-size: 0.82em;
  line-height: 1.6;
  color: #1c1c1e;
}
.tp-origin-step-t strong,
.tp-origin-para strong,
.tp-origin-bullet strong { color: #ff9500; font-weight: 700; }
.tp-origin-para {
  font-size: 0.82em;
  line-height: 1.65;
  color: #1c1c1e;
  margin: 4px 0;
}
.tp-origin-bullet {
  position: relative;
  padding-left: 14px;
  font-size: 0.8em;
  line-height: 1.6;
  color: #1c1c1e;
  margin: 4px 0;
}
.tp-origin-bullet::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ff9500;
  opacity: 0.85;
}
.tp-origin-loading { color: #8e8e93; }
.tp-origin-error { color: #b42318; }
.tp-origin-retry {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  font-size: 0.9em;
  color: #007aff;
  background: transparent;
  border: 1px solid rgba(0, 122, 255, 0.4);
  border-radius: 8px;
  cursor: pointer;
}

/* ══════════════════════════════════════
   确认删除弹窗
══════════════════════════════════════ */
.confirm-title { font-size: 17px; font-weight: 700; text-align: center; padding: 4px 0 8px; }
.confirm-msg   { font-size: 14px; color: var(--text-dim); text-align: center; line-height: 1.5; padding-bottom: 4px; white-space: pre-line; }

/* ══════════════════════════════════════
   加载占位
══════════════════════════════════════ */
.skeleton-item {
  background: var(--card);
  border-radius: 13px;
  height: 72px;
  margin-bottom: 10px;
  overflow: hidden;
  position: relative;
}
.skeleton-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer {
  from { transform: translateX(-100%) }
  to   { transform: translateX(100%) }
}

/* ══════════════════════════════════════
   素材实验室 (Material Lab)
══════════════════════════════════════ */
#page-lab {
  padding-top: 0;
  padding-bottom: calc(var(--tab-h) + var(--safe-bottom));
}

#lab-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 48px;
  padding: 0 10px;
  background: var(--card);
  border-bottom: 0.5px solid var(--separator);
  flex-shrink: 0;
}

.lab-flow-hint {
  height: 32px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 12px;
  color: var(--text-dim);
  background: var(--bg);
  border-bottom: 0.5px solid var(--separator);
}

.lab-nav-btn {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.lab-nav-btn:hover { background: var(--border); }
.lab-nav-btn:active { transform: scale(0.92); }

.lab-go-btn {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--blue);
  width: auto;
  padding: 0 12px;
}
.lab-go-btn:hover { background: #0066d6; }

.lab-sniff-btn {
  position: relative;
  width: auto;
  padding: 0 8px;
  gap: 2px;
  background: var(--green);
  color: #fff;
}
.lab-sniff-btn.ready {
  background: #16a34a;
}
.lab-sniff-icon { font-size: 14px; }
.lab-sniff-badge {
  font-size: 11px;
  font-weight: 700;
  min-width: 16px;
  text-align: center;
}

.lab-sniff-float-root {
  position: fixed;
  inset: 0;
  z-index: 3000;
  pointer-events: none;
}
.lab-sniff-float-root.open {
  pointer-events: auto;
}
.lab-sniff-float-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 22, 0.18);
}
.lab-sniff-float-stage {
  position: absolute;
  inset: calc(var(--safe-top) + 48px) 0 calc(var(--tab-h) + var(--safe-bottom)) 0;
  background: #0d111a;
}
.lab-sniff-float-shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.95;
}

.lab-sniff-popover {
  position: absolute;
  top: calc(var(--safe-top) + 58px);
  right: 14px;
  width: min(620px, calc(100vw - 28px));
  border: 1px solid rgba(20, 28, 45, 0.2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 40px rgba(12, 16, 24, 0.28);
  z-index: 1;
}
.lab-sniff-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 0.5px solid var(--separator);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.lab-sniff-popover-close {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 6px;
  background: var(--bg);
  color: var(--text-dim);
  font-size: 14px;
  cursor: pointer;
}
.lab-sniff-popover-close:hover {
  background: var(--border);
}
.lab-sniff-popover-card {
  display: flex;
  gap: 12px;
  padding: 12px 14px 14px;
}
.lab-sniff-thumb-wrap {
  width: 170px;
  flex-shrink: 0;
}
.lab-sniff-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--separator);
  background: #eef2f7;
}
.lab-sniff-thumb.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7b8592;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.lab-sniff-meta {
  min-width: 0;
  flex: 1;
}
.lab-sniff-title {
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
  color: #2b2f36;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lab-sniff-url,
.lab-sniff-sub {
  margin-top: 6px;
  font-size: 12px;
  color: #687385;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lab-sniff-controls {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.lab-sniff-select {
  height: 34px;
  min-width: 132px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 10px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  outline: none;
}
.lab-sniff-select:focus {
  border-color: var(--blue);
}
.lab-sniff-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.lab-sniff-download-btn {
  height: 34px;
  min-width: 96px;
  border: none;
  border-radius: 999px;
  padding: 0 18px;
  background: linear-gradient(135deg, #0b84ff 0%, #0071eb 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.lab-sniff-download-btn:hover {
  filter: brightness(1.03);
}
.lab-sniff-download-btn:disabled,
.lab-sniff-download-btn.is-disabled {
  background: #ccd3dc;
  color: #626c7a;
  cursor: not-allowed;
  filter: none;
}

.lab-modal-root {
  position: fixed;
  inset: 0;
  z-index: 3100;
  pointer-events: none;
}
.lab-modal-root.open {
  pointer-events: auto;
}
.lab-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
.lab-modal-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(540px, calc(100vw - 32px));
  background: var(--card);
  border: 1px solid var(--separator);
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  padding: 16px;
}
.lab-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.lab-modal-desc {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-dim);
}
.lab-sniff-summary {
  margin-top: 12px;
  border: 1px solid var(--separator);
  border-radius: 10px;
  overflow: hidden;
}
.lab-sniff-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 0.5px solid var(--separator);
  background: var(--bg);
}
.lab-sniff-row:last-child {
  border-bottom: none;
}
.lab-sniff-key {
  width: 42px;
  flex-shrink: 0;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
}
.lab-sniff-val {
  flex: 1;
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
  word-break: break-all;
}
.lab-modal-progress {
  margin-top: 12px;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--separator);
  overflow: hidden;
}
.lab-modal-progress-fill {
  height: 100%;
  width: 0;
  background: var(--blue);
  transition: width 0.25s ease;
}
.lab-modal-row {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-dim);
}
.lab-modal-row.muted {
  margin-top: 10px;
}
.lab-modal-actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.lab-modal-btn {
  min-width: 92px;
  height: 34px;
  border-radius: 8px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.lab-modal-btn.primary {
  background: var(--green);
  color: #fff;
}
.lab-modal-btn.secondary {
  background: var(--bg);
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.lab-form-item {
  margin-top: 10px;
}
.lab-form-label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 600;
}
.lab-form-select,
.lab-form-input {
  width: 100%;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 10px;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
  outline: none;
}
.lab-form-select:focus,
.lab-form-input:focus {
  border-color: var(--blue);
}

.lab-url-input {
  flex: 1;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 12px;
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  outline: none;
  min-width: 0;
}
.lab-url-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-light);
}

#lab-status-bar {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 12px;
  background: var(--bg);
  border-bottom: 0.5px solid var(--separator);
  flex-shrink: 0;
}
#lab-page-title {
  font-size: 11px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 嗅探资源面板（工具栏下方，不被 BrowserView 遮挡）── */
.sniff-panel {
  height: 270px;
  background: var(--card);
  border-bottom: 1px solid var(--separator);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.sniff-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 0.5px solid var(--separator);
  flex-shrink: 0;
}
.sniff-panel-close {
  background: none;
  border: none;
  font-size: 16px;
  color: var(--text-dim);
  cursor: pointer;
}
.sniff-panel-list {
  overflow-y: auto;
  flex: 1;
}
.sniff-manual-group {
  padding: 10px 14px 12px;
  border-bottom: 1px solid var(--separator);
  background: linear-gradient(180deg, var(--bg), rgba(0, 0, 0, 0));
}
.sniff-manual-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.sniff-manual-url {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sniff-manual-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.sniff-manual-hint {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-dim);
}
.sniff-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 0.5px solid var(--separator);
}
.sniff-item-icon { font-size: 16px; flex-shrink: 0; }
.sniff-item-url {
  flex: 1;
  font-size: 12px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.sniff-item-import {
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  margin: 6px 14px 10px auto;
  display: block;
}
.sniff-item-import:hover { opacity: 0.85; }
.sniff-item-import.is-loading { background: #f59e0b; }
.sniff-item-import.is-success { background: var(--blue); }
.sniff-item-cancel {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text-dim);
  background: var(--bg);
  cursor: pointer;
}
.sniff-item-cancel:hover {
  border-color: var(--blue);
  color: var(--blue);
}

/* 资源分组 */
.sniff-group {
  border-bottom: 1px solid var(--separator);
  padding-bottom: 2px;
}
.sniff-item-video {
  border-bottom: none;
}

/* 字幕选择区 */
.sniff-subs {
  padding: 4px 14px 2px 38px;
}
.sniff-subs-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.sniff-sub-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 12px;
  cursor: pointer;
}
.sniff-sub-option input[type="radio"] {
  margin: 0;
  accent-color: var(--blue);
}
.sniff-sub-label {
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}
.sniff-sub-url {
  color: var(--text-dim);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}

/* 仓库选择器 */
.sniff-deck-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-bottom: 0.5px solid var(--separator);
  background: var(--bg);
}
.sniff-deck-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
}
.sniff-deck-select {
  flex: 1;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 8px;
  font-size: 13px;
  background: var(--card);
  color: var(--text);
  outline: none;
}
.sniff-deck-select:focus {
  border-color: var(--blue);
}
.sniff-deck-create-btn {
  border: none;
  border-radius: 6px;
  background: var(--blue);
  color: #fff;
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
  cursor: pointer;
}
.sniff-deck-create {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 0.5px solid var(--separator);
}
.sniff-deck-create-input {
  flex: 1;
  min-width: 0;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 10px;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
}
.sniff-deck-create-confirm,
.sniff-deck-create-cancel {
  border: none;
  border-radius: 6px;
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
  cursor: pointer;
}
.sniff-deck-create-confirm {
  background: var(--green);
  color: #fff;
}
.sniff-deck-create-cancel {
  background: var(--bg);
  color: var(--text-dim);
  border: 1px solid var(--border);
}

.sniff-empty {
  padding: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
}

.sniff-item-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 14px 6px 38px;
}
.sniff-meta-label {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 600;
}
.sniff-meta-input {
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 10px;
  font-size: 12px;
  background: var(--bg);
  color: var(--text);
}
.sniff-meta-input:focus {
  outline: none;
  border-color: var(--blue);
}
.sniff-item-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin: 4px 14px 10px;
}
.sniff-item-actions .sniff-item-import,
.sniff-manual-actions .sniff-item-import {
  margin: 0;
}

/* 下载进度 UI */
.import-ui {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
}
.import-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--separator);
  border-radius: 3px;
  overflow: hidden;
}
.import-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--blue);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.import-progress-text {
  font-size: 11px;
  font-weight: 600;
  color: var(--blue);
  min-width: 32px;
  text-align: right;
}
.import-status {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
}

/* ── 全站统一禁用原生文本选区 / 长按菜单（输入控件白名单）──
   目标：跨端统一 DIY 交互，不依赖浏览器原生 Selection / callout。
   使用 * 而非 body：iOS Safari 对 position:fixed 子元素不能可靠继承 body 的
   user-select，必须用通配符确保覆盖所有层叠上下文。 */
* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
input,
textarea,
[contenteditable]:not([contenteditable="false"]),
.allow-native-selection {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}

/* ── 统计/我的库 section tabs ── */
.repo-section-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 6px;
}
.repo-section-tab-group {
  display: flex;
  gap: 28px;
}
.repo-section-tab {
  position: relative;
  padding: 8px 0 10px;
  font-size: .95rem;
  font-weight: 700;
  background: transparent;
  border: none;
  color: #aaa;
  cursor: pointer;
  transition: color 0.15s;
}
.repo-section-tab.active {
  color: var(--blue);
}
.repo-section-tab.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--blue);
}
.repo-section-tab:active { opacity: 0.7; }

.repo-section-tabs .repo-section-tab.active {
  background: transparent !important;
  border-radius: 0 !important;
  color: var(--blue) !important;
}

/* ── 统计历史列表 ── */

.stats-hist-row {
  display: flex;
  align-items: center;
  background: var(--card);
  border-radius: 20px;
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid var(--separator);
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  cursor: pointer;
  transition: opacity 0.12s;
}
.stats-hist-row:active { opacity: 0.7; }
.stats-hist-date    { font-size: .95rem; font-weight: 600; color: #111; flex: 0 0 60px; white-space: nowrap; }
.stats-hist-summary { flex: 0 0 auto; font-size: .87rem; color: #888; margin: 0 12px 0 auto; text-align: right; }
.stats-hist-chevron { font-size: 1rem; color: #bbb; }
.stats-hist-empty   { padding: 12px 20px; font-size: .87rem; color: #aaa; }

.stats-day-detail-page {
  position: relative;
  margin: -2px -4px 0;
  padding: 14px 14px 16px;
  height: auto !important;
  min-height: 0 !important;
  align-self: flex-start;
  width: calc(100% + 8px);
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 0%, rgba(0,122,255,0.10), transparent 34%),
    radial-gradient(circle at 90% 12%, rgba(52,199,89,0.10), transparent 30%),
    #f7f7fb;
  overflow: hidden;
}

.stats-day-detail-page::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,0.70);
}

.stats-day-detail-nav {
  position: relative;
  z-index: 1;
  margin-bottom: 14px;
}

.stats-day-back-btn {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: none;
  background: rgba(0,122,255,0.10);
  color: var(--blue);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.stats-day-detail-hero {
  position: relative;
  z-index: 1;
  padding: 22px 20px;
  border-radius: 20px;
  background: linear-gradient(135deg, #111 0%, #2b2b30 100%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
  margin-bottom: 12px;
}

.stats-day-detail-kicker {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.62);
  margin-bottom: 8px;
}

.stats-day-detail-title {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  margin-bottom: 10px;
}

.stats-day-detail-subtitle {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.72);
}

.stats-day-detail-card {
  position: relative;
  z-index: 1;
  background: var(--card);
  border-radius: 20px;
  padding: 4px 18px;
  border: 1px solid var(--separator);
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

/* 当天详情弹窗内容行 */
.stats-day-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid #f0f0f0;
}
.stats-day-item:last-child { border-bottom: none; }
.stats-day-label { font-size: 15px; color: #666; font-weight: 600; }
.stats-day-value { font-size: 17px; font-weight: 800; color: #111; }

/* 保留 coarse-pointer 媒体查询标记，兼容现有静态冒烟检测。 */
@media (hover: none) and (pointer: coarse) {
  body.is-coarse-pointer {}
  /* 移动端同样显示翻译浮动按钮 */
}