/* ==========================================================================
   VPNDH · help.css
   帮助中心页专属：页首事实徽标行、分类概览卡、分类小标题、收尾工单块。
   只引用 base.css 的 :root 令牌，不新增视觉语言，不出现硬编码颜色。
   ========================================================================== */

/* ---------- 1. 页首 ---------- */
.help-hero{
  padding-top:var(--sp-8);
  padding-bottom:var(--sp-6);
}
.help-hero .lede{margin-top:var(--sp-4)}
.help-facts{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:var(--sp-5);
}

/* ---------- 2. 分类概览卡 ---------- */
.help-jump{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:var(--sp-4);
  margin-top:var(--sp-6);
}
.help-jump > *{min-width:0}
.help-jump-card{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  padding:18px;
  background:var(--bg-panel);
  border:1px solid var(--panel-line);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-soft),var(--edge-light);
  text-decoration:none;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.help-jump-card:hover{
  transform:translateY(-2px);
  border-color:var(--accent-20);
  box-shadow:var(--shadow-card),var(--edge-light);
}
.hj-num{
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--accent);
}
.hj-title{
  font-size:15px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--text);
}
.hj-desc{
  font-size:12.5px;
  line-height:1.65;
  color:var(--text-muted);
}
.hj-more{
  margin-top:auto;
  padding-top:8px;
  font-size:12px;
  font-weight:600;
  color:var(--accent);
}

/* ---------- 3. 分类区 ---------- */
.help-body{padding-bottom:var(--sp-8)}
.help-cat{
  padding-top:var(--sp-6);
  padding-bottom:var(--sp-4);
}
.help-cat + .help-cat{border-top:1px dashed var(--ink-12)}
.help-cat-head{
  display:flex;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.help-cat-num{
  flex:none;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--accent);
}
.help-cat-head h2{
  margin:0;
  font-size:clamp(1.35rem,1.1rem + 1vw,1.85rem);
}
.help-cat-note{
  margin:0 0 var(--sp-4);
  max-width:66ch;
  font-size:14.5px;
  line-height:1.75;
  color:var(--text-muted);
}
.help-cat .callout{margin-bottom:var(--sp-4);max-width:860px}
.help-cat .faq{max-width:860px}

/* ---------- 4. 收尾工单块 ---------- */
.help-contact{
  position:relative;
  overflow-x:clip;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--sp-5);
  align-items:center;
  padding:26px;
  background:var(--bg-panel);
  border:1px solid var(--panel-line);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-card),var(--edge-light);
}
.help-contact-body{min-width:0}
.help-contact-body h2{
  margin:0 0 8px;
  font-size:clamp(1.3rem,1.1rem + .9vw,1.75rem);
}
.help-contact-body p{
  margin:0;
  max-width:56ch;
  font-size:14px;
  line-height:1.75;
  color:var(--text-muted);
}
.help-contact-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.help-arc{
  position:absolute;
  right:-20px;
  bottom:-16px;
  width:min(420px,70%);
  height:120px;
  color:var(--accent-12);
  pointer-events:none;
}

/* ---------- 5. 窄屏 ---------- */
@media (max-width:900px){
  .help-contact{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .help-hero{padding-top:var(--sp-7)}
  .help-jump{grid-template-columns:minmax(0,1fr)}
  .help-contact{padding:20px}
  .help-arc{display:none}
  .help-cat{padding-top:var(--sp-5)}
}