/* =========================================================
   MandarinMiles · 单篇阅读页 v2（D 版：纸灯书房 · 右侧栏可收）
   ---------------------------------------------------------
   与 readers.css 的关系：
   - readers.css 保留原有 .rreader/.rcontent/.rtools 等规则（老结构仍要用）
   - 本文件用 .mm-rv2 前缀承载新结构，互不干扰
   色彩令牌：在 .mm-rv2 作用域内建立**独立的纸感体系**，
             避免被全站冷蓝令牌（--bg #F2F7FD / --primary #1166F0）拉走。
             三种基调由后台 Reader Experience 设置决定（data-tone）。
   ========================================================= */

/* ---------- 纸感基调令牌（作用域内，与全站隔离） ---------- */
/* 默认 studio = 跟随全站冷色调 */
/* 阅读列宽度：正文 800 / 侧栏 310 / 间距 56 → 合计 1166，
   外壳 max-width 1220（含左右 24px padding → 内容区 1172），刚好装下。
   用户反馈「文章宽度还可以往左延展，现在缩进了很多」——
   原来正文只有 700px、外壳 1110px，在 1440 屏上正文起点落在 x=189，
   现在正文 800px、起点落在 x=124。 */
.mm-rv2 {
  --rv-side-w: 310px; --rv-body-w: 800px; --rv-gap: 56px;

  --rv-paper:   var(--bg);
  --rv-paper-2: var(--card);
  --rv-paper-3: color-mix(in srgb, var(--bg) 88%, var(--border));
  --rv-ink:     var(--text);
  /* 正文主字色：2026-11-03 由 #111 柔化为 #212529 —— 对标 duChinese 实测
     （浅色底 + #212529 中文），用户反馈「对比度高、不够柔和」。
     正文与拼音同走此令牌（历史要求：正文与拼音同色），night / 系统 dark
     三处各自给值。 */
  --rv-ink-strong: #212529;
  --rv-ink-2:   var(--muted);
  --rv-ink-3:   color-mix(in srgb, var(--muted) 72%, transparent);
  --rv-line:    var(--border);
  --rv-line-2:  color-mix(in srgb, var(--border) 78%, var(--text));
  --rv-brand:   var(--primary);
  --rv-brand-soft: var(--brand-tint);
  --rv-green:   var(--accent-strong);
  --rv-green-soft: var(--teal-tint);
  --rv-amber:   #C98A2E;
  --rv-amber-soft: #FBF0DC;
  /* 朗读跟读高亮：当前正在读的词变色 + 极淡底色 */
  --rv-listen:      #C2410C;
  --rv-listen-soft: rgba(194, 65, 12, .09);
  --rv-glass:   color-mix(in srgb, var(--bg) 88%, transparent);
  --rv-shadow:  0 1px 2px rgba(31,42,68,.03), 0 10px 30px rgba(31,42,68,.05);

  /* 引导卡（结尾 Free sample CTA / 统一付费区）专用表面令牌。
     旧版是「暖纸底 + 琥珀斜纹」，在冷蓝主题（--primary #1166F0）里明显发黄、
     和页面基底 --bg #F2F7FD 不是一套颜色。现在整套由 --rv-brand* 派生，
     studio / paper / night 三种基调与系统浅色·暗色都会自动跟随主题，
     不需要为每种基调各写一份硬编码色值。 */
  --rv-cta-bg:     color-mix(in srgb, var(--rv-brand-soft) 62%, var(--rv-paper-2));
  --rv-cta-line:   color-mix(in srgb, var(--rv-brand) 22%, var(--rv-line));
  --rv-cta-stripe: color-mix(in srgb, var(--rv-brand) 6%, transparent);

  /* 正文容器专用底色/描边：与全站 --card / --border 隔离。
     readers.css 里 .mm-reader .rcontent 写死了 background:var(--card);
     border:1px solid var(--border) —— 那是全站浅色令牌，
     在 night 基调（深底浅字）下会变成「深色正文坐在白卡片上」，
     浅色字压在白底上几乎不可读。所以这里必须在 .mm-rv2 作用域内改写。 */
  --rv-body-bg:   var(--rv-paper-2);
  --rv-body-line: var(--rv-line);
  --rv-body-shadow: var(--rv-shadow);
  --rv-body-pad:  34px 38px;
  --rv-body-radius: 18px;

  /* 吸顶条工具按钮 / 视图 tab 的表面令牌。
     readers.css 里 .rtool 用 var(--card)、.rview-tab 直接写死 #fff ——
     都是全站浅色令牌，night 基调下会在黑底上排一排白按钮。
     这里统一交给作用域令牌，各基调自己给值。 */
  --rv-tool-bg:   #fff;
  --rv-tool-ink:  var(--rv-ink-2);
  --rv-tool-line: var(--rv-line);
}

/* paper = D 版「纸灯书房」：暖米色纸面 + 墨色字 + 绿青拼音 */
.mm-rv2[data-tone="paper"] {
  --rv-paper:   #FBF7F0;
  --rv-paper-2: #FFFDF9;
  --rv-paper-3: #F4EDE2;
  --rv-ink:     #33302B;
  --rv-ink-2:   #6B6459;
  --rv-ink-3:   #9A9284;
  --rv-line:    #E8DFD1;
  --rv-line-2:  #D9CCB8;
  --rv-brand:   #1166F0;
  --rv-brand-soft: #E8F0FE;
  --rv-green:   #1C7C70;
  --rv-green-soft: #E4F2EF;
  --rv-amber:   #C98A2E;
  --rv-amber-soft: #FBF0DC;
  /* 朗读跟读高亮：纸面上用深朱红，压得住纸感底色 */
  --rv-listen:      #B03A08;
  --rv-listen-soft: rgba(176, 58, 8, .08);
  --rv-glass:   rgba(251,247,240,.92);
  --rv-shadow:  0 1px 2px rgba(64,52,36,.04), 0 10px 30px rgba(64,52,36,.055);
  /* 正文容器：纸面化 —— 直接坐在纸上，不做卡片 */
  --rv-body-bg:   transparent;
  --rv-body-line: transparent;
  --rv-body-shadow: none;
  --rv-body-pad:  0;
  --rv-body-radius: 0;
  /* 工具条表面：白底（与 D 样版一致），描边用暖灰 */
  --rv-tool-bg:   #fff;
  --rv-tool-line: var(--rv-line-2);
  background: var(--rv-paper);
  color: var(--rv-ink);
}

/* paper 专属：正文页「化开」——D 样版的正文直接坐在纸面上，
   没有白色卡片、没有边框、没有阴影，读者看到的是一张纸而不是一个 UI 盒子。
   .rcontent 透明化后，文字列宽正好等于网格列宽（700px），与 D 样版一致。
   底色/描边已由 --rv-body-bg / --rv-body-line 令牌统一控制（paper = transparent），
   这里只负责 padding 与圆角。 */
.mm-rv2[data-tone="paper"] .rcontent {
  padding: 0; border-radius: 0;
}
/* 词级色条：统一由上面那条规则给出（--rv-word-bar，按色调自动切换明暗）。
   ⚠ 这里**不要**再覆盖 background-image —— 旧版给 paper 色调写了暖灰细线，
   而 background-size 又没跟着写全，结果整块 ruby 被填成底色（2026-11 已修）。 */
.mm-rv2[data-tone="paper"] .rtext ruby.mmw.on,
.mm-rv2[data-tone="paper"] .rtext ruby.mmc.on { background-image: none; }
/* 标题注音：D 样版的章节标题是纯汉字（「01 月亮的孩子」），不带拼音。
   真实页的标题注音来自 mm_rv_ruby 对全文套用，连 h2 一起加了 ruby。
   纸面化基调（paper / night）下把标题里的 rt 收进 ruby 的行内空间
   （不占行高、不撑宽标题）：用 ruby-position:over + 极小字号 + 白空间处理，
   让标题回归干净。night 也必须处理 —— 否则深底上青绿色大字拼音很扎眼。 */
.mm-rv2[data-tone="paper"] .mm-rv2-ch-head rt,
.mm-rv2[data-tone="paper"] .mm-rv2-title rt,
.mm-rv2[data-tone="night"] .mm-rv2-ch-head rt,
.mm-rv2[data-tone="night"] .mm-rv2-title rt {
  /* 用 calc 跟随 --py-size，否则「拼＋/拼−」对标题失效 */
  font-size: calc(var(--py-size, .52em) * .58); opacity: .55; letter-spacing: 0;
}
.mm-rv2[data-tone="paper"] .mm-rv2-ch-head ruby,
.mm-rv2[data-tone="paper"] .mm-rv2-title ruby,
.mm-rv2[data-tone="night"] .mm-rv2-ch-head ruby,
.mm-rv2[data-tone="night"] .mm-rv2-title ruby { white-space: nowrap; }

/* night = 夜间护眼：低亮度暖灰 */
.mm-rv2[data-tone="night"] {
  --rv-paper:   #17140F;
  --rv-paper-2: #211D17;
  --rv-paper-3: #2B261E;
  /* 正文/标题字色：亮度对齐 studio 暗色标准（#D6DEE9 on #0F1729 ≈ 12.5:1）——
     旧值 #EDE6DA 对比 ≈ 13.9:1，比全站暗色更刺眼。#E3DCCC 同为暖纸色相，
     亮度压到与全站暗色一致（≈ 12.4:1），三处暗色（studio dark 两路径 + night）
     统一柔和度。 */
  --rv-ink:     #E3DCCC;
  --rv-ink-strong: #E3DCCC;
  --rv-ink-2:   #B5AC9D;
  --rv-ink-3:   #8C8275;
  --rv-line:    #332D24;
  --rv-line-2:  #463E32;
  --rv-brand:   #6E9BF8;
  --rv-brand-soft: #1C2A45;
  --rv-green:   #6FC7BB;
  --rv-green-soft: #1A2C28;
  --rv-amber:   #E3C88A;
  --rv-amber-soft: #332514;
  --rv-glass:   rgba(23,20,15,.92);
  --rv-shadow:  none;
  /* 正文容器：夜读时同样「纸面化」—— 深底上不叠白卡片，
     否则浅色正文压在白卡片上几乎不可读（实测 night 基调就是这个症状）。 */
  --rv-body-bg:   transparent;
  --rv-body-line: transparent;
  --rv-body-shadow: none;
  --rv-body-pad:  0;
  --rv-body-radius: 0;
  /* 工具条表面：深色（与 D 样版暗色段 .pill/.tool = #241F18 一致） */
  --rv-tool-bg:   #241F18;
  --rv-tool-line: var(--rv-line-2);
  /* 原生控件（<select> 下拉箭头、滚动条、audio 播放器）跟随深色，
     否则深底上会出现黑箭头 / 白控件这类刺眼色块。 */
  color-scheme: dark;
  /* 等级色板：深底上要提亮，否则深色会糊进背景（与下方 night 块同值） */
  --rv-lv-3: #FBBF24;
  --rv-lv-4: #F87171;
  --rv-lv-5: #34D399;
  --rv-lv-6: #60A5FA;
  --rv-lv-7: #C084FC;
  /* 朗读跟读高亮：深底上要换成暖橙才够亮 */
  --rv-listen:      #FDBA74;
  --rv-listen-soft: rgba(253, 186, 116, .14);
  background: var(--rv-paper);
  color: var(--rv-ink);
}

/* ---------- 布局骨架 ---------- */
.mm-rv2 .mm-rv2-shell { max-width: 1338px; margin: 0 auto; padding: 0 24px; }

/* ---------- 面包屑：贴紧吸顶条 ----------
   根因：readers.css 里的 `.mm-reader .page-head { padding: 54px 0 8px; }`
   是为全站读者归档页写的，阅读页复用同一个 .container.page-head 时，
   上下 54/64px 的 padding 全留下来了 —— 实测「吸顶条底 → 标题顶」= 223px，
   而 D 样版只有 113px。多出的 110px 让读者一进页面看到的是一片空白，
   正文被推到首屏之外。
   这里在 .mm-rv2 作用域内改写：面包屑行只留 12px 上间距，下方不留空白。 */
.mm-rv2 .container.page-head { padding: 12px 0 0; }
.mm-rv2 .container.page-head .breadcrumb { margin-bottom: 0; font-size: 12.5px; }

/* 正文头：与 D 样版 arthead 对齐（padding 26px 0 28px / margin-bottom 26px） */
.mm-rv2 .mm-rv2-head { padding: 22px 0 20px; border-bottom: 1px solid var(--rv-line); margin-bottom: 20px; text-align: left; }
.mm-rv2 .mm-rv2-layout { display: grid; grid-template-columns: var(--rv-body-w) var(--rv-side-w); gap: var(--rv-gap); align-items: start; transition: grid-template-columns .3s cubic-bezier(.4,0,.2,1), gap .3s; }
/* 折叠侧栏：侧栏列缩成 44px 贴边窄条（只剩把手），正文列**吃掉腾出的空间**。
   ⚠️ 原来这里写死 var(--rv-body-w)，侧栏收起后右边空出一大块 —— 折叠等于白折。 */
.mm-rv2 .mm-rv2-layout.is-collapsed { grid-template-columns: minmax(0, 1fr) 44px; gap: 34px; }
.mm-rv2 .mm-rv2-layout.is-collapsed .mm-rv2-body { max-width: 100%; }
/* 收起后正文/页头**不再限宽**：整页内容占满可用宽度（用户要求
   「收起侧边栏后内容自动占满全屏」，限宽会让收起变得没意义）。 */
/* 阅读宽度（后台统一控制）—— wide 时外壳加宽 + 正文列改弹性列。
   ⚠️ 旧实现只把 --rv-body-w 从 800 改成 920，但网格列宽是「固定值 + 固定值」：
      920 + 56(gap) + 310(侧栏) = 1286 > 外壳内容区 1172 → 侧栏被顶出外壳 114px
      （实测 sideRight=1500，而外壳右边界只有 1386），页面看着就是「右边溢出去一截」。
   现在最宽态 = 外壳 1220 → 1440，同时正文列改成弹性列 minmax(0,1fr)，
   侧栏仍 310px，多出来的宽度全给正文 —— 这才是真的「最宽」而且不溢出。
   ⚠️ 这两条必须锁在 >1100px：窄屏下布局是单列（媒体查询把 grid-template-columns
      改成 1 列），宽版规则 specificity 更高，会把单列顶回两列。 */
.mm-rv2 .mm-rv2-layout.is-wide { --rv-body-w: 100%; }
@media (min-width: 1101px) {
  /* 全站容器统一：外壳 1338 = 头部容器 1290 + 两侧 24 内边距，正文左缘与 logo 齐平 */
  .mm-rv2.is-wide .mm-rv2-shell { max-width: 1338px; }
  /* 收起侧栏 = 内容占满：外壳同样加宽（与 wide 态一致） */
  .mm-rv2.is-collapsed .mm-rv2-shell { max-width: 1338px; }
  /* wide 态侧栏列 310→288：外壳不可再加宽（会破坏与头部容器的左缘对齐），
     1290 − 48(gap) − 288 = 954px 正文 ≥ 950px 的最宽态目标（此前 932px 不达标） */
  .mm-rv2.is-wide { --rv-side-w: 288px; }
  .mm-rv2 .mm-rv2-layout.is-wide { grid-template-columns: minmax(0, 1fr) var(--rv-side-w); --rv-gap: 48px; }
  .mm-rv2 .mm-rv2-layout.is-wide.is-collapsed { grid-template-columns: minmax(0, 1fr) 44px; }
}

/* ---------- 吸顶阅读条 ---------- */
.mm-rv2 .mm-rv2-bar {
  position: sticky; top: 0; z-index: 30;
  background: var(--rv-glass);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--rv-line);
}
.mm-rv2 .mm-rv2-bar-in { display: flex; align-items: center; gap: 14px; height: 52px; position: relative; }
/* .mm-rv2-bar-l（章节名 + 段数读数）已随「吸顶条全部靠左」改造一并移除 */
/* 工具区：全部靠左（原来 margin-left:auto 把工具全推到右边，
   末尾的 Mark complete 被挤出屏幕点不到 —— 用户反馈「被盖住了」）。
   现在第一个工具（拼音开关）直接贴左，工具多起来时向右滚动。 */
.mm-rv2 .mm-rv2-tools { flex: 1 1 auto; display: flex; gap: 3px; align-items: center; flex-wrap: nowrap; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.mm-rv2 .mm-rv2-tools::-webkit-scrollbar { display: none; }
/* 工具项不参与压缩：否则按钮文字会被挤成竖排，把吸顶条撑高 */
.mm-rv2 .mm-rv2-tools > * { flex: none; }

/* 工具按钮：2026-11-09 整合版——尽量小，省出手机显示区域 */
.mm-rv2 .mm-rv2-bar .rtool { font-size: 12px; padding: 5px 8px; border-radius: 8px; white-space: nowrap; }
/* 循环字号按钮（A 100% / Py 100%）：百分比数字略微弱化 */
.mm-rv2 .mm-rv2-bar .rtool.mm-cycle .mm-cycle-lbl { font-weight: 700; font-variant-numeric: tabular-nums; }
/* 表面走作用域令牌：readers.css 的 .rtool 用 var(--card)、var(--text)、
   var(--border)，night 基调下会在深色吸顶条上排一排白按钮。
   注：.rtool.action / .rtool.primary 的品牌色按钮保持原样（品牌蓝/行动绿
   在任何基调上都该是品牌色），只有中性按钮跟随令牌。 */
.mm-rv2 .mm-rv2-bar .rtool:not(.action):not(.primary) {
  background: var(--rv-tool-bg);
  color: var(--rv-tool-ink);
  border-color: var(--rv-tool-line);
}
.mm-rv2 .mm-rv2-bar .rtool:not(.action):not(.primary):hover { color: var(--rv-ink); border-color: var(--rv-ink-3); }
.mm-rv2 .mm-rv2-bar .rtool-group { display: inline-flex; gap: 4px; }
.mm-rv2 .mm-rv2-sep { width: 1px; height: 20px; background: var(--rv-line); margin: 0 1px; flex: none; }
.mm-rv2 .mm-rv2-prog { width: 40px; height: 4px; border-radius: 99px; background: var(--rv-paper-3); overflow: hidden; flex: none; }
.mm-rv2 .mm-rv2-prog span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--rv-brand), var(--rv-green)); transition: width .2s; }

/* ---------- ⚙ Display 收缩面板（2026-11-09 整合版）----------
   简繁切换 / Hide pinyin / Zhuyin / 音色 / 速度的容器，挂在吸顶条内部
   （position:absolute 锚在 .mm-rv2-bar-in 上），sticky 任何位置都能打开。 */
.mm-rv2 .mm-display-toggle { font-weight: 700; }
.mm-rv2 .mm-display-toggle.on {
  background: var(--rv-brand);
  border-color: var(--rv-brand);
  color: #fff;
}
.mm-rv2 .mm-display-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  /* 2026-11-09 修「Display 面板内容溢出圆角框」：
     旧值 264px（border-box）减去左右 14px padding = 236px 内容宽，
     而 Script 区两枚胶囊实测宽 258px，第二枚右缘超出框外 ~9px。
     296 - 28 = 268px，留出 10px 余量，两枚仍在同一行。 */
  width: 296px;
  max-width: calc(100vw - 24px);
  box-sizing: border-box;
  overflow: hidden;          /* 任何子元素都不许越过圆角边框 */
  background: var(--rv-paper-2, var(--card, #fff));
  border: 1px solid var(--rv-line-2);
  border-radius: 12px;
  padding: 12px 14px 13px;
  z-index: 50;
  /* 面板浮在白底正文之上，阴影加深一档，才能看清「这是浮层」而不是正文漏字 */
  box-shadow: 0 14px 34px rgba(10, 20, 40, .2);
}
.mm-rv2 .mm-dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mm-rv2 .mm-dp-title { font-size: 13px; font-weight: 700; color: var(--rv-ink); }
.mm-rv2 .mm-dp-close {
  appearance: none; border: none; background: transparent; cursor: pointer;
  font-size: 14px; line-height: 1; padding: 2px 4px; color: var(--rv-ink-3);
}
.mm-rv2 .mm-dp-close:hover { color: var(--rv-ink); }
.mm-rv2 .mm-dp-sec { margin-bottom: 10px; }
.mm-rv2 .mm-dp-lbl { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--rv-ink-3); margin-bottom: 6px; }
.mm-rv2 .mm-dp-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* flex:none 是溢出的另一半原因： tabs 被强制按内容宽（258px）排，
   不肯收缩也不肯换行。改成占满一行 + 允许 wrap，窄屏自动折成两行。 */
.mm-rv2 .mm-display-panel .rview-tabs {
  margin: 0; flex: 1 1 100%; min-width: 0; max-width: 100%;
  display: flex; flex-wrap: wrap; gap: 5px;
}
.mm-rv2 .mm-display-panel .rview-tab,
.mm-rv2 .mm-display-panel .rview-hidepy,
.mm-rv2 .mm-display-panel .mm-dp-chip {
  font-size: 12px; padding: 5px 10px; border-radius: 999px;
  appearance: none; cursor: pointer; line-height: 1.2;
  border: 1px solid var(--rv-line-2);
  background: var(--rv-tool-bg); color: var(--rv-tool-ink);
  max-width: 100%;
}
.mm-rv2 .mm-display-panel .rview-tab.on {
  background: var(--rv-brand); border-color: var(--rv-brand); color: #fff;
}
.mm-rv2 .mm-display-panel .rview-hidepy[aria-pressed="true"],
.mm-rv2 .mm-display-panel .mm-dp-chip[aria-pressed="true"] {
  background: var(--rv-brand-soft); border-color: var(--rv-brand); color: var(--rv-brand);
}
.mm-rv2 .mm-display-panel .mm-tts-voice { height: 28px; font-size: 12px; }
.mm-rv2 .mm-dp-note { margin: 2px 0 0; font-size: 11px; line-height: 1.5; color: var(--rv-ink-3); }

/* 语音控件整组贴吸顶条最右。
   工具区整体靠左之后，右侧空出 ~400px；用户要求「语音播放按钮放旁边右边、
   要显眼」，所以把语音控件整组用 margin-left:auto 推到最右端：
   有有声书时是 [Audiobook]，没有时这个空壳只负责把 mm-tts.js 注入的
   [Read aloud] 顶到最右（它是 #mm-rtools 的最后一个子元素，紧跟在这个空壳后面）。
   ⚠️ 不能给两者同时加 margin-left:auto —— 两个 auto 边距会把空白对半分，
   反而在两个播放按钮中间裂开一道缝。 */
.mm-rv2 .mm-rv2-audio-group { margin-left: auto; display: flex; align-items: center; gap: 3px; flex: none; }

/* 逐段朗读按钮：吸顶条最右的行动绿主 CTA。
   颜色用全站唯一 CTA 填充色 --action (#11EE92) + --action-ink 深字，
   在纸感吸顶条上最跳眼，一眼能找到「朗读」入口。 */
.mm-rv2 .mm-rv2-bar .mm-tts-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--action, #11EE92);
  border-color: var(--action, #11EE92);
  color: var(--action-ink, #0D3327);
  font-weight: 700;
}
.mm-rv2 .mm-rv2-bar .mm-tts-btn:hover { filter: brightness(1.05); }
.mm-rv2 .mm-rv2-bar .mm-tts-btn[aria-pressed="true"] {
  background: var(--action-hover, #0FD983);
  border-color: var(--action-hover, #0FD983);
  color: var(--action-ink, #0D3327);
}
/* 有声书播放按钮也跟着用行动绿，两个播放入口视觉成一对 */
.mm-rv2 .mm-rv2-bar #mm-rv2-audio-toggle {
  background: var(--action, #11EE92);
  border-color: var(--action, #11EE92);
  color: var(--action-ink, #0D3327);
  font-weight: 700;
}
.mm-rv2 .mm-rv2-bar #mm-rv2-audio-toggle[aria-pressed="true"] {
  background: var(--action-hover, #0FD983);
  border-color: var(--action-hover, #0FD983);
}

/* 侧栏开关按钮（吸顶条里的已移除，这里保留给旧结构/其它模板复用） */
.mm-rv2 .mm-rv2-toggle {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  font-size: 12.5px; font-weight: 700; padding: 7px 12px; border-radius: 9px;
  border: 1.5px solid var(--rv-line-2); background: var(--rv-paper-2); color: var(--rv-ink-2);
  cursor: pointer; white-space: nowrap; transition: .15s;
}
.mm-rv2 .mm-rv2-toggle:hover { border-color: var(--rv-ink-3); color: var(--rv-ink); }
.mm-rv2 .mm-rv2-toggle.on { background: var(--rv-ink); border-color: var(--rv-ink); color: var(--rv-paper-2); }
.mm-rv2 .mm-rv2-toggle .chev { font-size: 11px; opacity: .7; }

/* 多音色下拉（mm-tts.js 动态插入，现挂在正文设置行 #mm-rv2-voice-slot）
   ⚠️ Chromium 的坑：flex 容器里的 <select>，即使 flex:0 0 auto，
      也会被拉伸成**容器宽度**（实测 922px），把整条吸顶条撑爆、
      「收起侧栏」按钮被顶出视口。必须显式 width:auto + max-width 收住。 */
.mm-rv2 .mm-tts-voice {
  width: auto; max-width: 150px; flex: 0 0 auto; height: 31px;
  font-size: 12.5px; line-height: 1; padding: 0 10px; border-radius: 999px;
  background: var(--rv-tool-bg); color: var(--rv-tool-ink);
  border: 1px solid var(--rv-tool-line);
  cursor: pointer; text-overflow: ellipsis;
}
.mm-rv2 .mm-tts-voice:focus-visible { outline: 2px solid var(--rv-brand); outline-offset: 1px; }
/* 挂载点本身为空时零尺寸，不占位 */
.mm-rv2 .mm-rv2-voice-slot { display: inline-flex; align-items: center; flex: 0 0 auto; }
.mm-rv2 .mm-rv2-voice { display: inline-flex; align-items: center; gap: 7px; }
.mm-rv2 .mm-rv2-voice-lbl { font-size: 12px; color: var(--rv-ink-3); white-space: nowrap; }

/* ---------- 文章头（间距已在上方「布局骨架」段统一设定） ---------- */
.mm-rv2 .mm-rv2-badges { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-start; margin-bottom: 12px; }
.mm-rv2 .mm-rv2-badge { font-size: 11.5px; font-weight: 800; padding: 4px 11px; border-radius: 999px; letter-spacing: .03em; }
.mm-rv2 .mm-rv2-badge.lv { background: var(--rv-brand-soft); color: var(--rv-brand); }
/* HSK 双标码：与 CEFR 视觉区分（描边胶囊），数据源 inc/levels-map.php */
.mm-rv2 .mm-rv2-badge.lv.mm-rv2-badge--hsk { background: transparent; color: var(--rv-brand); box-shadow: inset 0 0 0 1.5px var(--rv-brand); }
.mm-rv2 .mm-rv2-badge.free { background: var(--rv-green-soft); color: var(--rv-green); }
.mm-rv2 .mm-rv2-badge.lock { background: var(--rv-amber-soft); color: var(--rv-amber); }
.mm-rv2 .mm-rv2-title { font-family: var(--serif); font-size: 40px; line-height: 1.24; margin: 0 0 12px; font-weight: 700; color: var(--rv-ink); letter-spacing: .01em; }
/* 简介：全文显示，不再截 3 行。
   上限由 PHP 侧把关（600 字），CSS 不再 clamp ——
   clamp 会让「读者以为介绍就到这里」，而读者要的就是看全。 */
.mm-rv2 .mm-rv2-sub {
  font-size: 15.5px; color: var(--rv-ink-2); margin: 0; max-width: 66ch; line-height: 1.72;
}
.mm-rv2 .mm-rv2-byline { margin-top: 16px; font-size: 12.5px; color: var(--rv-ink-3); letter-spacing: .02em; }

/* ---------- 页头：标题+简介左对齐 · 右侧特色图（方案 C）----------
   有特色图 → 两列 grid（正文 1fr / 图 360px），徽章横跨整行；
   没特色图 → 退化成单列（左对齐全宽），不留空位。
   align-items: center = **上下居中**：简介无论几行，
   特色图（含占位图）永远在右列垂直居中。 */
.mm-rv2 .mm-rv2-head.has-thumb { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 26px; align-items: center; }
.mm-rv2 .mm-rv2-head.has-thumb .mm-rv2-badges { grid-column: 1 / -1; }
.mm-rv2 .mm-rv2-head.has-thumb .mm-rv2-title { font-size: 34px; line-height: 1.2; }
.mm-rv2 .mm-rv2-head-main { min-width: 0; }
.mm-rv2 .mm-rv2-thumb {
  margin: 0; line-height: 0;
  border-radius: 14px; border: 1px solid var(--rv-line-2); background: var(--rv-paper-3);
  /* 占位图配色走阅读页自己的纸感令牌（paper/studio/night 自动跟随），
     不用 thumb.css 默认的蓝绿渐变 —— 那是给全站缩略图槽位的。 */
  --thumb-ph-ink: var(--rv-brand);
  --thumb-ph-bg: radial-gradient(circle at 28% 22%, color-mix(in srgb, var(--rv-brand) 14%, transparent), transparent 58%), var(--rv-brand-soft);
}
.mm-rv2 .mm-rv2-thumb .mm-thumb-ph { --thumb-ph-size: 78px; }
/* 移动端占位字小一号（框更小） */
@media (max-width: 980px) {
  .mm-rv2 .mm-rv2-thumb .mm-thumb-ph { --thumb-ph-size: 62px; }
}

/* ---------- 正文 ---------- */
.mm-rv2 .mm-rv2-body { max-width: var(--rv-body-w); width: 100%; min-width: 0; }
.mm-rv2 .mm-rv2-ch { margin: 0 0 48px; scroll-margin-top: 84px; }
.mm-rv2 .mm-rv2-ch-head { display: flex; align-items: baseline; gap: 13px; margin: 0 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--rv-line); }
.mm-rv2 .mm-rv2-ch-num { font-family: var(--serif); font-size: 13px; color: var(--rv-brand); letter-spacing: .18em; font-weight: 700; }
.mm-rv2 .mm-rv2-ch-title { font-family: var(--serif); font-size: 25px; margin: 0; font-weight: 700; color: var(--rv-ink); letter-spacing: .02em; }
.mm-rv2 .mm-rv2-ch-meta { margin-left: auto; font-size: 12px; color: var(--rv-ink-3); }
.mm-rv2 .mm-rv2-text p { font-size: calc(19px * var(--mm-fs, 1)); line-height: 2.05; margin: 0 0 1.15em; color: var(--rv-ink-strong); letter-spacing: .01em; text-indent: 2em; }
.mm-rv2 .mm-rv2-text p:first-child { text-indent: 0; }
.mm-rv2 .mm-rv2-text h2, .mm-rv2 .mm-rv2-text h3 { font-family: var(--serif); }
.mm-rv2 .mm-rv2-text ruby { ruby-position: over; }
.mm-rv2 .mm-rv2-text rt { font-size: var(--py-size, .5em); color: var(--rv-ink-strong); font-weight: 600; letter-spacing: .02em; }

/* ---------- 朗读跟随亮色（逐词） ----------
   ⚠️ 这套规则原本只写在 annotation.css，而那个文件**只在「阅读视图页」加载**
   （inc/reading-views.php 里的 views_posts 场景），阅读页 single-mm_reader.php
   根本没挂它 —— 于是 mm-tts.js 确实给 <ruby> 加了 .mm-tts-word 类，
   但没有任何 CSS 给这个类上色，字自然不变色（看起来就是「跟读高亮没生效」）。
   两篇文章都一样失效，不是某篇的特例。

   现在在阅读页自己的作用域里补齐，并且：
   1) 颜色走作用域令牌 --rv-listen，night 基调可单独给值；
   2) 拼音 rt 保持 --rv-green 不变（只让汉字变色，拼音不跟着闪）；
   3) 加一层极淡的底色，密集朗读时也能看清当前词的位置。 */
.mm-rv2 .mm-tts-word {
  color: var(--rv-listen);
  background: var(--rv-listen-soft);
  border-radius: 3px;
  box-shadow: none;
  transition: color .12s ease, background .12s ease;
}
.mm-rv2 .mm-rv2-text .mm-tts-word rt { color: var(--rv-ink-strong); }
/* 段落级定位（当前正在读的段落）：左侧一条细指示条 + 极淡底色，
   不铺满品牌蓝底 —— 否则会把逐词变色完全淹没。 */
.mm-rv2 .mm-rv2-text p.mm-tts-active,
.mm-rv2 .mm-rv2-text li.mm-tts-active,
.mm-rv2 .mm-rv2-text h2.mm-tts-active,
.mm-rv2 .mm-rv2-text h3.mm-tts-active,
.mm-rv2 .mm-rv2-text blockquote.mm-tts-active,
.mm-rv2 .mm-rv2-text span.mm-tts-blk.mm-tts-active {
  background: var(--rv-listen-soft);
  box-shadow: inset 3px 0 0 var(--rv-listen);
  border-radius: 6px;
}

/* ---------- 等级颜色体系（HSK 3 → HSK 7+ 共 5 档） ----------
   设计原则：**颜色 = 词的绝对 HSK 等级**，不是「超出本篇基准几档」。
   同一个词在任何文章里都是同一个颜色，读者能把「颜色 ↔ 难度」记成一回事，
   跨篇迁移也成立（早期按 offset 分档时，基准一变颜色就变，等于没有体系）。

   2026-11 再简化：5 档**只用颜色**区分（统一 3px 实线），
   虚线 / 点线 / 双线通道删除 —— 线型在密集正文里互相打架，越简越清楚。
   色值全部用**高对比版**。颜色真值集中在这里，PHP 侧只引用变量名。

   2026-11-03 换高区分度色板：旧板是暖色渐变（琥珀→赭橙→玫红→靛紫→深靛），
   HSK3/4 与 HSK6/7 两对肉眼难分。现按「赤橙(黄)绿青蓝紫」拉开色相：
   橙(3) → 红(4) → 绿(5) → 蓝(6) → 紫(7)，相邻档位色相差 ≥ 55°。
   ⚠ 弹窗（dictionary-bubble.css）在 .mm-rv2 作用域外，那里有同值副本，
   改这里必须同步改（搜索 --rv-lv-）。 */
.mm-rv2 {
  --rv-lv-3: #B45309;   /* 橙 */
  --rv-lv-4: #DC2626;   /* 红 */
  --rv-lv-5: #059669;   /* 绿 */
  --rv-lv-6: #2563EB;   /* 蓝 */
  --rv-lv-7: #9333EA;   /* 紫 */
  /* 词级色条（普通词）：品牌蓝，和等级色区分开 */
  --rv-word-bar: #1166F0;
}
/* 夜间是深底 → 等级色与词条色都换成亮色，否则压不住 */
.mm-rv2[data-tone="night"] {
  --rv-lv-3: #FBBF24;
  --rv-lv-4: #F87171;
  --rv-lv-5: #34D399;
  --rv-lv-6: #60A5FA;
  --rv-lv-7: #C084FC;
  --rv-word-bar: #7AA5FF;
}

/* ---------- 正文标注：词 + 级别词，各一条色条（对标 Du Chinese） ----------
   ⚠ 底色事故的根因（2026-11 修）：
     annotation.css 只挂在博客视图上，**读者页从来没加载它**。
     结果 ruby.mmw 只拿到下面这条 background-image（实色渐变），
     而 background-size 没定义 → 默认 auto → **整块 ruby 被填成一片底色**，
     词的下划线完全看不见。现在把 size / position / repeat 一次写全：
     底色消失，只剩一条 3px 的线。

   两层信息各走各的通道，不再互相打架：
     · 词（ruby.mmw）    = 品牌蓝色条，右端留 .16em 缺口 → 词界一眼可辨
     · 超纲词（.mm-lv-*）= 等级色条（更粗 + 线型区分档位）
       等级 span 在 ruby 内部，:has() 让它**接管**词条，不再画两条叠在一起。 */
.mm-rv2 .rtext ruby.mmw {
  background-image: linear-gradient(var(--rv-word-bar), var(--rv-word-bar));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: calc(100% - .16em) 3px;
}
/* 散字（未成词的单字）不画条 —— 与「词」形成对比 */
.mm-rv2 .rtext ruby.mmc { background-image: none; }

/* 有等级标记的词 → 等级条接管（否则品牌条 + 等级条上下两条叠着，很脏） */
.mm-rv2 .rtext ruby.mmw:has(> .mm-lv-h3),
.mm-rv2 .rtext ruby.mmw:has(> .mm-lv-h4),
.mm-rv2 .rtext ruby.mmw:has(> .mm-lv-h5),
.mm-rv2 .rtext ruby.mmw:has(> .mm-lv-h6),
.mm-rv2 .rtext ruby.mmw:has(> .mm-lv-h7) { background-image: none; }

/* 等级下划线：5 档同一样式（3px 实线），只靠颜色分档。
   分级词若由 PHP 补了拼音（ruby.mmw 内含 .mm-lv-*），
   :has() 规则让等级条接管词条，不会蓝条 + 等级条叠两条。 */
.mm-rv2 .mm-lv-h3 { border-bottom: 3px solid var(--rv-lv-3); padding-bottom: 1px; cursor: help; }
.mm-rv2 .mm-lv-h4 { border-bottom: 3px solid var(--rv-lv-4); padding-bottom: 1px; cursor: help; }
.mm-rv2 .mm-lv-h5 { border-bottom: 3px solid var(--rv-lv-5); padding-bottom: 1px; cursor: help; }
.mm-rv2 .mm-lv-h6 { border-bottom: 3px solid var(--rv-lv-6); padding-bottom: 1px; cursor: help; }
.mm-rv2 .mm-lv-h7 { border-bottom: 3px solid var(--rv-lv-7); padding-bottom: 1px; cursor: help; }
/* 侧栏开关关掉时，正文里的分级标记整体隐藏（正文仍保持干净） */
.mm-rv2 .mm-lv-hidden .mm-lv-h3,
.mm-rv2 .mm-lv-hidden .mm-lv-h4,
.mm-rv2 .mm-lv-hidden .mm-lv-h5,
.mm-rv2 .mm-lv-hidden .mm-lv-h6,
.mm-rv2 .mm-lv-hidden .mm-lv-h7 { border-bottom: 0; padding-bottom: 0; background: none; }
/* 词条也跟着关（分级开关关掉时正文只剩干净的词界线，不要一半亮一半灭） */
.mm-rv2 .mm-lv-hidden .rtext ruby.mmw { background-image: none; }
/* 朗读跟读时，当前词要靠颜色突出 → 暂时让出词条，别两条线打架 */
.mm-rv2 .rtext ruby.mmw.on { background-image: none; }

/* 视图切换 + 右端设置组 同一行
   —— HSK 分级色条图例已删除（等级含义由侧栏 Level annotations 卡交代，
   正文上方再来一行小图例是重复）。左=视图按钮，右=音色/朗读组。 */
.mm-rv2 .mm-rv2-tools-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 14px 0 6px; }
.mm-rv2 .mm-rv2-tools-row .rview-tabs { flex: 1 1 auto; min-width: 0; margin: 0; }
/* readers.css 给 .rview-hidepy 写了 margin-left:auto（把它顶到容器右端）。
   容器 .rview-tabs 是 flex:1 1 auto 会跟着长宽，这一来「Hide pinyin」就跟
   另两个视图按钮分家了（实测被推到 721px 容器的最右，中间空一大段）。
   这里在阅读页作用域内归零，三个视图按钮永远聚成一串。 */
.mm-rv2 .mm-rv2-tools-row .rview-hidepy { margin-left: 0; }

/* ---------- 设置行右端：音色 → 朗读 ---------- */
/* 右端设置组：音色 + 朗读打包靠右对齐。
   （阅读宽度控件已删除 —— 宽度改由后台统一控制，前台无开关。） */
.mm-rv2 .mm-rv2-tools-right {
  display: flex; align-items: center; gap: 14px;
  flex: 0 0 auto; margin-left: auto;
}
/* 挂载点内的间距（音色组与朗读按钮之间） */
.mm-rv2 .mm-rv2-voice-slot { gap: 9px; }

/* 朗读播放按钮：从吸顶条搬到设置行，紧挨音色下拉。
   行动绿保持「主 CTA」地位，但尺寸收一档，别把设置行撑高。
   ⚠️ .mm-reader .rtool 的表面走全站令牌（--card/--text/--border），
      night 基调下会在深底上出现白底黑字，这里整组覆盖成作用域/行动色。 */
.mm-rv2 .mm-rv2-tools-row .rtool.mm-tts-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--action, #11EE92);
  border-color: var(--action, #11EE92);
  color: var(--action-ink, #0D3327);
  font-weight: 700; font-size: 12.5px; line-height: 1;
  padding: 7px 13px; border-radius: 999px;
  white-space: nowrap; cursor: pointer; transition: .15s;
}
.mm-rv2 .mm-rv2-tools-row .rtool.mm-tts-btn:hover { filter: brightness(1.05); }
.mm-rv2 .mm-rv2-tools-row .rtool.mm-tts-btn[aria-pressed="true"] {
  background: var(--action-hover, #0FD983);
  border-color: var(--action-hover, #0FD983);
  color: var(--action-ink, #0D3327);
}

/* ---------- 章节标题（服务端包出来的 .mm-rv2-ch-head） ---------- */
.mm-rv2 .mm-rv2-ch-head h2,
.mm-rv2 .mm-rv2-ch-head h3,
.mm-rv2 .mm-rv2-ch-head h4 { font-family: var(--serif); font-size: 25px; font-weight: 700; color: var(--rv-ink); margin: 0; letter-spacing: .02em; line-height: 1.35; }
.mm-rv2 .mm-rv2-ch-head h3 { font-size: 21px; }
.mm-rv2 .mm-rv2-ch-head h4 { font-size: 18px; }

/* ---------- 正文容器（D 版：纸面卡片，弱化边框） ---------- */
.mm-rv2 .rreader { max-width: none; }          /* 覆盖 readers.css 的 760px，宽度由网格控制 */
/* readers.css 的 `.mm-reader .rreader.wide { max-width:940px }`（specificity 0,3,0）
   会把最宽态的正文钉死在 940px，而最宽态的网格列是弹性的（≈1034px）——
   右侧就空出 94px，页面看着还是「没铺开」。
   这里在 .mm-rv2 作用域内解除这个上限，让正文真的铺满整列。 */
.mm-rv2 .rreader.wide { max-width: none; }
/* 正文容器底色/描边/内边距/圆角/阴影全部走作用域令牌
   （--rv-body-*），不能沿用 readers.css 的 var(--card) / var(--border)：
   那两个是全站浅色令牌，在 paper / night 基调下都会让正文变成白卡片。 */
.mm-rv2 .rcontent {
  background: var(--rv-body-bg);
  border: 1px solid var(--rv-body-line);
  border-radius: var(--rv-body-radius);
  padding: var(--rv-body-pad);
  box-shadow: var(--rv-body-shadow);
}
/* 2026-11-09 修「A 160% 点了没反应」：
   JS 把 --mm-fs 设在 #mm-reader-content 上，变量能继承到这里，
   但这里原先写死 font-size:19px，下面 p 又是 inherit ——
   等于整条链把 --mm-fs 吃掉了（实测变量=1.1、正文仍是 19px）。
   改成 calc 后 p 继承缩放值，rt 用 em 也跟着等比缩放。 */
.mm-rv2 .mm-rv2-text { font-size: calc(19px * var(--mm-fs, 1)); line-height: 2.05; }
/* 字号必须 inherit：p 上直接写死 font-size 会盖掉
   .mm-reader .rcontent.fs-0/.fs-2 .rtext 的字号档位（A−/A／A＋ 就会失灵） */
.mm-rv2 .mm-rv2-text p { margin: 0 0 1.15em; font-size: inherit; }
.mm-rv2 .mm-rv2-text ruby { ruby-position: over; }
.mm-rv2 .mm-rv2-text rt { font-size: var(--py-size, .5em); color: var(--rv-ink-strong); font-weight: 600; letter-spacing: .02em; }
.mm-rv2 .rtext.no-pinyin rt { display: none; }

/* 视图切换 tab（简体/繁體/English + 隐藏拼音）
   —— readers.css 里写死 background:#fff / color:var(--ink)，
   night 基调下会在深底上出现白底黑字的小圆片，跟整页不搭。
   表面同样改走 --rv-tool-* 令牌。
   高度：readers.css 的 font 简写已修好（原本整条失效 → 字号退回 16px、
   行高退回 1.65，按钮撑到 44px，太抢眼）。这里再收紧一档到 ~30px。 */
.mm-rv2 .rview-tabs { gap: 7px; }
.mm-rv2 .rview-tab,
.mm-rv2 .rview-hidepy {
  background: var(--rv-tool-bg);
  color: var(--rv-tool-ink);
  border-color: var(--rv-tool-line);
  font-size: 12.5px;
  line-height: 1;
  padding: 7px 13px;
}
.mm-rv2 .rview-tab.on {
  background: var(--rv-brand);
  border-color: var(--rv-brand);
  color: #fff;
}

/* ---------- 锁定章节占位卡 ---------- */
/* 闸门区：占位卡统一放在正文容器之后 */
.mm-rv2 .mm-rv2-gate { margin-top: 30px; }
.mm-rv2 .mm-rv2-gate-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px dashed var(--rv-line); }
.mm-rv2 .mm-rv2-gate-h span { font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--rv-ink); letter-spacing: .02em; }
.mm-rv2 .mm-rv2-gate-h b { font-size: 12px; font-weight: 700; color: var(--rv-ink-2); }
/* ---------- 统一付费区（合并原锁定卡 + 底部 CTA）----------
   底色跟随主题品牌蓝（--rv-cta-bg，由 --rv-brand-soft 派生），
   斜纹与描边也换成品牌蓝的低透明度，不再用琥珀色（2026-11-07 用户要求
   「底色调成与主题匹配的颜色」）。模块大小随功能去留自适应：
   关闭单篇购买 → .mm-rv2-pay--subonly 收窄为只含订阅的一行。 */
.mm-rv2 .mm-rv2-pay {
  position: relative; overflow: hidden; display: flex; gap: 16px; align-items: flex-start;
  background: var(--rv-cta-bg); border: 1px solid var(--rv-cta-line); border-radius: 16px;
  color: var(--rv-ink); padding: 22px 24px; margin: 8px 0 16px;
}
.mm-rv2 .mm-rv2-pay::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, transparent 0 11px, var(--rv-cta-stripe) 11px 22px); }
.mm-rv2 .mm-rv2-pay > * { position: relative; }
.mm-rv2 .mm-rv2-pay-ico { width: 38px; height: 38px; border-radius: 11px; background: var(--rv-brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; flex: none; }
.mm-rv2 .mm-rv2-pay-bd { flex: 1 1 auto; min-width: 0; }
.mm-rv2 .mm-rv2-pay-t { font-family: var(--serif); font-size: 19px; font-weight: 700; color: var(--rv-ink); margin: 0 0 8px; }
.mm-rv2 .mm-rv2-pay-desc { font-size: 15px; color: var(--rv-ink-2); margin: 0 0 12px; max-width: 60ch; }
.mm-rv2 .mm-rv2-pay-lead { font-size: 14px; color: var(--rv-ink-2); margin: 0 0 16px; max-width: 62ch; line-height: 1.6; }
.mm-rv2 .mm-rv2-pay-lead strong { color: var(--rv-ink); }
.mm-rv2 .mm-rv2-pay-cta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
/* ---------- 引导卡主按钮：逐态锁死「品牌蓝底 + 白字」----------
   ⚠️ 不能只写 :hover { filter: brightness() }：readers.css 的旧回退
   .mm-reader .rcta .btn-primary:hover { background: var(--brand-tint) }
   与 reader.css 的 .mm .btn-primary:hover 会在悬停、点击后焦点停留、拖选文字时
   把背景刷成近白（#EAF2FE），而文字仍是 #fff —— 亮色模式下整颗按钮「消失」。
   2026-11-07 用户反馈修复：默认/已访问/聚焦/按下/悬停各态都显式给配色；
   同时给按钮内文字的 ::selection 一个高对比反色，拖选时也读得清。 */
.mm-rv2 .mm-rv2-pay-cta .btn-primary,
.mm-rv2 .rcta .btn-primary,
.mm-rv2 .mm-rv2-pay-cta .btn-primary:visited,
.mm-rv2 .rcta .btn-primary:visited,
.mm-rv2 .mm-rv2-pay-cta .btn-primary:focus,
.mm-rv2 .rcta .btn-primary:focus,
.mm-rv2 .mm-rv2-pay-cta .btn-primary:focus-visible,
.mm-rv2 .rcta .btn-primary:focus-visible,
.mm-rv2 .mm-rv2-pay-cta .btn-primary:active,
.mm-rv2 .rcta .btn-primary:active {
  background: var(--rv-brand); color: #fff; border-color: var(--rv-brand);
}
.mm-rv2 .mm-rv2-pay-cta .btn-primary:hover,
.mm-rv2 .rcta .btn-primary:hover,
.mm-rv2 .mm-rv2-pay-cta .btn-primary:hover:focus,
.mm-rv2 .rcta .btn-primary:hover:focus {
  background: color-mix(in srgb, var(--rv-brand) 86%, #000);
  color: #fff; border-color: var(--rv-brand);
}
.mm-rv2 .mm-rv2-pay-cta .btn-primary::selection,
.mm-rv2 .mm-rv2-pay-cta .btn-primary *::selection,
.mm-rv2 .rcta .btn-primary::selection,
.mm-rv2 .rcta .btn-primary *::selection {
  background: #fff; color: var(--rv-brand);
}
.mm-rv2 .mm-rv2-pay-cta .btn-ghost { color: var(--rv-brand); border-color: var(--rv-line-2); }
.mm-rv2 .mm-rv2-pay-cta .btn-ghost:hover { border-color: var(--rv-brand); background: var(--rv-brand-soft); }
.mm-rv2 .mm-rv2-pay-signin { font-size: 13px; color: var(--rv-ink-3); margin: 14px 0 0; }
.mm-rv2 .mm-rv2-pay-signin a { color: var(--rv-brand); text-decoration: none; font-weight: 600; }
/* 自适应：关闭单篇购买后只保留订阅，模块收窄 */
.mm-rv2 .mm-rv2-pay--subonly { padding: 18px 22px; align-items: center; }
.mm-rv2 .mm-rv2-pay--subonly .mm-rv2-pay-lead { margin-bottom: 12px; }

/* ---------- 结尾 CTA（bundle 引导）----------
   跟统一付费区同一套视觉语言：主题品牌蓝浅底 + 同色系斜纹/描边 + 品牌色图标块。
   readers.css 里原本是 .mm-reader .rcta { background: var(--bg-grad); color:#fff; border-radius:18px }
   —— 蓝青渐变 + 白字太扎眼；后来的暖纸底 + 琥珀斜纹又与冷蓝主题不搭，
   2026-11-07 按用户要求统一改为跟随主题的表面令牌（--rv-cta-*）。 */
.mm-rv2 .rcta {
  position: relative; overflow: hidden;
  background: var(--rv-cta-bg); border: 1px solid var(--rv-cta-line); border-radius: 16px;
  color: var(--rv-ink);            /* 覆盖 readers.css 的 color:#fff（那是给渐变底用的） */
  padding: 20px 24px; margin: 26px 0 4px;
}
.mm-rv2 .rcta::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, transparent 0 11px, var(--rv-cta-stripe) 11px 22px); }
.mm-rv2 .rcta > * { position: relative; }
.mm-rv2 .rcta-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
/* 图标块改用品牌色实底：底色已是品牌浅蓝，再用 --rv-brand-soft 会糊成一块 */
.mm-rv2 .rcta-ico { width: 30px; height: 30px; border-radius: 9px; background: var(--rv-brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; flex: none; }
.mm-rv2 .rcta-t { font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--rv-ink); }
.mm-rv2 .rcta p { font-size: 14.5px; color: var(--rv-ink-2); margin: 0 0 8px; max-width: 58ch; }
.mm-rv2 .rcta p.rcta-note { font-size: 13px; color: var(--rv-ink-3); margin: 0 0 14px; }
.mm-rv2 .rcta-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
/* 主按钮配色（含 hover / focus / active / visited / ::selection）
   与上方 .mm-rv2-pay-cta 共用一整段规则，避免两处各写一半又被旧样式钻空子。 */
.mm-rv2 .rcta .rcta-sub { font-size: 13px; color: var(--rv-ink-3); }
.mm-rv2 .rcta .rcta-sub a { color: var(--rv-brand); text-decoration: none; font-weight: 600; }

/* ---------- 段落口径的侧栏目录（lines 模式）----------
   只列「段号 + Free / 🔒 Locked」，**不显示段落正文**。
   原来这里把免费段落的全文逐条列出来，读起来像把内容抄了一遍。 */
.mm-rv2 .mm-rv2-para-list { margin: 0 0 12px; }
.mm-rv2 .mm-rv2-para-list li { border-left: 2px solid transparent; }
.mm-rv2 .mm-rv2-para-list a,
.mm-rv2 .mm-rv2-para-list .row-lock {
  display: flex; gap: 11px; align-items: baseline;
  padding: 6px 10px; text-decoration: none; font-size: 13.5px;
}
.mm-rv2 .mm-rv2-para-list a { color: var(--rv-ink-2); border-radius: 0 9px 9px 0; }
.mm-rv2 .mm-rv2-para-list a:hover { background: var(--rv-paper-3); color: var(--rv-ink); }
.mm-rv2 .mm-rv2-para-list .num { font-family: var(--serif); font-size: 12px; color: var(--rv-ink-3); letter-spacing: .06em; flex: none; }
.mm-rv2 .mm-rv2-para-list .t { flex: 1; }
.mm-rv2 .mm-rv2-para-list li.is-locked { opacity: .6; }
.mm-rv2 .mm-rv2-para-list li.is-locked .t { color: var(--rv-ink-3); font-size: 13px; }

/* 段落锚点容器（每段一个，供目录跳转） */
.mm-rv2 .mm-rv2-p { scroll-margin-top: 84px; }

/* ---------- 右侧栏 ----------
   滚动条下移到 .mm-rv2-side-cards：侧栏本身是 sticky，
   如果它自己滚，绝对定位的折叠把手会跟着滚走（就点不到了）。 */
.mm-rv2 .mm-rv2-side {
  position: sticky; top: 74px; padding-top: 30px;
  display: flex; flex-direction: column;
}
.mm-rv2 .mm-rv2-side-cards {
  overflow-y: auto; max-height: calc(100vh - 130px);
  scrollbar-width: thin; scrollbar-color: var(--rv-line) transparent;
}
.mm-rv2 .mm-rv2-side-cards::-webkit-scrollbar { width: 5px; }
.mm-rv2 .mm-rv2-side-cards::-webkit-scrollbar-thumb { background: var(--rv-line); border-radius: 99px; }
.mm-rv2 .mm-rv2-card { background: var(--rv-paper-2); border: 1px solid var(--rv-line); border-radius: 14px; padding: 16px 17px; margin-bottom: 14px; }
.mm-rv2 .mm-rv2-card > h4 { margin: 0 0 12px; font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--rv-ink-3); text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.mm-rv2 .mm-rv2-card > h4 .tag { margin-left: auto; font-size: 11px; font-weight: 700; background: var(--rv-brand-soft); color: var(--rv-brand); border-radius: 999px; padding: 2px 8px; letter-spacing: 0; text-transform: none; }

/* 目录 */
.mm-rv2 .mm-rv2-toc { list-style: none; margin: 0 0 14px; padding: 0; }
.mm-rv2 .mm-rv2-toc a { display: flex; gap: 11px; align-items: baseline; padding: 8px 10px; border-radius: 9px; text-decoration: none; color: var(--rv-ink-2); font-size: 14.5px; border-left: 2px solid transparent; transition: .15s; }
.mm-rv2 .mm-rv2-toc a:hover { background: var(--rv-paper-3); color: var(--rv-ink); text-decoration: none; }
.mm-rv2 .mm-rv2-toc a.cur { background: var(--rv-paper-3); color: var(--rv-ink); border-left-color: var(--rv-brand); font-weight: 700; }
.mm-rv2 .mm-rv2-toc .num { font-family: var(--serif); font-size: 12px; color: var(--rv-ink-3); letter-spacing: .06em; flex: none; }
.mm-rv2 .mm-rv2-toc a.cur .num { color: var(--rv-brand); }
.mm-rv2 .mm-rv2-toc .t { flex: 1; }
.mm-rv2 .mm-rv2-toc .lockt { flex: none; font-size: 10.5px; font-weight: 800; color: var(--rv-amber); background: var(--rv-amber-soft); border-radius: 999px; padding: 2px 7px; }

/* 进度条 */
.mm-rv2 .mm-rv2-bar-track { height: 5px; border-radius: 99px; background: var(--rv-paper-3); overflow: hidden; margin: 4px 0 8px; }
.mm-rv2 .mm-rv2-bar-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--rv-brand), var(--rv-green)); border-radius: 99px; }
.mm-rv2 .mm-rv2-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--rv-ink-2); margin-top: 7px; }
.mm-rv2 .mm-rv2-row b { color: var(--rv-ink); font-weight: 700; }

/* 生词 chips */
.mm-rv2 .mm-rv2-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mm-rv2 .mm-rv2-chips span { font-size: 12.5px; background: var(--rv-paper-3); border-radius: 8px; padding: 4px 9px; color: var(--rv-ink-2); display: inline-flex; align-items: baseline; gap: 5px; }
.mm-rv2 .mm-rv2-chips span i { font-style: normal; font-size: 9.5px; font-weight: 700; color: var(--rv-ink-3); letter-spacing: .02em; }
/* 词条后面的拼音（D 样版：「孤单 guū dān」）——用低对比的暖灰，不与词争视线 */
.mm-rv2 .mm-rv2-chips span i.py { font-size: 11px; font-weight: 500; color: var(--rv-green); letter-spacing: .01em; }
.mm-rv2 .mm-rv2-chips a { color: var(--rv-brand); font-weight: 700; }
/* 空态 */
.mm-rv2 .mm-rv2-empty { font-size: 12.5px; color: var(--rv-ink-3); line-height: 1.7; }

/* ---------- 等级颜色表 ----------
   把「级别 / 颜色 / 具体是哪些词」放在一张表里，
   读者不用猜正文里那根彩色下划线是什么意思。 */
.mm-rv2 .mm-rv2-lvtable { margin-top: 4px; }
.mm-rv2 .mm-rv2-lvrow {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--rv-ink-2); margin-top: 10px;
}
.mm-rv2 .mm-rv2-lvrow i {
  width: 18px; height: 4px; border-radius: 2px; flex: none;
  /* 颜色由内联 style 给 background:var(--rv-lv-N)；
     纯色块 —— 与正文「纯色彩、无线型」的等级下划线同一套语言 */
}
.mm-rv2 .mm-rv2-lvrow .lvname { font-weight: 700; color: var(--rv-ink); }
.mm-rv2 .mm-rv2-lvrow .lvlv { font-size: 11px; font-weight: 700; color: var(--rv-ink-3); letter-spacing: .04em; }
.mm-rv2 .mm-rv2-lvrow .lvcount {
  margin-left: auto; font-size: 11px; font-weight: 700;
  color: var(--rv-ink-3); background: var(--rv-paper-3); border-radius: 999px; padding: 1px 8px;
}
.mm-rv2 .mm-rv2-lvwords { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 0 26px; }
.mm-rv2 .mm-rv2-lvwords span {
  font-size: 12px; color: var(--rv-ink-2); background: var(--rv-paper-3);
  border-radius: 7px; padding: 2px 8px; cursor: help;
}
.mm-rv2 .mm-rv2-lvnote { font-size: 11.5px; color: var(--rv-ink-3); margin: 10px 0 0; }
/* 等级 / 标调口径披露里的链接：白底纸色卡上必须用高对比蓝，不能继承 --primary */
.mm-rv2 .mm-rv2-lvnote a { color: #1166F0; text-decoration: underline; }

/* ---------- 读完提示（D 样版 .endnote） ---------- */
.mm-rv2 .mm-rv2-endnote {
  text-align: center; font-family: var(--serif); font-size: 15px; color: var(--rv-ink-3);
  padding: 26px 0 0; border-top: 1px solid var(--rv-line); margin-top: 14px;
}

/* 开关 */
.mm-rv2 .mm-rv2-switch-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--rv-ink-2); margin-bottom: 11px; }
.mm-rv2 .mm-rv2-switch { width: 34px; height: 19px; border-radius: 99px; background: var(--rv-brand); position: relative; flex: none; order: 2; cursor: pointer; border: none; padding: 0; }
.mm-rv2 .mm-rv2-switch::after { content: ""; position: absolute; top: 2px; right: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: transform .2s; }
.mm-rv2 .mm-rv2-switch[aria-checked="false"] { background: var(--rv-line); }
.mm-rv2 .mm-rv2-switch[aria-checked="false"]::after { transform: translateX(-15px); }
/* 服务端没开分级 → 正文里根本没有标记，开关不可用（但仍常驻可见，
   读者才知道「这个功能存在，只是本篇没开」） */
.mm-rv2 .mm-rv2-switch:disabled { opacity: .45; cursor: not-allowed; }
.mm-rv2 .mm-rv2-switch:disabled::after { background: var(--rv-paper-2); }
.mm-rv2 .mm-rv2-lgrow { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--rv-ink-2); margin-top: 7px; }
.mm-rv2 .mm-rv2-lgrow i { width: 16px; height: 4px; border-radius: 2px; flex: none; }

/* 推荐读物 */
.mm-rv2 .mm-rv2-rec { display: flex; gap: 11px; align-items: center; margin-bottom: 11px; }
.mm-rv2 .mm-rv2-rec:last-child { margin-bottom: 0; }
.mm-rv2 .mm-rv2-rec .cover { width: 46px; height: 31px; border-radius: 6px; flex: none; background: var(--rv-paper-3); overflow: hidden; }
.mm-rv2 .mm-rv2-rec .cover img { width: 100%; height: 100%; object-fit: cover; }
.mm-rv2 .mm-rv2-rec .n { font-size: 13.5px; font-weight: 700; color: var(--rv-ink); line-height: 1.3; text-decoration: none; display: block; }
.mm-rv2 .mm-rv2-rec .n:hover { color: var(--rv-brand); }
.mm-rv2 .mm-rv2-rec .m { font-size: 11.5px; color: var(--rv-ink-3); }

/* 折叠把手 = 侧栏折叠开关（2026-11 重做）
   展开态：侧栏**顶部第一行**的横向按钮（居中），点一次收起；
   折叠态：侧栏列缩成 44px、贴右边缘，把手变成撑满整列的竖条，
           正文列与外壳自动占满（.is-collapsed 的 shell/grid 规则在布局段）。 */
.mm-rv2 .mm-rv2-handle {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 9px 0; margin: 0 0 10px;
  border: 1px solid var(--rv-line-2); border-radius: 10px;
  background: var(--rv-paper-2); color: var(--rv-ink-3);
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  cursor: pointer; user-select: none;
  transition: color .15s, border-color .15s;
}
.mm-rv2 .mm-rv2-handle:hover { color: var(--rv-brand); border-color: var(--rv-brand); }
.mm-rv2 .mm-rv2-handle .chev { font-size: 14px; line-height: 1; }
.mm-rv2 .mm-rv2-layout.is-collapsed .mm-rv2-side-cards { display: none; }
.mm-rv2 .mm-rv2-layout.is-collapsed .mm-rv2-handle {
  flex-direction: column; gap: 12px;
  margin: 0; padding: 16px 0;
  min-height: 132px;
  border-style: dashed; border-radius: 12px;
}
.mm-rv2 .mm-rv2-layout.is-collapsed .mm-rv2-handle .v { writing-mode: vertical-rl; letter-spacing: .18em; }
.mm-rv2 .mm-rv2-layout.is-collapsed .mm-rv2-side { overflow: visible; max-height: none; }

/* ---------- 付费弹窗（点锁定章节触发） ---------- */
.mm-rv2 .mm-rv2-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 24px; }
.mm-rv2 .mm-rv2-modal.open { display: flex; }
.mm-rv2 .mm-rv2-modal-bg { position: absolute; inset: 0; background: rgba(15,23,41,.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.mm-rv2 .mm-rv2-modal-box {
  position: relative; width: 100%; max-width: 460px; max-height: 88vh; overflow-y: auto;
  background: var(--rv-paper-2); border-radius: 18px; padding: 30px 32px;
  box-shadow: 0 24px 70px rgba(15,23,41,.34); border: 1px solid var(--rv-line);
}
.mm-rv2 .mm-rv2-modal-x { position: absolute; top: 14px; right: 16px; background: none; border: none; font-size: 22px; line-height: 1; color: var(--rv-ink-3); cursor: pointer; padding: 4px 8px; }
.mm-rv2 .mm-rv2-modal-x:hover { color: var(--rv-ink); }
.mm-rv2 .mm-rv2-modal-ico { width: 44px; height: 44px; border-radius: 13px; background: var(--rv-amber-soft); color: var(--rv-amber); display: flex; align-items: center; justify-content: center; font-size: 19px; margin-bottom: 14px; }
.mm-rv2 .mm-rv2-modal h3 { font-family: var(--serif); font-size: 22px; margin: 0 0 10px; color: var(--rv-ink); }
.mm-rv2 .mm-rv2-modal .teaser { font-size: 15px; color: var(--rv-ink-2); margin: 0 0 20px; line-height: 1.75; }
.mm-rv2 .mm-rv2-modal .price { font-size: 26px; font-weight: 800; color: var(--rv-ink); margin: 0 0 6px; }
.mm-rv2 .mm-rv2-modal .price span { font-size: 13px; font-weight: 600; color: var(--rv-ink-3); }
.mm-rv2 .mm-rv2-modal .sub { font-size: 13px; color: var(--rv-ink-3); margin: 0 0 20px; }
.mm-rv2 .mm-rv2-modal .actions { display: flex; flex-direction: column; gap: 10px; }
.mm-rv2 .mm-rv2-modal .mm-buy-btn { width: 100%; text-align: center; }
.mm-rv2 .mm-rv2-modal .login { font-size: 13px; color: var(--rv-ink-3); margin: 16px 0 0; text-align: center; }
.mm-rv2 .mm-rv2-modal .login a { color: var(--rv-brand); font-weight: 700; }
.mm-rv2 .mm-rv2-modal .note { font-size: 12px; color: var(--rv-ink-3); margin: 14px 0 0; text-align: center; }

/* ---------- 响应式 ---------- */
/* 中等宽度：先砍掉装饰性提示（冗余信息，不是功能） */
@media (max-width: 1500px) {
  .mm-rv2 .mm-rv2-bar .rtool-hint { display: none; }
  /* 「拼音 100%」读数是信息不是功能，窄屏隐藏 */
  .mm-rv2 .mm-rv2-bar .mm-py-size-readout { display: none; }
}
@media (max-width: 1400px) {
  /* 收起侧栏按钮只留箭头（按钮已从吸顶条移除，此处保留给旧结构） */
  .mm-rv2 .mm-rv2-toggle .t { display: none; }
}
@media (max-width: 1100px) {
  .mm-rv2 .mm-rv2-shell { max-width: 784px; }
  .mm-rv2 .mm-rv2-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .mm-rv2 .mm-rv2-layout.is-collapsed { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .mm-rv2 .mm-rv2-layout.is-wide { --rv-body-w: 100%; }
  .mm-rv2 .mm-rv2-body { max-width: 100%; }
  .mm-rv2 .mm-rv2-layout.is-collapsed .mm-rv2-text,
  .mm-rv2 .mm-rv2-layout.is-collapsed .mm-rv2-head { max-width: 100%; }
  .mm-rv2 .mm-rv2-side { position: static; padding-top: 30px; max-height: none; overflow: visible; }
  .mm-rv2 .mm-rv2-side-cards { overflow: visible; max-height: none; }
  .mm-rv2 .mm-rv2-handle { display: none !important; }
  .mm-rv2 .mm-rv2-layout.is-collapsed .mm-rv2-side { display: none; }
  .mm-rv2 .mm-rv2-bar .rtool-hint { display: none; }
  .mm-rv2 .rcontent { padding: 28px 26px; }
  /* 单列了：特色图退到标题下方通栏（限宽，别撑满） */
  .mm-rv2 .mm-rv2-head.has-thumb { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .mm-rv2 .mm-rv2-head.has-thumb .mm-rv2-title { font-size: 31px; }
  .mm-rv2 .mm-rv2-thumb { max-width: 320px; }
  .mm-rv2 .mm-rv2-thumb .mm-thumb-img { width: 100%; max-width: 100%; }
  
}
@media (max-width: 860px) {
  .mm-rv2 .mm-rv2-bar .rtool.opt { display: none; }
  .mm-rv2 .mm-rv2-prog { display: none; }
  .mm-rv2 .mm-rv2-chapter { max-width: 110px; font-size: 15px; }
}
@media (max-width: 620px) {
  .mm-rv2 .mm-rv2-bar-in { height: 46px; gap: 6px; }
  .mm-rv2 .mm-rv2-bar-l { display: none; }
  .mm-rv2 .mm-rv2-tools { gap: 4px; }
  .mm-rv2 .mm-rv2-bar .rtool { padding: 4px 7px; font-size: 11.5px; }
  .mm-rv2 .mm-rv2-prog { width: 26px; }
  .mm-rv2 .mm-rv2-title { font-size: 31px; }
  .mm-rv2 .mm-rv2-text p { font-size: calc(18px * var(--mm-fs, 1)); }
  .mm-rv2 .mm-rv2-ch-title { font-size: 22px; }
  /* 窄屏只留：A / Py / Grammar / ⚙ Display + 图标版朗读。
     Save / Mark complete（.opt）在 ≤860px 已隐藏 —— 手机上点 ⚙ 面板外动作最小化。 */
  .mm-rv2 .mm-rv2-bar #mm-rv2-audio-toggle { display: none; }
  /* 朗读按钮在窄屏**保留**（手机上恰恰最需要「听」），
     但只留 🔊 图标，文字用 CSS 藏掉，免得把吸顶条撑爆。 */
  .mm-rv2 .mm-rv2-bar .mm-tts-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; }
  .mm-rv2 .mm-rv2-bar .mm-tts-lbl { display: none; }
  .mm-rv2 .mm-rv2-sep { display: none; }
  /* Display 面板窄屏改为贴边通栏（不再固定 264px 宽） */
  .mm-rv2 .mm-display-panel { left: 8px; right: 8px; width: auto; max-width: none; }
  .mm-rv2 .rcontent { padding: 22px 18px; }
  .mm-rv2 .mm-rv2-pay { padding: 18px 16px; gap: 12px; }
  .mm-rv2 .mm-rv2-pay-ico { width: 32px; height: 32px; font-size: 15px; border-radius: 9px; }
  .mm-rv2 .mm-rv2-pay-t { font-size: 17px; }
}

/* ---------- 暗色 ---------- */
/* 说明：paper / night 两种基调自带暗色定义；studio 跟随全站暗色。
   全站暗色有两条路径（见 style.css）：系统自动 = @media prefers-color-scheme
   （且用户未强制 light），手动开关 = :root[data-theme="dark"]。
   两条路径都必须覆盖，否则「OS 浅色 + 站内手动切暗」时正文/拼音仍是
   亮色主题的 #111 压在深藏青底上（2026-11 修复）。两块变量保持同值。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mm-rv2:not([data-tone="paper"]):not([data-tone="night"]) {
    --rv-paper:   var(--bg);
    --rv-paper-2: var(--card);
    --rv-paper-3: color-mix(in srgb, var(--card) 88%, var(--border));
    --rv-ink:     var(--text);
    --rv-ink-strong: var(--text);
    --rv-ink-2:   var(--muted);
    --rv-ink-3:   color-mix(in srgb, var(--muted) 72%, transparent);
    --rv-line:    var(--border);
    --rv-line-2:  color-mix(in srgb, var(--border) 78%, var(--text));
    --rv-brand-soft: var(--brand-tint);
    --rv-green-soft: var(--teal-tint);
    --rv-amber-soft: #332514;
    --rv-amber:   #E3C88A;
    /* 等级色板：暗色下同样要提亮（与 night 块同值） */
    --rv-lv-3: #FBBF24;
    --rv-lv-4: #F87171;
    --rv-lv-5: #34D399;
    --rv-lv-6: #60A5FA;
    --rv-lv-7: #C084FC;
    /* 朗读跟读高亮：深底上换成暖橙 */
    --rv-listen:      #FDBA74;
    --rv-listen-soft: rgba(253, 186, 116, .14);
    --rv-glass:   color-mix(in srgb, var(--bg) 88%, transparent);
    --rv-shadow:  none;
    /* 吸顶条按钮 / 视图 tab / 音色·速度下拉的表面：深色卡面。
       不覆盖的话 --rv-tool-bg 停在默认 #fff —— 深条上排一排白按钮 +
       白底下拉（选项白字不可见，2026-11 修复）。 */
    --rv-tool-bg:   var(--card);
    --rv-tool-line: var(--rv-line-2);
    color-scheme: dark;
  }
  :root:not([data-theme="light"]) .mm-rv2 .mm-rv2-modal-bg { background: rgba(6,10,20,.72); }
  :root:not([data-theme="light"]) .mm-rv2 .btn-ghost { background: transparent; color: var(--rv-brand); border-color: var(--rv-brand); }
  :root:not([data-theme="light"]) .mm-rv2 .rcontent { box-shadow: none; }
}
/* 手动切暗（:root[data-theme="dark"]）路径：变量与上面 @media 块完全同值 */
:root[data-theme="dark"] .mm-rv2:not([data-tone="paper"]):not([data-tone="night"]) {
  --rv-paper:   var(--bg);
  --rv-paper-2: var(--card);
  --rv-paper-3: color-mix(in srgb, var(--card) 88%, var(--border));
  --rv-ink:     var(--text);
  --rv-ink-strong: var(--text);
  --rv-ink-2:   var(--muted);
  --rv-ink-3:   color-mix(in srgb, var(--muted) 72%, transparent);
  --rv-line:    var(--border);
  --rv-line-2:  color-mix(in srgb, var(--border) 78%, var(--text));
  --rv-brand-soft: var(--brand-tint);
  --rv-green-soft: var(--teal-tint);
  --rv-amber-soft: #332514;
  --rv-amber:   #E3C88A;
  --rv-lv-3: #FBBF24;
  --rv-lv-4: #F87171;
  --rv-lv-5: #34D399;
  --rv-lv-6: #60A5FA;
  --rv-lv-7: #C084FC;
  --rv-listen:      #FDBA74;
  --rv-listen-soft: rgba(253, 186, 116, .14);
  --rv-glass:   color-mix(in srgb, var(--bg) 88%, transparent);
  --rv-shadow:  none;
  /* 与上面 @media 暗色块同值：吸顶条按钮/下拉的深色表面 */
  --rv-tool-bg:   var(--card);
  --rv-tool-line: var(--rv-line-2);
  color-scheme: dark;
}
:root[data-theme="dark"] .mm-rv2 .mm-rv2-modal-bg { background: rgba(6,10,20,.72); }
:root[data-theme="dark"] .mm-rv2 .btn-ghost { background: transparent; color: var(--rv-brand); border-color: var(--rv-brand); }
:root[data-theme="dark"] .mm-rv2 .rcontent { box-shadow: none; }


/* =========================================================
   D+ 落地：阅读工具行移进正文列（2026-11-09）
   ---------------------------------------------------------
   从「视口级全宽吸顶条」改为「正文列内、白卡片正上方的一行工具条」。
   只给新结构加 .mm-rv2-bar--inline，用覆盖式规则改写旧 .mm-rv2-bar 样式；
   其它页面/旧模板没有这个 class，仍走原吸顶条样式，互不影响。
   顺序：TEXT 区 → 弹性进度条 → Audiobook / Save / Complete
        → NARRATION 浅绿区（Voice / Speed）→ 🔊 Read（JS 追加，最右）。
   ========================================================= */

/* 工具条本体：列内 sticky —— 滚动时仍随时可用，但不跨列压住页头 */
.mm-rv2 .mm-rv2-bar--inline {
  position: sticky; top: 12px; z-index: 30;
  margin: 0 0 14px;
  background: var(--rv-paper-2);
  border: 1px solid var(--rv-line);
  border-radius: 12px;
  box-shadow: var(--rv-shadow);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.mm-rv2 .mm-rv2-bar--inline .mm-rv2-bar-in {
  height: auto; min-height: 50px; padding: 7px 10px; gap: 8px;
}
.mm-rv2 .mm-rv2-bar--inline .mm-rv2-tools { gap: 6px; }
/* 进度条吃掉剩余空间，右侧动作组自然靠右；不再依赖 margin-left:auto */
.mm-rv2 .mm-rv2-bar--inline .mm-rv2-prog {
  flex: 1 1 auto; width: auto; min-width: 12px; max-width: 160px;
}
.mm-rv2 .mm-rv2-bar--inline .mm-rv2-audio-group { margin-left: 0; }
.mm-rv2 .mm-rv2-bar--inline .mm-rv2-sep { display: none; }

/* 分组容器：TEXT 区（左） / NARRATION 区（右，浅绿） */
.mm-rv2 .mm-rv2-zone { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.mm-rv2 .mm-rv2-zone-lbl {
  display: none;          /* comfort 800px 收起，wide 954px 才显示（D+ 样机口径） */
  font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--rv-ink-3); padding-right: 7px; margin-right: 2px;
  border-right: 1px solid var(--rv-line); white-space: nowrap;
}
.mm-rv2.is-wide .mm-rv2-zone-lbl { display: inline; }
.mm-rv2 .mm-rv2-zone--narr {
  gap: 4px; padding: 3px 5px; border-radius: 9px;
  background: var(--rv-green-soft);
  border: 1px solid color-mix(in srgb, var(--rv-green) 30%, var(--rv-line));
}
/* 页面没有 TTS 能力时 slot 为空 —— 不留下一个空的绿框 */
.mm-rv2 .mm-rv2-zone--narr:empty { display: none; }

/* Voice / Speed 循环按钮（mm-tts.js 注入）。
   ⚠️ 特异性必须压过 .rtool:not(.action):not(.primary) 的中性按钮配色，
      否则 night 基调下会变成一排白按钮。 */
.mm-rv2 .mm-rv2-bar--inline .mm-rv2-zone--narr .rtool.mm-tts-cycle {
  background: var(--rv-tool-bg);
  color: var(--rv-ink);
  border: 1px solid var(--rv-tool-line);
  border-radius: 7px;
  font-size: 11.5px; font-weight: 700; line-height: 1.25;
  padding: 4px 8px; white-space: nowrap; cursor: pointer;
  max-width: 104px; overflow: hidden; text-overflow: ellipsis;
}
.mm-rv2 .mm-rv2-bar--inline .mm-rv2-zone--narr .rtool.mm-tts-cycle:hover {
  color: var(--rv-green); border-color: var(--rv-green);
}
.mm-rv2 .mm-rv2-bar--inline .mm-rv2-zone--narr .rtool.mm-tts-cycle:focus-visible {
  outline: 2px solid var(--rv-brand); outline-offset: 1px;
}
.mm-rv2 .mm-rv2-bar--inline .mm-rv2-zone--narr .rtool.mm-tts-rate-cycle {
  font-variant-numeric: tabular-nums; min-width: 38px; justify-content: center;
}
/* Read 主 CTA 紧跟 NARRATION 之后，两者视觉连成一组 */
.mm-rv2 .mm-rv2-bar--inline .mm-tts-btn { margin-left: 0; }

/* ---------- 响应式 ---------- */
@media (max-width: 860px) {
  /* 进度条隐藏（旧规则），右侧改用 auto 边距贴右 */
  .mm-rv2 .mm-rv2-bar--inline .mm-rv2-zone--narr { margin-left: auto; }
}
@media (max-width: 620px) {
  .mm-rv2 .mm-rv2-bar--inline { top: 6px; margin-bottom: 10px; }
  .mm-rv2 .mm-rv2-bar--inline .mm-rv2-bar-in { min-height: 44px; padding: 5px 6px; gap: 5px; }
  .mm-rv2 .mm-rv2-bar--inline .mm-rv2-tools { gap: 4px; }
  .mm-rv2 .mm-rv2-bar--inline .rtool { font-size: 11px; padding: 4px 6px; }
  .mm-rv2 .mm-rv2-bar--inline .mm-rv2-zone--narr { padding: 2px 3px; }
  .mm-rv2 .mm-rv2-bar--inline .mm-rv2-zone--narr .rtool.mm-tts-cycle {
    font-size: 10.5px; padding: 3px 5px; max-width: 78px;
  }
  .mm-rv2 .mm-rv2-bar--inline .mm-display-panel {
    left: 6px; right: 6px; width: auto; max-width: none;
  }
}