/* ==========================================================================
   VPNSJ · help.css — 帮助中心页专属样式
   只消费 base.css 的设计令牌,不新增颜色 / 圆角字面量。
   ========================================================================== */

/* ---------- 页头 ---------- */
.help-head{
  position:relative;
  overflow-x:clip;
  max-width:100%;
  padding-top:var(--sp-7);
  padding-bottom:var(--sp-7);
  border-bottom:1px solid var(--border);
  background:
    radial-gradient(620px 320px at 88% 0%,var(--halo-rose),transparent 72%),
    radial-gradient(460px 260px at 4% 100%,var(--halo-warm),transparent 74%),
    linear-gradient(180deg,var(--bg-hero-top) 0%,var(--bg-hero-bottom) 100%);
}
.help-head .wrap{position:relative;z-index:1}
.help-head h1{margin-top:var(--sp-2);max-width:18em}
.help-head .lead{margin-top:var(--sp-3);max-width:64ch}
.help-head .trust-row{margin-top:var(--sp-4);max-width:none}
.help-head .stat-band{margin-top:var(--sp-5);max-width:760px}

/* ---------- 主体:目录条 + 四类问答 ---------- */
.help-body{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--sp-7);
  min-width:0;
}
.help-cat{min-width:0}

.cat-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-3);
  margin-bottom:var(--sp-4);
  padding-bottom:var(--sp-3);
  border-bottom:1px solid var(--border);
}
.cat-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  flex:none;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--bg-panel-2);
  color:var(--accent);
  box-shadow:var(--hairline);
}
.cat-ico svg{width:18px;height:18px}
.cat-head h2{
  font-size:clamp(20px,2.2vw,26px);
  letter-spacing:-0.01em;
  line-height:1.25;
}
.cat-head .badge{margin-left:auto}
.help-cat .faq-body p{max-width:74ch}
.help-cat .faq-body a{color:var(--accent);border-bottom:1px solid var(--accent-tint-2)}
.help-cat .faq-body a:hover{border-bottom-color:var(--accent)}

/* ---------- 收尾:下一步入口 ---------- */
.help-next{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--sp-5);
  padding:var(--sp-6);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--bg-panel);
  box-shadow:var(--shadow-card),var(--hairline);
  min-width:0;
}
.help-next-body{flex:1 1 320px;min-width:0}
.help-next h2{font-size:clamp(20px,2.1vw,25px)}
.help-next p{
  margin-top:var(--sp-2);
  max-width:58ch;
  font-size:14.5px;
  line-height:1.78;
  color:var(--text-muted);
}
.help-next p strong{color:var(--text);font-weight:600}
.help-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  flex:none;
  max-width:100%;
}

/* ---------- 响应式 ---------- */
@media (max-width:768px){
  .help-head{padding-top:var(--sp-6);padding-bottom:var(--sp-6)}
  .help-body{gap:var(--sp-6)}
  .help-next{padding:var(--sp-5)}
  .help-links{width:100%}
}
@media (max-width:480px){
  .cat-head .badge{margin-left:0}
  .cat-ico{width:32px;height:32px}
  .help-links .btn{flex:1 1 auto}
}