/* ==========================================================================
   VPNAY — help.css
   支持中心页专属：页头 / 快速入口 / 分类标题 / 工单面板
   颜色、圆角、阴影一律引用 base.css 的 :root 令牌，不散落硬编码值。
   ========================================================================== */

/* ---------- 页头 ---------- */
.help-head{
  position:relative;
  overflow-x:clip;
  max-width:100%;
  padding-top:56px;
  padding-bottom:8px;
  background:linear-gradient(180deg,var(--accent-08) 0%,transparent 100%);
}
.help-head-in{
  position:relative;
  z-index:1;
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:40px;
  align-items:center;
}
.help-copy{min-width:0}
.help-title{
  margin-top:14px;
  font-size:clamp(30px,4.4vw,50px);
  font-weight:900;
  line-height:1.12;
  letter-spacing:-.028em;
}
.help-lead{margin-top:16px;font-size:17px;line-height:1.7;color:var(--muted);max-width:40em}
.help-facts{margin-top:22px}
.help-figure{min-width:0}
.help-figure svg{width:100%;height:auto}

/* ---------- 正文列 ---------- */
.help-doc{max-width:940px;margin:0 auto}

/* ---------- 快速入口 ---------- */
.help-quick{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
  margin-bottom:8px;
}
.quick-card{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  padding:18px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--bg-panel);
  box-shadow:var(--shadow-card);
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.quick-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-panel);border-color:var(--border-strong)}
.quick-k{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--accent)}
.quick-card strong{font-size:15.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.quick-d{font-size:13px;line-height:1.6;color:var(--muted)}

/* ---------- 分类区块 ---------- */
.faq-sec{padding-top:24px;padding-bottom:36px}
.faq-sec-head{display:flex;gap:16px;align-items:flex-start;margin-bottom:18px}
.faq-sec-idx{
  flex:none;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border:1px solid var(--accent-22);
  border-radius:50%;
  background:var(--accent-08);
  font-family:var(--font-mono);
  font-size:12.5px;
  font-weight:600;
  color:var(--accent-2);
}
.faq-sec-head > div{min-width:0}
.faq-sec-lead{margin-top:8px;font-size:14.5px;line-height:1.7;color:var(--muted);max-width:46em}

/* ---------- 工单面板 ---------- */
.help-contact{
  position:relative;
  overflow:hidden;
  padding:28px 26px;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:linear-gradient(140deg,var(--bg-panel) 0%,var(--bg-panel-tint) 100%);
  box-shadow:var(--shadow-panel);
}
.help-contact::before{
  content:'';
  position:absolute;
  right:-90px;
  top:-90px;
  width:240px;
  height:240px;
  border:1px dashed var(--accent-22);
  border-radius:50%;
  pointer-events:none;
}
.help-contact p{position:relative;margin-top:12px;font-size:14.5px;line-height:1.75;color:var(--muted)}
.help-contact p:first-of-type{margin-top:0}
.help-contact p a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.help-actions{position:relative;display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .help-head{padding-top:44px}
  .help-head-in{grid-template-columns:minmax(0,1fr);gap:24px}
  .help-figure{display:none}
}

@media (max-width:640px){
  .help-title{font-size:32px}
  .faq-sec-head{gap:12px}
  .faq-sec-idx{width:34px;height:34px;font-size:11.5px}
  .help-contact{padding:22px 18px}
  .help-quick{grid-template-columns:minmax(0,1fr)}
}

@media (prefers-reduced-motion:reduce){
  .quick-card:hover{transform:none}
}