/* ==========================================================================
   pcstore.com.cn — 内页设计系统（pages.css）
   与 base.css 共用同一套 token（--ink / --sub / --g1 / --grad / --line / --r）
   新组件统一以 p- 前缀命名，避免与首页组件冲突。
   ========================================================================== */

/* ---------- 全局补充 ---------- */
body { background: var(--paper); }

/* ==========================================================================
   1. 内页页头 p-hero —— 所有内页统一入口
   ========================================================================== */
.p-crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 22px 0 0; font-size: var(--fs-xs); color: var(--mute);
}
.p-crumb a { color: var(--sub); }
.p-crumb a:hover { color: var(--g1); }
.p-crumb i { font-style: normal; opacity: .5; }
.p-crumb b { font-weight: 600; color: var(--ink); }

.p-hero { padding: 26px 0 8px; }
.p-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: 40px; align-items: start; padding: 26px 0 34px;
}
.p-hero__kicker {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; color: var(--g2);
}
.p-hero__kicker::before { content: ""; width: 20px; height: 2px; border-radius: 2px; background: var(--grad); }
.p-hero h1 {
  margin: 0; font-size: clamp(26px, 2.9vw, 40px); line-height: 1.24; letter-spacing: -1px;
  text-wrap: balance;   /* 让标题折行更均匀，避免中文末行只剩一两个字 */
}
.p-hero h1 b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.p-hero__lead { margin: 16px 0 0; font-size: var(--fs-body); line-height: 1.85; color: var(--sub); max-width: 62ch; }
.p-hero__lead b { color: var(--ink); font-weight: 600; }
.p-hero__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 26px; }
.p-hero__meta { margin-top: 16px; font-size: var(--fs-xs); color: var(--mute); line-height: 1.9; }
.p-btn-ghost {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px;
  border: 1px solid var(--line2); border-radius: 999px;
  font-size: var(--fs-small); font-weight: 600; color: var(--sub);
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.p-btn-ghost:hover { color: var(--g1); border-color: var(--g1); transform: translateY(-2px); }

/* 右侧「事实卡」：承接"下载哪个/多大/能不能用"三个问题 */
.p-facts {
  border: 1px solid var(--line); border-radius: var(--r); background: #fff;
  box-shadow: var(--sh1); padding: 22px 22px 8px;
}
.p-facts__t {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 6px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; color: var(--mute);
}
.p-facts__t span { letter-spacing: 0; color: var(--g2); }
.p-facts dl { margin: 0; }
.p-facts .row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.p-facts .row:last-child { border-bottom: 0; }
.p-facts dt { margin: 0; font-size: var(--fs-xs); color: var(--mute); white-space: nowrap; }
.p-facts dd { margin: 0; font-size: var(--fs-small); font-weight: 600; color: var(--ink); text-align: right; }
.p-facts dd small { display: block; font-weight: 400; font-size: var(--fs-micro); color: var(--mute); }
.p-facts .p-btn-ghost, .p-facts .btn { width: 100%; justify-content: center; margin: 16px 0 14px; padding: 12px 18px; }

/* ==========================================================================
   2. 长文页布局 p-doc —— 左侧目录 + 右侧正文
   ========================================================================== */
.p-doc {
  display: grid; grid-template-columns: 220px minmax(0, 1fr);
  gap: 56px; align-items: start; padding: 20px 0 0;
}
.p-toc {
  position: sticky; top: 24px; padding: 18px 0 0;
  border-top: 1px solid var(--line);
}
.p-toc p { margin: 0 0 12px; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .12em; color: var(--mute); }
.p-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.p-toc li { counter-increment: toc; }
.p-toc a {
  display: flex; gap: 9px; padding: 7px 10px 7px 0; font-size: var(--fs-xs);
  color: var(--sub); line-height: 1.55; border-radius: 8px;
  transition: color .18s ease;
}
.p-toc a::before {
  content: counter(toc, decimal-leading-zero); flex: 0 0 auto;
  font-variant-numeric: tabular-nums; color: var(--mute); font-size: var(--fs-micro);
}
.p-toc a:hover, .p-toc a.on { color: var(--g1); }
.p-toc a.on::before { color: var(--g1); }

/* ---------- 正文块 ---------- */
.p-body { min-width: 0; }
.p-block { padding: 0 0 44px; }
.p-block > h2 {
  margin: 0 0 16px; padding-top: 8px; scroll-margin-top: 20px;
  font-size: clamp(21px, 1.9vw, 27px); line-height: 1.4; letter-spacing: -.4px;
  text-wrap: balance;
}
.p-block > h2 em { font-style: normal; color: var(--g2); }
.p-block > h3 { margin: 30px 0 12px; font-size: var(--fs-h3); letter-spacing: -.2px; }
.p-block > p { margin: 0 0 15px; font-size: var(--fs-text); line-height: 1.92; color: #3C4A60; }
.p-block > p b, .p-block li b { color: var(--ink); font-weight: 600; }
.p-block > p a, .p-block > ul a, .p-block > ol a { color: var(--g2); border-bottom: 1px solid rgba(14, 165, 165, .3); }
.p-block > p a:hover, .p-block > ul a:hover { border-bottom-color: var(--g2); }
/* 注意：只作用于「无 class 的原生列表」，避免污染 .p-rank / .p-faq / .p-links /
   .p-cards / .p-steps / .p-chips 这些组件列表（否则会多出项目符号并覆盖其内边距） */
.p-block > ul:not([class]), .p-block > ol:not([class]) { margin: 0 0 16px; padding-left: 0; list-style: none; }
.p-block > ul:not([class]) > li, .p-block > ol:not([class]) > li {
  position: relative; margin: 0 0 10px; padding-left: 22px;
  font-size: var(--fs-text); line-height: 1.85; color: #3C4A60;
}
.p-block > ul:not([class]) > li::before {
  content: ""; position: absolute; left: 4px; top: .72em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--g1); opacity: .55;
}
.p-block > ol:not([class]) { counter-reset: n; }
.p-block > ol:not([class]) > li { counter-increment: n; padding-left: 30px; }
.p-block > ol:not([class]) > li::before {
  content: counter(n); position: absolute; left: 0; top: .18em;
  width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center; font-size: var(--fs-micro); font-weight: 700;
  color: var(--g2); background: rgba(23, 190, 122, .1);
}

/* ==========================================================================
   3. 表格 p-tbl —— 排行 / 对比 / 参数
   ========================================================================== */
.p-tbl-wrap { margin: 0 0 18px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--rs); background: #fff; }
.p-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-small); min-width: 560px; }
.p-tbl caption {
  padding: 14px 18px; text-align: left; font-size: var(--fs-xs); color: var(--mute);
  border-bottom: 1px solid var(--line); background: #FAFCFE;
}
.p-tbl th, .p-tbl td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.p-tbl thead th {
  font-size: var(--fs-xs); font-weight: 700; color: var(--sub);
  background: #FAFCFE; white-space: nowrap;
}
.p-tbl thead th[data-sort] { cursor: pointer; user-select: none; }
.p-tbl thead th[data-sort]:hover { color: var(--g1); }
.p-tbl thead th[data-sort]::after { content: " ⇅"; color: var(--line2); font-size: 11px; }
.p-tbl tbody tr:hover { background: rgba(23, 190, 122, .035); }
.p-tbl tbody tr:last-child td { border-bottom: 0; }
.p-tbl td b { font-weight: 600; }
.p-tbl .num, .p-tbl td.num { font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap; }
.p-tbl .tick { color: var(--g1); font-weight: 700; }
.p-tbl .no { color: var(--mute); }
.p-tbl .mid { color: var(--amber-d); }
.p-tbl__name { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.p-tbl__name span.ii {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  color: var(--g2); background: var(--mint);
}
.p-tbl__name em { font-style: normal; font-size: var(--fs-micro); color: var(--mute); display: block; font-weight: 400; }

/* ==========================================================================
   4. 排行条目 p-rank —— 「软件排行榜」页主体
   ========================================================================== */
.p-rank { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.p-rank li {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 16px; align-items: center;
  padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--rs);
  background: #fff; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.p-rank li:hover { border-color: var(--mint); box-shadow: var(--sh1); transform: translateY(-1px); }
.p-rank .no {
  font-size: 19px; font-weight: 700; color: var(--line2);
  font-variant-numeric: tabular-nums; text-align: center;
}
.p-rank li:nth-child(1) .no { color: var(--amber-d); }
.p-rank li:nth-child(2) .no { color: var(--sky-d); }
.p-rank li:nth-child(3) .no { color: #C98A5E; }
.p-rank .tt { min-width: 0; }
.p-rank .tt b { display: block; font-size: var(--fs-body); }
.p-rank .tt small { display: block; margin-top: 3px; font-size: var(--fs-xs); color: var(--sub); line-height: 1.6; }
.p-rank .tt em {
  font-style: normal; display: inline-block; margin-top: 7px; padding: 2px 9px;
  border-radius: 999px; font-size: var(--fs-micro); color: var(--g2); background: rgba(23, 190, 122, .09);
}
.p-rank .sc { text-align: right; }
.p-rank .sc b { display: block; font-size: 19px; color: var(--g1); font-variant-numeric: tabular-nums; }
.p-rank .sc small { font-size: var(--fs-micro); color: var(--mute); }

/* 评分条 */
.p-bar { position: relative; height: 5px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 7px; }
.p-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--grad); }

/* ==========================================================================
   5. 软件库卡片 p-cards —— 「软件商城 / 软件库」页主体
   ========================================================================== */
.p-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.p-chips button {
  padding: 8px 16px; border: 1px solid var(--line2); border-radius: 999px;
  background: #fff; font-size: var(--fs-xs); font-weight: 600; color: var(--sub);
  cursor: pointer; transition: all .18s ease;
}
.p-chips button:hover { border-color: var(--g1); color: var(--g1); }
.p-chips button.on { color: #fff; border-color: transparent; background: var(--grad); box-shadow: 0 8px 18px rgba(23, 190, 122, .22); }

.p-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.p-cards li {
  display: flex; flex-direction: column; gap: 9px;
  padding: 16px 17px; border: 1px solid var(--line); border-radius: var(--rs);
  background: #fff; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.p-cards li:hover { border-color: var(--mint); box-shadow: var(--sh1); transform: translateY(-2px); }
.p-cards .hd { display: flex; align-items: center; gap: 10px; }
.p-cards .hd i {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center; font-size: 13px; font-weight: 700; font-style: normal;
  color: var(--g2); background: var(--mint);
}
.p-cards .hd b { font-size: var(--fs-small); line-height: 1.4; }
.p-cards p { margin: 0; font-size: var(--fs-xs); line-height: 1.72; color: var(--sub); }
.p-cards .tg { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.p-cards .tg span {
  padding: 2px 8px; border-radius: 6px; font-size: var(--fs-micro);
  color: var(--mute); background: #F4F7FB;
}
.p-cards li.is-hide { display: none; }

/* ==========================================================================
   6. 步骤条 p-steps —— 安装 / 卸载 / 校验流程
   ========================================================================== */
.p-steps { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 0; counter-reset: st; }
.p-steps > li {
  position: relative; counter-increment: st;
  padding: 0 0 24px 46px; border-left: 2px solid var(--line);
}
.p-steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.p-steps > li::before {
  content: counter(st); position: absolute; left: -15px; top: -2px;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 700;
  color: #fff; background: var(--grad); box-shadow: 0 6px 14px rgba(23, 190, 122, .28);
}
.p-steps > li > b { display: block; margin-bottom: 5px; font-size: var(--fs-body); }
.p-steps > li > p { margin: 0 0 7px; font-size: var(--fs-small); line-height: 1.85; color: var(--sub); }
.p-steps > li > p:last-child { margin-bottom: 0; }

/* ==========================================================================
   7. 提示块 p-note —— 三类：结论 / 风险 / 实测
   ========================================================================== */
.p-note {
  position: relative; margin: 0 0 18px; padding: 16px 20px 16px 52px;
  border: 1px solid var(--line); border-radius: var(--rs);
  background: #FAFCFE; font-size: var(--fs-small); line-height: 1.85; color: #3C4A60;
}
.p-note::before {
  position: absolute; left: 18px; top: 15px;
  width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
.p-note b { color: var(--ink); font-weight: 600; }
.p-note--tip { border-color: rgba(23, 190, 122, .3); background: rgba(23, 190, 122, .05); }
.p-note--tip::before { content: "✓"; color: var(--mint-d); background: rgba(23, 190, 122, .16); }
.p-note--warn { border-color: rgba(200, 127, 8, .32); background: rgba(255, 241, 214, .55); }
.p-note--warn::before { content: "!"; color: var(--amber-d); background: rgba(200, 127, 8, .16); }
.p-note--fact { border-color: rgba(46, 134, 224, .28); background: rgba(220, 238, 255, .5); }
.p-note--fact::before { content: "i"; color: var(--sky-d); background: rgba(46, 134, 224, .16); }
.p-note > ul { margin: 8px 0 0; padding-left: 0; list-style: none; }
.p-note > ul > li { position: relative; padding-left: 16px; margin: 5px 0; font-size: var(--fs-xs); line-height: 1.8; }
.p-note > ul > li::before { content: "·"; position: absolute; left: 4px; font-weight: 700; color: var(--g1); }

/* ==========================================================================
   8. 键值清单 p-kv —— 参数 / 路径 / 字段说明
   ========================================================================== */
.p-kv { margin: 0 0 18px; border: 1px solid var(--line); border-radius: var(--rs); background: #fff; overflow: hidden; }
.p-kv .row { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.p-kv .row:last-child { border-bottom: 0; }
.p-kv dt { margin: 0; font-size: var(--fs-xs); color: var(--mute); }
.p-kv dd { margin: 0; font-size: var(--fs-small); color: var(--ink); line-height: 1.7; word-break: break-word; }
.p-kv dd code {
  padding: 1px 6px; border-radius: 5px; background: #F1F5F9;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12.5px;
}

/* ==========================================================================
   9. FAQ p-faq —— 不用 JS，原生 details，爬得到正文
   ========================================================================== */
.p-faq { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.p-faq details {
  border: 1px solid var(--line); border-radius: var(--rs); background: #fff;
  transition: border-color .2s ease;
}
.p-faq details[open] { border-color: var(--mint); box-shadow: var(--sh1); }
.p-faq summary {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 15px 18px; cursor: pointer; list-style: none;
  font-size: var(--fs-small); font-weight: 600; line-height: 1.7; color: var(--ink);
}
.p-faq summary::-webkit-details-marker { display: none; }
.p-faq summary::before {
  content: "Q"; flex: 0 0 auto; width: 21px; height: 21px; border-radius: 6px;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  color: var(--g2); background: rgba(23, 190, 122, .12);
}
.p-faq summary::after { content: "+"; margin-left: auto; color: var(--mute); font-weight: 400; font-size: 17px; line-height: 1; }
.p-faq details[open] summary::after { content: "−"; color: var(--g1); }
.p-faq .a { padding: 0 18px 16px 51px; font-size: var(--fs-small); line-height: 1.9; color: #3C4A60; }
.p-faq .a p { margin: 0 0 8px; }
.p-faq .a p:last-child { margin-bottom: 0; }

/* ==========================================================================
   10. 内链区 p-links —— 每页都必须有，形成站内网络
   ========================================================================== */
.p-links { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.p-links a {
  display: block; padding: 15px 18px; border: 1px solid var(--line); border-radius: var(--rs);
  background: #fff; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.p-links a:hover { border-color: var(--mint); transform: translateY(-2px); box-shadow: var(--sh1); }
.p-links b { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--ink); }
.p-links b::after { content: "›"; color: var(--g1); font-weight: 400; }
.p-links small { display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--sub); line-height: 1.65; }

/* ==========================================================================
   11. 页尾 CTA p-end
   ========================================================================== */
.p-end {
  margin: 10px 0 0; padding: 34px 36px; border-radius: var(--r);
  background: linear-gradient(120deg, rgba(34, 208, 138, .09), rgba(14, 165, 165, .07));
  border: 1px solid rgba(23, 190, 122, .22);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; align-items: center;
}
.p-end h2 { margin: 0 0 8px; font-size: clamp(19px, 1.7vw, 24px); letter-spacing: -.3px; }
.p-end p { margin: 0; font-size: var(--fs-small); line-height: 1.85; color: var(--sub); }
.p-end .acts { display: flex; flex-wrap: wrap; gap: 10px; }

/* ==========================================================================
   12. 首页枢纽用 p-hub —— 五个入口卡
   ========================================================================== */
.p-hub { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.p-hub a {
  display: flex; flex-direction: column; gap: 10px; height: 100%;
  padding: 22px 22px 20px; border: 1px solid var(--line); border-radius: var(--r);
  background: #fff; box-shadow: var(--sh1);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.p-hub a:hover { transform: translateY(-4px); box-shadow: var(--sh2); border-color: var(--mint); }
.p-hub .ic {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--mint); color: var(--mint-d);
}
.p-hub b { font-size: var(--fs-body); }
.p-hub p { margin: 0; font-size: var(--fs-xs); line-height: 1.75; color: var(--sub); }
.p-hub .go { margin-top: auto; font-size: var(--fs-xs); font-weight: 600; color: var(--g2); }
.p-hub .go::after { content: " →"; }

/* ==========================================================================
   13. 导航补丁 —— base.css 在 900px 以下隐藏了 .top-nav a，
       内页有 6 个入口，改成横向滚动而不是直接不显示。
   ========================================================================== */
@media (max-width: 900px) {
  .top .wrap { flex-wrap: wrap; padding-bottom: 10px; min-width: 0; }
  .top-nav {
    order: 3; flex: 1 1 100%; width: 100%; min-width: 0;
    display: flex; overflow-x: auto; gap: 2px; padding: 0;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .top-nav::-webkit-scrollbar { display: none; }
  .top-nav a { display: block; white-space: nowrap; padding: 7px 12px; }
  /* 兜底：长英文串/长链接不撑破容器 */
  .p-block, .p-hero__grid, .p-facts, .p-kv dd { min-width: 0; }
  .p-kv dd, .p-facts dd { overflow-wrap: anywhere; }
}

/* ==========================================================================
   14. 响应式
   ========================================================================== */
@media (max-width: 1024px) {
  .p-hero__grid { grid-template-columns: 1fr; gap: 26px; }
  .p-doc { grid-template-columns: 1fr; gap: 0; }
  .p-toc { position: static; display: none; }
  .p-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .p-hero { padding-top: 10px; }
  .p-hero__acts .btn, .p-hero__acts .p-btn-ghost { width: 100%; justify-content: center; }
  .p-cards { grid-template-columns: 1fr; }
  .p-hub { grid-template-columns: 1fr; }
  .p-links { grid-template-columns: 1fr; }
  .p-kv .row { grid-template-columns: 1fr; gap: 4px; }
  .p-rank li { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 14px 15px; }
  .p-rank .sc { grid-column: 2; text-align: left; }
  .p-end { grid-template-columns: 1fr; padding: 24px 20px; }
  .p-end .acts .btn { flex: 1 1 100%; }
  .p-tbl { min-width: 480px; }
  .p-faq .a { padding-left: 18px; }
}

/* ---------- 打印（用户常在问答页按 Ctrl+P 存资料） ---------- */
@media print {
  .top, .p-end, .p-toc, .p-hero__acts, .p-links { display: none !important; }
  .p-doc, .p-hero__grid { grid-template-columns: 1fr !important; }
  .p-faq details { break-inside: avoid; }
  .p-faq details .a { display: block !important; }
}

/* ==========================================================================
   15. 下载页专用模块 —— 「点到手」演示卡
       （与首页同色系，但模块形态与旧下载页完全不同）
   ========================================================================== */
.dl-recv {
  display: flex; flex-direction: column; gap: 0;
  padding: 24px 24px 20px; border-radius: var(--r);
  background: #fff; border: 1px solid var(--line); box-shadow: var(--sh1);
}
.dl-recv__t {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 0 16px; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .1em; color: var(--mute);
}
.dl-recv__t span { padding: 3px 9px; border-radius: 999px; letter-spacing: 0; color: var(--mint-d); background: rgba(23, 190, 122, .12); }
.dl-step { display: flex; align-items: center; gap: 12px; }
.dl-step__dot {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  color: #fff; background: var(--grad); box-shadow: 0 5px 12px rgba(23, 190, 122, .3);
}
.dl-step__txt { font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.dl-file {
  display: flex; align-items: center; gap: 12px; margin: 10px 0 0 38px;
  padding: 12px 14px; border-radius: 14px;
  background: #F7FAFD; border: 1px dashed var(--line2);
}
.dl-file i {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center; font-style: normal;
  font-size: 11px; font-weight: 700; color: var(--sky-d); background: var(--sky);
}
.dl-file b { display: block; font-size: var(--fs-xs); line-height: 1.4; }
.dl-file small { display: block; font-size: var(--fs-micro); color: var(--mute); }
.dl-file--want { background: rgba(23, 190, 122, .06); border-color: rgba(23, 190, 122, .35); border-style: solid; }
.dl-file--want i { color: var(--mint-d); background: var(--mint); }
.dl-gap {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 0 0 38px; font-size: var(--fs-micro); color: var(--mute);
}
.dl-gap::before, .dl-gap::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.dl-recv__note {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: var(--fs-micro); line-height: 1.75; color: var(--mute);
}
.dl-recv .btn { width: 100%; justify-content: center; margin-top: 16px; }

/* ==========================================================================
   16. 左问右答 p-qa —— 故障自查 / 疑点速查
   ========================================================================== */
.p-qa { margin: 0; border-top: 1px solid var(--line); }
.p-qa__row {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 8px 40px; padding: 18px 0; border-bottom: 1px solid var(--line);
  align-items: start;
}
.p-qa dt {
  position: relative; padding-left: 20px; margin: 0;
  font-size: var(--fs-small); font-weight: 600; line-height: 1.75; color: var(--ink);
}
.p-qa dt::before {
  content: "?"; position: absolute; left: 0; top: .28em;
  width: 15px; height: 15px; border-radius: 5px;
  display: grid; place-items: center; font-size: 10px; font-weight: 700;
  color: var(--g2); background: rgba(23, 190, 122, .13);
}
.p-qa dd {
  margin: 0; font-size: var(--fs-small); line-height: 1.85; color: #3C4A60;
}
.p-qa dd b { color: var(--ink); font-weight: 600; }
.p-qa dd code {
  padding: 1px 6px; border-radius: 5px; background: #F1F5F9;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12.5px;
}

/* ==========================================================================
   17. 结论条 p-verdict —— 一句话答案，放在正文最前面
   ========================================================================== */
.p-verdict {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 18px;
  align-items: start; margin: 0 0 20px; padding: 20px 22px;
  border-radius: var(--r); border: 1px solid rgba(23, 190, 122, .26);
  background: linear-gradient(120deg, rgba(34, 208, 138, .08), rgba(14, 165, 165, .05));
}
.p-verdict__tag {
  padding: 4px 11px; border-radius: 999px; font-size: var(--fs-micro); font-weight: 700;
  color: #fff; background: var(--grad); white-space: nowrap;
}
.p-verdict p { margin: 0; font-size: var(--fs-small); line-height: 1.9; color: #33415A; }
.p-verdict p b { color: var(--ink); }

@media (max-width: 720px) {
  .p-qa__row { grid-template-columns: 1fr; gap: 6px; padding: 15px 0; }
  .p-verdict { grid-template-columns: 1fr; gap: 10px; }
  .dl-file, .dl-gap { margin-left: 0; }
}
/* 18. 数字条在窄栏里的双列修饰（值较长时四列会挤）
   —— 用法：<ul class="figures figures--2x2"> */
.figures--2x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* ==========================================================================
   19. 全站页脚 sfoot —— 品牌 + 站点导航 + 备案信息
   ========================================================================== */
.sfoot { margin-top: 0; padding: 62px 0 40px; border-top: 1px solid var(--line); background: #FBFCFE; }
.sfoot__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: start; }
.sfoot__logo { display: inline-flex; align-items: center; gap: 10px; }
.sfoot__logo img { width: 28px; height: 28px; }
.sfoot__logo b { font-size: var(--fs-body); font-weight: 700; color: var(--ink); letter-spacing: -.2px; }
.sfoot__brand p { margin: 14px 0 0; max-width: 44ch; font-size: var(--fs-xs); line-height: 1.9; color: var(--mute); }

.sfoot__nav { display: grid; grid-template-columns: repeat(2, auto); gap: 0 56px; }
.sfoot__nav h4 { margin: 0 0 12px; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .14em; color: var(--mute); }
.sfoot__nav a { display: block; padding: 5px 0; font-size: var(--fs-small); color: var(--sub); transition: color .18s ease; }
.sfoot__nav a:hover { color: var(--g1); }

/* 备案信息：三条并列，发丝线分隔 */
.sfoot__legal {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0; margin: 40px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line);
}
.sfoot__legal > div { padding: 0 28px; border-right: 1px solid var(--line); }
.sfoot__legal > div:first-child { padding-left: 0; }
.sfoot__legal > div:last-child { border-right: 0; }
.sfoot__legal dt { margin: 0 0 7px; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .1em; color: var(--mute); }
.sfoot__legal dd { margin: 0; font-size: var(--fs-small); color: var(--sub); line-height: 1.7; }
.sfoot__legal dd a { color: var(--sub); border-bottom: 1px solid var(--line2); }
.sfoot__legal dd a:hover { color: var(--g1); border-bottom-color: var(--g1); }

.sfoot__note {
  margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: var(--fs-micro); line-height: 1.95; color: #A3AFC0;
}

@media (max-width: 1024px) {
  .sfoot { padding: 48px 0 34px; }
  .sfoot__top { grid-template-columns: 1fr; gap: 32px; }
  .sfoot__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
  .sfoot__legal { grid-template-columns: 1fr; padding-top: 0; margin-top: 32px; }
  .sfoot__legal > div { padding: 14px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .sfoot__legal > div:last-child { border-bottom: 0; }
}
@media (max-width: 720px) {
  .sfoot__nav { grid-template-columns: 1fr; gap: 0; }
  .sfoot__nav h4 { margin-top: 18px; }
}
/* ==========================================================================
   20. 隐私说明页 pv-* —— 简单、可读、不用卡片
   ========================================================================== */
.pv-wrap { max-width: 780px; }
.pv-block { padding: 30px 0; border-top: 1px solid var(--line); }
.pv-block:first-of-type { border-top: 0; }
.pv-block h2 {
  margin: 0 0 12px; font-size: clamp(18px, 1.6vw, 22px); letter-spacing: -.3px;
  display: flex; align-items: baseline; gap: 10px;
}
.pv-block h2 i {
  flex: none; font-style: normal; font-size: var(--fs-micro); font-weight: 700;
  color: var(--g2); font-variant-numeric: tabular-nums;
}
.pv-block p { margin: 0 0 12px; font-size: var(--fs-text); line-height: 1.95; color: #3C4A60; }
.pv-block p:last-child { margin-bottom: 0; }
.pv-block b { color: var(--ink); font-weight: 600; }
.pv-list { margin: 0; padding: 0; list-style: none; }
.pv-list li {
  position: relative; padding-left: 22px; margin: 10px 0;
  font-size: var(--fs-text); line-height: 1.9; color: #3C4A60;
}
.pv-list li::before {
  content: ""; position: absolute; left: 2px; top: .78em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--g1); opacity: .5;
}
.pv-meta {
  margin: 40px 0 0; padding: 18px 22px; border-left: 3px solid var(--g1);
  background: rgba(23, 190, 122, .055); font-size: var(--fs-small); line-height: 1.85; color: #33415A;
}
/* ==========================================================================
   21. 品牌导流条 brandbar —— 流量页里把读者引向 360软件管家
   ========================================================================== */
.brandbar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 44px; align-items: center;
  margin: 0; padding: 34px 38px; border-radius: 18px;
  background: linear-gradient(120deg, rgba(34, 208, 138, .1), rgba(14, 165, 165, .06));
  border: 1px solid rgba(23, 190, 122, .24);
}
.brandbar__k { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .16em; color: var(--g2); }
.brandbar__k::before { content: ""; width: 20px; height: 2px; border-radius: 2px; background: var(--grad); }
.brandbar h3 { margin: 12px 0 0; font-size: clamp(19px, 1.75vw, 25px); letter-spacing: -.5px; line-height: 1.35; }
.brandbar h3 b { color: var(--ink); font-weight: 700; }
.brandbar p { margin: 12px 0 0; max-width: 56ch; font-size: var(--fs-small); line-height: 1.9; color: var(--sub); }
.brandbar p b { color: var(--ink); font-weight: 600; }
.brandbar__acts { display: flex; flex-direction: column; gap: 12px; align-items: stretch; min-width: 210px; }
.brandbar__acts .btn { justify-content: center; }
.brandbar__more { text-align: center; font-size: var(--fs-xs); font-weight: 600; color: var(--g2); border-bottom: 1px solid rgba(14, 165, 165, .35); padding-bottom: 2px; }
.brandbar__more:hover { border-bottom-color: var(--g2); }

@media (max-width: 900px) {
  .brandbar { grid-template-columns: 1fr; gap: 22px; padding: 26px 22px; }
  .brandbar__acts { flex-direction: row; flex-wrap: wrap; min-width: 0; }
  .brandbar__acts .btn { flex: 1 1 180px; }
}