.page-faq {
  --faq-soft: rgba(53, 242, 192, 0.08);
  --faq-hair: rgba(42, 74, 65, 0.9);
  color: var(--text-primary);
}

/* ===== 面包屑 ===== */
.page-faq .breadcrumb {
  padding-top: clamp(18px, 3vw, 32px);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

.page-faq .breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-faq .breadcrumb li {
  display: inline-flex;
  align-items: center;
}

.page-faq .breadcrumb li + li::before {
  content: "/";
  margin-right: 6px;
  color: var(--line);
}

.page-faq .breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
}

.page-faq .breadcrumb a:hover {
  color: var(--cyan-400);
}

.page-faq .breadcrumb [aria-current="page"] {
  color: var(--cyan-400);
}

/* ===== 首屏 ===== */
.page-faq .faq-hero {
  position: relative;
  margin-top: clamp(16px, 2.4vw, 28px);
  padding: clamp(24px, 4vw, 48px) 0 clamp(28px, 4.5vw, 56px);
  background:
    radial-gradient(120% 100% at 8% 0%, rgba(53, 242, 192, 0.15), transparent 60%),
    radial-gradient(90% 90% at 96% 12%, rgba(255, 184, 77, 0.08), transparent 58%);
}

.page-faq .faq-hero-inner {
  display: grid;
  gap: clamp(28px, 4vw, 44px);
  align-items: end;
}

.page-faq .faq-hero-copy {
  min-width: 0;
}

.page-faq .eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan-400);
  margin: 0 0 14px;
}

.page-faq .faq-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.05rem, 5.6vw, 4.2rem);
  font-weight: 900;
  line-height: 1.03;
  letter-spacing: -0.035em;
  margin: 0 0 20px;
  color: var(--text-primary);
  max-width: 16ch;
}

.page-faq .faq-lead {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(0.98rem, 1.5vw, 1.1rem);
  line-height: 1.78;
  color: var(--text-secondary);
}

.page-faq .faq-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.page-faq .faq-meta .tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text-secondary);
  background: rgba(11, 33, 28, 0.7);
}

.page-faq .faq-meta .tag--amber {
  border-color: rgba(255, 184, 77, 0.5);
  color: var(--amber-400);
}

.page-faq .faq-hero-media {
  position: relative;
  margin: 0;
  min-width: 0;
}

.page-faq .faq-hero-media img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: 0 34px 70px -40px rgba(0, 0, 0, 0.9);
}

.page-faq .faq-hero-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.page-faq .faq-badge-cell {
  flex: 1 1 140px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-glass);
  min-width: 0;
}

.page-faq .faq-badge-num {
  font-family: var(--font-mono);
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1;
  color: var(--cyan-400);
}

.page-faq .faq-badge-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

/* ===== 分类横幅 ===== */
.page-faq .faq-index {
  position: relative;
  overflow: hidden;
  margin-top: clamp(20px, 3.6vw, 40px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  min-height: 210px;
  display: flex;
  align-items: center;
  background: var(--ink-900);
}

.page-faq .faq-index img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  opacity: 0.45;
}

.page-faq .faq-index::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(6, 21, 18, 0.96) 16%, rgba(6, 21, 18, 0.66) 58%, rgba(6, 21, 18, 0.18) 100%);
}

.page-faq .faq-index-text {
  position: relative;
  z-index: 1;
  padding: clamp(26px, 4.4vw, 52px);
  max-width: 640px;
}

.page-faq .faq-index-text h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: 0 0 12px;
  color: var(--text-primary);
}

.page-faq .faq-index-text p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: 46ch;
}

/* ===== 问答主体 ===== */
.page-faq .faq-body {
  position: relative;
  margin-top: clamp(30px, 5vw, 60px);
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  min-width: 0;
}

.page-faq .faq-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

.page-faq .faq-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.page-faq .faq-filters label {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--ink-900);
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.page-faq .faq-filters label:hover {
  border-color: var(--cyan-400);
  color: var(--text-primary);
}

.page-faq .faq-count {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--cyan-400);
  opacity: 0.75;
}

.page-faq #faq-all:checked ~ .faq-filters [for="faq-all"],
.page-faq #faq-replay:checked ~ .faq-filters [for="faq-replay"],
.page-faq #faq-data:checked ~ .faq-filters [for="faq-data"],
.page-faq #faq-calendar:checked ~ .faq-filters [for="faq-calendar"],
.page-faq #faq-pickup:checked ~ .faq-filters [for="faq-pickup"],
.page-faq #faq-account:checked ~ .faq-filters [for="faq-account"],
.page-faq #faq-feedback:checked ~ .faq-filters [for="faq-feedback"] {
  border-color: var(--cyan-400);
  color: var(--text-primary);
  background: linear-gradient(120deg, rgba(53, 242, 192, 0.22), rgba(53, 242, 192, 0.05));
}

.page-faq #faq-all:checked ~ .faq-filters [for="faq-all"] .faq-count,
.page-faq #faq-replay:checked ~ .faq-filters [for="faq-replay"] .faq-count,
.page-faq #faq-data:checked ~ .faq-filters [for="faq-data"] .faq-count,
.page-faq #faq-calendar:checked ~ .faq-filters [for="faq-calendar"] .faq-count,
.page-faq #faq-pickup:checked ~ .faq-filters [for="faq-pickup"] .faq-count,
.page-faq #faq-account:checked ~ .faq-filters [for="faq-account"] .faq-count,
.page-faq #faq-feedback:checked ~ .faq-filters [for="faq-feedback"] .faq-count {
  color: var(--ink-950);
  opacity: 1;
}

.page-faq #faq-all:focus-visible ~ .faq-filters [for="faq-all"],
.page-faq #faq-replay:focus-visible ~ .faq-filters [for="faq-replay"],
.page-faq #faq-data:focus-visible ~ .faq-filters [for="faq-data"],
.page-faq #faq-calendar:focus-visible ~ .faq-filters [for="faq-calendar"],
.page-faq #faq-pickup:focus-visible ~ .faq-filters [for="faq-pickup"],
.page-faq #faq-account:focus-visible ~ .faq-filters [for="faq-account"],
.page-faq #faq-feedback:focus-visible ~ .faq-filters [for="faq-feedback"] {
  outline: 2px solid var(--cyan-400);
  outline-offset: 2px;
}

.page-faq #faq-replay:checked ~ .faq-groups > .faq-group:not(.is-replay),
.page-faq #faq-data:checked ~ .faq-groups > .faq-group:not(.is-data),
.page-faq #faq-calendar:checked ~ .faq-groups > .faq-group:not(.is-calendar),
.page-faq #faq-pickup:checked ~ .faq-groups > .faq-group:not(.is-pickup),
.page-faq #faq-account:checked ~ .faq-groups > .faq-group:not(.is-account),
.page-faq #faq-feedback:checked ~ .faq-groups > .faq-group:not(.is-feedback) {
  display: none;
}

.page-faq .faq-groups {
  display: grid;
  gap: clamp(28px, 4vw, 46px);
  min-width: 0;
}

.page-faq .faq-group {
  min-width: 0;
}

.page-faq .faq-group-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}

.page-faq .faq-group-num {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--cyan-400);
}

.page-faq .faq-group-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.24rem, 2.4vw, 1.72rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-primary);
}

.page-faq .faq-item {
  border-bottom: 1px solid var(--faq-hair);
  transition: background var(--dur) var(--ease);
}

.page-faq .faq-item[open] {
  background: linear-gradient(90deg, rgba(53, 242, 192, 0.07), transparent 72%);
}

.page-faq .faq-item summary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  list-style: none;
  cursor: pointer;
  padding: 18px 10px 18px 12px;
  border-left: 2px solid transparent;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.page-faq .faq-item summary::-webkit-details-marker {
  display: none;
}

.page-faq .faq-item summary:hover,
.page-faq .faq-item[open] summary {
  border-left-color: var(--cyan-400);
}

.page-faq .faq-item summary:focus-visible {
  outline: 2px solid var(--cyan-400);
  outline-offset: -2px;
}

.page-faq .faq-item summary h3 {
  margin: 0;
  font-size: clamp(0.98rem, 1.5vw, 1.06rem);
  font-weight: 600;
  line-height: 1.55;
  color: var(--text-primary);
}

.page-faq .faq-item summary::after {
  content: "+";
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--cyan-400);
  transition: transform var(--dur) var(--ease);
}

.page-faq .faq-item[open] summary::after {
  transform: rotate(45deg);
}

.page-faq .faq-answer {
  padding: 0 16px 22px 26px;
  font-size: 0.95rem;
  line-height: 1.78;
  color: var(--text-secondary);
}

.page-faq .faq-answer p {
  margin: 0 0 12px;
}

.page-faq .faq-answer p:last-child {
  margin-bottom: 0;
}

.page-faq .faq-answer a {
  color: var(--cyan-400);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-faq .faq-answer a:hover {
  color: var(--cyan-200);
}

.page-faq .faq-steps {
  list-style: none;
  counter-reset: faqstep;
  display: grid;
  gap: 10px;
  margin: 4px 0 14px;
  padding: 0;
}

.page-faq .faq-steps li {
  counter-increment: faqstep;
  position: relative;
  padding-left: 38px;
  color: var(--text-primary);
}

.page-faq .faq-steps li::before {
  content: counter(faqstep, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 26px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--cyan-400);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 1px 0;
}

.page-faq .faq-path {
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

.page-faq .faq-path code {
  display: inline-block;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ink-950);
  color: var(--cyan-200);
  word-break: break-word;
}

/* ===== 下一步 ===== */
.page-faq .faq-next {
  margin: clamp(40px, 7vw, 84px) 0 clamp(36px, 6vw, 72px);
  padding: clamp(24px, 4vw, 46px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(255, 184, 77, 0.12), transparent 62%),
    linear-gradient(160deg, var(--ink-800), var(--ink-950));
}

.page-faq .faq-next h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.32rem, 2.8vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text-primary);
}

.page-faq .faq-next-list {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.page-faq .faq-next-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: rgba(6, 21, 18, 0.55);
  text-decoration: none;
  color: var(--text-primary);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.page-faq .faq-next-link:hover,
.page-faq .faq-next-link:focus-visible {
  border-color: var(--cyan-400);
  background: rgba(53, 242, 192, 0.1);
}

.page-faq .faq-next-kicker {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-400);
}

.page-faq .faq-next-title {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.page-faq .faq-next-desc {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* ===== 响应式 ===== */
@media (min-width: 760px) {
  .page-faq .faq-next-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-faq .faq-hero-badge {
    justify-content: flex-start;
  }
}

@media (min-width: 960px) {
  .page-faq .faq-hero-inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(28px, 3.4vw, 56px);
  }

  .page-faq .faq-body {
    grid-template-columns: minmax(0, 272px) minmax(0, 1fr);
    gap: clamp(28px, 3.4vw, 52px);
    align-items: start;
  }

  .page-faq .faq-filters {
    flex-direction: column;
    overflow: visible;
    padding-bottom: 0;
    position: sticky;
    top: calc(var(--bar-h) + 24px);
  }

  .page-faq .faq-filters label {
    width: 100%;
    justify-content: space-between;
    border-radius: 14px;
    padding: 13px 18px;
    font-size: 0.94rem;
  }

  .page-faq .faq-answer {
    padding-left: 30px;
    padding-right: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq *,
  .page-faq *::before,
  .page-faq *::after {
    transition: none !important;
    animation: none !important;
  }
}

<main id="main-content" class="page-faq">
  <div class="shell">
    <nav class="breadcrumb" aria-label="面包屑">
      <ol>
        <li><a href="/">战况归档台</a></li>
        <li aria-current="page">问答中心</li>
      </ol>
    </nav>
  </div>

  <section class="faq-hero" aria-labelledby="faq-hero-title">
    <div class="shell faq-hero-inner">
      <div class="faq-hero-copy">
        <p class="eyebrow">问答中心 · 操作路径</p>
        <h1 id="faq-hero-title">回看、导出、找球局，一步步走通</h1>
        <p class="faq-lead">完美体育赛场把最常用的几个操作写成了直线路径：从比赛页进回看，从会员中心领日历，在移动端第三屏找约球局。下面按你正在处理的事分组，展开就有一条能照着做的路线。</p>
        <ul class="faq-meta">
          <li><span class="tag">比赛编号 8 位</span></li>
          <li><span class="tag">客服 工作日 10:00–18:00</span></li>
          <li><span class="tag tag--amber">CSV · XLSX · PDF</span></li>
        </ul>
      </div>
      <figure class="faq-hero-media">
        <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="深色界面中的赛事检索框、比赛编号标签与问题分类胶囊，青绿高亮">
        <figcaption class="faq-hero-badge">
          <span class="faq-badge-cell">
            <span class="faq-badge-num">10</span>
            <span class="faq-badge-label">分钟 · 基础统计上线</span>
          </span>
          <span class="faq-badge-cell">
            <span class="faq-badge-num">2</span>
            <span class="faq-badge-label">小时 · 集锦切片完成</span>
          </span>
        </figcaption>
      </figure>
    </div>
  </section>

  <div class="shell">
    <section class="faq-index" aria-labelledby="faq-index-title">
      <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="场馆灯光在深墨绿背景上形成的柔和渐变与看台纹理局部" loading="lazy" decoding="async">
      <div class="faq-index-text">
        <h2 id="faq-index-title">按手上的事找答案</h2>
        <p>从赛后回看到数据修正，六类场景各有一条清晰入口。点左侧分类缩小范围，或直接展开你想问的那一条。</p>
      </div>
    </section>

    <div class="faq-body">
      <input class="faq-radio" type="radio" name="faqcat" id="faq-all" checked>
      <input class="faq-radio" type="radio" name="faqcat" id="faq-replay">
      <input class="faq-radio" type="radio" name="faqcat" id="faq-data">
      <input class="faq-radio" type="radio" name="faqcat" id="faq-calendar">
      <input class="faq-radio" type="radio" name="faqcat" id="faq-pickup">
      <input class="faq-radio" type="radio" name="faqcat" id="faq-account">
      <input class="faq-radio" type="radio" name="faqcat" id="faq-feedback">

      <div class="faq-filters" role="group" aria-label="按场景筛选问题">
        <label for="faq-all"><span>全部问题</span><span class="faq-count">18</span></label>
        <label for="faq-replay"><span>回看与集锦</span><span class="faq-count">03</span></label>
        <label for="faq-data"><span>统计与面板</span><span class="faq-count">03</span></label>
        <label for="faq-calendar"><span>赛程日历</span><span class="faq-count">03</span></label>
        <label for="faq-pickup"><span>找约球局</span><span class="faq-count">03</span></label>
        <label for="faq-account"><span>账号与设备</span><span class="faq-count">03</span></label>
        <label for="faq-feedback"><span>数据问题</span><span class="faq-count">03</span></label>
      </div>

      <div class="faq-groups">

        <section class="faq-group is-replay" aria-labelledby="g-replay">
          <div class="faq-group-head">
            <span class="faq-group-num">01</span>
            <h2 id="g-replay">回看与集锦</h2>
          </div>
          <details class="faq-item">
            <summary><h3>一场球打完，多久能看到回看？</h3></summary>
            <div class="faq-answer">
              <p>终场后 2 小时内完成集锦切片，基础统计 10 分钟内先上线。入口在比赛页顶部的回看条，全站已按场次生成 21,000 余条集锦，随时从对应比赛页进。</p>
              <p class="faq-path">路径：<code>比赛页 → 顶部回看条</code></p>
            </div>
          </details>
          <details class="faq-item">
            <summary><h3>怎么快速定位到我要的那一场？</h3></summary>
            <div class="faq-answer">
              <p>三种方式都行：直接输入 8 位比赛编号；从赛程日历点进那一场；在球队页翻历史场次。比赛编号在赛程、战报和导出的文件里都能看到，照着填最快。</p>
              <p class="faq-path">路径：<code>检索栏 → 输入比赛编号 → 比赛页</code></p>
            </div>
          </details>
          <details class="faq-item">
            <summary><h3>只想看关键回合，能不能跳过其他内容？</h3></summary>
            <div class="faq-answer">
              <p>播放器下方的筛选条支持按得分、关键回合、终场时刻与球员高光四类挑片段，选完接着播，不用来回拖进度条。给教练复盘和球迷看高光都用得上。</p>
            </div>
          </details>
        </section>

        <section class="faq-group is-data" aria-labelledby="g-data">
          <div class="faq-group-head">
            <span class="faq-group-num">02</span>
            <h2 id="g-data">赛后统计与数据面板</h2>
          </div>
          <details class="faq-item">
            <summary><h3>2025 赛季的数据面板有什么新东西？</h3></summary>
            <div class="faq-answer">
              <p>新增跑动距离、投篮热区、攻防转换效率等 9 项指标，字段说明中英双语。赛后统计在移动端已前置到首屏第二栏，手机上翻对战数据比查赛程更顺手。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary><h3>数据面板怎么导出来带走？</h3></summary>
            <div class="faq-answer">
              <ol class="faq-steps">
                <li>打开任意一场比赛的数据面板。</li>
                <li>点右上角导出，选 CSV、XLSX 或 PDF。</li>
                <li>30 秒内生成下载链接，单次最多带上 200 场比赛。</li>
              </ol>
              <p>整季数据建议按日期区间分批导，文件更小也更好核对。字段模板与格式说明放在<a href="/download/">下载中心</a>，需要交给赞助方或教练组时一并附上更清楚。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary><h3>面板能按什么条件查？</h3></summary>
            <div class="faq-answer">
              <p>支持比赛编号、球队、球员和日期区间四种检索方式，几个条件可以叠加。想比较同一名球员跨月表现，选球员加日期区间就够。</p>
            </div>
          </details>
        </section>

        <section class="faq-group is-calendar" aria-labelledby="g-calendar">
          <div class="faq-group-head">
            <span class="faq-group-num">03</span>
            <h2 id="g-calendar">赛程日历与会员中心</h2>
          </div>
          <details class="faq-item">
            <summary><h3>大屏版赛程日历在哪里领？</h3></summary>
            <div class="faq-answer">
              <p>进会员中心找到赛程日历，按球队、场馆或日期筛好，再导出 ICS 文件。大屏版于 2024 年上线，4K 与 1080P 投屏都能铺满，场馆入口挂一块屏就能用。</p>
              <p class="faq-path">路径：<code>会员中心 → 赛程日历 → 筛选 → 导出 ICS</code></p>
            </div>
          </details>
          <details class="faq-item">
            <summary><h3>排期临时调整了怎么办？</h3></summary>
            <div class="faq-answer">
              <p>组织方在会员中心改完赛程后，重新导出一份 ICS 覆盖旧文件就行。2025 赛季累计下载赛程日历 35 万次，临场改期的场景很常见，建议开赛前一天再看一眼。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary><h3>会员中心还能做哪些事？</h3></summary>
            <div class="faq-answer">
              <p>创建赛事、导入赛程、给每场比赛分配编号；把数据留存从标准 5 个赛季延长到 10 个赛季；为合作赛事开通专属归档页与数据页。城市联赛组委会用这一套就能把整季管起来。</p>
            </div>
          </details>
        </section>

        <section class="faq-group is-pickup" aria-labelledby="g-pickup">
          <div class="faq-group-head">
            <span class="faq-group-num">04</span>
            <h2 id="g-pickup">约球局站内检索</h2>
          </div>
          <details class="faq-item">
            <summary><h3>约球局站内检索在哪里？</h3></summary>
            <div class="faq-answer">
              <p>在移动端第三屏。可按城市、时间、场地类型和水平标签组合筛，结果再按距离、时间、费用或水平重新排序，选一场报名就能加入。</p>
              <p class="faq-path">路径：<code>移动端首页 → 第三屏 → 约球局检索</code></p>
            </div>
          </details>
          <details class="faq-item">
            <summary><h3>筛出来的场次太少怎么调？</h3></summary>
            <div class="faq-answer">
              <p>一次只放宽一个条件：先把时间从当天放到一周内，再放开水平标签，最后扩大城市范围。多数情况放宽时间就够了，场地类型留空能多出一批选择。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary><h3>在电脑上能找球局吗？</h3></summary>
            <div class="faq-answer">
              <p>桌面端更适合回看和导出，找球局在手机上更顺手。把看中的场次加进日历后，赛程日历里也能看到这一场，不会和联赛排期撞车。</p>
            </div>
          </details>
        </section>

        <section class="faq-group is-account" aria-labelledby="g-account">
          <div class="faq-group-head">
            <span class="faq-group-num">05</span>
            <h2 id="g-account">账号、设备与缓存</h2>
          </div>
          <details class="faq-item">
            <summary><h3>没网的时候能看数据吗？</h3></summary>
            <div class="faq-answer">
              <p>移动端支持离线缓存最近 20 场比赛的数据面板，缓存过的场次在列表上有标记。去客场路上想先看对手数据，提前缓存好就能打开。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary><h3>我的手机适配吗？</h3></summary>
            <div class="faq-answer">
              <p>移动端适配清单覆盖 2025 赛季面板，主流 iOS 与 Android 机型都在内。升级系统后若出现排版错位，把机型和系统版本一并告诉我们，处理起来更快。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary><h3>投屏到大屏要注意什么？</h3></summary>
            <div class="faq-answer">
              <p>大屏版适配 4K 与 1080P，投屏前把数据面板切到横版，字会更大。赛程日历先按球队筛一遍，画面上只留当天场次，看台上的人远远也能看清。</p>
            </div>
          </details>
        </section>

        <section class="faq-group is-feedback" aria-labelledby="g-feedback">
          <div class="faq-group-head">
            <span class="faq-group-num">06</span>
            <h2 id="g-feedback">数据问题反馈</h2>
          </div>
          <details class="faq-item">
            <summary><h3>发现统计不对，怎么反馈？</h3></summary>
            <div class="faq-answer">
              <p>邮件或电话都行。邮件里附上比赛编号、出错的字段和正确值，我们按双人复核流程处理，累计已完成 3,600 余次修正，平均 2 个工作日内给出复核结果。</p>
              <p class="faq-path">路径：<code>比赛页记录比赛编号 → 咨询通道提交</code></p>
            </div>
          </details>
          <details class="faq-item">
            <summary><h3>什么时候能找到人？</h3></summary>
            <div class="faq-answer">
              <p>工作日 10:00–18:00 有专人回复。赛事数据与回看问题记得附比赛编号，能少一轮来回确认。具体联系方式与常见场景见<a href="/inquiry/">咨询通道</a>，个人信息如何处理见<a href="/privacy-policy/">隐私政策</a>。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary><h3>想合作或把自己的赛事接进来？</h3></summary>
            <div class="faq-answer">
              <p>场馆合作走资料提交、场馆认证、赛事排期、数据接入四步。赛事组织方也可以先在会员中心创建赛事、导入赛程，我们再为你的联赛开通专属归档页。目前合作场馆 1,200 余家，赛事组织方 860 家。</p>
            </div>
          </details>
        </section>

      </div>
    </div>

    <section class="faq-next" aria-labelledby="faq-next-title">
      <p class="eyebrow">下一步</p>
      <h2 id="faq-next-title">还没找到你要的答案？</h2>
      <div class="faq-next-list">
        <a class="faq-next-link" href="/download/">
          <span class="faq-next-kicker">客户端与文件</span>
          <span class="faq-next-title">下载中心</span>
          <span class="faq-next-desc">移动端、大屏版赛程日历与数据导出模板都在这里取。</span>
        </a>
        <a class="faq-next-link" href="/inquiry/">
          <span class="faq-next-kicker">人工支持</span>
          <span class="faq-next-title">咨询通道</span>
          <span class="faq-next-desc">场馆合作、赛事接入、数据修正和账号问题都可以提。</span>
        </a>
        <a class="faq-next-link" href="/articles/">
          <span class="faq-next-kicker">赛事观察</span>
          <span class="faq-next-title">战况归档志</span>
          <span class="faq-next-desc">功能更新、回看精选与组织者手记，了解我们怎么用。</span>
        </a>
      </div>
    </section>
  </div>
</main>

.page-faq {
  --faq-soft: rgba(53, 242, 192, 0.08);
  --faq-hair: rgba(42, 74, 65, 0.9);
  color: var(--text-primary);
}

/* ===== 面包屑 ===== */
.page-faq .breadcrumb {
  padding-top: clamp(18px, 3vw, 32px);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

.page-faq .breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-faq .breadcrumb li {
  display: inline-flex;
  align-items: center;
}

.page-faq .breadcrumb li + li::before {
  content: "/";
  margin-right: 6px;
  color: var(--line);
}

.page-faq .breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
}

.page-faq .breadcrumb a:hover {
  color: var(--cyan-400);
}

.page-faq .breadcrumb [aria-current="page"] {
  color: var(--cyan-400);
}

/* ===== 首屏 ===== */
.page-faq .faq-hero {
  position: relative;
  margin-top: clamp(16px, 2.4vw, 28px);
  padding: clamp(24px, 4vw, 48px) 0 clamp(28px, 4.5vw, 56px);
  background:
    radial-gradient(120% 100% at 8% 0%, rgba(53, 242, 192, 0.15), transparent 60%),
    radial-gradient(90% 90% at 96% 12%, rgba(255, 184, 77, 0.08), transparent 58%);
}

.page-faq .faq-hero-inner {
  display: grid;
  gap: clamp(28px, 4vw, 44px);
  align-items: end;
}

.page-faq .faq-hero-copy {
  min-width: 0;
}

.page-faq .eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan-400);
  margin: 0 0 14px;
}

.page-faq .faq-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.05rem, 5.6vw, 4.2rem);
  font-weight: 900;
  line-height: 1.03;
  letter-spacing: -0.035em;
  margin: 0 0 20px;
  color: var(--text-primary);
  max-width: 16ch;
}

.page-faq .faq-lead {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(0.98rem, 1.5vw, 1.1rem);
  line-height: 1.78;
  color: var(--text-secondary);
}

.page-faq .faq-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.page-faq .faq-meta .tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text-secondary);
  background: rgba(11, 33, 28, 0.7);
}

.page-faq .faq-meta .tag--amber {
  border-color: rgba(255, 184, 77, 0.5);
  color: var(--amber-400);
}

.page-faq .faq-hero-media {
  position: relative;
  margin: 0;
  min-width: 0;
}

.page-faq .faq-hero-media img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: 0 34px 70px -40px rgba(0, 0, 0, 0.9);
}

.page-faq .faq-hero-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.page-faq .faq-badge-cell {
  flex: 1 1 140px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-glass);
  min-width: 0;
}

.page-faq .faq-badge-num {
  font-family: var(--font-mono);
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1;
  color: var(--cyan-400);
}

.page-faq .faq-badge-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

/* ===== 分类横幅 ===== */
.page-faq .faq-index {
  position: relative;
  overflow: hidden;
  margin-top: clamp(20px, 3.6vw, 40px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  min-height: 210px;
  display: flex;
  align-items: center;
  background: var(--ink-900);
}

.page-faq .faq-index img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  opacity: 0.45;
}

.page-faq .faq-index::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(6, 21, 18, 0.96) 16%, rgba(6, 21, 18, 0.66) 58%, rgba(6, 21, 18, 0.18) 100%);
}

.page-faq .faq-index-text {
  position: relative;
  z-index: 1;
  padding: clamp(26px, 4.4vw, 52px);
  max-width: 640px;
}

.page-faq .faq-index-text h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: 0 0 12px;
  color: var(--text-primary);
}

.page-faq .faq-index-text p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: 46ch;
}

/* ===== 问答主体 ===== */
.page-faq .faq-body {
  position: relative;
  margin-top: clamp(30px, 5vw, 60px);
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  min-width: 0;
}

.page-faq .faq-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

.page-faq .faq-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.page-faq .faq-filters label {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--ink-900);
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.page-faq .faq-filters label:hover {
  border-color: var(--cyan-400);
  color: var(--text-primary);
}

.page-faq .faq-count {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--cyan-400);
  opacity: 0.75;
}

.page-faq #faq-all:checked ~ .faq-filters [for="faq-all"],
.page-faq #faq-replay:checked ~ .faq-filters [for="faq-replay"],
.page-faq #faq-data:checked ~ .faq-filters [for="faq-data"],
.page-faq #faq-calendar:checked ~ .faq-filters [for="faq-calendar"],
.page-faq #faq-pickup:checked ~ .faq-filters [for="faq-pickup"],
.page-faq #faq-account:checked ~ .faq-filters [for="faq-account"],
.page-faq #faq-feedback:checked ~ .faq-filters [for="faq-feedback"] {
  border-color: var(--cyan-400);
  color: var(--text-primary);
  background: linear-gradient(120deg, rgba(53, 242, 192, 0.22), rgba(53, 242, 192, 0.05));
}

.page-faq #faq-all:checked ~ .faq-filters [for="faq-all"] .faq-count,
.page-faq #faq-replay:checked ~ .faq-filters [for="faq-replay"] .faq-count,
.page-faq #faq-data:checked ~ .faq-filters [for="faq-data"] .faq-count,
.page-faq #faq-calendar:checked ~ .faq-filters [for="faq-calendar"] .faq-count,
.page-faq #faq-pickup:checked ~ .faq-filters [for="faq-pickup"] .faq-count,
.page-faq #faq-account:checked ~ .faq-filters [for="faq-account"] .faq-count,
.page-faq #faq-feedback:checked ~ .faq-filters [for="faq-feedback"] .faq-count {
  color: var(--ink-950);
  opacity: 1;
}

.page-faq #faq-all:focus-visible ~ .faq-filters [for="faq-all"],
.page-faq #faq-replay:focus-visible ~ .faq-filters [for="faq-replay"],
.page-faq #faq-data:focus-visible ~ .faq-filters [for="faq-data"],
.page-faq #faq-calendar:focus-visible ~ .faq-filters [for="faq-calendar"],
.page-faq #faq-pickup:focus-visible ~ .faq-filters [for="faq-pickup"],
.page-faq #faq-account:focus-visible ~ .faq-filters [for="faq-account"],
.page-faq #faq-feedback:focus-visible ~ .faq-filters [for="faq-feedback"] {
  outline: 2px solid var(--cyan-400);
  outline-offset: 2px;
}

.page-faq #faq-replay:checked ~ .faq-groups > .faq-group:not(.is-replay),
.page-faq #faq-data:checked ~ .faq-groups > .faq-group:not(.is-data),
.page-faq #faq-calendar:checked ~ .faq-groups > .faq-group:not(.is-calendar),
.page-faq #faq-pickup:checked ~ .faq-groups > .faq-group:not(.is-pickup),
.page-faq #faq-account:checked ~ .faq-groups > .faq-group:not(.is-account),
.page-faq #faq-feedback:checked ~ .faq-groups > .faq-group:not(.is-feedback) {
  display: none;
}

.page-faq .faq-groups {
  display: grid;
  gap: clamp(28px, 4vw, 46px);
  min-width: 0;
}

.page-faq .faq-group {
  min-width: 0;
}

.page-faq .faq-group-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}

.page-faq .faq-group-num {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--cyan-400);
}

.page-faq .faq-group-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.24rem, 2.4vw, 1.72rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-primary);
}

.page-faq .faq-item {
  border-bottom: 1px solid var(--faq-hair);
  transition: background var(--dur) var(--ease);
}

.page-faq .faq-item[open] {
  background: linear-gradient(90deg, rgba(53, 242, 192, 0.07), transparent 72%);
}

.page-faq .faq-item summary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  list-style: none;
  cursor: pointer;
  padding: 18px 10px 18px 12px;
  border-left: 2px solid transparent;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.page-faq .faq-item summary::-webkit-details-marker {
  display: none;
}

.page-faq .faq-item summary:hover,
.page-faq .faq-item[open] summary {
  border-left-color: var(--cyan-400);
}

.page-faq .faq-item summary:focus-visible {
  outline: 2px solid var(--cyan-400);
  outline-offset: -2px;
}

.page-faq .faq-item summary h3 {
  margin: 0;
  font-size: clamp(0.98rem, 1.5vw, 1.06rem);
  font-weight: 600;
  line-height: 1.55;
  color: var(--text-primary);
}

.page-faq .faq-item summary::after {
  content: "+";
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--cyan-400);
  transition: transform var(--dur) var(--ease);
}

.page-faq .faq-item[open] summary::after {
  transform: rotate(45deg);
}

.page-faq .faq-answer {
  padding: 0 16px 22px 26px;
  font-size: 0.95rem;
  line-height: 1.78;
  color: var(--text-secondary);
}

.page-faq .faq-answer p {
  margin: 0 0 12px;
}

.page-faq .faq-answer p:last-child {
  margin-bottom: 0;
}

.page-faq .faq-answer a {
  color: var(--cyan-400);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-faq .faq-answer a:hover {
  color: var(--cyan-200);
}

.page-faq .faq-steps {
  list-style: none;
  counter-reset: faqstep;
  display: grid;
  gap: 10px;
  margin: 4px 0 14px;
  padding: 0;
}

.page-faq .faq-steps li {
  counter-increment: faqstep;
  position: relative;
  padding-left: 38px;
  color: var(--text-primary);
}

.page-faq .faq-steps li::before {
  content: counter(faqstep, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 26px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--cyan-400);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 1px 0;
}

.page-faq .faq-path {
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

.page-faq .faq-path code {
  display: inline-block;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ink-950);
  color: var(--cyan-200);
  word-break: break-word;
}

/* ===== 下一步 ===== */
.page-faq .faq-next {
  margin: clamp(40px, 7vw, 84px) 0 clamp(36px, 6vw, 72px);
  padding: clamp(24px, 4vw, 46px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(255, 184, 77, 0.12), transparent 62%),
    linear-gradient(160deg, var(--ink-800), var(--ink-950));
}

.page-faq .faq-next h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.32rem, 2.8vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text-primary);
}

.page-faq .faq-next-list {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.page-faq .faq-next-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: rgba(6, 21, 18, 0.55);
  text-decoration: none;
  color: var(--text-primary);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.page-faq .faq-next-link:hover,
.page-faq .faq-next-link:focus-visible {
  border-color: var(--cyan-400);
  background: rgba(53, 242, 192, 0.1);
}

.page-faq .faq-next-kicker {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-400);
}

.page-faq .faq-next-title {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.page-faq .faq-next-desc {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* ===== 响应式 ===== */
@media (min-width: 760px) {
  .page-faq .faq-next-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-faq .faq-hero-badge {
    justify-content: flex-start;
  }
}

@media (min-width: 960px) {
  .page-faq .faq-hero-inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(28px, 3.4vw, 56px);
  }

  .page-faq .faq-body {
    grid-template-columns: minmax(0, 272px) minmax(0, 1fr);
    gap: clamp(28px, 3.4vw, 52px);
    align-items: start;
  }

  .page-faq .faq-filters {
    flex-direction: column;
    overflow: visible;
    padding-bottom: 0;
    position: sticky;
    top: calc(var(--bar-h) + 24px);
  }

  .page-faq .faq-filters label {
    width: 100%;
    justify-content: space-between;
    border-radius: 14px;
    padding: 13px 18px;
    font-size: 0.94rem;
  }

  .page-faq .faq-answer {
    padding-left: 30px;
    padding-right: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq *,
  .page-faq *::before,
  .page-faq *::after {
    transition: none !important;
    animation: none !important;
  }
}