/* ==========================================================================
   VPNPX . help.css
   帮助中心页专属:页头、分类区块壳、现象速查表、收尾求助带
   仅新增 .help-* 命名空间,不覆盖 components.css 中的共享组件
   ========================================================================== */

/* ------------------------------------------------------------------- 页头 */
.help-hero{
  position:relative;
  overflow-x:clip;
  padding-top:54px;
  padding-bottom:24px;
}
.help-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(76% 92% at 22% 0%, var(--mask-solid) 0%, transparent 74%);
  mask-image:radial-gradient(76% 92% at 22% 0%, var(--mask-solid) 0%, transparent 74%);
}
.help-hero > *{position:relative;z-index:1;}

.help-title{margin:0 0 16px;}
.help-hero .lede{max-width:66ch;margin:0;}

.help-facts{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:20px 0 0;
  padding:0;
  list-style:none;
}
.help-facts li{margin:0;max-width:100%;}

/* --------------------------------------------------------------- 正文容器 */
.help-article{padding-bottom:8px;}
.help-article > .toc-tabs{margin-top:8px;margin-bottom:2px;}

.help-sec{padding-top:46px;}
.help-sec:first-of-type{padding-top:34px;}

.help-sec-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 14px;
  margin:0 0 12px;
  padding-bottom:12px;
  border-bottom:1px dashed var(--border);
}
.help-sec-title{margin:0;font-size:clamp(22px,2.5vw,30px);}
.help-sec-count{
  display:inline-flex;
  align-items:center;
  padding:3px 10px;
  border-radius:var(--radius-pill);
  background:var(--accent-a10);
  color:var(--accent-dark);
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:700;
  white-space:nowrap;
}
.help-sec-lede{
  max-width:72ch;
  margin:0 0 18px;
  font-size:14.5px;
  line-height:1.78;
  color:var(--text-muted);
}
.help-sec-lede a{
  color:var(--accent-dark);
  text-decoration:none;
  border-bottom:1px solid var(--accent-a35);
}
.help-sec-lede a:hover{border-bottom-color:var(--accent);}

/* ------------------------------------------------------------- 现象速查表 */
.help-table{margin-top:22px;}
.help-table table{min-width:0;}
.help-table td{word-break:normal;}

/* ----------------------------------------------------------------- 收尾带 */
.help-cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px 24px;
  margin-top:48px;
  padding:26px 28px;
  border-radius:var(--radius-lg);
  border:1px solid var(--violet-a28);
  background:linear-gradient(132deg, var(--accent-a10) 0%, var(--violet-a14) 100%);
  box-shadow:inset 0 1px 0 var(--white-a90);
}
.help-cta-copy{flex:1 1 300px;min-width:0;}
.help-cta-title{margin:0 0 6px;font-size:clamp(20px,2.2vw,26px);}
.help-cta p{margin:0;font-size:14px;line-height:1.75;color:var(--text-muted);}
.help-cta p a{
  color:var(--accent-dark);
  text-decoration:none;
  border-bottom:1px solid var(--accent-a35);
}
.help-cta p a:hover{border-bottom-color:var(--accent);}
.help-cta-actions{display:flex;flex-wrap:wrap;gap:10px;flex:none;}
.help-cta-actions .btn{flex-shrink:0;white-space:nowrap;}

/* --------------------------------------------------------------- 断点适配 */
@media (max-width:900px){
  .help-sec{padding-top:38px;}
}
@media (max-width:768px){
  .help-hero{padding-top:36px;padding-bottom:16px;}
  .help-cta{padding:20px;margin-top:36px;}
  .help-cta-actions{width:100%;}
  .help-cta-actions .btn{flex:1 1 160px;}
}
@media (max-width:640px){
  .help-sec:first-of-type{padding-top:26px;}
  .help-sec-title{font-size:22px;}
  .help-facts li{flex:0 1 auto;}
}