/* ==========================================================================
   VPNWI · help.css
   帮助中心页专属样式：页头氛围、分类锚点区、事实胶囊行、问答排布。
   颜色 / 圆角 / 字体一律引用 base.css 的设计令牌，不写硬编码色值。
   ========================================================================== */

/* ---------- 页头 ---------- */
.help-hero{
  position:relative;
  overflow-x:clip;
  background:var(--hero-bg);
  border-bottom:1px solid var(--border-soft);
}
.help-hero::before{
  content:"";
  position:absolute;inset:0;
  background-image:radial-gradient(circle at 1px 1px,var(--dot) 1.05px,transparent 1.15px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(96% 128% at 18% 0%,var(--mask-solid) 8%,transparent 74%);
  mask-image:radial-gradient(96% 128% at 18% 0%,var(--mask-solid) 8%,transparent 74%);
  pointer-events:none;
}
.help-hero .wrap{position:relative;z-index:1;}
.help-hero h1 .no-break{
  background-image:linear-gradient(180deg,transparent 64%,var(--tint-accent-2) 64%,var(--tint-accent-2) 94%,transparent 94%);
  background-repeat:no-repeat;
  background-size:100% 100%;
}
.help-lead{max-width:800px;margin-top:14px;}
.help-facts{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-top:22px;
}
.help-facts li{
  display:inline-flex;align-items:center;
  max-width:100%;overflow:hidden;
  height:26px;padding:0 11px;border-radius:var(--r-pill);
  background:var(--bg-panel);border:1px solid var(--border-soft);
  box-shadow:var(--shadow-1);
  font-family:var(--font-mono);font-size:11.5px;color:var(--text-muted);
  white-space:nowrap;
}
.help-facts li.is-key{
  background:var(--tint-accent);border-color:var(--accent-ring);color:var(--accent);
}

/* ---------- 正文列 ---------- */
.help-body{max-width:960px;margin:0 auto;min-width:0;}
.help-cat{padding-top:48px;min-width:0;}
.help-cat:first-of-type{padding-top:10px;}
.cat-head{
  display:flex;align-items:center;gap:12px;
  padding-bottom:14px;
  border-bottom:1px solid var(--border);
}
.cat-ico{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:38px;height:38px;border-radius:var(--r-m);
  background:var(--bg-panel);border:1px solid var(--border-soft);
  box-shadow:var(--shadow-1);
  color:var(--accent);
}
.cat-ico svg{width:19px;height:19px;}
.cat-title{flex:1 1 auto;min-width:0;}
.cat-count{
  flex:none;display:inline-flex;align-items:center;
  height:24px;padding:0 10px;border-radius:var(--r-pill);
  background:var(--tint-accent);border:1px solid var(--accent-ring);
  color:var(--accent);font-family:var(--font-mono);font-size:11px;
  white-space:nowrap;
}
.cat-lead{
  margin-top:14px;max-width:780px;
  font-size:14.5px;line-height:1.75;color:var(--text-muted);
}
.help-cat .faq{margin-top:16px;}

/* ---------- 页尾补充块 ---------- */
.help-tail{
  max-width:960px;margin:0 auto;
  padding-top:44px;
  display:flex;flex-direction:column;gap:20px;
}
.help-tail .callout{margin-bottom:0;}

/* ---------- 响应式 ---------- */
@media (max-width:640px){
  .help-facts li{height:24px;padding:0 9px;font-size:11px;}
  .cat-head{gap:10px;}
  .cat-ico{width:34px;height:34px;}
  .cat-ico svg{width:17px;height:17px;}
  .help-cat{padding-top:38px;}
  .help-cat:first-of-type{padding-top:8px;}
  .help-tail{padding-top:34px;}
}