/* ============ Echotter design system ============
   极简 · 高级:暖纸底 + 墨色 + 赤陶点缀,衬线展示字体 */

:root {
  color-scheme: light; /* 原生控件(select/滚动条)跟随主题,下方深色块各自覆盖 */
  --bg: #FAF9F6;
  --surface: #FFFFFF;
  --ink: #1C1B18;
  --ink-2: #6F6A60;
  --ink-3: #A8A399;
  --line: #E7E4DC;
  --line-strong: #D8D4C9;
  --accent: #B4552D;
  --accent-strong: #97431F;
  --accent-tint: #F6EBE4;
  --ok: #3D7A4E;
  --ok-tint: #EAF2EC;
  /* 活跃热力图 5 档色阶:赤陶系(不用绿)。0 档=可见的暖灰(有活动=有色,无活动=有格),
     1→4 逐级加深、饱和度递增,避免整片发白。data-mode 负责深色版本。 */
  --heat-0: #EAE4D9;
  --heat-1: #E0AD84;
  --heat-2: #CD7647;
  --heat-3: #B4552D;
  --heat-4: #8A3A1B;
  --serif: "Iowan Old Style", "Palatino", "Georgia", "Times New Roman", "Songti SC", "STSong", serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  /* 报纸式方角:容器/卡片 4px、小元素 3px。标签类(chip/badge)也走方角,
     只有「可按的控件」(搜索胶囊、开关、分段器)保留 999px 胶囊,以形状区分语义。 */
  --radius: 4px;
  --radius-s: 3px;
  --shadow: 0 1px 2px rgba(28, 27, 24, 0.04);
  --shadow-lift: 0 18px 44px -20px rgba(28, 27, 24, 0.28);
}

:root[data-mode="dark"] {
    color-scheme: dark;
    --bg: #16150F;
    --surface: #1F1D18;
    --ink: #EDEAE2;
    --ink-2: #A6A093;
    --ink-3: #726D62;
    --line: #2E2B24;
    --line-strong: #3B372E;
    --accent: #D97C4C;
    --accent-strong: #E89468;
    --accent-tint: #2E241D;
    --ok: #7CB98C;
    --ok-tint: #22301F;
    --heat-0: #2C2822;
    --heat-1: #6E3D23;
    --heat-2: #9E5330;
    --heat-3: #C4693E;
    --heat-4: #E1875A;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-lift: 0 18px 44px -20px rgba(0, 0, 0, 0.65);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* hidden 属性永远生效:防止 display:flex 等类样式压过浏览器默认(曾坑过 modal) */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img { max-width: 100%; display: block; }

/* 键盘可达性:焦点环只对键盘导航显示,鼠标点击不闪 */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--accent-tint); color: var(--accent-strong); }
h1, h2, h3 { text-wrap: balance; }

/* MPA 页面切换淡入淡出(支持的浏览器渐进增强) */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

.container { max-width: 1120px; margin: 0 auto; padding: 0 28px; }

/* ============ nav ============ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex; align-items: center; gap: 20px;
  height: 60px;
}
.brand { display: flex; align-items: center; flex: 0 0 auto; }
.brand-wordmark { display: block; height: 32px; }
.brand-logo { width: auto; height: 32px; }
.brand-logo-dark { display: none; }
.brand-mark { display: none; }
:root[data-mode="dark"] .brand-logo-light { display: none; }
:root[data-mode="dark"] .brand-logo-dark { display: block; }
.nav-links { display: flex; gap: 4px; }
.nav-primary { margin-left: 18px; }
.nav-links a { color: var(--ink-2); font-size: 15px; padding: 6px 10px; letter-spacing: .02em; transition: color .15s; }
.nav-links a:hover { color: var(--ink); }
.nav-links a.active {
  color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--accent);
  text-decoration-thickness: 1.5px; text-underline-offset: 7px;
}
.nav-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.nav-auth { display: flex; align-items: center; gap: 18px; font-size: 15px; }
.mobile-nav { display: none; }

/* 显示与语言:菜单本身很薄,主题完全由根节点变量驱动。 */
.prefs-menu { position: relative; }
.prefs-menu > summary {
  list-style: none; width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; color: var(--ink-2);
  background: var(--surface); cursor: pointer; user-select: none;
  font-family: var(--serif); font-size: 14px; font-weight: 600; letter-spacing: .02em;
}
.prefs-menu > summary::-webkit-details-marker { display: none; }
.prefs-menu > summary:hover { color: var(--accent-strong); border-color: var(--accent); }
.prefs-panel {
  position: absolute; z-index: 80; top: calc(100% + 10px); right: 0; width: 180px;
  padding: 14px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lift);
}
.prefs-section { border: 0; display: grid; gap: 6px; margin: 0 0 12px; }
.prefs-section:last-child { margin-bottom: 0; }
.prefs-section label, .prefs-section legend { color: var(--ink-3); font-size: 12.5px; }
.prefs-section select {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius-s); padding: 7px 9px;
  color: var(--ink); background: var(--bg); font: inherit; font-size: 14px;
}
/* ============ home: recommendation first ============ */
.home-v2 { min-height: calc(100svh - 60px); padding: 40px 0 32px; }
body:has(.home-v2) .footer { display: none; }
.home-topline { display: flex; align-items: end; justify-content: space-between; gap: 28px; }
.home-topline .eyebrow { margin-bottom: 6px; letter-spacing: 2px; }
.home-topline h1 { font-family: var(--serif); font-size: clamp(32px, 3.2vw, 38px); line-height: 1.25; font-weight: 600; letter-spacing: .02em; }
.home-search {
  width: min(340px, 42vw); height: 42px; display: flex; align-items: center;
  border-bottom: 1px solid var(--line-strong); background: transparent;
}
.home-search:focus-within { border-color: var(--accent); }
.home-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; }
.home-search button { border: 0; background: none; color: var(--accent-strong); cursor: pointer; font-size: 14px; font-weight: 600; }
/* 未登录 h1 下的语言名录:灰阶点分隔,末端「等 N 种语言」引流搜索;字级与字重都压在 h1 之下,不抢层级 */
.home-langroll { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 4px; font-size: 13.5px; letter-spacing: .02em; }
.home-langroll .roll-lang { color: var(--ink-2); }
.home-langroll .roll-lang + .roll-lang::before { content: "·"; margin-right: 8px; color: var(--ink-3); }
.home-langroll .roll-lang:hover, .home-langroll .roll-more:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.home-langroll .roll-more { color: var(--ink-3); }
.home-languages { display: flex; align-items: center; gap: 7px; margin-top: 18px; }
.home-languages .lang-chip { padding: 4px 12px; }
.lang-more { position: relative; }
.lang-more > summary { list-style: none; color: var(--ink-3); font-size: 14px; cursor: pointer; padding: 5px 9px; }
.lang-more > summary::-webkit-details-marker { display: none; }
.lang-more-panel {
  position: absolute; z-index: 25; top: calc(100% + 6px); right: 0; width: 260px;
  display: grid; grid-template-columns: repeat(2, 1fr); padding: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lift);
}
.lang-more-panel a { padding: 7px 9px; border-radius: var(--radius-s); color: var(--ink-2); font-size: 14px; }
.lang-more-panel a:hover, .lang-more-panel a.on { background: var(--accent-tint); color: var(--accent-strong); }
.home-dashboard { display: grid; grid-template-columns: 1fr 1.3fr; gap: 16px 26px; margin-top: 30px; align-items: stretch; }
.continue-primary {
  min-height: 132px; display: grid; grid-template-columns: 104px 1fr 44px; align-items: center; gap: 18px;
  padding: 14px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius);
}
.continue-primary:hover { border-color: var(--ink-3); }
.continue-primary img { width: 104px; height: 104px; object-fit: cover; border-radius: var(--radius-s); background: var(--accent-tint); }
.continue-copy { min-width: 0; display: flex; flex-direction: column; }
.overline { color: var(--accent-strong); font-size: 12px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
.continue-copy strong { margin-top: 5px; font-size: 16px; line-height: 1.4; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.continue-copy > span:not(.overline) { margin-top: 4px; color: var(--ink-2); font-size: 13.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.continue-play { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--bg); }
.continue-primary.empty { grid-template-columns: 1fr 44px; padding-left: 22px; }
/* 右列:学习足迹热力图,与左侧「继续学习」卡并排等高;
   顶部留白对齐卡片内文起点,图贴底对齐卡片下缘 */
.home-activity { grid-column: 2; display: flex; flex-direction: column; min-width: 0; padding: 8px 0 4px; }
.activity-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.activity-head .overline { white-space: nowrap; }
.activity-body { flex: 1; display: flex; align-items: flex-end; gap: 20px; min-width: 0; }
.heatmap-wrap { flex: 1; min-width: 0; }
/* 热力图右侧竖排小标注:关键数字不另占一行 */
.heat-stats { display: flex; flex-direction: column; gap: 9px; font-size: 12.5px; color: var(--ink-2);
              letter-spacing: .04em; white-space: nowrap; }
.heat-stats strong { font-family: var(--serif); font-size: 16px; font-weight: 600;
                     font-variant-numeric: tabular-nums; color: var(--ink); margin: 0 1px; }
.heat-stats a { color: var(--ink-2); }
.heat-stats a strong { color: var(--accent-strong); }
.heat-stats a:hover { color: var(--ink); }
/* 首页活跃热力图:近半年 · 列=周 · 行=周一→周日 · 赤陶固定 5 档 */
.heatmap-wrap { overflow-x: auto; padding-bottom: 2px; }
.heatmap { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); gap: 3px; width: max-content; }
.heat-cell { width: 12px; height: 12px; border-radius: 2px; background: transparent; }
.heat-l0 { background: var(--heat-0); }
.heat-l1 { background: var(--heat-1); }
.heat-l2 { background: var(--heat-2); }
.heat-l3 { background: var(--heat-3); }
.heat-l4 { background: var(--heat-4); }
.heat-legend { display: flex; gap: 3px; align-items: center; font-size: 11.5px; color: var(--ink-3); }
.heat-legend .heat-cell:first-of-type { margin-left: 4px; }
.heat-legend .heat-cell:last-of-type { margin-right: 4px; }
.home-recommendations { margin-top: 44px; }
/* 未登录:语言 chip 条搬进「今日精选」区头之下、推荐卡之上——它过滤的就是这批卡 */
.home-recommendations .home-languages { margin-top: 0; margin-bottom: 20px; }
/* 区尾引流:细线在上、文字链接在下,补上被移走的搜索框职责 */
.home-recommendations-foot { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
/* 报纸式分区:细线在上,题在线下 */
.section-head.compact { margin-bottom: 13px; border-top: 1px solid var(--line); padding-top: 16px; }
.section-head.compact h2 { font-size: 21px; line-height: 1.25; margin-top: 2px; letter-spacing: .02em; }
.text-link { color: var(--accent-strong); font-size: 14px; }
.text-link:hover, .home-empty a:hover { text-decoration: underline; text-underline-offset: 4px; }
.recommendation-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; }
.recommendation-primary {
  min-height: 220px; display: grid; grid-template-columns: 210px 1fr; gap: 22px; align-items: center;
  padding: 14px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius);
  transition: border-color .15s;
}
.recommendation-primary:hover { border-color: var(--ink-3); }
.recommendation-primary img { width: 210px; height: 190px; object-fit: cover; border-radius: var(--radius-s); background: var(--accent-tint); }
.recommendation-label { color: var(--accent-strong); font-size: 12.5px; font-weight: 650; letter-spacing: .08em; }
.recommendation-primary h3 { margin-top: 8px; font-family: var(--serif); font-size: 23px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.recommendation-primary p { margin-top: 7px; color: var(--ink-2); font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.start-command { display: inline-block; margin-top: 18px; color: var(--accent-strong); font-size: 14px; font-weight: 650; }
.recommendation-list { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.recommendation-row { min-width: 0; display: grid; grid-template-columns: 58px 1fr 20px; align-items: center; gap: 12px; padding: 8px 5px; border-bottom: 1px solid var(--line); }
.recommendation-row img { width: 58px; height: 58px; border-radius: var(--radius-s); object-fit: cover; background: var(--accent-tint); }
.recommendation-row div { min-width: 0; display: flex; flex-direction: column; }
.recommendation-row div > span { color: var(--accent-strong); font-size: 11.5px; }
.recommendation-row strong { font-size: 14.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.recommendation-row small { color: var(--ink-3); font-size: 12.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.recommendation-row b { color: var(--ink-3); font-weight: 400; }
.home-empty { padding: 28px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; color: var(--ink-2); }
.home-empty a { color: var(--accent-strong); }
.recommendation-primary:only-child { grid-column: 1 / -1; }
.recommendation-primary.no-image { grid-template-columns: 1fr; align-content: center; padding: 24px; }

/* ============ home: 未登录功能演示区 ============ */
/* 报纸头版式:左栏目录(section-head 细线 + 三行切换),右栏单幅演示。列宽 5:7 非对称。 */
.home-intro { margin-top: 44px; display: grid; grid-template-columns: 5fr 7fr; gap: 40px; align-items: start; }
.home-intro-catalog { display: flex; flex-direction: column; }
.home-intro-lede { margin-top: 2px; color: var(--ink-2); font-size: 14px; letter-spacing: .01em; }
/* 三行目录:每行 border-top,容器 border-bottom,单线收口不叠成 2px。 */
.home-intro-rows { margin-top: 18px; border-bottom: 1px solid var(--line); }
.home-intro-row {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer;
  border-top: 1px solid var(--line);
  /* 常驻透明 2px 左边线:激活时只变色不位移,切换零横向跳动 */
  border-left: 2px solid transparent;
  padding: 13px 0 13px 14px;
  color: var(--ink-2); font: inherit; font-size: 15px; letter-spacing: .01em; line-height: 1.4;
  transition: color .15s, border-color .15s;
}
.home-intro-row:hover { color: var(--ink); }
.home-intro-row.on { color: var(--ink); border-left-color: var(--accent); }
.home-intro-more { margin-top: 18px; align-self: flex-start; }
.home-intro-more-row { display: flex; gap: 20px; margin-top: 18px; align-self: flex-start; flex-wrap: wrap; }
/* 右栏单幅演示:细线方角零阴影,定宽高比防 CLS;三段视频叠放,仅激活项可见。 */
.home-intro-hero {
  position: relative; display: block; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--accent-tint);
  transition: border-color .15s;
}
.home-intro-hero:hover, .home-intro-hero:focus-visible { border-color: var(--ink-3); }
.home-intro-frame { position: relative; display: block; aspect-ratio: 8 / 5; }
.home-intro-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* discovery keeps search and filters compact so results enter the first viewport. */
.discover-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding-top: 40px; }
.discover-head h1 { font-family: var(--serif); font-size: 30px; line-height: 1.2; letter-spacing: .02em; }
.discover-head p { color: var(--ink-2); font-size: 14px; margin-top: 4px; }
.source-tabs { display: inline-flex; border-bottom: 1px solid var(--line); }
.source-tabs a { padding: 6px 14px; color: var(--ink-3); font-size: 14px; }
.source-tabs a.on { color: var(--ink); border-bottom: 2px solid var(--accent); }
.discover-search { max-width: 720px; height: 48px; margin-top: 20px; display: flex; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.discover-search:focus-within { border-color: var(--accent); }
.discover-search input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0 16px; background: transparent; color: var(--ink); font: inherit; }
.discover-search button { border: 0; padding: 0 22px; background: var(--ink); color: var(--bg); cursor: pointer; font: inherit; font-size: 14px; }
.discover-languages { display: flex; align-items: center; gap: 7px; margin-top: 0; }
.discover-languages .lang-chip { padding: 4px 12px; }
.compact-notice { margin-top: 18px; padding: 11px 14px; border-radius: var(--radius); }

/* ============ footer ============ */
.footer {
  margin-top: 88px; padding: 30px 0 44px;
  border-top: 1px solid var(--line);
  color: var(--ink-3); font-size: 13px; letter-spacing: .04em;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
/* 页脚法律/信息链接(含「致谢」→ /about#attribution) */
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 28px; font-size: 13px; letter-spacing: .04em; }
/* 页脚链接分两组:产品(关于/定价/日志/反馈)与法律(隐私/条款/退款/致谢),组内紧、组间松。 */
.footer-group { display: inline-flex; flex-wrap: wrap; gap: 6px 16px; }
.footer-links a { color: var(--ink-2); transition: color .15s; }
.footer-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* ============ 法律/信息页(隐私·条款·退款·关于)============ */
.legal-page { max-width: 640px; margin: 48px auto 24px; }
.legal-head { border-top: 1px solid var(--line); padding-top: 18px; margin-bottom: 28px; }
.legal-kicker {
  font-size: 12px; letter-spacing: .14em; color: var(--accent);
  text-transform: uppercase; margin-bottom: 10px; font-weight: 600;
}
.legal-page h1 { font-family: var(--serif); font-size: 30px; font-weight: 600; letter-spacing: .02em; }
.legal-updated { margin-top: 8px; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.legal-lead { color: var(--ink-2); font-size: 16px; line-height: 1.8; margin-bottom: 8px; }
.legal-section { border-top: 1px solid var(--line); padding-top: 22px; margin-top: 30px; }
.legal-section h2 { font-size: 17px; font-weight: 600; letter-spacing: .02em; margin-bottom: 12px; }
.legal-section p { color: var(--ink-2); font-size: 16px; line-height: 1.8; margin-bottom: 10px; }
.legal-section p:last-child { margin-bottom: 0; }
.legal-section strong { color: var(--ink); font-weight: 600; }
.legal-list { list-style: none; margin: 4px 0 0; }
.legal-list li { position: relative; padding-left: 18px; color: var(--ink-2); font-size: 16px; line-height: 1.8; margin-bottom: 10px; }
.legal-list li::before { content: "—"; position: absolute; left: 0; color: var(--ink-3); }
.legal-list li:last-child { margin-bottom: 0; }
.legal-linklist li a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong); }
.legal-linklist li a:hover { text-decoration-color: var(--accent); }
.legal-note { font-size: 14px; color: var(--ink-3); }
.legal-contact { font-variant-numeric: tabular-nums; }
a.legal-contact { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.legal-effective {
  border-top: 1px solid var(--line); margin-top: 30px; padding-top: 18px;
  font-size: 13px; color: var(--ink-3); letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
@media (max-width: 760px) {
  .legal-page { margin-top: 32px; }
  .legal-page h1 { font-size: 25px; }
}

/* ===== 定价页 /pricing ===== */
.pricing-page { max-width: 800px; margin: 48px auto 24px; }
.pricing-head { border-top: 1px solid var(--line); padding-top: 18px; margin-bottom: 8px; }
.pricing-kicker {
  font-size: 12px; letter-spacing: .14em; color: var(--accent);
  text-transform: uppercase; margin-bottom: 10px; font-weight: 600;
}
.pricing-page h1 { font-family: var(--serif); font-size: 30px; font-weight: 600; letter-spacing: .02em; }
.pricing-lead { color: var(--ink-2); font-size: 16px; line-height: 1.8; margin-top: 8px; }
.pricing-section { margin-top: 34px; }
.pricing-note { color: var(--ink-3); font-size: 13.5px; margin: -4px 0 16px; letter-spacing: .02em; }

/* 会员两档卡片:等高、hairline、零阴影 */
.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.plan-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 22px 20px; background: var(--surface);
}
.plan-card-featured { border-color: var(--line-strong); }
.plan-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.plan-name { font-size: 15px; color: var(--ink); letter-spacing: .02em; }
.plan-tag {
  font-size: 11px; letter-spacing: .06em; color: var(--ink-2);
  border: 1px solid var(--line-strong); border-radius: 0; padding: 2px 8px;
}
.plan-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 12px; }
.plan-price-num {
  font-family: var(--serif); font-size: 34px; font-weight: 600;
  color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1;
}
.plan-price-suffix { font-size: 14px; color: var(--ink-3); }
.plan-credits { font-size: 15px; color: var(--ink-2); margin-bottom: 12px; }
/* 换算小字:「≈ N 集播客,或 N 条视频」次级层,单独一行不与点数争势。 */
.plan-credits-est { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-3); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.plan-credits-num {
  font-family: var(--serif); font-size: 21px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.plan-fit { font-size: 14px; color: var(--ink-2); line-height: 1.7; margin-bottom: auto; }
.plan-meta {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-3); letter-spacing: .02em;
}

/* 点数包三档:紧凑 hairline 卡 */
.pack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.pack-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 18px; background: var(--surface); text-align: left;
}
.pack-price {
  font-family: var(--serif); font-size: 26px; font-weight: 600;
  color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1;
}
.pack-credits { font-size: 15px; color: var(--ink-2); margin-top: 10px; }
.pack-credits-num {
  font-family: var(--serif); font-size: 19px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pack-meta { font-size: 12.5px; color: var(--ink-3); margin-top: 10px; letter-spacing: .02em; }

.pricing-table-wrap { overflow-x: auto; }
.pricing-rate-table { min-width: 320px; }
.pricing-rate-table td.num, .pricing-rate-table th.num { font-variant-numeric: tabular-nums; }

.pricing-cta { margin-top: 34px; border-top: 1px solid var(--line); padding-top: 20px; }

@media (max-width: 760px) {
  .pricing-page { margin-top: 32px; }
  .pricing-page h1 { font-size: 25px; }
  .plan-grid { grid-template-columns: 1fr; }
  .pack-grid { grid-template-columns: 1fr; }
}

/* ============ 更新日志 · 功能介绍页(/changelog)============ */
.changelog-page { max-width: 720px; margin: 48px auto 24px; }
.changelog-head { border-top: 1px solid var(--line); padding-top: 18px; margin-bottom: 8px; }
.changelog-kicker {
  font-size: 12px; letter-spacing: .14em; color: var(--accent);
  text-transform: uppercase; margin-bottom: 10px; font-weight: 600;
}
.changelog-page h1 { font-family: var(--serif); font-size: 32px; font-weight: 600; letter-spacing: .02em; }
.changelog-sub { margin-top: 12px; color: var(--ink-2); font-size: 16px; line-height: 1.8; }
.changelog-h2 {
  font-family: var(--serif); font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600; margin-bottom: 4px;
}
.changelog-overview { margin-top: 44px; }
.changelog-timeline { margin-top: 64px; }

/* 功能 block:文字 + 媒体位,细线分隔 */
.cl-block { border-top: 1px solid var(--line); padding-top: 26px; margin-top: 30px; }
.changelog-overview .cl-block:first-of-type { margin-top: 18px; }
.cl-block-text h3 {
  font-size: 19px; font-weight: 600; letter-spacing: .02em; color: var(--ink);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.cl-block-text p { margin-top: 10px; color: var(--ink-2); font-size: 16px; line-height: 1.8; }

/* 媒体方角 1px 边框、零阴影 */
.cl-media { margin-top: 20px; }
.cl-media video, .cl-media img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line-strong); border-radius: 0; background: var(--surface);
}
.cl-media figcaption {
  margin-top: 8px; font-size: 13px; color: var(--ink-3);
  letter-spacing: .02em; line-height: 1.6;
}

/* 「新」「校」小标签:方角,信息类不作胶囊 */
.cl-tag {
  font-size: 11px; letter-spacing: .08em; font-weight: 600;
  padding: 2px 7px; border-radius: var(--radius-s);
  border: 1px solid currentColor; line-height: 1.4; white-space: nowrap;
  position: relative; top: -1px;
}
.cl-tag-new { color: var(--accent); }
.cl-tag-check { color: var(--ok); }

/* 更新时间线:日期在左、内容在右,细线分隔 */
.cl-log { list-style: none; margin: 18px 0 0; }
.cl-log-item {
  display: grid; grid-template-columns: 96px 1fr; gap: 20px;
  border-top: 1px solid var(--line); padding: 22px 0;
}
.cl-log-item:last-child { border-bottom: 1px solid var(--line); }
.cl-log-date {
  font-size: 14px; color: var(--ink-3); letter-spacing: .04em;
  font-variant-numeric: tabular-nums; padding-top: 2px;
}
.cl-log-body h3 { font-size: 17px; font-weight: 600; letter-spacing: .02em; color: var(--ink); }
.cl-log-body p { margin-top: 8px; color: var(--ink-2); font-size: 15px; line-height: 1.75; }

.changelog-foot {
  border-top: 1px solid var(--line); margin-top: 40px; padding-top: 20px;
  font-size: 14px; color: var(--ink-3); letter-spacing: .02em;
}

@media (max-width: 760px) {
  .changelog-page { margin-top: 32px; }
  .changelog-page h1 { font-size: 26px; }
  .changelog-overview { margin-top: 36px; }
  .changelog-timeline { margin-top: 48px; }
  .cl-log-item { grid-template-columns: 72px 1fr; gap: 14px; }
}

/* 分区:留白 + 细线小标题(报纸分栏),承担「完整流程 / 核心功能 / 进阶玩法」层级 */
.changelog-section { margin-top: 60px; }
.changelog-section > .changelog-h2 { padding-top: 16px; border-top: 1px solid var(--line-strong); }
.changelog-section-lead {
  margin-top: 10px; margin-bottom: 4px; color: var(--ink-2);
  font-size: 15px; line-height: 1.8; max-width: 60ch;
}
/* 完整流程两块给足呼吸,首块紧跟小标题不再叠细线 */
.changelog-section .cl-block:first-of-type { border-top: 0; padding-top: 20px; margin-top: 14px; }

/* 「能做什么」引导句略重于普通说明 */
.cl-lead { margin-top: 10px; color: var(--ink); font-size: 16px; line-height: 1.8; }

/* 「怎么用 / 适合谁」小标签:小号字距,灰阶,不抢 accent */
.cl-mini-label {
  display: block; margin-top: 18px; margin-bottom: 8px;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
}
.cl-who { margin-top: 8px; color: var(--ink-2); font-size: 15px; line-height: 1.75; }

/* 步骤条:方角序号(信息类,非胶囊),细线序号框,灰阶不上彩 */
.cl-steps { list-style: none; counter-reset: cl-step; margin: 0; }
.cl-steps li {
  position: relative; counter-increment: cl-step;
  padding-left: 32px; margin-top: 9px;
  color: var(--ink-2); font-size: 15px; line-height: 1.7;
}
.cl-steps li::before {
  content: counter(cl-step); position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; border: 1px solid var(--line-strong); border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 650; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* 键位提示:方角小标签,与正文区分 */
.cl-keys { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.cl-key {
  font-size: 11px; letter-spacing: .04em; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 2px 8px; font-variant-numeric: tabular-nums; white-space: nowrap;
}

@media (max-width: 760px) {
  .changelog-section { margin-top: 44px; }
}

/* ============ labels & chips ============ */
.eyebrow {
  font-size: 13px; letter-spacing: 3.5px; color: var(--accent);
  text-transform: uppercase; margin-bottom: 22px; font-weight: 600;
}
input::placeholder { color: var(--ink-3); }
.lang-chip {
  padding: 5px 14px; border-radius: var(--radius-s); font-size: 14px; color: var(--ink-2);
  border: 1px solid var(--line); text-decoration: none; transition: all .15s;
  white-space: nowrap; /* 窄容器下禁止「全部语言」折成竖排 */
}
.lang-chip:hover { border-color: var(--line-strong); color: var(--ink); }
.lang-chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ============ sections ============ */
.section { margin-top: 56px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; }
.section-head h2 { font-family: var(--serif); font-size: 24px; font-weight: 600; letter-spacing: .02em; }
.section-head .hint { color: var(--ink-3); font-size: 14px; }

/* ============ cards & grids ============ */
.grid { display: grid; gap: 22px; }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 960px) { .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid.cols-4, .grid.cols-2 { grid-template-columns: 1fr; } }

.pod-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color .18s;
 
}
.pod-card:hover { border-color: var(--ink-3); }
.pod-card .art { aspect-ratio: 1; background: var(--accent-tint); width: 100%; object-fit: cover; }
.pod-card .body { padding: 14px 16px 16px; }
.pod-card h3 {
  font-size: 16px; font-weight: 600; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pod-card .by { color: var(--ink-2); font-size: 14px; margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pod-card .desc {
  color: var(--ink-2); font-size: 14px; margin-top: 8px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* recents row */
.recent-card {
  display: flex; gap: 14px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; transition: border-color .18s;
 
}
.recent-card:hover { border-color: var(--ink-3); }
.recent-card img { width: 64px; height: 64px; border-radius: var(--radius-s); object-fit: cover; background: var(--accent-tint); }
.recent-card .t { font-weight: 600; font-size: 15px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.recent-card .m { color: var(--ink-2); font-size: 13.5px; margin-top: 3px; }

.video-import-hint { color: var(--ink-3); font-size: 13px; margin-top: 8px; }

/* ===== 我的学习:记录分组(继续学习按节目分组 / 视频按时间分段)=====
   一套记录行 .rec-row:方角 hairline 列表、零阴影、字号统一。行是链接:继承正文色。 */
.rec-groups { display: flex; flex-direction: column; gap: 14px; }
.rec-group { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.rec-group-head { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line); }
.rec-cover { width: 30px; height: 30px; border-radius: var(--radius-s); object-fit: cover; background: var(--accent-tint); flex: none; }
.rec-group-name { font-family: var(--serif); font-size: 16px; font-weight: 600; letter-spacing: .02em;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-group-count { margin-left: auto; color: var(--ink-3); font-size: 12.5px; flex: none; font-variant-numeric: tabular-nums; }

/* 视频分段:极小号灰阶段标 + 一个 hairline 列表容器 */
.rec-buckets { display: flex; flex-direction: column; gap: 22px; }
.rec-bucket-label { color: var(--ink-3); font-size: 11.5px; letter-spacing: .1em; margin-bottom: 8px; }
.rec-bucket-list { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }

/* 统一记录行:标题 15.5px serif、meta 12.5px --ink-3、行内边距一致 */
.rec-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px;
  border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; transition: background .12s; }
.rec-row:last-child { border-bottom: 0; }
.rec-row:hover { background: var(--accent-tint); }
.rec-thumb { width: 46px; height: 28px; border-radius: var(--radius-s); object-fit: cover; background: var(--accent-tint); flex: none; }
.rec-row-main { min-width: 0; flex: 1; }
.rec-row-title { font-family: var(--serif); font-size: 15.5px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.rec-row:hover .rec-row-title { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-3); }
.rec-row-meta { color: var(--ink-3); font-size: 12.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-row-side { display: flex; align-items: center; gap: 8px; flex: none; }
.rec-row-time { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rec-row-side .text-link { white-space: nowrap; }

/* 折叠(纯前端,刷新回默认):组内默认显示前 3 集;继续学习默认显示前 6 个节目组 */
.rec-group[data-collapsed="true"] .rec-extra { display: none; }
.rec-groups[data-collapsed="true"] .rec-group-extra { display: none; }
.rec-more { display: block; width: 100%; text-align: left; padding: 10px 16px; border: 0;
  border-top: 1px solid var(--line); background: transparent; color: var(--accent-strong);
  font: inherit; font-size: 13px; cursor: pointer; }
.rec-more:hover { text-decoration: underline; text-underline-offset: 3px; }
/* 「还有 N 个节目」是节目组之间的独立文字链,不在卡片内,去掉顶边线与左内边距 */
.rec-more-groups { border-top: 0; padding: 2px 0; }

@media (max-width: 560px) {
  .rec-row { flex-wrap: wrap; }
  .rec-row-side { flex-basis: 100%; margin-top: 6px; }
}

/* chips & badges */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: var(--radius-s); padding: 2.5px 10px;
  background: var(--surface);
}
.chip.ok { color: var(--ok); background: var(--ok-tint); border-color: transparent; }
.chip.accent { color: var(--accent-strong); background: var(--accent-tint); border-color: transparent; }
.chip.lang { text-transform: uppercase; letter-spacing: .04em; }
.chip.geo { color: var(--accent-strong); background: var(--accent-tint); border-color: transparent; }

/* notice */
.notice {
  background: var(--accent-tint); border: 1px solid transparent;
  border-radius: var(--radius); padding: 18px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: 15px; color: var(--ink);
}
.notice a { color: var(--accent-strong); font-weight: 600; white-space: nowrap; }

/* ============ buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  border-radius: var(--radius-s); padding: 9px 18px; font-size: 15px; cursor: pointer;
  letter-spacing: .02em;
  transition: background .15s, border-color .15s, color .15s, opacity .15s;
}
.btn:hover { border-color: var(--ink-3); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn.accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.accent:hover { background: var(--accent-strong); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.small { padding: 6px 13px; font-size: 14px; }

/* ============ page head (search / podcast) ============ */
.page-head { padding: 44px 0 8px; }
.page-head h1 { font-family: var(--serif); font-size: 32px; font-weight: 600; letter-spacing: .02em; }
.page-head .sub { color: var(--ink-2); margin-top: 8px; }

.result-count { color: var(--ink-3); font-size: 14px; margin: 18px 0 20px; }

/* ===== 我的学习:头部节奏 → 语言过滤 → 视图切换(tab)+ 记录搜索 =====
   递进:标题(紧)→ 副题(次紧)→ 语言 chips(留白隔开)→ tab 行(一档)→ 内容(大一档) */
.library-page .page-head { padding: 44px 0 0; }
.library-page .page-head .sub { margin-top: 6px; }

/* 语言 chips:全局过滤,第一行控件;gap 上下统一,折行也匀 */
.lib-langs { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; }

/* tab 行:左 报纸式文字视图切换(细下划线标记当前)· 右 记录搜索(胶囊);
   与 chips 差一档节奏。基线对齐让文字 tab 与右侧胶囊输入框同排。 */
.lib-tabbar { display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin: 16px 0 0; }

/* 视图切换:纯文字按钮,无边框无填充无胶囊;当前项 = 细下划线(与主导航 current
   同款:accent 色、1.5px、offset 7px),非当前 --ink-2、hover --ink。 */
.lib-tabs { display: inline-flex; align-items: baseline; gap: 22px; }
.lib-tab { display: inline-flex; align-items: baseline; gap: 7px; border: 0; background: transparent;
  color: var(--ink-2); padding: 0; font: inherit; font-size: 15px; cursor: pointer;
  letter-spacing: .02em; transition: color .15s; }
.lib-tab.on {
  color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--accent);
  text-decoration-thickness: 1.5px; text-underline-offset: 7px;
}
.lib-tab:hover:not(.on) { color: var(--ink); }
.lib-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.lib-tab-n { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* 记录搜索:胶囊输入框,低调 */
.lib-search { display: inline-flex; align-items: center; }
/* 次级过滤框:沿用全站搜索范式(.discover-search)——方角 + 1px --line-strong + focus 变 accent,
   高度收紧(次级过滤,非主搜索)。不用胶囊、不内嵌字符图标(placeholder 已表意)。 */
.lib-search-input { width: 220px; height: 33px; box-sizing: border-box;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); padding: 0 12px; font: inherit; font-size: 14px;
  transition: border-color .15s; }
.lib-search-input:focus { outline: none; border-color: var(--accent); }
.lib-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* tab 行到内容区留大一档;video 段只有一个 section,同样处理 */
.lib-panel > .section:first-child { margin-top: 30px; }

/* 搜索命中为空:规范式空态(一句话 + hairline + 文字链) */
.lib-search-empty { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 4px; }
.lib-search-empty p { color: var(--ink-2); font-size: 15px; margin-bottom: 10px; }
.lib-search-empty .text-link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 14px; }

@media (max-width: 560px) {
  .lib-tabbar { align-items: stretch; }
  .lib-search, .lib-search-input { width: 100%; }
}

/* podcast detail header */
.feed-head { display: flex; gap: 30px; padding: 56px 0 36px; align-items: flex-start; }
.feed-head img { width: 176px; height: 176px; border-radius: var(--radius); object-fit: cover;
  border: 1px solid var(--line); background: var(--accent-tint); flex-shrink: 0; }
.feed-head h1 { font-family: var(--serif); font-size: 34px; font-weight: 600; line-height: 1.25; letter-spacing: .02em; }
.feed-head .by { color: var(--accent-strong); font-size: 16px; margin-top: 6px; font-weight: 500; }
.feed-head .desc { color: var(--ink-2); font-size: 15px; margin-top: 14px; max-width: 720px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.feed-head .chips { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
@media (max-width: 640px) { .feed-head { flex-direction: column; } }

/* episode list */
.ep-list { border-top: 1px solid var(--line); }
.ep-row {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 6px; border-bottom: 1px solid var(--line);
  transition: background .12s;
}
.ep-row:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.ep-row .date { width: 108px; flex-shrink: 0; color: var(--ink-3); font-size: 13.5px; }
.ep-row .t { flex: 1; font-weight: 550; font-size: 16px; line-height: 1.45; }
.ep-row .len { color: var(--ink-3); font-size: 13.5px; white-space: nowrap; }
.ep-row .go {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center; color: var(--ink-2);
  transition: all .15s; flex-shrink: 0; font-size: 13px;
}
.ep-row:hover .go { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* ============ settings ============ */
.settings { max-width: 640px; margin: 0 auto; }
.form-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 28px; margin-top: 20px;
}
.form-card h3 { font-size: 16px; margin-bottom: 4px; }
.form-card .help { color: var(--ink-2); font-size: 14px; margin-bottom: 16px; }
.form-card .help a { color: var(--accent-strong); }
.engine-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 16px; }
.engine-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--ink-2); }
.engine-row select { flex: 0 0 auto; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 14px; color: var(--ink-2); margin-bottom: 6px; }
.field input, .field select {
  width: 100%; border: 1px solid var(--line-strong); border-radius: var(--radius-s);
  background: var(--bg); color: var(--ink); padding: 10px 13px; font-size: 15px;
  font-family: inherit; outline: none; transition: border-color .15s;
}
.field input:focus, .field select:focus { border-color: var(--accent); }
.toast {
  background: var(--ok-tint); color: var(--ok); border-radius: var(--radius-s);
  padding: 12px 18px; font-size: 15px; margin-top: 18px;
}

/* ============ video import(发现页:主搜索框「播客搜索 ↔ 视频导入」原位切换)============ */
/* 两个 .discover-search(播客搜索 / 视频导入)占同一位置、同宽同高,只切 display;
   下方 .discover-switch-hint 的提示同步换文案。零布局位移。
   注意:.discover-search 是 display:flex、.vii-prompt 是 inline-flex,会压过 [hidden]
   的默认 display:none,必须显式恢复,否则两态会同时显示。 */
.discover-search[hidden] { display: none; }
.video-import button:disabled { opacity: .5; cursor: default; }
/* 提示是搜索框的附注:紧贴主体(8px);与下方语言 chips 拉开一整档(26px),
   避免「搜索框/提示/chips」三行等距糊成一叠。 */
.discover-switch-hint { margin-top: 8px; margin-bottom: 26px; }
.vii-prompt {
  display: inline-flex; align-items: center; gap: 6px; padding: 0;
  border: 0; background: transparent; font: inherit; color: var(--accent-strong);
  cursor: pointer; text-align: left;
  /* 引导语属说明层级,低于搜索主体一档(13px + 轻字距),更贴日式的主从递进 */
  font-size: 13px; letter-spacing: .02em;
}
.vii-prompt[hidden] { display: none; }
.vii-prompt:hover { text-decoration: underline; text-underline-offset: 4px; }
.vii-prompt:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ============ episode reader ============ */
.ep-layout {
  display: grid; grid-template-columns: 340px 1fr; gap: 44px;
  padding-top: 44px; align-items: start;
}
@media (max-width: 900px) { .ep-layout { grid-template-columns: 1fr; } }

.ep-side { position: sticky; top: 72px; padding: 2px 2px 16px; }
@media (max-width: 900px) { .ep-side { position: static; } }

/* 播放页(网易云式):整屏锁定,仅右侧逐字稿滚动。桌面端生效,移动端保持整页滚动 */
/* 布局高度 = 视口高度,与左栏面板多少无关:
   左栏固定 100vh-105px(面板少时下方留白在透明底上不显突兀,面板多时栏内滚动),
   grid 行高由左栏撑出,右栏 stretch 等高;逐字稿绝对定位在右栏内滚动,
   屏幕越高逐字稿越高,不再有底部浪费。 */
@media (min-width: 901px) {
  body:has(.ep-layout) { overflow: hidden; }        /* 整个界面不再滚动 */
  body:has(.ep-layout) .footer { display: none; }   /* footer 会撑破锁定的视口,隐藏 */
  .ep-layout { align-items: stretch; }              /* 两栏等高 */
  /* 去掉左栏底部 16px 内边距,让行高贴到视口底,右栏据此对齐 */
  .ep-side { height: calc(100vh - 105px); overflow-y: auto; padding-bottom: 0; }
  .ep-main { position: relative; min-height: 0; }
  .ep-main #tr-area { position: absolute; inset: 0; overflow-y: auto; }  /* 唯一滚动区 */
}

/* ===== 导入的视频(YouTube iframe / SVT 等自建 HLS):沉浸式观看页 =====
   顶部 sticky 播放器 + 下方「3 行沉浸字幕」:当前句大且居中、词级扫读(句级
   字幕则整句高亮),上下句小而淡,可滚动浏览、点句跳转、点词查义。 */
.ep-video { position: sticky; top: 60px; z-index: 30; background: var(--bg);
  padding: 6px 0 8px; box-shadow: 0 6px 16px -14px rgba(0,0,0,.5); }
.ep-video-inner { position: relative; width: 100%; max-width: 960px; aspect-ratio: 16 / 9; max-height: 62vh; margin: 0 auto;
  border-radius: var(--radius-s); overflow: hidden; background: #000; }
.ep-video-inner iframe { width: 100%; height: 100%; border: 0; display: block; }
.ep-video-inner video { width: 100%; height: 100%; display: block; background: #000; }
/* 非 YouTube 源:流解析失败/地理锁时盖在视频位上的提示(字幕阅读不受影响) */
.vid-err {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; text-align: center;
  padding: 24px; background: rgba(0,0,0,.72); color: #fff;
}
.vid-err-t { font-size: 16px; font-weight: 600; }
.vid-err-s { font-size: 14px; color: rgba(255,255,255,.75); max-width: 420px; line-height: 1.6; }
/* 视频右上角的全屏键(YouTube 自带的已 fs:0 隐藏),悬停视频时显示 */
.fs-corner {
  position: absolute; top: 8px; right: 8px; z-index: 4;
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px;
  background: rgba(0,0,0,.5); color: #fff; font-size: 17px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity .15s, background .15s;
}
.ep-video-inner:hover .fs-corner { opacity: 1; }
.fs-corner:hover { background: rgba(0,0,0,.82); }

/* 视频页:单栏、不锁视口;隐藏整条侧栏(播放条/面板都不要,元素仍在 DOM 供 JS) */
body:has(.ep-layout.is-video) { overflow: auto; }
body:has(.ep-layout.is-video) .footer { display: none; }
.ep-layout.is-video { display: block; padding-top: 0; }
.ep-layout.is-video .ep-side { display: none; }
.ep-layout.is-video .tr-head { display: none; }
.ep-layout.is-video .ep-main { position: static; }

/* 3 行沉浸字幕舞台:定高滚动区,当前句用 scrollIntoView 居中;上下渐隐露出邻句 */
.ep-layout.is-video #tr-area {
  position: static; inset: auto;
  height: 17vh; min-height: 128px;
  overflow-y: auto; text-align: center; padding: 7.5vh 16px; scroll-behavior: smooth;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent);
}
.ep-layout.is-video .line {
  padding: 7px 16px; border: 0;
  opacity: .3; transition: opacity .25s ease;
}
.ep-layout.is-video .line:hover { opacity: .6; }
/* 播放键与句子同一行居中(悬停/当前句显示);点键跳转、点词查义、点行体不跳 */
.ep-layout.is-video .en-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
.ep-layout.is-video .line-play {
  flex: 0 0 auto; width: 30px; height: 30px; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--ink-3); background: transparent; color: var(--ink-2);
  cursor: pointer; opacity: 0; transition: opacity .15s, color .15s, border-color .15s, background .15s;
  display: inline-flex; align-items: center; justify-content: center;
}
.ep-layout.is-video .line-play::before { content: '▶'; font-size: 13px; margin-left: 2px; }
.ep-layout.is-video .line:hover .line-play,
.ep-layout.is-video .line.active .line-play { opacity: 1; }
/* 当前句的键更醒目:赤陶色描边、更大 */
.ep-layout.is-video .line.active .line-play {
  width: 38px; height: 38px; border-color: var(--accent-strong); color: var(--accent-strong);
}
.ep-layout.is-video .line.active .line-play::before { font-size: 16px; }
.ep-layout.is-video .line-play:hover { color: #fff; background: var(--accent-strong); border-color: var(--accent-strong); }
/* 当前句正在播放:键变暂停(❚❚),悬停点它=暂停 */
body.is-playing .ep-layout.is-video .line.active .line-play::before { content: '❚❚'; margin-left: 0; font-size: 13px; letter-spacing: 1px; }
.ep-layout.is-video .line.active { opacity: 1; }
.ep-layout.is-video .line .ts { display: none; }         /* 时间戳不需要 */
.ep-layout.is-video .line .en {
  font-size: 1.05rem; line-height: 1.6; transition: font-size .2s ease;
}
.ep-layout.is-video .line.active .en {
  font-size: 1.6rem; line-height: 1.55; font-weight: 500;
}
/* 句级字幕(SVT 等人工字幕):句子普遍更长,舞台加高、当前句稍收一档 */
.ep-layout.is-video.sent-level #tr-area { height: 24vh; min-height: 190px; }
.ep-layout.is-video.sent-level .line.active .en { font-size: 1.45rem; }
/* 超长句按长度降档(JS 按字符数标 long/xlong),保证整句在遮罩内可见 */
.ep-layout.is-video .line.active .en.long { font-size: 1.25rem; line-height: 1.5; }
.ep-layout.is-video .line.active .en.xlong { font-size: 1.05rem; line-height: 1.5; }
/* 词群荧光下划线(与沉浸跟读同款):只给当前句上色,邻句小字淡显不加噪 */
.ep-layout.is-video .line.active .ck {
  background: linear-gradient(transparent 76%, var(--ckc, transparent) 76%);
  border-radius: 3px; padding-bottom: 2px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.ep-layout.is-video .line.active .ck-0 { --ckc: var(--hl-a); }
.ep-layout.is-video .line.active .ck-1 { --ckc: var(--hl-b); }
.ep-layout.is-video .line.active .ck-2 { --ckc: var(--hl-c); }
.ep-layout.is-video .line.active .ck-3 { --ckc: var(--hl-d); }
.ep-layout.is-video .line.active .ck-4 { --ckc: var(--hl-e); }
/* 译文:只在当前句显示(且未关「显示译文」时) */
.ep-layout.is-video .line .zh { display: none; }
.ep-layout.is-video .line.active .zh { display: block; margin-top: 8px; font-size: 1rem; }
body.hide-zh .ep-layout.is-video .line.active .zh { display: none; }

/* 字幕下方细控制条:逐句暂停 / 显示译文 + 提示 */
.vid-bar {
  position: sticky; bottom: 0; z-index: 20; background: var(--bg);
  display: flex; gap: 10px; align-items: center; justify-content: center;
  padding: 12px; border-top: 1px solid var(--line); flex-wrap: wrap;
}
/* 生成中文翻译:字幕栏里唯一的付费动作,用 accent 描边区分于灰色开关 */
.vid-bar .vc-gen { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.vid-bar .vc-gen:hover:not(:disabled) { background: var(--accent); color: #fff; }
.vid-bar .vc-gen:disabled { opacity: .6; cursor: default; }
.vid-hint { color: var(--ink-3); font-size: 13px; margin-left: 6px; }
/* 视频控制条上的中性小标识(句级字幕 / 地区限制),说明性、不可点 */
.vid-chip {
  font-size: 13px; color: var(--ink-3); border: 1px solid var(--line);
  border-radius: var(--radius-s); padding: 3px 10px; white-space: nowrap; cursor: default;
}
.vid-chip.warn { color: var(--accent-strong); background: var(--accent-tint); border-color: transparent; }
@media (max-width: 640px) { .vid-hint { display: none; } }

/* 全屏:整块(视频 + 字幕 + 控制条)填满屏幕,视频在上、字幕在下 */
#video-fs.fs-on {
  background: var(--bg); width: 100vw; height: 100vh; padding: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
/* 视频占满剩余空间并居中,字幕保持一条短带(与非全屏一致),不再撑满 */
#video-fs.fs-on .ep-video { position: static; top: auto; box-shadow: none; padding: 10px 0 4px;
  flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
#video-fs.fs-on .ep-video-inner { max-width: min(94vw, 1500px); max-height: 72vh; }
#video-fs.fs-on .ep-layout.is-video { flex: 0 0 auto; display: flex; flex-direction: column; }
#video-fs.fs-on .ep-main { flex: 0 0 auto; display: flex; flex-direction: column; }
#video-fs.fs-on #tr-area { flex: 0 0 auto; height: 20vh; min-height: 128px; padding: 6.5vh 16px; }
#video-fs.fs-on .vid-bar { flex: 0 0 auto; }

/* 视频页:查词结果改成从右侧划出的抽屉(整条右栏),不再贴词浮窗 */
.lookup-pop.as-drawer {
  top: 60px; right: 0; bottom: 0; left: auto;
  width: min(400px, 92vw); max-width: none; height: auto; max-height: none;
  border: 0; border-left: 1px solid var(--line-strong); border-radius: 0;
  box-shadow: -10px 0 34px -16px rgba(0,0,0,.45);
  transform: translateX(102%);
}
.lookup-pop.as-drawer.show { transform: translateX(0); }
#video-fs.fs-on .lookup-pop.as-drawer { top: 0; }  /* 全屏无导航,贴顶 */

/* 抽屉里的组卡面板:覆盖在查词结果上方(整条右栏),← 返回可回到继续选择,保存后整条收起 */
.card-builder.in-drawer {
  position: absolute; inset: 0; z-index: 5; width: auto; max-width: none; max-height: none;
  margin: 0; padding: 18px 20px; border: 0; border-radius: 0;
  box-shadow: none; background: var(--surface); overflow-y: auto;
  animation: drawerCover .2s ease;
}
@keyframes drawerCover { from { transform: translateX(24px); opacity: .4; } to { transform: none; opacity: 1; } }
.card-builder.in-drawer .cb-back {
  position: static; float: none; display: inline-flex; align-items: center;
  width: auto; height: auto; margin-bottom: 12px; padding: 4px 10px 4px 6px;
  border: 1px solid var(--line); border-radius: 999px; background: transparent;
  color: var(--ink-2); font-size: 14px; cursor: pointer;
}
.card-builder.in-drawer .cb-back:hover { border-color: var(--accent-strong); color: var(--accent-strong); }

.ep-head { display: flex; gap: 14px; align-items: flex-start; }
.ep-head .art { width: 88px; height: 88px; flex-shrink: 0; border-radius: var(--radius-s);
  background: var(--accent-tint); object-fit: cover; }
/* 屏幕够高:封面放大为通栏方图填充左栏;不够高维持小图,避免左栏被迫滚动 */
@media (min-width: 901px) and (min-height: 1000px) {
  .ep-head { flex-direction: column; }
  .ep-head .art { width: 100%; height: auto; aspect-ratio: 1 / 1; border: 1px solid var(--line); }
}
.ep-head-info { min-width: 0; }
.ep-side h1 { font-family: var(--serif); font-size: 17.5px; line-height: 1.4; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.feed-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; min-width: 0; }
.ep-side .feed { color: var(--accent-strong); font-size: 13.5px; font-weight: 500;
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 订阅:可按控件用胶囊(与设计规范一致),默认描边、已订阅填底 */
.sub-inline { flex: none; }
.sub-btn {
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink-2);
  border-radius: 999px; padding: 3px 11px; font-size: 12px; cursor: pointer; white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}
.sub-btn:hover { border-color: var(--accent); color: var(--accent-strong); }
.sub-btn.on { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-tint); }
.ep-side .meta { color: var(--ink-3); font-size: 13px; margin-top: 3px; }

.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; margin-top: 14px;
}
.panel .panel-title {
  font-size: 13px; letter-spacing: 2px; color: var(--ink-3);
  text-transform: uppercase; margin-bottom: 12px; font-weight: 600;
}

/* player */
.player-main { display: flex; align-items: center; gap: 14px; }
.play-btn {
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--ink); color: var(--bg); font-size: 17px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .1s;
}
.play-btn:hover { background: var(--accent-strong); }
.play-btn:active { transform: scale(.96); }
.player-times { display: flex; justify-content: space-between; font-size: 13px;
  color: var(--ink-3); font-variant-numeric: tabular-nums; margin-top: 6px; }
.seek { width: 100%; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 4px;
  background: linear-gradient(to right, var(--accent) var(--fill, 0%), var(--line-strong) var(--fill, 0%));
  outline: none; cursor: pointer; }
.seek::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); border: 2.5px solid var(--surface);
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.player-extra { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.pill-group { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; }
.pill-group button {
  border: 0; background: transparent; color: var(--ink-2); padding: 5.5px 13px;
  font-size: 13.5px; cursor: pointer; transition: all .12s;
}
.pill-group button.on { background: var(--ink); color: var(--bg); }
.pill-group button:disabled { opacity: .4; cursor: not-allowed; }
select.speed {
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2);
  border-radius: 999px; padding: 5px 10px; font-size: 13.5px; outline: none; cursor: pointer;
}

/* shadow controls */
.shadow-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.tog {
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2);
  border-radius: 999px; padding: 6px 14px; font-size: 14px; cursor: pointer; transition: all .13s;
}
.tog.on { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-strong); font-weight: 550; }
.sent-nav { display: flex; gap: 8px; margin-top: 12px; }
.sent-nav .btn { flex: 1; }
.kbd-hint { color: var(--ink-3); font-size: 12.5px; margin-top: 12px; line-height: 1.7; }
.kbd-hint kbd {
  border: 1px solid var(--line-strong); border-radius: 4px; padding: 0 5px;
  font-size: 11.5px; background: var(--bg); font-family: inherit;
}

/* transcript */
/* 顶部「逐字稿 / N 句 / 识别广告」横栏隐藏,逐字稿直接顶到最上(网易云式)。
   元素保留在 DOM 中,JS 仍可读写其状态而不报错;识别广告按钮如需可再挪到左栏 */
.tr-head { display: none; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.tr-head h2 { font-family: var(--serif); font-size: 20px; font-weight: 600; }
.tr-head .st { font-size: 13.5px; color: var(--ink-3); }

/* 已有逐字稿时的初始占位:避免异步渲染前闪现「生成逐字稿」框 */
.tr-loading { display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  color: var(--ink-3); font-size: 14.5px; }

.tr-empty {
  background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius);
  padding: 54px 30px; text-align: center;
}
.tr-empty h3 { font-family: var(--serif); font-size: 20px; font-weight: 600; }
.tr-empty p { color: var(--ink-2); font-size: 15px; margin: 10px auto 22px; max-width: 400px; }
.tr-empty select {
  border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--bg);
  color: var(--ink); padding: 9px 12px; font-size: 15px; outline: none;
}
.tr-lang {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 auto 16px; justify-content: center;
}
.tr-lang label { color: var(--ink-2); font-size: 15px; }

.line {
  padding: 10px 16px; border-radius: var(--radius-s); cursor: pointer;
  transition: background .15s; margin-bottom: 2px;
}
.line:hover { background: color-mix(in srgb, var(--surface) 85%, var(--accent-tint)); }
/* 当前句:左侧 2px accent 竖线(编辑风页边标记),静止不投影 */
.line.active { background: var(--surface); box-shadow: inset 2px 0 0 var(--accent); }
.line .en { font-size: 17.5px; line-height: 1.85; color: var(--ink); }
.line .en .w { border-radius: 4px; padding: 1px 1.5px; cursor: pointer; transition: background .1s, color .1s; }
.line .en .w:hover { background: var(--accent-tint); color: var(--accent-strong); }
.line .en .w.hot { background: var(--accent); color: #fff; }
/* 词卡词高亮。颜色语义分通道,和卡拉 OK 扫读不打架:
   赤陶(accent)= 瞬时交互——扫读当前词、悬停查词;
   绿(ok)= 持久学习标记——词卡词;扫读经过词卡词时赤陶无条件压过绿。
   将来 tag 扩展(如 wl-hard)另占色相即可。
   词组包在 .wl-group 里,连同词间空格整体着色、悬停/点击联动 */
.line .en .w.wl-learning { color: var(--ok); background: var(--ok-tint); }
.line .en .w.wl-learning:hover { background: var(--ok-tint); color: var(--ok); box-shadow: inset 0 0 0 1.5px var(--ok); }
.line .en .w.wl-learning.hot { background: var(--accent); color: #fff; box-shadow: none; }
.wl-group {
  border-radius: 4px; padding: 1px 2px; cursor: pointer;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.wl-group.wl-learning { background: var(--ok-tint); color: var(--ok); }
/* 悬停不反色:整组加描边表达联动,组内单词不再各自变色 */
.wl-group.wl-learning:hover { box-shadow: inset 0 0 0 1.5px var(--ok); }
.wl-group.wl-learning .w,
.wl-group.wl-learning .w:hover { background: transparent; color: inherit; box-shadow: none; }
.wl-group.wl-learning .w.hot { background: var(--accent); color: #fff; }
.line.active .en { color: var(--ink); }
.line:not(.active) .en { color: var(--ink-2); }
.line .zh { font-size: 15px; color: var(--ink-2); margin-top: 5px; line-height: 1.7; }
.line .zh.pending { color: var(--ink-3); font-style: italic; }
.line .badge-ad {
  display: inline-block; font-size: 11.5px; color: var(--ink-3);
  border: 1px solid var(--line-strong); border-radius: 4px; padding: 0 5px; margin-right: 7px;
  vertical-align: 2px;
}
/* 同音校正标:仿广告标同一方角范式,但用更淡的 --line 描边(广告标是
   --line-strong)+ 更小字号,视觉上区分开——校正是中性留痕,不该像广告标那样抢眼。 */
.line .badge-fix {
  display: inline-block; font-size: 10.5px; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; margin-right: 6px;
  vertical-align: 2px;
}
.line.ad .en, .line.ad .zh { opacity: .45; }
.line.ad .en { font-size: 15px; }
.line .ts { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; margin-bottom: 2px; display: none; }
.line.active .ts { display: block; }
body.hide-zh .line .zh { display: none; }

/* ---- 逐词读音标注(泰语 Paiboon 罗马音等) ----
   读音存在 .w 的 data-rom 上,由 ::before 画在词正上方,不进可选中文本流:
   点词 lookup 取 textContent、鼠标拖选复制都只有原文;body.hide-rom 一键隐藏。
   词变 inline-block 竖排两层,基线对齐仍走词文本的基线(块内末行),与相邻
   无读音的词(数字/标点)不错位;卡拉 OK .hot、意群 .ck 下划线均不受影响。
   读音字号 .58em(注音属 furigana 式例外,不受 12px 正文下限约束)。 */
body:not(.hide-rom) .en .w[data-rom] { display: inline-block; text-align: center; line-height: 1.6; }
body:not(.hide-rom) .en .w[data-rom]::before {
  content: attr(data-rom);
  display: block;
  font-family: var(--sans);
  font-size: .6em; line-height: 1.3; font-weight: 400; letter-spacing: .02em;
  color: var(--ink-2);
}
/* 扫读经过时读音随词反白,不残留灰字压在 accent 底上 */
.en .w.hot[data-rom]::before { color: color-mix(in srgb, #fff 82%, transparent); }

/* 视频舞台:读音只标当前句——与译文同一范式(邻句是 30% 淡显的上下文,
   微缩注音在渐隐带里只是噪音);当前句居中远离遮罩,注音按正文一半配比。 */
.ep-layout.is-video .line:not(.active) .en .w[data-rom] { display: inline; }
.ep-layout.is-video .line:not(.active) .en .w[data-rom]::before { content: none; }
.ep-layout.is-video .line.active .en .w[data-rom]::before { font-size: .5em; }
.imm-stage .line .en .w[data-rom]::before { font-size: .5em; }
/* 开着读音时舞台加高、渐隐带收窄:给当前句的注音行留出完全清晰的可读区 */
body.has-rom:not(.hide-rom) .ep-layout.is-video #tr-area {
  height: 21vh; min-height: 176px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}

/* ---- 按语言的正文排版策略(分表+兜底:默认档即上方现有样式,语种特调只加表项) ---- */
/* 泰文:元音/声调符上下叠加需要空间——字号上调 ~115%、行距放宽;词间用
   margin 制造视觉词距(纯 CSS 空隙,复制出来仍是无空格泰文)。开读音时行距
   由词块自身高度(读音行 + 正文行)撑开,关读音时 line-height 兜住声调符。 */
body[data-lang="th"] .line .en { font-size: 20px; line-height: 2.05; }
body[data-lang="th"] .line .en .w { margin-right: .22em; }
body[data-lang="th"] .line.ad .en { font-size: 16px; }
body[data-lang="th"] .imm-stage .line .en { font-size: calc(var(--imm-base, 30px) * var(--imm-fs, 1)); line-height: 2.2; }
body[data-lang="th"] .ep-layout.is-video .line .en { font-size: 1.2rem; line-height: 1.8; }
body[data-lang="th"] .ep-layout.is-video .line.active .en { font-size: 1.75rem; line-height: 1.8; }

/* 日文:汉字/假名混排,振假名(平假名读音)叠在词上方需要行距——字号略调、行距放宽;
   词间用与泰文同机制的 margin 词距(纯 CSS 空隙,复制出来仍是无空格日文)。CJK 禁则:
   line-break: strict 让行首不落句读点(。、),overflow-wrap: anywhere 避免长音符/长词孤行。 */
body[data-lang="ja"] .line .en { font-size: 19px; line-height: 2.0; line-break: strict; overflow-wrap: anywhere; }
body[data-lang="ja"] .line .en .w { margin-right: .12em; }
body[data-lang="ja"] .line.ad .en { font-size: 16px; }
body[data-lang="ja"] .imm-stage .line .en { font-size: calc(var(--imm-base, 30px) * 0.93 * var(--imm-fs, 1)); line-height: 2.15; }
body[data-lang="ja"] .ep-layout.is-video .line .en { font-size: 1.2rem; line-height: 1.75; }
body[data-lang="ja"] .ep-layout.is-video .line.active .en { font-size: 1.7rem; line-height: 1.75; }

/* 韩文:谚文本有空格(eojeol),不加双重词距,只微调节奏——字号/行距为罗马字读音行留白;
   词内音节连写,词间沿用原生空格。CJK 禁则同上,避免行首落标点。 */
body[data-lang="ko"] .line .en { font-size: 19px; line-height: 1.95; line-break: strict; overflow-wrap: anywhere; }
/* eojeol 词距:原生空格之上再加一档轻 CSS 空隙(比泰语 .22em 克制,防双重间隔过散),更易读 */
body[data-lang="ko"] .line .en .w { margin-right: .12em; }
body[data-lang="ko"] .line.ad .en { font-size: 16px; }
body[data-lang="ko"] .imm-stage .line .en { font-size: calc(var(--imm-base, 30px) * 0.93 * var(--imm-fs, 1)); line-height: 2.1; }
body[data-lang="ko"] .ep-layout.is-video .line .en { font-size: 1.2rem; line-height: 1.7; }
body[data-lang="ko"] .ep-layout.is-video .line.active .en { font-size: 1.7rem; line-height: 1.7; }

/* 中文:CJK 禁则换行——行首不落句读点、长句不撑破容器(zh 无 data-lang 专表,仅补禁则) */
body[data-lang="zh"] .line .en { line-break: strict; overflow-wrap: anywhere; }

/* lookup popup */
.lookup-pop {
  position: fixed; z-index: 200; width: 340px; max-width: calc(100vw - 32px);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: var(--shadow-lift); padding: 18px 20px;
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  max-height: 62vh; overflow-y: auto;
}
.lookup-pop.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.lookup-pop .term { font-family: var(--serif); font-size: 21px; font-weight: 600; }
.lookup-pop .phon { color: var(--ink-3); font-size: 14px; margin-left: 8px; }
.lookup-pop .surface { color: var(--ink-3); font-size: 13px; margin-left: 8px;
  border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; vertical-align: 2px; }
.lookup-pop .pos {
  display: inline-block; font-size: 12px; color: var(--accent-strong);
  background: var(--accent-tint); border-radius: 4px; padding: 1px 7px; margin-left: 8px;
  vertical-align: 3px;
}
.lookup-pop .sec { margin-top: 12px; }
.lookup-pop .sec .lab { font-size: 12px; letter-spacing: 1.5px; color: var(--ink-3); text-transform: uppercase; font-weight: 600; }
.lookup-pop .sec .val { font-size: 14.5px; margin-top: 3px; line-height: 1.7; }
.lookup-pop .ex { margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--line); }
.lookup-pop .ex .e { font-size: 14px; }
.lookup-pop .ex .z { font-size: 13.5px; color: var(--ink-2); }
.lookup-pop .foot { margin-top: 14px; font-size: 12px; color: var(--ink-3); }
.lookup-pop .close {
  position: absolute; top: 10px; right: 12px; border: 0; background: transparent;
  color: var(--ink-3); font-size: 16px; cursor: pointer; padding: 4px;
}
.lookup-pop .err { color: var(--accent-strong); font-size: 14px; margin-top: 10px; }

.spinner {
  width: 18px; height: 18px; border-radius: 50%; display: inline-block;
  border: 2px solid var(--line-strong); border-top-color: var(--accent);
  animation: spin .7s linear infinite; vertical-align: -4px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* selection floating button */
.sel-btn {
  position: fixed; z-index: 190; display: none;
  border: 0; background: var(--ink); color: var(--bg);
  border-radius: 999px; padding: 7px 16px; font-size: 14px; cursor: pointer;
  box-shadow: var(--shadow-lift);
}
.sel-btn:hover { background: var(--accent-strong); }

/* empty-state generic */
.empty { text-align: center; color: var(--ink-3); padding: 60px 0; font-size: 15px; }

/* ============ error page(单集加载失败等)============
   编辑风空态:hairline 在上、题在线下,一句话 + 文字链接,零阴影零插画 */
.error-page { max-width: 560px; margin: 56px auto 24px; border-top: 1px solid var(--line); padding-top: 18px; }
.error-kicker {
  font-size: 13px; letter-spacing: .14em; color: var(--ink-3);
  font-variant-numeric: tabular-nums; margin-bottom: 14px;
}
.error-page h1 { font-family: var(--serif); font-size: 26px; font-weight: 600; letter-spacing: .02em; margin-bottom: 12px; }
.error-message { color: var(--ink-2); font-size: 15px; line-height: 1.7; margin-bottom: 18px; }
.error-detail {
  margin-top: 32px; border-top: 1px solid var(--line); padding-top: 12px;
  color: var(--ink-3); font-size: 12px; line-height: 1.6; word-break: break-all;
}

/* ============ auth & user menu ============ */
.toast.error { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-strong); }
.auth-page { max-width: 420px; margin: 0 auto; }
.auth-card { margin-top: 22px; }
.nav-cta { color: var(--accent-strong) !important; font-weight: 600; }
.credit-badge {
  margin-left: 8px; font-size: 13px; color: var(--accent-strong);
  border: 1px solid var(--line); border-radius: var(--radius-s); padding: 1.5px 9px;
  font-variant-numeric: tabular-nums;
}
.user-menu { position: relative; }
.user-menu summary {
  list-style: none; cursor: pointer; font-size: 15px; color: var(--ink-2);
  display: flex; align-items: center; user-select: none;
}
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary:hover { color: var(--ink); }
.user-menu-panel {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 160px; z-index: 50;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s);
  box-shadow: var(--shadow-lift); padding: 8px; display: flex; flex-direction: column;
}
.user-menu-panel a, .user-menu-panel .linklike {
  display: block; width: 100%; text-align: left; padding: 8px 10px; font-size: 15px;
  color: var(--ink-2); background: none; border: 0; cursor: pointer; font-family: inherit;
  border-radius: var(--radius-s);
}
.user-menu-panel a:hover, .user-menu-panel .linklike:hover { background: var(--bg); color: var(--ink); }
.cost-hint { color: var(--ink-3); font-size: 13px; margin-top: 10px; line-height: 1.6; }

/* ============ billing ============ */
.balance-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 30px; margin-top: 22px;
  display: flex; justify-content: space-between; align-items: center;
}
.balance-num { font-family: var(--serif); font-size: 40px; font-weight: 600; }
.balance-num span { font-size: 16px; color: var(--ink-2); font-family: var(--sans); }
.balance-sub { color: var(--ink-2); font-size: 14px; margin-top: 4px; }
.credit-debt { display: grid; gap: 3px; text-align: right; color: var(--accent-strong); }
.credit-debt span { color: var(--ink-3); font-size: 12.5px; }
.offer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.offer-card {
  min-width: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 21px; display: flex; flex-direction: column;
}
.offer-card.is-current { border-color: var(--ink-3); }
.offer-kicker { color: var(--ink-3); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }
.offer-card h3 { font-family: var(--serif); font-size: 21px; font-weight: 600; margin-top: 6px; }
.offer-price { display: flex; align-items: baseline; gap: 6px; margin-top: 14px; }
.offer-price strong { font-family: var(--serif); font-size: 30px; font-weight: 600; }
.offer-price span, .offer-price del { color: var(--ink-3); font-size: 13px; }
.offer-description { color: var(--ink-2); font-size: 14px; line-height: 1.65; margin-top: 8px; }
.offer-benefits { list-style: none; display: grid; gap: 7px; margin: 18px 0 20px; color: var(--ink-2); font-size: 13.5px; flex: 1; }
.offer-benefits li { padding-left: 14px; position: relative; }
.offer-benefits li::before { content: "·"; position: absolute; left: 2px; color: var(--accent-strong); }
.btn.full { width: 100%; }
.btn.quiet { color: var(--ink-2); background: transparent; }
.muted { color: var(--ink-3); font-size: 13.5px; }
.subscription-panel { border-top: 1px solid var(--line); padding-top: 28px; }
.subscription-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.subscription-summary > div { display: grid; gap: 5px; }
.subscription-summary span { color: var(--ink-3); font-size: 12.5px; }
.subscription-summary strong { font-size: 15px; font-weight: 600; }
.subscription-note { color: var(--accent-strong); font-size: 13.5px; margin-top: 18px; }
.subscription-actions { display: flex; align-items: center; gap: 9px; margin-top: 20px; flex-wrap: wrap; }
.payment-result { max-width: 620px; margin: 0 auto; }
.payment-result-body { border-top: 1px solid var(--line); padding: 42px 0; text-align: center; }
.payment-result-mark { width: 42px; height: 42px; display: grid; place-items: center; margin: 0 auto 18px;
  border: 1px solid var(--line-strong); border-radius: 50%; color: var(--accent-strong); font-size: 24px; }
.payment-result-body h2 { font-family: var(--serif); font-size: 26px; font-weight: 600; }
.payment-result-body p { color: var(--ink-2); line-height: 1.7; margin: 10px auto 24px; max-width: 460px; }
.sku-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; display: flex; flex-direction: column; gap: 6px;
  transition: border-color .18s;
}
.sku-card:hover { border-color: var(--ink-3); }
.sku-name { font-weight: 600; }
.sku-price { font-family: var(--serif); font-size: 28px; }
.sku-desc { color: var(--ink-2); font-size: 14px; flex: 1; margin-bottom: 10px; }
.redeem-row { display: flex; gap: 10px; max-width: 420px; }
.redeem-row input {
  flex: 1; border: 1px solid var(--line-strong); border-radius: var(--radius-s);
  background: var(--surface); color: var(--ink); padding: 10px 13px; font-size: 15px;
  font-family: ui-monospace, monospace; letter-spacing: 1px; outline: none;
}
.redeem-row input:focus { border-color: var(--accent); }
.data-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.data-table th {
  text-align: left; color: var(--ink-3); font-weight: 500; font-size: 13.5px;
  padding: 8px 12px; border-bottom: 1px solid var(--line);
}
.data-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); }
.data-table tr:last-child td { border-bottom: 0; }
.data-table .mono { font-family: ui-monospace, monospace; font-size: 13.5px; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .dim { color: var(--ink-3); }
.data-table .pos { color: var(--ok); }
.data-table .neg { color: var(--accent-strong); }
.data-table tfoot td { padding: 9px 12px; border-top: 1px solid var(--line); font-weight: 600; }

@media (max-width: 960px) {
  .offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .subscription-summary { grid-template-columns: repeat(2, 1fr); }
}

/* ============ word cards ============ */
.cards-toolbar { display: flex; justify-content: space-between; align-items: center; margin: 22px 0; flex-wrap: wrap; gap: 12px; }
.cards-toolbar .pill-group a { padding: 6px 14px; font-size: 14px; color: var(--ink-2); border-radius: 999px; }
.cards-toolbar .pill-group a.on { background: var(--ink); color: var(--bg); }
.review-settings { position: relative; }
.review-settings > summary { list-style: none; cursor: pointer; color: var(--ink-2); font-size: 13.5px; padding: 6px 9px; }
.review-settings > summary::-webkit-details-marker { display: none; }
.review-settings-panel {
  position: absolute; z-index: 35; top: calc(100% + 7px); right: 0; width: 220px;
  display: grid; gap: 12px; padding: 13px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lift);
}
.review-settings-panel > label:not(.rv-toggle) { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink-2); font-size: 13.5px; }
/* 列表头:左侧张数统计,右侧整理工具(管理/导出),纯留白与时间线分隔、不加底色 */
.list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 20px 2px 9px; }
.lh-count { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.lh-tools { display: flex; align-items: baseline; gap: 16px; }
.lh-tools .text-link { background: none; border: 0; padding: 0; cursor: pointer; }
/* 列表:一行一卡,点击弹窗 */
.card-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.card-row {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  border-bottom: 1px solid var(--line); cursor: pointer; transition: background .12s;
}
.card-row:last-child { border-bottom: 0; }
.card-row:hover { background: var(--accent-tint); }
.cr-main { min-width: 0; flex: 1; }
.cr-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cr-term { font-family: var(--serif); font-size: 17px; font-weight: 600; }
.cr-phon { color: var(--ink-3); font-size: 13.5px; }
.cr-pos { color: var(--ink-3); font-size: 13px; font-style: italic; }
.cr-meaning { color: var(--ink-2); font-size: 14px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-badges { display: flex; align-items: center; gap: 8px; flex: none; }
.cr-badge { color: var(--ink-3); font-size: 13px; white-space: nowrap; }
/* 复习进度圆点:熟悉度分档,填充数 = 档位 */
.cr-dots { display: inline-flex; align-items: center; gap: 3px; cursor: help; }
.cr-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.cr-dot.on { background: var(--accent); }
.cr-dots.arch .cr-dot.on { background: #6ba368; }
.cr-sentinel { height: 1px; }
.card-empty { padding: 28px; text-align: center; color: var(--ink-3); font-size: 14.5px; }

/* 已导出:极低调标记 */
.cr-exported { font-size: 12px; color: var(--ink-3); letter-spacing: .02em; }

/* ===== 批量管理模式 ===== */
.card-row.manage { cursor: pointer; user-select: none; }
/* 方角勾选框 */
.cr-check {
  flex: none; width: 17px; height: 17px; border: 1.5px solid var(--line-strong);
  border-radius: 2px; background: var(--surface); position: relative; transition: background .12s, border-color .12s;
}
.card-row.selected { background: var(--accent-tint); }
.card-row.selected .cr-check { background: var(--accent); border-color: var(--accent); }
.card-row.selected .cr-check::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 4px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg);
}
/* 底部固定操作条 */
.manage-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  display: flex; align-items: center; gap: 16px; padding: 12px 24px;
  background: var(--surface); border-top: 1px solid var(--line-strong);
}
.manage-bar .mb-left { display: flex; align-items: center; gap: 12px; }
.mb-count { font-size: 14px; color: var(--ink-2); min-width: 68px; }
.mb-link { background: none; border: 0; color: var(--accent-strong); font-size: 13.5px; cursor: pointer; padding: 2px 0; }
.mb-link:hover { text-decoration: underline; }
.manage-bar .mb-actions { display: flex; align-items: center; gap: 8px; margin: 0 auto; }
.manage-bar .mb-done { margin-left: 0; }
body.manage-on { padding-bottom: 72px; }

/* 复习尾页提名:全选/全不选 */
.rv-noms-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.rv-noms-head .rv-noms-title { margin-bottom: 0; }
.rv-noms-sel { display: flex; gap: 10px; flex: none; }

/* ===== 导出对话框 ===== */
.export-box { max-width: 420px; }
.export-title { font-family: var(--serif); font-size: 20px; font-weight: 600; margin-bottom: 4px; }
.export-scope { color: var(--ink-2); font-size: 14px; margin-bottom: 16px; }
.export-presets { display: grid; gap: 10px; margin-bottom: 16px; }
.export-preset {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left;
  padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-s);
  background: var(--surface); cursor: pointer; transition: border-color .12s, background .12s;
}
.export-preset:hover { border-color: var(--ink-3); }
.export-preset.on { border-color: var(--accent); background: var(--accent-tint); }
.export-preset .ep-name { font-size: 15px; font-weight: 600; color: var(--ink); }
.export-preset .ep-desc { font-size: 13px; color: var(--ink-2); }
.export-skip { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); margin-bottom: 18px; cursor: pointer; }
.export-skip input { accent-color: var(--accent); margin: 0; }
.export-acts { display: flex; justify-content: flex-end; gap: 10px; }

/* 词卡弹窗:查看 + 就地修改 */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 150; background: rgba(28, 27, 24, 0.42);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
/* display:flex 会压过浏览器对 [hidden] 的默认 display:none,必须显式恢复 */
.modal-backdrop[hidden] { display: none; }
.modal {
  position: relative; width: min(560px, 100%); max-height: 85vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lift); padding: 26px 28px 20px; display: flex; flex-direction: column; gap: 12px;
}
.wc-head { display: flex; align-items: baseline; gap: 10px; padding-right: 26px; }
.wc-term { font-family: var(--serif); font-size: 26px; font-weight: 600; }
.wc-phon { color: var(--ink-3); font-size: 14px; }
.wc-pos { color: var(--ink-3); font-size: 13px; font-style: italic; }
.wc-del { margin-left: auto; border: 0; background: none; color: var(--ink-3); cursor: pointer; font-size: 13.5px; flex: none; }
.wc-del:hover { color: var(--accent-strong); }
.wc-meaning-row { display: flex; align-items: baseline; gap: 8px; }
.wc-meaning { font-size: 16px; }
.wc-edit { border: 0; background: none; color: var(--ink-3); cursor: pointer; font-size: 13.5px; flex: none; }
.wc-edit:hover { color: var(--accent-strong); }
.wc-block .wc-edit { position: absolute; top: 6px; right: 26px; opacity: 0.6; }
.wc-block .wc-edit:hover { opacity: 1; }
/* 手动添加内容块 */
.wc-add { align-self: flex-start; }
.add-kind { display: flex; gap: 6px; margin-bottom: 8px; }
.add-kind button {
  border: 1px solid var(--line); background: none; color: var(--ink-2); cursor: pointer;
  border-radius: 999px; padding: 3px 12px; font-size: 13px;
}
.add-kind button.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
/* 极简富文本:加粗 + 列表 */
.fmt-list { margin: 4px 0 0; padding-left: 18px; }
.fmt-list li { margin-top: 2px; }
.wc-zh strong, .wc-note strong, .rv-zh strong, .rv-note strong { color: var(--ink); font-weight: 600; }
.edit-input {
  width: 100%; border: 1px solid var(--line-strong); border-radius: var(--radius-s);
  background: var(--bg); color: var(--ink); padding: 8px 10px; font-size: 14.5px; font-family: var(--sans);
  outline: none; resize: vertical; min-height: 34px;
}
textarea.edit-input { min-height: 72px; }
.edit-input:focus { border-color: var(--accent); }
.edit-row { display: flex; gap: 8px; margin-top: 8px; }
.wc-hint { color: var(--ink-3); font-size: 12.5px; margin-top: 4px; }
.wc-block { position: relative; padding: 10px 26px 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-s); }
.wc-en { font-size: 14.5px; line-height: 1.65; display: flex; gap: 8px; align-items: flex-start; }
.wc-en mark, .wc-zh mark { background: var(--accent-tint); color: var(--accent-strong); border-radius: 3px; padding: 0 2px; font-weight: 600; }
.wc-zh { color: var(--ink-2); font-size: 14px; line-height: 1.6; margin-top: 4px; }
.wc-note { color: var(--ink-2); font-size: 14px; line-height: 1.6; padding-left: 10px; border-left: 2px solid var(--accent); }
.wc-from { display: inline-block; color: var(--ink-3); font-size: 13px; margin-top: 6px; }
.wc-from:hover { color: var(--accent-strong); }
.wc-play {
  flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--accent-strong); cursor: pointer; font-size: 11px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; margin-top: 1px;
}
.wc-play:hover, .wc-play.playing { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--surface); }
/* 合成朗读:复用 wc-play 圆钮 + 13px 次级墨色附注(视频来源句无原声时按需合成)。 */
.wc-synth-wrap { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.wc-synth-note { font-size: 13px; color: var(--ink-2); letter-spacing: .02em; }
.wc-bdel {
  position: absolute; top: 6px; right: 6px; border: 0; background: none; color: var(--ink-3);
  cursor: pointer; font-size: 12px; opacity: 0.6;
}
.wc-bdel:hover { opacity: 1; color: var(--accent-strong); }
/* 复习:不背单词式全屏卡片流 */
.review-overlay {
  position: fixed; inset: 0; z-index: 200; background: var(--bg);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.rv-box {
  position: relative; width: min(560px, 100%); max-height: 90vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lift); padding: 32px 34px 26px; display: flex; flex-direction: column; gap: 18px;
}
.rv-progress { font-size: 13px; color: var(--ink-3); letter-spacing: 1px; }
.rv-face { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; min-height: 180px; justify-content: center; }
.rv-face.rv-answer { align-items: flex-start; text-align: left; justify-content: flex-start; }
.rv-term { font-family: var(--serif); font-size: 40px; font-weight: 600; }
.rv-answer .rv-term { font-size: 28px; }
.rv-phon { color: var(--ink-3); font-size: 15px; }
.rv-meaning { font-size: 16px; }
.rv-play {
  margin-top: 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--accent-strong);
  border-radius: 999px; padding: 7px 18px; font-size: 14px; cursor: pointer;
}
.rv-play:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--surface); }
.rv-block { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-s); }
.rv-en { font-size: 15px; line-height: 1.65; display: flex; gap: 8px; align-items: flex-start; }
.rv-en mark { background: var(--accent-tint); color: var(--accent-strong); border-radius: 3px; padding: 0 2px; font-weight: 600; }
.rv-zh { color: var(--ink-2); font-size: 14px; margin-top: 4px; line-height: 1.6; }
.rv-note { width: 100%; color: var(--ink-2); font-size: 14px; line-height: 1.6; padding-left: 10px; border-left: 2px solid var(--accent); }
.rv-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.rv-actions .btn { min-width: 100px; justify-content: center; }
.rv-close { position: absolute; top: 14px; right: 16px; border: 0; background: none; color: var(--ink-3); cursor: pointer; font-size: 15px; }
.rv-close:hover { color: var(--ink); }

/* 三档评分选中态(批量评分页) */
.rv-no.on { background: var(--ink-2); border-color: var(--ink-2); color: var(--surface); }
.rv-mid.on { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-strong); }
.rv-yes.on { background: var(--accent); border-color: var(--accent); color: #fff; }
/* 听句子:末尾批量评分 */
.rv-batch { width: min(680px, 100%); }
.rv-batch-quick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rv-batch-hint { font-size: 13.5px; color: var(--ink-3); }
.rv-batch-list { display: flex; flex-direction: column; gap: 12px; }
.rv-batch-row { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-s); display: flex; flex-direction: column; gap: 8px; }
.rv-batch-sent { font-size: 16px; line-height: 1.6; display: flex; gap: 8px; align-items: flex-start; }
.rv-batch-sent mark { background: var(--accent-tint); color: var(--accent-strong); border-radius: 3px; padding: 0 2px; font-weight: 600; }
.rv-batch-term { font-size: 13.5px; color: var(--ink-3); }
.rv-rate-compact { display: flex; gap: 8px; }
.rv-rate-compact .btn { flex: 1; justify-content: center; }

/* 复习调度:入口、状态徽标、三档自评与归档提名 */
.rv-entry { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rv-hint { font-size: 13px; color: var(--ink-3); }
.rv-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; user-select: none; }
.rv-toggle input { accent-color: var(--accent); margin: 0; }
.rv-limit {
  border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface);
  color: var(--ink-2); font-size: 13.5px; padding: 5px 6px;
}
.cr-chip {
  font-size: 12px; padding: 2px 8px; border-radius: var(--radius-s);
  border: 1px solid var(--line); color: var(--ink-3); white-space: nowrap;
}
.cr-chip.due { color: var(--accent-strong); border-color: transparent; background: var(--accent-tint); }
.cr-chip.arch { border-color: transparent; background: rgba(107, 163, 104, .14); color: #4c7a4a; }
:root[data-mode="dark"] .cr-chip.arch { color: #8fc48c; }
.wc-staterow { display: flex; align-items: center; gap: 8px; margin: -2px 0 12px; }
.rv-kbd { text-align: center; font-size: 12.5px; color: var(--ink-3); }
.rv-mid, .rv-arch { color: var(--ink-2); }
/* 题型升级:挖空句与回想译文替代词头做正面 */
.rv-mode { font-size: 13px; color: var(--ink-3); letter-spacing: 1px; }
.rv-cloze {
  font-family: var(--serif); font-size: 24px; line-height: 1.8; max-width: 560px;
}
.rv-blank {
  color: var(--accent-strong); font-weight: 600; letter-spacing: 2px;
  border-bottom: 2px solid var(--accent-strong); line-height: 1;
}
.rv-recall { font-size: 19px; line-height: 1.9; max-width: 540px; }
.rv-noms { width: 100%; margin-top: 14px; text-align: left; }
.rv-noms-title { font-size: 14px; color: var(--ink-2); margin-bottom: 8px; }
.rv-nom {
  display: inline-flex; align-items: center; gap: 4px; margin: 0 10px 8px 0;
  font-size: 14.5px; cursor: pointer;
}
.lookup-pop .lk-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding-right: 20px; }
.lookup-pop .lk-head .term { min-width: 0; overflow-wrap: anywhere; }
.lookup-pop .lk-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.lookup-pop .lk-meta .phon, .lookup-pop .lk-meta .pos, .lookup-pop .lk-meta .surface {
  margin-left: 0; vertical-align: baseline; display: inline-flex; align-items: center; line-height: 1.5;
}
/* 收藏入口:tint 底胶囊——用色呼应选中块,明显但不压过词头 */
.lookup-pop .save-card {
  margin-left: auto; flex: none; border: 1px solid transparent; cursor: pointer;
  background: var(--accent-tint); color: var(--accent-strong);
  border-radius: 999px; padding: 4px 12px; font-size: 13px; font-family: var(--sans);
  transition: background .15s, color .15s;
}
.lookup-pop .save-card:hover { background: var(--accent-strong); color: var(--surface); }
.lookup-pop .save-card:disabled { opacity: .5; cursor: default; }
/* 查词弹卡:可点选的内容块(组卡) */
.lookup-pop .pick {
  margin-top: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-s);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.lookup-pop .pick:hover { border-color: var(--line-strong); }
.lookup-pop .pick .lab {
  display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 1.5px;
  color: var(--ink-3); text-transform: uppercase; font-weight: 600;
}
.lookup-pop .pick .tag {
  font-size: 11px; letter-spacing: 0; border: 1px solid var(--accent); color: var(--accent-strong);
  border-radius: 999px; padding: 1px 7px; font-weight: 500;
}
.lookup-pop .pick .tick {
  margin-left: auto; width: 16px; height: 16px; border: 1.5px solid var(--line-strong); border-radius: 50%;
  font-size: 11px; line-height: 13px; text-align: center; color: transparent; transition: all .15s;
}
.lookup-pop .pick .val { font-size: 14px; margin-top: 5px; line-height: 1.6; }
.lookup-pop .pick .sub { font-size: 13.5px; color: var(--ink-2); margin-top: 3px; line-height: 1.6; }
/* 语境讲解/变形是主要内容:正文用和例句一样的亮色主体(--ink,暗色下即白),
   不要用 .sub 的灰(--ink-2),否则暗底上发灰看不清 */
.lookup-pop .pick .sub.ctx {
  font-size: 14.5px; color: var(--ink); margin-top: 5px; line-height: 1.65;
}
.lookup-pop .pick.on { border-color: var(--accent); background: var(--accent-tint); }
.lookup-pop .pick.on .tick { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--surface); }
.lookup-pop .ex-loading { margin-top: 10px; font-size: 13px; color: var(--ink-3); }
/* 词组内点击的二选一菜单 */
.wl-choice {
  position: fixed; z-index: 260; display: flex; flex-direction: column; min-width: 150px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-s);
  box-shadow: var(--shadow-lift); overflow: hidden;
}
.wl-choice button {
  border: 0; background: none; color: var(--ink); cursor: pointer; text-align: left;
  padding: 9px 13px; font-size: 14px; font-family: var(--sans);
}
.wl-choice button + button { border-top: 1px solid var(--line); }
.wl-choice button:hover { background: var(--accent-tint); color: var(--accent-strong); }
/* 轻量解析标记:同义(灰)/ 新义项(赤陶醒目) */
.lookup-pop .lk-known { font-size: 12px; color: var(--ink-3); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.lookup-pop .lk-known.diff { color: var(--accent-strong); border-color: var(--accent); background: var(--accent-tint); font-weight: 600; }
.lookup-pop .sec .val.old { color: var(--ink-3); font-size: 13.5px; margin-top: 4px; }
/* 已有词卡提示(一行轻提示)+ 重复块标记 */
.lookup-pop .have-line { font-size: 13px; color: var(--ink-3); margin-top: 4px; }
.lookup-pop .have-line .star { color: var(--accent-strong); }
.lookup-pop .card-rate-row { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lookup-pop .rate-lab { color: var(--ink-2); margin-right: 2px; }
.lookup-pop .mini-rate { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 4px 8px; font-size: 13px; cursor: pointer; }
.lookup-pop .mini-rate:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-strong); }
.lookup-pop .mini-rate.strong { color: #4c7a4a; border-color: rgba(107, 163, 104, .45); }
.lookup-pop .mini-rate:disabled { opacity: .55; cursor: default; }
.lookup-pop .rate-tip { color: var(--ink-3); margin-left: 2px; }
.lookup-pop .pick.had { opacity: 0.55; }
.lookup-pop .pick.had .tag { border-color: var(--line-strong); color: var(--ink-3); }
/* 组卡:块划入动画 + 弹卡右侧的卡片构建器 */
.pick.fly { border: 1px solid var(--accent); border-radius: var(--radius-s); padding: 9px 11px; font-size: 14px; box-shadow: var(--shadow-lift); }
@keyframes cardPop { from { transform: scale(.96); opacity: .4; } }
.mini-link { color: var(--accent-strong); font-size: 13px; }
.card-builder {
  position: fixed; z-index: 210; width: 300px; max-width: calc(100vw - 32px);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: var(--shadow-lift); padding: 16px 18px; overflow-y: auto;
  animation: cardPop .25s ease;
}
.card-builder .close {
  position: absolute; top: 10px; right: 12px; border: 0; background: none;
  color: var(--ink-3); cursor: pointer; font-size: 14px;
}
.card-builder .close:hover { color: var(--ink); }
.cb-head { display: flex; align-items: baseline; gap: 8px; padding-right: 22px; }
.cb-term { font-family: var(--serif); font-size: 19px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.cb-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 3px; }
.card-builder .phon { color: var(--ink-3); font-size: 13px; margin-left: 0; }
.card-builder .pos {
  font-size: 12px; color: var(--accent-strong); background: var(--accent-tint);
  border-radius: 4px; padding: 1px 7px; margin-left: 0;
}
.cb-meaning { font-size: 14px; margin-top: 6px; }
.cb-list { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.cb-block { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 8px 10px; }
.card-builder .cb-block { cursor: grab; }
.card-builder .cb-block.dragging { opacity: 0.45; border-style: dashed; cursor: grabbing; }
.cb-drop-line {
  height: 3px; background: var(--accent); border-radius: 2px; margin: -3px 2px;
  box-shadow: 0 0 0 1px var(--accent-tint);
}
.cb-block .lab { display: flex; align-items: center; gap: 6px; }
.cb-block .tag { font-size: 11px; border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; color: var(--ink-3); }
.cb-ctl { margin-left: auto; display: flex; gap: 2px; }
.cb-btn { border: 0; background: none; color: var(--ink-3); cursor: pointer; font-size: 12px; padding: 2px 4px; }
.cb-btn:hover { color: var(--accent-strong); }
.cb-txt { font-size: 13.5px; line-height: 1.55; margin-top: 4px; }
.cb-sub { font-size: 13px; color: var(--ink-2); margin-top: 2px; line-height: 1.55; }
.cb-block.cb-existing { background: var(--bg); }
.cb-have { font-size: 11px; color: var(--accent-strong); }
.cb-new {
  font-size: 11px; color: var(--accent-strong); background: var(--accent-tint);
  border-radius: 999px; padding: 1px 7px;
}
.cb-actions { display: flex; gap: 8px; margin-top: 12px; }
.cb-actions .cb-save { flex: 1; justify-content: center; margin-top: 0; }
.cb-save { margin-top: 12px; width: 100%; justify-content: center; }
.cb-ok { color: var(--accent-strong); }
.card-builder .foot { margin-top: 10px; font-size: 12px; color: var(--ink-3); }
.mini-track { height: 3px; background: var(--line); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.mini-fill { height: 100%; background: var(--accent); border-radius: 2px; }

/* 词卡复习时间线:报纸 sparkline 式 —— 不加边框盒,柱子立在一条连续发丝基线上;
   色彩讲时间叙事:暖灰=已成历史,赤陶=今天(可点进复习),浅赤陶=未来预测。
   轴标签只落在周锚点(今天与 ±7/±14),其余留白。 */
.tl-block { margin: 2px 0 28px; }
.tl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.tl-legend { display: flex; gap: 14px; font-size: 12px; color: var(--ink-3); letter-spacing: .04em; white-space: nowrap; }
.tl-legend span { display: inline-flex; align-items: center; gap: 5px; }
.tl-dot { width: 9px; height: 9px; border-radius: 2px; }
.tl-dot-past { background: var(--line-strong); }
.tl-dot-today { background: var(--accent-strong); }
.tl-dot-future { background: color-mix(in srgb, var(--accent) 28%, var(--surface)); }
.tl-strip { overflow-x: auto; scrollbar-width: none; }
.tl-strip::-webkit-scrollbar { display: none; }
.tl-track { display: flex; align-items: flex-end; height: 112px; width: max-content; min-width: 100%; }
.tl-col { flex: 1 0 26px; display: flex; flex-direction: column; height: 100%; }
.tl-bar-wrap { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; border-bottom: 1px solid var(--line); }
.tl-num { font-size: 12px; line-height: 1; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tl-bar { width: 14px; min-height: 3px; max-height: calc(100% - 18px); border-radius: 2px 2px 0 0; }
.tl-past .tl-bar { background: var(--line-strong); }
.tl-future .tl-bar { background: color-mix(in srgb, var(--accent) 28%, var(--surface)); }
.tl-today .tl-bar { background: var(--accent-strong); }
.tl-today { cursor: pointer; }
.tl-today:hover .tl-bar { background: var(--accent); }
.tl-today .tl-num { color: var(--accent-strong); font-weight: 650; }
.tl-today:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-s); }
.tl-day { height: 18px; display: flex; align-items: flex-end; justify-content: center; padding-top: 5px;
          font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-today .tl-day { color: var(--accent-strong); font-weight: 650; }

/* ============ admin ============ */
.admin-nav { display: flex; gap: 6px; margin: 20px 0 8px; border-bottom: 1px solid var(--line); padding-bottom: 12px; flex-wrap: wrap; }
.admin-nav a { padding: 6px 14px; font-size: 14.5px; color: var(--ink-2); border-radius: 999px; }
.admin-nav a.on { background: var(--ink); color: var(--bg); }
.admin-nav a:hover:not(.on) { color: var(--ink); }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 22px; }
@media (max-width: 960px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.stat .n { font-family: var(--serif); font-size: 30px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat .n .s { font-size: 16px; color: var(--ink-3); }
.stat .l { color: var(--ink-2); font-size: 13.5px; margin-top: 4px; line-height: 1.5; }
.stat .l a { color: var(--accent-strong); }
.trend { display: flex; gap: 8px; align-items: flex-end; height: 140px; padding: 10px 0; }
.trend-col { flex: 1; display: flex; flex-direction: column; height: 100%; }
.trend-col .bars { flex: 1; display: flex; gap: 3px; align-items: flex-end; justify-content: center; }
.trend-col .bar { width: 12px; border-radius: 3px 3px 0 0; min-height: 2px; }
.trend-col .bar.users { background: var(--ink-3); }
.trend-col .bar.spent { background: var(--accent); }
.trend-col .bar.cost { background: var(--ok); }
.trend-col .day { text-align: center; font-size: 11.5px; color: var(--ink-3); margin-top: 6px; }
.trend-legend { font-size: 13px; color: var(--ink-2); display: flex; gap: 14px; align-items: center; margin-top: 8px; }
.trend-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.trend-legend .dot.users { background: var(--ink-3); }
.trend-legend .dot.spent { background: var(--accent); }
.trend-legend .dot.cost { background: var(--ok); }
.trend-col .bar.listen { background: var(--accent); }
.trend-legend .dot.listen { background: var(--accent); }
/* 水平条形(语言偏好等) */
.hbars { display: flex; flex-direction: column; gap: 10px; }
.hbar-row { display: grid; grid-template-columns: 92px 1fr auto; gap: 12px; align-items: center; }
.hbar-label { font-size: 14.5px; color: var(--ink-2); }
.hbar-track { height: 10px; background: var(--accent-tint); border-radius: 5px; overflow: hidden; }
.hbar-fill { height: 100%; background: var(--accent); border-radius: 5px; min-width: 2px; }
.hbar-val { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
/* 维度小表网格(大盘固定维度:成本按引擎/内容/语言、收入档位、热度榜) */
.dim-tables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; }
@media (max-width: 760px) { .dim-tables { grid-template-columns: 1fr; } }
.dim-cap { font-size: 13px; color: var(--ink-3); letter-spacing: .06em; margin-bottom: 6px; }
.inline-form { display: inline-flex; gap: 4px; margin: 2px 4px 2px 0; align-items: center; }
.inline-form input {
  border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--bg);
  color: var(--ink); padding: 4px 7px; font-size: 13px; font-family: inherit; outline: none;
}
.inline-form input:focus { border-color: var(--accent); }
/* 行内表单控件统一高度、垂直居中——避免嵌在表格行里把行高撑歪(输入框/按钮基线对齐) */
.inline-form input, .inline-form .btn.small { height: 30px; box-sizing: border-box; line-height: 1; }

/* 方角小标签(后台状态/角色):零圆角风格、紧凑,替代裸文字 */
.tag {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: 12.5px; line-height: 1; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 2px; padding: 3.5px 8px;
  background: var(--surface); font-variant-numeric: tabular-nums;
}
.tag.ok { color: var(--ok); background: var(--ok-tint); border-color: transparent; }
.tag.accent { color: var(--accent-strong); background: var(--accent-tint); border-color: transparent; }
.tag.danger { color: var(--accent-strong); background: var(--accent-tint); border-color: transparent; }

/* 用户表:统一行高、邮箱截断、操作列固定右对齐(行内表单不再撑歪行) */
.user-table td { vertical-align: middle; height: 52px; }
.user-table td.u-email {
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-table th.col-actions { text-align: right; min-width: 360px; }
.user-table td.row-actions { text-align: right; white-space: nowrap; }
.user-table td.row-actions .inline-form { margin: 3px 0 3px 6px; vertical-align: middle; }
.user-table td.u-email a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.user-table td.u-email a:hover { text-decoration-color: var(--accent); color: var(--accent-strong); }

/* 用户列表:筛选/排序条 + 分页 */
.user-filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 18px 0; }
.user-filter-bar input, .user-filter-bar select {
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  border-radius: var(--radius-s); padding: 8px 11px; font-size: 14px;
}
.user-filter-bar input:focus, .user-filter-bar select:focus { border-color: var(--accent); outline: none; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.pager-nav { display: inline-flex; align-items: center; gap: 12px; }
.btn.disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }

/* 用户详情:管理操作卡片网格 */
.admin-ops-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .admin-ops-grid { grid-template-columns: 1fr; } }
.ops-card {
  display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 16px 18px;
}
.ops-card-wide { grid-column: 1 / -1; }
.ops-card h3 { font-size: 15px; letter-spacing: .02em; color: var(--ink); }
.ops-card p.dim { font-size: 13px; line-height: 1.5; margin: 0; }
.ops-card .ops-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ops-card input, .ops-card textarea {
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  border-radius: var(--radius-s); padding: 8px 10px; font-size: 14px; font-family: inherit; flex: 1 1 auto; min-width: 0;
}
.ops-card input:focus, .ops-card textarea:focus { border-color: var(--accent); outline: none; }
.ops-card textarea { resize: vertical; width: 100%; }
.ops-card .btn { align-self: flex-start; }

/* 大盘「深入看板」跳转卡 */
.jump-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .jump-links { grid-template-columns: 1fr; } }
.jump-card {
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px;
  background: var(--surface); transition: border-color .15s;
}
.jump-card:hover { border-color: var(--ink-3); }
.jump-card strong { font-size: 16px; color: var(--ink); letter-spacing: .02em; }
.jump-card .dim { font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.gen-row { display: flex; gap: 14px; flex-wrap: wrap; }
.gen-row .field { margin-bottom: 10px; }
.data-table-wrap { overflow-x: auto; }
/* 表头与日期类单元格禁折行:宁横滚,不竖排(「独立听众」「07-08」折行是错位主源) */
.data-table-wrap th, .data-table-wrap td.nowrap { white-space: nowrap; }
/* 折叠区(支付运行等长表:关键状态卡在上,明细各表默认收起) */
.fold { border-top: 1px solid var(--line); }
.fold > summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px;
  padding: 15px 2px; font-size: 15.5px; color: var(--ink); letter-spacing: .02em;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before {
  content: "▸"; color: var(--ink-3); font-size: 12px; transition: transform .15s; flex: none;
}
.fold[open] > summary::before { transform: rotate(90deg); }
.fold > summary:hover { color: var(--ink); }
.fold-count {
  font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 1px 7px; flex: none;
}
.fold-hint { color: var(--ink-3); font-size: 13px; margin-left: auto; text-align: right; }
.fold > .data-table-wrap { padding-bottom: 14px; }
.stat .n.alert { color: var(--accent-strong); }
.payment-env-line { display: flex; align-items: center; gap: 10px; margin-top: 18px; color: var(--ink-2); font-size: 14px; }
.admin-editor, .version-row { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.admin-editor { margin-bottom: 14px; }
.admin-editor > summary, .version-row > summary { list-style: none; cursor: pointer; }
.admin-editor > summary::-webkit-details-marker, .version-row > summary::-webkit-details-marker { display: none; }
.admin-editor > summary { padding: 14px 17px; font-weight: 600; }
.admin-editor[open] > summary { border-bottom: 1px solid var(--line); }
.catalog-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px 15px; padding: 18px; }
.catalog-form label { display: grid; gap: 5px; color: var(--ink-2); font-size: 12.5px; }
.catalog-form label.wide, .catalog-form .wide { grid-column: 1 / -1; }
.catalog-form input, .catalog-form select {
  min-width: 0; width: 100%; box-sizing: border-box; border: 1px solid var(--line-strong);
  border-radius: var(--radius-s); background: var(--bg); color: var(--ink); padding: 8px 10px;
  font: inherit; font-size: 14px; outline: none;
}
.catalog-form input:focus, .catalog-form select:focus { border-color: var(--accent); }
.catalog-form .check-field { display: flex; align-items: center; gap: 7px; }
.catalog-form .check-field input { width: auto; }
.form-actions { display: flex; gap: 8px; }
.version-list { display: grid; gap: 9px; margin-top: 14px; }
.version-row > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 16px; color: var(--ink-2); font-size: 13.5px; }
.version-row > summary strong { color: var(--ink); font-size: 15px; }
.version-row[open] > summary { border-bottom: 1px solid var(--line); }
.version-detail { padding: 16px; }
.version-detail .catalog-form { padding: 0; }
.version-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.version-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.version-facts div { display: grid; gap: 4px; }
.version-facts dt { color: var(--ink-3); font-size: 12px; }
.version-facts dd { font-size: 14px; }
.mono { font-family: ui-monospace, monospace; }

/* ============ admin content editor ============ */
.edit-toolbar {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  position: sticky; top: 60px; z-index: 20;
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px);
  padding: 12px 0; border-bottom: 1px solid var(--line); margin: 8px 0 4px;
}
.edit-table textarea {
  width: 100%; border: 1px solid transparent; border-radius: var(--radius-s); background: transparent;
  color: var(--ink); font-family: inherit; font-size: 14.5px; line-height: 1.55;
  padding: 4px 6px; resize: vertical; outline: none;
}
.edit-table textarea:hover { border-color: var(--line); }
.edit-table textarea:focus { border-color: var(--accent); background: var(--surface); }
.edit-table td { vertical-align: top; }
.linkish { border: 0; background: none; color: var(--ink-2); cursor: pointer; font-size: 13.5px; padding: 0; }
.linkish:hover { color: var(--accent-strong); }
.no-words { color: var(--ink-3); font-size: 12px; margin-left: 4px; }
.inactive-row { opacity: .5; }
/* JSON 编辑器 + 产物清单 + 维护动作 */
.json-editor {
  width: 100%; min-height: 340px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  color: var(--ink); font-family: ui-monospace, monospace; font-size: 13.5px; line-height: 1.5;
  padding: 12px 14px; resize: vertical; outline: none; white-space: pre; overflow: auto;
}
.json-editor:focus { border-color: var(--accent); }
.product-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.product-chip {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 11px;
  border: 1px solid var(--line); border-radius: var(--radius-s); font-size: 13.5px; color: var(--ink-3);
}
.product-chip.on { border-color: var(--ok); color: var(--ink-2); }
.product-chip em { font-style: normal; color: var(--ink-3); font-size: 12.5px; }
.maint-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.token-reveal {
  padding: 10px 14px; margin-bottom: 12px; border-radius: var(--radius);
  background: var(--ok-tint); border: 1px solid var(--ok); font-size: 14px;
}
.token-reveal code { user-select: all; word-break: break-all; }
.ad-badge {
  display: inline-block; font-size: 11.5px; padding: 1px 6px; border-radius: 4px;
  background: var(--accent-tint); color: var(--accent-strong);
}

/* ============ 沉浸式跟读 ============ */
/* 词群荧光笔色板:低饱和粉彩,像课本上五色荧光笔;暗色下降透明度提亮色相 */
:root {
  --hl-a: rgba(243, 205, 88, 0.55);   /* 明黄 */
  --hl-b: rgba(137, 187, 220, 0.48);  /* 天蓝 */
  --hl-c: rgba(235, 150, 152, 0.45);  /* 珊瑚粉 */
  --hl-d: rgba(146, 203, 158, 0.5);   /* 薄荷绿 */
  --hl-e: rgba(188, 163, 226, 0.42);  /* 藤紫 */
}
:root[data-mode="dark"] {
  --hl-a: rgba(233, 196, 84, 0.34);
  --hl-b: rgba(120, 176, 216, 0.32);
  --hl-c: rgba(228, 136, 144, 0.32);
  --hl-d: rgba(133, 196, 150, 0.32);
  --hl-e: rgba(178, 150, 224, 0.32);
}

.imm-enter { width: 100%; margin-bottom: 12px; }

.imm-overlay {
  position: fixed; inset: 0; z-index: 120; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 64px clamp(20px, 6vw, 90px) 56px;
}
body.imm-on { overflow: hidden; }

.imm-top {
  position: absolute; top: 0; left: 0; right: 0; height: 56px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 22px;
}
.imm-counter { font-size: 13px; color: var(--ink-3); letter-spacing: 1.5px; font-variant-numeric: tabular-nums; }
.imm-exit { border: 0; background: none; color: var(--ink-3); font-size: 17px; cursor: pointer; padding: 8px; }
.imm-exit:hover { color: var(--ink); }

/* 前后句预览:低调的上下文,不与主句争焦点 */
.imm-peek {
  width: 100%; max-width: 680px; text-align: center;
  color: var(--ink-3); opacity: 0.6; font-size: 14.5px; line-height: 1.6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-height: 1.6em;
}
.imm-peek.prev { margin-bottom: 40px; }
.imm-peek.next { margin-top: 40px; }

/* 舞台:当前句居中放大,衬线体课本感;字号跟 --imm-fs 缩放 */
.imm-stage { width: 100%; max-width: 860px; --imm-base: 30px; }
.imm-stage .line { padding: 0; margin: 0; cursor: default; background: none; box-shadow: none; }
.imm-stage .line:hover { background: none; }
.imm-stage .line .ts { display: block; text-align: center; margin-bottom: 16px; }
.imm-stage .line .en,
.imm-stage .line:not(.active) .en {
  font-family: var(--serif); color: var(--ink); text-align: center;
  font-size: calc(var(--imm-base, 30px) * var(--imm-fs, 1)); line-height: 2.05; letter-spacing: 0.2px;
}
.imm-stage .line .zh {
  text-align: center; font-size: calc(15.5px * var(--imm-fs, 1));
  margin-top: 22px; line-height: 1.85; max-width: 620px; margin-left: auto; margin-right: auto;
}
.imm-stage .line.ad .en { font-size: calc(var(--imm-base, 30px) * var(--imm-fs, 1)); }
.imm-stage .line .en .w { padding: 1px 2px; }

/* 词群荧光下划线:渐变只染行框底部,像荧光笔贴着字底划过;
   box-decoration-break 让跨行的词群每一行都有笔迹 */
.imm-stage .ck {
  background: linear-gradient(transparent 76%, var(--ckc, transparent) 76%);
  border-radius: 3px; padding-bottom: 2px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.imm-stage .ck-0 { --ckc: var(--hl-a); }
.imm-stage .ck-1 { --ckc: var(--hl-b); }
.imm-stage .ck-2 { --ckc: var(--hl-c); }
.imm-stage .ck-3 { --ckc: var(--hl-d); }
.imm-stage .ck-4 { --ckc: var(--hl-e); }

/* 控制区 */
.imm-nav { display: flex; align-items: center; gap: 14px; margin-top: 52px; }
.imm-navb {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink-2); font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.imm-navb:hover { border-color: var(--ink-3); color: var(--ink); }
.imm-play { width: 56px; height: 56px; font-size: 18px; }
.imm-togs { display: flex; align-items: center; gap: 8px; margin-top: 22px; flex-wrap: wrap; justify-content: center; }
.imm-togs .speed { background: var(--surface); }
.imm-fsb { font-variant-numeric: tabular-nums; padding: 6px 11px; }
.imm-hint { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; font-size: 12.5px; color: var(--ink-3); }

@media (max-width: 640px) {
  .imm-overlay { padding: 56px 18px 48px; }
  .imm-stage { --imm-base: 23px; }
  .imm-peek.prev { margin-bottom: 26px; }
  .imm-peek.next { margin-top: 26px; }
  .imm-nav { margin-top: 36px; }
  .imm-hint { display: none; }
}

/* 原句块内:译文(sub)与 AI 语境讲解(sub ctx)分层,讲解只展示不入卡 */
.lookup-pop .pick .sub.ctx { color: var(--ink-3); padding-left: 8px; border-left: 2px solid var(--line); }

/* ============ compact/mobile application shell ============ */
@media (max-width: 760px) {
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  .container { padding-left: 16px; padding-right: 16px; }
  .nav-inner { height: 56px; }
  .nav-primary, .nav-auth { display: none; }
  .nav-actions { gap: 10px; }
  .brand-wordmark { display: none; }
  .brand-mark { display: block; width: 38px; height: 38px; }
  .credit-badge { display: none; }
  .user-menu summary { max-width: 104px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .user-menu-panel { position: fixed; top: 54px; right: 12px; }
  .prefs-panel { position: fixed; top: 54px; right: 12px; }
  .mobile-nav {
    position: fixed; z-index: 70; left: 0; right: 0; bottom: 0;
    height: calc(58px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    display: grid; grid-template-columns: repeat(5, 1fr); background: color-mix(in srgb, var(--surface) 94%, transparent);
    border-top: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }
  .mobile-nav a { display: grid; place-items: center; color: var(--ink-3); font-size: 12.5px; }
  .mobile-nav a.active { color: var(--accent-strong); font-weight: 650; }
  .footer { margin-top: 42px; padding-bottom: 20px; }

  .page-head { padding-top: 22px; }
  .page-head h1 { font-size: 27px; }
  .page-head .sub { font-size: 14px; margin-top: 4px; }
  .section { margin-top: 34px; }
  .section-head { margin-bottom: 14px; }
  .section-head h2 { font-size: 20px; }
  .balance-card { align-items: flex-start; padding: 20px; gap: 16px; }
  .balance-num { font-size: 34px; }
  .credit-debt { text-align: left; }
  .offer-grid { grid-template-columns: 1fr; }
  .offer-card { padding: 18px; }
  .subscription-summary { grid-template-columns: 1fr 1fr; gap: 14px; }
  .redeem-row { max-width: none; }
  .catalog-form { grid-template-columns: 1fr; }
  .catalog-form label.wide, .catalog-form .wide { grid-column: auto; }
  .version-row > summary { align-items: flex-start; flex-direction: column; gap: 5px; }
  .version-facts { grid-template-columns: 1fr; gap: 10px; }

  .discover-head { padding-top: 18px; }
  .discover-head h1 { font-size: 26px; }
  .discover-head p { display: none; }
  .discover-search { margin-top: 14px; height: 44px; }
  .discover-languages { overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
  .discover-languages::-webkit-scrollbar { display: none; }
  .discover-languages > * { flex: none; }

  /* Anonymous home fits its complete recommendation path in one viewport. */
  .home-v2 { min-height: calc(100svh - 114px); padding: 18px 0 12px; }
  .home-topline { display: block; }
  .home-topline h1 { font-size: 27px; }
  .home-search { width: 100%; height: 38px; margin-top: 12px; }
  /* 窄屏语言名录:最多 5 个语言名再接尾链,不换到第三行 */
  .home-langroll { margin-top: 10px; font-size: 13px; column-gap: 7px; }
  .home-langroll .roll-lang:nth-child(n+6) { display: none; }
  .home-langroll .roll-lang + .roll-lang::before { margin-right: 7px; }
  .home-languages { margin-top: 12px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
  .home-languages::-webkit-scrollbar { display: none; }
  /* 右缘渐隐:提示 chips 可横向滑动 */
  .home-languages, .discover-languages {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  .home-languages .lang-chip { flex: none; }
  .lang-more { flex: none; }
  .lang-more-panel { position: fixed; top: 104px; left: 16px; right: 16px; width: auto; grid-template-columns: repeat(3, 1fr); }
  .home-dashboard { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
  .continue-primary { min-height: 104px; grid-template-columns: 74px 1fr 38px; gap: 12px; padding: 10px; }
  .continue-primary img { width: 74px; height: 74px; }
  .continue-play { width: 36px; height: 36px; }
  .home-activity { grid-column: auto; margin-top: 4px; padding: 0; }
  .activity-head { margin-bottom: 10px; }
  .activity-body { flex-direction: column; align-items: stretch; gap: 12px; }
  .heat-stats { flex-direction: row; flex-wrap: wrap; gap: 4px 16px; }
  .heat-stats a { margin-left: auto; }
  .heatmap-wrap, .tl-strip { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
  /* 单列:演示图在上,目录在下 */
  .home-intro { margin-top: 20px; grid-template-columns: 1fr; gap: 16px; }
  .home-intro-hero { order: -1; }
  .home-intro-lede { font-size: 13px; }
  .home-intro-rows { margin-top: 14px; }
  /* 触控目标 ≥40px */
  .home-intro-row { padding-top: 15px; padding-bottom: 15px; font-size: 14px; }
  .home-intro-more { margin-top: 14px; }
  .home-intro-more-row { margin-top: 14px; gap: 16px; }
  .home-recommendations { margin-top: 20px; }
  .home-recommendations .home-languages { margin-bottom: 14px; }
  .home-recommendations-foot { margin-top: 16px; padding-top: 12px; }
  .section-head.compact { margin-bottom: 9px; }
  .section-head.compact h2 { font-size: 19px; }
  .recommendation-layout { display: block; }
  .recommendation-primary { min-height: 176px; grid-template-columns: 142px 1fr; gap: 14px; padding: 10px; }
  .recommendation-primary img { width: 142px; height: 156px; }
  .recommendation-primary h3 { font-size: 18px; -webkit-line-clamp: 3; }
  .recommendation-primary p { font-size: 13px; }
  .start-command { margin-top: 11px; }
  .recommendation-list { grid-template-rows: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 10px; margin-top: 10px; overflow-x: auto; border: 0; scroll-snap-type: x proximity; }
  .recommendation-row { scroll-snap-align: start; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; background: var(--surface); }
  .recommendation-row:last-child { border-bottom: 1px solid var(--line); }

  .feed-head { padding: 22px 0 20px; display: grid; grid-template-columns: 86px 1fr; gap: 16px; }
  .feed-head img { width: 86px; height: 86px; }
  .feed-head h1 { font-size: 23px; }
  .feed-head .desc { grid-column: 1 / -1; -webkit-line-clamp: 2; margin-top: 8px; }
  .ep-row { gap: 10px; padding: 14px 2px; }
  .ep-row .date { display: none; }
  .ep-row .t { font-size: 15px; }

  .cards-toolbar { position: sticky; top: 56px; z-index: 20; margin: 12px -16px 14px; padding: 10px 16px; background: var(--bg); border-bottom: 1px solid var(--line); }
  .cards-toolbar .pill-group { max-width: 100%; overflow-x: auto; }
  .cards-toolbar .rv-entry { width: 100%; }
  .cards-toolbar .rv-entry { justify-content: space-between; }
  .cards-toolbar #review-start { flex: 1; }
  .review-settings-panel { position: fixed; top: auto; left: 0; right: 0; bottom: calc(58px + env(safe-area-inset-bottom)); width: auto; border-radius: 8px 8px 0 0; padding: 18px; }
  .card-list { border-left: 0; border-right: 0; border-radius: 0; }
  .manage-bar { flex-wrap: wrap; gap: 10px 12px; padding: 10px 14px; }
  .manage-bar .mb-actions { margin: 0; width: 100%; order: 3; flex-wrap: wrap; }
  .manage-bar .mb-actions .btn { flex: 1; }
  body.manage-on { padding-bottom: 128px; }
  .modal-backdrop { padding: 10px; align-items: end; }
  .modal { width: 100%; max-height: 88svh; border-radius: 8px 8px 0 0; }

  /* Audio learning: title/settings stay compact, transcript owns scrolling,
     and the player remains reachable above the mobile navigation. */
  body:has(.ep-layout:not(.is-video)) { overflow: hidden; }
  body:has(.ep-layout:not(.is-video)) .footer { display: none; }
  body:has(.ep-layout:not(.is-video)) .app-main { height: calc(100dvh - 56px - 58px); }
  .ep-layout:not(.is-video) { height: 100%; display: flex; flex-direction: column; gap: 8px; padding-top: 10px; }
  .ep-layout:not(.is-video) .ep-side { flex: 0 0 auto; padding: 0; overflow: visible; }
  .ep-layout:not(.is-video) .ep-head { align-items: center; }
  .ep-layout:not(.is-video) .ep-head .art { width: 52px; height: 52px; }
  .ep-layout:not(.is-video) .ep-side h1 { font-size: 15px; -webkit-line-clamp: 1; }
  .ep-layout:not(.is-video) .ep-side .meta { display: none; }
  .ep-layout:not(.is-video) .ep-side > .panel:first-of-type {
    position: fixed; z-index: 60; left: 0; right: 0; bottom: calc(58px + env(safe-area-inset-bottom));
    height: 72px; margin: 0; padding: 10px 16px; border-width: 1px 0 0; border-radius: 0;
    background: color-mix(in srgb, var(--surface) 96%, transparent); backdrop-filter: blur(14px);
  }
  .ep-layout:not(.is-video) .ep-side > .panel:first-of-type .panel-title { display: none; }
  .ep-layout:not(.is-video) .ep-side > .panel:first-of-type .player-main { padding-right: 58px; }
  .ep-layout:not(.is-video) .ep-side > .panel:first-of-type .player-extra {
    display: block; position: absolute; top: 20px; right: 12px; margin: 0;
  }
  .ep-layout:not(.is-video) .ep-side > .panel:first-of-type .pill-group { display: none; }
  .ep-layout:not(.is-video) .play-btn { width: 42px; height: 42px; }
  .ep-layout:not(.is-video) #shadow-panel { margin-top: 8px; padding: 8px; }
  .ep-layout:not(.is-video) #shadow-panel .panel-title, .ep-layout:not(.is-video) .kbd-hint { display: none; }
  .ep-layout:not(.is-video) .imm-enter { width: 100%; padding: 7px 12px; }
  .ep-layout:not(.is-video) .shadow-toggles { flex-wrap: nowrap; overflow-x: auto; margin-top: 7px; }
  .ep-layout:not(.is-video) .shadow-toggles .tog { flex: none; padding: 5px 10px; font-size: 13px; }
  .ep-layout:not(.is-video) .sent-nav { display: none; }
  .ep-layout:not(.is-video) .ep-main { flex: 1 1 auto; min-height: 0; }
  .ep-layout:not(.is-video) #tr-area { height: 100%; overflow-y: auto; padding-bottom: 82px; }
  .ep-layout:not(.is-video) .line { padding: 9px 4px; }
  .ep-layout:not(.is-video) .line .en { font-size: 16.5px; line-height: 1.75; }
  .ep-layout:not(.is-video) .lookup-pop { left: 10px !important; right: 10px !important; bottom: calc(134px + env(safe-area-inset-bottom)); top: auto !important; width: auto; max-width: none; max-height: 56svh; }
}

/* ── 用户反馈 + 站内信(包 1)────────────────────────────────────
   设计纪律:阅读态零常驻可见;未读红点仅头像处 accent 单色点;抽屉是悬浮层
   (唯一允许 --shadow-lift 的场景),关闭回原位不断播放。 */

/* 头像未读红点(accent 单色小圆点)+ 账户菜单里的未读计数 */
.unread-dot {
  width: 7px; height: 7px; border-radius: 999px; background: var(--accent);
  margin-left: 7px; flex: none;
}
.user-menu-panel .unread-count {
  display: inline-block; margin-left: 6px; min-width: 18px; text-align: center;
  font-size: 12px; color: var(--bg); background: var(--accent); border-radius: 999px;
  padding: 0 6px; font-variant-numeric: tabular-nums;
}

/* 单集页低调反馈入口(播放页底部信息区) */
.ep-feedback-line { padding: 6px 2px 0; }
.ep-feedback-line a { font-size: 13px; color: var(--ink-3); }
.ep-feedback-line a:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }

/* 讲解面板底部句级反馈入口(一行小字) */
.lk-feedback { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.lk-feedback a { font-size: 12.5px; color: var(--ink-3); }
.lk-feedback a:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }

/* 反馈抽屉:桌面居中弹层,移动端底部抽屉(顶角 8px,唯一例外) */
.fb-overlay {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: rgba(28, 27, 24, 0.28); opacity: 0; transition: opacity .18s ease;
  padding: 20px;
}
.fb-overlay.show { opacity: 1; }
.fb-drawer {
  width: 100%; max-width: 460px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lift); padding: 22px 22px 18px;
  transform: translateY(8px); transition: transform .18s ease;
  max-height: 88vh; overflow-y: auto;
}
.fb-overlay.show .fb-drawer { transform: none; }
.fb-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.fb-head h2 { font-family: var(--serif); font-size: 20px; font-weight: 600; letter-spacing: .02em; }
.fb-close {
  background: none; border: 0; cursor: pointer; color: var(--ink-3); font-size: 16px; line-height: 1;
  padding: 4px;
}
.fb-close:hover { color: var(--ink); }
.fb-field { display: block; margin-bottom: 14px; }
.fb-label { display: block; font-size: 12px; letter-spacing: .06em; color: var(--ink-2); margin-bottom: 6px; }
.fb-field select, .fb-field textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 9px 11px;
}
.fb-field textarea { resize: vertical; line-height: 1.6; }
.fb-field select:focus, .fb-field textarea:focus { border-color: var(--ink-3); outline: none; }
.fb-context {
  margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--bg); padding: 8px 11px; font-size: 13px;
}
.fb-context summary { cursor: pointer; color: var(--ink-2); font-size: 12.5px; }
.fb-context-body { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.fb-ctx-row { display: flex; gap: 8px; }
.fb-ctx-lab { flex: none; width: 44px; color: var(--ink-3); font-size: 12px; }
.fb-ctx-val { color: var(--ink); font-size: 13px; word-break: break-word; }
.fb-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 4px; }
.fb-msg { font-size: 13px; color: var(--ink-2); margin-right: auto; }
.fb-msg.err { color: var(--accent-strong); }
.fb-msg.ok { color: var(--ok); }

@media (max-width: 640px) {
  .fb-overlay { align-items: flex-end; padding: 0; }
  .fb-drawer {
    max-width: none; border-radius: 8px 8px 0 0; border-bottom: 0;
    transform: translateY(100%); max-height: 82vh;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }
  .fb-overlay.show .fb-drawer { transform: none; }
}

/* 收件箱(/messages) */
.inbox-page { max-width: 720px; margin: 0 auto; }
.inbox-page .page-head { display: flex; align-items: baseline; justify-content: space-between; }
.inbox-page .page-head .text-link { background: none; border: 0; cursor: pointer; font: inherit; font-size: 14px; color: var(--accent-strong); }
.msg-list { list-style: none; margin-top: 8px; }
.msg-item { padding: 16px 2px; border-top: 1px solid var(--line); cursor: default; }
.msg-item:last-child { border-bottom: 1px solid var(--line); }
.msg-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.msg-title { color: var(--ink-2); font-size: 15px; }
.msg-item.unread .msg-title { color: var(--ink); font-weight: 600; }
.msg-item.unread { cursor: pointer; }
.msg-date { flex: none; color: var(--ink-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.msg-body { margin-top: 6px; color: var(--ink-2); font-size: 14px; line-height: 1.7; white-space: pre-wrap; }
.inbox-empty { padding: 40px 2px; color: var(--ink-2); font-size: 15px; }
.inbox-empty .hairline { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }

/* 后台反馈页 */
.fb-tabs { display: flex; gap: 4px; margin: 18px 0 12px; }
.fb-tab {
  padding: 7px 14px; font-size: 14px; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 999px;
}
.fb-tab.on { color: var(--ink); border-color: var(--ink-3); }
.fb-tab-n { font-variant-numeric: tabular-nums; color: var(--accent-strong); }
.fb-admin-list { display: flex; flex-direction: column; }
.fb-card { border-top: 1px solid var(--line); }
.fb-card:last-child { border-bottom: 1px solid var(--line); }
.fb-card-head {
  display: flex; align-items: baseline; gap: 12px; padding: 14px 2px; cursor: pointer;
  list-style: none;
}
.fb-card-head::-webkit-details-marker { display: none; }
.fb-chip {
  flex: none; font-size: 12px; padding: 2px 8px; border: 1px solid var(--line);
  color: var(--ink-2); border-radius: var(--radius-s);
}
.fb-card-user { flex: none; font-size: 13px; color: var(--ink-2); }
.fb-card-excerpt { flex: 1; min-width: 0; color: var(--ink); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-card-date { flex: none; color: var(--ink-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.fb-card-body { padding: 0 2px 18px; }
.fb-detail-body { color: var(--ink); font-size: 14.5px; line-height: 1.7; white-space: pre-wrap; margin-bottom: 12px; }
.fb-ctx {
  display: grid; grid-template-columns: 72px 1fr; gap: 4px 12px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 12px 14px; margin-bottom: 12px; font-size: 13.5px;
}
.fb-ctx dt { color: var(--ink-3); font-size: 12.5px; }
.fb-ctx dd { color: var(--ink); word-break: break-word; }
.fb-ctx-orig { font-family: var(--serif); }
.fb-replies { margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.fb-reply { border-left: 2px solid var(--accent); padding: 4px 0 4px 12px; }
.fb-reply-body { color: var(--ink); font-size: 14px; line-height: 1.65; white-space: pre-wrap; }
.fb-reply-date { color: var(--ink-3); font-size: 12px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.fb-actions { display: flex; flex-direction: column; gap: 10px; }
.fb-reply-form textarea {
  width: 100%; font: inherit; font-size: 14px; color: var(--ink); line-height: 1.6;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 9px 11px; resize: vertical;
}
.fb-reply-form textarea:focus { border-color: var(--ink-3); outline: none; }
.fb-action-row { display: flex; gap: 10px; margin-top: 8px; }
.fb-inline-form { display: inline; }

/* ============ 邀请有礼(裂变推荐码) ============ */
.referral-page { max-width: 720px; }
.ref-invite { margin-top: 8px; }
.ref-code-block { display: flex; flex-direction: column; gap: 4px; padding-bottom: 16px;
  border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.ref-code-label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.ref-code { font-family: var(--serif); font-size: 34px; font-weight: 600; letter-spacing: .12em;
  color: var(--ink); font-variant-numeric: tabular-nums; }
.ref-link-row { display: flex; gap: 10px; align-items: stretch; }
.ref-link-input { flex: 1; min-width: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-s);
  padding: 9px 11px; font-size: 13.5px; color: var(--ink-2); background: var(--bg);
  font-family: var(--sans); }
.ref-link-input:focus { border-color: var(--ink-3); outline: none; }
.ref-link-row .btn { white-space: nowrap; }
.ref-stats { margin-top: 20px; }
.ref-rules { margin-top: 30px; }
.ref-rule-list { list-style: none; margin: 0; padding: 0; }
.ref-rule-list li { display: flex; gap: 16px; align-items: baseline; padding: 12px 0;
  border-bottom: 1px solid var(--line); }
.ref-rule-list li:last-child { border-bottom: none; }
.ref-rule-when { flex: none; width: 92px; font-size: 13px; color: var(--ink-3); letter-spacing: .02em; }
.ref-rule-what { flex: 1; font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }
.ref-rule-what b { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.ref-fineprint { margin-top: 14px; }
@media (max-width: 560px) {
  .ref-link-row { flex-direction: column; }
  .ref-rule-list li { flex-direction: column; gap: 4px; }
  .ref-rule-when { width: auto; }
}
.ref-detail-row { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 6px; font-size: 14px; color: var(--ink-2); }
.ref-detail-row b { font-weight: 650; color: var(--ink); }

/* ── 后台语言支持矩阵(/admin/languages) ── */
.lang-summary { margin: 18px 0 4px; color: var(--ink-2); font-size: 14.5px; }
.lang-summary-n { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.lang-summary-issue { color: var(--accent-strong); }
.lang-matrix td, .lang-matrix th { vertical-align: middle; }
/* 方角状态标签:未确认灰 / 已确认绿字 / 有问题 accent */
.lang-matrix th, .lang-matrix td { white-space: nowrap; }
.lv-tag {
  display: inline-block; min-width: 56px; text-align: center; white-space: nowrap;
  padding: 2.5px 9px; font-size: 13px; line-height: 1.4;
  border: 1px solid var(--line-strong); border-radius: 0;
  background: var(--surface); color: var(--ink-3); cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.lv-tag:hover { border-color: var(--ink-2); }
.lv-tag:disabled { opacity: .55; cursor: default; }
.lv-unverified { color: var(--ink-3); }
.lv-verified { color: var(--ok); border-color: var(--ok); background: var(--ok-tint); }
.lv-issue { color: var(--accent-strong); border-color: var(--accent); background: var(--accent-tint); }
.lv-na { color: var(--ink-3); font-size: 12.5px; }
.lv-note-form { margin: 0; }
.lv-note-input {
  width: 168px; padding: 4px 8px; font-size: 13px;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--surface); color: var(--ink);
}
.lv-note-input:focus { border-color: var(--accent); outline: none; }

/* ── changelog 语言支持现状三档 ── */
.lang-tier { padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--line); }
.lang-tier:first-of-type { border-top: 0; padding-top: 6px; margin-top: 10px; }
.lang-tier h3 { font-size: 18px; letter-spacing: .01em; }
.lang-tier p { margin-top: 6px; }
.lang-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.lang-chip {
  padding: 3px 11px; font-size: 13.5px; color: var(--ink-2);
  border: 1px solid var(--line-strong); border-radius: 0; background: var(--surface);
}