/* ============================================================
   二级页公共底座：方案 G「蓝色渐变矮页头 + 浅色正文」（作用域 .page-g）
   设计稿：docs/preview/ai-images/二级页-G风格/1~5-*.png；首页同风格见 home-g.css（本文件不依赖它，二级页不要引 home-g.css）
   配色只用 App 色：主色 #3B82F6 → #2563EB，深蓝 #1D4ED8，页头 #1D4ED8 → #3B82F6 → #38BDF8，
   浅蓝 #EFF6FF / #DBEAFE，底色 #F5F7FA / 白，正文 #1F2937，次要 #6B7280；琥珀 #F59E0B 只给「热门 / 会员」，免费用浅绿。
   禁止：紫色、emoji 图标、卡片左侧彩色竖条、卡通手绘。小图标用 lucide（<i data-lucide="xx">），大图标用 /assets/site/img/g/*.png。

   ── 页面骨架（照抄）──────────────────────────────────────────
   <head>
     ...title / keywords / description / {include file="common/seo_head" /}
     <link rel="stylesheet" href="__CDN__/assets/site/css/style.css?v=...">
     <link rel="stylesheet" href="__CDN__/assets/site/css/home.css?v=...">     ← 导航 / 页脚样式在这里
     <link rel="stylesheet" href="__CDN__/assets/site/css/page-g.css?v=...">
     <script>document.documentElement.className += " js-motion";</script>      ← 要 [data-reveal] 进场动效才加
   </head>
   <body>
     <div class="page page-g" id="top">
       {include file="common/header" /}
       <main>
         <section class="pg-hero"> ...页头，见下 </section>
         <section class="pg-section"> <div class="pg-wrap"> ... </div> </section>
         <section class="pg-section pg-section--soft"> ... </section>
         <section class="pg-download"> ...下载横幅，见下 </section>
       </main>
       {include file="common/footer" /}
     </div>
     <script src="__CDN__/assets/site/js/lucide.min.js"></script>
     <script src="__CDN__/assets/site/js/ui.js?v=..."></script>   ← 必须引：透明导航、滚动变白、lucide 渲染都靠它
   </body>

   ── 导航 ──
   .page-g 下导航 position: fixed 压在页头上；桌面端（>960px）未滚动时透明白字，滚动超过 8px 加 .is-scrolled 恢复浅色底。
   透明态挂在 html[data-nav-overlay="true"] 下：这个标记和滚动判断由 common/header.html 开头的内联脚本在导航画出来之前设置，
   第一帧就是透明的，切页不闪白；ui.js 自己也会切 .is-scrolled，两边结果一致。手机端（≤960px）导航始终是浅色底。
   当前项和悬停的下划线统一写在 home.css「导航下划线」段。
   当前项高亮由控制器的 $navActive 决定（features / articles / help / about），模板里不用管。

   ── 页头 .pg-hero（约 360px）/ .pg-hero--slim（约 280px，文章详情用）──
   <section class="pg-hero">                                  可加 .pg-hero--slim；下一段是浅灰区时加 .pg-hero--to-soft（底部渐隐到 #F5F7FA）
     <div class="pg-wrap pg-hero-inner">
       <div class="pg-hero-copy">
         <nav class="pg-crumb" aria-label="面包屑"><a href="/">首页</a><a href="/articles.html">教程中心</a><span aria-current="page">使用教程</span></nav>
         <h1>{$site.name|htmlentities}能做什么</h1>            ← 全页唯一 h1
         <p class="pg-hero-sub">一句白色副标题</p>             ← .pg-hero-copy 下直接写 p 也是这个样式
         <p class="pg-hero-meta"><span>使用教程</span><time datetime="...">2026-09-29</time><span>6 分钟阅读</span></p>   ← 文章详情用，项之间自动加「·」
         <div class="pg-hero-actions">
           <a class="pg-btn pg-btn--white" href="#download"><i data-lucide="download"></i>免费下载</a>
           <a class="pg-btn pg-btn--ghost" href="/help">看收费说明</a>
         </div>
         <div class="pg-chips">                                   ← 教程列表页的分类筛选（白色胶囊）
           <a class="pg-chip is-active" href="..." aria-current="page">全部教程</a><a class="pg-chip" href="...">使用教程</a>
         </div>
       </div>
       <div class="pg-hero-art" aria-hidden="true">               ← 右侧漂浮 3D 图标，直接放 1～3 张 img（按顺序自动排位）；640px 以下隐藏
         <span class="pg-hero-wave"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span>   ← 可选声波
         <img src="__CDN__/assets/site/img/g/video-file-to-text.png" alt="" width="200" height="200">
         <img src="__CDN__/assets/site/img/g/audio-to-text.png" alt="" width="200" height="200">
         <img src="__CDN__/assets/site/img/g/image-to-text-ocr.png" alt="" width="200" height="200">
       </div>
     </div>
   </section>

   ── 内容区 ──
   .pg-section            白底区块（上下 80px）；.pg-section--soft 浅灰底；.pg-section--tight 上下 48px
   .pg-section--overlap   紧跟页头的第一段，内容往上压 48px 盖住页头底部（教程列表的置顶卡、文章详情正文卡用）
   .pg-wrap               1200px 居中容器（左右 24px）
   .pg-head               区块标题：<div class="pg-head"><h2>11 个工具，一个账号全能用</h2><p>副标题</p></div>
                          .pg-head--center 居中；.pg-head--row 左标题右链接（<div class="pg-head pg-head--row"><div><h2/><p/></div><a class="pg-link">…</a></div>）
   .pg-card               白色大圆角卡（24px 圆角、轻阴影、内边距 28px）；.pg-card--soft 浅蓝底无阴影；.pg-card--flat 无阴影带细边；.pg-card--hover 悬停上浮
   .pg-grid               等宽网格：.pg-grid--2 / --3 / --4（960 以下自动降列）
   .pg-layout             正文 + 侧栏两栏（右栏 340px；960 以下变单栏），<div class="pg-layout"><div class="pg-main">…</div><aside class="pg-aside">…</aside></div>
                          .pg-aside 桌面端 sticky 跟随

   ── 按钮 / 链接 / 标签 ──
   .pg-btn + 一个修饰：--primary 蓝色渐变实心 / --outline 白底蓝描边 / --white 白底蓝字（蓝底上用）/ --ghost 半透明白描边（蓝底上用）；
                       尺寸 --sm（40px）/ 默认 48px；--block 占满一行
   .pg-link               蓝色文字链接 + 右箭头：<a class="pg-link" href="…">阅读全文<i data-lucide="arrow-right"></i></a>
   .pg-tag                浅蓝分类标签（使用教程 / 置顶精选）
   .pg-tag--free          浅绿「免费」     .pg-tag--hot  琥珀「热门」     .pg-tag--vip  琥珀「会员」
   .pg-price              价格胶囊「1 积分 / 分钟」（浅蓝底蓝字）；.pg-price.is-free 浅绿「免费」
   .pg-ico                lucide 小图标的浅蓝圆角方块底：<span class="pg-ico"><i data-lucide="mic"></i></span>；.pg-ico--lg 56px
   .pg-icon3d             3D 图标图片（64px，带蓝色投影）；.pg-icon3d--lg 96px

   ── 常用块 ──
   .pg-table-wrap > table.pg-table   参数 / 导出格式表；th.is-hl / td.is-hl 高亮一列（会员列）；窄屏横向滚动
   .pg-tip                浅蓝提示条：<p class="pg-tip"><i data-lucide="info"></i><span>小提示：……</span></p>（整块底色，不是左竖条）
   .pg-faq > details.pg-faq-item > summary(问题 + <i data-lucide="chevron-down">) + p(答案)   问答必须和控制器 FAQPage JSON-LD 同源循环
   .pg-pager              分页：包住 {$list->render()} 输出的 ul.pagination，或自己写 a / span.is-current
   .pg-prose              文章正文排版（h2 / h3 / p / ul / ol / img / table / blockquote / code）

   ── 侧栏 ──
   .pg-side-card          侧栏白卡：<section class="pg-side-card"><h2>全部分类</h2>…</section>（直接子 h2 / h3 即标题样式，也可写 .pg-side-title）
     .pg-side-list        分类列表：<ul class="pg-side-list"><li><a class="is-active" href="…">全部教程<em>186</em></a></li></ul>
     .pg-toc              文章目录：<nav class="pg-toc"><a class="is-active" href="#h1">一、…</a><a class="pg-toc-lv3" href="#h2">…</a></nav>
                          （ui.js 现有的目录 JS 往 #art2Toc 里塞 a、高亮用 .is-active，给它同时加上 class="pg-toc" 即可）
     .pg-mini-post        相关教程：<a class="pg-mini-post" href="…"><img src="…" alt=""><span><b>标题</b><time>2026-09-28</time></span></a>
   .pg-promo              蓝色渐变推广卡：<section class="pg-promo"><h2>试试{$site.name|htmlentities}</h2><p>粘贴链接，几分钟出文案</p>
                          <img class="pg-promo-art" src="__CDN__/assets/site/img/g/video-file-to-text.png" alt="" width="200" height="200">
                          <a class="pg-btn pg-btn--white pg-btn--block" href="#download"><i data-lucide="download"></i>免费下载</a></section>

   ── 下载横幅 .pg-download ──
   {include file="common/pg_download" /}   放在 </main> 前；HTML、数据条件都在 common/pg_download.html，各页不要再手写
   （类：.pg-download-box / .pg-download-copy / .pg-download-btns / .pg-dl-btn / .pg-dl-ico / .pg-dl-txt / .pg-dl-mp / .pg-dl-pop）

   ── 阅读进度条 ──
   <div class="pg-progress" id="art2Progress" aria-hidden="true"></div>   放在 .page-g 里第一个；ui.js 现有逻辑按 id 改宽度。
   只写 id="art2Progress"（沿用旧的 art2-progress 类也行）同样生效，.page-g #art2Progress 已覆盖旧样式

   ── 进场动效 ──
   给块加 data-reveal（需 head 里加 js-motion 那行）；prefers-reduced-motion 下全部关闭
   ============================================================ */
.page-g {
  --g-blue: #3B82F6;
  --g-blue-deep: #2563EB;
  --g-blue-darker: #1D4ED8;
  --g-cyan: #38BDF8;
  --g-bg: #F5F7FA;
  --g-bg-blue: #EFF6FF;
  --g-bg-blue-2: #DBEAFE;
  --g-card: #FFFFFF;
  --g-text: #1F2937;
  --g-title: #111827;
  --g-muted: #6B7280;
  --g-line: #E5E7EB;
  --g-green: #047857;
  --g-green-bg: #ECFDF5;
  --g-amber: #B45309;
  --g-amber-bg: #FEF3C7;
  --g-max: 1200px;
  --g-radius: 24px;
  --g-shadow: 0 24px 60px rgba(30, 64, 175, 0.12);
  --g-shadow-sm: 0 10px 30px rgba(15, 23, 42, 0.06);
  --pg-nav-h: 68px;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: #fff;
  color: var(--g-text);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
/* reset 用 :where() 压到 0 权重，并排除 tcj- 导航页脚和悬浮按钮（原因同 home-g.css） */
.page-g :where(*:not([class*="tcj-"]):not(.float-actions):not(.fab-btn):not(.fab-tip)) {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.page-g :where(a) { color: inherit; text-decoration: none; }
.page-g :where(img) { display: block; max-width: 100%; height: auto; }
.page-g :where(ul, ol) { list-style: none; }
.page-g svg.lucide { width: 18px; height: 18px; flex-shrink: 0; }
/* style.css 给全局 h1/h2 设了 max-width 690/780、h1 > span 不换行，二级页里全部解除，否则居中标题会偏左、手机端标题撑破 */
.page-g :where(h1, h2, h3) { max-width: none; }
.page-g :where(h1) > span { white-space: normal; }

.pg-wrap {
  max-width: var(--g-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ============ 导航：压在蓝色页头上 ============ */
.page-g .tcj-nav {
  position: fixed;
  left: 0;
  right: 0;
  transition: background .25s, border-color .25s, box-shadow .25s;
}
.page-g .tcj-nav-inner { max-width: var(--g-max); }
.page-g .tcj-nav.is-scrolled { box-shadow: 0 6px 24px rgba(15, 23, 42, .06); }
@media (min-width: 961px) {
  html[data-nav-overlay="true"] .page-g .tcj-nav:not(.is-scrolled) {
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  html[data-nav-overlay="true"] .page-g .tcj-nav:not(.is-scrolled) .tcj-brand span { color: #fff; }
  html[data-nav-overlay="true"] .page-g .tcj-nav:not(.is-scrolled) .tcj-nav-links a { color: rgba(255, 255, 255, .8); }
  html[data-nav-overlay="true"] .page-g .tcj-nav:not(.is-scrolled) .tcj-nav-links a:hover,
  html[data-nav-overlay="true"] .page-g .tcj-nav:not(.is-scrolled) .tcj-nav-links a.active { color: #fff; }
  html[data-nav-overlay="true"] .page-g .tcj-nav:not(.is-scrolled) .tcj-btn.tcj-btn-primary {
    background: #fff;
    color: var(--g-blue-deep);
    box-shadow: none;
  }
  /* 下划线本体在 home.css「导航下划线」段；透明态改成白色，滚动后恢复蓝色 */
  html[data-nav-overlay="true"] .page-g .tcj-nav:not(.is-scrolled) .tcj-nav-links a::after { background: #fff; }
}

/* ============ 页头 ============ */
.pg-hero {
  position: relative;
  overflow: hidden;
  min-height: 360px;
  padding: calc(var(--pg-nav-h) + 40px) 0 64px;
  color: #fff;
  background:
    radial-gradient(760px 380px at 85% 10%, rgba(56, 189, 248, .5), transparent 62%),
    radial-gradient(600px 360px at 5% 100%, rgba(29, 78, 216, .55), transparent 60%),
    linear-gradient(120deg, #1D4ED8 0%, #2563EB 35%, #3B82F6 70%, #38BDF8 100%);
}
/* 细网格 */
.pg-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent 90%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent 90%);
  pointer-events: none;
}
/* 底部渐隐到下一段底色，避免硬切 */
.pg-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 96px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55) 55%, #fff);
  pointer-events: none;
}
.pg-hero--to-soft::after { background: linear-gradient(180deg, rgba(245, 247, 250, 0), rgba(245, 247, 250, .55) 55%, var(--g-bg)); }
.pg-hero--slim { min-height: 280px; padding-bottom: 48px; }

.pg-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 32px;
  /* 顶部对齐：各页文案长短不同，居中会让面包屑和标题在不同页面上下跳（审查 2026-10-25） */
  align-items: start;
}
.pg-hero-copy { min-width: 0; }
/* 避免最后一两个字单独落到下一行（不支持的浏览器自动忽略） */
.pg-hero-copy h1,
.pg-hero-copy p { text-wrap: pretty; }

.pg-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 14px;
  color: rgba(255, 255, 255, .78);
}
.pg-crumb > * + *::before {
  content: "›";
  display: inline-block;
  margin: 0 10px;
  color: rgba(255, 255, 255, .55);
}
.pg-crumb a { transition: color .15s; }
.pg-crumb a:hover { color: #fff; }
.pg-crumb [aria-current] { color: #fff; }

.pg-hero h1 {
  margin-top: 14px;
  font-size: clamp(32px, 4.2vw, 50px);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #fff;
  text-shadow: 0 6px 30px rgba(15, 23, 42, .16);
}
.pg-hero--slim h1 { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.3; }
.pg-hero-copy > p,
.pg-hero-sub {
  margin-top: 16px;
  max-width: 680px;
  font-size: 17px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .9);
}
.pg-hero-copy > .pg-hero-meta,
.pg-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 14px;
  font-size: 15px;
  color: rgba(255, 255, 255, .88);
}
.pg-hero-meta > * + *::before {
  content: "·";
  margin: 0 10px;
  color: rgba(255, 255, 255, .6);
}
.pg-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.pg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.pg-chip {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .1);
  transition: background .15s;
}
.pg-chip:hover { background: rgba(255, 255, 255, .2); }
.pg-chip.is-active {
  color: var(--g-blue-deep);
  font-weight: 600;
  background: #fff;
  border-color: #fff;
}

/* 右侧漂浮 3D 图标 */
.pg-hero-art {
  position: relative;
  height: 240px;
}
.pg-hero--slim .pg-hero-art { height: 180px; }
.pg-hero-art img {
  position: absolute;
  filter: drop-shadow(0 18px 30px rgba(15, 23, 42, .28));
  animation: pgFloat 6s ease-in-out infinite;
}
.pg-hero-art img:nth-of-type(1) { width: 150px; left: 4%; top: 30px; z-index: 2; }
.pg-hero-art img:nth-of-type(2) { width: 128px; left: 44%; top: -6px; z-index: 3; animation-delay: -2s; }
.pg-hero-art img:nth-of-type(3) { width: 104px; right: 0; top: 120px; z-index: 1; animation-delay: -4s; }
.pg-hero-art img:only-of-type { width: 180px; left: 50%; top: 20px; margin-left: -90px; }
.pg-hero--slim .pg-hero-art img:nth-of-type(1) { width: 120px; top: 30px; }
.pg-hero--slim .pg-hero-art img:nth-of-type(2) { width: 104px; top: 0; }
.pg-hero--slim .pg-hero-art img:nth-of-type(3) { width: 92px; top: 70px; }
@keyframes pgFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
/* 装饰声波：图标背后一排半透明竖条 */
.pg-hero-wave {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 50%;
  height: 90px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: .5;
}
.pg-hero-wave i {
  width: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .7);
  animation: pgWave 1.6s ease-in-out infinite;
}
.pg-hero-wave i:nth-child(odd) { height: 30%; }
.pg-hero-wave i:nth-child(3n) { height: 70%; animation-delay: -.4s; }
.pg-hero-wave i:nth-child(4n) { height: 100%; animation-delay: -.8s; }
.pg-hero-wave i:nth-child(5n) { height: 50%; animation-delay: -1.2s; }
.pg-hero-wave i:nth-child(even):not(:nth-child(4n)) { height: 45%; animation-delay: -.6s; }
@keyframes pgWave {
  0%, 100% { transform: scaleY(.7); }
  50% { transform: scaleY(1); }
}

/* ============ 内容区 ============ */
.pg-section { position: relative; padding: 80px 0; background: #fff; }
.pg-section--soft { background: var(--g-bg); }
.pg-section--tight { padding: 48px 0; }
.pg-section--overlap { padding-top: 0; }
.pg-section--overlap > .pg-wrap { position: relative; z-index: 2; margin-top: -48px; }

.pg-head { margin-bottom: 36px; }
.pg-head h2 {
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--g-title);
}
.pg-head p {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--g-muted);
}
.pg-head--center,
.pg-head--center h2 { text-align: center; }
.pg-head--center p { max-width: 640px; margin-left: auto; margin-right: auto; }
.pg-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.pg-head--row .pg-link { margin-top: 0; flex-shrink: 0; }

.pg-card {
  padding: 28px;
  border-radius: var(--g-radius);
  background: var(--g-card);
  box-shadow: var(--g-shadow-sm);
}
.pg-card--soft { background: var(--g-bg-blue); box-shadow: none; }
.pg-card--flat { box-shadow: none; border: 1px solid var(--g-line); }
.pg-card--hover { transition: transform .2s, box-shadow .2s; }
.pg-card--hover:hover { transform: translateY(-4px); box-shadow: var(--g-shadow); }
.pg-card h3 { font-size: 18px; line-height: 1.45; font-weight: 700; color: var(--g-title); }
.pg-card p { color: var(--g-muted); }

.pg-grid { display: grid; gap: 20px; }
.pg-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.pg-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 28px;
  align-items: start;
}
.pg-main { min-width: 0; }
.pg-aside {
  position: sticky;
  top: calc(var(--pg-nav-h) + 20px);
  display: grid;
  gap: 20px;
}

/* ============ 按钮 / 链接 / 标签 ============ */
.pg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .15s, color .15s;
}
.pg-btn:hover { transform: translateY(-1px); }
.pg-btn:focus-visible { outline: 3px solid rgba(37, 99, 235, .45); outline-offset: 2px; }
.pg-btn--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--g-blue) 0%, var(--g-blue-deep) 100%);
  box-shadow: 0 8px 18px rgba(37, 99, 235, .25);
}
.pg-btn--outline {
  color: var(--g-blue-deep);
  background: #fff;
  border-color: rgba(59, 130, 246, .45);
}
.pg-btn--outline:hover { background: var(--g-bg-blue); }
.pg-btn--white {
  color: var(--g-blue-deep);
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .16);
}
.pg-btn--ghost {
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .6);
}
.pg-btn--ghost:hover { background: rgba(255, 255, 255, .2); }
.pg-btn--white:focus-visible,
.pg-btn--ghost:focus-visible { outline-color: rgba(255, 255, 255, .75); }
.pg-btn--sm { height: 42px; padding: 0 18px; font-size: 14px; border-radius: 14px; }
.pg-btn--block { display: flex; width: 100%; }

.pg-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--g-blue-deep);
}
.pg-link svg.lucide { width: 16px; height: 16px; transition: transform .15s; }
.pg-link:hover svg.lucide { transform: translateX(3px); }

.pg-tag,
.pg-price {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--g-blue-deep);
  background: var(--g-bg-blue);
}
.pg-tag--free,
.pg-price.is-free { color: var(--g-green); background: var(--g-green-bg); }
.pg-tag--hot,
.pg-tag--vip { color: var(--g-amber); background: var(--g-amber-bg); }
.pg-price { padding: 4px 14px; font-size: 14px; }

.pg-ico {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  color: var(--g-blue-deep);
  background: var(--g-bg-blue);
}
.pg-ico svg.lucide { width: 22px; height: 22px; }
.pg-ico--lg { width: 56px; height: 56px; border-radius: 16px; }
.pg-ico--lg svg.lucide { width: 28px; height: 28px; }
.pg-icon3d {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(30, 64, 175, .22));
}
.pg-icon3d--lg { width: 96px; height: 96px; }

/* ============ 常用块 ============ */
.pg-table-wrap {
  overflow-x: auto;
  border-radius: 18px;
  border: 1px solid var(--g-line);
  background: #fff;
  -webkit-overflow-scrolling: touch;
}
.pg-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 15px;
}
.pg-table th,
.pg-table td {
  padding: 14px 18px;
  text-align: center;
  border-bottom: 1px solid var(--g-line);
}
.pg-table th + th,
.pg-table td + td { border-left: 1px solid var(--g-line); }
.pg-table thead th {
  font-weight: 700;
  color: var(--g-title);
  background: #F8FAFC;
}
.pg-table tbody tr:last-child td { border-bottom: 0; }
.pg-table td { color: #374151; }
.pg-table .is-hl { background: var(--g-bg-blue); }
.pg-table thead .is-hl { color: var(--g-blue-deep); background: var(--g-bg-blue-2); }

.pg-tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--g-blue-darker);
  background: var(--g-bg-blue);
}
.pg-tip svg.lucide { margin-top: 3px; color: var(--g-blue); }

.pg-faq { display: grid; gap: 10px; }
.pg-faq-item {
  border-radius: 16px;
  background: var(--g-bg);
  border: 1px solid transparent;
  transition: background .2s, border-color .2s;
}
.pg-section--soft .pg-faq-item { background: #fff; }
.pg-faq-item[open] { background: var(--g-bg-blue); border-color: rgba(59, 130, 246, .25); }
.pg-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  font-size: 16px;
  font-weight: 600;
  color: var(--g-title);
  cursor: pointer;
  list-style: none;
}
.pg-faq-item summary::-webkit-details-marker { display: none; }
.pg-faq-item summary:focus-visible { outline: 2px solid var(--g-blue); outline-offset: 2px; border-radius: 16px; }
.pg-faq-item summary svg.lucide { color: var(--g-muted); transition: transform .2s; }
.pg-faq-item[open] summary svg.lucide { transform: rotate(180deg); color: var(--g-blue-deep); }
.pg-faq-item > p,
.pg-faq-item > div {
  padding: 0 20px 18px;
  font-size: 15px;
  line-height: 1.8;
  color: #4B5563;
}

.pg-pager,
.pg-pager .pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  list-style: none;
}
.pg-pager { margin-top: 32px; }
.pg-pager .pagination { margin: 0; padding: 0; }
.pg-pager a,
.pg-pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 15px;
  color: #374151;
  background: #fff;
  border: 1px solid var(--g-line);
  transition: border-color .15s, color .15s;
}
.pg-pager a:hover { color: var(--g-blue-deep); border-color: rgba(59, 130, 246, .5); }
.pg-pager .is-current,
.pg-pager .active span {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--g-blue), var(--g-blue-deep));
}
.pg-pager .disabled span { color: #9CA3AF; background: #F9FAFB; }

/* 文章正文排版 */
.pg-prose { font-size: 17px; line-height: 1.9; color: #374151; overflow-wrap: anywhere; }
.pg-prose > * + * { margin-top: 1.1em; }
.pg-prose h2 {
  margin-top: 1.8em;
  font-size: 24px;
  line-height: 1.4;
  font-weight: 800;
  color: var(--g-title);
  scroll-margin-top: calc(var(--pg-nav-h) + 20px);
}
.pg-prose h3 {
  margin-top: 1.5em;
  font-size: 20px;
  line-height: 1.45;
  font-weight: 700;
  color: var(--g-title);
  scroll-margin-top: calc(var(--pg-nav-h) + 20px);
}
.pg-prose > :first-child { margin-top: 0; }
.pg-prose a { color: var(--g-blue-deep); text-decoration: underline; text-underline-offset: 3px; }
.pg-prose strong { color: var(--g-title); }
.pg-prose ul,
.pg-prose ol { padding-left: 1.4em; }
.pg-prose ul { list-style: disc; }
.pg-prose ol { list-style: decimal; }
.pg-prose li + li { margin-top: .4em; }
.pg-prose img { height: auto; margin-left: auto; margin-right: auto; border-radius: 16px; }
.pg-prose blockquote {
  padding: 14px 18px;
  border-radius: 14px;
  color: var(--g-blue-darker);
  background: var(--g-bg-blue);
}
.pg-prose code {
  padding: 2px 6px;
  border-radius: 6px;
  font-size: .9em;
  background: #F1F5F9;
}
.pg-prose table:not(.pg-table) {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  display: block;
  overflow-x: auto;
}
.pg-prose table:not(.pg-table) th,
.pg-prose table:not(.pg-table) td { padding: 10px 14px; border: 1px solid var(--g-line); text-align: left; }
.pg-prose table:not(.pg-table) thead th { background: var(--g-bg-blue); color: var(--g-title); }

/* ============ 侧栏 ============ */
.pg-side-card {
  padding: 24px;
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--g-shadow-sm);
}
.pg-side-card > h2,
.pg-side-card > h3,
.pg-side-title {
  padding-bottom: 14px;
  margin-bottom: 8px;
  font-size: 19px;
  line-height: 1.4;
  font-weight: 800;
  color: var(--g-title);
  border-bottom: 1px solid var(--g-line);
}
.pg-side-list li + li { border-top: 1px solid #F1F5F9; }
.pg-side-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  font-size: 15px;
  color: #374151;
  transition: color .15s;
}
.pg-side-list a:hover { color: var(--g-blue-deep); }
.pg-side-list a.is-active { color: var(--g-blue-deep); font-weight: 700; }
.pg-side-list em { font-style: normal; font-size: 13px; color: #6B7280; }

.pg-toc { display: grid; gap: 2px; padding-top: 6px; }
.pg-toc a {
  position: relative;
  display: block;
  padding: 8px 0 8px 22px;
  font-size: 15px;
  line-height: 1.5;
  color: #4B5563;
  transition: color .15s;
}
.pg-toc a::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 15px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #CBD5E1;
}
.pg-toc a:hover { color: var(--g-blue-deep); }
.pg-toc a.is-active { color: var(--g-blue-deep); font-weight: 600; }
.pg-toc a.is-active::before { left: 0; top: 13px; width: 12px; height: 12px; background: var(--g-blue); box-shadow: 0 0 0 4px var(--g-bg-blue-2); }
.pg-toc a.pg-toc-lv3,
.pg-toc a.art2-lv3 { padding-left: 36px; font-size: 14px; }
.pg-toc a.pg-toc-lv3::before,
.pg-toc a.art2-lv3::before { left: 16px; }

.pg-mini-post {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 0;
}
.pg-mini-post + .pg-mini-post { border-top: 1px solid #F1F5F9; }
.pg-mini-post img {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--g-bg-blue);
}
.pg-mini-post b {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 600;
  color: var(--g-title);
  transition: color .15s;
}
.pg-mini-post:hover b { color: var(--g-blue-deep); }
.pg-mini-post time { display: block; margin-top: 4px; font-size: 12px; color: #6B7280; }

.pg-promo {
  position: relative;
  overflow: hidden;
  padding: 26px 24px 24px;
  border-radius: 22px;
  color: #fff;
  background:
    radial-gradient(320px 200px at 100% 0%, rgba(56, 189, 248, .55), transparent 70%),
    linear-gradient(140deg, #1D4ED8 0%, #2563EB 50%, #3B82F6 100%);
  box-shadow: 0 20px 40px rgba(37, 99, 235, .25);
}
.pg-promo h2,
.pg-promo h3 {
  position: relative;
  z-index: 1;
  max-width: 64%;
  font-size: 22px;
  line-height: 1.35;
  font-weight: 800;
  color: #fff;
}
.pg-promo p {
  position: relative;
  z-index: 1;
  max-width: 64%;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .88);
}
.pg-promo-art {
  position: absolute;
  right: 10px;
  top: 18px;
  width: 92px;
  height: auto;
  filter: drop-shadow(0 12px 20px rgba(15, 23, 42, .28));
}
.pg-promo .pg-btn { position: relative; z-index: 1; margin-top: 22px; }

/* ============ 下载横幅（全宽蓝条）============
   HTML 在 common/pg_download.html，各页 {include file="common/pg_download" /}，不要再手写。
   三张同规格下载卡：等宽等高，左 40px 图标位 + 右两行字；小程序卡桌面悬停 / 聚焦时上方弹出大号小程序码。
   注意：.pg-download 不能加 overflow: hidden，否则弹出的小程序码会被裁掉 */
.pg-download {
  position: relative;
  padding: 56px 0;
  color: #fff;
  background:
    radial-gradient(600px 260px at 88% 0%, rgba(56, 189, 248, .5), transparent 70%),
    linear-gradient(120deg, #1D4ED8 0%, #2563EB 40%, #3B82F6 75%, #38BDF8 100%);
}
.pg-download::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
}
.pg-download > * { position: relative; z-index: 1; }
.pg-download h2 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.35; font-weight: 800; color: #fff; }
.pg-download-copy > p { margin-top: 6px; font-size: 15px; color: rgba(255, 255, 255, .88); }
.pg-download-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.pg-download-copy { min-width: 0; }
.pg-download-copy h2,
.pg-download-copy > p { text-wrap: pretty; }
.pg-download-btns {
  display: flex;
  flex-shrink: 0;
  gap: 14px;
}
.pg-dl-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 200px;
  height: 68px;
  padding: 0 16px 0 14px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .14);
  color: #111827;
  transition: transform .15s, box-shadow .15s;
}
.pg-dl-btn:hover,
.pg-dl-btn:focus-visible { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(15, 23, 42, .18); }
.pg-dl-btn:focus-visible { outline: 3px solid rgba(255, 255, 255, .8); outline-offset: 2px; }
.pg-dl-mp:not(.is-noqr) { cursor: zoom-in; }
.pg-dl-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 10px;
}
/* 3D 图标直接放，不套底色方块（统一规则：≥28px 的入口主图标用 App 同款 3D PNG，不用 lucide 线条） */
.pg-dl-ico > img { width: 40px; height: 40px; object-fit: contain; }
.pg-dl-ico--qr { overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--g-line); }
.pg-dl-ico--qr > img { object-fit: cover; filter: none; }
.pg-dl-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}
.pg-dl-txt b {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
}
.pg-dl-txt small {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: var(--g-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pg-dl-sub-m { display: none; }
/* 大号小程序码弹层：默认隐藏，桌面悬停 / 键盘聚焦时出现 */
.pg-dl-pop {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 184px;
  padding: 12px 12px 10px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 20px 44px rgba(15, 23, 42, .24);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px);
  transition: opacity .18s, transform .18s, visibility .18s;
  pointer-events: none;
}
.pg-dl-pop::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  margin-left: -8px;
  border: 8px solid transparent;
  border-top-color: #fff;
}
.pg-dl-pop img { flex-shrink: 0; max-width: none; width: 160px; height: 160px; border-radius: 8px; object-fit: cover; }
.pg-dl-pop em { font-style: normal; font-size: 12px; color: var(--g-muted); }
@media (min-width: 961px) and (hover: hover), (min-width: 961px) and (pointer: fine) {
  .pg-dl-mp:hover .pg-dl-pop,
  .pg-dl-mp:focus-visible .pg-dl-pop {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }
}

/* ============ 阅读进度条 ============ */
.pg-progress,
.page-g #art2Progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: 0;
  height: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, var(--g-blue), var(--g-cyan));
  box-shadow: 0 0 10px rgba(56, 189, 248, .55);
  transition: width .12s linear;
  pointer-events: none;
}

/* ============ 标题断行（2026-10-25）============
   标题加了关键词后变长，折成两三行时让各行长短接近，避免把一个词拆到两行、最后一行只剩一两个字。
   覆盖页头 h1、区块标题、侧栏标题、推广卡标题等 .page-g 下的 h1 / h2；h3 多是卡片里的文章标题，实测 balance 会断出「在 / 线工具」「MP4转 / MP3」，保持原样不加。
   单行标题不受影响，不支持的浏览器照常换行。 */
.page-g h1,
.page-g h2,
.page-g .pg-side-title { text-wrap: balance; }
/* 中文默认任意两字之间都能断，只靠 balance 仍会拆开「工具」「视频」这类词。
   h1、h2 再加 keep-all：只在空格和标点处断行（如「提词匠教程中心：/ 视频、语音转文字教程」）；
   一段没有标点的字超过一行时，由 overflow-wrap 兜底在行尾断开，不会撑出容器。
   推广卡标题没有标点，加了反而断成「试试语音转 / 文字」，所以排除。 */
.page-g h1,
.page-g h2:not(.pg-promo h2) { word-break: keep-all; overflow-wrap: anywhere; }
/* 文章标题（详情页 h1、正文 h2、教程列表头条 h2）按中文默认断行 + strict 禁则，所有宽度都一样（2026-10-26 组长定）。
   文章标题长、不带标点的段落多，keep-all 下一段字比一行还宽时只能硬断，硬断不遵守禁则，
   会把顿号、问号、冒号挤到下一行开头（改前 186 篇标题在 390 宽有 21 篇、1440 宽有 3 篇这样）。
   改回默认断行后标点不落行首，代价是断点可能落在词中间（如「MP4转 / MP3、…」），可以接受。页面自己的标题不受影响。 */
.page-g.article-detail-g .pg-hero h1,
.page-g.article-detail-g .pg-prose h2,
.page-g.art-list-page .art-featured-body h2 { word-break: normal; overflow-wrap: break-word; line-break: strict; }
/* 360px 及以下的窄屏收尾（2026-10-26），390px 及以上不受影响：
   1) 页面自己的 h1、h2 改用 break-word：anywhere 会把每个字都当成可断点，balance 为了凑等长会硬拆「打 / 折」，
      硬断时也会把问号挤到行首（如「没找到答案 / ？」）。
   2) 区块标题 24px 时 320 宽一行只放得下 11 个字，「提词匠帮助里没找到答案？」差 4px，窄屏下缩到 22px。 */
@media (max-width: 360px) {
  .page-g h1,
  .page-g h2:not(.pg-promo h2) { overflow-wrap: break-word; }
  .page-g .pg-head h2 { font-size: 22px; }
}

/* ============ 公共动效（2026-10-25）============
   只动 transform / opacity / box-shadow / color / background，不改文字、不引起布局偏移；
   统一参数：悬停 .22s、进场 .6s，缓动 cubic-bezier(.2,.7,.2,1)。
   首屏文字（面包屑、h1、副标题、文章信息）只做位移、不从透明开始，不影响最大内容绘制（LCP）；
   prefers-reduced-motion: reduce 和 ui.js 打的 .is-reduced-motion 下全部关闭（见本段末尾）。 */
.page-g {
  --pg-ease: cubic-bezier(.2, .7, .2, 1);
  --pg-hover: .22s;
  --pg-lift-shadow: 0 16px 40px rgba(37, 99, 235, .12);
}

/* 页头进场：纯 CSS，不依赖 JS。文字只上移，按钮组、分类胶囊和右侧 3D 图淡入上移，依次错开 60ms */
@keyframes pgRise {
  from { transform: translateY(var(--pg-rise, 16px)); }
  to { transform: none; }
}
@keyframes pgRiseIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.pg-hero-copy > * { animation: pgRise .6s var(--pg-ease) both; }
.pg-hero-copy > h1 { --pg-rise: 12px; }
.pg-hero-copy > :nth-child(3) { animation-delay: 60ms; }
.pg-hero-copy > :nth-child(4) { animation-delay: 120ms; }
.pg-hero-copy > :nth-child(n+5) { animation-delay: 180ms; }
.pg-hero-copy > .pg-hero-actions,
.pg-hero-copy > .pg-chips,
.pg-hero-copy > form {
  animation-name: pgRiseIn;
  animation-delay: 120ms;
}
.pg-hero-copy > .pg-chips { animation-delay: 180ms; }
.pg-hero-art { animation: pgRiseIn .6s var(--pg-ease) 180ms both; }

/* 按钮：悬停上浮 1px、阴影加深，箭头右移 3px；按下轻微缩小 */
.pg-btn {
  transition: transform var(--pg-hover) var(--pg-ease), box-shadow var(--pg-hover) var(--pg-ease), background-color var(--pg-hover) var(--pg-ease), color var(--pg-hover) var(--pg-ease);
}
.pg-btn:hover { transform: translateY(-1px); }
.pg-btn:active { transform: translateY(0) scale(.98); }
.pg-btn--primary:hover { box-shadow: 0 12px 26px rgba(37, 99, 235, .32); }
.pg-btn--outline:hover { box-shadow: 0 10px 22px rgba(37, 99, 235, .12); }
.pg-btn--white:hover { box-shadow: 0 14px 30px rgba(15, 23, 42, .22); }
.pg-btn--ghost:hover { box-shadow: 0 10px 22px rgba(15, 23, 42, .14); }
.pg-btn svg.lucide { transition: transform var(--pg-hover) var(--pg-ease); }
.pg-btn:hover .lucide-arrow-right,
.pg-btn:hover .lucide-chevron-right,
.pg-btn:focus-visible .lucide-arrow-right,
.pg-btn:focus-visible .lucide-chevron-right { transform: translateX(3px); }
.pg-link svg.lucide { transition: transform var(--pg-hover) var(--pg-ease); }

/* 卡片：悬停上浮 4px + 浅蓝阴影，卡里的 3D 图标放大到 1.06 */
.pg-card--hover {
  transition: transform var(--pg-hover) var(--pg-ease), box-shadow var(--pg-hover) var(--pg-ease);
}
.pg-card--hover:hover,
.pg-card--hover:focus-within { transform: translateY(-4px); box-shadow: var(--pg-lift-shadow); }
.pg-card--hover img[src*="/img/g/"],
.pg-card--hover .pg-icon3d { transition: transform var(--pg-hover) var(--pg-ease); }
.pg-card--hover:hover img[src*="/img/g/"],
.pg-card--hover:hover .pg-icon3d { transform: scale(1.06); }

/* 下载横幅三张卡：同样上浮 4px；横幅是蓝底，阴影用深色才看得见 */
.pg-dl-btn {
  transition: transform var(--pg-hover) var(--pg-ease), box-shadow var(--pg-hover) var(--pg-ease);
}
.pg-dl-btn:hover,
.pg-dl-btn:focus-visible { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(15, 23, 42, .22); }
.pg-dl-btn:active { transform: translateY(-2px) scale(.98); }
.pg-dl-ico > img { transition: transform var(--pg-hover) var(--pg-ease); }
.pg-dl-btn:hover .pg-dl-ico > img,
.pg-dl-btn:focus-visible .pg-dl-ico > img { transform: scale(1.06); }
.pg-dl-btn:hover .pg-dl-ico--qr > img,
.pg-dl-btn:focus-visible .pg-dl-ico--qr > img { transform: none; }
/* 小程序码弹层：淡入 + 从 0.96 放大到 1，以小三角为原点 */
.pg-dl-pop {
  transform: translate(-50%, 0) scale(.96);
  transform-origin: 50% 100%;
  transition: opacity var(--pg-hover) var(--pg-ease), transform var(--pg-hover) var(--pg-ease), visibility var(--pg-hover);
}
@media (min-width: 961px) and (hover: hover), (min-width: 961px) and (pointer: fine) {
  .pg-dl-mp:hover .pg-dl-pop,
  .pg-dl-mp:focus-visible .pg-dl-pop { transform: translate(-50%, 0) scale(1); }
}

/* 问答：问题行悬停浅底，箭头展开转 180°；支持 ::details-content 的浏览器展开时高度平滑过渡，
   不支持的直接展开。答案文字始终在 HTML 里，折叠只是视觉上收起 */
.pg-faq-item summary {
  border-radius: 16px;
  transition: background-color var(--pg-hover) var(--pg-ease), color var(--pg-hover) var(--pg-ease);
}
.pg-faq-item summary:hover { background-color: rgba(59, 130, 246, .06); }
.pg-faq-item summary svg.lucide { transition: transform .3s var(--pg-ease), color var(--pg-hover) var(--pg-ease); }
@supports (interpolate-size: allow-keywords) and selector(::details-content) {
  .pg-faq-item { interpolate-size: allow-keywords; }
  .pg-faq-item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size .3s var(--pg-ease), content-visibility .3s allow-discrete;
  }
  .pg-faq-item[open]::details-content { block-size: auto; }
}

/* 区块进场：默认可见，只在 js-motion 下先藏后动；ui.js 按兄弟元素错开 70ms（最多 6 个）写进 --reveal-delay */
.js-motion .page-g [data-reveal] { opacity: 0; transform: translateY(16px); }
.js-motion .page-g [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity .6s var(--pg-ease), transform .6s var(--pg-ease);
  transition-delay: var(--reveal-delay, 0s);
}
/* 卡片进场后悬停要立刻响应，不能带着进场的延迟 */
.js-motion .page-g [data-reveal].is-in.pg-card--hover:hover,
.js-motion .page-g [data-reveal].is-in.pg-card--hover:focus-within {
  transform: translateY(-4px);
  transition: transform var(--pg-hover) var(--pg-ease), box-shadow var(--pg-hover) var(--pg-ease);
}

/* 关掉动效：系统设置「减弱动态效果」或 ui.js 判定为 reduced 时，所有过渡和动画都不播，进场块直接显示 */
@media (prefers-reduced-motion: reduce) {
  .page-g *, .page-g *::before, .page-g *::after { animation: none !important; transition: none !important; }
  .js-motion .page-g [data-reveal] { opacity: 1; transform: none; }
  .page-g .pg-card--hover:hover, .page-g .pg-dl-btn:hover, .page-g .pg-btn:hover { transform: none; }
  .page-g .pg-card--hover:hover img, .page-g .pg-dl-btn:hover img { transform: none; }
}
.is-reduced-motion .page-g *,
.is-reduced-motion .page-g *::before,
.is-reduced-motion .page-g *::after { animation: none !important; transition: none !important; }
.is-reduced-motion.js-motion .page-g [data-reveal] { opacity: 1; transform: none; }

/* ============ 响应式 ============ */
@media (max-width: 1100px) {
  .pg-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 下载横幅：1100 以下文案在上、三张卡在下，避免 1024 宽时标题被卡片挤成两行 */
  .pg-download-box { flex-direction: column; align-items: flex-start; gap: 24px; }
  .pg-download-btns { flex-wrap: wrap; }
  /* 页头：1100 以下右侧图标区收窄、声波隐藏，避免 1024 宽时装饰压到副标题（声波容器左右各伸出 10%，会越过分栏） */
  .pg-hero-inner { grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; }
  .pg-hero-wave { display: none; }
  .pg-hero-art img:nth-of-type(1) { width: 120px; left: 0; }
  .pg-hero-art img:nth-of-type(2) { width: 104px; left: 42%; }
  .pg-hero-art img:nth-of-type(3) { width: 88px; }
  .pg-hero-art img:only-of-type { width: 160px; margin-left: -80px; }
}
@media (max-width: 960px) {
  .page-g { --pg-nav-h: 68px; }
  .pg-hero { min-height: 0; padding: calc(var(--pg-nav-h) + 28px) 0 56px; }
  .pg-hero--slim { padding-bottom: 44px; }
  .pg-hero-inner { grid-template-columns: minmax(0, 1fr) 200px; gap: 16px; }
  .pg-hero-art,
  .pg-hero--slim .pg-hero-art { height: 170px; }
  .pg-hero-art img:nth-of-type(1),
  .pg-hero--slim .pg-hero-art img:nth-of-type(1) { width: 96px; left: 0; top: 30px; }
  .pg-hero-art img:nth-of-type(2),
  .pg-hero--slim .pg-hero-art img:nth-of-type(2) { width: 84px; left: 46%; top: 0; }
  .pg-hero-art img:nth-of-type(3),
  .pg-hero--slim .pg-hero-art img:nth-of-type(3) { width: 72px; right: 0; top: 96px; }
  .pg-hero-art img:only-of-type { width: 120px; left: 50%; top: 20px; margin-left: -60px; }
  .pg-section { padding: 64px 0; }
  .pg-section--tight { padding: 40px 0; }
  .pg-section--overlap { padding-top: 0; }
  .pg-section--overlap > .pg-wrap { margin-top: -36px; }
  .pg-grid--3,
  .pg-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-layout { grid-template-columns: minmax(0, 1fr); }
  .pg-aside { position: static; }
  .pg-dl-sub-pc { display: none; }
  .pg-dl-sub-m { display: inline; }
  .pg-dl-mp:not(.is-noqr) { cursor: default; }
}
@media (max-width: 640px) {
  .pg-wrap { padding: 0 16px; }
  .pg-hero { padding: calc(var(--pg-nav-h) + 20px) 0 48px; }
  .pg-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .pg-hero-art { display: none; }
  .pg-hero h1 { font-size: 30px; }
  .pg-hero--slim h1 { font-size: 24px; }
  .pg-hero-copy > p,
  .pg-hero-sub { font-size: 15px; }
  .pg-hero-copy > .pg-hero-meta,
  .pg-hero-meta { font-size: 13px; }
  .pg-hero-actions .pg-btn { flex: 1 1 0; padding: 0 12px; }
  .pg-chips { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding-right: 16px; scrollbar-width: none; }
  .pg-chips::-webkit-scrollbar { display: none; }
  .pg-chip { flex-shrink: 0; height: 40px; padding: 0 16px; font-size: 14px; }
  /* 手机点击区 ≥40px 高：用透明 ::after 往上下扩，外观和排版不变 */
  .pg-crumb a,
  .pg-link,
  a.pg-tag { position: relative; }
  .pg-crumb a::after,
  .pg-link::after,
  a.pg-tag::after {
    content: "";
    position: absolute;
    left: -4px;
    right: -4px;
    top: 50%;
    height: 40px;
    transform: translateY(-50%);
  }
  .pg-section { padding: 48px 0; }
  .pg-section--tight { padding: 32px 0; }
  .pg-section--overlap { padding-top: 0; }
  .pg-section--overlap > .pg-wrap { margin-top: -28px; }
  .pg-head { margin-bottom: 24px; }
  .pg-head h2 { font-size: 24px; }
  .pg-head p { font-size: 15px; }
  .pg-head--row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .pg-card { padding: 20px; border-radius: 20px; }
  .pg-grid { gap: 12px; }
  .pg-grid--2,
  .pg-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .pg-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-table th,
  .pg-table td { padding: 12px 12px; font-size: 14px; }
  .pg-prose { font-size: 16px; }
  .pg-prose h2 { font-size: 21px; }
  .pg-prose h3 { font-size: 18px; }
  .pg-download { padding: 40px 0; }
  .pg-download-box { gap: 20px; }
  .pg-download-btns { width: 100%; flex-direction: column; gap: 10px; }
  .pg-dl-btn { width: 100%; height: 60px; }
  .pg-side-card,
  .pg-promo { padding: 20px; }
}

/* ============ 图片骨架屏（A 扫光，2026-10-26） ============
   只画在照片类 <img> 自己的背景上：图片照常 src 输出、不改透明度，图片画出来直接盖住骨架，不跑 JS 也照常显示。
   套用位置在各页面 CSS 里逐个点名（不写全局 img，免得套到透明 3D 图标、Logo、小程序码上）。
   ui.js 在图片加载完后加 .is-sk-done 停掉扫光；加载失败时加 .is-sk-error 藏掉图片、后面插一个 .sk-fail 占位。
   减少动态效果：上面「.page-g * { animation: none }」那段已覆盖，只留底色和图标。首页不加载本文件，home-g.css 自带一份。 */
:root {
  --sk-bg: #E6ECF5;
  --sk-shine: linear-gradient(100deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, .72) 50%, rgba(255, 255, 255, 0) 65%);
  --sk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3B3C8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/%3E%3C/svg%3E");
}
@keyframes sk-shimmer {
  from { background-position: 150% 0, center; }
  to { background-position: -50% 0, center; }
}
.pg-mini-post img:not(.is-sk-done) {
  background: var(--sk-shine) 150% 0 / 200% 100% no-repeat, var(--sk-icon) center / 22px auto no-repeat, var(--sk-bg);
  animation: sk-shimmer 1.5s linear infinite;
}
/* 加载失败的占位：默认铺满图片外框，固定尺寸的位置在各自 CSS 里另写 */
img.is-sk-error { display: none !important; }
.sk-fail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 10px 14px;
  border-radius: inherit;
  background: #EEF2F7;
  color: #64748B;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
.sk-fail svg { flex: none; width: 28px; height: 28px; stroke: #94A3B8; }
.sk-fail span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 30em;
}
.sk-fail.is-small { padding: 0; }
.sk-fail.is-small svg { width: 20px; height: 20px; }
.sk-fail.is-small span { display: none; }
.pg-mini-post .sk-fail { width: 64px; height: 64px; border-radius: 12px; }