/* =========================================================
   MandarinMiles · 首页 V2（蓝主色版 · Blue Dominant）
   ---------------------------------------------------------
   视觉基准：design-samples/home-v2-blue/（改色前后对照）
   作用域严格限定在 .mm-home-v2 内，不影响 Blocksy 原生
   头部 / 页脚 / Customizer 设置。

   【配色层级】蓝 = 主色，绿 / 紫 = 辅助色
   ---------------------------------------------------------
   · 主色（蓝）：Hero 与引言块的底色、CTA 渐变、主按钮、
     区块眉标、链接、卡片占位、统计数字第一顺位 —— 承担
     全页约九成视觉重量，深浅两档蓝即可撑起整站气质。
   · 辅助色（绿）：FREE 角标、图标块、绿系统计位、Hero 底部
     一处小光晕 —— 只做点缀，不再占据大面积。
   · 辅助色（紫）：PRO 角标、图标块、紫系统计位、演示窗高亮、
     CTA 渐变尾段 —— 与绿同为点缀层。
   · 靛蓝：蓝色系的第二顺位（模式四栏第四项），让四个条目
     各自可辨又整体收敛在蓝色家族内。
   · 橙色：整体移除（原 v2-f-orange / v2-m-orange 已废弃），
     遗留数据自动映射到靛蓝。

   【层级口诀】大面积 = 深浅蓝；小面积 = 绿紫点缀；
   按钮与链接 = 最亮的那一档蓝，保证可点击感最强。
   ========================================================= */

/* =========================================================
   1. 配色令牌（唯一来源）
   ---------------------------------------------------------
   所有色值收敛到此处，组件规则一律引用 var(--v2-*)，
   避免硬编码散落导致改色时漏改。

   【按角色命名，而不是按色阶命名】
   -------------------------------------------------------------
   同一个「绿」在不同位置要满足的对比度条件完全不同：
     · 绿底白字的小徽标（FREE 角标）→ 底色必须够深
     · 白底上的绿色文字（图标说明）→ 字色必须够深
     · 深色模式下的同一枚徽标 → 底色要转亮，文字要转深
   若只定义一档色阶，深色模式必然出现「亮底白字」的对比度塌陷。
   故每个色相拆成三个角色：
     --v2-{c}-fill   实心块底色（其上叠 --v2-{c}-on）
     --v2-{c}-on     实心块上的文字/图标色
     --v2-{c}-text   中性底上的文字色
   浅色模式：fill 深 / on 白；深色模式：fill 转亮 / on 转深墨。
   ========================================================= */
.mm-home-v2 {
  /* ---- 主色：蓝（Palette C · Azure Bright） ---- */
  --v2-blue-950: #06214B;
  --v2-blue-900: #0A2F6B;
  --v2-blue-800: #0E3F94;
  --v2-blue-700: #1555C4;
  --v2-blue-600: #1E6AE8;   /* 品牌主蓝：链接 / 强调 */
  --v2-blue-500: #4A8CF5;
  --v2-blue-400: #7DB0F8;
  --v2-blue-300: #AECDFB;
  --v2-blue-200: #D2E2FD;
  --v2-blue-100: #E7F0FE;
  --v2-blue-50:  #F5F9FF;

  /* ---- 辅助色：绿 ---- */
  --v2-green-700: #065F46;
  --v2-green-600: #047857;
  --v2-green-500: #10B981;
  --v2-green-400: #34D399;
  --v2-green-100: #D1FAE5;

  /* ---- 辅助色：紫 ---- */
  --v2-purple-700: #5B21B6;
  --v2-purple-600: #6D28D9;
  --v2-purple-500: #8B5CF6;
  --v2-purple-400: #A78BFA;
  --v2-purple-100: #EDE9FE;

  /* ---- 辅助色：靛（蓝色系第二顺位） ---- */
  --v2-indigo-700: #312E81;
  --v2-indigo-600: #4338CA;
  --v2-indigo-500: #6366F1;
  --v2-indigo-400: #818CF8;

  /* ---- 角色：蓝 ---- */
  --v2-blue-fill:   #1757D6;   /* 实心块底色 */
  --v2-blue-on:     #FFFFFF;   /* 实心块上的字 */
  --v2-blue-text:   #1555C4;   /* 中性底上的蓝字 */
  --v2-blue-tile-a: #1E6AE8;   /* 图标块渐变起 */
  --v2-blue-tile-b: #1448B4;   /* 图标块渐变止 */

  /* ---- 角色：绿 ---- */
  --v2-green-fill:   #047857;  /* 白字 5.5:1 */
  --v2-green-on:     #FFFFFF;
  --v2-green-text:   #047857;  /* 白底绿字 5.5:1 */
  --v2-green-tile-a: #0A8462;
  --v2-green-tile-b: #066046;

  /* ---- 角色：紫 ---- */
  --v2-purple-fill:   #6D28D9; /* 白字 7.1:1 */
  --v2-purple-on:     #FFFFFF;
  --v2-purple-text:   #6D28D9; /* 白底紫字 7.1:1 */
  --v2-purple-tile-a: #7C3AED;
  --v2-purple-tile-b: #5B21B6;

  /* ---- 角色：靛 ---- */
  --v2-indigo-fill:   #4338CA; /* 白字 7.9:1 */
  --v2-indigo-on:     #FFFFFF;
  --v2-indigo-text:   #4338CA; /* 白底靛字 7.9:1 */
  --v2-indigo-tile-a: #4F46E5;
  --v2-indigo-tile-b: #3730A3;

  /* ---- 角色：中国红（Hero 印章） ---- */
  --v2-seal-a:       #D81E2C;  /* 渐变起，白字 5.1:1 */
  --v2-seal-b:       #B3121B;  /* 渐变止，白字 7.0:1 */
  --v2-seal-on:      #FFFFFF;  /* 印章上的字 */

  /* ---- 中性 / 结构 ---- */
  --v2-ink:     #10233E;   /* 标题与正文 */
  --v2-body:    #1B3050;
  --v2-muted:   #5D6C88;   /* 次级 / 弱化文字 */
  --v2-line:    #DFE8F6;   /* 分隔线 */
  --v2-canvas:  #F6FAFF;   /* 页面基底（微蓝） */
  --v2-card:    #ffffff;
  --v2-on-white:#1757D6;   /* 白底上的蓝字（浅底 CTA 按钮） */

  /* ---- 语义渐变 ---- */
  /* Hero / 引言块：品牌蓝 → 靛 → 紫（蓝主导，紫收尾）。
     蓝色覆盖前六成面积，与「蓝色系主导」一致；紫色只作尾段点缀。 */
  --v2-grad-hero: linear-gradient(20.78deg,#1166F0 0%,#2E4FD8 46%,#6E00F8 100%);
  /* 底部 CTA：同族蓝 → 靛 → 紫，蓝色覆盖前六成，紫色收尾 */
  --v2-grad-cta: linear-gradient(112deg,#1166F0 0%,#2E4FD8 42%,#6E00F8 100%);
  /* 强调绿：仅用于「模拟界面里的朗读/喇叭」小控件，
     与阅读器里真实朗读按钮（--action-alt #1C7C70）同色，保持所见即所得。 */
  --v2-grad-btn: #1C7C70;
  --v2-grad-btn-ink: #FFFFFF;
  /* Hero 上的主 CTA：白色实心 + 深蓝字。
     实测彩色按钮压在蓝紫渐变上对比度仅 1.03–1.42:1（糊进背景），
     白色可达 5.17–7.09:1（AA）。 */
  --v2-hero-cta-bg: #FFFFFF;
  --v2-hero-cta-ink: #0B2A6B;
}
.mm-home-v2 *{box-sizing:border-box;margin:0;padding:0}
.mm-home-v2{background:var(--v2-canvas);color:var(--v2-ink);line-height:1.6;-webkit-font-smoothing:antialiased}
.mm-home-v2 a{text-decoration:none;color:inherit}
.mm-home-v2 img{max-width:100%;display:block}
.mm-home-v2 .v2-wrap{max-width:1338px;margin:0 auto;padding:0 24px}

/* ===== 标题 / 文本颜色兜底 =====
   Blocksy 全局给 h1/h2/h3 设了 color: var(--theme-heading-color)（深墨色）。
   这类「直接命中元素」的规则会压过区块的继承色 —— 结果是 Hero / 引用块 / CTA
   这类深底区块里的标题变成深色、几乎看不见（首行大标题实测 rgb(25,42,61)）。
   故在本作用域内显式指定颜色，不影响主题其它页面。 */
.mm-home-v2 .v2-hero h1{color:#fff}
.mm-home-v2 .v2-quote blockquote{color:#fff}
.mm-home-v2 .v2-final h2{color:#fff}
.mm-home-v2 .v2-final p{color:rgba(255,255,255,.86)}
.mm-home-v2 .v2-head h2{color:var(--v2-ink)}
.mm-home-v2 .v2-f h3{color:var(--v2-ink)}
.mm-home-v2 .v2-mode b{color:var(--v2-ink)}
.mm-home-v2 .v2-card .tt{color:var(--v2-ink)}
.mm-home-v2 .v2-more{color:var(--v2-blue-text)}

/* ===== 通用按钮 ===== */
.mm-home-v2 .v2-btn{display:inline-flex;align-items:center;gap:9px;padding:14px 27px;border-radius:999px;font-weight:800;font-size:14.5px;transition:transform .18s ease,filter .18s ease}
.mm-home-v2 .v2-btn:hover{transform:translateY(-2px)}
.mm-home-v2 .v2-btn-1{background:var(--v2-hero-cta-bg);color:var(--v2-hero-cta-ink);box-shadow:0 12px 30px rgba(8,26,60,.28)}
.mm-home-v2 .v2-btn-2{background:rgba(255,255,255,.10);color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.mm-home-v2 .v2-btn-2:hover{background:rgba(255,255,255,.18)}

/* ===== Hero =====
   底色：深蓝为主轴；
   光晕：左上大蓝（主）／右下紫（辅）／左下小绿（点缀，体量刻意压小）。

   背景图层（与页面横幅同构，自下而上）：
     .v2-hero-bg    背景图（可选，后台「页面横幅 → Home · 首页 Hero」上传）
     .v2-hero-grad  品牌渐变 / 光晕层（无背景图时由 .v2-hero 自身背景承担；
                    有背景图且勾选「保留原渐变」时，以低透明度品牌色罩在图上）
     .v2-hero-veil  遮罩层（.mm-pb-veil），强度由 --pb-veil 控制
   */
.mm-home-v2 .v2-hero{
  --v2-hero-grad-stack:
    radial-gradient(72% 58% at 12% 4%,rgba(255,255,255,.16),transparent 62%),
    radial-gradient(58% 60% at 96% 98%,rgba(17,238,146,.14),transparent 64%),
    radial-gradient(50% 42% at 26% 106%,rgba(255,255,255,.10),transparent 68%),
    var(--v2-grad-hero);
  --v2-hero-wash:
    radial-gradient(72% 58% at 12% 4%,rgba(255,255,255,.14),transparent 62%),
    radial-gradient(58% 60% at 96% 98%,rgba(17,238,146,.20),transparent 64%),
    radial-gradient(50% 42% at 26% 106%,rgba(255,255,255,.12),transparent 68%),
    linear-gradient(20.78deg,rgba(110,0,248,.30) 3.3%,rgba(86,60,233,.26) 27.67%,rgba(17,110,238,.30) 93.23%);
  position:relative;overflow:hidden;color:#fff;padding:74px 0 84px;
  background:var(--v2-hero-grad-stack)}
/* 品牌色罩：有背景图时勾选「保留原渐变」才输出这一层 */
.mm-home-v2 .v2-hero-grad{position:absolute;inset:0;z-index:1;background:var(--v2-hero-wash)}
/* 遮罩层要压在品牌色罩之上 */
.mm-home-v2 .v2-hero-veil{z-index:2}
.mm-home-v2 .v2-hero .glow-g{z-index:3}
.mm-home-v2 .v2-hero::before,.mm-home-v2 .v2-hero::after{z-index:3}
.mm-home-v2 .v2-hero::before{content:"";position:absolute;width:820px;height:820px;left:-260px;top:-360px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.16),transparent 72%)}
.mm-home-v2 .v2-hero::after{content:"";position:absolute;width:760px;height:760px;right:-240px;bottom:-420px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(17,238,146,.14),transparent 72%)}
.mm-home-v2 .v2-hero .glow-g{position:absolute;width:520px;height:520px;left:30%;bottom:-320px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.10),transparent 72%)}
.mm-home-v2 .v2-hero-top{display:flex;align-items:center;gap:14px;margin-bottom:26px;position:relative;z-index:4}
.mm-home-v2 .v2-hero-top .seal{width:42px;height:42px;border-radius:8px;background:linear-gradient(145deg,var(--v2-seal-a),var(--v2-seal-b));color:var(--v2-seal-on);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;font-family:var(--serif,'Songti SC',serif);flex:none}
.mm-home-v2 .v2-hero-top .eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.16em;color:rgba(255,255,255,.72)}
.mm-home-v2 .v2-hero-grid{display:grid;grid-template-columns:1.14fr .86fr;gap:44px;align-items:start;position:relative;z-index:4}
.mm-home-v2 .v2-hero h1{font-family:var(--serif,'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Songti SC',serif);
  font-size:clamp(36px,4vw,53px);line-height:1.16;font-weight:400;letter-spacing:-.02em}
.mm-home-v2 .v2-hero h1 em{font-style:normal;background:linear-gradient(96deg,#9BE7FF 0%,#C7F2E4 60%,#8CF5CF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.mm-home-v2 .v2-zh{font-family:var(--serif,'Songti SC','SimSun',serif);font-size:16px;color:var(--v2-blue-300);margin-top:12px;letter-spacing:.02em}
/* Hero 中文行的英文解释 */
.mm-home-v2 .v2-zh-en{font-size:14px;color:rgba(255,255,255,.88);margin-top:8px;line-height:1.62;max-width:560px}
.mm-home-v2 .v2-sub{font-size:16.5px;line-height:1.68;color:rgba(255,255,255,.72);max-width:520px;margin-top:16px}
.mm-home-v2 .v2-cta{display:flex;gap:13px;margin-top:30px;flex-wrap:wrap}
.mm-home-v2 .v2-stats{display:flex;gap:34px;margin-top:36px;padding-top:24px;border-top:1px solid rgba(255,255,255,.13);flex-wrap:wrap}
.mm-home-v2 .v2-stats div{display:flex;flex-direction:column}
.mm-home-v2 .v2-stats b{font-family:var(--serif,'Songti SC',serif);font-size:29px;font-weight:400;letter-spacing:-.01em}
.mm-home-v2 .v2-stats span{font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.5);text-transform:uppercase;margin-top:2px}
.mm-home-v2 .v2-stats .c-blue{color:var(--v2-blue-300)}
.mm-home-v2 .v2-stats .c-green{color:var(--v2-green-400)}
.mm-home-v2 .v2-stats .c-purple{color:var(--v2-purple-400)}

/* ===== 产品演示窗 ===== */
.mm-home-v2 .v2-mock-wrap{position:relative}
.mm-home-v2 .v2-mock{background:var(--v2-card);border-radius:16px;overflow:hidden;box-shadow:0 44px 96px rgba(3,8,22,.62);border:1px solid rgba(255,255,255,.14)}
.mm-home-v2 .mock-bar{display:flex;align-items:center;gap:9px;padding:12px 16px;background:#F2F6FD;border-bottom:1px solid var(--v2-line)}
.mm-home-v2 .mock-bar .dots{display:flex;gap:6px}
.mm-home-v2 .mock-bar .dots i{width:10px;height:10px;border-radius:50%;background:#D0DDF1}
.mm-home-v2 .mock-bar .url{flex:1;height:25px;border-radius:999px;background:#fff;border:1px solid var(--v2-line);font-size:11px;color:#8290A8;display:flex;align-items:center;padding:0 12px;gap:6px;overflow:hidden;white-space:nowrap}
.mm-home-v2 .mock-body{padding:24px 28px 26px;color:var(--v2-ink)}
.mm-home-v2 .mock-tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.mm-home-v2 .mock-tabs span{font-size:11px;font-weight:700;padding:5px 12px;border-radius:999px}
.mm-home-v2 .mock-tabs .on{background:linear-gradient(120deg,var(--v2-blue-tile-a),var(--v2-blue-tile-b));color:var(--v2-blue-on)}
.mm-home-v2 .mock-tabs .off{background:#ECF3FD;color:#8290A8}
.mm-home-v2 .mock-line{font-size:22px;line-height:2.1;margin-bottom:4px;font-weight:500}
.mm-home-v2 .mock-line rt{font-size:.52em;color:var(--v2-blue-text);font-weight:700}
.mm-home-v2 .mock-line .live{color:var(--v2-purple-text)}
.mm-home-v2 .mock-tools{display:flex;align-items:center;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid #ECF3FD}
.mm-home-v2 .mock-tools .pl{width:32px;height:32px;border-radius:50%;background:linear-gradient(120deg,var(--v2-blue-tile-a),var(--v2-blue-tile-b));color:var(--v2-blue-on);display:flex;align-items:center;justify-content:center;font-size:12px}
.mm-home-v2 .mock-tools .wave{display:flex;align-items:flex-end;gap:3px;height:19px}
.mm-home-v2 .mock-tools .wave i{width:3px;background:var(--v2-indigo-500);border-radius:2px;opacity:.5}
.mm-home-v2 .mock-tools .tt{font-size:11.5px;color:#8290A8;font-weight:600}
.mm-home-v2 .mock-pop{position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);background:#fff;color:var(--v2-ink);border-radius:11px;padding:10px 14px;box-shadow:0 16px 40px rgba(3,8,22,.34);font-size:12.5px;white-space:nowrap;border:1px solid var(--v2-line);max-width:92%;overflow:hidden;text-overflow:ellipsis}
/* —— 阅读器功能演示条（镜像真实吸顶工具条，纯装饰） —— */
.mm-home-v2 .mock-toolbar{display:flex;align-items:center;gap:6px;margin:-6px 0 14px;flex-wrap:wrap}
.mm-home-v2 .mock-toolbar .mt-play{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;padding:4px 11px;border-radius:999px;background:var(--v2-grad-btn);color:var(--v2-grad-btn-ink)}
.mm-home-v2 .mock-toolbar .mt-pill{font-size:10.5px;font-weight:600;padding:4px 10px;border-radius:999px;background:#ECF3FD;color:#5A6B85}
.mm-home-v2 .mock-toolbar .mt-pill.on{background:linear-gradient(120deg,var(--v2-blue-tile-a),var(--v2-blue-tile-b));color:var(--v2-blue-on)}
.mm-home-v2 .mock-toolbar .mock-prog{flex:1;min-width:46px;height:4px;border-radius:999px;background:#E3ECF9;overflow:hidden}
.mm-home-v2 .mock-toolbar .mock-prog i{display:block;height:100%;width:38%;border-radius:999px;background:linear-gradient(90deg,var(--v2-blue-tile-a),var(--v2-blue-tile-b))}
/* —— 词典弹窗演示卡（悬浮在句子区右侧空白上，左缘尖角箭头指向第一行 .live「苹果」） —— */
.mm-home-v2 .mock-dict{position:absolute;right:16px;top:152px;width:292px;z-index:6;display:grid;grid-template-columns:132px 1fr;grid-template-areas:"head ex" "def ex" "hsk ex";gap:3px 14px;
  background:var(--v2-card);border:1px solid var(--v2-line);border-radius:13px;box-shadow:0 26px 60px rgba(3,8,22,.32);padding:11px 15px 11px}
/* 左指向尖角：外层三角描边色 + 内层三角卡底色，双层叠出带边框的尖角 */
.mm-home-v2 .mock-dict::before{content:"";position:absolute;left:-8px;top:16px;width:0;height:0;
  border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:8px solid var(--v2-line)}
.mm-home-v2 .mock-dict::after{content:"";position:absolute;left:-6.5px;top:17.5px;width:0;height:0;
  border-top:5.5px solid transparent;border-bottom:5.5px solid transparent;border-right:7px solid var(--v2-card)}
.mm-home-v2 .mock-dict .md-head{grid-area:head;display:flex;align-items:baseline;gap:8px}
.mm-home-v2 .mock-dict .md-word{font-family:var(--serif,'Songti SC',serif);font-size:18px;font-weight:700;color:var(--v2-ink)}
.mm-home-v2 .mock-dict .md-py{font-size:11.5px;font-weight:700;color:var(--v2-blue-text)}
.mm-home-v2 .mock-dict .md-spk{margin-left:auto;width:24px;height:24px;flex:none;border-radius:50%;background:var(--v2-grad-btn);color:var(--v2-grad-btn-ink);display:flex;align-items:center;justify-content:center;font-size:10px;transform:translateY(3px)}
.mm-home-v2 .mock-dict .md-def{grid-area:def;font-size:12.5px;color:var(--v2-ink);margin:0;line-height:1.4}
.mm-home-v2 .mock-dict .md-def i{font-style:italic;color:#8290A8;font-size:11.5px;margin-right:3px}
.mm-home-v2 .mock-dict .md-hsk{grid-area:hsk;justify-self:start;display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.06em;color:var(--v2-blue-text);background:rgba(17,110,238,.10);border-radius:6px;padding:2px 7px;margin-top:2px}
.mm-home-v2 .mock-dict .md-ex{grid-area:ex;align-self:center;margin:0;padding-left:16px;border-left:1px dashed var(--v2-line)}
.mm-home-v2 .mock-dict .md-ex-zh{font-size:14px;line-height:1.85;margin:0;color:var(--v2-ink);font-weight:500}
.mm-home-v2 .mock-dict .md-ex-zh rt{font-size:.55em;margin-right:2px;color:var(--v2-blue-text);font-weight:600}
.mm-home-v2 .mock-dict .md-ex-en{font-size:11px;color:#8290A8;margin:2px 0 0}

/* ===== 区块通用 =====
   眉标统一用主蓝：每个区块都会出现，是「蓝色主导」最有效的锚点。 */
.mm-home-v2 .v2-sec{padding:78px 0}
.mm-home-v2 .v2-head{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;margin-bottom:38px;flex-wrap:wrap}
.mm-home-v2 .v2-head .k{display:block;font-size:11px;letter-spacing:.16em;font-weight:700;margin-bottom:11px;color:var(--v2-blue-text)}
.mm-home-v2 .v2-head h2{font-family:var(--serif,'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Songti SC',serif);
  font-size:clamp(30px,3.3vw,43px);font-weight:400;letter-spacing:-.015em;line-height:1.12}
.mm-home-v2 .v2-head p{font-size:15px;color:var(--v2-muted);margin-top:11px;max-width:520px}
.mm-home-v2 .v2-more{font-size:14px;font-weight:800;color:var(--v2-blue-text);white-space:nowrap;border:1.5px solid #D3E1F6;border-radius:999px;padding:9px 18px}
.mm-home-v2 .v2-more:hover{border-color:var(--v2-blue-text)}
.mm-home-v2 .v2-empty{padding:40px;text-align:center;color:var(--v2-muted);background:var(--v2-card);border:1px dashed #D3E1F6;border-radius:14px}

/* ===== 书库卡片网格 ===== */
.mm-home-v2 .v2-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.mm-home-v2 .v2-card{display:block}
.mm-home-v2 .v2-card .cover{position:relative;display:block;aspect-ratio:var(--thumb-ratio);border-radius:14px;overflow:hidden;background:linear-gradient(140deg,#DCE9FD,#F1F6FE);border:1px solid var(--v2-line);box-shadow:0 1px 3px rgba(16,26,46,.06),0 8px 24px rgba(16,26,46,.05);transition:transform .25s ease,box-shadow .25s ease}
.mm-home-v2 .v2-card:hover .cover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(16,26,46,.16)}
/* 封面内容（.mm-thumb-bg / .mm-thumb-img / .mm-thumb-ph）统一由 assets/css/thumb.css 提供：
   全图 contain + 同图模糊留边；无图时补首字占位。 */
.mm-home-v2 .v2-card .lv,.mm-home-v2 .v2-card .tg{position:absolute;top:9px;z-index:2;font-size:10px;font-weight:800;letter-spacing:.06em;padding:3px 8px;border-radius:999px}
.mm-home-v2 .v2-card .lv{left:9px;background:rgba(255,255,255,.94);color:var(--v2-ink)}
/* HSK 双标码：封面左下角（与 CEFR 左上对角分布，同 Library 卡的布局语言），
   描边胶囊与实心区分。数据源 inc/levels-map.php */
.mm-home-v2 .v2-card .lv.lv--hsk{top:auto;bottom:9px;background:rgba(255,255,255,.94);color:var(--v2-ink);box-shadow:inset 0 0 0 1.5px var(--v2-ink)}
.mm-home-v2 .v2-card .tg{right:9px}
.mm-home-v2 .v2-card .tg.free{background:var(--v2-green-fill);color:var(--v2-green-on)}
.mm-home-v2 .v2-card .tg.pro{background:var(--v2-purple-fill);color:var(--v2-purple-on)}
.mm-home-v2 .v2-card .tt{display:block;font-size:14.5px;font-weight:700;margin-top:10px;letter-spacing:-.01em}

/* ===== 引言 =====
   与 Hero 同族的深蓝底，光晕结构一致（左上大蓝 / 右下紫），
   两块深色区连成一条蓝色主线。 */
.mm-home-v2 .v2-quote{color:#fff;padding:84px 0;text-align:center;position:relative;overflow:hidden;
  background:
    radial-gradient(66% 84% at 14% 0%,rgba(255,255,255,.14),transparent 64%),
    linear-gradient(24deg,#563CE9 0%,#116EEE 88%)}
.mm-home-v2 .v2-quote::before{content:"";position:absolute;left:50%;top:-180px;width:640px;height:640px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.12),transparent 70%)}
.mm-home-v2 .v2-quote blockquote{font-family:var(--serif,'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Songti SC',serif);
  font-size:clamp(25px,3.2vw,40px);line-height:1.36;font-weight:400;max-width:860px;margin:0 auto;letter-spacing:-.01em;position:relative;z-index:2}
.mm-home-v2 .v2-quote .zh{display:block;font-size:18px;color:var(--v2-blue-300);margin-top:18px;font-family:var(--serif,'Songti SC',serif)}
/* 中文点缀句的英文解释（引言区）：中文下方一行小字英文 */
.mm-home-v2 .v2-quote .zh-en{display:block;font-size:14px;color:rgba(255,255,255,.78);margin-top:9px;line-height:1.6;max-width:640px;margin-left:auto;margin-right:auto}
.mm-home-v2 .v2-quote cite{display:block;margin-top:24px;font-style:normal;font-size:11.5px;letter-spacing:.14em;color:rgba(255,255,255,.5);position:relative;z-index:2}

/* ===== 学习工具区（六工具） =====
   卡片：图标字 + 名称 + 短标签 + 详细介绍（功能与用法）。
   描述文字较长，故用 3 列而非 6 列，保证可读性。 */
.mm-home-v2 .v2-tools-sec{background:var(--v2-card)}
.mm-home-v2 .v2-tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mm-home-v2 .v2-tool{display:flex;flex-direction:column;align-items:flex-start;gap:0;border:1px solid var(--v2-line);border-radius:16px;padding:26px 24px;background:var(--v2-canvas);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.mm-home-v2 a.v2-tool:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(16,26,46,.09);border-color:var(--v2-blue-300)}
.mm-home-v2 .v2-tool .ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;letter-spacing:.02em;margin-bottom:15px}
.mm-home-v2 .v2-tool b{font-size:17px;font-weight:800;letter-spacing:-.01em;margin-bottom:5px}
.mm-home-v2 .v2-tool .tg{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}
.mm-home-v2 .v2-tool .dc{font-size:14px;line-height:1.68;color:var(--v2-muted)}
.mm-home-v2 .v2-tool-blue .ic{background:linear-gradient(140deg,var(--v2-blue-tile-a),var(--v2-blue-tile-b));color:var(--v2-blue-on)}
.mm-home-v2 .v2-tool-blue .tg{color:var(--v2-blue-text)}
.mm-home-v2 .v2-tool-green .ic{background:linear-gradient(140deg,var(--v2-green-tile-a),var(--v2-green-tile-b));color:var(--v2-green-on)}
.mm-home-v2 .v2-tool-green .tg{color:var(--v2-green-text)}
.mm-home-v2 .v2-tool-purple .ic{background:linear-gradient(140deg,var(--v2-purple-tile-a),var(--v2-purple-tile-b));color:var(--v2-purple-on)}
.mm-home-v2 .v2-tool-purple .tg{color:var(--v2-purple-text)}
.mm-home-v2 .v2-tool-indigo .ic{background:linear-gradient(140deg,var(--v2-indigo-tile-a),var(--v2-indigo-tile-b));color:var(--v2-indigo-on)}
.mm-home-v2 .v2-tool-indigo .tg{color:var(--v2-indigo-text)}
/* 旧版橙色的兼容别名 */
.mm-home-v2 .v2-tool-orange .ic{background:linear-gradient(140deg,var(--v2-indigo-tile-a),var(--v2-indigo-tile-b));color:var(--v2-indigo-on)}
.mm-home-v2 .v2-tool-orange .tg{color:var(--v2-indigo-text)}

/* ===== 设计决策三栏 =====
   蓝 → 绿 → 紫：一个主色 + 两个辅助色，各占一格。 */
.mm-home-v2 .v2-feat{padding:78px 0;background:var(--v2-card)}
.mm-home-v2 .v2-fgrid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--v2-line)}
.mm-home-v2 .v2-f{padding:34px 34px 34px 0;border-bottom:1px solid var(--v2-line)}
.mm-home-v2 .v2-f:nth-child(3n+2){padding-left:34px;border-left:1px solid var(--v2-line)}
.mm-home-v2 .v2-f:nth-child(3n+3){padding-left:34px;border-left:1px solid var(--v2-line)}
.mm-home-v2 .v2-f .ic{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;margin-bottom:14px}
.mm-home-v2 .v2-f h3{font-family:var(--serif,'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Songti SC',serif);font-size:23px;font-weight:400;margin-bottom:10px}
.mm-home-v2 .v2-f p{font-size:14.5px;color:var(--v2-muted);line-height:1.66}
.mm-home-v2 .v2-f .hz{display:block;font-family:var(--serif,'Songti SC',serif);font-size:15px;margin-top:14px}
/* 中文点缀句的英文解释：
   用户反馈「学中文，最难的是坚持。要加一个英文的解释把，不然他们也看不懂」。
   中文原句保留（它是内容），下面跟一行小字英文译文，让不懂中文的读者也能读到意思。 */
.mm-home-v2 .v2-f .hz-en{display:block;font-size:13px;color:var(--v2-muted);line-height:1.6;margin-top:6px;opacity:.92}
.mm-home-v2 .v2-f-blue .ic{background:linear-gradient(140deg,var(--v2-blue-tile-a),var(--v2-blue-tile-b));color:var(--v2-blue-on)}
.mm-home-v2 .v2-f-blue .hz{color:var(--v2-blue-text)}
.mm-home-v2 .v2-f-green .ic{background:linear-gradient(140deg,var(--v2-green-tile-a),var(--v2-green-tile-b));color:var(--v2-green-on)}
.mm-home-v2 .v2-f-green .hz{color:var(--v2-green-text)}
.mm-home-v2 .v2-f-purple .ic{background:linear-gradient(140deg,var(--v2-purple-tile-a),var(--v2-purple-tile-b));color:var(--v2-purple-on)}
.mm-home-v2 .v2-f-purple .hz{color:var(--v2-purple-text)}
.mm-home-v2 .v2-f-indigo .ic{background:linear-gradient(140deg,var(--v2-indigo-tile-a),var(--v2-indigo-tile-b));color:var(--v2-indigo-on)}
.mm-home-v2 .v2-f-indigo .hz{color:var(--v2-indigo-text)}
/* 旧版橙色的兼容别名：历史数据若仍为 orange，视觉降级为靛蓝（蓝色系内） */
.mm-home-v2 .v2-f-orange .ic{background:linear-gradient(140deg,var(--v2-indigo-tile-a),var(--v2-indigo-tile-b));color:var(--v2-indigo-on)}
.mm-home-v2 .v2-f-orange .hz{color:var(--v2-indigo-text)}

/* ===== 阅读方式四栏 =====
   蓝 / 绿 / 紫 / 靛 —— 蓝色占两席，绿色与紫色各一席，合计仍以蓝为骨架。 */
.mm-home-v2 .v2-modes{padding:78px 0}
.mm-home-v2 .v2-mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.mm-home-v2 .v2-mode{border:1px solid var(--v2-line);border-radius:16px;padding:24px 22px;background:var(--v2-card);transition:transform .2s ease,box-shadow .2s ease}
.mm-home-v2 .v2-mode:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(16,26,46,.09)}
.mm-home-v2 .v2-mode i{display:block;font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.12em;margin-bottom:11px}
.mm-home-v2 .v2-mode b{display:block;font-size:16px;font-weight:800;margin-bottom:7px}
.mm-home-v2 .v2-mode span{font-size:13.5px;color:var(--v2-muted);line-height:1.55}
.mm-home-v2 .v2-m-blue i{color:var(--v2-blue-text)}
.mm-home-v2 .v2-m-green i{color:var(--v2-green-text)}
.mm-home-v2 .v2-m-purple i{color:var(--v2-purple-text)}
.mm-home-v2 .v2-m-indigo i{color:var(--v2-indigo-text)}
.mm-home-v2 .v2-m-orange i{color:var(--v2-indigo-text)}

/* ===== 底部 CTA =====
   蓝 → 靛 → 紫单向渐变：蓝色覆盖前六成，紫色收尾，绿色不进入大面积渐变。 */
.mm-home-v2 .v2-final{background:var(--v2-grad-cta);color:#fff;padding:78px 0;text-align:center}
.mm-home-v2 .v2-final h2{font-family:var(--serif,'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Songti SC',serif);
  font-size:clamp(30px,3.9vw,48px);font-weight:400;letter-spacing:-.015em}
.mm-home-v2 .v2-final p{font-size:16px;color:rgba(255,255,255,.86);margin:16px auto 30px;max-width:500px}
.mm-home-v2 .v2-final .v2-btn-1{background:var(--v2-hero-cta-bg);color:var(--v2-hero-cta-ink);box-shadow:0 12px 30px rgba(8,26,60,.28)}

/* 条目数量自适应（后台增删后列数跟着变） */
.mm-home-v2 .v2-cols-1{grid-template-columns:1fr}
.mm-home-v2 .v2-cols-2{grid-template-columns:repeat(2,1fr)}
.mm-home-v2 .v2-cols-3{grid-template-columns:repeat(3,1fr)}
.mm-home-v2 .v2-cols-4{grid-template-columns:repeat(4,1fr)}
.mm-home-v2 .v2-cols-5{grid-template-columns:repeat(5,1fr)}
.mm-home-v2 .v2-cols-6{grid-template-columns:repeat(3,1fr)}

/* ===== 响应式 ===== */
@media (max-width:1000px){
  .mm-home-v2 .v2-hero-grid{grid-template-columns:1fr;gap:44px}
  .mm-home-v2 .v2-cards{grid-template-columns:repeat(3,1fr)}
  .mm-home-v2 .v2-tgrid{grid-template-columns:repeat(2,1fr)}
  .mm-home-v2 .v2-mgrid{grid-template-columns:repeat(2,1fr)}
  .mm-home-v2 .v2-fgrid{grid-template-columns:1fr}
  .mm-home-v2 .v2-f,.mm-home-v2 .v2-f:nth-child(3n+2),.mm-home-v2 .v2-f:nth-child(3n+3){padding-left:0;border-left:0}
  .mm-home-v2 .v2-cols-4,.mm-home-v2 .v2-cols-5{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .mm-home-v2 .v2-wrap{padding:0 18px}
  .mm-home-v2 .v2-hero{padding:54px 0 66px}
  .mm-home-v2 .mock-dict{left:16px;right:16px;width:auto;grid-template-columns:1fr;grid-template-areas:"head" "def" "hsk" "ex"}
  .mm-home-v2 .mock-dict .md-ex{border-left:0;border-top:1px dashed var(--v2-line);padding-left:0;padding-top:8px}
  .mm-home-v2 .v2-cards{grid-template-columns:repeat(2,1fr);gap:16px}
  .mm-home-v2 .v2-tgrid{grid-template-columns:1fr;gap:16px}
  .mm-home-v2 .v2-mgrid,.mm-home-v2 .v2-cols-3,.mm-home-v2 .v2-cols-4,.mm-home-v2 .v2-cols-5{grid-template-columns:1fr}
  .mm-home-v2 .v2-stats{gap:22px}
  .mm-home-v2 .v2-head h2{font-size:28px}
}

/* =========================================================
   移动端 Hero 瘦身（2026-11-13）
   ---------------------------------------------------------
   实测 390×844 视口下 Hero 占 1230px（1.46 屏），真正的书库区要滚到
   y=1292 才出现 —— 用户打开首页看不到任何一本书。

   收敛三处「与核心内容无关」的宣传信息：
     ① 产品演示窗 462px → 折叠成一行「See how it works」按钮（点击展开）
     ② .v2-zh-en 48px  → 隐藏（它是 .v2-zh 那句中文的英文回译，
        与大标题 + .v2-sub 三重重复）
     ③ Hero 上下留白 120px → 76px，标题字号略收
   合计省约 620px，首屏即可见到「New in the library」与书卡。
   ========================================================= */
@media (max-width:700px){
  .mm-home-v2 .v2-hero{padding:36px 0 44px}
  .mm-home-v2 .v2-hero h1{font-size:clamp(28px,8.4vw,38px);line-height:1.12;margin-bottom:12px}
  /* 英文回译与中文原句 + 英文段落三重重复，窄屏只保留中文原句 */
  .mm-home-v2 .v2-zh-en{display:none}
  .mm-home-v2 .v2-hero-top{margin-bottom:18px}
  .mm-home-v2 .v2-mock-wrap{margin-top:4px}
  /* 演示窗的折叠按钮：白字（压在 Hero 渐变上），不用浅蓝底 */
  .mm-home-v2 .v2-mock-wrap .mm-collapse-toggle{
    color:#fff;
    background:rgba(255,255,255,.14);
    border-color:rgba(255,255,255,.38);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  }
  .mm-home-v2 .v2-mock-wrap .mm-collapse-toggle:hover{background:rgba(255,255,255,.22)}
}

/* =========================================================
   2. 暗色模式
   ---------------------------------------------------------
   深色底同样向蓝偏移（不再是近黑的墨蓝）。
   角色令牌整体翻转：
     · 实心块底色转亮 → 其上的字必须转深墨，否则「亮底白字」对比度塌陷；
     · 中性底上的彩色文字转亮，才能在深底上读得清。
   手动切换（data-theme="dark"）与系统跟随（prefers-color-scheme）
   共用同一套值，故把两组选择器并成一个规则块，避免两处漂移。
   ========================================================= */
:root[data-theme="dark"] .mm-home-v2{
  --v2-blue-950:#050D1F;
  --v2-blue-900:#08152C;
  --v2-blue-800:#0B2148;
  --v2-blue-700:#123066;
  --v2-blue-600:#5B97F9;
  --v2-blue-500:#7FB2FC;
  --v2-blue-400:#9CC4FB;
  --v2-blue-300:#B9D5FD;
  --v2-green-700:#34D399;
  --v2-green-600:#10B981;
  --v2-green-500:#34D399;
  --v2-green-400:#6EE7B7;
  --v2-purple-700:#C4B5FD;
  --v2-purple-600:#A78BFA;
  --v2-purple-500:#C4B5FD;
  --v2-purple-400:#DDD6FE;
  --v2-indigo-700:#A5B4FC;
  --v2-indigo-600:#818CF8;
  --v2-indigo-500:#A5B4FC;
  --v2-indigo-400:#C7D2FE;
  --v2-ink:#E8EEF7;
  --v2-body:#D4DEEC;
  --v2-muted:#9AA7BC;
  --v2-line:#2A3A5C;
  --v2-canvas:#0A1428;
  --v2-card:#111C33;
  --v2-on-white:#1A56C4;   /* 白底按钮上的蓝字：深底模式下也要达标 */

  /* ---- 角色令牌翻转：fill 转亮，on 转深墨 ---- */
  --v2-blue-fill:#5B97F9;
  --v2-blue-on:#081A2E;
  --v2-blue-text:#9CC4FB;
  --v2-blue-tile-a:#7FB2FC;
  --v2-blue-tile-b:#5B97F9;
  --v2-green-fill:#10B981;
  --v2-green-on:#081A2E;
  --v2-green-text:#34D399;
  --v2-green-tile-a:#34D399;
  --v2-green-tile-b:#10B981;
  --v2-purple-fill:#A78BFA;
  --v2-purple-on:#081A2E;
  --v2-purple-text:#C4B5FD;
  --v2-purple-tile-a:#C4B5FD;
  --v2-purple-tile-b:#A78BFA;
  --v2-indigo-fill:#818CF8;
  --v2-indigo-on:#081A2E;
  --v2-indigo-text:#A5B4FC;
  --v2-indigo-tile-a:#A5B4FC;
  --v2-indigo-tile-b:#818CF8;

  --v2-grad-hero:linear-gradient(134deg,#071E43 0%,#0C3576 34%,#1650AE 66%,#202F8E 100%);
  --v2-grad-cta:linear-gradient(112deg,#0D3A80 0%,#1A51B8 30%,#2C68D8 58%,#4530AE 85%,#541FAA 100%);
  --v2-grad-btn:#1F7F63;
  --v2-grad-btn-ink:#fff;
  --v2-hero-cta-bg:#FFFFFF;
  --v2-hero-cta-ink:#0B2A6B;
  background:var(--v2-canvas);color:var(--v2-ink);
}
/* 系统跟随深色：仅在用户未显式选择时生效 */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]) .mm-home-v2{
  --v2-blue-950:#050D1F;
  --v2-blue-900:#08152C;
  --v2-blue-800:#0B2148;
  --v2-blue-700:#123066;
  --v2-blue-600:#5B97F9;
  --v2-blue-500:#7FB2FC;
  --v2-blue-400:#9CC4FB;
  --v2-blue-300:#B9D5FD;
  --v2-green-700:#34D399;
  --v2-green-600:#10B981;
  --v2-green-500:#34D399;
  --v2-green-400:#6EE7B7;
  --v2-purple-700:#C4B5FD;
  --v2-purple-600:#A78BFA;
  --v2-purple-500:#C4B5FD;
  --v2-purple-400:#DDD6FE;
  --v2-indigo-700:#A5B4FC;
  --v2-indigo-600:#818CF8;
  --v2-indigo-500:#A5B4FC;
  --v2-indigo-400:#C7D2FE;
  --v2-ink:#E8EEF7;
  --v2-body:#D4DEEC;
  --v2-muted:#9AA7BC;
  --v2-line:#2A3A5C;
  --v2-canvas:#0A1428;
  --v2-card:#111C33;
  --v2-on-white:#1A56C4;   /* 白底按钮上的蓝字：深底模式下也要达标 */

  /* ---- 角色令牌翻转：fill 转亮，on 转深墨 ---- */
  --v2-blue-fill:#5B97F9;
  --v2-blue-on:#081A2E;
  --v2-blue-text:#9CC4FB;
  --v2-blue-tile-a:#7FB2FC;
  --v2-blue-tile-b:#5B97F9;
  --v2-green-fill:#10B981;
  --v2-green-on:#081A2E;
  --v2-green-text:#34D399;
  --v2-green-tile-a:#34D399;
  --v2-green-tile-b:#10B981;
  --v2-purple-fill:#A78BFA;
  --v2-purple-on:#081A2E;
  --v2-purple-text:#C4B5FD;
  --v2-purple-tile-a:#C4B5FD;
  --v2-purple-tile-b:#A78BFA;
  --v2-indigo-fill:#818CF8;
  --v2-indigo-on:#081A2E;
  --v2-indigo-text:#A5B4FC;
  --v2-indigo-tile-a:#A5B4FC;
  --v2-indigo-tile-b:#818CF8;

  --v2-grad-hero:linear-gradient(134deg,#071E43 0%,#0C3576 34%,#1650AE 66%,#202F8E 100%);
  --v2-grad-cta:linear-gradient(112deg,#0D3A80 0%,#1A51B8 30%,#2C68D8 58%,#4530AE 85%,#541FAA 100%);
  --v2-grad-btn:#1F7F63;
  --v2-grad-btn-ink:#fff;
  --v2-hero-cta-bg:#FFFFFF;
  --v2-hero-cta-ink:#0B2A6B;
  background:var(--v2-canvas);color:var(--v2-ink);
  }
}
/* ---- 深色下的元素级覆写（卡片、演示窗等需要独立底色的部件） ---- */
:root[data-theme="dark"] .mm-home-v2 .v2-sec,
:root[data-theme="dark"] .mm-home-v2 .v2-modes{background:var(--v2-canvas)}
:root[data-theme="dark"] .mm-home-v2 .v2-feat{background:var(--v2-card)}
:root[data-theme="dark"] .mm-home-v2 .v2-tools-sec{background:var(--v2-card)}
:root[data-theme="dark"] .mm-home-v2 .v2-tool{background:var(--v2-canvas)}
:root[data-theme="dark"] .mm-home-v2 .v2-card .cover{background:linear-gradient(140deg,#0D2148,#111C33);border-color:var(--v2-line)}
/* 级别徽标压在书封照片上：必须不透明，否则照片亮部会透上来吃掉对比度 */
:root[data-theme="dark"] .mm-home-v2 .v2-card .lv{background:#16233F;color:var(--v2-ink)}
:root[data-theme="dark"] .mm-home-v2 .v2-more{border-color:var(--v2-line);color:var(--v2-blue-text)}
:root[data-theme="dark"] .mm-home-v2 .v2-empty{background:var(--v2-card);border-color:var(--v2-line);color:var(--v2-muted)}
:root[data-theme="dark"] .mm-home-v2 .mock-bar{background:#0D2148;border-color:var(--v2-line)}
:root[data-theme="dark"] .mm-home-v2 .mock-bar .url{background:#111C33;border-color:var(--v2-line);color:#8492AC}
:root[data-theme="dark"] .mm-home-v2 .mock-tabs .off{background:#16233F;color:#8492AC}
:root[data-theme="dark"] .mm-home-v2 .mock-tools{border-color:#16233F}
:root[data-theme="dark"] .mm-home-v2 .mock-pop{background:#111C33;color:var(--v2-ink);border-color:var(--v2-line)}
:root[data-theme="dark"] .mm-home-v2 .mock-toolbar .mt-pill{background:#16233F;color:#8492AC}
:root[data-theme="dark"] .mm-home-v2 .mock-toolbar .mock-prog{background:#16233F}
:root[data-theme="dark"] .mm-home-v2 .mock-dict .md-def i,
:root[data-theme="dark"] .mm-home-v2 .mock-dict .md-ex-en{color:#8492AC}
:root[data-theme="dark"] .mm-home-v2 .v2-quote{
  background:
    radial-gradient(66% 84% at 14% 0%,rgba(37,99,235,.36),transparent 64%),
    radial-gradient(54% 72% at 92% 100%,rgba(109,40,217,.15),transparent 64%),
    linear-gradient(134deg,#071E43 0%,#0C3576 34%,#1650AE 66%,#202F8E 100%)
}
:root[data-theme="dark"] .mm-home-v2 .v2-quote::before{
  background: radial-gradient(closest-side,rgba(109,40,217,.15),transparent 70%)
}
:root[data-theme="dark"] .mm-home-v2 .v2-btn-1{
  box-shadow: 0 12px 30px rgba(3,8,22,.5)
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]) .mm-home-v2 .v2-sec,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .mm-home-v2 .v2-modes{background:var(--v2-canvas)}
  :root:not([data-theme="light"]):not([data-theme="dark"]) .mm-home-v2 .v2-feat{background:var(--v2-card)}
  :root:not([data-theme="light"]):not([data-theme="dark"]) .mm-home-v2 .v2-tools-sec{background:var(--v2-card)}
  :root:not([data-theme="light"]):not([data-theme="dark"]) .mm-home-v2 .v2-tool{background:var(--v2-canvas)}
  :root:not([data-theme="light"]):not([data-theme="dark"]) .mm-home-v2 .v2-card .cover{background:linear-gradient(140deg,#0D2148,#111C33);border-color:var(--v2-line)}
  :root:not([data-theme="light"]):not([data-theme="dark"]) .mm-home-v2 .v2-card .lv{background:#16233F;color:var(--v2-ink)}
  :root:not([data-theme="light"]):not([data-theme="dark"]) .mm-home-v2 .v2-more{border-color:var(--v2-line);color:var(--v2-blue-text)}
  :root:not([data-theme="light"]):not([data-theme="dark"]) .mm-home-v2 .v2-empty{background:var(--v2-card);border-color:var(--v2-line);color:var(--v2-muted)}
  :root:not([data-theme="light"]):not([data-theme="dark"]) .mm-home-v2 .mock-bar{background:#0D2148;border-color:var(--v2-line)}
  :root:not([data-theme="light"]):not([data-theme="dark"]) .mm-home-v2 .mock-bar .url{background:#111C33;border-color:var(--v2-line);color:#8492AC}
  :root:not([data-theme="light"]):not([data-theme="dark"]) .mm-home-v2 .mock-tabs .off{background:#16233F;color:#8492AC}
  :root:not([data-theme="light"]):not([data-theme="dark"]) .mm-home-v2 .mock-tools{border-color:#16233F}
  :root:not([data-theme="light"]):not([data-theme="dark"]) .mm-home-v2 .mock-pop{background:#111C33;color:var(--v2-ink);border-color:var(--v2-line)}
  :root:not([data-theme="light"]):not([data-theme="dark"]) .mm-home-v2 .mock-toolbar .mt-pill{background:#16233F;color:#8492AC}
  :root:not([data-theme="light"]):not([data-theme="dark"]) .mm-home-v2 .mock-toolbar .mock-prog{background:#16233F}
  :root:not([data-theme="light"]):not([data-theme="dark"]) .mm-home-v2 .mock-dict .md-def i,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .mm-home-v2 .mock-dict .md-ex-en{color:#8492AC}
  :root:not([data-theme="light"]):not([data-theme="dark"]) .mm-home-v2 .v2-quote{
    background:
      radial-gradient(66% 84% at 14% 0%,rgba(37,99,235,.36),transparent 64%),
      radial-gradient(54% 72% at 92% 100%,rgba(109,40,217,.15),transparent 64%),
      linear-gradient(134deg,#071E43 0%,#0C3576 34%,#1650AE 66%,#202F8E 100%)
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .mm-home-v2 .v2-quote::before{
    background: radial-gradient(closest-side,rgba(109,40,217,.15),transparent 70%)
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .mm-home-v2 .v2-btn-1{
    box-shadow: 0 12px 30px rgba(3,8,22,.5)
  }
}

/* =========================================================
   3. 横向滚动 · 按身份浏览（受众 / 免费 / 全部）
   ---------------------------------------------------------
   复用 .v2-card（封面图 + 标题 + 级别/FREE 角标）。
   结构：标签栏(.v2-rtabs) + 左右箭头(.v2-rnav) + 面板(.v2-rail)，
   每个面板内一条横滑轨道(.v2-rail-track)。标签切换与滚动由模板内联 JS 处理。
   颜色全部走 var(--v2-*) 令牌，深色模式随变量翻转自动适配。
   ========================================================= */
.mm-home-v2 .v2-rails-sec{background:var(--v2-card)}
.mm-home-v2 .v2-rails{margin-top:4px}
.mm-home-v2 .v2-rails-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:26px;flex-wrap:wrap}
.mm-home-v2 .v2-rtabs{display:flex;gap:10px;flex-wrap:wrap}
.mm-home-v2 .v2-rtab{font:inherit;cursor:pointer;border:1.5px solid var(--v2-line);background:var(--v2-card);color:var(--v2-muted);font-weight:700;font-size:13.5px;padding:9px 18px;border-radius:999px;transition:all .18s ease;white-space:nowrap}
.mm-home-v2 .v2-rtab:hover{border-color:var(--v2-blue-300);color:var(--v2-blue-text)}
.mm-home-v2 .v2-rtab.is-active{background:linear-gradient(120deg,var(--v2-blue-tile-a),var(--v2-blue-tile-b));border-color:transparent;color:#fff;box-shadow:0 8px 20px rgba(17,102,240,.22)}
.mm-home-v2 .v2-rnav{display:flex;gap:8px;flex:none}
.mm-home-v2 .v2-rnav-btn{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--v2-line);background:var(--v2-card);color:var(--v2-blue-text);font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .18s ease}
.mm-home-v2 .v2-rnav-btn:hover{border-color:var(--v2-blue-text);background:var(--v2-blue-50)}
.mm-home-v2 .v2-rail{display:none}
.mm-home-v2 .v2-rail.is-active{display:block}
.mm-home-v2 .v2-rail-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x proximity;padding:8px 2px 20px;scrollbar-width:thin;scrollbar-color:var(--v2-line) transparent}
/* 匀速自动滚动时必须关掉 proximity 吸附：逐帧写 scrollLeft 会被浏览器拉回卡片边界，造成抖动/卡顿。
   该类由模板内联 JS 仅在确实启用了自动滚动时添加，手动模式仍保留吸附。 */
.mm-home-v2 .v2-rails.is-autoscroll .v2-rail-track{scroll-snap-type:none}
.mm-home-v2 .v2-rail-track > .v2-card{flex:0 0 232px;max-width:232px;scroll-snap-align:start}
.mm-home-v2 .v2-rail-track::-webkit-scrollbar{height:8px}
.mm-home-v2 .v2-rail-track::-webkit-scrollbar-thumb{background:var(--v2-line);border-radius:999px}
.mm-home-v2 .v2-rail-track::-webkit-scrollbar-track{background:transparent}
.mm-home-v2 .v2-rail-empty{color:var(--v2-muted);padding:30px 4px}
/* 稀疏轨道兜底占位卡：虚线框 + 居中提示，让 1~2 张卡的轨道看起来是「成长中」而非「没加载完」。 */
.mm-home-v2 .v2-card.v2-card--ghost{cursor:default}
.mm-home-v2 .v2-card.v2-card--ghost .cover{background:transparent;border:1.5px dashed var(--v2-line);box-shadow:none;display:flex;align-items:center;justify-content:center}
.mm-home-v2 .v2-card.v2-card--ghost .cover::after{content:"";width:34px;height:34px;border-radius:50%;border:2px dashed var(--v2-line)}
.mm-home-v2 .v2-card.v2-card--ghost .tt{color:var(--v2-muted);text-align:center;font-weight:700}

/* 深色模式：激活标签保持白字、箭头 hover 用深蓝底（变量已翻转，仅补强对比） */
:root[data-theme="dark"] .mm-home-v2 .v2-rtab.is-active{color:#fff}
:root[data-theme="dark"] .mm-home-v2 .v2-rnav-btn:hover{background:var(--v2-blue-950)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]) .mm-home-v2 .v2-rtab.is-active{color:#fff}
  :root:not([data-theme="light"]):not([data-theme="dark"]) .mm-home-v2 .v2-rnav-btn:hover{background:var(--v2-blue-950)}
}

/* 移动端：卡片略窄，箭头换行后仍可用 */
@media (max-width:640px){
  .mm-home-v2 .v2-rail-track > .v2-card{flex-basis:180px;max-width:180px}
  .mm-home-v2 .v2-rnav{order:2}
}

/* ===== 2026-11-13 PWA / 高密度屏窄视口修复（用户报「字很大、右侧被切」）=====
   320~360 CSS px 时 .v2-hero-grid 的 1fr 会被子项 min-content 撑到 346px，
   父级 .v2-hero{overflow:hidden} 把右侧文字整块裁掉。Android「显示大小」调大
   或 PWA standalone 让 layout viewport 落到这个区间时必现。
   minmax(0,1fr) + min-width:0 锁死列宽，配合随视口收缩的字号与 anywhere 断行。 */
@media (max-width:480px){
  .mm-home-v2 .v2-hero-grid{grid-template-columns:minmax(0,1fr);min-width:0}
  .mm-home-v2 .v2-hero-grid > *{min-width:0;max-width:100%}
  .mm-home-v2 .v2-hero h1{font-size:clamp(26px,8vw,32px);overflow-wrap:anywhere}
  .mm-home-v2 .v2-hero-top .eyebrow{font-size:10.5px;letter-spacing:.1em;overflow-wrap:anywhere}
  .mm-home-v2 .v2-zh{font-size:15px}
  .mm-home-v2 .v2-zh-en,.mm-home-v2 .v2-sub{font-size:clamp(13.5px,3.8vw,15px);overflow-wrap:anywhere}
}