/* ==========================================================================
   VPNAY · help.css —— 支持中心页(support.html)专属样式
   只补充本页独有排版:快速入口卡、分类头、结尾工单卡与装饰接线
   颜色 / 圆角 / 间距一律引用 :root 设计令牌
   ========================================================================== */

.help-main{padding-bottom:var(--s8)}

/* ---------- 快速入口 ---------- */
.help-quick{padding-top:var(--s5);padding-bottom:var(--s6)}
.quick-h{font-size:20px;font-weight:700;letter-spacing:-.01em}
.help-quick .card-grid{margin-top:var(--s5)}
.quick-card{display:flex;flex-direction:column;gap:10px}
.quick-card h3{font-size:16px}
.quick-card p{font-size:13.5px;line-height:1.65;color:var(--muted)}
.quick-card .btn{margin-top:auto;align-self:flex-start}

/* ---------- 四个分类区块 ---------- */
.help-cat{
  padding-top:var(--s6);
  padding-bottom:var(--s6);
  border-top:1px solid var(--border);
}
.cat-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:var(--s5)}
.cat-head > div{min-width:0}
.cat-ico{
  flex:none;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:var(--r-sm);
  background:var(--panel-2);
}
.cat-ico svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.cat-ico.is-account{color:var(--reg-us)}
.cat-ico.is-connect{color:var(--reg-hk)}
.cat-ico.is-speed{color:var(--reg-sg)}
.cat-ico.is-billing{color:var(--reg-ca)}
.cat-note{margin-top:6px;font-size:13.5px;line-height:1.6;color:var(--muted)}

/* ---------- 装饰接线(纯装饰,DrawSVG 描线目标) ---------- */
.help-topo{margin-top:var(--s7);margin-bottom:var(--s2)}

/* ---------- 结尾:工单卡 ---------- */
.help-final{padding-top:var(--s2);padding-bottom:var(--s7)}
.help-final .card{display:grid;gap:14px;padding:28px 26px}
.help-final .card h2{font-size:22px;letter-spacing:-.02em}
.help-final .card p{font-size:14.5px;line-height:1.8;color:var(--muted)}
.help-ticket{
  list-style:none;
  display:grid;
  gap:8px;
  font-size:14px;
  line-height:1.7;
  color:var(--muted);
}
.help-ticket li{display:flex;gap:10px;align-items:flex-start}
.help-ticket li::before{
  content:'';
  flex:none;
  width:5px;
  height:5px;
  margin-top:9px;
  border-radius:50%;
  background:var(--accent);
}
.help-signup a,
.help-more a{
  color:var(--accent);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
}
.help-more{font-size:13.5px}

@media (max-width:640px){
  .help-final .card{padding:22px 18px}
  .help-final .card h2{font-size:20px}
}