/* ==========================================================================
   VPNDQ — help.css
   Page styles for questions.html (支持中心 / 帮助中心).
   Every color, radius and shadow is taken from the tokens in base.css.
   ========================================================================== */

/* ---------- head band ---------------------------------------------------- */
.help-head{
  position:relative;
  overflow-x:clip;
  max-width:100%;
  background:linear-gradient(180deg,var(--bg-hero-top) 0%,var(--bg-hero-bot) 100%);
  padding-top:44px;
  padding-bottom:36px;
}
.help-head__glow{left:24%;right:24%;top:12%;bottom:auto;height:80%}
.help-head__in{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.help-head .h1{margin-top:16px}
.help-head .sub{margin-top:14px}
.help-head .fact-row{margin-top:20px;justify-content:center}

/* ---------- shared icon chip --------------------------------------------- */
.help-ico{
  width:40px;height:40px;border-radius:13px;flex:none;
  display:grid;place-items:center;
  background:var(--panel-2);color:var(--accent);
  box-shadow:inset 0 1px 0 var(--white);
}
.help-ico svg{width:21px;height:21px}

/* ---------- body column -------------------------------------------------- */
.help-body{padding-bottom:24px}

/* ---------- category jump cards ------------------------------------------ */
.help-cats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-top:22px;
}
.help-cat-card{
  display:flex;
  flex-direction:column;
  gap:9px;
  min-width:0;
  padding:18px 16px 16px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.help-cat-card:hover{
  transform:translateY(-3px);
  border-color:var(--accent);
  box-shadow:0 24px 46px -22px var(--accent-18);
}
.help-cat-card__name{font-size:15px;font-weight:800;color:var(--ink)}
.help-cat-card__note{font-size:12.5px;line-height:1.65;color:var(--muted)}
.help-cat-card__num{
  margin-top:auto;
  padding-top:6px;
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--gold-deep);
}

/* ---------- category sections -------------------------------------------- */
.help-cat{margin-top:44px}
.help-cat__head{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}
.help-cat__titles{min-width:0}
.help-cat__lead{margin-top:8px;font-size:14.5px;line-height:1.7;color:var(--muted)}
.help-cat__more{margin-top:16px;font-size:13.5px;line-height:1.7;color:var(--muted)}
.help-cat__more a{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.help-cat__more a:hover{color:var(--accent-dark)}

/* ---------- support block ------------------------------------------------ */
.help-support{margin-top:52px}
.help-support__box{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px;
  padding:26px;
  background:var(--panel-3);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-card);
}
.help-support__text{flex:1 1 320px;min-width:0}
.help-support__text p{margin-top:10px;font-size:14.5px;line-height:1.75;color:var(--muted)}
.help-support__box .btn{flex-shrink:0}
.help-links{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px}
.help-links a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  padding:8px 15px;
  border-radius:var(--r-pill);
  background:var(--panel);
  border:1px solid var(--line);
  font-size:13.5px;
  font-weight:600;
  color:var(--ink);
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  transition:background .15s,color .15s,border-color .15s;
}
.help-links a:hover{background:var(--rose);border-color:var(--accent);color:var(--accent)}
.help-links a svg{width:14px;height:14px;flex:none;color:var(--accent)}

/* ---------- responsive --------------------------------------------------- */
@media (max-width:1024px){
  .help-cats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  .help-head{padding-top:34px;padding-bottom:28px}
  .help-cat{margin-top:36px}
}
@media (max-width:640px){
  .help-cats{grid-template-columns:minmax(0,1fr)}
  .help-head__glow{display:none}
  .help-support__box{padding:20px}
  .help-cat__head{gap:12px}
}