/* ============================================================================
   css/theme.css — 第四梯队（信任转化 + 增值体验）新增样式
   仅做「增量」覆盖，不改动 style.css 任何既有规则（浅色默认态 100% 保持）。
   结构：
     A. 深色模式变量覆盖（同时覆盖全局 :root 与 writer 本地 :root 两套变量集）
     B. 深色模式关键表面覆盖（尽力覆盖硬色卡片/输入框/文章排版，已知局限见交付报告）
     C. 第四梯队新组件样式（主题切换 / 反馈 / 分享 / 新手引导 / 数据看板 / FAQ 折叠）
   全部新组件均使用 CSS 变量，自动适配浅色与深色。
   ============================================================================ */

/* ===========================================================================
   A. 深色模式变量覆盖（html[data-theme="dark"]）
   注：writer/index.html 自带本地 :root 使用 --navy2 / --bg / --gold-soft /
   --green / --line，此处一并覆盖，确保深色模式在 writer 页同样生效。
   =========================================================================== */
html[data-theme="dark"] {
  /* —— 全局变量集 —— */
  --navy: #0A2540;
  --navy-2: #163a5f;
  --gold: #D4AF37;
  --gold-soft: #E7C965;
  --cloud: #0E1A2B;          /* 页面底色 → 深蓝黑 */
  --ink: #E6ECF3;            /* 正文 → 云白 */
  --gray: #9FB0C3;           /* 次级文字 */
  --gray-2: #7E8CA0;
  --light: #C9D4E2;          /* 导航浅色文字 */
  --line: #25344B;           /* 分割线 */
  --free: #3FB995;           /* 免费标签降饱和青绿（提亮） */
  --white: #16263B;          /* 卡片底色 → 深蓝灰 */
  --shadow: 0 4px 16px rgba(0,0,0,.35);
  --shadow-hover: 0 12px 30px rgba(0,0,0,.5);

  /* —— writer 本地变量集（兼容其独立 :root） —— */
  --navy2: #163a5f;
  --bg: #0E1A2B;
  --green: #3FB995;
}

/* ===========================================================================
   B. 深色模式关键表面覆盖（尽力覆盖，避免硬色卡片在深色下刺眼/不可读）
   =========================================================================== */
html[data-theme="dark"] body {
  background: var(--cloud);
  color: var(--ink);
}

/* 标题统一转浅，保证深色卡片可读 */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5 {
  color: var(--ink);
}

/* 普通链接在深色下用可读金/浅蓝，不被 navy 吞掉 */
html[data-theme="dark"] a { color: var(--gold); }

/* 通用卡片/面板/表格 反色 */
html[data-theme="dark"] .section { background: transparent; }
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .price-card,
html[data-theme="dark"] .tool-card,
html[data-theme="dark"] .popular-card,
html[data-theme="dark"] .about-author-card,
html[data-theme="dark"] .script-card,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .article-card,
html[data-theme="dark"] .acta-card,
html[data-theme="dark"] .rec-item,
html[data-theme="dark"] .t4-dash {
  background: var(--white);
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] .cmp-table th,
html[data-theme="dark"] .cmp-table td {
  background: var(--white);
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"] .cmp-table .cmp-vip {
  background: #1d3251;
  color: var(--gold-soft);
}

/* 输入框/文本域/选择框 */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: #0E1A2B;
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--gray-2); }

/* 文章排版硬色覆盖 */
html[data-theme="dark"] .article-body code {
  background: #1d2735; color: #ff9db0;
}
html[data-theme="dark"] .article-quote,
html[data-theme="dark"] blockquote {
  background: #16263B; color: var(--gray);
}
html[data-theme="dark"] .article-toc {
  background: rgba(22,38,59,.94) !important;
  border-left-color: var(--line) !important;
}
html[data-theme="dark"] .article-toc a { color: var(--gray-2); }
html[data-theme="dark"] .popular-card { color: var(--ink); }

/* 会员对比表周边容器在深色下保留边框 */
html[data-theme="dark"] .pricing-grid,
html[data-theme="dark"] .cmp-wrap { color: var(--ink); }

/* ===========================================================================
   C. 第四梯队新组件样式
   =========================================================================== */

/* —— C.1 主题切换按钮（注入到导航） —— */
.t4-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 6px 12px;
  margin-left: 8px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: var(--light);
  font-size: 14px;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
  white-space: nowrap;
}
.t4-theme-toggle:hover {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
}
.t4-theme-toggle svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
html[data-theme="dark"] .t4-theme-toggle { color: var(--gold-soft); border-color: rgba(212,175,55,.4); }
html[data-theme="dark"] .t4-theme-toggle:hover { background: var(--gold); color: var(--navy); }

/* —— C.2 反馈入口（固定左下，低打扰） —— */
.t4-feedback-btn {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s;
}
.t4-feedback-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.t4-feedback-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }

/* 反馈弹窗 */
.t4-modal-mask {
  position: fixed; inset: 0; z-index: 200;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(10,25,45,.55);
  padding: 20px;
}
.t4-modal-mask.open { display: flex; }
.t4-modal {
  width: 100%; max-width: 440px;
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
  padding: 22px 22px 18px;
  position: relative;
}
.t4-modal h3 { margin: 0 0 6px; font-size: 18px; color: var(--navy); }
html[data-theme="dark"] .t4-modal h3 { color: var(--gold-soft); }
.t4-modal p.t4-modal-sub { margin: 0 0 14px; font-size: 13px; color: var(--gray); }
.t4-modal textarea {
  width: 100%; min-height: 110px; resize: vertical;
  padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  font-size: 14px; font-family: inherit; line-height: 1.6;
  background: var(--cloud); color: var(--ink);
}
.t4-modal textarea:focus { outline: none; border-color: var(--gold); }
.t4-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.t4-btn {
  padding: 9px 18px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 700;
  cursor: pointer; border: 1.5px solid transparent;
}
.t4-btn-ghost { background: transparent; color: var(--gray); border-color: var(--line); }
.t4-btn-primary { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.t4-btn-primary:hover { opacity: .92; }
.t4-modal-close {
  position: absolute; top: 10px; right: 12px;
  width: 30px; height: 30px; border: none; background: transparent;
  color: var(--gray); font-size: 22px; line-height: 1; cursor: pointer;
}
.t4-modal-ok { text-align: center; color: var(--free); font-weight: 700; padding: 18px 0 6px; }

/* —— C.3 分享 FAB（工具/文章页，固定右下） —— */
.t4-share-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border: none;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-hover);
}
.t4-share-fab:hover { background: var(--navy-2); }
.t4-share-fab svg { width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 2; }
.t4-share-pop {
  position: fixed;
  right: 18px;
  bottom: 70px;
  z-index: 61;
  display: none;
  width: 240px;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
  padding: 14px;
}
.t4-share-pop.open { display: block; }
.t4-share-pop .t4-share-title { font-size: 13px; color: var(--gray); margin-bottom: 10px; }
.t4-share-row { display: flex; gap: 8px; margin-bottom: 8px; }
.t4-share-row .t4-btn { flex: 1; padding: 9px 0; text-align: center; }
.t4-share-wx {
  font-size: 12px; color: var(--gray); line-height: 1.6;
  background: var(--cloud); border-radius: var(--radius-sm); padding: 8px 10px;
}
.t4-share-wx b { color: var(--navy); }
html[data-theme="dark"] .t4-share-wx b { color: var(--gold-soft); }
.t4-copy-ok { color: var(--free); font-size: 12px; margin-left: 6px; }

/* —— C.4 新手引导（复杂工具页，一次性，底部居中，不遮挡） —— */
.t4-onboard {
  position: fixed;
  left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 62;
  max-width: min(560px, calc(100vw - 32px));
  display: flex; align-items: center; gap: 12px;
  background: var(--navy);
  color: #fff;
  border-radius: 999px;
  padding: 10px 14px 10px 18px;
  box-shadow: var(--shadow-hover);
  font-size: 13px;
  line-height: 1.5;
}
.t4-onboard .t4-onboard-txt { flex: 1; }
.t4-onboard .t4-onboard-txt b { color: var(--gold); }
.t4-onboard .t4-onboard-close {
  flex: none;
  border: 1px solid rgba(255,255,255,.3);
  background: transparent; color: #fff;
  border-radius: 999px; padding: 5px 12px; font-size: 12px; cursor: pointer;
}
.t4-onboard .t4-onboard-close:hover { background: var(--gold); color: var(--navy); border-color: var(--gold); }

/* —— C.5 数据看板（index #pricing 上方） —— */
.t4-dash {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0 auto 34px;
  max-width: 880px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 24px;
  text-align: center;
}
.t4-dash-cell { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.t4-dash-ico {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--cloud); color: var(--navy);
}
.t4-dash-ico svg { width: 20px; height: 20px; stroke: var(--navy); fill: none; stroke-width: 2; }
html[data-theme="dark"] .t4-dash-ico { background: #0E1A2B; color: var(--gold-soft); }
html[data-theme="dark"] .t4-dash-ico svg { stroke: var(--gold-soft); }
.t4-dash-num { font-size: 26px; font-weight: 800; color: var(--navy); line-height: 1.1; }
html[data-theme="dark"] .t4-dash-num { color: var(--gold-soft); }
.t4-dash-label { font-size: 13px; color: var(--gray); }
@media (max-width: 600px) {
  .t4-dash { grid-template-columns: 1fr; gap: 14px; }
}

/* —— C.6 FAQ 折叠（index 面板 + /faq.html 通用） —— */
.t4-faq { margin: 30px auto 0; max-width: 820px; }
.t4-faq-head { text-align: center; margin-bottom: 18px; }
.t4-faq-head h3 { font-size: 22px; color: var(--navy); margin-bottom: 6px; }
html[data-theme="dark"] .t4-faq-head h3 { color: var(--gold-soft); }
.t4-faq-head p { color: var(--gray); font-size: 14px; }
.t4-faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  margin-bottom: 12px;
  overflow: hidden;
}
.t4-faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left;
  padding: 15px 18px;
  background: transparent; border: none; cursor: pointer;
  font-size: 15px; font-weight: 700; color: var(--navy);
  font-family: inherit;
}
html[data-theme="dark"] .t4-faq-q { color: var(--gold-soft); }
.t4-faq-q .t4-faq-ico {
  flex: none; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s; color: var(--gold);
}
.t4-faq-q .t4-faq-ico svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.t4-faq-item.open .t4-faq-ico { transform: rotate(45deg); }
.t4-faq-a {
  display: none;
  padding: 0 18px 16px;
  font-size: 14px; line-height: 1.8; color: var(--gray);
}
.t4-faq-item.open .t4-faq-a { display: block; }
.t4-faq-a b { color: var(--navy); }
html[data-theme="dark"] .t4-faq-a b { color: var(--gold-soft); }

/* —— C.7 404 快捷入口清单 —— */
.nf-links { margin: 22px auto 0; max-width: 560px; text-align: center; }
.nf-links .nf-links-title { font-size: 14px; color: var(--gray); margin-bottom: 12px; }
.nf-links ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 0; margin: 0; }
.nf-links li a {
  display: inline-block; padding: 8px 16px;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--navy); font-size: 14px; text-decoration: none;
  transition: border-color .18s, color .18s;
}
.nf-links li a:hover { border-color: var(--gold); color: var(--gold); }

/* ===========================================================================
   D. 全站图标统一规范（龙渊阁图标规范数值文档 / ICON-SPEC.md）
   ------------------------------------------------------------------------
   仅做增量覆盖；style.css 既有规则一律不动。
   设计语言：线性图标、stroke=currentColor（自动适配深浅）、stroke-width 2、
   round 端点、flex-shrink:0 防拉伸、与文字间距 8px、垂直居中。
   尺寸阶梯：
     .icon-nav   20px  导航 / 顶栏图标（如主题切换按钮）
     .icon-base  24px  卡片默认 / 内联图标基线（后续新增图标默认挂此）
     .icon-sm    18px  弹窗 / 小字 / 辅助图标（FAQ 折叠、反馈、分享等）
   说明：工具卡主图标经本轮专项由 48px 分级缩尺至 36px(桌面)/32px(移动)，见 F 段；
        本规范面向「内联 / 通用功能图标」统一标准，并通过 CSS 选择器把站点现有
        功能图标（tier4 注入组件等）校准到上述阶梯，无需改动 HTML/JS。
   =========================================================================== */

/* —— D.0 通用基线：统一描边、防拉伸、基线尺寸 —— */
.icon-base,
.icon-sm,
.icon-nav,
.t4-theme-toggle svg,
.t4-feedback-btn svg,
.t4-share-fab svg,
.t4-faq-ico svg {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* —— D.1 尺寸阶梯 —— */
.icon-base { width: 24px; height: 24px; }
.icon-sm   { width: 18px; height: 18px; }
.icon-nav  { width: 20px; height: 20px; }

/* —— D.2 站点现有功能图标校准到阶梯（CSS 选择器覆盖，不改 HTML） —— */
/* 导航 / 顶栏：主题切换按钮（注入到导航） → icon-nav 20px */
.t4-theme-toggle svg { width: 20px; height: 20px; }
/* 弹窗 / 小字 / 辅助：反馈入口、分享 FAB、FAQ 折叠 plus 图标 → icon-sm 18px */
.t4-feedback-btn svg { width: 18px; height: 18px; }
.t4-share-fab svg    { width: 18px; height: 18px; }
.t4-faq-ico svg      { width: 18px; height: 18px; }
/* 数据看板图标沿用 20px 基线（与导航同阶，置于彩色圆底内） */
.t4-dash-ico svg     { width: 20px; height: 20px; }

/* —— D.3 图标与文字间距 8px + 垂直居中（统一） —— */
.t4-theme-toggle,
.t4-feedback-btn,
.t4-share-fab,
.t4-faq-q {
  gap: 8px;
  align-items: center;
}

/* ===========================================================================
   E. Hero 金色装饰背景 SVG 分级缩尺（本轮专项：首屏装饰过重 / 挤占首屏）
   ------------------------------------------------------------------------
   现有 .hero-bg（style.css，未改）：position:absolute;inset:0;width:100%;
   height:100%;opacity:.5;pointer-events:none；.hero 已 overflow:hidden（不横溢）。
   关键修复：必须显式覆盖 style.css 的 width:100% / height:100%，否则
   max-width 无法阻止 SVG 被拉伸撑满整个 Hero 容器（截图中的巨大圆环/尾巴
   就是水波 SVG 被 preserveAspectRatio="none" 畸形放大的结果）。
   本轮增量覆盖：
   · 桌面：直接定宽 min(180px,20vw)、height:auto 保比例、max-height:90px
           兜底；opacity .18 大幅弱化；用 inset:auto auto 0 0 锚定底部左侧，
           向下偏移、避开主标题，仅保留底部氛围感（不遮挡首屏文案）。
   · 移动端(≤768px)：定宽 min(120px,30vw)、max-height:60px、opacity .12。
   =========================================================================== */
.hero-bg {
  position: absolute;
  inset: auto auto 0 0;
  width: min(180px, 20vw);
  height: auto;
  max-height: 90px;
  opacity: .18;
  pointer-events: none;
}
@media (max-width: 768px) {
  .hero-bg {
    width: min(120px, 30vw);
    max-height: 60px;
    opacity: .12;
  }
}

/* 全局 Hero 装饰 SVG 标准类：后续新增 Hero 装饰直接复用此标准 */
.hero-decor-svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  opacity: .5;
  pointer-events: none;
}
@media (max-width: 768px) {
  .hero-decor-svg { opacity: .32; }
}

/* ===========================================================================
   F. 图标分级缩尺优化（本轮专项：板块 / 卡片 / 区块大图标收敛）
   ------------------------------------------------------------------------
   全部为对 style.css 既有规则的「增量覆盖」，不改 HTML/JS、不改 style.css。
   目标：弱化过大图标对内容的挤占，统一板块视觉比例。
   =========================================================================== */

/* —— F.1 工具卡主图标：48px → 36px(桌面) / 32px(移动)，保持居中、不拉伸 —— */
.tool-icon { width: 32px; height: 32px; margin-bottom: 16px; }
.tool-icon svg { width: 32px; height: 32px; }
@media (max-width: 768px) {
  .tool-icon { width: 28px; height: 28px; margin-bottom: 14px; }
  .tool-icon svg { width: 28px; height: 28px; }
}

/* —— F.2 信任区图标：收敛至 32px（板块大图标 32-36 区间） ——
   注：实测 style.css 中 .trust-ico svg 当前为 26px（非指令所述 50px；
   疑为用户对容器 font-size:40px 的视觉误判）。按「板块大图标收敛至 32-36px」
   目标收敛至 32px，避免过度放大。若需严格 36px 改此处即可。 */
.trust-ico svg { width: 32px; height: 32px; }

/* —— F.3 脚本库图标：32px → 28px —— */
.script-icon { width: 28px; height: 28px; }
.script-icon svg { width: 28px; height: 28px; }

/* —— F.4 数据看板图标容器：38px → 32px（内置 svg 保持 20px） —— */
.t4-dash-ico { width: 32px; height: 32px; }

/* —— F.5 相关工具推荐 .rt-icon：font-size 30/28px → 24px —— */
.rt-icon { font-size: 24px; }
@media (max-width: 768px) { .rt-icon { font-size: 24px; } }

/* —— F.6 特色 / 高亮卡片图标：统一 28px ——
   注：feat-card 内为 .fi-icon（原 26px，+2 统一至 28）；
       hl-card 内为 .hl-icon（容器原 56px、内置 svg 28px），按「图标 28px」将容器收敛至 28px。 */
.fi-icon { width: 28px; height: 28px; font-size: 28px; }
.fi-icon svg { width: 28px; height: 28px; }
.hl-icon { width: 28px; height: 28px; }
.hl-icon svg { width: 28px; height: 28px; }

/* —— F.7 文章内工具 CTA 卡片 .acta-ico：容器 30px → 24px（svg 保持 24px） —— */
.acta-ico { flex: 0 0 24px; width: 24px; height: 24px; }

/* —— F.8 404 页面大号「404」字样：120px → 80px（移动端 88px → 60px） ——
   注：404 页无独立 svg 图标，最大视觉元素即 .nf-code 数字，按指令收敛。 */
.nf-code { font-size: 80px; }
@media (max-width: 768px) { .nf-code { font-size: 60px; } }

/* —— F.9 通用基线加固：全量图标 flex-shrink:0（防弹性布局拉伸变形） —— */
.tool-icon, .trust-ico, .script-icon,
.t4-dash-ico, .rt-icon, .fi-icon, .hl-icon, .acta-ico,
.t4-theme-toggle, .t4-feedback-btn, .t4-share-fab, .t4-faq-q, .t4-onboard-close {
  flex-shrink: 0;
}

/* —— F.10 图标-文字行内间距统一 8px（仅作用已确认的图标+文字弹性容器，避免破坏卡片级留白） —— */
.acta-card { gap: 8px; }

/* ===========================================================================
   G. 首页视觉提质（仅 theme.css 增量覆盖，不动 HTML / JS / style.css）
   ------------------------------------------------------------------------
   问题：上一轮把 Hero 装饰缩到极淡后，首屏变成空旷纯色块；且日更→热门→
   脚本→会员连续大片白底区块黏连，整体「单调 / 不协调」。
   手法（全部为对 style.css / daily.css 既有规则的增量覆盖）：
   ① Hero 对角深蓝渐变 + 右上金色环境光晕 + 左下冷光，叠加极淡细网点纹理
      （向下淡出），增加层次、弱化纯色块感；
   ② 全站「区块标题」统一金色短装饰条，建立贯穿全站的设计语言，同时打破
      长串白底区块的视觉黏连；
   ③ Hero 主标题与信任卡加金色顶/底装饰，呼应品牌金、增加卡片层次。
   =========================================================================== */

/* —— G.1 Hero 层次：对角深蓝渐变 + 右上金光 + 左下冷光 —— */
.hero {
  background:
    radial-gradient(120% 85% at 82% -12%, rgba(212,175,55,.16), transparent 52%),
    radial-gradient(90% 75% at 2% 112%, rgba(22,58,95,.55), transparent 60%),
    linear-gradient(157deg, #0A2540 0%, #0d2e51 52%, #0A2540 100%);
}

/* —— G.2 Hero 细网点纹理（极淡，向下淡出，不抢内容） —— */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.4px);
  background-size: 22px 22px;
  opacity: .5;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 95% at 50% 0%, #000 30%, transparent 78%);
          mask-image: radial-gradient(120% 95% at 50% 0%, #000 30%, transparent 78%);
}

/* —— G.3 Hero 主标题金色短装饰条（与区块标题统一语言） —— */
.hero h1 { position: relative; }
.hero h1::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  border-radius: 3px;
  margin: 20px auto 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft));
}

/* —— G.4 全站区块标题统一金色短装饰条（贯穿设计语言，打破白底黏连） —— */
.section-head { position: relative; }
.section-head h2::after {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  border-radius: 3px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft));
}

/* —— G.5 信任卡金色顶边（呼应品牌金，增加卡片层次） —— */
.trust-card { border-top: 3px solid rgba(212,175,55,.85); }

/* ===========================================================================
   H. 首页 UI 提质（本轮专项：视觉质感 + 转化效率）
   ------------------------------------------------------------------------
   作用域：全部规则限定在 <body class="home">，绝不泄漏到 article / 工具页 /
   404 等其它页面（theme.css 为全站共享覆盖层，必须作用域隔离）。
   覆盖：body 底色 / --gold-light / 免费标签 / 行高 / 标题层级 / 工具卡 hover /
   热门标签 / 箭头动效 / 双 CTA / 导航毛玻璃 / 按钮反馈 / 卡片淡入 /
   Hero 卖点卡 / 移动端单列 + 价格表列表化。
   =========================================================================== */

/* —— H.1 设计令牌：新增金色辅助变体（用于分割线 / 边框等装饰） —— */
:root { --gold-light: #E7C965; }

/* —— H.2 页面底色 #F8F9FA → #F5F6F8（更浅更纯净） —— */
.home { background: #F5F6F8; }

/* —— H.3 正文行高 1.7 → 1.8（仅首页） —— */
.home { line-height: 1.8; }

/* —— H.4 标题层级（首页，确保清晰节奏） —— */
.home .hero h1 { font-size: 48px; font-weight: 700; line-height: 1.25; }
.home .section-head h2,
.home .about-author-card h2,
.home .membership .section-head h2 { font-size: 28px; font-weight: 600; }
.home .tool-cat-head h3,
.home .tool-card h3 { font-size: 20px; font-weight: 600; }
@media (max-width: 768px) {
  .home .hero h1 { font-size: 32px; }
}

/* —— H.5 免费标签：绿色 → 香槟金底白字（首页工具卡） —— */
.home .tool-tag-free {
  background: var(--gold);
  color: #fff;
  border: none;
}

/* —— H.6 Hero 文案层级 + 卖点小卡片 —— */
.home .hero-gold { color: var(--gold); }
.home .hero-lead {
  font-size: 20px;
  color: #CCCCCC;
  max-width: 600px;
  margin: 14px auto 0;
  line-height: 1.6;
}
.home .hero-points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin: 28px 0 8px;
  padding: 0;
  list-style: none;
}
.home .hero-point-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 20px;
  color: var(--navy);
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(10,37,64,.08);
}
.home .hero-point-card svg { width: 22px; height: 22px; flex-shrink: 0; }
@media (max-width: 768px) {
  .home .hero-points { flex-direction: column; align-items: stretch; }
  .home .hero-point-card { justify-content: center; }
}

/* —— H.7 Hero 双 CTA —— */
.home .hero-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 12px;
}
.home .btn-ghost-light {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.55);
}
.home .btn-ghost-light:hover {
  background: rgba(255,255,255,.12);
  border-color: #fff;
}
/* 主 CTA 改为香槟金实底（原白底金字，更突出转化） */
.home .hero-btns .btn-free {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
}
.home .hero-btns .btn-free:hover {
  background: var(--gold-light);
  box-shadow: 0 0 0 3px rgba(212,175,55,.25);
}

/* —— H.8 工具卡：位置 / emoji / 热门标签 / 箭头动效（基础态） —— */
.home .tool-card {
  position: relative;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.home .tool-emoji { margin-right: 6px; font-size: 1.05em; line-height: 1; }
.home .tool-hot {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 2px 10px;
  line-height: 1.6;
  box-shadow: 0 1px 4px rgba(10,37,64,.12);
}
.home .btn-tool { transition: padding-right .2s ease, background .2s ease, color .2s ease; }
.home .tool-card:hover .btn-tool { padding-right: 30px; } /* 箭头随内边距右移 */

/* —— H.9 工具卡入场淡入+上浮（由 main.js IntersectionObserver 触发 .revealed） —— */
.home.js-reveal .tool-card {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.home.js-reveal .tool-card.revealed {
  opacity: 1;
  transform: translateY(0);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

/* —— H.10 工具卡 hover 上浮 + 香槟金边框 + 加深阴影 —— */
.home .tool-card:hover,
.home .tool-card.revealed:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 8px 30px rgba(10,37,64,.12);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

/* —— H.11 按钮点击下沉反馈 —— */
.home .btn,
.home .btn-tool { transition: all .18s ease, transform .1s ease; }
.home .btn:active,
.home .btn-tool:active { transform: scale(.97); transition: transform .1s ease; }

/* —— H.12 导航栏滚动毛玻璃 —— */
.home .site-nav { transition: background .3s ease, backdrop-filter .3s ease, border-color .3s ease; }
.home .site-nav.scrolled {
  background: rgba(10,37,64,.85);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border-bottom-color: rgba(212,175,55,.3);
}

/* —— H.13 移动端适配 —— */
@media (max-width: 768px) {
  .home .tools-grid { grid-template-columns: 1fr; }
  /* 价格对比表 → 列表形式（非横向滚动） */
  .home .cmp-table,
  .home .cmp-table thead,
  .home .cmp-table tbody,
  .home .cmp-table tr,
  .home .cmp-table th,
  .home .cmp-table td { display: block; width: 100%; box-sizing: border-box; }
  .home .cmp-table thead { display: none; }
  .home .cmp-table tr {
    margin-bottom: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
  }
  .home .cmp-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: none;
    border-top: 1px solid var(--line);
    text-align: right;
  }
  .home .cmp-table tr td:first-child {
    border-top: none;
    background: #FBFCFD;
    font-weight: 600;
    color: var(--navy);
    text-align: left;
  }
  .home .cmp-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--gray);
    text-align: left;
    flex: 0 0 auto;
  }
  .home .cmp-table td.cmp-vip { color: var(--gold); font-weight: 600; }
}