.page-faq {
  --faq-line: rgba(201, 195, 182, .22);
  --faq-line-strong: rgba(201, 195, 182, .38);
  --faq-deep: #0E6B57;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-sans);
  overflow-x: hidden;
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero {
  position: relative;
  padding: calc(var(--header-h) + 44px) 0 52px;
  background:
    radial-gradient(120% 90% at 88% -10%, rgba(59, 242, 200, .20), transparent 58%),
    radial-gradient(90% 80% at -5% 110%, rgba(255, 106, 61, .17), transparent 56%),
    linear-gradient(158deg, var(--night) 0%, var(--ink) 72%);
  border-bottom: 2px solid var(--faq-line);
  overflow: hidden;
}

.page-faq .faq-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(201, 195, 182, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(201, 195, 182, .07) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(200deg, #000 0%, transparent 72%);
  -webkit-mask-image: linear-gradient(200deg, #000 0%, transparent 72%);
  pointer-events: none;
}

.page-faq .faq-hero .shell {
  position: relative;
  z-index: 1;
}

.page-faq .breadcrumbs {
  margin-bottom: 26px;
}

.page-faq .faq-title {
  margin: 16px 0 0;
  max-width: 16em;
  font-size: clamp(30px, 5.2vw, 58px);
  line-height: 1.16;
  font-weight: 900;
  letter-spacing: -.02em;
}

.page-faq .faq-lede {
  margin: 22px 0 0;
  max-width: 42em;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.9;
  color: rgba(242, 235, 221, .78);
}

/* ---------- 首屏分类索引 ---------- */
.page-faq .faq-index {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.page-faq .faq-index-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 16px 16px;
  border: 2px solid var(--faq-line-strong);
  background: rgba(18, 54, 46, .6);
  color: inherit;
  text-decoration: none;
  transition:
    border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.page-faq .faq-index-item:hover,
.page-faq .faq-index-item:focus-visible {
  border-color: var(--cyan);
  background: rgba(18, 54, 46, .92);
  transform: translate(-2px, -2px);
}

.page-faq .faq-index-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--orange);
}

.page-faq .faq-index-label {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.page-faq .faq-index-count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--sage);
  white-space: nowrap;
}

/* ---------- 主体布局 ---------- */
.page-faq .faq-main {
  background: var(--ink);
  padding: 44px 0 72px;
}

.page-faq .faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

/* ---------- 侧边索引 ---------- */
.page-faq .faq-rail {
  border: 2px solid var(--faq-line);
  background: var(--night);
  padding: 18px 18px 14px;
}

.page-faq .faq-rail-title {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--cyan);
}

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

.page-faq .faq-rail-list li {
  flex: 0 1 auto;
}

.page-faq .faq-rail-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid var(--faq-line-strong);
  color: rgba(242, 235, 221, .84);
  font-size: 13.5px;
  line-height: 1.5;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.page-faq .faq-rail-list a:hover,
.page-faq .faq-rail-list a:focus-visible {
  border-color: var(--cyan);
  color: var(--cyan);
}

.page-faq .faq-rail-list em {
  font-family: var(--font-mono);
  font-style: normal;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--sage);
}

/* ---------- 问题分组 ---------- */
.page-faq .faq-column {
  min-width: 0;
}

.page-faq .faq-group {
  margin-bottom: 56px;
  scroll-margin-top: calc(var(--header-h) + 20px);
}

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

.page-faq .faq-group-head {
  border-top: 2px solid var(--faq-line-strong);
  padding-top: 20px;
  margin-bottom: 22px;
}

.page-faq .faq-group-head .tag {
  display: inline-block;
  margin-bottom: 12px;
}

.page-faq .faq-group-head .title-md {
  margin: 0 0 10px;
  line-height: 1.25;
}

.page-faq .faq-group-desc {
  margin: 0;
  max-width: 40em;
  font-size: 14.5px;
  line-height: 1.85;
  color: rgba(242, 235, 221, .68);
}

/* ---------- 配图 ---------- */
.page-faq .faq-figure {
  margin: 0 0 24px;
  border: 2px solid var(--faq-line-strong);
  background: var(--night);
  box-shadow: var(--hard-shadow);
}

.page-faq .faq-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.page-faq .faq-figure figcaption {
  padding: 10px 14px;
  border-top: 2px solid var(--faq-line);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--sage);
}

/* ---------- 问题卡 ---------- */
.page-faq .faq-card {
  margin-bottom: 12px;
  border: 2px solid var(--faq-line-strong);
  border-left-width: 6px;
  background: var(--panel);
  box-shadow: var(--hard-shadow);
  transition:
    border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.page-faq .faq-card:hover {
  border-color: var(--cyan);
}

.page-faq .faq-card[open] {
  border-color: var(--cyan);
  background: var(--cream);
  color: var(--black);
  box-shadow: 8px 8px 0 rgba(59, 242, 200, .18);
}

.page-faq .faq-card > summary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 16px;
  cursor: pointer;
  list-style: none;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.6;
}

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

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

.page-faq .faq-num {
  flex: 0 0 auto;
  padding-top: 3px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--cyan);
}

.page-faq .faq-card[open] .faq-num {
  color: var(--faq-deep);
}

.page-faq .faq-q {
  flex: 1 1 auto;
  min-width: 0;
}

.page-faq .faq-sign {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 6px;
  margin-left: 4px;
  color: var(--orange);
}

.page-faq .faq-card[open] .faq-sign {
  color: var(--faq-deep);
}

.page-faq .faq-sign::before,
.page-faq .faq-sign::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform var(--dur) var(--ease);
}

.page-faq .faq-sign::before {
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}

.page-faq .faq-sign::after {
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}

.page-faq .faq-card[open] .faq-sign::after {
  transform: translateX(-50%) scaleY(0);
}

.page-faq .faq-a {
  padding: 0 16px 18px 16px;
  font-size: 15px;
  line-height: 1.88;
  color: #1C2A24;
}

.page-faq .faq-a p {
  margin: 0;
}

.page-faq .faq-a p + p {
  margin-top: 10px;
}

.page-faq .faq-steps {
  margin: 0;
  padding-left: 18px;
}

.page-faq .faq-steps li {
  margin-bottom: 6px;
}

.page-faq .faq-steps li:last-child {
  margin-bottom: 0;
}

/* ---------- 未解决区块 ---------- */
.page-faq .faq-unresolved {
  padding: 56px 0 64px;
  background:
    radial-gradient(90% 80% at 100% 0%, rgba(59, 242, 200, .14), transparent 60%),
    linear-gradient(160deg, var(--night) 0%, var(--ink) 78%);
  border-top: 2px solid var(--faq-line-strong);
}

.page-faq .faq-unresolved-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

.page-faq .faq-unresolved-text .title-lg {
  margin: 12px 0 0;
  line-height: 1.25;
}

.page-faq .faq-unresolved-desc {
  margin: 18px 0 0;
  max-width: 40em;
  font-size: 15px;
  line-height: 1.9;
  color: rgba(242, 235, 221, .74);
}

.page-faq .faq-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-faq .faq-contact-card {
  padding: 22px;
  background: var(--cream);
  color: var(--black);
  border: 2px solid var(--black);
  box-shadow: 8px 8px 0 rgba(59, 242, 200, .3);
}

.page-faq .faq-contact-title {
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(10, 15, 13, .16);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
}

.page-faq .faq-contact-list {
  margin: 0;
  padding: 0;
}

.page-faq .faq-contact-row {
  display: grid;
  grid-template-columns: minmax(64px, 84px) minmax(0, 1fr);
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(10, 15, 13, .1);
}

.page-faq .faq-contact-row:last-child {
  border-bottom: 0;
}

.page-faq .faq-contact-row dt {
  font-size: 12.5px;
  font-weight: 700;
  color: #4A5A52;
  letter-spacing: .04em;
}

.page-faq .faq-contact-row dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  word-break: break-word;
}

.page-faq .faq-contact-note {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 2px solid rgba(10, 15, 13, .16);
  font-size: 13px;
  line-height: 1.8;
  color: #3A4A43;
}

/* ---------- 中等屏幕 ---------- */
@media (min-width: 720px) {
  .page-faq .faq-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .page-faq .faq-card > summary {
    padding: 18px 22px;
    font-size: 16px;
  }

  .page-faq .faq-a {
    padding: 0 22px 20px 22px;
  }

  .page-faq .faq-unresolved-inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 40px;
    align-items: start;
  }
}

/* ---------- 桌面 ---------- */
@media (min-width: 1000px) {
  .page-faq .faq-hero {
    padding: calc(var(--header-h) + 64px) 0 64px;
  }

  .page-faq .faq-index {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-faq .faq-index-item {
    grid-template-columns: auto;
    grid-template-rows: auto auto auto;
    align-items: start;
    gap: 8px;
    padding: 18px 16px 20px;
  }

  .page-faq .faq-index-label {
    font-size: 15.5px;
  }

  .page-faq .faq-main {
    padding: 64px 0 96px;
  }

  .page-faq .faq-layout {
    grid-template-columns: 244px minmax(0, 1fr);
    gap: 56px;
  }

  .page-faq .faq-rail {
    position: sticky;
    top: calc(var(--header-h) + 28px);
    align-self: start;
    padding: 22px 20px 18px;
  }

  .page-faq .faq-rail-list {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 2px;
  }

  .page-faq .faq-rail-list a {
    justify-content: space-between;
    width: 100%;
    padding: 9px 10px;
    border-color: transparent;
    border-bottom: 1px solid var(--faq-line);
  }

  .page-faq .faq-rail-list li:last-child a {
    border-bottom: 0;
  }

  .page-faq .faq-rail-list a:hover,
  .page-faq .faq-rail-list a:focus-visible {
    border-color: transparent;
    border-bottom-color: var(--cyan);
    background: rgba(59, 242, 200, .07);
  }

  .page-faq .faq-group {
    margin-bottom: 72px;
  }

  .page-faq .faq-card > summary {
    padding: 20px 24px;
    font-size: 16.5px;
    gap: 16px;
  }

  .page-faq .faq-num {
    font-size: 13px;
  }

  .page-faq .faq-a {
    padding: 0 24px 22px 24px;
    font-size: 15.5px;
  }

  .page-faq .faq-unresolved {
    padding: 80px 0 88px;
  }
}

/* ---------- 动效降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-index-item,
  .page-faq .faq-card,
  .page-faq .faq-sign::before,
  .page-faq .faq-sign::after,
  .page-faq .faq-rail-list a {
    transition: none;
  }

  .page-faq .faq-index-item:hover,
  .page-faq .faq-index-item:focus-visible {
    transform: none;
  }
}
<<<END>>>

等等，我不该输出 END 标记。只能输出两个标记块。让我重新输出，不加 END 标记。

其实我已经写了 `<<<END>>>`，但这不是被要求的。需要移除它。只保留两个标记。

把最终答案重新输出一遍，不加 END 标记。
<main id="main-content" class="page-faq">

  <section class="faq-hero" data-hero>
    <div class="shell">
      <nav class="breadcrumbs" aria-label="面包屑">
        <ol>
          <li><a href="/">首页</a></li>
          <li aria-current="page">常见说明</li>
        </ol>
      </nav>

      <p class="eyebrow">常见说明 · 36 篇问答</p>
      <h1 class="faq-title">手机上找不到入口、看不懂主客场走势，答案大多在这四组里</h1>
      <p class="faq-lede">
        新英体育把客服邮箱里重复率最高的问题整理成册：收藏放哪了、比分怎么追、近10场区间统计的是什么、换设备后收藏还在不在。先按分类找，再展开对应条目，多数情况不用等回信。
      </p>

      <ul class="faq-index">
        <li>
          <a class="faq-index-item" href="#panel-entry">
            <span class="faq-index-num">01</span>
            <span class="faq-index-label">面板与入口</span>
            <span class="faq-index-count">10 个问题</span>
          </a>
        </li>
        <li>
          <a class="faq-index-item" href="#data-range">
            <span class="faq-index-num">02</span>
            <span class="faq-index-label">主客场数据区间</span>
            <span class="faq-index-count">8 个问题</span>
          </a>
        </li>
        <li>
          <a class="faq-index-item" href="#service-version">
            <span class="faq-index-num">03</span>
            <span class="faq-index-label">服务范围与版本记录</span>
            <span class="faq-index-count">10 个问题</span>
          </a>
        </li>
        <li>
          <a class="faq-index-item" href="#account-support">
            <span class="faq-index-num">04</span>
            <span class="faq-index-label">账号、收藏与联系支持</span>
            <span class="faq-index-count">8 个问题</span>
          </a>
        </li>
      </ul>
    </div>
  </section>

  <section class="faq-main">
    <div class="shell faq-layout">

      <aside class="faq-rail" aria-label="分类索引">
        <p class="faq-rail-title">按分类查</p>
        <ul class="faq-rail-list">
          <li><a href="#panel-entry"><span>面板与入口</span><em>10</em></a></li>
          <li><a href="#data-range"><span>主客场数据区间</span><em>8</em></a></li>
          <li><a href="#service-version"><span>服务范围与版本记录</span><em>10</em></a></li>
          <li><a href="#account-support"><span>账号、收藏与联系支持</span><em>8</em></a></li>
          <li><a href="#unresolved"><span>还没解决</span><em>→</em></a></li>
        </ul>
      </aside>

      <div class="faq-column">

        <section class="faq-group" id="panel-entry">
          <header class="faq-group-head">
            <span class="tag">01</span>
            <h2 class="title-md">先找到入口，再看比分</h2>
            <p class="faq-group-desc">收藏、追分、赛程提醒和比分回看都在首页面板完成，先把位置记住，后面用起来就顺了。</p>
          </header>

          <figure class="faq-figure">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="手机端赛事面板的收藏与追比分入口示意，用于问答说明" decoding="async">
            <figcaption>首页面板顶部：左边是收藏赛事，右边是正在进行的比分。</figcaption>
          </figure>

          <details class="faq-card">
            <summary>
              <span class="faq-num">01</span>
              <span class="faq-q">收藏赛事和追比分的入口现在在哪？</span>
              <span class="faq-sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>2026 赛季版本把两个入口合并到了首页顶部。手机端打开首页，第一屏就能看到收藏列表和正在进行的比分，点一下就进去，不用再逐级翻栏目。</p>
            </div>
          </details>

          <details class="faq-card">
            <summary>
              <span class="faq-num">02</span>
              <span class="faq-q">怎么把一场比赛加入收藏？</span>
              <span class="faq-sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <ol class="faq-steps">
                <li>进入赛事详情页，点右上角的星标。</li>
                <li>回到首页面板，确认该赛事已经出现在收藏列表。</li>
                <li>收藏后赛程提醒默认跟随开启，赛前会提示。</li>
              </ol>
            </div>
          </details>

          <details class="faq-card">
            <summary>
              <span class="faq-num">03</span>
              <span class="faq-q">赛程提醒怎么开，又怎么关？</span>
              <span class="faq-sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>在收藏管理里逐个赛事切换提醒开关。关掉后赛事仍然留在列表里，只是不再推送赛前提示，适合只想看结果的时候用。</p>
            </div>
          </details>

          <details class="faq-card">
            <summary>
              <span class="faq-num">04</span>
              <span class="faq-q">已经结束的比赛去哪里回看比分？</span>
              <span class="faq-sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>首页面板的已结束区域可以按日期往前翻，点进详情能看到分节比分和关键节点。回看记录和收藏列表分开保存，互不影响。</p>
            </div>
          </details>

          <details class="faq-card">
            <summary>
              <span class="faq-num">05</span>
              <span class="faq-q">首页默认显示哪一场？</span>
              <span class="faq-sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>默认展示你收藏的赛事里最近开赛的一场。如果一条收藏都没有，会显示当日赛程中关注度靠前的场次作为起步参考。</p>
            </div>
          </details>

          <details class="faq-card">
            <summary>
              <span class="faq-num">06</span>
              <span class="faq-q">手机和电脑上看到的面板一样吗？</span>
              <span class="faq-sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>核心入口一致，差别在排布：手机端把收藏和追比分并排在首页，电脑端保留侧边列表。两边的主客场数据都按近10场统计。</p>
            </div>
          </details>

          <details class="faq-card">
            <summary>
              <span class="faq-num">07</span>
              <span class="faq-q">换了手机，收藏会跟着走吗？</span>
              <span class="faq-sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>收藏记录保存在当前浏览器里，不会随换机迁移。新设备上重新添加一次即可，日常把常用赛事控制在一屏之内会更好找。</p>
            </div>
          </details>

          <details class="faq-card">
            <summary>
              <span class="faq-num">08</span>
              <span class="faq-q">面板打开慢该怎么处理？</span>
              <span class="faq-sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>先确认网络是否稳定，再下拉刷新首页。比分按固定间隔回传，短时间内反复刷新不会让数字出现得更快。</p>
            </div>
          </details>

          <details class="faq-card">
            <summary>
              <span class="faq-num">09</span>
              <span class="faq-q">为什么某场比赛一直显示待开赛？</span>
              <span class="faq-sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>赛程还没到开赛时间，或者数据源回传有延迟，页面都会保留待开赛状态。刷新后依然为空，可以记下页面名称联系支持。</p>
            </div>
          </details>

          <details class="faq-card">
            <summary>
              <span class="faq-num">10</span>
              <span class="faq-q">以前在二级页面的收藏入口还能用吗？</span>
              <span class="faq-sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>还能用，只是路径比首页长。想少点几步，直接从首页面板进入即可，两处指向的是同一份收藏数据。</p>
            </div>
          </details>
        </section>

        <section class="faq-group" id="data-range">
          <header class="faq-group-head">
            <span class="tag">02</span>
            <h2 class="title-md">主客场数据怎么读</h2>
            <p class="faq-group-desc">区间变了，看的结论也会变。这里说明统计范围、视图切换和走势线各自代表什么。</p>
          </header>

          <details class="faq-card">
            <summary>
              <span class="faq-num">11</span>
              <span class="faq-q">近10场区间指的是什么？</span>
              <span class="faq-sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>指球队最近 10 场比赛的统计范围。胜平负场次、进球与失球数、净胜走势，都在这 10 场之内累计得出。</p>
            </div>
          </details>

          <details class="faq-card">
            <summary>
              <span class="faq-num">12</span>
              <span class="faq-q">主队、客队、总览三个视图怎么切？</span>
              <span class="faq-sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>数据带右侧有三个视图按钮：点主队只看主场表现，点客队只看客场，点总览把两端合并成一条线，用来对照主客差异。</p>
            </div>
          </details>

          <details class="faq-card">
            <summary>
              <span class="faq-num">13</span>
              <span class="faq-q">和以前的近5场相比有什么不同？</span>
              <span class="faq-sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>5 场样本少，一场大胜或惨败就会把走势拉得很陡。改成 10 场之后更容易看出状态周期，现在的版本统一按 10 场呈现。</p>
            </div>
          </details>

          <details class="faq-card">
            <summary>
              <span class="faq-num">14</span>
              <span class="faq-q">净胜走势线往上或往下代表什么？</span>
              <span class="faq-sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>净胜是进球减去失球。线往上走说明这 10 场里攻防差在扩大，往下走则说明丢球多于进球，走势图只呈现变化方向。</p>
            </div>
          </details>

          <details class="faq-card">
            <summary>
              <span class="faq-num">15</span>
              <span class="faq-q">主客场数据覆盖哪些赛事？</span>
              <span class="faq-sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>覆盖 18 个联赛与杯赛的赛程、比分和主客场统计。具体某一轮是否纳入，以赛程页上展示的场次为准。</p>
            </div>
          </details>

          <details class="faq-card">
            <summary>
              <span class="faq-num">16</span>
              <span class="faq-q">统计数据多久刷新一次？</span>
              <span class="faq-sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>比赛结束后随下一轮数据回传同步更新，比分确认完成后，近10场的胜负与进失球会跟着重算。</p>
            </div>
          </details>

          <details class="faq-card">
            <summary>
              <span class="faq-num">17</span>
              <span class="faq-q">为什么双方算出来的日期跨度不一样？</span>
              <span class="faq-sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>受赛程密度和杯赛轮次影响，两队凑满 10 场所需的时间长度会不同，但场次数量都取满 10 场，横向比较时不必换算。</p>
            </div>
          </details>

          <details class="faq-card">
            <summary>
              <span class="faq-num">18</span>
              <span class="faq-q">能查到更早赛季的主客场数据吗？</span>
              <span class="faq-sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>当前版本以近10场为主。更早赛季的变化以版本记录里的说明形式保留，方便你了解某次统计方式调整的背景。</p>
            </div>
          </details>
        </section>

        <section class="faq-group" id="service-version">
          <header class="faq-group-head">
            <span class="tag">03</span>
            <h2 class="title-md">内容有哪些，版本怎么看</h2>
            <p class="faq-group-desc">新英体育中文站提供的内容、说明栏目的组织方式，以及每一条变更说明落在哪里。</p>
          </header>

          <figure class="faq-figure">
            <img src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="收藏常用页面上的版本标签与更新轮次示意" loading="lazy" decoding="async">
            <figcaption>收藏常用页面上会标出该页对应的版本与最后更新轮次。</figcaption>
          </figure>

          <details class="faq-card">
            <summary>
              <span class="faq-num">19</span>
              <span class="faq-q">目前中文站能看哪些内容？</span>
              <span class="faq-sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>四部分：手机端赛事面板、主客场近10场对照、常见说明与版本记录。赛前准备、赛中追分、赛后复盘和长周期状态对照都能对上。</p>
            </div>
          </details>

          <details class="faq-card">
            <summary>
              <span class="faq-num">20</span>
              <span class="faq-q">这 36 篇说明是怎么分组的？</span>
              <span class="faq-sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>按面板使用、数据区间、服务范围和版本记录四类组织，共 36 篇。左侧索引可以直接跳到对应分组，顶部也有同样的入口。</p>
            </div>
          </details>

          <details class="faq-card">
            <summary>
              <span class="faq-num">21</span>
              <span class="faq-q">想看历次改动，去哪里翻？</span>
              <span class="faq-sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>版本观察栏目累计收录 46 条版本记录，按赛季初、赛季中、版本迭代三个阶段排列，一条记录对应一次可查阅的调整。</p>
            </div>
          </details>

          <details class="faq-card">
            <summary>
              <span class="faq-num">22</span>
              <span class="faq-q">收藏页上的版本标签是什么意思？</span>
              <span class="faq-sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>标签显示这一页最后一次随版本更新的轮次。看到标签变化，说明该页内容有过调整，可以顺着标签去版本观察里找对应说明。</p>
            </div>
          </details>

          <details class="faq-card">
            <summary>
              <span class="faq-num">23</span>
              <span class="faq-q">2026 赛季版本主要改了什么？</span>
              <span class="faq-sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>三处：收藏与追比分入口合并到首页，主客场区间由近5场改为近10场，新增常见说明栏目集中回应操作与统计问题。</p>
            </div>
          </details>

          <details class="faq-card">
            <summary>
              <span class="faq-num">24</span>
              <span class="faq-q">有新版本时我会收到通知吗？</span>
              <span class="faq-sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>变更说明会同步到你收藏的常用页面。打开页面就能看到新的版本标签和最后更新轮次，不需要另外订阅。</p>
            </div>
          </details>

          <details class="faq-card">
            <summary>
              <span class="faq-num">25</span>
              <span class="faq-q">一个赛季大概会更新多少次？</span>
              <span class="faq-sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>平均每个赛季 12 至 16 条，累计已达 46 条。更新集中在新赛季开始和赛程密集的阶段，其余时间以小幅修正为主。</p>
            </div>
          </details>

          <details class="faq-card">
            <summary>
              <span class="faq-num">26</span>
              <span class="faq-q">不在湖南也能正常使用吗？</span>
              <span class="faq-sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>可以。线上内容面向全国用户开放，团队设在湖南长沙，通过邮件和电话为各地用户解答问题。</p>
            </div>
          </details>

          <details class="faq-card">
            <summary>
              <span class="faq-num">27</span>
              <span class="faq-q">说明内容会跟着版本一起改吗？</span>
              <span class="faq-sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>会。每次版本发布前，说明文字经过内容校对、数据复核和版本记录三道流程后同步上线，改动会写进当次的版本条目。</p>
            </div>
          </details>

          <details class="faq-card">
            <summary>
              <span class="faq-num">28</span>
              <span class="faq-q">版本号记错了还能提问吗？</span>
              <span class="faq-sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>能。写清页面名称就可以定位，凭印象写个大概的版本号也能帮忙缩小范围，不影响我们给出答复。</p>
            </div>
          </details>
        </section>

        <section class="faq-group" id="account-support">
          <header class="faq-group-head">
            <span class="tag">04</span>
            <h2 class="title-md">收藏怎么管，问题找谁</h2>
            <p class="faq-group-desc">常用页面的收藏上限、换设备的处理方式，以及联系支持时一次说清楚需要提供什么。</p>
          </header>

          <details class="faq-card">
            <summary>
              <span class="faq-num">29</span>
              <span class="faq-q">收藏常用页面最多能存几个？</span>
              <span class="faq-sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>最多 20 个页面。达到上限后需要先取消一个才能再加，把最常看的赛程和对照页留下，其余按需替换。</p>
            </div>
          </details>

          <details class="faq-card">
            <summary>
              <span class="faq-num">30</span>
              <span class="faq-q">收藏在手机和电脑之间同步吗？</span>
              <span class="faq-sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>目前各设备分别保存，不互相同步。换设备后在新环境里重新添加一次，原来那台的记录不会受影响。</p>
            </div>
          </details>

          <details class="faq-card">
            <summary>
              <span class="faq-num">31</span>
              <span class="faq-q">收藏的页面会跟着版本一起更新吗？</span>
              <span class="faq-sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>会。收藏项上带版本标签和最后更新轮次，页面内容更新后标签随之变化，点进去看到的就是新版内容。</p>
            </div>
          </details>

          <details class="faq-card">
            <summary>
              <span class="faq-num">32</span>
              <span class="faq-q">想取消收藏怎么操作？</span>
              <span class="faq-sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>两种方式：在收藏管理列表里点删除，或者在对应页面上再点一次星标取消选中。取消后该页不再占用 20 个名额。</p>
            </div>
          </details>

          <details class="faq-card">
            <summary>
              <span class="faq-num">33</span>
              <span class="faq-q">发邮件多久能收到回复？</span>
              <span class="faq-sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>工作日 9:00–18:00 内提交的问题，通常在一个工作日内回复。周末与节假日提交的，会顺延到下一个工作日处理。</p>
            </div>
          </details>

          <details class="faq-card">
            <summary>
              <span class="faq-num">34</span>
              <span class="faq-q">提问时最好写清楚哪些信息？</span>
              <span class="faq-sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>页面名称和版本号是必要的。涉及比分的再补上赛事与轮次，涉及主客场走势的说明看的是主队、客队还是总览，能省掉一轮来回确认。</p>
            </div>
          </details>

          <details class="faq-card">
            <summary>
              <span class="faq-num">35</span>
              <span class="faq-q">邮件和电话都能联系到人吗？</span>
              <span class="faq-sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>都可以。邮箱 service@arena-xinying.com.cn，电话 15215604853，服务时间为工作日 9:00–18:00，两条渠道由同一组人跟进。</p>
            </div>
          </details>

          <details class="faq-card">
            <summary>
              <span class="faq-num">36</span>
              <span class="faq-q">想做内容或数据方面的合作，找哪里？</span>
              <span class="faq-sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>先看合作联系页说明的方向与范围，也可以直接发邮件写清合作类型和内容范围，我们会按对应条线转给负责的人。</p>
            </div>
          </details>
        </section>

      </div>
    </div>
  </section>

  <section class="faq-unresolved" id="unresolved">
    <div class="shell faq-unresolved-inner">
      <div class="faq-unresolved-text">
        <p class="eyebrow">还没解决</p>
        <h2 class="title-lg">把页面名称和版本号发过来，我们直接看</h2>
        <p class="faq-unresolved-desc">
          36 篇说明覆盖的是高频情况。如果遇到的是具体某一场比分不显示、某个收藏页标签对不上，写清页面名称与版本号发到客服邮箱，处理起来会快很多。
        </p>
        <p class="faq-unresolved-desc">
          内容机构、数据服务商、媒体和高校体育社团想要长期使用或联合出品，可以从合作联系页进入，写明所需的赛事范围与产出形式。
        </p>
        <div class="faq-actions">
          <a class="btn btn-primary" href="/cooperation/">合作联系</a>
          <a class="btn btn-ghost" href="/insights/">查版本记录</a>
        </div>
      </div>

      <div class="faq-contact-card">
        <p class="faq-contact-title">新英体育中文站服务渠道</p>
        <dl class="faq-contact-list">
          <div class="faq-contact-row">
            <dt>客服邮箱</dt>
            <dd>service@arena-xinying.com.cn</dd>
          </div>
          <div class="faq-contact-row">
            <dt>联系电话</dt>
            <dd>15215604853</dd>
          </div>
          <div class="faq-contact-row">
            <dt>服务时间</dt>
            <dd>工作日 9:00–18:00</dd>
          </div>
          <div class="faq-contact-row">
            <dt>服务地址</dt>
            <dd>湖南省长沙市岳麓区潇湘中路328号新英体育服务中心</dd>
          </div>
        </dl>
        <p class="faq-contact-note">赛事数据与变更说明相关咨询，请注明页面名称与版本号；一般在一个工作日内回复。</p>
      </div>
    </div>
  </section>

</main>

.page-faq {
  --faq-line: rgba(201, 195, 182, .22);
  --faq-line-strong: rgba(201, 195, 182, .38);
  --faq-deep: #0E6B57;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-sans);
  overflow-x: hidden;
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero {
  position: relative;
  padding: calc(var(--header-h) + 44px) 0 52px;
  background:
    radial-gradient(120% 90% at 88% -10%, rgba(59, 242, 200, .20), transparent 58%),
    radial-gradient(90% 80% at -5% 110%, rgba(255, 106, 61, .17), transparent 56%),
    linear-gradient(158deg, var(--night) 0%, var(--ink) 72%);
  border-bottom: 2px solid var(--faq-line);
  overflow: hidden;
}

.page-faq .faq-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(201, 195, 182, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(201, 195, 182, .07) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(200deg, #000 0%, transparent 72%);
  -webkit-mask-image: linear-gradient(200deg, #000 0%, transparent 72%);
  pointer-events: none;
}

.page-faq .faq-hero .shell {
  position: relative;
  z-index: 1;
}

.page-faq .breadcrumbs {
  margin-bottom: 26px;
}

.page-faq .faq-title {
  margin: 16px 0 0;
  max-width: 16em;
  font-size: clamp(30px, 5.2vw, 58px);
  line-height: 1.16;
  font-weight: 900;
  letter-spacing: -.02em;
}

.page-faq .faq-lede {
  margin: 22px 0 0;
  max-width: 42em;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.9;
  color: rgba(242, 235, 221, .78);
}

/* ---------- 首屏分类索引 ---------- */
.page-faq .faq-index {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.page-faq .faq-index-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 16px 16px;
  border: 2px solid var(--faq-line-strong);
  background: rgba(18, 54, 46, .6);
  color: inherit;
  text-decoration: none;
  transition:
    border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.page-faq .faq-index-item:hover,
.page-faq .faq-index-item:focus-visible {
  border-color: var(--cyan);
  background: rgba(18, 54, 46, .92);
  transform: translate(-2px, -2px);
}

.page-faq .faq-index-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--orange);
}

.page-faq .faq-index-label {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.page-faq .faq-index-count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--sage);
  white-space: nowrap;
}

/* ---------- 主体布局 ---------- */
.page-faq .faq-main {
  background: var(--ink);
  padding: 44px 0 72px;
}

.page-faq .faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

/* ---------- 侧边索引 ---------- */
.page-faq .faq-rail {
  border: 2px solid var(--faq-line);
  background: var(--night);
  padding: 18px 18px 14px;
}

.page-faq .faq-rail-title {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--cyan);
}

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

.page-faq .faq-rail-list li {
  flex: 0 1 auto;
}

.page-faq .faq-rail-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid var(--faq-line-strong);
  color: rgba(242, 235, 221, .84);
  font-size: 13.5px;
  line-height: 1.5;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.page-faq .faq-rail-list a:hover,
.page-faq .faq-rail-list a:focus-visible {
  border-color: var(--cyan);
  color: var(--cyan);
}

.page-faq .faq-rail-list em {
  font-family: var(--font-mono);
  font-style: normal;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--sage);
}

/* ---------- 问题分组 ---------- */
.page-faq .faq-column {
  min-width: 0;
}

.page-faq .faq-group {
  margin-bottom: 56px;
  scroll-margin-top: calc(var(--header-h) + 20px);
}

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

.page-faq .faq-group-head {
  border-top: 2px solid var(--faq-line-strong);
  padding-top: 20px;
  margin-bottom: 22px;
}

.page-faq .faq-group-head .tag {
  display: inline-block;
  margin-bottom: 12px;
}

.page-faq .faq-group-head .title-md {
  margin: 0 0 10px;
  line-height: 1.25;
}

.page-faq .faq-group-desc {
  margin: 0;
  max-width: 40em;
  font-size: 14.5px;
  line-height: 1.85;
  color: rgba(242, 235, 221, .68);
}

/* ---------- 配图 ---------- */
.page-faq .faq-figure {
  margin: 0 0 24px;
  border: 2px solid var(--faq-line-strong);
  background: var(--night);
  box-shadow: var(--hard-shadow);
}

.page-faq .faq-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.page-faq .faq-figure figcaption {
  padding: 10px 14px;
  border-top: 2px solid var(--faq-line);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--sage);
}

/* ---------- 问题卡 ---------- */
.page-faq .faq-card {
  margin-bottom: 12px;
  border: 2px solid var(--faq-line-strong);
  border-left-width: 6px;
  background: var(--panel);
  box-shadow: var(--hard-shadow);
  transition:
    border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.page-faq .faq-card:hover {
  border-color: var(--cyan);
}

.page-faq .faq-card[open] {
  border-color: var(--cyan);
  background: var(--cream);
  color: var(--black);
  box-shadow: 8px 8px 0 rgba(59, 242, 200, .18);
}

.page-faq .faq-card > summary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 16px;
  cursor: pointer;
  list-style: none;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.6;
}

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

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

.page-faq .faq-num {
  flex: 0 0 auto;
  padding-top: 3px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--cyan);
}

.page-faq .faq-card[open] .faq-num {
  color: var(--faq-deep);
}

.page-faq .faq-q {
  flex: 1 1 auto;
  min-width: 0;
}

.page-faq .faq-sign {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 6px;
  margin-left: 4px;
  color: var(--orange);
}

.page-faq .faq-card[open] .faq-sign {
  color: var(--faq-deep);
}

.page-faq .faq-sign::before,
.page-faq .faq-sign::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform var(--dur) var(--ease);
}

.page-faq .faq-sign::before {
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}

.page-faq .faq-sign::after {
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}

.page-faq .faq-card[open] .faq-sign::after {
  transform: translateX(-50%) scaleY(0);
}

.page-faq .faq-a {
  padding: 0 16px 18px 16px;
  font-size: 15px;
  line-height: 1.88;
  color: #1C2A24;
}

.page-faq .faq-a p {
  margin: 0;
}

.page-faq .faq-a p + p {
  margin-top: 10px;
}

.page-faq .faq-steps {
  margin: 0;
  padding-left: 18px;
}

.page-faq .faq-steps li {
  margin-bottom: 6px;
}

.page-faq .faq-steps li:last-child {
  margin-bottom: 0;
}

/* ---------- 未解决区块 ---------- */
.page-faq .faq-unresolved {
  padding: 56px 0 64px;
  background:
    radial-gradient(90% 80% at 100% 0%, rgba(59, 242, 200, .14), transparent 60%),
    linear-gradient(160deg, var(--night) 0%, var(--ink) 78%);
  border-top: 2px solid var(--faq-line-strong);
}

.page-faq .faq-unresolved-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

.page-faq .faq-unresolved-text .title-lg {
  margin: 12px 0 0;
  line-height: 1.25;
}

.page-faq .faq-unresolved-desc {
  margin: 18px 0 0;
  max-width: 40em;
  font-size: 15px;
  line-height: 1.9;
  color: rgba(242, 235, 221, .74);
}

.page-faq .faq-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-faq .faq-contact-card {
  padding: 22px;
  background: var(--cream);
  color: var(--black);
  border: 2px solid var(--black);
  box-shadow: 8px 8px 0 rgba(59, 242, 200, .3);
}

.page-faq .faq-contact-title {
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(10, 15, 13, .16);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
}

.page-faq .faq-contact-list {
  margin: 0;
  padding: 0;
}

.page-faq .faq-contact-row {
  display: grid;
  grid-template-columns: minmax(64px, 84px) minmax(0, 1fr);
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(10, 15, 13, .1);
}

.page-faq .faq-contact-row:last-child {
  border-bottom: 0;
}

.page-faq .faq-contact-row dt {
  font-size: 12.5px;
  font-weight: 700;
  color: #4A5A52;
  letter-spacing: .04em;
}

.page-faq .faq-contact-row dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  word-break: break-word;
}

.page-faq .faq-contact-note {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 2px solid rgba(10, 15, 13, .16);
  font-size: 13px;
  line-height: 1.8;
  color: #3A4A43;
}

/* ---------- 中等屏幕 ---------- */
@media (min-width: 720px) {
  .page-faq .faq-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .page-faq .faq-card > summary {
    padding: 18px 22px;
    font-size: 16px;
  }

  .page-faq .faq-a {
    padding: 0 22px 20px 22px;
  }

  .page-faq .faq-unresolved-inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 40px;
    align-items: start;
  }
}

/* ---------- 桌面 ---------- */
@media (min-width: 1000px) {
  .page-faq .faq-hero {
    padding: calc(var(--header-h) + 64px) 0 64px;
  }

  .page-faq .faq-index {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-faq .faq-index-item {
    grid-template-columns: auto;
    grid-template-rows: auto auto auto;
    align-items: start;
    gap: 8px;
    padding: 18px 16px 20px;
  }

  .page-faq .faq-index-label {
    font-size: 15.5px;
  }

  .page-faq .faq-main {
    padding: 64px 0 96px;
  }

  .page-faq .faq-layout {
    grid-template-columns: 244px minmax(0, 1fr);
    gap: 56px;
  }

  .page-faq .faq-rail {
    position: sticky;
    top: calc(var(--header-h) + 28px);
    align-self: start;
    padding: 22px 20px 18px;
  }

  .page-faq .faq-rail-list {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 2px;
  }

  .page-faq .faq-rail-list a {
    justify-content: space-between;
    width: 100%;
    padding: 9px 10px;
    border-color: transparent;
    border-bottom: 1px solid var(--faq-line);
  }

  .page-faq .faq-rail-list li:last-child a {
    border-bottom: 0;
  }

  .page-faq .faq-rail-list a:hover,
  .page-faq .faq-rail-list a:focus-visible {
    border-color: transparent;
    border-bottom-color: var(--cyan);
    background: rgba(59, 242, 200, .07);
  }

  .page-faq .faq-group {
    margin-bottom: 72px;
  }

  .page-faq .faq-card > summary {
    padding: 20px 24px;
    font-size: 16.5px;
    gap: 16px;
  }

  .page-faq .faq-num {
    font-size: 13px;
  }

  .page-faq .faq-a {
    padding: 0 24px 22px 24px;
    font-size: 15.5px;
  }

  .page-faq .faq-unresolved {
    padding: 80px 0 88px;
  }
}

/* ---------- 动效降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-index-item,
  .page-faq .faq-card,
  .page-faq .faq-sign::before,
  .page-faq .faq-sign::after,
  .page-faq .faq-rail-list a {
    transition: none;
  }

  .page-faq .faq-index-item:hover,
  .page-faq .faq-index-item:focus-visible {
    transform: none;
  }
}