/* ============================================================================
 * xiaoxing.css —— 小星守护产品区样式
 *
 * ⚠️ 这个文件只做一件事：**追加产品区自己的类**。
 *
 * 两条纪律（产品区需求 §7.2 / §15 陷阱 13），违反了就会长出第二套设计系统：
 *   1. **不许重定义主站的任何令牌**（--c-* / --s-* / --r-* / --sh-* / --g-*）。
 *      颜色、间距、圆角、阴影全部继承主站 —— 产品区只允许追加**一个**强调色。
 *      构建守卫会拦这个错误（"产品区 CSS 不许重定义主站令牌"）。
 *   2. **不许自己写一套组件**。能用主站的就用主站的
 *      （.btn / .tag / .card / .wrap / .section 都在 site.css 里）。
 *
 * 为什么要这么严：本项目已经吃过一次「同一份样式复制 N 份然后开始漂移」的亏。
 * 产品会变多（§1.4 约束 7），每个产品复制一份全局样式 = N 份会漂移的样式。
 *
 * ⚠️ 那个「强调色」暂时**还没有加**：需求 §7.2 规定了它是青蓝色系，
 *    但我还没读到具体色值与它允许出现的范围。
 *    **不确定的品牌规格不要自己编一个** —— 编错了比空着更难发现。
 *    等 §7.2 的规格确认后再追加，届时同步更新对比度判据表。
 * ========================================================================== */

/* ── 产品子导航（需求 §5.2）────────────────────────────────────────────────
 * 结构：面包屑一行 + 子导航一行，整体紧贴主站导航下方、随滚动一起吸顶。
 *
 * ⚠️ `top: var(--header-h)` 里的变量是主站令牌，**必须用它**而不是写 72px：
 *    导航在窄屏是 60px，写死字面值的话，错的那一个断点你多半不会去看。
 *    （2026-10-08 那个"提交成功提示条压在导航上"的缺陷，就是这个形态。） */
.subnav {
  position: sticky; top: var(--header-h); z-index: 40;   /* 低于主站导航的 50 */
  background: var(--c-bg);                               /* 实心白底：两层毛玻璃叠一起会糊 */
  border-bottom: 1px solid var(--c-border);
}

/* 面包屑：从搜索直接进来的人靠它知道「这是南谷AI工作室的一个产品」 */
.breadcrumb {
  display: flex; align-items: center; gap: var(--s-2);
  padding-top: var(--s-2);
  font-size: 13px; color: var(--c-text-mute);            /* 白底 4.99:1 ✅ */
}
.breadcrumb a { color: var(--c-text-sub); text-decoration: none; }   /* 白底 5.85:1 ✅ */
.breadcrumb a:hover { color: var(--c-primary); text-decoration: underline; }
.breadcrumb__sep { color: var(--c-text-mute); }          /* 是文字不是装饰，按文字算 */
.breadcrumb__here { color: var(--c-text); }              /* 当前页：纯文本，不做链接 */

.subnav__row {
  display: flex; align-items: center; gap: var(--s-5);
  min-height: 56px;
}
.subnav__brand {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: 17px; font-weight: 700; color: var(--c-text);
  text-decoration: none; white-space: nowrap;
}
/* 产品标记的位置留出来了（青蓝色几何折线形，§7.4）。
   在规格确认前不放任何图形 —— 见文件头的说明。 */
.subnav__mark { display: none; }

.subnav__links {
  display: flex; gap: var(--s-5);
  margin-inline-start: auto;
  /* 移动端宁可横向滚动，也不要"点开才发现"的抽屉 ——
     5 项全部一眼可见，比藏起来少一步。见 partial 里的偏离说明。 */
  overflow-x: auto; scrollbar-width: none;
}
.subnav__links::-webkit-scrollbar { display: none; }
.subnav__links a {
  padding: var(--s-2) 0;
  font-size: 15px; font-weight: 500;
  color: var(--c-text-sub); text-decoration: none; white-space: nowrap;   /* 5.85:1 ✅ */
}
.subnav__links a:hover { color: var(--c-primary); }
/* 当前子页高亮：只认 aria-current，与主站同一套逻辑（避免两套选中规则打架） */
.subnav__links a[aria-current="page"] { color: var(--c-primary); font-weight: 600; }

.subnav__cta { white-space: nowrap; }
/* ⚠️ 这里**不要**写 `.subnav a { color: ... }`：
   它的特异性 (0,1,1) 会盖掉 `.btn--primary` 的 (0,1,0) 文字色，
   导航里的按钮就会变成深灰压在蓝底上（主站 2026-10-07 踩过同一个坑，
   实测 1.07:1，几乎完全看不见）。要写就写具体到 `.subnav__links a`。 */

/* 窄屏：子导航换行，品牌与下载按钮同一行，5 个导航项占满下一行 */
@media (max-width: 1023px) {
  .subnav__row {
    flex-wrap: wrap; gap: var(--s-3);
    min-height: 0; padding-block: var(--s-2);
  }
  .subnav__links {
    order: 3; width: 100%;
    margin-inline-start: 0;
  }
  .subnav__cta { margin-inline-start: auto; }
}

/* ── 下载页（需求 §6.4，主转化页）───────────────────────────────────────────
 * 页面目标一句话：**一次就把「装得上、装得对、装得安全」办完**。
 * 所以版本卡上把「版本 / 日期 / 体积 / 架构 / 支持系统 / SHA-256 / 签名指纹」
 * 全部摆在按钮旁边 —— 家长不需要滚到别处去核对。 */

/* 版本信息：定义列表，标签定宽让值对齐成一列（扫一眼就能对） */
.dl-meta { margin: 0 0 var(--s-5); display: grid; gap: var(--s-2); }
.dl-meta > div { display: flex; gap: var(--s-3); align-items: baseline; }
.dl-meta dt { flex: 0 0 84px; font-size: 14px; color: var(--c-text-sub); }   /* 白底 5.85:1 ✅ */
.dl-meta dd { margin: 0; font-weight: 600; font-size: 15px; color: var(--c-text); }

/* 下载按钮：**移动端整宽**（拇指目标），桌面恢复自然宽度 */
.dl-cta { width: 100%; }
@media (min-width: 768px) { .dl-cta { width: auto; min-width: 280px; } }

/* 校验值：等宽字体 + 允许任意断行。
   ⚠️ SHA-256 是 64 个十六进制字符，窄屏上一定会换行；
      不写 word-break 的话它会**撑破容器**，把整页顶出横向滚动条。 */
.dl-hash {
  margin: var(--s-3) 0 0; font-size: 13px; color: var(--c-text-sub);
  word-break: break-all;
}
.dl-hash code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px; color: var(--c-text);
}

/* 风险提示：**不是装饰**。需求 §6.4 把它列为验收点，
   因为「第三方站点的安装包我们无法为其安全负责」是家长真正需要知道的一句话。
   用 --c-tag-yellow-* 而不是红色：它是提醒，不是错误。 */
.dl-warn {
  margin: var(--s-4) 0 0; padding: var(--s-3) var(--s-4);
  background: var(--c-tag-yellow-bg); color: var(--c-tag-yellow-ink);   /* 6.37:1 ✅ */
  border-radius: var(--r-md); font-size: 14px; font-weight: 600;
}

/* 历史版本：默认折叠（需求 §6.5 第 5 条：只展开最近 3 个）。
   用原生 details —— 零 JS、键盘可达、打印时也能展开。 */
.dl-history { margin-top: var(--s-5); border-top: 1px solid var(--c-border); padding-top: var(--s-4); }
.dl-history summary {
  cursor: pointer; font-weight: 600; color: var(--c-primary-strong);   /* 白底 6.03:1 ✅ */
  padding: var(--s-2) 0;
}
.dl-history table { width: 100%; border-collapse: collapse; margin-top: var(--s-3); font-size: 14px; }
.dl-history th, .dl-history td { text-align: left; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--c-border); }
.dl-history th { color: var(--c-text-sub); font-weight: 600; }

/* 扫码用的二维码：显示 148px。
   ⚠️ 图片本身**不缩放**（370px 原图直出，靠 CSS 显示尺寸缩小）——
      QR 是硬边缘图形，服务端重采样会在黑白格边缘造出灰边、拉低识别率。
      浏览器缩小图片**不会**产生同样的灰边问题（它是渲染期的抗锯齿，不是重新编码）。 */
.dl-qr {
  display: block; width: 148px; height: 148px;
  margin: var(--s-4) 0;
  background: var(--c-bg);
}

/* ══ 产品首页（需求 §6.1）══════════════════════════════════════════════════
 * 移动端优先：§5.5 要求「所有页面先在 375px 宽度上验收，再验桌面端」——
 * 顺序反了会导致手机上到处是挤成一团的卡片。所以下面所有断点都是
 * **从窄到宽**地写（先写窄屏默认，再用 min-width 加宽）。 */

/* ── ① 主视觉 ──────────────────────────────────────────────────────────────
 * ⚠️ 底色用 `--c-hero-bg`（与主站首屏同一个令牌，没有新增颜色）。
 *    《UI 页面设计规范》说那份「冲击力预算」全站唯一 ——
 *    那句约束的对象是**子页面页头**（§6.3 规定子页面一律 --c-bg-soft）。
 *    产品区首页自己就是一个首页，按同一个「每页一处大胆」的原则用同一份预算。
 *
 * ⚠️ 这一层上可用的文字色是**有限的**：实测 --c-text-mute 在这层只有 4.06、
 *    --c-primary 只有 4.46，都不达 AA。所以这里只用
 *    --c-text（15.04）/ --c-text-sub（4.76）/ --c-primary-strong（4.91）。 */
.xhero { background: var(--c-hero-bg); }
.xhero__inner {
  display: grid; gap: var(--s-6);
  padding-block: var(--s-7);
  /* 移动端首屏要装下四样东西，所以这里刻意不放大字号 */
}
.xhero h1 { font-size: 34px; line-height: 1.15; margin-bottom: var(--s-3); color: var(--c-text); }
.xhero__tagline {
  font-size: 19px; font-weight: 600; line-height: 1.5;
  color: var(--c-text); margin: 0 0 var(--s-3);
}
.xhero__sub { font-size: 15px; line-height: 1.7; color: var(--c-text-sub); margin: 0 0 var(--s-5); }
.xhero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ⚠️ hero 底色上，ghost 按钮**必须换文字色**。
 *    `.btn--ghost` 默认用 --c-primary，而 --c-primary 压在 --c-hero-bg 上
 *    只有 **4.46:1**，差 0.04 不达 AA —— 差这么一点，眼睛完全看不出来。
 *
 *    这是 2026-10-08 由**渲染期检查**抓出来的，构建守卫看不见它：
 *    守卫的判据表里列了「--c-primary-strong on --c-hero-bg」（主站首屏用的就是它），
 *    但**没有列「--c-primary on --c-hero-bg」** —— 因为主站首屏从没在 hero 上
 *    放过 ghost 按钮，那个组合不在枚举范围内。
 *    「令牌都达标」与「这个页面上的这个组合达标」是两件事（规范 §4.6）。 */
.xhero .btn--ghost { color: var(--c-primary-strong); }   /* hero 底 4.91:1 ✅ */
.xhero__meta { margin: var(--s-4) 0 0; font-size: 13px; color: var(--c-text-sub); }   /* hero 底 4.76:1 ✅ */
/* 视觉：先用真实的产品图标。等 adb 抓到界面截图后替换成手机截图 ——
   **不要用别的图凑**，一张不像本应用的图比没有图更伤信任（§8.2）。 */
.xhero__art { display: none; }
.xhero__art img { display: block; width: 176px; height: 176px; border-radius: var(--r-lg); }

@media (min-width: 768px) {
  .xhero__inner {
    grid-template-columns: 1fr auto; align-items: center;
    gap: var(--s-7); padding-block: var(--s-8);
  }
  .xhero h1 { font-size: 42px; }
  .xhero__tagline { font-size: 22px; }
  .xhero__art { display: block; }
}

/* ── ② 数据带（三个要能核实的数字）──────────────────────────────────────── */
.facts {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  text-align: center;
}
.facts strong {
  display: block; font-size: 26px; font-weight: 700; line-height: 1.2;
  color: var(--c-primary-strong);      /* 白底 6.03:1 ✅ */
}
.facts span { display: block; margin-top: var(--s-1); font-size: 14px; color: var(--c-text-sub); }
@media (max-width: 480px) {
  .facts { grid-template-columns: 1fr; gap: var(--s-4); text-align: left; }
  .facts strong { font-size: 22px; }
}

/* ── ③ 痛点对照（左痛点 / 右做法）───────────────────────────────────────────
 * ⚠️ 不用表格：表格在 375px 下要么横向滚动、要么挤成一团。
 *    两个段落上下叠，窄屏读起来最省力。
 * ⚠️ 颜色不是唯一的信息载体 —— 文字本身就把「问题」和「做法」说清了，
 *    颜色与符号只是让扫读更快（WCAG 1.4.1）。 */
.fears { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
.fears li {
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: var(--s-4) var(--s-5);
}
.fears__bad {
  margin: 0 0 var(--s-2); font-size: 15px; color: var(--c-danger);   /* soft 底 5.01:1 ✅ */
}
.fears__bad::before { content: "✕ "; }
.fears__good {
  margin: 0; font-size: 16px; font-weight: 600; color: var(--c-tag-green-ink);   /* soft 底 6.70:1 ✅ */
}
.fears__good::before { content: "✓ "; }

/* ── 区块内的小标题与「更多」链接 ─────────────────────────────────────────── */
.section__lead { margin: calc(var(--s-3) * -1) 0 var(--s-5); color: var(--c-text-sub); }
.section__more { margin: var(--s-5) 0 0; }

/* ── ⑦ 常见问题（原生 details，零 JS）────────────────────────────────────── */
.faq { display: grid; gap: var(--s-3); }
.faq details {
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: var(--s-3) var(--s-4);
}
.faq summary {
  cursor: pointer; font-weight: 600; color: var(--c-text);
  padding: var(--s-1) 0;
}
.faq summary::marker { color: var(--c-primary); }
.faq details > p { margin: var(--s-3) 0 var(--s-2); color: var(--c-text-sub); }
.faq details > p a { color: var(--c-primary-strong); }

/* ── ⑧ 回流主站的转化块 ──────────────────────────────────────────────────── */
.callout--wide { text-align: center; }
.callout__actions {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  justify-content: center; margin-top: var(--s-3);
}

/* ── ⑥ 留言列表（内容由 site.js fetch 填充）─────────────────────────────── */
.fb-list { display: grid; gap: var(--s-4); }
.fb-item {
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: var(--s-4) var(--s-5);
}
.fb-item__text { margin: 0 0 var(--s-2); font-size: 15px; color: var(--c-text); }
.fb-item__meta { margin: 0; font-size: 13px; color: var(--c-text-mute); }   /* 白底 4.99:1 ✅ */
.fb-item__reply {
  margin: var(--s-3) 0 0; padding-top: var(--s-3);
  border-top: 1px dashed var(--c-border);
  font-size: 14px; color: var(--c-text-sub);
}

/* ── 吸底转化条 / 移动端底部悬浮下载按钮 ────────────────────────────────────
 * ⚠️ 需求 §6.1 交互点 4：**两者互斥**，不能同时出现两个下载入口。
 *    这里用**同一个元素**、两种形态（靠断点切换）来保证互斥 ——
 *    做成两个元素的话，总有一天会两个同时显示。
 * ⚠️ 靠 `hidden` 属性 + JS 滚动检测控制显隐；JS 没跑时它一直是 hidden，
 *    页面照常可用（下载入口在首屏本来就有）。 */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: var(--c-bg); border-top: 1px solid var(--c-border);
  box-shadow: var(--sh-3);
  /* 避开 iPhone 的底部横条 */
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.sticky-cta__inner {
  display: flex; align-items: center; gap: var(--s-4);
  padding-block: var(--s-3);
}
.sticky-cta__text { flex: 1; font-size: 14px; color: var(--c-text-sub); }
@media (max-width: 767px) {
  /* 手机上只留按钮，句子太长了会把条撑成两行 */
  .sticky-cta__text { display: none; }
  .sticky-cta__inner { justify-content: stretch; }
  .sticky-cta .btn { width: 100%; }
}

/* 返回顶部按钮要避开吸底条，否则两个东西会叠在一起（§5.4） */
@media (max-width: 767px) {
  .to-top { bottom: 84px; }
}

/* ══ 功能说明 / 价格版本（需求 §6.2 / §6.3）══════════════════════════════════ */

/* ── 档位卡 ─────────────────────────────────────────────────────────────── */
.tier {
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: var(--s-5);
}
/* 付费档加一圈品牌色描边：两档并排时，让「推荐」的那一档先被看到。
   只加描边不加底色 —— 用底色会把「免费版」在视觉上贬低，
   而免费版正是这个产品的主力形态。 */
.tier--paid { border-color: var(--c-primary); box-shadow: var(--sh-2); }
.tier__head { margin-bottom: var(--s-5); }
.tier__head h2 { font-size: 20px; margin-bottom: var(--s-2); }
.tier__price {
  margin: 0 0 var(--s-1); font-size: 24px; font-weight: 700;
  color: var(--c-primary-strong);        /* 白底 6.03:1 ✅ */
}
.tier__note { margin: 0; font-size: 14px; color: var(--c-text-sub); }   /* 白底 5.85:1 ✅ */

.tier__list { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: grid; gap: var(--s-4); }
.tier__list h3 { font-size: 16px; margin-bottom: var(--s-1); }
.tier__list p { margin: 0; font-size: 14px; color: var(--c-text-sub); }

/* 对照列表（有 / 没有）。⚠️ 符号用真实字符而不是纯色块：
   WCAG 1.4.1 要求信息不能只靠颜色传达 —— 只靠红绿的话，色觉障碍用户读不出来。 */
.tier__list--check { gap: var(--s-2); }
.tier__list--check li { position: relative; padding-left: var(--s-5); font-size: 15px; }
.tier__list--check li::before { position: absolute; left: 0; font-weight: 700; }
.tier__list--check .yes::before { content: "✓"; color: var(--c-tag-green-ink); }
.tier__list--check .no  { color: var(--c-text-mute); }              /* 白底 4.99:1 ✅ */
.tier__list--check .no::before { content: "✕"; color: var(--c-text-mute); }

.tier__cta { margin: 0; }
.tier__cta .btn { width: 100%; }

/* ── 「我们做不到什么」/「购买前请先知道」──────────────────────────────────
 * ⚠️ 这两块都**不许折叠隐藏**（§6.2 / §6.3 各自的硬要求）。
 *    用左侧竖线而不是卡片阴影：它读起来像「一条条声明」，
 *    而不是像推荐语 —— 这两块的内容本来就不该显得讨喜。 */
.cant { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.cant li {
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-primary);
  border-radius: var(--r-md); padding: var(--s-4) var(--s-5);
  font-size: 15px; line-height: 1.75; color: var(--c-text-sub);     /* 白底 5.85:1 ✅ */
}
.cant strong { color: var(--c-text); }                              /* 白底 15.04:1 ✅ */

/* ── 表格（权限说明 / 版本记录）───────────────────────────────────────────
 * ⚠️ 窄屏一定会放不下，所以包一层横向滚动。
 *    不这么做的话表格会把整个页面撑出横向滚动条（375px 下最难看的一种破版）。 */
.table-scroll { overflow-x: auto; }
.perm, .ver {
  width: 100%; min-width: 520px;                 /* 触发上面的横向滚动 */
  border-collapse: collapse; font-size: 14px;
}
.perm th, .perm td, .ver th, .ver td {
  text-align: left; padding: var(--s-3);
  border-bottom: 1px solid var(--c-border); vertical-align: top;
}
.perm thead th, .ver thead th {
  color: var(--c-text-sub); font-weight: 600; white-space: nowrap;
}
.perm td:first-child, .ver td:first-child { white-space: nowrap; font-weight: 600; }
.ver code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }

@media (min-width: 768px) {
  .tier { padding: var(--s-6); }
}

/* ══ 常见问题 / 关于产品（需求 §6.7 / §6.10）════════════════════════════════ */

/* 窄版心：纯文字段落拉满 1120px 会很难读（一行 80+ 字），
   所以这两页的正文段落收窄到 720px。 */
.wrap--narrow { max-width: 720px; }

/* FAQ 比首页那 4 条更疏一些 —— 15 条连在一起时，密排会让人找不到自己那条 */
.faq--big { gap: var(--s-4); }
.faq--big summary { font-size: 16px; }
.faq--big > details > p { line-height: 1.8; }
.faq--big > details > p + p { margin-top: var(--s-3); }
/* 目标锚点被 sticky 导航挡住时，用户会以为"点了没反应"。
   scroll-margin-top 给锚点留出导航的高度。 */
.faq--big > details { scroll-margin-top: calc(var(--header-h) + 96px); }
/* 从 #faq-N 直达进来的那一条，高亮一下，让人知道"就是这条" */
.faq--big > details.is-target { border-color: var(--c-primary); box-shadow: var(--sh-2); }

/* 「在小星守护上」那一句：与上面引用的原文拉开层次。
   用左侧细线而不是斜体 —— 中文斜体本来就不好看，而且这也不是"引用"。 */
.tenet__note {
  margin: var(--s-3) 0 0; padding-left: var(--s-4);
  border-left: 2px solid var(--c-border);
  font-size: 15px; color: var(--c-text-sub);        /* 白底 5.85:1 ✅ */
}
.tenet__note strong { color: var(--c-text); }

/* 出口列表（§6.10 ④ 的四个出口） */
.link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.link-list li { font-size: 15px; line-height: 1.7; color: var(--c-text-sub); }
.link-list a { color: var(--c-primary-strong); font-weight: 600; }   /* 白底 6.03:1 ✅ */

/* ══ 留言板（需求 §6.8）════════════════════════════════════════════════════ */

/* 「写留言」用一个 details 包着：点标题展开，不跳页（§6.8.1）。
   summary 直接被当作按钮用，所以要去掉它默认的三角标记。 */
.write-box > summary {
  display: inline-block; list-style: none; cursor: pointer;
  width: auto; margin-bottom: var(--s-4);
}
.write-box > summary::-webkit-details-marker { display: none; }
.write-box > summary::marker { content: ""; }
.write-box[open] > summary { margin-bottom: var(--s-5); }

/* 勾选框行：文字与方框对齐，链接不被下划线撑开行高 */
.checkbox { display: flex; gap: var(--s-3); align-items: flex-start; font-size: 14px; line-height: 1.7; }
.checkbox input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; }
.checkbox a { color: var(--c-primary-strong); }                      /* 白底 6.03:1 ✅ */
.form-card input[type="checkbox"] { width: auto; }

/* 字数提示：只在快写满时出现（JS 控制 hidden） */
.char-count { margin: var(--s-2) 0 0; font-size: 13px; color: var(--c-text-mute); text-align: right; }

/* 空态 */
.fb-empty {
  padding: var(--s-6); text-align: center;
  background: var(--c-bg); border: 1px dashed var(--c-border); border-radius: var(--r-md);
  color: var(--c-text-sub);
}

/* 留言条目 */
.fb-item__head { margin: 0 0 var(--s-2); display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: baseline; }
.fb-item__head strong { color: var(--c-text); }
.fb-item__stars { color: var(--c-tag-yellow-ink); letter-spacing: 1px; }   /* 白底 6.37:1 ✅ */
.fb-item__meta { font-size: 13px; color: var(--c-text-mute); }             /* 白底 4.99:1 ✅ */
.fb-item .tag { margin-bottom: var(--s-2); }
/* 官方答复：左侧竖线 + 浅底，与用户正文区分开 */
.fb-item__reply {
  margin-top: var(--s-3); padding: var(--s-3) var(--s-4);
  background: var(--c-bg-soft); border-left: 3px solid var(--c-primary);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.fb-item__replyhead { margin: 0 0 var(--s-1); font-size: 13px; font-weight: 600; color: var(--c-primary-strong); }
.fb-item__reply p:last-child { margin: 0; font-size: 14px; color: var(--c-text-sub); }

/* ══ 使用教程（需求 §6.6）══════════════════════════════════════════════════ */

/* 页内目录：四步之间来回跳。
   ⚠️ 只在页内跳（锚点），**不做外链** —— §6.6 验收点要求
      「四步中任何一步都能在不离开本页的情况下看到配图」。 */
.guide-nav {
  position: sticky; top: var(--header-h); z-index: 35;   /* 低于子导航的 40 */
  background: var(--c-bg-soft);
  border-bottom: 1px solid var(--c-border);
}
.guide-nav .wrap { display: flex; flex-wrap: wrap; gap: var(--s-4); padding-block: var(--s-3); }
.guide-nav a {
  font-size: 14px; font-weight: 600; text-decoration: none;
  color: var(--c-primary-strong);            /* soft 底 5.9:1 ✅ */
  white-space: nowrap;
}
.guide-nav a:hover { text-decoration: underline; }

/* 小节标题前的序号。用真实文本（不是 CSS 计数器）── 屏幕阅读器也要读得到。 */
.step-no { color: var(--c-primary); margin-right: var(--s-1); }

/* 步骤列表：用原生 ol，但要自己的标记，因为默认数字离正文太远 */
.howto { list-style: none; counter-reset: howto; margin: 0 0 var(--s-5); padding: 0; display: grid; gap: var(--s-5); }
.howto > li { counter-increment: howto; position: relative; padding-left: var(--s-6); }
.howto > li::before {
  content: counter(howto); position: absolute; left: 0; top: 0;
  width: 24px; height: 24px; border-radius: var(--r-pill);
  background: var(--c-primary-soft); color: var(--c-primary-strong);   /* 浅蓝底 5.35:1 ✅ */
  font-size: 13px; font-weight: 700; line-height: 24px; text-align: center;
}
.howto h3 { font-size: 16px; margin-bottom: var(--s-2); }
.howto p { margin: 0 0 var(--s-2); color: var(--c-text-sub); }

/* 提醒块：白底 + 左侧竖线（与「做不到什么」同一套语言） */
.guide-warn {
  margin: var(--s-3) 0 0 !important; padding: var(--s-3) var(--s-4);
  background: var(--c-tag-yellow-bg); color: var(--c-tag-yellow-ink);   /* 6.37:1 ✅ */
  border-radius: var(--r-md); font-size: 14px; line-height: 1.7;
}
.guide-warn strong { color: var(--c-tag-yellow-ink); }

/* 讲解块（无障碍那句警告的解释、保活那件事）——比正文重，但不刺眼 */
.guide-callout {
  margin: var(--s-5) 0; padding: var(--s-4) var(--s-5);
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-primary); border-radius: var(--r-md);
}
.guide-callout h3 { font-size: 17px; margin-bottom: var(--s-3); }
.guide-callout p { margin: 0 0 var(--s-3); color: var(--c-text-sub); line-height: 1.8; }
.guide-callout p:last-child { margin-bottom: 0; }
.guide-callout strong { color: var(--c-text); }

/* 「必须知道的事」用警示色：它讲的是那个真实失效形态，不该看起来像普通提示 */
.guide-callout--warn { border-left-color: var(--c-tag-yellow-ink); background: var(--c-tag-yellow-bg); }
.guide-callout--warn h3 { color: var(--c-tag-yellow-ink); }
.guide-callout--warn p { color: var(--c-tag-yellow-ink); }
.guide-callout--warn strong { color: var(--c-tag-yellow-ink); }

/* 自检动作块：与讲解块区分开，因为它要用户**动手做** */
.guide-check {
  margin: var(--s-5) 0; padding: var(--s-4) var(--s-5);
  background: var(--c-bg); border: 2px solid var(--c-primary);
  border-radius: var(--r-md);
}
.guide-check h3 { font-size: 17px; margin-bottom: var(--s-3); color: var(--c-primary-strong); }
.guide-check ol { margin: 0 0 var(--s-3); padding-left: var(--s-5); display: grid; gap: var(--s-2); }
.guide-check li { color: var(--c-text-sub); line-height: 1.8; }
.guide-check li strong { color: var(--c-text); }

/* 小节锚点不要被两层 sticky（主站导航 + 子导航 + 教程目录）挡住 */
#step-1, #step-2, #step-3, #step-4 { scroll-margin-top: calc(var(--header-h) + 120px); }