/* ==========================================================================
   VPNOh — help.css
   帮助中心(zh-CN/faq.html)页面专属样式:页首抬头、问答主体容器、
   分类小标题与结尾引导块。只补充 components.css 未覆盖的部分,
   不重复定义已有组件,所有设计值引用 :root 令牌。
   ========================================================================== */

/* --- 页首:帮助中心抬头 + 事实条 ---------------------------------------- */
.help-hero{
  position:relative;
  padding-top:var(--sp-7);
  padding-bottom:var(--sp-5);
  overflow-x:clip;
  max-width:100%;
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.07) 0%,rgba(var(--accent-rgb),0) 84%);
}
.help-hero h1{margin-top:12px}
.help-facts{margin-top:var(--sp-6)}

/* --- 问答主体 ----------------------------------------------------------- */
.help-doc{
  max-width:880px;
  margin-inline:auto;
  min-width:0;
}
.help-doc > .callout{margin-bottom:var(--sp-6)}

.help-cat{margin-bottom:var(--sp-6)}
.help-cat:last-child{margin-bottom:0}

.cat-head{
  position:relative;
  margin-bottom:var(--sp-4);
  padding-left:16px;
}
.cat-head::before{
  content:"";
  position:absolute;
  left:0;
  top:4px;
  width:4px;
  height:24px;
  border-radius:2px;
  background:linear-gradient(180deg,var(--accent),var(--accent-dark));
}
.cat-head h2{font-size:22px}
.cat-head p{
  margin-top:6px;
  font-size:14px;
  line-height:1.7;
  color:var(--text-muted);
  max-width:66ch;
}

.help-cat .faq-item{transition:border-color .18s ease}
.help-cat .faq-item:hover{border-color:rgba(var(--accent-rgb),.45)}
.help-cat .faq-item[open]{border-color:rgba(var(--accent-rgb),.4)}

/* --- 结尾引导块 --------------------------------------------------------- */
.help-more{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--sp-5);
  align-items:center;
  padding:var(--sp-5) var(--sp-6);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--bg-panel);
  box-shadow:var(--shadow-card);
}
.help-more h2{font-size:20px}
.help-more p{
  margin-top:8px;
  font-size:14.5px;
  line-height:1.7;
  color:var(--text-muted);
  max-width:62ch;
}
.help-more-actions{display:flex;gap:10px;flex-wrap:wrap}
.help-more-actions .btn{flex-shrink:0;white-space:nowrap}

/* --- 响应式 ------------------------------------------------------------- */
@media (max-width:900px){
  .help-more{grid-template-columns:minmax(0,1fr);padding:var(--sp-5)}
  .help-more-actions .btn{flex:1 1 180px}
}

@media (max-width:640px){
  .help-hero{padding-top:var(--sp-6)}
  .help-cat{margin-bottom:var(--sp-5)}
  .cat-head{padding-left:14px}
  .cat-head::before{top:3px;height:22px}
  .cat-head h2{font-size:20px}
  .help-more-actions{flex-direction:column}
  .help-more-actions .btn{width:100%;flex:1 1 auto}
}