/* ==========================================================================
   萌安我学 · 官网设计系统  aiwoxue-theme.css
   风格方向 D：米白纸底 #F6F3EB + 深蓝 #173B5C + 暖橙 #E8713C
   借方向 A 手法：纸纹 + 印章 + 中文衬线（思源宋体）

   为什么单独一个文件而不是改 style.css：
     style.css 是旧的"深空科技风"（深底 #07051C + 紫 + 柠檬黄），还挂着
     定制页 / 体验自制页 / 扫码登录页 / 会员中心页 四套页面。这里用**同名类名**
     重定义一遍，本文件在 style.css 之后加载 → 同等特异性下后来者胜，
     四个老页面自动跟着换肤，不必一页一页改。

   ⚠ 本文件不写任何 js 行为，只做视觉；行内样式（JS 拼串产生的）不在覆盖范围内。
   ========================================================================== */

/* ---------- 0. 字体：**一律用系统字体，零外部请求** ----------
   ⚠⚠ 事故记录（2026-09-19）：这里原本挂着两个 `@import` 拉 Google Fonts
      （fonts.loli.net + fonts.googleapis.com）。改版上线后站点"打不开 / 很慢 /
      经常网络连接错误"，**元凶就是这两行**：

      1. `@import` 是**阻塞渲染**的 —— 浏览器必须等这两个外部 CSS 返回，
         才认为 aiwoxue-theme.css 加载完毕。而大陆多数网络连不上这两个域名，
         请求会一直挂到 TCP 超时（几十秒）→ 这段时间页面**全白**。
      2. 第二波：字体 CSS 一旦拿到，里面是思源字体的**分片**
         （unicode-range 按码点切成几十份 WOFF2），页面会再去 fonts.gstatic.com
         拉**几十个**请求。这些请求不阻塞首屏，但会让页面的 load 迟迟不结束 ——
         标签页一直转圈，体感就是"卡住 / 打不开"。

   ⚠ 为什么本地测不出来：在我这台机器上三个字体域名都是 200（0.4~1.1s），
     本地渲染 + 无头浏览器审计**全绿** —— 但用户的网络不通。
     **"我这儿好"不等于"线上好"。**
   ⚠ 正确判据 = **线上真实发出的请求列表 + 首次渲染时间**
     （见 `_tools/_live_net.mjs`），不是本地渲染结果。

   ⚠ 实测（`_tools/_live_net.mjs --block-fonts --delay=12000`，把境外域名阻断 12 秒）：
     首页 FCP **13.3s** / 类目页 **13.0s** / 详情页 **14.4s** —— 全部白屏 13 秒以上；
     同一脚本不加阻断时 FCP **< 1s**。**白屏时长 ≈ 境外域名的超时时长。**
   ⚠ 顺带关掉了 WordPress 默认的 emoji 检测脚本（它去 s.w.org 拉资源，首页 11 个请求），
     见 functions.php 开头的说明。

   → 结论：字体只按"用户机器上装了什么"排，**不产生任何一个网络请求**。
     观感由字重 / 字距 / 字号 / 颜色承担，不再依赖 webfont。 */

/* ---------- 1. 设计令牌 ---------- */
:root {
    /* 纸与墨（2026-10-02 光域二稿：原纸墨暖调全站退役，内页随令牌自动换肤） */
    --paper:       #FAFBFE;   /* 冷白底 —— 主背景 */
    --paper-hi:    #FFFFFF;   /* 卡片 */
    --paper-lo:    #F1F4FB;   /* 分区底 —— 冷灰蓝 */
    --ink:         #171A33;   /* 靛墨 —— 主文字 */
    --ink-2:       #3A3F63;   /* 次级标题 */
    --ink-soft:    #4A5068;   /* 正文 */
    --ink-dim:     #656B80;   /* 辅助说明（含 --paper-lo 底也 ≥4.5） */
    --rule:        #E4E8F5;   /* 冷线 */
    --rule-soft:   #EEF1F9;

    /* 强调（2026-10-02 光域：靛蓝系；白字对 #4F46E5 = 6.3，主按钮回归白字） */
    --accent:      #4F46E5;   /* 靛蓝 —— 填充（按钮底 / 图标 / 装饰） */
    --accent-hi:   #4338CA;   /* hover 态 */
    --accent-disp: #4338CA;   /* 大字高亮，对 --paper 7.8 */
    --accent-text: #4338CA;   /* 小字（eyebrow / 链接 / 小签）—— 7.8，余量大 */
    --accent-ondeep: #A5B4FC; /* 深色段上的浅靛 */
    --btn-ink:     #FFFFFF;   /* 靛蓝底白字 6.3，达标 */
    --btn-ink-hi:  #F8FAFF;   /* hover 时底更深，字保持白 */
    --accent-soft: #EEF0FE;   /* 靛的浅底 */
    --seal:        #DC2626;   /* 红 —— 极小面积保留 */

    /* 辅助色（各学科线区分用，克制度低饱和） */
    --c-math:      #2C5A82;
    --c-yuwen:     #7A4B3A;
    --c-en:        #3F6B5C;
    --c-code:      #4A4E7C;
    --c-before:    #8A6A2E;
    --c-emotion:   #866AB2;

    /* 深色段（2026-10-02 光域：深靛蓝，与首页暗面一致） */
    --deep:        #171A3A;
    --deep-2:      #10132A;
    --deep-text:   #F2F4FD;   /* ⚠ 深底上的次要文字必须逐类覆盖，别漏 .hair/.gain 这类 */
    --deep-dim:    #A9B2D9;
    --deep-rule:   rgba(242, 244, 253, .18);

    /* 字体：**全是系统字体名**，命中即本地渲染，不发任何请求（见文件头 0 节）。
       ⚠ 故意不写 "Noto Serif SC" / "Noto Sans SC"：那是 Google Fonts 的 webfont 名，
         普通用户机器上不会装；留着只会让人误以为"加载了思源字体"。
       ⚠ 各平台落到什么：
         桌面 Windows → 标题宋体(SimSun) / 正文微软雅黑
         macOS · iPhone → 标题宋体(Songti SC) / 正文苹方
         Android → 多数没有中文衬线，自动退到系统黑体（不为它单独拉字体） */
    /* 2026-10-02 光域：标题与正文统一无衬线（原宋体栈退役）；令牌名保留，引用处不用改 */
    --serif: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", system-ui, -apple-system, "Segoe UI", sans-serif;
    --sans:  "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* 圆角：小半径才显克制（旧版 20px 是"缺高级感"的元凶之一） */
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 10px;
    --r-pill: 999px;

    /* 阴影：冷白面上的靛蓝淡影 */
    --sh-1: 0 1px 2px rgba(30, 34, 80, .05), 0 4px 14px rgba(30, 34, 80, .06);
    --sh-2: 0 2px 6px rgba(30, 34, 80, .07), 0 12px 34px rgba(30, 34, 80, .10);
    --sh-3: 0 8px 20px rgba(30, 34, 80, .11), 0 28px 60px rgba(30, 34, 80, .14);

    /* 版心：阶梯，不是定值（固定 1440 在 1366 笔电上左右留白会归零） */
    --wrap: 1200px;
    --wrap-text: 960px;   /* 正文列：中文每行 25–40 字，16px × 40 ≤ 640px */

    --navh: 72px;         /* 实测顶级首页导航中位 72px */
}

@media (min-width: 1440px) { :root { --wrap: 1280px; } }
@media (min-width: 1680px) { :root { --wrap: 1440px; } }
@media (min-width: 1920px) { :root { --wrap: 1560px; } }

/* ---------- 2. 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--navh) + 20px);
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.75;
    font-weight: 400;
    letter-spacing: .01em;
    -webkit-font-smoothing: antialiased;
    /* 光域底纹：两团极淡靛蓝/青紫极光（原纸纹退役） */
    background-image:
        radial-gradient(1100px 520px at 85% -8%, rgba(99, 102, 241, .07), transparent 70%),
        radial-gradient(900px 480px at -10% 14%, rgba(37, 99, 235, .05), transparent 70%);
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--ink-2); text-decoration: none; transition: color .18s; }
a:hover { color: var(--accent-text); }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4, .ms-serif {
    font-family: var(--serif);
    color: var(--ink);
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: .01em;
    margin: 0 0 .5em;
}
h1 { font-size: clamp(38px, 4.6vw, 64px); font-weight: 900; letter-spacing: -.01em; }  /* H1 中位 64px */
h2 { font-size: clamp(28px, 3.1vw, 42px); font-weight: 700; }
h3 { font-size: clamp(20px, 2vw, 26px); }
p  { margin: 0 0 1em; color: var(--ink-soft); }

::selection { background: var(--accent-soft); color: var(--ink); }

/* 无障碍：只给键盘焦点画圈 */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-xs); }

.ms-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. 版心 ---------- */
.ms-wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 28px;
    position: relative;
    z-index: 2;
}
@media (max-width: 640px) { .ms-wrap { padding: 0 18px; } }
.ms-wrap--text { max-width: var(--wrap-text); }

/* ---------- 4. 顶部导航（纸底 + 细分隔线，72px） ---------- */
.ms-nav {
    position: sticky; top: 0; z-index: 60;
    height: var(--navh);
    background: rgba(250, 251, 254, .82);
    backdrop-filter: saturate(170%) blur(18px);
    -webkit-backdrop-filter: saturate(170%) blur(18px);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 1px 0 rgba(30, 34, 80, .02);
}
.ms-nav-in { display: flex; align-items: center; justify-content: space-between; height: var(--navh); gap: 24px; }

.ms-logo {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--serif); font-size: 21px; font-weight: 900;
    color: var(--ink); letter-spacing: .06em; white-space: nowrap;
}
.ms-logo::before {
    content: ""; width: 22px; height: 22px; flex: none;
    background: var(--accent);
    /* 一枚小印章的骨架：方 + 微圆角 */
    border-radius: 5px;
    box-shadow: inset 0 0 0 3px var(--paper);
}
.ms-logo:hover { color: var(--ink); }
.ms-logo:hover::before { background: var(--seal); }

.ms-menu { display: flex; gap: 30px; margin: 0; padding: 0; list-style: none; align-items: center; }
.ms-menu a {
    font-size: 15px; font-weight: 500; color: var(--ink-soft);
    padding: 6px 0; position: relative; letter-spacing: .04em;
}
.ms-menu a::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2.5px;
    border-radius: 2px;
    background: linear-gradient(90deg, #4F46E5, #7C3AED); transition: right .22s ease;
}
.ms-menu a:hover { color: var(--ink); }
.ms-menu a:hover::after { right: 0; }
/* 当前页高亮：渐变光条常驻 + 文字加重（WP 菜单类，两套类名都接住） */
.ms-menu .current-menu-item > a, .ms-menu .current_page_item > a {
    color: var(--accent-text); font-weight: 700;
}
.ms-menu .current-menu-item > a::after, .ms-menu .current_page_item > a::after { right: 0; }
@media (max-width: 900px) { .ms-menu { gap: 18px; } .ms-menu a { font-size: 13.5px; } }
@media (max-width: 680px) {
    :root { --navh: 60px; }
    .ms-logo { font-size: 18px; }
    .ms-logo::before { width: 18px; height: 18px; box-shadow: inset 0 0 0 2.5px var(--paper); }
}

/* ---- 4.1 窄屏汉堡抽屉（≤860px；平板竖屏也走抽屉，菜单项再多也挤不坏） ----
   失败安全与 §12 reveal 同构：**默认（无 JS）菜单是展开的**，
   theme.js 启动成功给 <html> 打 .ms-nav-js 后才收起、由按钮接管开合。
   JS 挂掉的最坏结果 = 菜单一直摊开（可点、可用），绝不是没菜单。 */
.ms-burger {
    display: none; flex: none;
    width: 40px; height: 40px; padding: 0; margin-left: 2px;
    align-items: center; justify-content: center;
    background: var(--paper-hi); border: 1px solid var(--rule); border-radius: var(--r-sm);
    cursor: pointer; transition: border-color .15s, background .15s;
}
.ms-burger span {
    display: block; width: 18px; height: 2px; border-radius: 1px;
    background: var(--ink);
    box-shadow: 0 -5px 0 var(--ink), 0 5px 0 var(--ink);
}
.ms-burger:hover { border-color: var(--ink-2); }
.ms-burger:active { background: var(--paper-lo); }

@media (max-width: 860px) {
    .ms-burger { display: inline-flex; }

    /* 面板：吸在顶栏正下方的整宽卡片（.ms-wrap 有 position:relative 作定位父级）。
       兼容两种 DOM：新结构 nav.ms-navmenu（ul 在内）与旧 header 的 nav 裸容器。 */
    .ms-navmenu,
    .ms-nav-in > nav {
        position: absolute; top: 100%; left: 0; right: 0; z-index: 70;
        background: var(--paper-hi);
        border-bottom: 1px solid var(--rule);
        box-shadow: 0 18px 40px rgba(30, 34, 80, .16);
        padding: 4px 18px 12px;
    }
    .ms-menu { flex-direction: column; align-items: stretch; gap: 0; }
    .ms-menu a {
        display: block; padding: 13px 2px;
        font-size: 15px; letter-spacing: .05em;
        border-bottom: 1px dashed var(--rule);
    }
    .ms-menu li:last-child a { border-bottom: 0; }
    .ms-menu a::after { display: none; }

    /* JS 已接管：默认收起，.is-open 才展开（visibility 过渡避免残影拦截点击） */
    .ms-nav-js .ms-navmenu,
    .ms-nav-js .ms-nav-in > nav {
        opacity: 0; visibility: hidden; transform: translateY(-8px);
        transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
    }
    .ms-nav-js .ms-navmenu.is-open,
    .ms-nav-js .ms-nav-in > nav.is-open {
        opacity: 1; visibility: visible; transform: none;
        transition: opacity .16s ease, transform .16s ease, visibility 0s;
    }

    /* 顶栏本体：logo 可压缩截断；账号 pill 限宽防昵称过长顶爆一行 */
    .ms-logo { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .ms-account { max-width: 38vw; overflow: hidden; }
    .ms-acc-pill, .ms-acc-login { white-space: nowrap; }
    .ms-nav-in { gap: 10px; }
}

/* ---------- 5. 按钮 ---------- */
.ms-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 30px; border-radius: var(--r-pill);
    font-family: var(--sans); font-size: 15.5px; font-weight: 700; letter-spacing: .06em;
    border: 1px solid transparent; cursor: pointer;
    transition: transform .18s, box-shadow .18s, background .18s, color .18s, border-color .18s;
    white-space: nowrap;
}
.ms-btn:hover { transform: translateY(-2px); }
.ms-btn:active { transform: translateY(0); }

.ms-btn-lemon {                       /* 主行动：暖橙实心 */
    background: var(--accent); color: var(--btn-ink);
    box-shadow: 0 6px 18px rgba(79, 70, 229, .28);
}
.ms-btn-lemon:hover { background: var(--accent-hi); color: var(--btn-ink-hi); box-shadow: 0 10px 28px rgba(79, 70, 229, .36); }

.ms-btn-ghost {                       /* 次行动：纸上的描边 */
    background: transparent; color: var(--ink); border-color: var(--rule);
}
.ms-btn-ghost:hover { border-color: var(--ink); color: var(--ink); background: rgba(23, 59, 92, .03); }

.ms-btn--sm { padding: 10px 20px; font-size: 14px; }

/* 深色段里的按钮反转 */
.ms-deep .ms-btn-ghost { color: var(--deep-text); border-color: rgba(242, 239, 232, .34); }
.ms-deep .ms-btn-ghost:hover { background: rgba(242, 239, 232, .1); color: #fff; border-color: rgba(242, 239, 232, .6); }

/* ---------- 6. 通用 Section ---------- */
.ms-sec { padding: 88px 0; position: relative; }
.ms-sec--tight { padding: 56px 0; }
@media (max-width: 760px) { .ms-sec { padding: 56px 0; } }

/* 深浅硬切：节奏比渐变清楚 */
.ms-sec--alt { background: var(--paper-lo); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.ms-deep { background: var(--deep); color: var(--deep-text); }
.ms-deep h1, .ms-deep h2, .ms-deep h3, .ms-deep h4 { color: #fff; }
.ms-deep p { color: var(--deep-dim); }
.ms-deep a { color: var(--deep-text); }
.ms-deep a:hover { color: #fff; }
/* ⚠ 深底上要逐类覆盖次要元素，否则浅色文字会不可读且不报错 */
.ms-deep .ms-hair,
.ms-deep .ms-gain,
.ms-deep .ms-sec-head p,
.ms-deep .ms-muted,
.ms-deep .ms-meta,
.ms-deep small { color: var(--deep-dim); }
.ms-deep .ms-rule { background: var(--deep-rule); border-color: var(--deep-rule); }

.ms-sec-head { max-width: 720px; margin: 0 0 52px; }
.ms-sec-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.ms-sec-head h2 { margin-bottom: 14px; }
.ms-sec-head p { font-size: 16.5px; line-height: 1.9; margin: 0; }
/* 标题左侧一枚小印 */
.ms-sec-head h2 .ms-seal,
.ms-seal {
    display: inline-block; vertical-align: 4px; margin-right: 12px;
    width: 26px; height: 26px; line-height: 26px; text-align: center;
    background: var(--seal); color: #fff; border-radius: 5px;
    font-family: var(--serif); font-size: 14px; font-weight: 700;
}
/* 面包屑（2026-10-02）：轻量一行，不抢 hero 的戏 */
.ms-crumbs{padding:14px 0 0;}
.ms-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13.5px;}
.ms-crumbs li{color:#5A6072;}
.ms-crumbs li+li::before{content:"/";margin-right:8px;color:#C3C8D4;}
.ms-crumbs a{color:#5A6072;text-decoration:none;}
.ms-crumbs a:hover{color:#4F46E5;}
.ms-crumbs li[aria-current]{color:#171A33;font-weight:600;}

.ms-eyebrow {
    display: inline-block; margin: 0 0 14px;
    font-family: var(--sans); font-size: 12.5px; font-weight: 700;
    letter-spacing: .22em; text-transform: uppercase; color: var(--accent-text);
}

/* ---------- 7. Hero（分区式首屏：左文右屏，纸底） ---------- */
.ms-hero {
    position: relative; overflow: hidden;
    padding: 76px 0 64px;
    background:
        linear-gradient(180deg, rgba(79, 70, 229, .045) 0%, transparent 46%),
        var(--paper);
    border-bottom: 1px solid var(--rule);
}
.ms-hero::before {           /* 渐隐网格线，替代旧的深空光晕 */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(90deg, rgba(23, 59, 92, .045) 1px, transparent 1px),
        linear-gradient(0deg,  rgba(23, 59, 92, .045) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(120% 80% at 30% 10%, #000 0%, transparent 72%);
            mask-image: radial-gradient(120% 80% at 30% 10%, #000 0%, transparent 72%);
}
.ms-hero-in {
    display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    gap: 56px; align-items: center;
}
@media (max-width: 980px) { .ms-hero-in { grid-template-columns: 1fr; gap: 40px; } }
.ms-hero-inner { position: relative; z-index: 2; }

.ms-hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 16px; margin: 0 0 22px;
    background: var(--paper-hi); border: 1px solid var(--rule); border-radius: var(--r-pill);
    font-size: 13.5px; font-weight: 500; color: var(--ink-2); letter-spacing: .04em;
    box-shadow: var(--sh-1);
}
.ms-hero h1 { margin: 0 0 22px; }
.ms-hero h1 .hl {
    position: relative; color: var(--accent-disp); white-space: nowrap;
}
.ms-hero h1 .hl::after {   /* 手写感的暖橙下划 —— 不用高饱和底块 */
    content: ""; position: absolute; left: -2px; right: -2px; bottom: .08em; height: .18em;
    background: rgba(79, 70, 229, .20); border-radius: 2px; z-index: -1;
}
.ms-hero-copy-p {
    max-width: 34em; font-size: 17.5px; line-height: 1.95; color: var(--ink-soft);
    margin: 0 0 30px;
}
.ms-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

.ms-hero-blob { display: none; }        /* 旧的漂移光晕在纸底上很脏，关掉 */
.ms-hero-visual { position: relative; justify-self: center; }

/* ---- Hero 里的"生活现场"实拍感图（俯拍书桌；只露手与袖口） ---- */
.ms-scene {
    position: relative; border-radius: var(--r-md); overflow: hidden;
    border: 1px solid var(--rule); box-shadow: var(--sh-3); background: var(--paper-hi);
}
.ms-scene img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ms-scene-cap {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px; background: var(--paper-hi); border-top: 1px solid var(--rule);
    font-size: 13px; color: var(--ink-dim);
}
.ms-scene-cap b { color: var(--ink); font-weight: 600; }

/* ---- Hero 右侧的"工作台"示意（纯 CSS，不用截图，不会糊） ---- */
.ms-bench {
    background: var(--paper-hi); border: 1px solid var(--rule);
    border-radius: var(--r-md); box-shadow: var(--sh-3); overflow: hidden;
}
.ms-bench-top {
    display: flex; align-items: center; gap: 8px;
    padding: 13px 16px; border-bottom: 1px solid var(--rule); background: var(--paper-lo);
    font-size: 13px; font-weight: 600; color: var(--ink-2); letter-spacing: .04em;
}
.ms-bench-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.ms-bench-body { padding: 18px 16px 20px; }
.ms-bench-task {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 11px 0; border-bottom: 1px dashed var(--rule);
}
.ms-bench-task:last-of-type { border-bottom: 0; }
.ms-bench-task span { font-size: 14.5px; color: var(--ink-soft); }
.ms-bench-task b { font-family: var(--serif); font-size: 17px; color: var(--ink); }
.ms-bench-bar { height: 8px; border-radius: var(--r-pill); background: var(--paper-lo); overflow: hidden; margin: 12px 0 4px; }
.ms-bench-bar i { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--accent), #F0A25E); }
.ms-bench-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule);
}
/* ⚠ 必须排除按钮：`.ms-bench-foot span`(0,1,1) 比 `.ms-bench-go`(0,1,0) 特异性高，
   不排除的话按钮文字会变成 1.99:1 的灰字压在深蓝底上（实测） */
.ms-bench-foot span:not(.ms-bench-go) { font-size: 13px; color: var(--ink-dim); }
.ms-bench-go {
    padding: 9px 20px; border-radius: var(--r-pill); background: var(--ink); color: #fff;
    font-size: 13.5px; font-weight: 600; letter-spacing: .05em;
}
.ms-bench-go:hover { background: var(--accent); color: var(--btn-ink); }

/* 浮动小票 */
.ms-chip {
    position: absolute; z-index: 3;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: var(--r-pill);
    background: var(--paper-hi); border: 1px solid var(--rule);
    font-size: 13px; font-weight: 600; color: var(--ink);
    box-shadow: var(--sh-2); white-space: nowrap;
}
.ms-chip1 { top: 18px; left: -28px; }
.ms-chip2 { bottom: 42px; right: -30px; }
@media (max-width: 1080px) { .ms-chip1 { left: -10px; } .ms-chip2 { right: -10px; } }
@media (max-width: 980px) { .ms-chip1, .ms-chip2 { display: none; } }

/* ---------- 8. 信任条 ---------- */
.ms-strip {
    display: grid; grid-template-columns: repeat(3, 1fr);
    background: var(--paper-hi); border: 1px solid var(--rule); border-radius: var(--r-md);
    box-shadow: var(--sh-1); overflow: hidden;
    margin: -34px auto 0; max-width: var(--wrap-text);
    position: relative; z-index: 5;
}
.ms-strip-item {
    display: flex; align-items: center; gap: 12px; justify-content: center;
    padding: 20px 18px; font-size: 15px; font-weight: 600; color: var(--ink);
}
.ms-strip-item + .ms-strip-item { border-left: 1px solid var(--rule); }
.ms-strip-item small { display: block; font-size: 12.5px; font-weight: 400; color: var(--ink-dim); letter-spacing: .02em; }
@media (max-width: 760px) {
    .ms-strip { grid-template-columns: 1fr; margin-top: -22px; }
    .ms-strip-item { justify-content: flex-start; padding: 15px 18px; }
    .ms-strip-item + .ms-strip-item { border-left: 0; border-top: 1px solid var(--rule); }
}

/* ---------- 9. 特性 / Bento 网格 ---------- */
.ms-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ms-feat {
    background: var(--paper-hi); border: 1px solid var(--rule); border-radius: var(--r-md);
    padding: 30px 26px; box-shadow: var(--sh-1);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.ms-feat:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: #D6CFC0; }
.ms-feat-ico {
    width: 46px; height: 46px; border-radius: var(--r-sm); margin-bottom: 16px;
    display: flex; align-items: center; justify-content: center; font-size: 22px;
    background: var(--accent-soft);
}
.ms-feat:nth-child(1) .ms-feat-ico { background: var(--accent-soft); }
.ms-feat:nth-child(2) .ms-feat-ico { background: #E7EEF4; }
.ms-feat:nth-child(3) .ms-feat-ico { background: #EDEAE0; }
.ms-feat h3 { font-size: 20px; margin: 0 0 10px; }
.ms-feat p { font-size: 15px; line-height: 1.9; margin: 0; }

/* Bento：首页功能段用不等宽网格 */
.ms-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.ms-bento > * { grid-column: span 2; }
.ms-bento > .ms-b--wide { grid-column: span 3; }
.ms-bento > .ms-b--full { grid-column: span 6; }
.ms-bento > .ms-b--tall { grid-row: span 2; }
@media (max-width: 900px) {
    .ms-bento { grid-template-columns: repeat(2, 1fr); }
    .ms-bento > *, .ms-bento > .ms-b--wide, .ms-bento > .ms-b--full { grid-column: span 2; }
}
@media (max-width: 860px) { .ms-feats { grid-template-columns: 1fr; } }

/* ---------- 10. 业务卡（定制 / 体验自制） ---------- */
.ms-biz { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.ms-biz-card {
    position: relative; display: block; padding: 34px 30px;
    background: var(--paper-hi); border: 1px solid var(--rule); border-radius: var(--r-md);
    box-shadow: var(--sh-1); overflow: hidden; transition: transform .2s, box-shadow .2s;
}
.ms-biz-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.ms-biz-card::after {   /* 右上角一枚极淡的印 */
    content: ""; position: absolute; right: -34px; top: -34px; width: 130px; height: 130px;
    border-radius: 50%; background: var(--accent-soft); opacity: .7;
}
.ms-biz-card--diy::after { background: #E7EEF4; }
.ms-biz-ico { font-size: 30px; margin-bottom: 14px; }
.ms-biz-tag {
    display: inline-block; padding: 4px 12px; margin-bottom: 12px;
    background: var(--paper-lo); border-radius: var(--r-pill);
    font-size: 12.5px; font-weight: 600; color: var(--ink-2); letter-spacing: .06em;
}
.ms-biz-tag--hot { background: var(--accent); color: var(--btn-ink); }
.ms-biz-card h3 { font-size: 23px; margin: 0 0 12px; position: relative; z-index: 1; }
.ms-biz-card p { font-size: 15px; line-height: 1.9; margin: 0 0 20px; position: relative; z-index: 1; }
.ms-biz-more { font-size: 14.5px; font-weight: 700; color: var(--accent-text); letter-spacing: .05em; }
@media (max-width: 760px) { .ms-biz { grid-template-columns: 1fr; } }

/* ---------- 11. 页脚 CTA + 页脚 ---------- */
.ms-foot-cta { padding: 92px 0; background: var(--deep); color: var(--deep-text); }
.ms-foot-cta-in { text-align: center; max-width: 680px; margin: 0 auto; }
.ms-foot-cta h2 { color: #fff; margin-bottom: 14px; }
.ms-foot-cta p { color: var(--deep-dim); font-size: 16.5px; margin-bottom: 28px; }

.ms-footer { background: var(--deep-2); color: var(--deep-dim); padding: 26px 0; }
.ms-footer-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13.5px; }
.ms-footer a { color: var(--deep-dim); }
.ms-footer a:hover { color: #fff; }

/* ---------- 12. 滚动入场（⚠ 方向：**JS 负责"藏"，不是"显示"**） ----------
   两条被实测淘汰的写法，都别再写：
     ✗ `.ms-reveal{opacity:0}`（旧 style.css 的写法）—— fail-closed：JS 一慢 / 一报错 /
       被拦截，整页内容全空白。首页当初就是这么出现几段纯空白色块的。
     ✗ `.ms-js .ms-reveal:not(.is-in){opacity:0}` —— 门控还在 CSS 上，仍然在赌
       "JS 一定能把 is-in 加上"。实测首页有 **13 处**永久停在透明。机理：
       IntersectionObserver 只在**状态变化**时回调，而这个写法给视口底部留了 -10% 的
       盲区 —— 元素若恰好落在那一带，下一次滚动（步长 500px）就直接把它甩到视口上方，
       IO **一次都没收到过"进入"**，于是永远不回调。用户用 PageDown / 点锚点跳转同样中招。
   ✅ 现在反过来：**默认永远可见**；只有确实在"屏幕下方还没滚到"的段落，
      才由 theme.js 主动加 `.is-out` 藏起来。
      于是 JS 挂了 / 报错 / 被拦，最坏结果只是**没有动画**，绝不是**看不见**。

   ⚠ `.is-out` 只由 theme.js 增删；页面上存在它 = 该段落当前在屏幕下方。 */
.ms-reveal { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s ease; }
.ms-reveal.is-out { opacity: 0; transform: translateY(18px); }
/* ⚠ 初始化那一瞬间要关掉过渡：theme.js 会在首帧给"屏幕下方"的段落打 .is-out，
   若过渡还在，视口最下缘那一条会肉眼可见地淡出闪一下。 */
html.ms-boot .ms-reveal { transition: none; }

/* ⚠ 打印 / 导出 PDF：屏幕外的段落此时全是 .is-out（= 透明），后半本会是空白。
   打印没有"滚动"这回事，`is-out` 一律作废。 */
@media print {
    .ms-reveal.is-out { opacity: 1 !important; transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .ms-reveal, .ms-reveal.is-out { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

/* ---------- 13. 通用小件 ---------- */
.ms-page { padding: 56px 0 88px; }
.ms-page-narrow { max-width: var(--wrap-text); margin: 0 auto; }
.ms-content { font-size: 16.5px; line-height: 1.95; color: var(--ink-soft); }
.ms-content h2, .ms-content h3 { color: var(--ink); }

/* ⚠ 通用模板（page.php / single.php）里跑的是**后台编辑器直出的 HTML**，
   不是我们能控结构的那几套组件。旧表 style.css 停用后，这些原生标签就没人管了：
     · 裸 <table> 在 390px 上会顶破视口（实测同类宽表溢 236px）
     · <pre>/<code> 长行同理
     · <blockquote> 没样式会跟正文糊在一起，读不出"这是引用"
   → 这里做**最后一道兜底**，只管"不溢出 + 能读"，不管好看。 */
.ms-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 15px; }
.ms-content th, .ms-content td { border: 1px solid var(--rule); padding: 8px 10px; text-align: left; }
.ms-content pre { overflow-x: auto; background: var(--paper-lo); padding: 14px 16px; border-radius: 10px; }
.ms-content code { background: var(--paper-lo); padding: 1px 5px; border-radius: 5px; font-size: .92em; }
.ms-content pre code { background: none; padding: 0; }
.ms-content blockquote {
  margin: 22px 0; padding: 4px 0 4px 18px;
  border-left: 3px solid var(--accent-disp);
  color: var(--ink-2); font-style: normal;
}
.ms-content ul, .ms-content ol { padding-left: 1.5em; }
.ms-content li { margin: 6px 0; }
.ms-content > *:first-child { margin-top: 0; }
.ms-content a { color: var(--accent-text); }
.ms-content hr { height: 1px; border: 0; background: var(--rule); margin: 28px 0; }
.ms-meta { font-size: 13.5px; color: var(--ink-dim); letter-spacing: .03em; }
.ms-hair { height: 1px; background: var(--rule); border: 0; margin: 28px 0; }
.ms-rule { height: 1px; background: var(--rule); border: 0; }
.ms-gain { color: var(--accent-text); font-weight: 700; }
.ms-buytip { font-size: 13px; color: var(--ink-dim); }

/* 宽表一律套横向滚动容器 —— 手机上直接放会顶破视口（实测 390px 溢 236px） */
.ms-scrollx { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ms-scrollx > table { min-width: 560px; }
table.ms-table { width: 100%; border-collapse: collapse; font-size: 15px; }
table.ms-table th, table.ms-table td { padding: 12px 14px; border-bottom: 1px solid var(--rule); text-align: left; }
table.ms-table th { font-weight: 700; color: var(--ink); background: var(--paper-lo); }

/* ==========================================================================
   14. 产品卡（首页货架 + 分类页共用，服务端 PHP 渲染）
   ⚠ 没有封面时绝不显示"暂无封面"四个字 —— 用品牌色块 + 主题单字兜底。
      卡片封面也不要用产品首屏截图裁（60px 会糊，且会撞 md5）。
   ========================================================================== */
.mx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 980px) { .mx-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 620px)  { .mx-grid { grid-template-columns: 1fr; } }

/* ⚠ 筛选核心修复（2026-10-02）：.mx-card 的 display:flex 会压过浏览器默认的
   [hidden]{display:none} —— hidden 属性形同虚设，分类页点学科“筛不掉”。
   全局兜底：任何元素带 hidden 一律不渲染。 */
[hidden] { display: none !important; }

.mx-card {
    display: flex; flex-direction: column;
    background: var(--paper-hi); border: 1px solid var(--rule); border-radius: var(--r-md);
    overflow: hidden; box-shadow: var(--sh-1);
    transition: transform .2s, box-shadow .2s, border-color .2s;
    color: var(--ink);
}
.mx-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: #D6CFC0; color: var(--ink); }

.mx-card-cover {
    position: relative; aspect-ratio: 16 / 10; overflow: hidden;
    background: var(--paper-lo); border-bottom: 1px solid var(--rule);
}
.mx-card-cover img { width: 100%; height: 100%; object-fit: cover; }
/* 无封面兜底：品牌色底 + 主题单字 + 细网格，看着像设计过的，不像坏了 */
.mx-card-cover--txt {
    display: flex; align-items: center; justify-content: center;
    background-image:
        linear-gradient(135deg, rgba(255,255,255,.14) 0%, transparent 60%),
        repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 6px, transparent 6px 12px);
}
.mx-card-cover--txt b {
    font-family: var(--serif); font-size: 58px; font-weight: 900; color: #fff;
    letter-spacing: .06em; text-shadow: 0 3px 14px rgba(0,0,0,.16);
}
.mx-cover-math   { background-color: var(--c-math); }
.mx-cover-yuwen  { background-color: var(--c-yuwen); }
.mx-cover-en     { background-color: var(--c-en); }
.mx-cover-code   { background-color: var(--c-code); }
.mx-cover-before { background-color: var(--c-before); }
.mx-cover-emotion { background-color: var(--c-emotion); }

/* 封面左上角的学段/册次小签 */
.mx-card-stage {
    position: absolute; left: 12px; top: 12px; z-index: 2;
    padding: 4px 11px; border-radius: var(--r-pill);
    background: rgba(255,255,255,.92); color: var(--ink);
    font-size: 12px; font-weight: 700; letter-spacing: .06em;
    backdrop-filter: blur(4px);
}
/* 右上角"可试用"小签 */
.mx-card-trial {
    position: absolute; right: 12px; top: 12px; z-index: 2;
    padding: 4px 11px; border-radius: var(--r-pill);
    background: var(--accent); color: var(--btn-ink);
    font-size: 12px; font-weight: 700; letter-spacing: .04em;
}

.mx-card-bd { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1 1 auto; }
.mx-card-name {
    font-family: var(--serif); font-size: 19px; font-weight: 700; color: var(--ink);
    line-height: 1.4; margin: 0 0 8px;
}
/* 系列徽标：教材同步款主标题显示教材全称，原代号降级为小徽标（2026-10-02 标题治理） */
.mx-card-series{display:inline-block;margin-top:6px;font-size:12px;line-height:1.6;color:#4F46E5;background:rgba(79,70,229,.07);border:1px solid rgba(79,70,229,.16);border-radius:999px;padding:1px 10px;}
.mx-card-desc {
    font-size: 14px; line-height: 1.8; color: var(--ink-soft); margin: 0 0 16px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mx-card-foot {
    margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding-top: 14px; border-top: 1px solid var(--rule-soft);
}
.mx-card-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.mx-tag {
    padding: 3px 10px; border-radius: var(--r-pill); background: var(--paper-lo);
    font-size: 12px; color: var(--ink-soft); font-weight: 500; letter-spacing: .03em;
}
.mx-card-go { font-size: 14px; font-weight: 700; color: var(--accent-text); letter-spacing: .04em; white-space: nowrap; }

/* 底部"持续上新"条 */
.mx-teaser {
    display: flex; align-items: center; gap: 16px; margin-top: 28px;
    padding: 22px 26px; border: 1px dashed var(--rule); border-radius: var(--r-md);
    background: rgba(255, 255, 255, .6);
}
.mx-teaser i { font-size: 24px; font-style: normal; }
.mx-teaser b { display: block; font-family: var(--serif); font-size: 17px; color: var(--ink); }
.mx-teaser span { font-size: 13.5px; color: var(--ink-dim); }

/* ==========================================================================
   15. 分类页（学段三层制）
   分类 = 学段（学前/小学/初中/高中/通用）；学科退到筛选层；册次只留名字里
   ========================================================================== */
.ms-cat-hero { padding: 56px 0 34px; border-bottom: 1px solid var(--rule); background: var(--paper-lo); }
.ms-cat-hero h1 { font-size: clamp(32px, 3.6vw, 50px); margin: 0 0 12px; }
.ms-cat-hero p { max-width: 40em; margin: 0; font-size: 16.5px; }
/* 分类页 H1 的高亮字：新表原来漏了这条，结果被旧表的白→紫渐变接管（在纸底上等于隐形） */
.ms-cat-hero h1 .hl { color: var(--accent-disp); }

.mx-filter {
    position: sticky; top: var(--navh); z-index: 40;
    background: rgba(250, 251, 254, .94);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--rule);
    padding: 14px 0;
}
.mx-filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mx-filter-row + .mx-filter-row { margin-top: 10px; }
.mx-filter-label { font-size: 13px; color: var(--ink-dim); letter-spacing: .12em; flex: none; }
.mx-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 16px; border-radius: var(--r-pill);
    background: var(--paper-hi); border: 1px solid var(--rule);
    font-size: 14px; font-weight: 500; color: var(--ink-soft);
    cursor: pointer; transition: all .16s; user-select: none;
}
.mx-chip:hover { border-color: var(--ink-2); color: var(--ink); }
.mx-chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; }
.mx-chip.is-on .mx-chip-n { background: rgba(255,255,255,.22); color: #fff; }
.mx-chip-n {
    padding: 1px 8px; border-radius: var(--r-pill); background: var(--paper-lo);
    font-size: 12px; color: var(--ink-dim);
}
.mx-chip--sub { padding: 6px 13px; font-size: 13px; }

.mx-group { padding: 48px 0 8px; }
.mx-group-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 24px; }
.mx-group-head h2 { font-size: clamp(24px, 2.4vw, 32px); margin: 0; }
.mx-group-n { font-size: 14px; color: var(--ink-dim); }
/* 组头吸顶：滚进深组时永远知道在看哪个学段 */
.mx-group-head { position: sticky; top: 74px; z-index: 6; margin: -10px -14px 10px; padding: 10px 14px; background: rgba(250,251,254,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 14px; }
/* 展开更多（方案 A：每组默认 12 款） */
.mx-more { display: block; margin: 26px auto 0; padding: 10px 26px; border: 1.5px solid var(--accent); color: var(--accent); background: #fff; border-radius: 999px; font-size: 14.5px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; }
.mx-more:hover { background: var(--accent); color: #fff; }
.mx-group-line { flex: 1 1 auto; height: 1px; background: var(--rule); }
.mx-empty { padding: 64px 0; text-align: center; color: var(--ink-dim); }
.mx-empty b { display: block; font-family: var(--serif); font-size: 22px; color: var(--ink); margin-bottom: 8px; }

/* 老货架类名兜底（插件短代码若还在别处被调用，不至于变形） */
.ms-shop-sec { padding: 72px 0; }
.jc-sf__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.jc-sf__grid--sub { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .jc-sf__grid, .jc-sf__grid--sub { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .jc-sf__grid, .jc-sf__grid--sub { grid-template-columns: 1fr; } }
.jc-sf__card { display: block; background: var(--paper-hi); border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-1); color: var(--ink); }
.jc-sf__card:hover { box-shadow: var(--sh-2); color: var(--ink); }
.jc-sf__cover { position: relative; aspect-ratio: 16 / 10; background: var(--paper-lo); overflow: hidden; }
.jc-sf__cover img { width: 100%; height: 100%; object-fit: cover; }
.jc-sf__bd { padding: 18px 20px 20px; }
.jc-sf__name { font-family: var(--serif); font-size: 19px; font-weight: 700; margin-bottom: 8px; }
.jc-sf__desc { font-size: 14px; line-height: 1.8; color: var(--ink-soft); }
.jc-sf__cta { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--accent-text); }
.jc-sf__tag { position: absolute; right: 12px; top: 12px; padding: 4px 11px; border-radius: var(--r-pill); background: var(--accent); color: var(--btn-ink); font-size: 12px; font-weight: 700; }
.jc-sf__nopic { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--ink-dim); font-size: 13px; }
.jc-sf__teaser { margin-top: 28px; padding: 22px 26px; border: 1px dashed var(--rule); border-radius: var(--r-md); display: flex; gap: 16px; align-items: center; }
.jc-sf__group-title { font-family: var(--serif); }

/* ==========================================================================
   16. 详情页 —— "AI 学习工作台说明书"
   ⚠ 定位铁律：不是商品展示页。禁划线价 / 倒计时 / 库存 / 包邮 /「立即购买」；
      价格区叫「怎么开始」。叙事是"这台工作台怎么帮孩子把题做对"。
   ========================================================================== */
.mxd-hero {
    position: relative; padding: 60px 0 64px;
    background: linear-gradient(180deg, rgba(79, 70, 229, .05), transparent 52%), var(--paper);
    border-bottom: 1px solid var(--rule);
}
.mxd-hero-in { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 52px; align-items: start; }
@media (max-width: 980px) { .mxd-hero-in { grid-template-columns: 1fr; gap: 34px; } }

.mxd-shot { position: relative; border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-3); background: var(--paper-hi); }
.mxd-shot img { width: 100%; display: block; }
.mxd-shot-cap { padding: 11px 15px; border-top: 1px solid var(--rule); background: var(--paper-lo); font-size: 12.5px; color: var(--ink-dim); }

.mxd-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.mxd-stage, .mxd-trial, .mxd-subject {
    padding: 5px 13px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 700; letter-spacing: .05em;
}
.mxd-stage   { background: var(--ink); color: #fff; }
.mxd-trial   { background: var(--accent-soft); color: var(--accent-text); }
.mxd-subject { background: var(--paper-lo); color: var(--ink-soft); }

.mxd-title { font-size: clamp(30px, 3.6vw, 46px); font-weight: 900; margin: 0 0 14px; }
/* H1 里的学段前缀（「小学」）—— 只在货架名本身读不到学段时才出现（见 mx_h1_stage()）。
   ⚠ 用**同行内联**而不是独立成行：独立成行会飘在徽章与标题之间，像走失的标签（实测）；
     内联后连起来读就是「小学 一上数学蜡笔岛」，H1 的文本内容也完整包含学段。
   ⚠ 字号缩到 .62em 而不是照抄正文：学段是**分类信息**，不该和产品名抢视觉重量。 */
.mxd-title-stage {
    font-size: .62em; font-weight: 800; letter-spacing: .04em;
    color: var(--accent-text); margin-right: .2em;
}
.mxd-lead { font-size: 17.5px; line-height: 1.95; color: var(--ink-soft); margin: 0 0 26px; max-width: 34em; }

/* 三条"这台工作台怎么帮孩子" —— 每款文案不同，由数据注入 */
.mxd-hows { display: grid; gap: 12px; margin: 0 0 28px; padding: 0; list-style: none; }
.mxd-hows li {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 16px; background: var(--paper-hi);
    border: 1px solid var(--rule); border-radius: var(--r-sm);
}
.mxd-hows i { flex: none; font-style: normal; font-size: 18px; line-height: 1.5; }
.mxd-hows b { display: block; font-size: 15.5px; color: var(--ink); font-weight: 700; }
.mxd-hows span { font-size: 14px; color: var(--ink-soft); line-height: 1.8; }

/* 「怎么开始」—— 替代价格区 */
.mxd-start {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    padding: 20px 22px; border: 1px solid var(--rule); border-radius: var(--r-md);
    background: var(--paper-hi); box-shadow: var(--sh-1);
}
.mxd-start-l { flex: 1 1 auto; min-width: 200px; }
.mxd-start-k { display: block; font-size: 12.5px; letter-spacing: .18em; color: var(--ink-dim); margin-bottom: 4px; }
.mxd-start-v { font-family: var(--serif); font-size: 19px; font-weight: 700; color: var(--ink); line-height: 1.5; }
.mxd-start.pure .mxd-start-v { color: var(--ink); }

/* 正文分节 */
.mxd-body { padding: 76px 0; }
.mxd-block { padding: 34px 0; border-top: 1px solid var(--rule); }
.mxd-block:first-child { border-top: 0; padding-top: 0; }
.mxd-block h2 { font-size: clamp(24px, 2.4vw, 34px); margin: 0 0 8px; }
.mxd-block > p { font-size: 16.5px; line-height: 1.95; max-width: 44em; }

/* 关 / 讲 清单 —— 条条追到具体讲次 */
.mxd-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 26px; margin: 22px 0 0; padding: 0; list-style: none; }
.mxd-list li {
    display: flex; gap: 10px; align-items: baseline;
    padding: 11px 0; border-bottom: 1px dashed var(--rule);
    font-size: 15px; color: var(--ink-soft);
}
.mxd-list li em { flex: none; font-style: normal; font-family: var(--serif); font-weight: 700; color: var(--accent-text); min-width: 3.4em; }
.mxd-list li b { color: var(--ink); font-weight: 600; }
@media (max-width: 760px) { .mxd-list { grid-template-columns: 1fr; } }

/* 成果锚点清单 */
.mxd-anchors { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.mxd-anchors li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--paper-hi); border: 1px solid var(--rule); border-radius: var(--r-sm); }
.mxd-anchors .n {
    flex: none; width: 24px; height: 24px; border-radius: 50%;
    background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.mxd-anchors b { color: var(--ink); }
.mxd-anchors small { display: block; color: var(--ink-dim); font-size: 12.5px; margin-top: 3px; }

/* 奖章墙（用产品里本来就有 9 枚奖章的真实机制，不发明） */
.mxd-badges-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; margin: 22px 0 0; }
.mxd-badge {
    text-align: center; padding: 16px 8px;
    background: var(--paper-hi); border: 1px solid var(--rule); border-radius: var(--r-sm);
}
.mxd-badge i { display: block; font-size: 26px; font-style: normal; margin-bottom: 7px; }
.mxd-badge b { display: block; font-size: 13.5px; color: var(--ink); font-weight: 600; }
.mxd-badge span { display: block; font-size: 12px; color: var(--ink-dim); margin-top: 3px; }

/* 四层梯度（专题训练实证） */
.mxd-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 24px 0 0; }
@media (max-width: 860px) { .mxd-steps { grid-template-columns: repeat(2, 1fr); } }
.mxd-step { padding: 18px 16px; background: var(--paper-hi); border: 1px solid var(--rule); border-radius: var(--r-sm); position: relative; }
.mxd-step::before {
    content: attr(data-h); position: absolute; right: 14px; top: 10px;
    font-family: var(--serif); font-size: 26px; font-weight: 900; color: var(--paper-lo);
}
.mxd-step b { display: block; font-size: 15.5px; color: var(--ink); margin-bottom: 6px; }
.mxd-step span { font-size: 13.5px; color: var(--ink-soft); line-height: 1.8; }

/* 深色段里的"一个晚上"场景 */
.mxd-night { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: center; }
@media (max-width: 900px) { .mxd-night { grid-template-columns: 1fr; gap: 28px; } }
.mxd-night ul { margin: 18px 0 0; padding: 0; list-style: none; }
.mxd-night li { padding: 11px 0; border-bottom: 1px dashed var(--deep-rule); font-size: 15.5px; color: var(--deep-dim); }
.mxd-night li b { color: #fff; }

/* 常见问题 */
.mxd-faq { border-top: 1px solid var(--rule); }
.mxd-faq details { border-bottom: 1px solid var(--rule); }
.mxd-faq summary {
    padding: 20px 0; cursor: pointer; list-style: none;
    font-family: var(--serif); font-size: 17.5px; font-weight: 700; color: var(--ink);
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.mxd-faq summary::-webkit-details-marker { display: none; }
.mxd-faq summary::after { content: "＋"; font-size: 18px; color: var(--ink-dim); flex: none; }
.mxd-faq details[open] summary::after { content: "－"; }
.mxd-faq details > div { padding: 0 0 22px; font-size: 15.5px; line-height: 1.95; color: var(--ink-soft); max-width: 46em; }

.mxd-video video { width: 100%; border-radius: var(--r-md); border: 1px solid var(--rule); background: #000; }

/* 旧详情页类名兜底（detail.js 若还在跑，不至于裸奔） */
.ms-detail { min-height: 40vh; }
.ms-detail-loading { padding: 90px 0; text-align: center; color: var(--ink-dim); }
.ms-detail-notfound { padding: 80px 0; text-align: center; }
.msd-strike { text-decoration: line-through; color: var(--ink-dim); margin-left: 10px; }

/* ==========================================================================
   17. 老页面重皮：定制 / 体验自制 / 扫码登录 / 会员中心
   （类名沿用，靠本文件后加载覆盖；只做"不冲突"的最小重皮）
   ========================================================================== */
.ms-page h1 { font-size: clamp(30px, 3.4vw, 46px); }

/* ---- 定制 ---- */
.ms-custom-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
@media (max-width: 760px) { .ms-custom-grid { grid-template-columns: 1fr; } }
.ms-custom-cta { margin-top: 40px; padding: 34px; background: var(--paper-hi); border: 1px solid var(--rule); border-radius: var(--r-md); text-align: center; box-shadow: var(--sh-1); }
.ms-custom-contact { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.ms-custom-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; }

/* ---- 定制需求表单（与手机端同一 REST 通道，tag=custom） ---- */
.ms-cust-form { margin-top: 26px; padding: 32px 30px; background: var(--paper-hi); border: 1px solid var(--rule); border-radius: var(--r-md); box-shadow: var(--sh-1); }
.ms-cust-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ms-cust-field--wide { grid-column: 1 / -1; }
.ms-cust-field label { display: block; font-size: 13px; font-weight: 700; color: var(--ink-soft); margin-bottom: 7px; letter-spacing: .03em; }
.ms-cust-field input, .ms-cust-field select, .ms-cust-field textarea {
    width: 100%; border: 1.5px solid var(--rule); border-radius: var(--r-sm);
    padding: 12px 14px; font-size: 14.5px; font-family: inherit; color: var(--ink);
    background: #fff; outline: 0; -webkit-appearance: none; appearance: none;
}
.ms-cust-field textarea { min-height: 108px; resize: vertical; line-height: 1.75; }
.ms-cust-field input:focus, .ms-cust-field select:focus, .ms-cust-field textarea:focus { border-color: var(--accent); }
@media (max-width: 680px) { .ms-cust-fields { grid-template-columns: 1fr; } .ms-cust-form { padding: 24px 20px; } }
.ms-cust-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.ms-cust-msg { font-size: 13.5px; color: var(--seal); }
.ms-cust-done { text-align: center; padding: 14px 0 6px; }
.ms-cust-done-ico { display: inline-flex; width: 56px; height: 56px; border-radius: 50%; align-items: center; justify-content: center; font-size: 26px; font-weight: 900; color: #3F8F5C; background: rgba(63, 143, 92, .1); border: 2px solid rgba(63, 143, 92, .35); margin-bottom: 12px; }
.ms-cust-done b { display: block; font-family: var(--serif); font-size: 19px; color: var(--ink); margin-bottom: 8px; }
.ms-cust-done p { font-size: 14px; color: var(--ink-soft); line-height: 1.9; margin: 0; }

/* ── 我的留言（定制页）：客服回复后客户回本页看，按本机设备号匹配 ── */
.ms-mine { display: none; margin-top: 26px; }
.ms-mine-item { background: #FFFFFF; border: 1px solid #E7E1D5; border-radius: 16px; padding: 16px 18px; margin-bottom: 12px; box-shadow: 0 2px 10px rgba(42,38,34,.05); }
.ms-mine-q, .ms-mine-a { display: flex; gap: 10px; align-items: flex-start; }
.ms-mine-q p { font-size: 14px; color: var(--ink); line-height: 1.8; margin: 0; flex: 1; word-break: break-all; }
.ms-mine-tag { flex: none; width: 22px; height: 22px; border-radius: 50%; background: rgba(23,59,92,.08); color: var(--ink); font-size: 11px; line-height: 22px; text-align: center; font-weight: 700; }
.ms-mine-tag--a { background: rgba(63,143,92,.14); color: #2E7D52; }
.ms-mine-a { margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(42,38,34,.14); }
.ms-mine-a p { font-size: 14px; color: #2E7D52; line-height: 1.8; margin: 0; flex: 1; word-break: break-all; }
.ms-mine-wait { font-size: 12.5px; color: var(--ink-dim, #8c8f94); margin-top: 8px; }

/* ---- 体验自制 ---- */
.ms-diy-stage { padding: 56px 0 88px; }
.ms-diy-layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 34px; align-items: start; }
@media (max-width: 980px) { .ms-diy-layout { grid-template-columns: 1fr; } }
.ms-diy-form, .ms-diy-preview, .ms-diy-poster { background: var(--paper-hi); border: 1px solid var(--rule); border-radius: var(--r-md); box-shadow: var(--sh-1); }
.ms-diy-form { padding: 26px; }
.ms-diy-field { margin-bottom: 18px; }
.ms-diy-field label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.ms-field, .ms-diy-field input, .ms-diy-field select, .ms-diy-field textarea {
    width: 100%; padding: 11px 14px; font: inherit; font-size: 15px; color: var(--ink);
    background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-sm);
    transition: border-color .16s, background .16s;
}
.ms-field:focus, .ms-diy-field input:focus, .ms-diy-field select:focus, .ms-diy-field textarea:focus {
    outline: none; border-color: var(--accent); background: var(--paper-hi);
}
.ms-diy-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.ms-diy-tpl {
    padding: 14px 12px; text-align: center; cursor: pointer;
    background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-sm); transition: all .16s;
}
.ms-diy-tpl:hover { border-color: var(--ink-2); }
.ms-diy-tpl.is-active { border-color: var(--accent); background: var(--accent-soft); }
.ms-diy-tpl-ico { font-size: 24px; display: block; margin-bottom: 6px; }
.ms-diy-preview { padding: 22px; }
.ms-diy-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ms-diy-placeholder { padding: 56px 20px; text-align: center; color: var(--ink-dim); border: 1px dashed var(--rule); border-radius: var(--r-sm); }
.ms-diy-poster { overflow: hidden; }
.msdiy-inner { padding: 26px; }
.msdiy-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.msdiy-brand { font-family: var(--serif); font-size: 13.5px; font-weight: 700; color: var(--ink); letter-spacing: .08em; }
.msdiy-title { font-family: var(--serif); font-size: 27px; font-weight: 900; color: var(--ink); margin: 0 0 8px; line-height: 1.35; }
.msdiy-sub { font-size: 15px; color: var(--ink-soft); margin: 0 0 16px; }
.msdiy-emoji { font-size: 40px; margin: 10px 0 16px; }
.msdiy-qr { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule); }
.msdiy-qr-tip { font-size: 12.5px; color: var(--ink-dim); }
.msdiy-tpl-name { font-size: 13px; color: var(--ink-soft); }
.ms-diy-price-badge { display: inline-block; padding: 5px 14px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-text); font-size: 13px; font-weight: 700; }
.ms-diy-note { font-size: 13px; color: var(--ink-dim); margin-top: 12px; line-height: 1.8; }
.ms-diy-actions, .ms-diy-preview-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }

/* ---- 扫码登录 ---- */
.ms-qr-box { max-width: 460px; margin: 0 auto; padding: 34px 30px; background: var(--paper-hi); border: 1px solid var(--rule); border-radius: var(--r-md); box-shadow: var(--sh-2); text-align: center; }
.ms-qr-welcome { font-family: var(--serif); font-size: 24px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.ms-qr-tip { font-size: 14px; color: var(--ink-soft); line-height: 1.85; }
.ms-qr-imgwrap { display: flex; align-items: center; justify-content: center; padding: 18px; margin: 18px 0; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-sm); min-height: 240px; }
/* ⚠ 画布尺寸约束：qrlogin.js 把二维码画成 440×440 高清（缩放交给 CSS）。
   旧表 style.css 里有 width/height 100% 约束，但该表 2026-09 改版后已停用，
   新表漏了这条 → 画布按 440px 原始尺寸渲染，把白框撑破（线上实测）。
   220px 显示（白框 18px 内衬），窄屏用 aspect-ratio 等比缩，不再溢出。 */
.ms-qr-imgwrap canvas, .ms-qr-imgwrap img { display: block; width: 220px; max-width: 100%; height: auto; aspect-ratio: 1 / 1; }
.ms-qr-loading { color: var(--ink-dim); font-size: 14px; }
.ms-qr-done { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; font-size: 16px; font-weight: 600; color: var(--ink); }
.ms-qr-done-ico { font-size: 22px; }
.ms-qr-user { font-size: 14px; color: var(--ink-soft); margin-top: 12px; }
.ms-qr-refresh { margin-top: 16px; }

/* ---- 会员中心 ---- */
.ms-account { display: flex; align-items: center; gap: 12px; }
.ms-acc-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: var(--r-pill); background: var(--paper-hi); border: 1px solid var(--rule); font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ms-acc-pill:hover { border-color: var(--ink-2); color: var(--ink); }
.ms-acc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-dim); }
.ms-acc-dot.ok { background: #3F8F5C; }
.ms-acc-vip { background: var(--accent); border-color: var(--accent); color: var(--btn-ink); }
.ms-acc-login { padding: 7px 16px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 600; }
.ms-acc-login:hover { background: var(--accent); color: #fff; }
.ms-acc-no { font-size: 13.5px; color: var(--ink-dim); }
/* 昵称截断层：配合窄屏顶栏 .ms-account 限宽做省略号（桌面不限宽时不生效） */
.ms-acc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ms-account-page { padding: 52px 0 88px; }
.ms-acct-card { background: var(--paper-hi); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 30px; box-shadow: var(--sh-1); margin-bottom: 22px; }
.ms-acct-h2 { font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--ink); margin: 0 0 18px; }
.ms-acct-loading { padding: 40px 0; text-align: center; color: var(--ink-dim); }
.ms-acct-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 18px 20px; border-radius: var(--r-sm); background: var(--paper-lo); margin-bottom: 16px; }
.ms-acct-vipbadge { padding: 5px 14px; border-radius: var(--r-pill); background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; }
.ms-acct-novip { padding: 5px 14px; border-radius: var(--r-pill); background: var(--paper-hi); border: 1px solid var(--rule); color: var(--ink-dim); font-size: 13px; }
.ms-acct-nick { font-family: var(--serif); font-size: 19px; font-weight: 700; color: var(--ink); }
.ms-acct-exp { font-size: 13.5px; color: var(--ink-soft); }
.ms-acct-foot { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.ms-acct-logout { padding: 8px 18px; border-radius: var(--r-pill); background: transparent; border: 1px solid var(--rule); color: var(--ink-soft); font-size: 13.5px; }
.ms-acct-logout:hover { border-color: var(--seal); color: var(--seal); }

.ms-profile-card { background: var(--paper-hi); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 28px; box-shadow: var(--sh-1); margin-bottom: 22px; }
.ms-profile-sub { font-size: 15px; color: var(--ink-soft); margin: 0 0 18px; }
.ms-profile-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 680px) { .ms-profile-fields { grid-template-columns: 1fr; } }
.ms-profile-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.ms-prof-msg { font-size: 14px; color: var(--ink-soft); margin-top: 12px; }
.ms-prof-msg.err  { color: var(--seal); }
.ms-prof-msg.ok   { color: #3F8F5C; }

.ms-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.ms-plan { background: var(--paper-hi); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 26px 24px; text-align: center; box-shadow: var(--sh-1); }
.ms-plan-badge { display: inline-block; padding: 4px 13px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-text); font-size: 12.5px; font-weight: 700; margin-bottom: 12px; }
.ms-plan-price { font-family: var(--serif); font-size: 34px; font-weight: 900; color: var(--ink); line-height: 1.2; }
.ms-plan-price small { font-size: 15px; font-weight: 400; color: var(--ink-dim); }
.ms-plan-sub { font-size: 13.5px; color: var(--ink-soft); margin: 8px 0 18px; }

/* 推广员卡 */
.ms-promo-card, .ms-promo-in, .ms-promo-left, .ms-promo-qrbox, .ms-promo-qr,
.ms-promo-prods, .ms-promo-prod, .ms-promo-stats, .ms-promo-stat,
.ms-promo-status, .ms-promo-sub, .ms-promo-link, .ms-promo-open, .ms-promo-hint { }
.ms-promo-card { background: var(--paper-hi); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 26px; box-shadow: var(--sh-1); margin-bottom: 22px; }
.ms-promo-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 26px; align-items: start; }
@media (max-width: 860px) { .ms-promo-in { grid-template-columns: 1fr; } }
.ms-promo-sub { font-size: 14.5px; color: var(--ink-soft); margin: 0 0 14px; }
.ms-promo-link { font-size: 13.5px; color: var(--ink-2); word-break: break-all; }
.ms-promo-qrbox { text-align: center; }
.ms-promo-qr { padding: 12px; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-sm); display: inline-block; }
.ms-promo-stats { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 16px; }
.ms-promo-stat b { display: block; font-family: var(--serif); font-size: 22px; color: var(--ink); }
.ms-promo-stat span { font-size: 13px; color: var(--ink-dim); }
.ms-promo-prods { margin-top: 16px; }
.ms-promo-prod {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 2px; border-top: 1px dashed var(--rule);
}
.ms-promo-prod:first-child { border-top: 0; }
.ms-promo-pinfo { flex: 1; min-width: 0; text-align: left; }
.ms-promo-pinfo b { display: block; font-size: 14px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-promo-pinfo small { display: block; font-size: 12.5px; color: var(--ink-dim); margin-top: 3px; }
.ms-promo-pinfo small em { font-style: normal; color: var(--accent-text); font-weight: 700; }
.ms-promo-rate {
    flex: none; padding: 4px 11px; border-radius: var(--r-pill);
    background: var(--accent-soft); color: var(--accent-text);
    font-size: 12.5px; font-weight: 800; white-space: nowrap;
}
.ms-promo-est { flex: none; text-align: right; min-width: 86px; }
.ms-promo-est b { display: block; font-family: var(--serif); font-size: 17px; font-weight: 900; color: var(--ink); }
.ms-promo-est span { font-size: 11.5px; color: var(--ink-dim); }
.ms-promo-status { font-size: 13.5px; color: var(--ink-dim); margin-top: 12px; }
.ms-promo-hint { font-size: 12.5px; color: var(--ink-dim); margin-top: 10px; line-height: 1.8; }
.ms-promo-open { margin-top: 14px; display: inline-block; }

.ms-tip-sub { font-size: 12.5px; color: var(--ink-dim); }
.ms-copy { cursor: pointer; }

/* ══════════════════════════════════════════════════════════════
   会员中心 2.0（2026-09-20）：身份卡 / 数据概览 / 工具墙 / 海报位
   ══════════════════════════════════════════════════════════════ */

/* 区块标题：左侧标题 + 右侧小签（如「共 24 款」） */
.ms-acct-h2 { display: flex; align-items: baseline; gap: 12px; }
.ms-acct-h2 em { font-style: normal; font-family: var(--sans); font-size: 12.5px; font-weight: 700;
    color: var(--accent-text); background: var(--accent-soft); padding: 3px 11px; border-radius: var(--r-pill); }

/* ① 会员身份卡 —— 深蓝渐变，与首页 hero 同源 */
.ms-vip-card {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center;
    padding: 30px 32px; margin-bottom: 22px;
    background: linear-gradient(150deg, #1D4A72 0%, var(--ink) 62%, #10273D 100%);
    border-radius: var(--r-md); box-shadow: 0 10px 30px rgba(23,59,92,.18);
    color: #fff;
}
.ms-vip-card::after {
    content: ''; position: absolute; right: -70px; top: -90px; width: 260px; height: 260px;
    border-radius: 50%; background: rgba(79,70,229,.20); pointer-events: none;
}
.ms-vip-ava {
    position: relative; z-index: 1; flex: none;
    width: 72px; height: 72px; border-radius: 24px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--serif); font-size: 32px; font-weight: 900; color: var(--ink);
    background: linear-gradient(135deg, #FFE9D8, #FFC79C);
}
.ms-vip-main { position: relative; z-index: 1; min-width: 0; }
.ms-vip-main .ms-acct-nick { color: #fff; font-size: 24px; }
.ms-vip-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.ms-vip-badge { padding: 5px 14px; border-radius: var(--r-pill); background: var(--accent); color: var(--btn-ink); font-size: 13px; font-weight: 800; }
.ms-vip-exp { font-size: 13.5px; color: rgba(255,255,255,.82); }
.ms-vip-novip { padding: 5px 14px; border-radius: var(--r-pill); background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); color: #fff; font-size: 13px; }
.ms-vip-binds { gap: 8px; }
.ms-vip-bind { padding: 4px 12px; border-radius: var(--r-pill); font-size: 12.5px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.70); }
.ms-vip-bind.is-on { background: rgba(240,162,94,.16); border-color: rgba(240,162,94,.38); color: var(--accent-ondeep); font-weight: 700; }
.ms-vip-side { position: relative; z-index: 1; text-align: right; flex: none; }
.ms-vip-side .ms-acct-no { color: rgba(255,255,255,.70); font-size: 13px; }
.ms-vip-cta { margin-top: 12px; }

/* ② 数据概览条 */
.ms-acct-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-md);
    overflow: hidden; margin-bottom: 26px;
}
.ms-acct-stats .ms-promo-stat { background: var(--paper-hi); padding: 20px 22px; text-align: center; }
.ms-acct-stats .ms-promo-stat b { font-size: 24px; }
.ms-acct-stats .ms-promo-stat b.hl { color: var(--accent-text); }

/* ③ 工具墙 */
.ms-acct-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 14px; margin-bottom: 26px; }
.ms-tool {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center;
    padding: 14px 16px; background: var(--paper-hi); border: 1px solid var(--rule);
    border-radius: var(--r-md); box-shadow: var(--sh-1); text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.ms-tool:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(23,59,92,.10); border-color: var(--accent); }
.ms-tool-cov { width: 54px; height: 54px; border-radius: 14px; overflow: hidden; flex: none;
    background: var(--paper-lo); display: flex; align-items: center; justify-content: center; }
.ms-tool-cov img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-tool-cov i { font-style: normal; font-size: 26px; }
.ms-tool-bd { min-width: 0; }
.ms-tool-bd b { display: block; font-size: 15px; font-weight: 700; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-tool-bd small { display: block; font-size: 12.5px; color: var(--ink-dim); margin-top: 3px; }
.ms-tool-go { font-size: 13px; color: var(--accent-text); font-weight: 700; white-space: nowrap; }

/* ④ 推广海报位 */
.ms-promo-posterwrap { margin-top: 8px; padding-top: 18px; border-top: 1px dashed var(--rule); }
.ms-promo-posterwrap .ms-tip-sub { margin: 10px 0 0; }
.ms-promo-poster { margin-top: 16px; }

@media (max-width: 760px) {
    .ms-vip-card { grid-template-columns: auto minmax(0, 1fr); padding: 24px 20px; gap: 16px; }
    .ms-vip-ava { width: 58px; height: 58px; border-radius: 19px; font-size: 26px; }
    .ms-vip-main .ms-acct-nick { font-size: 20px; }
    .ms-vip-side { grid-column: 1 / -1; text-align: left; display: flex; align-items: center; gap: 14px; }
    .ms-vip-side .ms-acct-no { margin: 0; }
    .ms-vip-cta { margin-top: 0; }
    .ms-acct-stats { grid-template-columns: 1fr; }
}

/* ── 推广明细折叠（单品链接默认收起，点标题展开） ── */
.ms-promo-foldhead { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    cursor: pointer; border-radius: var(--r-sm, 10px); padding: 2px 4px; }
.ms-promo-foldhead:hover { background: var(--paper-lo, #EDE7DA); }
.ms-promo-foldhead:focus-visible { outline: 2px solid var(--accent, #E8713C); outline-offset: 2px; }
.ms-promo-foldhead .ms-promo-sub { margin: 0; }
.ms-promo-foldhead .ms-promo-sub em { font-style: normal; color: var(--ink-dim, #5F666D); font-size: 12px; }
.ms-promo-toggle { flex: none; padding: 4px 12px; border-radius: var(--r-pill, 999px);
    background: var(--paper-lo, #EDE7DA); font-size: 12px; font-weight: 700; color: var(--ink-soft, #4F5D69); }
.ms-promo-prodlist[hidden] { display: none; }

/* ==========================================================================
   §末 · 首页「三条路径」段（2026-10-01 改版新增）

   先试 / 会员 / 定制 三条路并列。**首页不出现价格**（本站红线：家长一比价，
   教育产品就像卖货），所以三张卡只讲"能拿到什么"，价格由 /account/ 与 /diy/
   各自现读后台 —— 后台改价，首页一个字都不用动。
   ========================================================================== */
.ms-paths {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px; align-items: stretch;
}
@media (max-width: 980px) { .ms-paths { grid-template-columns: 1fr; } }

.ms-path {
    display: flex; flex-direction: column;
    padding: 32px 30px 30px;
    background: var(--paper-hi);
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    box-shadow: var(--sh-1);
    transition: transform .2s, box-shadow .2s;
}
.ms-path:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
/* 定制卡是本站最想被点的那张 —— 用橙色描边把它推出来（只占小面积，不喧宾夺主） */
.ms-path--hi { border-color: var(--accent); border-width: 1px; box-shadow: var(--sh-2); }

.ms-path-n {
    font-family: var(--serif); font-size: 13px; font-weight: 700;
    letter-spacing: .08em; color: var(--accent-text);
    margin-bottom: 12px;
}
.ms-path h3 {
    font-family: var(--serif); font-size: 22px; font-weight: 700;
    margin: 0 0 12px; line-height: 1.45;
}
.ms-path p { font-size: 14.5px; line-height: 1.9; color: var(--ink-soft); margin: 0 0 18px; }
.ms-path ul { list-style: none; padding: 0; margin: 0 0 24px; }
.ms-path li {
    position: relative; padding-left: 22px;
    font-size: 14px; line-height: 2.05; color: var(--ink-soft);
}
.ms-path li::before {
    content: ""; position: absolute; left: 2px; top: .88em;
    width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
/* 按钮统一沉到卡片底部，三张卡不管文字多少都对齐 */
.ms-path-go { margin-top: auto; }
.ms-path-go .ms-btn { width: 100%; }

/* ==========================================================================
   §末② · 首页「光域」皮肤（2026-10-01 第③版 · 定制主导 · 亮色）

   两条被否掉的路，别再走回去：
     ✗ 深空黑 —— 被用户点名否掉："烂大街的黑"。黑是省事，不是高级。
     ✗ 纸墨风 —— 米白 #F6F3EB + 暖橙 + 宋体 + 印章，是此前沿用过的旧皮肤
       ，用户要求彻底区分。

   → 本皮肤走第三条路：「光域」—— 冷白底 + 极光晕染 + 纯白卡 + 电光蓝紫。
     与纸墨风的区别是系统性的，不是换个主色：

         纸墨风（老板）              光域（新）
         ────────────────────       ────────────────────
         米白暖调 #F6F3EB           冷白 #FAFBFE
         宋体标题 + 印章            无衬线 900 大字 + 渐变字
         暖橙 #E8713C               靛蓝→紫→青 电光渐变
         小圆角 4–10px              大圆角 18–22px
         纸纹 + 横线                极光晕 + 细网格 + 多层柔影

   ⚠ 作用域 = `.mz-home`（front-page.php 给 <body> 加的类）。
     本段样式对分类页 / 详情页 / 会员页零影响，风格确认后再统一铺开。
   ========================================================================== */

.mz-home {
    /* 底与面：冷白，不是米白 */
    --mz-bg:     #FAFBFE;
    --mz-bg2:    #F3F5FA;
    --mz-card:   #FFFFFF;
    --mz-line:   rgba(15, 23, 42, .08);
    --mz-line2:  rgba(15, 23, 42, .17);

    /* 字：近黑墨蓝，不是纯黑；三档都在白底校准过 */
    --mz-t1:     #0C1526;   /* ≈16.9:1 */
    --mz-t2:     #45536A;   /* ≈8.0:1 */
    --mz-t3:     #64748C;   /* ≈5.3:1 */

    /* 电光渐变：按钮/描边用（白字档位全够），文字渐变单独一档（深色档位全够） */
    --mz-grad:     linear-gradient(105deg, #4338CA 0%, #6D28D9 52%, #2563EB 100%);
    --mz-grad-tx:  linear-gradient(100deg, #4338CA 0%, #7C3AED 48%, #0E7490 100%);

    /* 柔影：多层、低透明、带一点靛蓝——高级感一半在这里 */
    --mz-sh1: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 18px rgba(15, 23, 42, .05);
    --mz-sh2: 0 2px 6px rgba(15, 23, 42, .05), 0 18px 44px rgba(15, 23, 42, .09);
    --mz-sh3: 0 30px 70px rgba(67, 56, 202, .16);

    --mz-r:  20px;
    --mz-rs: 13px;
}

/* ---------- 底色 + 极光晕 + 细网格 ----------
   ⚠ 两个伪元素 z-index:-1：铺在画布之上、全部内容之下。 */
body.mz-home {
    background-color: var(--mz-bg);
    background-image: none;
    color: var(--mz-t1);
}
body.mz-home::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(1000px 640px at 6%  -8%, rgba(99, 102, 241, .20), transparent 62%),
        radial-gradient(820px 560px  at 96% -2%, rgba(168, 85, 247, .15), transparent 60%),
        radial-gradient(900px 560px  at 50% 112%, rgba(6, 182, 212, .14), transparent 64%);
}
body.mz-home::after {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        linear-gradient(90deg, rgba(15, 23, 42, .030) 1px, transparent 1px),
        linear-gradient(0deg,  rgba(15, 23, 42, .030) 1px, transparent 1px);
    background-size: 88px 88px;
    -webkit-mask-image: radial-gradient(125% 70% at 50% 0%, #000 0%, transparent 76%);
            mask-image: radial-gradient(125% 70% at 50% 0%, #000 0%, transparent 76%);
}

/* ---------- 字体：纸墨风靠宋体，这里反着来 ---------- */
.mz-home h1, .mz-home h2, .mz-home h3, .mz-home h4 {
    font-family: var(--sans);
    color: var(--mz-t1);
    font-weight: 800;
    letter-spacing: -.022em;
    line-height: 1.16;
}
.mz-home p { color: var(--mz-t2); }
.mz-home h1 em, .mz-home h2 em {
    font-style: normal;
    background: var(--mz-grad-tx);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- 顶栏 ---------- */
.mz-home .ms-nav {
    background: rgba(250, 251, 254, .82);
    border-bottom: 1px solid var(--mz-line);
    -webkit-backdrop-filter: saturate(170%) blur(18px);
            backdrop-filter: saturate(170%) blur(18px);
}
.mz-home .ms-logo {
    font-family: var(--sans); font-weight: 800; font-size: 20px;
    letter-spacing: .01em; color: var(--mz-t1);
}
.mz-home .ms-logo::before {
    background: var(--mz-grad); border-radius: 6px;
    box-shadow: inset 0 0 0 3px rgba(250, 251, 254, .95);
}
.mz-home .ms-logo:hover { color: var(--mz-t1); }
.mz-home .ms-menu a { color: var(--mz-t2); font-weight: 600; }
.mz-home .ms-menu a:hover { color: var(--mz-t1); }
.mz-home .ms-menu a::after { background: var(--mz-grad); height: 2px; }
.mz-home .ms-burger { background: #fff; border-color: var(--mz-line); }
.mz-home .ms-burger span { background: var(--mz-t1); box-shadow: 0 -5px 0 var(--mz-t1), 0 5px 0 var(--mz-t1); }
.mz-home .ms-acc-pill { background: #fff; border-color: var(--mz-line); color: var(--mz-t1); box-shadow: var(--mz-sh1); }
.mz-home .ms-acc-pill:hover { border-color: var(--mz-line2); color: var(--mz-t1); }
.mz-home .ms-acc-login { background: var(--mz-grad); color: #fff; }
.mz-home .ms-acc-login:hover { background: var(--mz-grad); color: #fff; filter: brightness(1.1); }
.mz-home .ms-acc-vip { background: var(--mz-grad); border-color: transparent; color: #fff; }
.mz-home .ms-acc-no, .mz-home .ms-acc-dot { color: var(--mz-t3); }
@media (max-width: 860px) {
    .mz-home .ms-navmenu { background: rgba(250, 251, 254, .97); border-bottom-color: var(--mz-line); }
    .mz-home .ms-menu a { border-bottom-color: var(--mz-line); }
}

/* ---------- 按钮 ---------- */
.mz-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 15px 32px; border-radius: var(--r-pill);
    font-family: var(--sans); font-size: 15.5px; font-weight: 700; letter-spacing: .02em;
    border: 1px solid transparent; cursor: pointer; white-space: nowrap;
    transition: transform .18s, box-shadow .18s, background .18s, color .18s, border-color .18s, filter .18s;
}
.mz-btn:hover { transform: translateY(-2px); }
.mz-btn:active { transform: translateY(0); }
.mz-btn-primary {
    background: var(--mz-grad); color: #fff;
    box-shadow: 0 12px 30px rgba(67, 56, 202, .32);
}
.mz-btn-primary:hover { color: #fff; filter: brightness(1.1); box-shadow: 0 18px 42px rgba(67, 56, 202, .40); }
.mz-btn-ghost {
    background: #fff; border-color: var(--mz-line2); color: var(--mz-t1);
    box-shadow: var(--mz-sh1);
}
.mz-btn-ghost:hover { border-color: var(--mz-t1); color: var(--mz-t1); background: #fff; }
.mz-btn--sm { padding: 11px 22px; font-size: 14px; }

/* ---------- 通用段 ---------- */
.mz-sec { padding: 100px 0; position: relative; }
.mz-sec--tint { background: var(--mz-bg2); border-top: 1px solid var(--mz-line); border-bottom: 1px solid var(--mz-line); }
.mz-sec--band {
    background:
        radial-gradient(880px 420px at 12% 0%, rgba(99, 102, 241, .12), transparent 62%),
        radial-gradient(760px 400px at 88% 100%, rgba(6, 182, 212, .10), transparent 62%),
        var(--mz-bg2);
    border-top: 1px solid var(--mz-line); border-bottom: 1px solid var(--mz-line);
}
@media (max-width: 760px) { .mz-sec { padding: 64px 0; } }

.mz-head { max-width: 760px; margin: 0 0 56px; }
.mz-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.mz-eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    margin: 0 0 18px; padding: 7px 16px 7px 12px;
    border: 1px solid var(--mz-line); border-radius: var(--r-pill);
    background: #fff; box-shadow: var(--mz-sh1);
    font-size: 12.5px; font-weight: 700; letter-spacing: .16em; color: var(--mz-t2);
}
.mz-eyebrow i { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--mz-grad); }
.mz-head h2 { font-size: clamp(30px, 3.5vw, 46px); margin: 0 0 16px; }
.mz-head p { font-size: 16.5px; line-height: 1.92; margin: 0; }
.mz-head p a { color: #4338CA; border-bottom: 1px solid rgba(67, 56, 202, .35); }
.mz-head p a:hover { color: #6D28D9; }

/* ---------- 1. 首屏 ---------- */
.mz-hero { position: relative; padding: 88px 0 84px; overflow: hidden; }
.mz-hero-in {
    display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    gap: 60px; align-items: center;
}
@media (max-width: 980px) { .mz-hero-in { grid-template-columns: 1fr; gap: 46px; } }
/* ── Hero 文字幻灯片（2026-10-02）：第一行 3.6s 轮换，第二行常驻；无 JS 时静态显示首句 ── */
.mz-rot-a{display:inline-block}
.mz-rot-a.mz-rot-out{animation:mzRotOut .34s cubic-bezier(.55,0,.55,.2) both}
.mz-rot-a.mz-rot-in{animation:mzRotIn .54s cubic-bezier(.16,.7,.3,1) both}
@keyframes mzRotOut{to{opacity:0;transform:translateY(-.4em)}}
@keyframes mzRotIn{from{opacity:0;transform:translateY(.4em)}}
.mz-rot-dots{display:flex;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.mz-rot-dots li{width:8px;height:8px;border-radius:99px;background:#E2E6F4;transition:width .3s,background .3s;cursor:pointer}
.mz-rot-dots li.on{width:26px;background:linear-gradient(90deg,#4F46E5,#0EA5E9)}
@media (prefers-reduced-motion:reduce){.mz-rot-a{animation:none !important}}

.mz-hero h1 {
    font-size: clamp(40px, 5.3vw, 74px); font-weight: 900; line-height: 1.1;
    margin: 0 0 24px; letter-spacing: -.03em;
}
.mz-hero-p { max-width: 34em; font-size: 17px; line-height: 1.95; margin: 0 0 32px; }
.mz-hero-p b { color: var(--mz-t1); font-weight: 700; }
.mz-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
/* ---- 首屏底部：学科速达条（方案 B，2026-10-02）---- */
.mz-quick {
    margin: 34px 0 0; padding: 20px 0 0;
    border-top: 1px solid var(--mz-line);
}
.mz-quick-n { font-size: 13.5px; color: var(--mz-t3); letter-spacing: .02em; }
.mz-quick-n b { color: var(--mz-t1); font-weight: 700; font-size: 17px; margin-right: 2px; }
.mz-quick-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mz-quick-chips a {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13.5px; padding: 7px 15px; border-radius: 99px;
    background: #EEEDFE; color: #3C3489; text-decoration: none;
    transition: transform .16s ease, background .16s ease;
}
.mz-quick-chips a:hover { background: #DEDBFA; transform: translateY(-1px); }
.mz-quick-chips a i {
    font-style: normal; font-size: 11.5px; line-height: 1;
    color: #534AB7; background: #fff; border-radius: 99px; padding: 3px 8px;
}

/* ---- 首屏右侧：「一句话 → 一台成品」示意（纯 CSS，零图片请求） ---- */
.mz-need {
    position: relative;
    border: 1px solid var(--mz-line); border-radius: var(--mz-r);
    background: #fff;
    box-shadow: var(--mz-sh3);
    overflow: hidden;
}
.mz-need::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: var(--mz-grad);
}
.mz-need-head {
    display: flex; align-items: center; gap: 9px;
    padding: 16px 22px; border-bottom: 1px solid var(--mz-line);
    font-size: 13px; font-weight: 700; color: var(--mz-t2); letter-spacing: .04em;
}
.mz-need-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--mz-grad); }
.mz-need-body { padding: 24px 22px 26px; }
.mz-need-said {
    position: relative; padding: 16px 18px;
    border: 1px solid var(--mz-line); border-radius: var(--mz-rs);
    background: var(--mz-bg2);
}
.mz-need-who {
    display: inline-block; margin-bottom: 8px;
    font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--mz-t2);
}
.mz-need-said p { margin: 0; font-size: 15px; line-height: 1.8; color: var(--mz-t1); }
.mz-need-arrow {
    display: flex; align-items: center; gap: 10px;
    margin: 16px 0; font-size: 13px; font-weight: 700; color: var(--mz-t3); letter-spacing: .08em;
}
.mz-need-arrow i { width: 26px; height: 2px; border-radius: 2px; background: var(--mz-grad); flex: none; }
/* 成品卡：页面唯一一处"带色"的面 —— 浅渐变底 + 渐变描边 + 深墨字，视觉焦点 */
.mz-need-prod {
    border: 1px solid transparent; border-radius: var(--mz-rs);
    background:
        linear-gradient(160deg, #EEF1FF 0%, #F4F0FE 48%, #EAF9FC 100%) padding-box,
        var(--mz-grad) border-box;
    padding: 16px 18px 18px;
}
.mz-need-prodtop {
    display: flex; align-items: center; gap: 9px; margin-bottom: 12px;
    font-size: 14.5px; font-weight: 800; color: var(--mz-t1);
}
.mz-need-metric {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 8px 0; border-bottom: 1px dashed rgba(15, 23, 42, .14);
}
.mz-need-metric:last-of-type { border-bottom: 0; }
.mz-need-metric span { font-size: 14px; color: var(--mz-t2); }
.mz-need-metric b { font-size: 17px; font-weight: 800; color: var(--mz-t1); font-variant-numeric: tabular-nums; }
.mz-need-bar { height: 6px; border-radius: 999px; background: rgba(15, 23, 42, .10); overflow: hidden; margin: 12px 0 2px; }
.mz-need-bar i { display: block; height: 100%; border-radius: 999px; background: var(--mz-grad); }
.mz-need-foot {
    padding: 14px 22px; border-top: 1px solid var(--mz-line);
    font-size: 13px; color: var(--mz-t3); letter-spacing: .02em;
}

/* ---------- 2. 痛点 ---------- */
.mz-pains { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1080px) { .mz-pains { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .mz-pains { grid-template-columns: 1fr; } }
.mz-pain {
    display: flex; flex-direction: column;
    padding: 28px 26px 26px;
    border: 1px solid var(--mz-line); border-radius: var(--mz-r);
    background: #fff; box-shadow: var(--mz-sh1);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.mz-pain:hover { transform: translateY(-4px); box-shadow: var(--mz-sh2); border-color: var(--mz-line2); }
.mz-pain-name {
    font-size: 17.5px; font-weight: 800; letter-spacing: .02em; color: var(--mz-t1);
}
.mz-pain-q {
    position: relative; margin: 0 0 20px; padding-left: 16px;
    font-size: 14.5px; line-height: 1.92; color: var(--mz-t2);
    border-left: 2px solid rgba(15, 23, 42, .14);
}
.mz-pain-a {
    margin-top: auto; padding-top: 16px; border-top: 1px solid var(--mz-line);
    font-size: 14px; line-height: 1.85; font-weight: 600; color: var(--mz-t1);
}
.mz-pain-a::before { content: "→ "; color: #0E7490; font-weight: 800; }

/* ---------- 3. 能拿到什么 ---------- */
.mz-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 980px) { .mz-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .mz-feats { grid-template-columns: 1fr; } }
.mz-feat {
    position: relative; padding: 30px 28px 28px;
    border: 1px solid var(--mz-line); border-radius: var(--mz-r);
    background: #fff; box-shadow: var(--mz-sh1);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.mz-feat:hover { transform: translateY(-4px); box-shadow: var(--mz-sh2); border-color: var(--mz-line2); }
.mz-feat h3 {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    font-size: 20px; margin: 0 0 10px;
}
.mz-feat-n {
    display: block; margin: 0;
    font-size: 12.5px; font-weight: 800; letter-spacing: .16em;
    background: var(--mz-grad-tx); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.mz-feat p { font-size: 14.5px; line-height: 1.9; margin: 0; }

/* ---------- 4. 四步流程 ---------- */
.mz-steps {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
    list-style: none; margin: 0; padding: 0;
}
@media (max-width: 1080px) { .mz-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .mz-steps { grid-template-columns: 1fr; } }
.mz-step {
    padding: 24px 22px 22px;
    border: 1px solid var(--mz-line); border-radius: var(--mz-rs);
    background: #fff; box-shadow: var(--mz-sh1);
    position: relative; overflow: hidden;
}
.mz-step::before {
    content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
    background: var(--mz-grad); opacity: .85;
}
.mz-step-n {
    display: block; margin-bottom: 12px;
    font-size: 30px; font-weight: 900; letter-spacing: -.02em;
    background: var(--mz-grad-tx); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    font-variant-numeric: tabular-nums;
}
.mz-step b { display: block; font-size: 16.5px; font-weight: 700; color: var(--mz-t1); margin-bottom: 8px; }
.mz-step p { font-size: 14px; line-height: 1.88; margin: 0; color: var(--mz-t2); }
.mz-step p strong { color: var(--mz-t1); }

/* ---------- 5. 报价 ---------- */
.mz-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
@media (max-width: 980px) { .mz-quotes { grid-template-columns: 1fr; } }
.mz-quote {
    display: flex; flex-direction: column;
    padding: 32px 28px 28px;
    border: 1px solid var(--mz-line); border-radius: var(--mz-r);
    background: #fff; box-shadow: var(--mz-sh1);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.mz-quote:hover { transform: translateY(-4px); box-shadow: var(--mz-sh2); border-color: var(--mz-line2); }
/* 主推档：渐变描边 + 靛蓝柔影，全页最想被点的那张 */
.mz-quote--hi {
    border: 1px solid transparent;
    background:
        linear-gradient(180deg, #FFFFFF 0%, #F5F4FF 100%) padding-box,
        var(--mz-grad) border-box;
    box-shadow: var(--mz-sh3);
}
.mz-quote-tag {
    align-self: flex-start; margin-bottom: 16px; padding: 5px 14px;
    border-radius: var(--r-pill); background: var(--mz-bg2);
    border: 1px solid var(--mz-line);
    font-size: 12.5px; font-weight: 700; color: var(--mz-t2); letter-spacing: .10em;
}
.mz-quote-tag--hi { background: var(--mz-grad); border-color: transparent; color: #fff; }
.mz-quote h3 { font-size: 22px; margin: 0 0 18px; }
.mz-quote-price {
    font-size: clamp(34px, 3.4vw, 44px); font-weight: 900; line-height: 1.1;
    color: var(--mz-t1); letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.mz-quote-price small { margin-left: 6px; font-size: 15px; font-weight: 600; color: var(--mz-t3); letter-spacing: 0; }
.mz-quote-term { margin: 10px 0 20px; font-size: 13.5px; color: var(--mz-t3); letter-spacing: .02em; }
.mz-quote-list { list-style: none; margin: 0 0 26px; padding: 0; }
.mz-quote-list li {
    position: relative; padding-left: 24px;
    font-size: 14.5px; line-height: 2; color: var(--mz-t2);
}
.mz-quote-list li::before {
    content: ""; position: absolute; left: 2px; top: .82em;
    width: 8px; height: 8px; border-radius: 50%; background: var(--mz-grad);
}
.mz-quote-go { margin-top: auto; }
.mz-quote-go .mz-btn { width: 100%; }
.mz-note {
    margin: 26px auto 0; max-width: 720px; text-align: center;
    font-size: 14px; line-height: 1.9; color: var(--mz-t3);
}
.mz-note strong { color: var(--mz-t1); }

/* ---------- 6. 交付 ---------- */
.mz-delivers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 980px) { .mz-delivers { grid-template-columns: 1fr; } }
.mz-deliver {
    padding: 32px 28px 28px;
    border: 1px solid var(--mz-line); border-radius: var(--mz-r);
    background: #fff; box-shadow: var(--mz-sh1);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.mz-deliver:hover { transform: translateY(-4px); box-shadow: var(--mz-sh2); border-color: var(--mz-line2); }
.mz-deliver-ico {
    width: 52px; height: 52px; border-radius: 15px; margin-bottom: 18px;
    display: flex; align-items: center; justify-content: center; font-size: 23px;
    background: linear-gradient(150deg, #EEF1FF, #EAF9FC);
    border: 1px solid rgba(67, 56, 202, .14);
}
.mz-deliver h3 { font-size: 20px; margin: 0 0 10px; }
.mz-deliver p { font-size: 14.5px; line-height: 1.9; margin: 0 0 18px; }
.mz-deliver-tag {
    display: inline-block; padding: 4px 13px; border-radius: var(--r-pill);
    background: var(--mz-bg2); border: 1px solid var(--mz-line);
    font-size: 12.5px; font-weight: 700; color: var(--mz-t2); letter-spacing: .06em;
}

/* ---------- 常见问题 ---------- */
.mz-faqs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 860px) { .mz-faqs { grid-template-columns: 1fr; } }
.mz-faq {
    padding: 26px 28px;
    border: 1px solid var(--mz-line); border-radius: var(--mz-r);
    background: #fff; box-shadow: var(--mz-sh1);
}
.mz-faq b {
    display: flex; align-items: baseline; gap: 10px;
    font-size: 16px; font-weight: 700; color: var(--mz-t1);
    margin: 0 0 10px; line-height: 1.6;
}
.mz-faq b i {
    font-style: normal; flex: none;
    font-size: 12.5px; font-weight: 800; letter-spacing: .08em;
    background: var(--mz-grad-tx); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.mz-faq p { font-size: 14.5px; line-height: 1.92; margin: 0; }

/* ---------- 7. 现成的（商品卡光域版） ---------- */
.mz-home .mx-grid { gap: 20px; }
.mz-home .mx-card {
    background: #fff; border-color: var(--mz-line); border-radius: var(--mz-r);
    box-shadow: var(--mz-sh1); color: var(--mz-t1);
}
.mz-home .mx-card:hover {
    color: var(--mz-t1); border-color: var(--mz-line2);
    box-shadow: var(--mz-sh2);
}
.mz-home .mx-card-cover { background: var(--mz-bg2); border-bottom-color: var(--mz-line); }
.mz-home .mx-card-cover--txt b { font-family: var(--sans); }
.mz-home .mx-card-stage {
    background: rgba(255, 255, 255, .92); color: var(--mz-t1); border: 1px solid var(--mz-line);
}
.mz-home .mx-card-trial { background: var(--mz-grad); color: #fff; }
.mz-home .mx-card-name { font-family: var(--sans); color: var(--mz-t1); font-weight: 700; }
.mz-home .mx-card-desc { color: var(--mz-t2); }
.mz-home .mx-card-foot { border-top-color: var(--mz-line); }
.mz-home .mx-tag { background: var(--mz-bg2); color: var(--mz-t2); }
.mz-home .mx-card-go { color: #4338CA; }
.mz-home .mx-teaser {
    background: #fff; border-color: var(--mz-line); border-radius: var(--mz-r);
    box-shadow: var(--mz-sh1);
}
.mz-home .mx-teaser b { font-family: var(--sans); color: var(--mz-t1); }
.mz-home .mx-teaser span { color: var(--mz-t3); }

/* ---------- 8. 收尾 CTA + 页脚 ---------- */
.mz-foot { padding: 96px 0 104px; }
.mz-foot-card {
    position: relative; overflow: hidden;
    max-width: 980px; margin: 0 auto; text-align: center;
    padding: 72px 40px 68px;
    border: 1px solid transparent; border-radius: 26px;
    background:
        radial-gradient(720px 340px at 50% -40%, rgba(99, 102, 241, .16), transparent 68%),
        linear-gradient(180deg, #FFFFFF 0%, #F6F5FF 100%) padding-box,
        var(--mz-grad) border-box;
    box-shadow: var(--mz-sh3);
}
.mz-foot-card h2 { font-size: clamp(30px, 3.6vw, 50px); margin: 0 0 16px; }
.mz-foot-card p { font-size: 16.5px; margin: 0 0 30px; }
.mz-home .ms-footer {
    background: #fff; border-top: 1px solid var(--mz-line); color: var(--mz-t3);
}
.mz-home .ms-footer a { color: var(--mz-t3); }
.mz-home .ms-footer a:hover { color: var(--mz-t1); }
/* 主推价卡底色带紫，t3 在上面只有 4.36 —— 这两处提一档到 t2 */
.mz-quote--hi .mz-quote-price small,
.mz-quote--hi .mz-quote-term { color: var(--mz-t2); }

/* 主推价卡底色带紫，t3 在上面只有 4.36 —— 这两处提一档到 t2 */
.mz-quote--hi .mz-quote-price small,
.mz-quote--hi .mz-quote-term { color: var(--mz-t2); }

/* ==========================================================================
   §末③ · 「光域」动能与层次增强（2026-10-01 第④版）
   --------------------------------------------------------------------------
   用户四条反馈里，这一段解决第 ① ② 条：
     ① "萌安没有 logo，看起来呆板没有设计感"
        → 文件开头：伪元素方块退休，改用内联 SVG 品牌标记（**全站生效**，
          不限首页 —— logo 是品牌资产，不该只出现在一页）。
     ② "网站整体偏素了，没有动感，没有层次感"
        → 三个动作：
          · 动感：环境光缓慢漂移 + 滚动入场（逐项错开）+ 悬停抬升 + 进度条生长
          · 层次：插入**全页唯一的暗面**（四步流程改深靛蓝）——亮色页里
            只要有一处暗，整页就有了前后景；通篇白卡才是"素"的根源
          · 细节：卡片悬停时顶部浮起一道渐变细线；左对齐标题带渐变竖条

   ⚠ 动效铁律（沿用 §12 约定）：**默认可见，JS 只负责"藏"**。
     html.mz-js 这个类只有在浏览器确认 IntersectionObserver 可用时才由
     页面底部那 12 行内联脚本加上。JS 挂了/被禁 → 页面照常显示，只是没有
     入场动画，绝不会白屏。@media (prefers-reduced-motion) 一票关闭。
   ========================================================================== */

/* ---------- ① 品牌标记（全站） ---------- */
.ms-logo { display: inline-flex; align-items: center; gap: 10px; }
/* 旧的伪元素方块（一个纯色小方块）退休 —— 现在有真标记了 */
.ms-logo::before { display: none !important; }
.ms-logo-mark {
    display: inline-flex; flex: none;
    transition: transform .34s cubic-bezier(.22, .9, .34, 1);
}
.ms-logo-mark svg {
    display: block; width: 30px; height: 30px; border-radius: 10px;
    box-shadow: 0 6px 16px rgba(67, 56, 202, .30);
    transition: box-shadow .34s;
}
/* 悬停：整块标记抬一点、转一点点 —— 只 3 度，多了就"晃" */
.ms-logo:hover .ms-logo-mark { transform: translateY(-2px) rotate(-3deg); }
.ms-logo:hover .ms-logo-mark svg { box-shadow: 0 12px 26px rgba(67, 56, 202, .42); }

/* 品牌名两段着色：AI 走品牌渐变 —— 全站唯一一处渐变大字，把 "AI" 钉成视觉锚点。
   ⚠ 渐变两端都是深色（#4338CA / #7C3AED / #0E7490），白底上最差档位 ≥ 5.3:1，
     大字阈值 3.0 —— 不是"看起来够"，是算得出来够。 */
.ms-logo-ai {
    font-weight: 900; letter-spacing: -.01em;
    background: var(--mz-grad-tx, linear-gradient(100deg, #4338CA 0%, #7C3AED 48%, #0E7490 100%));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.ms-logo-rest { font-weight: 800; color: var(--mz-t1, #0C1526); }

@media (max-width: 520px) {
    .ms-logo-mark svg { width: 26px; height: 26px; border-radius: 8.5px; }
}
@media (prefers-reduced-motion: reduce) {
    .ms-logo:hover .ms-logo-mark { transform: none; }
}

/* ---------- ②-1 环境光：让极光缓慢呼吸 ---------- */
@keyframes mz-aurora {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(-1.6%, 1.4%, 0) scale(1.07); }
    100% { transform: translate3d(1.4%, -1.2%, 0) scale(1.03); }
}
body.mz-home::before {
    animation: mz-aurora 26s ease-in-out infinite alternate;
    will-change: transform;
}

/* ---------- ②-2 滚动入场 ---------- */
html.mz-js .mz-rv {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity .72s cubic-bezier(.22, .61, .36, 1),
        transform .72s cubic-bezier(.22, .61, .36, 1);
    transition-delay: var(--mz-d, 0ms);
}
html.mz-js .mz-rv.mz-rv-in { opacity: 1; transform: none; }

/* 首屏元素不用等滚动，进页面就起（幅度给大一点，第一眼要有"起"的感觉） */
html.mz-js .mz-hero .mz-rv { transform: translateY(30px); }

/* 首屏右侧那条进度条：从 0 长到 92%，把"练完就出分"演一遍 */
@keyframes mz-grow { from { width: 0; } }
.mz-need-bar i { animation: mz-grow 1.3s cubic-bezier(.22, .61, .36, 1) .55s both; }

@media (prefers-reduced-motion: reduce) {
    body.mz-home::before { animation: none; }
    .mz-need-bar i { animation: none; }
    html.mz-js .mz-rv {
        opacity: 1 !important; transform: none !important; transition: none !important;
    }
}

/* ---------- ②-3 悬停：抬得更高、影更深、顶上浮一道渐变线 ---------- */
.mz-pain, .mz-deliver, .mz-feat { position: relative; }
.mz-pain::before, .mz-deliver::before, .mz-feat::before {
    content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 2px;
    border-radius: 0 0 3px 3px;
    background: var(--mz-grad);
    opacity: 0; transform: scaleX(.35); transform-origin: left center;
    transition: opacity .3s, transform .38s cubic-bezier(.22, .61, .36, 1);
    pointer-events: none;
}
.mz-pain:hover::before, .mz-deliver:hover::before, .mz-feat:hover::before {
    opacity: 1; transform: scaleX(1);
}

.mz-pain:hover, .mz-feat:hover, .mz-deliver:hover {
    transform: translateY(-7px);
    box-shadow: 0 4px 10px rgba(15, 23, 42, .05), 0 28px 60px rgba(67, 56, 202, .17);
}
.mz-faq:hover { border-color: var(--mz-line2); }

/* 商品卡：悬停抬升 + 封面轻推（1.04 就够，再大就"晃"了） */
.mz-home .mx-card { transition: transform .28s cubic-bezier(.22, .61, .36, 1), box-shadow .28s, border-color .28s, color .2s; }
.mz-home .mx-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 4px 10px rgba(15, 23, 42, .05), 0 28px 60px rgba(67, 56, 202, .17);
}
.mz-home .mx-card-cover { overflow: hidden; }
.mz-home .mx-card-cover > * { transition: transform .55s cubic-bezier(.22, .61, .36, 1); }
.mz-home .mx-card:hover .mx-card-cover > * { transform: scale(1.04); }

/* 首屏右侧那张卡：悬停轻浮 */
.mz-need { transition: transform .42s cubic-bezier(.22, .61, .36, 1), box-shadow .42s; }
.mz-need:hover { transform: translateY(-6px); box-shadow: 0 40px 90px rgba(67, 56, 202, .22); }

/* ---------- ②-4 层次：全页唯一的暗面（四步流程） ---------- */
.mz-sec--deep {
    position: relative; overflow: hidden;
    background: linear-gradient(148deg, #14143A 0%, #221C55 46%, #17355C 100%);
    border-top: 0; border-bottom: 0;
}
.mz-sec--deep::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(760px 380px at 12% -10%, rgba(129, 140, 248, .30), transparent 62%),
        radial-gradient(680px 340px at 92% 106%, rgba(34, 211, 238, .22), transparent 62%);
}
.mz-sec--deep > .ms-wrap { position: relative; }
.mz-sec--deep .mz-eyebrow {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .20);
    color: #D7DBF0; box-shadow: none;
}
.mz-sec--deep .mz-head h2 { color: #FFFFFF; }
.mz-sec--deep .mz-head h2 em {
    background: linear-gradient(100deg, #A5B4FC 0%, #7DD3FC 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.mz-sec--deep .mz-head p { color: #C3C9E0; }

.mz-sec--deep .mz-step {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .15);
    box-shadow: none;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.mz-sec--deep .mz-step::before {
    background: linear-gradient(90deg, rgba(165, 180, 252, .95), rgba(125, 211, 252, .95));
    opacity: .9;
}
.mz-sec--deep .mz-step:hover {
    background: rgba(255, 255, 255, .13);
    border-color: rgba(255, 255, 255, .30);
    box-shadow: 0 24px 54px rgba(0, 0, 0, .34);
}
.mz-sec--deep .mz-step b { color: #FFFFFF; }
.mz-sec--deep .mz-step p { color: #C3C9E0; }
.mz-sec--deep .mz-step p strong { color: #FFFFFF; }
.mz-sec--deep .mz-step-n {
    background: linear-gradient(100deg, #A5B4FC 0%, #7DD3FC 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- ②-5 细节：左对齐标题带一道渐变竖条 ---------- */
.mz-head:not(.mz-head--center) { position: relative; padding-left: 22px; }
.mz-head:not(.mz-head--center)::before {
    content: ""; position: absolute; left: 0; top: 5px; bottom: 4px; width: 3px;
    border-radius: 3px; background: var(--mz-grad);
}
@media (max-width: 620px) {
    .mz-head:not(.mz-head--center) { padding-left: 16px; }
}

/* ---------- ②-6 图标：线条 SVG 顶替 emoji ----------
   emoji 在不同系统渲染成完全不同的样子（Windows 彩色、部分安卓是黑白），
   这是"看着不精致"的一大来源。交付区三个 + 货架条那个都换成 1.8px 线条图标。 */
.mz-deliver-ico svg { width: 24px; height: 24px; display: block; }
.mz-deliver-ico { color: #4338CA; }
.mz-deliver:nth-child(2) .mz-deliver-ico { color: #7C3AED; }
.mz-deliver:nth-child(3) .mz-deliver-ico { color: #0E7490; }
.mx-teaser > i { display: inline-flex; align-items: center; justify-content: center; }
.mx-teaser > i svg { width: 22px; height: 22px; display: block; color: #4338CA; }

/* ============================================================ §末④ · 首屏「想法→工作台」动态板块
   2026-10-01 用户要求"这个板块要有动态感，首屏最重要，突出把你的想法变成工作台"。
   结构：客户说（打字机+光标）→ 我们做出来（成品卡浮起+数字滚动+进度条）→ 三组场景循环。
   ⚠ 渐进增强：HTML 静态第一组；.mz-need-in 由 JS 加；reduced-motion 全关。 */

/* 打字光标 */
.mz-need-caret {
  display: inline-block; width: 2px; height: 1.05em; margin-left: 3px;
  vertical-align: -0.18em; border-radius: 1px; background: var(--mz-brand, #4338CA);
  animation: mz-caret 1.06s steps(1) infinite;
}
@keyframes mz-caret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

/* 场景切换：先整卡微沉淡出（JS 换内容），再弹回 */
.mz-need-body { transition: opacity .34s ease, transform .34s ease; }
.mz-need-body.mz-need-dim { opacity: .22; transform: translateY(5px); }

/* 新场景进入：整卡从下浮起 + 成品卡渐变描边亮一次 */
.mz-need-in .mz-need-said p { animation: mz-need-rise .42s cubic-bezier(.22,.9,.34,1) both; }
.mz-need-in .mz-need-prod { animation: mz-need-pop .5s cubic-bezier(.22,.9,.34,1) .16s both; }
.mz-need-in .mz-need-arrow i { animation: mz-need-arrow .5s ease .1s both; }
@keyframes mz-need-rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes mz-need-pop { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes mz-need-arrow { from { opacity: 0; transform: translateX(-7px); } to { opacity: 1; transform: none; } }

/* 进度条：宽度变化走过渡（JS 改 width 即动画） */
.mz-need-bar i { transition: width .72s cubic-bezier(.3,.8,.3,1); }

/* 无障碍：系统要求减少动态时，全部动效关闭（HTML 静态第一组兜底） */
@media (prefers-reduced-motion: reduce) {
  .mz-need-caret, .mz-need-in .mz-need-said p, .mz-need-in .mz-need-prod, .mz-need-in .mz-need-arrow i { animation: none; }
  .mz-need-caret { display: none; }
  .mz-need-body, .mz-need-bar i { transition: none; }
}

/* ============================================================ §末⑤ · 图标系统
   2026-10-01 用户："老师、机构、家长、自媒体是不是要加个图标更好看？
   互动闯关、点读发音、自动判分这些是不是也加图标更体现动感？"

   加。但**加线条图标，不加实拍照片**：
     ① 真人照片用于商业宣传要肖像授权，风险全归自己；
     ② 照片跟「光域」这套纯几何语言打架 —— 一格写实照片能毁掉整页气质；
     ③ 线条图标是矢量的：任何分辨率都锐利，还能描边、变色、扫光、轻轻浮。
   也**不用 emoji**：emoji 在 Windows / 安卓 / iOS 是三套完全不同的画，
   同一句话在三个设备上是三个样，这正是"看着不精致"的头号来源。 */

/* ---------- ⑤-1 顶部一行：图标座 + 角色名 / 序号 ---------- */
.mz-pain-top, .mz-feat-top { display: flex; align-items: center; gap: 13px; }
.mz-pain-top { margin-bottom: 18px; }
.mz-feat-top { justify-content: space-between; margin-bottom: 16px; }

.mz-pain-ico, .mz-feat-ico {
    position: relative; overflow: hidden; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    color: #4338CA;
    border: 1px solid rgba(67, 56, 202, .16);
    background: linear-gradient(150deg, rgba(67, 56, 202, .11), rgba(14, 116, 144, .05));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
    transition: transform .34s cubic-bezier(.22, .9, .34, 1), box-shadow .34s, border-color .34s;
}
.mz-pain-ico { width: 46px; height: 46px; border-radius: 14px; }
.mz-feat-ico { width: 44px; height: 44px; border-radius: 13px; }
.mz-pain-ico svg, .mz-feat-ico svg { display: block; }

/* ---------- ⑤-2 四个角色各一色（跟着卡片顺序走，不是随机配色） ---------- */
.mz-pain:nth-child(2) .mz-pain-ico {
    color: #7C3AED; border-color: rgba(124, 58, 237, .18);
    background: linear-gradient(150deg, rgba(124, 58, 237, .12), rgba(67, 56, 202, .05));
}
.mz-pain:nth-child(3) .mz-pain-ico {
    color: #0E7490; border-color: rgba(14, 116, 144, .18);
    background: linear-gradient(150deg, rgba(14, 116, 144, .12), rgba(37, 99, 235, .05));
}
.mz-pain:nth-child(4) .mz-pain-ico {
    color: #2563EB; border-color: rgba(37, 99, 235, .18);
    background: linear-gradient(150deg, rgba(37, 99, 235, .12), rgba(124, 58, 237, .05));
}

/* ---------- ⑤-3 图上那道光：悬停时斜着扫过一次（只一次，不循环） ---------- */
.mz-pain-ico::after, .mz-feat-ico::after {
    content: ""; position: absolute; inset: -1px; border-radius: inherit;
    background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .95) 50%, transparent 68%);
    transform: translateX(-125%); pointer-events: none;
    transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}
.mz-pain:hover .mz-pain-ico::after,
.mz-feat:hover .mz-feat-ico::after { transform: translateX(125%); }

/* ---------- ⑤-4 悬停：图标座抬起来，影跟着深 ---------- */
.mz-pain:hover .mz-pain-ico,
.mz-feat:hover .mz-feat-ico {
    transform: translateY(-3px) scale(1.07);
    border-color: rgba(67, 56, 202, .32);
    box-shadow: 0 12px 26px rgba(67, 56, 202, .20), inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* ---------- ⑤-5 四个角色图标各停一拍地轻轻呼吸 ----------
   页面要"活着"，但不能像跑马灯：幅度只有 2px、周期 4.6s、四个错峰。 */
@keyframes mz-ico-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.mz-pain-ico svg { animation: mz-ico-float 4.6s ease-in-out infinite; }
.mz-pain:nth-child(2) .mz-pain-ico svg { animation-delay: .75s; }
.mz-pain:nth-child(3) .mz-pain-ico svg { animation-delay: 1.5s; }
.mz-pain:nth-child(4) .mz-pain-ico svg { animation-delay: 2.25s; }

/* ---------- ⑤-6 能力卡「价值徽标」----------
   2026-10-02 用户定调：对外只谈 AI 的价值，不谈生产方式。
   → 徽标一律写**学到的价值**（游戏化/记忆/反馈/可见的进步），
     生产方式词不进页面（含 HTML/CSS 注释——页面上同行也看得到）。 */
.mz-ai-tag {
    font-style: normal; flex: none;
    padding: 3px 10px 4px; border-radius: 999px;
    background: var(--mz-grad); color: #FFFFFF;
    font-size: 11.5px; font-weight: 800; letter-spacing: .02em;
    box-shadow: 0 4px 12px rgba(67, 56, 202, .28);
    transition: transform .3s cubic-bezier(.22, .9, .34, 1), box-shadow .3s;
}
.mz-feat:hover .mz-ai-tag {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(67, 56, 202, .36);
}

/* ============================================================ §末⑦ · 一句主张
   放在痛点之后、能力之前：先把"为什么要用 AI"这件事说透，再讲"我们能给什么"。
   （首屏与能力区之间曾有滚动态价值带，2026-10-02 应用户要求整块拆除，
     对外口径一并收窄：只谈价值，不谈做法。） */
.mz-say { padding: 64px 0 8px; text-align: center; }
.mz-say-main {
    max-width: 720px; margin: 0 auto;
    font-size: 30px; font-weight: 900; line-height: 1.42;
    letter-spacing: -.01em; color: var(--mz-t1);
}
.mz-say-main em {
    font-style: normal;
    background: var(--mz-grad-tx);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.mz-say-sub { margin: 14px 0 0; font-size: 15.5px; color: var(--mz-t3); }
@media (max-width: 620px) {
    .mz-say { padding: 44px 0 4px; }
    .mz-say-main { font-size: 23px; }
    .mz-say-sub { font-size: 14px; }
}


/* 无障碍：减少动态时，动效全部停下（内容仍然可读） */
@media (prefers-reduced-motion: reduce) {
    .mz-pain-ico svg { animation: none; }
    .mz-pain-ico::after, .mz-feat-ico::after { display: none; }
}

/* ============================================================ §末⑨ · 分类页搜索 + 三行筛选（2026-10-02）
   用户："筛选不准 + 要搜索，后面有几百款。"
   搜索是服务端 GET ?q=（无 JS 也生效）；筛选择优：学科归并 7 大科目（data-cat）+ 册次行。 */
.mx-search {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 20px; max-width: 580px;
}
.mx-search input[type="search"] {
    flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 18px;
    border: 1.5px solid var(--rule); border-radius: var(--r-pill);
    background: #FFFFFF; color: var(--ink);
    font-family: var(--sans); font-size: 15px; font-weight: 500;
    outline: none; -webkit-appearance: none; appearance: none;
    transition: border-color .18s, box-shadow .18s;
}
.mx-search input[type="search"]::placeholder { color: var(--ink-dim); }
.mx-search input[type="search"]:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3.5px var(--accent-soft);
}
.mx-search-clear { flex: none; font-size: 13.5px; font-weight: 600; color: var(--accent-text); white-space: nowrap; }
.mx-search-clear:hover { color: var(--accent-hi); }
.mx-filter-row + .mx-filter-row { margin-top: 10px; }
/* 选中 chip：光域渐变底（原深墨底退役） */
.mx-chip.is-on {
    background: linear-gradient(100deg, #4F46E5, #7C3AED);
    border-color: transparent; color: #FFFFFF; font-weight: 600;
}
.mx-chip.is-on .mx-chip-n { background: rgba(255, 255, 255, .22); color: #FFFFFF; }
@media (max-width: 640px) {
    .mx-search { margin-bottom: 16px; }
    .mx-search input[type="search"] { height: 42px; font-size: 14px; }
}

/* ── 学段直达磁贴（2026-10-02 重做：定列数网格，永不乱行）──────────────── */
.mz-quick-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.mz-quick-tiles .mx-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
    padding: 13px 6px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--mz-line);
    text-decoration: none;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.mz-quick-tiles .mx-tile:hover { transform: translateY(-2px); border-color: #CFCBEF; box-shadow: 0 10px 22px rgba(23, 26, 51, .08); }
.mz-quick-tiles .mx-tile-i { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.mz-quick-tiles .mx-tile-i svg { width: 18px; height: 18px; }
.mz-quick-tiles .mx-tile-t { font-size: 13.5px; font-weight: 700; color: var(--mz-t1); letter-spacing: .02em; }
.mz-quick-tiles .mx-tile--pre .mx-tile-i { background: #FFF0E2; color: #C2641F; }
.mz-quick-tiles .mx-tile--pri .mx-tile-i { background: #E9F0FE; color: #2C5FC4; }
.mz-quick-tiles .mx-tile--jun .mx-tile-i { background: #E6F5F0; color: #17806A; }
.mz-quick-tiles .mx-tile--sen .mx-tile-i { background: #EEEAFE; color: #5B3FBF; }
.mz-quick-tiles .mx-tile--lit .mx-tile-i { background: #FDEBF4; color: #B23F76; }
.mz-quick-tiles .mx-tile--gen .mx-tile-i { background: #EDF1F6; color: #46607A; }
@media (max-width: 1180px) { .mz-quick-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── 手机端分类页筛选区（2026-10-02 重做）──────────────────────────
   旧问题：.mx-filter 是 sticky 吸顶，筛选行 flex-wrap 在手机上折成 5~6 行，
   吸住后占掉大半屏，产品反而看不见（用户截图反馈）。
   方案：① 手机端取消吸顶（分组上下文由组头吸顶提供）；
        ② 学段/学科两行改单行横向滑动（永不折行，与手机首页货架同手法）；
        ③ 搜索框与页头压缩高度。 */
@media (max-width: 640px) {
    .ms-cat-hero { padding: 26px 0 18px; }
    .ms-cat-hero h1 { font-size: 24px; margin-bottom: 8px; }
    .ms-cat-hero p { font-size: 14px; }
    .mx-filter { position: static; padding: 10px 0 12px; }
    /* 货架区取消 PC 的 56px 顶部留白（用户反馈：筛选区与第一组之间空一大块） */
    .ms-sec--tight { padding: 8px 0 24px; }
    /* 组间距 48px 是 PC 口径，手机压紧（首组不再与筛选区隔一大段） */
    .mx-group { padding: 14px 0 8px; }
    .mx-search { margin: 0 0 12px; gap: 8px; }
    .mx-search input[type=search] { height: 40px; padding: 0 14px; font-size: 14px; }
    .mx-filter-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
        scrollbar-width: none; margin-top: 0; padding: 2px 0 4px; scroll-snap-type: x proximity; }
    .mx-filter-row + .mx-filter-row { margin-top: 8px; }
    .mx-filter-row::-webkit-scrollbar { display: none; }
    .mx-filter-label { margin-right: 4px; }
    .mx-filter-row .mx-chip { flex: none; scroll-snap-align: start; }
    .mx-chip { padding: 7px 14px; font-size: 13.5px; }
    .mx-chip--sub { padding: 6px 12px; font-size: 12.5px; }
    /* 筛选不再吸顶后，组头贴着导航下缘吸住 */
    .mx-group-head { top: calc(var(--navh) + 8px); }
}