/* 常见问题页（中文站）。英日站仍引用 faq.css，两份样式互不影响。
 * 字号按全站 8 档阶梯走变量，断点里只重定义变量。
 */
body.faq-center {
  --t-display: 56px; --t-h3: 28px; --t-h4: 20px; --t-lead: 18px;
  --t-q: 18px; --t-body: 15px; --t-small: 13px; --t-label: 12px;
  --fq-ink: #101828; --fq-muted: #5f6b7c; --fq-subtle: #98a2b3;
  --fq-line: #e6ebf4; --fq-blue: #315dff; --fq-blue-deep: #2449dc; --fq-soft: #f5f7fb;
  --fq-sticky: 108px;
  background: #fff;
}
/* subpage.css 给 html, body 设了 overflow-x: hidden !important，body 会变成不滚动的滚动容器，左侧分类的 position: sticky 失效（侧栏不固定）。
 * clip 同样裁掉横向溢出，但不生成滚动容器；不支持 clip 的旧浏览器会回退到 hidden，只是侧栏不固定。 */
html:has(body.faq-center), body.subpage.faq-center { overflow-x: clip !important; }
.fq-main { background: #fff; color: var(--fq-ink); }
.fq-main > section { border-top: 0; }
.fq-main [hidden] { display: none !important; }
.fq-shell { width: min(1180px, calc(100% - 2 * var(--shx-gutter, 24px))); margin-inline: auto; }

/* ---------- 首屏：标题 + 搜索 ---------- */
.fq-hero { padding: 104px 0 60px; background: linear-gradient(180deg, #eef3fc 0%, #f6f8fe 58%, #fff 100%); }
.fq-hero h1 { margin: 0; color: var(--fq-ink); font-size: var(--t-display); font-weight: 700; line-height: 1.15; letter-spacing: -.04em; }
.fq-hero-lead { max-width: 640px; margin: 18px 0 0; color: var(--fq-muted); font-size: var(--t-lead); line-height: 1.75; }
.fq-search { position: relative; max-width: 640px; margin: 34px 0 0; }
.fq-search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fq-search svg { position: absolute; left: 20px; top: 50%; width: 20px; height: 20px; color: var(--fq-subtle); transform: translateY(-50%); pointer-events: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fq-search input { box-sizing: border-box; width: 100%; height: 58px; padding: 0 20px 0 54px; border: 1px solid #dbe3f0; border-radius: 14px; background: #fff; color: var(--fq-ink); font: inherit; font-size: 16px; box-shadow: 0 14px 34px rgba(32, 49, 88, .07); -webkit-appearance: none; appearance: none; }
.fq-search input::placeholder { color: var(--fq-subtle); }
.fq-search input:focus { border-color: var(--fq-blue); outline: 3px solid rgba(49, 93, 255, .16); outline-offset: 0; }
.fq-search input::-webkit-search-cancel-button { cursor: pointer; }
.fq-search-status { min-height: 20px; margin: 10px 0 0; color: var(--fq-muted); font-size: var(--t-small); }
.fq-search-status:empty { min-height: 0; margin: 0; }
.fq-hot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin: 18px 0 0; font-size: 14px; }
.fq-hot span { color: var(--fq-subtle); font-size: var(--t-small); }
.fq-hot a { color: #475467; text-decoration: none; border-bottom: 1px solid #cfd8ea; padding-bottom: 1px; transition: color .15s ease, border-color .15s ease; }
.fq-hot a:hover { color: var(--fq-blue-deep); border-color: var(--fq-blue); }

/* ---------- 正文：左侧分类导航 + 右侧问答 ---------- */
.fq-body { padding: 36px 0 120px; }
.fq-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 80px; align-items: start; }
.fq-side { position: sticky; top: var(--fq-sticky); }
.fq-cats { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.fq-cats a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: 10px; color: #475467; font-size: var(--t-body); line-height: 1.4; text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.fq-cats a span { color: var(--fq-subtle); font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.fq-cats a:hover { background: var(--fq-soft); color: var(--fq-ink); }
.fq-cats a.is-active { background: #eef3ff; color: var(--fq-blue-deep); font-weight: 600; }
.fq-cats a.is-active span { color: #6b86ff; }

.fq-help { margin-top: 32px; padding: 22px 20px; border: 1px solid var(--fq-line); border-radius: 16px; background: #f8faff; }
.fq-help b { display: block; color: var(--fq-ink); font-size: var(--t-body); font-weight: 600; }
.fq-help p { margin: 6px 0 14px; color: var(--fq-muted); font-size: var(--t-small); line-height: 1.7; }
.fq-help a { display: inline-flex; align-items: center; gap: 6px; color: var(--fq-blue); font-size: 14px; font-weight: 600; text-decoration: none; }
.fq-help a + a { margin-top: 8px; }
.fq-help a:hover { color: var(--fq-blue-deep); text-decoration: underline; }
.fq-help nav { display: grid; justify-items: start; }

/* 分组与问题锚点只留 16px 余量：styles.css 已给 html 设 scroll-padding-top（桌面 96px、窄屏 76px）为固定导航让位，两者相加。
 * 若沿用 --fq-sticky（108px），点分类后分组停在 204px，超过滚动监听的 160px 阈值，高亮会落到上一个分类。 */
.fq-group { scroll-margin-top: 16px; }
.fq-group + .fq-group { margin-top: 72px; }
.fq-group > h2 { margin: 0 0 18px; color: var(--fq-ink); font-size: var(--t-h3); font-weight: 600; line-height: 1.3; letter-spacing: -.03em; }
.fq-list { border-top: 1px solid var(--fq-line); }
.fq-item { border-bottom: 1px solid var(--fq-line); scroll-margin-top: 16px; }
.fq-item summary { position: relative; display: block; padding: 24px 64px 24px 0; cursor: pointer; list-style: none; color: var(--fq-ink); font-size: var(--t-q); font-weight: 600; line-height: 1.55; letter-spacing: -.01em; transition: color .15s ease; }
.fq-item summary::-webkit-details-marker { display: none; }
/* 右侧 + 号：两条渐变线画成，展开时旋转为 × */
.fq-item summary::after {
  content: ''; position: absolute; right: 2px; top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%;
  background: linear-gradient(var(--fq-blue), var(--fq-blue)) center / 12px 2px no-repeat, linear-gradient(var(--fq-blue), var(--fq-blue)) center / 2px 12px no-repeat, #f0f4fd;
  transition: transform .2s ease, background-color .2s ease;
}
.fq-item summary:hover { color: var(--fq-blue-deep); }
.fq-item[open] summary::after { transform: rotate(45deg); background-color: #e3eafd; }
.fq-answer { padding: 0 64px 26px 0; }
.fq-answer > * { max-width: 760px; }
.fq-answer p { margin: 0; color: var(--fq-muted); font-size: var(--t-body); line-height: 1.85; }
.fq-answer p + p, .fq-answer p + ul, .fq-answer ul + p { margin-top: 10px; }
.fq-answer ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fq-answer li { position: relative; padding-left: 16px; color: var(--fq-muted); font-size: var(--t-body); line-height: 1.8; }
.fq-answer li::before { content: ''; position: absolute; left: 2px; top: .8em; width: 5px; height: 5px; border-radius: 50%; background: #9fb2ff; }
.fq-answer li b { color: var(--fq-ink); font-weight: 600; }
.fq-answer a { color: var(--fq-blue); font-weight: 600; text-decoration: none; }
.fq-answer a:hover { text-decoration: underline; }

.fq-empty { padding: 32px 0 8px; color: var(--fq-muted); font-size: var(--t-body); line-height: 1.8; }
.fq-empty b { display: block; margin-bottom: 4px; color: var(--fq-ink); font-size: var(--t-h4); font-weight: 600; }
.fq-empty a { color: var(--fq-blue); font-weight: 600; text-decoration: none; }

/* 底部 CTA 的次按钮（帮助中心） */
/* subpage-system 会把 .closing-section 里的所有链接涂成蓝底，这里显式还原为描边按钮 */
.faq-center .site-cta .cta-row .fq-cta-ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border: 1px solid rgba(255, 255, 255, .32); border-radius: 10px; background: transparent; color: #fff; font-size: 15px; text-decoration: none; white-space: nowrap; transition: border-color .2s ease, background-color .2s ease; }
.faq-center .site-cta .cta-row .fq-cta-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

@media (prefers-reduced-motion: reduce) {
  .fq-item summary::after, .fq-cats a { transition: none; }
}

/* ---------- 响应式 ---------- */
@media (max-width: 1050px) {
  body.faq-center { --t-display: 44px; --t-h3: 26px; --t-lead: 17px; --t-q: 17px; }
  .fq-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 48px; }
}

@media (max-width: 860px) {
  .fq-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .fq-side { position: static; }
  /* 分类改为横向滚动的标签，帮助卡片交给底部 CTA 的帮助中心按钮 */
  .fq-cats { display: flex; gap: 8px; margin: 0 calc(-1 * var(--shx-gutter, 24px)); padding: 2px var(--shx-gutter, 24px); overflow-x: auto; scrollbar-width: none; }
  .fq-cats::-webkit-scrollbar { display: none; }
  .fq-cats li { flex: none; }
  .fq-cats a { gap: 8px; padding: 9px 14px; border: 1px solid var(--fq-line); border-radius: 99px; background: #fff; font-size: 14px; white-space: nowrap; }
  .fq-cats a.is-active { border-color: #c9d6ff; }
  .fq-help { display: none; }
}

@media (max-width: 760px) {
  body.faq-center { --t-display: 34px; --t-h3: 22px; --t-lead: 16px; --t-q: 16px; }
  .fq-hero { padding: 84px 0 40px; }
  .fq-search { margin-top: 26px; }
  .fq-search input { height: 52px; padding-left: 48px; border-radius: 12px; }
  .fq-search svg { left: 17px; width: 18px; height: 18px; }
  .fq-hot { gap: 8px 16px; margin-top: 16px; }
  .fq-hot span { flex-basis: 100%; }
  .fq-body { padding: 20px 0 80px; }
  .fq-group + .fq-group { margin-top: 52px; }
  .fq-item summary { padding: 20px 48px 20px 0; line-height: 1.6; }
  .fq-item summary::after { width: 28px; height: 28px; margin-top: -14px; }
  .fq-answer { padding: 0 0 22px; }
  .faq-center .site-cta .cta-row { flex-direction: column-reverse; align-items: stretch; }
  .faq-center .site-cta .cta-row > a { width: 100%; }
}