/* ═══════════════════════════════════════════════════════════════
   财小云 V17 — 帮助中心（help）页面专属版式
   依赖：tokens.css / base.css / home.css / components.css
   结构：轻 Hero / 快速上手 3 步（复用 edit-list）/ 常见操作手册 6 项 /
        FAQ 手风琴（复用 .faq）/ 联系（左信息 + 右双码）
   ═══════════════════════════════════════════════════════════════ */

/* ────────── 轻 Hero（居中，比 about 紧凑）────────── */
.hero-light { padding: var(--cxy-space-10) 0 var(--cxy-space-9); }
.help-hero-in {
  position: relative; z-index: 1;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.hero-light .hello { margin-bottom: var(--cxy-space-4); }
.hero-light h1 {
  font-family: var(--cxy-font-cn); font-weight: var(--cxy-weight-heavy);
  font-size: clamp(2rem, 1.2rem + 3vw, 2.75rem);
  line-height: var(--cxy-leading-tight); letter-spacing: var(--cxy-tracking-tight);
  color: var(--cxy-ink); margin: 0 0 var(--cxy-space-4);
}
.hero-light h1 .grad { white-space: nowrap; }
.hero-light .hero-sub {
  font-size: var(--cxy-size-body-article); color: var(--cxy-text);
  max-width: 30em; margin: 0;
}

/* ────────── §3 常见操作手册（列表卡）────────── */
.help-manuals {
  list-style: none; padding: 0; margin-top: var(--cxy-space-8);
  display: grid; gap: var(--cxy-space-4);
}
.help-manual {
  display: grid; grid-template-columns: 56px 1fr auto; gap: var(--cxy-space-5); align-items: center;
  padding: var(--cxy-space-5) var(--cxy-space-6);
  background: var(--cxy-surface-card);
  border: var(--cxy-border-hairline) solid var(--cxy-border);
  border-radius: var(--cxy-radius-lg);
  box-shadow: var(--cxy-elevation-1);
  transition: transform var(--cxy-duration-base) var(--cxy-ease-out),
              box-shadow var(--cxy-duration-base) var(--cxy-ease-out),
              border-color var(--cxy-duration-base) var(--cxy-ease-standard);
}
.help-manual:hover {
  transform: translateY(-2px); box-shadow: var(--cxy-elevation-2);
  border-color: var(--cxy-border-strong);
}
.help-manual-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--cxy-radius-md);
  background: var(--cxy-tint-blue-bg); color: var(--cxy-action);
}
.help-manual-ic svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.help-manual-text b {
  display: block; font-size: var(--cxy-size-body); font-weight: var(--cxy-weight-bold);
  color: var(--cxy-ink); margin-bottom: var(--cxy-space-1);
}
.help-manual-text p { font-size: var(--cxy-size-sm); color: var(--cxy-text); margin: 0; }
.help-manual-tag {
  font-size: var(--cxy-size-caption); font-weight: var(--cxy-weight-semibold);
  color: var(--cxy-muted); background: var(--cxy-surface-subtle);
  padding: var(--cxy-space-1) var(--cxy-space-3); border-radius: var(--cxy-radius-pill);
  white-space: nowrap;
}

/* ────────── §4 FAQ 之后的引导 ────────── */
.sec-cross { margin-top: var(--cxy-space-7); font-size: var(--cxy-size-sm); color: var(--cxy-muted); }
.sec-cross a { color: var(--cxy-action); font-weight: var(--cxy-weight-semibold); text-decoration: underline; text-underline-offset: 3px; }

/* ────────── §5 联系（左信息 + 右双码）────────── */
.help-contact {
  display: grid; grid-template-columns: 7fr 5fr; gap: var(--cxy-space-8); align-items: center;
  margin-top: var(--cxy-space-8);
}
.help-contact-info .line-tag { margin-bottom: var(--cxy-space-4); }
.help-contact-info .sec-h { margin: 0; }
.help-contact-info .sec-h h2 { margin: 0; }
.help-contact-list { list-style: none; padding: 0; margin: var(--cxy-space-5) 0 0; display: grid; gap: var(--cxy-space-4); }
.help-contact-list li { display: flex; flex-direction: column; gap: 2px; }
.help-contact-label {
  font-family: var(--cxy-font-display); font-size: var(--cxy-size-caption); color: var(--cxy-muted);
  letter-spacing: var(--cxy-tracking-label); text-transform: uppercase;
}
.help-contact-list b {
  font-family: var(--cxy-font-num); font-size: var(--cxy-size-h3); font-weight: var(--cxy-weight-bold);
  color: var(--cxy-ink); font-variant-numeric: tabular-nums;
}
.help-contact-time { font-size: var(--cxy-size-caption); color: var(--cxy-muted); }
.help-contact-qr { display: flex; gap: var(--cxy-space-4); justify-content: flex-end; }
.help-qr-card {
  background: var(--cxy-surface-card);
  border: var(--cxy-border-hairline) solid var(--cxy-border);
  border-radius: var(--cxy-radius-lg); padding: var(--cxy-space-4);
  text-align: center; box-shadow: var(--cxy-elevation-1);
  display: flex; flex-direction: column; align-items: center; gap: var(--cxy-space-1);
}
.help-qr-card img { width: 110px; height: 110px; border-radius: var(--cxy-radius-sm); }
.help-qr-card b { font-size: var(--cxy-size-sm); color: var(--cxy-ink); margin-top: var(--cxy-space-1); }
.help-qr-card span { font-size: var(--cxy-size-caption); color: var(--cxy-muted); }

/* ────────── 响应式 ────────── */
@media (max-width: 960px) {
  .help-contact { grid-template-columns: 1fr; gap: var(--cxy-space-7); }
  .help-contact-qr { justify-content: flex-start; }
}
@media (max-width: 768px) {
  .help-manual { grid-template-columns: 44px 1fr; }
  .help-manual-tag { grid-column: 2; justify-self: start; margin-top: var(--cxy-space-2); }
}