.page-faq {
  --faq-line-w: 2px;
  background: var(--ink);
  color: var(--paper);
}

.page-faq .breadcrumb {
  padding-top: calc(var(--header-h) + 18px);
  padding-bottom: 6px;
}

.page-faq .breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  color: var(--mute);
}

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

.page-faq .breadcrumb-link {
  color: var(--mute);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.page-faq .breadcrumb-link:hover,
.page-faq .breadcrumb-link:focus-visible {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}

/* ---------- 首屏 ---------- */

.page-faq .faq-hero {
  position: relative;
  padding: clamp(28px, 4vw, 56px) 0 clamp(48px, 6vw, 88px);
  overflow: hidden;
}

.page-faq .faq-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 100%;
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(141, 124, 255, 0.18), transparent 62%),
    linear-gradient(168deg, var(--panel) 0%, var(--ink) 58%);
  clip-path: polygon(0 0, 100% 0, 100% 74%, 0 100%);
  pointer-events: none;
}

.page-faq .faq-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan) 0%, var(--cyan) 26%, var(--line) 26%, var(--line) 100%);
  pointer-events: none;
}

.page-faq .faq-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 4.5vw, 60px);
  align-items: center;
}

.page-faq .faq-hero__text .label {
  display: inline-block;
  margin: 0 0 18px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  font-family: var(--font-label);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-faq .faq-hero h1 {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.1rem, 5.4vw, 4.3rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  max-width: 14em;
}

.page-faq .faq-lede {
  margin: 0;
  max-width: 36em;
  font-size: clamp(0.98rem, 1.3vw, 1.06rem);
  line-height: 1.85;
  color: var(--mute);
}

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

.page-faq .faq-jump a {
  display: inline-block;
  padding: 7px 12px;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--mute);
  text-decoration: none;
  transition: color 160ms var(--ease), border-color 160ms var(--ease), transform 160ms var(--ease);
}

.page-faq .faq-jump a:hover,
.page-faq .faq-jump a:focus-visible {
  color: var(--ink);
  background: var(--cyan);
  border-color: var(--cyan);
  transform: translateY(-2px);
}

.page-faq .faq-hero__plate {
  position: relative;
  padding: 10px;
  border: var(--faq-line-w) solid var(--line);
  background: var(--raise);
  box-shadow: var(--shadow-hard);
}

.page-faq .faq-hero__plate img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.02);
}

.page-faq .faq-hero__stamp {
  position: absolute;
  right: -14px;
  top: 18%;
  writing-mode: vertical-rl;
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  color: var(--gold);
  background: var(--ink);
  padding: 8px 4px;
  border: 1px solid var(--line);
}

/* ---------- 主体两栏 ---------- */

.page-faq .faq-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 64px);
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(48px, 6vw, 96px);
}

.page-faq .faq-index {
  border-left: var(--faq-line-w) solid var(--line);
  padding-left: 16px;
}

.page-faq .faq-index__title {
  margin: 0 0 14px;
  font-family: var(--font-label);
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute);
}

.page-faq .faq-index__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-faq .faq-index__link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
  color: var(--mute);
  text-decoration: none;
  transition: color 160ms var(--ease), padding-left 160ms var(--ease);
}

.page-faq .faq-index__link .mono {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--acc, var(--cyan));
  letter-spacing: 0.06em;
}

.page-faq .faq-index__link:hover,
.page-faq .faq-index__link:focus-visible {
  color: var(--paper);
  padding-left: 6px;
}

.page-faq .faq-index__foot {
  margin: 18px 0 0;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--mute);
}

.page-faq .faq-index__foot a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--cyan);
}

/* ---------- 问答分组 ---------- */

.page-faq .faq-group {
  margin: 0 0 clamp(44px, 5.5vw, 80px);
  --acc: var(--cyan);
}

.page-faq .faq-group__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  align-items: baseline;
  padding-bottom: 16px;
  margin-bottom: 22px;
  border-bottom: var(--faq-line-w) solid var(--line);
}

.page-faq .faq-group__num {
  grid-row: span 2;
  align-self: start;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  color: var(--acc);
  padding: 0.45em 0.5em;
  border: 1px solid var(--acc);
  line-height: 1;
}

.page-faq .faq-group h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.35rem, 2.6vw, 1.95rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.page-faq .faq-group__note {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--mute);
}

.page-faq .faq-items {
  display: grid;
  gap: 12px;
}

.page-faq .faq-item {
  border: var(--faq-line-w) solid var(--line);
  background: var(--panel);
  transition: border-color 180ms var(--ease), background-color 180ms var(--ease);
}

.page-faq .faq-item:hover {
  border-color: var(--acc);
}

.page-faq .faq-item[open] {
  border-color: var(--acc);
  background: var(--raise);
}

.page-faq .faq-item > summary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(16px, 2.2vw, 22px);
  cursor: pointer;
  list-style: none;
}

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

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

.page-faq .faq-item__no {
  flex: none;
  padding-top: 0.34em;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--acc);
}

.page-faq .faq-item__q {
  flex: 1 1 auto;
  font-size: clamp(0.98rem, 1.5vw, 1.08rem);
  font-weight: 600;
  line-height: 1.6;
  color: var(--paper);
}

.page-faq .faq-item__sign {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 0.35em;
}

.page-faq .faq-item__sign::before,
.page-faq .faq-item__sign::after {
  content: "";
  position: absolute;
  background: var(--acc);
  transition: transform 200ms var(--ease);
}

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

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

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

.page-faq .faq-item__a {
  margin: 0 clamp(16px, 2.2vw, 22px) clamp(18px, 2.2vw, 24px) calc(clamp(16px, 2.2vw, 22px) + 30px);
  padding-left: 16px;
  border-left: 2px solid var(--cyan);
}

.page-faq .faq-item__a p {
  margin: 0;
  max-width: 42em;
  font-size: 0.97rem;
  line-height: 1.85;
  color: var(--mute);
}

.page-faq .faq-item__a ol {
  margin: 12px 0 0;
  padding-left: 1.25em;
  max-width: 42em;
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--mute);
}

.page-faq .faq-item__a li + li {
  margin-top: 6px;
}

.page-faq .faq-item__a li::marker {
  color: var(--cyan);
  font-family: var(--font-mono);
}

/* ---------- 中段图 ---------- */

.page-faq .faq-media {
  margin: 0 0 clamp(44px, 5.5vw, 80px);
  padding: 10px;
  border: var(--faq-line-w) solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow-hard);
}

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

.page-faq .faq-media__cap {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--mute);
}

/* ---------- 收尾 ---------- */

.page-faq .faq-more {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--mute);
}

.page-faq .faq-more a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--cyan);
  margin: 0 2px;
}

.page-faq .faq-cue {
  background: var(--orange);
  color: var(--ink);
}

.page-faq .faq-cue__inner {
  display: grid;
  gap: 16px;
  align-items: center;
  padding-top: clamp(24px, 3vw, 34px);
  padding-bottom: clamp(24px, 3vw, 34px);
}

.page-faq .faq-cue__mark {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.26em;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
  justify-self: start;
}

.page-faq .faq-cue__text {
  margin: 0;
  font-size: clamp(1rem, 1.8vw, 1.22rem);
  font-weight: 600;
  line-height: 1.6;
  max-width: 40em;
}

.page-faq .faq-cue .btn--signal {
  justify-self: start;
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--ink);
}

.page-faq .faq-cue .btn--signal:hover,
.page-faq .faq-cue .btn--signal:focus-visible {
  background: transparent;
  color: var(--ink);
}

/* ---------- 响应式 ---------- */

@media (min-width: 720px) {
  .page-faq .faq-cue__inner {
    grid-template-columns: auto 1fr auto;
    gap: 26px;
  }

  .page-faq .faq-cue__mark {
    padding-bottom: 0;
    padding-left: 14px;
    border-bottom: 0;
    border-left: 3px solid var(--ink);
  }

  .page-faq .faq-cue .btn--signal {
    justify-self: end;
  }
}

@media (min-width: 900px) {
  .page-faq .faq-hero__inner {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  }

  .page-faq .faq-hero__plate {
    transform: translateY(-10px);
  }
}

@media (min-width: 1040px) {
  .page-faq .faq-body {
    grid-template-columns: 248px minmax(0, 1fr);
    align-items: start;
  }

  .page-faq .faq-index {
    position: sticky;
    top: calc(var(--header-h) + 26px);
  }
}

@media (min-width: 1280px) {
  .page-faq .faq-body {
    grid-template-columns: 268px minmax(0, 1fr) 120px;
  }

  .page-faq .faq-qa {
    grid-column: 2;
  }

  .page-faq .faq-group__head {
    grid-template-columns: auto 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-jump a,
  .page-faq .faq-index__link,
  .page-faq .faq-item,
  .page-faq .faq-item__sign::before,
  .page-faq .faq-item__sign::after,
  .page-faq .faq-hero__plate {
    transition: none;
    transform: none;
  }
}


<main id="main-content" class="page-faq">
  <nav class="breadcrumb shell" aria-label="面包屑">
    <ol class="breadcrumb-list">
      <li class="breadcrumb-item"><a class="breadcrumb-link" href="/">首页</a></li>
      <li class="breadcrumb-item"><span>答疑中心</span></li>
    </ol>
  </nav>

  <section class="faq-hero">
    <div class="shell faq-hero__inner">
      <div class="faq-hero__text" data-reveal>
        <p class="label">答疑中心 / FAQ</p>
        <h1>查赛程卡住时，先在这里找到下一步</h1>
        <p class="faq-lede">刷新栏读不懂、订阅提示不知从哪开、入口翻了几层还没找到——这些回访路上最常见的卡点，完美体育赛事都按问题分好组了。找到你的那一条，照着答案直接操作。</p>
        <ul class="faq-jump" aria-label="问题分组快捷入口">
          <li><a href="#refresh">01 刷新栏</a></li>
          <li><a href="#subscribe">02 订阅提示</a></li>
          <li><a href="#entry">03 入口定位</a></li>
          <li><a href="#leagues">04 多联赛</a></li>
          <li><a href="#desktop">05 电脑版</a></li>
          <li><a href="#archive">06 版本对照</a></li>
        </ul>
      </div>
      <div class="faq-hero__plate" data-reveal style="--reveal-delay:120ms">
        <img src="{zhanqunpic:h:1000w:1000}" width="1000" height="1000" alt="深蓝展签式问答索引与编号标签，冷色高对比">
        <span class="faq-hero__stamp mono" aria-hidden="true">Q&amp;A / 06 GROUPS</span>
      </div>
    </div>
  </section>

  <div class="shell faq-body">
    <aside class="faq-index" aria-label="问题目录">
      <p class="faq-index__title">按类别找答案</p>
      <ol class="faq-index__list">
        <li style="--acc: var(--cyan)"><a class="faq-index__link" href="#refresh"><span class="mono">01</span>先看刷新栏</a></li>
        <li style="--acc: var(--purple)"><a class="faq-index__link" href="#subscribe"><span class="mono">02</span>订阅提示怎么用</a></li>
        <li style="--acc: var(--green)"><a class="faq-index__link" href="#entry"><span class="mono">03</span>入口在哪里</a></li>
        <li style="--acc: var(--gold)"><a class="faq-index__link" href="#leagues"><span class="mono">04</span>多联赛怎么找</a></li>
        <li style="--acc: var(--cyan)"><a class="faq-index__link" href="#desktop"><span class="mono">05</span>电脑版访问与显示</a></li>
        <li style="--acc: var(--purple)"><a class="faq-index__link" href="#archive"><span class="mono">06</span>旧版变更如何对照</a></li>
      </ol>
      <p class="faq-index__foot">答案没覆盖到你的情况？<a href="/connect/">走联系通道</a>，把页面和现象说清楚即可。</p>
    </aside>

    <div class="faq-qa">
      <section class="faq-group" id="refresh" style="--acc: var(--cyan)">
        <header class="faq-group__head" data-reveal>
          <span class="faq-group__num mono">01</span>
          <h2>先看刷新栏</h2>
          <p class="faq-group__note">首屏那条横栏，决定你看到的是不是刚刚更新的赛程。</p>
        </header>
        <div class="faq-items">
          <details class="faq-item" data-reveal>
            <summary>
              <span class="faq-item__no mono">01-1</span>
              <span class="faq-item__q">打开电脑版后，首屏刷新栏告诉我什么？</span>
              <span class="faq-item__sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>它一次给出三样信息，从上往下读就行。</p>
              <ol>
                <li>最近一次刷新的时间，用等宽数字显示，一眼就能判断这份赛程新不新。</li>
                <li>当前刷新状态，写明此刻处在每日复核还是每周整理。</li>
                <li>下一次刷新的提示，告诉你大概等多久回来更合适。</li>
              </ol>
            </div>
          </details>

          <details class="faq-item" data-reveal style="--reveal-delay:70ms">
            <summary>
              <span class="faq-item__no mono">01-2</span>
              <span class="faq-item__q">刷新时间不是刚刚，是不是出问题了？</span>
              <span class="faq-item__sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>多数时候是正常的。入口索引平日每周整理一次，进入赛季阶段会加密到每日复核，两次刷新之间隔上几个小时很常见。正好落在整理间隙时，先按当前时间戳查赛程即可，再打开订阅提示，等新一轮刷新后回来对照变化。</p>
            </div>
          </details>

          <details class="faq-item" data-reveal style="--reveal-delay:140ms">
            <summary>
              <span class="faq-item__no mono">01-3</span>
              <span class="faq-item__q">刷新状态和眼前的赛程对不上，怎么处理？</span>
              <span class="faq-item__sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>先刷新一次浏览器，看顶部时间戳有没有变化，没变说明新一轮还没开始，可以照旧查看。接着确认自己点的是不是常用入口里最新入口那一格。最后翻更新档案，按影响联赛找到最近一次调整，两边时间对得上，就能判断该继续等还是走错了入口。</p>
            </div>
          </details>
        </div>
      </section>

      <figure class="faq-media" data-reveal>
        <img src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="抽象浏览器面板中的刷新条、通知开关与入口指向箭头示意" loading="lazy" decoding="async">
        <figcaption class="faq-media__cap">REFRESH RAIL · NOTICE SWITCH · ENTRY ARROW</figcaption>
      </figure>

      <section class="faq-group" id="subscribe" style="--acc: var(--purple)">
        <header class="faq-group__head" data-reveal>
          <span class="faq-group__num mono">02</span>
          <h2>订阅提示怎么用</h2>
          <p class="faq-group__note">想让站点主动告诉你变化，就把三类通知按需要打开。</p>
        </header>
        <div class="faq-items">
          <details class="faq-item" data-reveal>
            <summary>
              <span class="faq-item__no mono">02-1</span>
              <span class="faq-item__q">订阅提示在哪里打开？</span>
              <span class="faq-item__sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>在左侧导航的订阅提示分组里，也可以从首屏右侧的悬浮入口进入。可选的有赛程更新、入口变更和版本说明三类，只挑关心的一类也完全够用。整个选择在浏览器端完成，不用注册账户，也不必留手机号或邮箱。</p>
            </div>
          </details>

          <details class="faq-item" data-reveal style="--reveal-delay:70ms">
            <summary>
              <span class="faq-item__no mono">02-2</span>
              <span class="faq-item__q">选好类型之后，下次打开会看到什么？</span>
              <span class="faq-item__sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>你勾选的类别会集中提示：赛程更新说明哪些联赛进入新阶段，入口变更指出哪些入口换了位置，版本说明则直接对应到具体档案编号。三类可以自由组合，改动一旦生效，下次打开就按新设置显示。</p>
            </div>
          </details>

          <details class="faq-item" data-reveal style="--reveal-delay:140ms">
            <summary>
              <span class="faq-item__no mono">02-3</span>
              <span class="faq-item__q">想恢复初始状态该怎么做？</span>
              <span class="faq-item__sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>把已勾选的类别全部取消，就回到最干净的初始显示，之前的选择不会再影响后续提示。如果只是暂时不想被打扰，也可以保留类别、先不展开提示列表，等有需要时再回来逐条读。</p>
            </div>
          </details>
        </div>
      </section>

      <section class="faq-group" id="entry" style="--acc: var(--green)">
        <header class="faq-group__head" data-reveal>
          <span class="faq-group__num mono">03</span>
          <h2>入口在哪里</h2>
          <p class="faq-group__note">最新入口、常用入口和左侧导航分工不同，别混着用。</p>
        </header>
        <div class="faq-items">
          <details class="faq-item" data-reveal>
            <summary>
              <span class="faq-item__no mono">03-1</span>
              <span class="faq-item__q">最新入口在首屏的哪一格？</span>
              <span class="faq-item__sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>它在常用入口区的最前一格，用信号橙标出来，点一下直接进入，中间不插跳转页。紧跟其后的 12 个高频入口按回访习惯排序，覆盖赛程、入口索引、版本说明和订阅提示四类用途，常用的基本都落在这一屏里。</p>
            </div>
          </details>

          <details class="faq-item" data-reveal style="--reveal-delay:70ms">
            <summary>
              <span class="faq-item__no mono">03-2</span>
              <span class="faq-item__q">常用入口和左侧导航该怎么配合？</span>
              <span class="faq-item__sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>左侧导航按回访路线分成今日赛程、多联赛入口、旧版变更和订阅提示四组，负责把你带到某个内容类别；常用入口直接指向具体页面，负责跨过中间层级。头几次来建议沿导航认路，路线熟了之后用常用入口一步到位。</p>
            </div>
          </details>

          <details class="faq-item" data-reveal style="--reveal-delay:140ms">
            <summary>
              <span class="faq-item__no mono">03-3</span>
              <span class="faq-item__q">点了入口，内容不是想看的那个联赛？</span>
              <span class="faq-item__sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>先回首屏核对是不是点的最新入口那一格。确认无误后，去更新档案按影响联赛检索最近一次调整，看该联赛的入口是否刚刚更换过；确有更换时，档案会给出新位置对应的编号，照着编号重新定位就行。</p>
            </div>
          </details>
        </div>
      </section>

      <section class="faq-group" id="leagues" style="--acc: var(--gold)">
        <header class="faq-group__head" data-reveal>
          <span class="faq-group__num mono">04</span>
          <h2>多联赛怎么找</h2>
          <p class="faq-group__note">六个类别、38 个联赛条目，靠类别、首字母和版本编号三层收窄。</p>
        </header>
        <div class="faq-items">
          <details class="faq-item" data-reveal>
            <summary>
              <span class="faq-item__no mono">04-1</span>
              <span class="faq-item__q">怎么把几十个联赛快速缩到想看的那几个？</span>
              <span class="faq-item__sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>赛程索引覆盖足球、篮球、网球、排球、赛车和电竞六个类别。先按类别收窄，再在类别内按联赛首字母跳转，通常两下就能定位。表格还支持按联赛、日期和状态做前端筛选，三个条件可以叠加，筛完直接读结果。</p>
            </div>
          </details>

          <details class="faq-item" data-reveal style="--reveal-delay:70ms">
            <summary>
              <span class="faq-item__no mono">04-2</span>
              <span class="faq-item__q">首字母跳转出现在什么位置？</span>
              <span class="faq-item__sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>条目较多的大类底部有一条首字母横条，点字母直接跳到对应段落，适合已经知道自己要找哪个联赛的人。类别内条目少时，横条只显示实际存在的字母，不会出现点了没反应的空白项。</p>
            </div>
          </details>

          <details class="faq-item" data-reveal style="--reveal-delay:140ms">
            <summary>
              <span class="faq-item__no mono">04-3</span>
              <span class="faq-item__q">同一个联赛出现两个条目是怎么回事？</span>
              <span class="faq-item__sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>一般是入口调整留下的新旧并存：一个对应当前可用入口，另一个是上一版本的存档记录。看条目右侧的版本编号就能区分，编号大的为当前版本。想弄清两者差别，把编号拿到更新档案里对照，能看到这次调整影响了哪些联赛。</p>
            </div>
          </details>
        </div>
      </section>

      <section class="faq-group" id="desktop" style="--acc: var(--cyan)">
        <header class="faq-group__head" data-reveal>
          <span class="faq-group__num mono">05</span>
          <h2>电脑版访问与显示</h2>
          <p class="faq-group__note">按桌面分辨率设计的页面，宽度和筛选是最常见的两个卡点。</p>
        </header>
        <div class="faq-items">
          <details class="faq-item" data-reveal>
            <summary>
              <span class="faq-item__no mono">05-1</span>
              <span class="faq-item__q">电脑版对屏幕宽度有什么要求？</span>
              <span class="faq-item__sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>1366px 及以上可以完整展开三栏，刷新栏、常用入口和左侧导航同屏可见。1024px 宽度会自动切到紧凑布局，栏宽收窄、字号下调，但刷新栏与常用入口都会保留，筛选和索引照常可用。</p>
            </div>
          </details>

          <details class="faq-item" data-reveal style="--reveal-delay:70ms">
            <summary>
              <span class="faq-item__no mono">05-2</span>
              <span class="faq-item__q">表格筛选点了没反应怎么办？</span>
              <span class="faq-item__sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>先看条件是不是设成了互相排斥的组合，比如日期锁在某一天，所选联赛当天恰好没有安排，表格自然是空的。</p>
              <ol>
                <li>逐个取消条件，确认是哪一项把结果清空。</li>
                <li>把日期放宽到整周，再叠加联赛条件。</li>
                <li>换成状态筛选先看全部，再逐步收窄。</li>
              </ol>
            </div>
          </details>

          <details class="faq-item" data-reveal style="--reveal-delay:140ms">
            <summary>
              <span class="faq-item__no mono">05-3</span>
              <span class="faq-item__q">页面内容显示不全该怎么排查？</span>
              <span class="faq-item__sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>先把浏览器窗口拉到最大，或把显示缩放调回 100%，窄窗口下部分面板会收进抽屉。仍未完整时，强制刷新一次让样式重新加载。换一台设备还是异常，就把页面名称和现象发到联系通道，说明得越具体越好定位。</p>
            </div>
          </details>
        </div>
      </section>

      <section class="faq-group" id="archive" style="--acc: var(--purple)">
        <header class="faq-group__head" data-reveal>
          <span class="faq-group__num mono">06</span>
          <h2>旧版变更如何对照</h2>
          <p class="faq-group__note">每次入口调整都有编号，按版本号和联赛类别就能追到源头。</p>
        </header>
        <div class="faq-items">
          <details class="faq-item" data-reveal>
            <summary>
              <span class="faq-item__no mono">06-1</span>
              <span class="faq-item__q">从 V1.0 到现在一共有几个版本？</span>
              <span class="faq-item__sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>V1.0 到 V5.2 共七个主版本，当前最新为 V5.2。每个主版本下的调整都单独留档，记录档案编号、影响联赛和对照说明，因此不必从头翻，直接从最近一个版本往回读就能补齐上下文。</p>
            </div>
          </details>

          <details class="faq-item" data-reveal style="--reveal-delay:70ms">
            <summary>
              <span class="faq-item__no mono">06-2</span>
              <span class="faq-item__q">档案编号该怎么读？</span>
              <span class="faq-item__sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>编号由版本号加顺序位组成，同一版本里的调整按发生先后排列。拿编号去更新档案检索，就能看到这次调整涉及哪些联赛、动了哪个入口。想追某条联赛的完整变化，按编号顺序由旧到新读下去最省事。</p>
            </div>
          </details>

          <details class="faq-item" data-reveal style="--reveal-delay:140ms">
            <summary>
              <span class="faq-item__no mono">06-3</span>
              <span class="faq-item__q">发现档案记录和实际入口不一致，找谁说？</span>
              <span class="faq-item__sign" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>把版本编号、联赛名称和看到的页面现象整理成一句话，通过联系通道发来即可。客服邮箱用于接收旧版变更说明反馈与多联赛入口建议，联系电话适合访问与使用咨询；赛程数据方面的疑问，请先回首屏核对刷新时间戳。</p>
            </div>
          </details>
        </div>
      </section>

      <p class="faq-more" data-reveal>还想看更细的说明？<a href="/platform/">赛程平台</a>讲刷新与入口的具体用法，<a href="/information/">更新档案</a>按版本号列出每次调整。</p>
    </div>
  </div>

  <section class="faq-cue" aria-label="刷新提示">
    <div class="shell faq-cue__inner">
      <span class="faq-cue__mark mono" aria-hidden="true">FIRST</span>
      <p class="faq-cue__text">不管遇到哪一类问题，回到首屏先读一次刷新时间与状态，多数疑问当场就有答案。</p>
      <a class="btn btn--signal" href="/platform/">进入赛程平台</a>
    </div>
  </section>
</main>

.page-faq {
  --faq-line-w: 2px;
  background: var(--ink);
  color: var(--paper);
}

.page-faq .breadcrumb {
  padding-top: calc(var(--header-h) + 16px);
  padding-bottom: 4px;
}

.page-faq .breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  color: var(--mute);
}

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

.page-faq .breadcrumb-link {
  color: var(--mute);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}

.page-faq .breadcrumb-link:hover,
.page-faq .breadcrumb-link:focus-visible {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}

/* ---------- 首屏 ---------- */

.page-faq .faq-hero {
  position: relative;
  padding: clamp(26px, 3.6vw, 52px) 0 clamp(48px, 6vw, 88px);
  overflow: hidden;
}

.page-faq .faq-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 88% 6%, rgba(141, 124, 255, 0.18), transparent 62%),
    linear-gradient(168deg, var(--panel) 0%, var(--ink) 58%);
  clip-path: polygon(0 0, 100% 0, 100% 74%, 0 100%);
  pointer-events: none;
}

.page-faq .faq-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan) 0, var(--cyan) 26%, var(--line) 26%, var(--line) 100%);
  pointer-events: none;
}

.page-faq .faq-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 4.5vw, 60px);
  align-items: center;
}

.page-faq .faq-hero__text .label {
  display: inline-block;
  margin: 0 0 18px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  font-family: var(--font-label);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-faq .faq-hero h1 {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.05rem, 5.4vw, 4.2rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  max-width: 14em;
}

.page-faq .faq-lede {
  margin: 0;
  max-width: 34em;
  font-size: clamp(0.98rem, 1.3vw, 1.06rem);
  line-height: 1.85;
  color: var(--mute);
}

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

.page-faq .faq-jump a {
  display: inline-block;
  padding: 7px 12px;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--mute);
  text-decoration: none;
  transition: color 160ms var(--ease), background-color 160ms var(--ease), border-color 160ms var(--ease), transform 160ms var(--ease);
}

.page-faq .faq-jump a:hover,
.page-faq .faq-jump a:focus-visible {
  color: var(--ink);
  background: var(--cyan);
  border-color: var(--cyan);
  transform: translateY(-2px);
}

.page-faq .faq-hero__plate {
  position: relative;
  padding: 10px;
  border: var(--faq-line-w) solid var(--line);
  background: var(--raise);
  box-shadow: var(--shadow-hard);
}

.page-faq .faq-hero__plate img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.02);
}

.page-faq .faq-hero__stamp {
  position: absolute;
  right: -13px;
  top: 16%;
  writing-mode: vertical-rl;
  padding: 10px 4px;
  border: 1px solid var(--line);
  background: var(--ink);
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  color: var(--gold);
}

/* ---------- 主体 ---------- */

.page-faq .faq-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 60px);
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(48px, 6vw, 96px);
}

.page-faq .faq-index {
  border-left: var(--faq-line-w) solid var(--line);
  padding-left: 16px;
}

.page-faq .faq-index__title {
  margin: 0 0 14px;
  font-family: var(--font-label);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute);
}

.page-faq .faq-index__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-faq .faq-index__link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
  color: var(--mute);
  text-decoration: none;
  transition: color 160ms var(--ease), padding-left 160ms var(--ease);
}

.page-faq .faq-index__link .mono {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--acc, var(--cyan));
}

.page-faq .faq-index__link:hover,
.page-faq .faq-index__link:focus-visible {
  color: var(--paper);
  padding-left: 6px;
}

.page-faq .faq-index__foot {
  margin: 18px 0 0;
  font-size: 0.85rem;
  line-height: 1.75;
  color: var(--mute);
}

.page-faq .faq-index__foot a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--cyan);
}

/* ---------- 问答 ---------- */

.page-faq .faq-group {
  --acc: var(--cyan);
  margin: 0 0 clamp(44px, 5.5vw, 80px);
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.page-faq .faq-group__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  align-items: baseline;
  padding-bottom: 16px;
  margin-bottom: 22px;
  border-bottom: var(--faq-line-w) solid var(--line);
}

.page-faq .faq-group__num {
  grid-row: span 2;
  align-self: start;
  padding: 0.45em 0.5em;
  border: 1px solid var(--acc);
  font-family: var(--font-mono);
  font-size: 0.88rem;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--acc);
}

.page-faq .faq-group h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.35rem, 2.6vw, 1.95rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.page-faq .faq-group__note {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--mute);
}

.page-faq .faq-items {
  display: grid;
  gap: 12px;
}

.page-faq .faq-item {
  border: var(--faq-line-w) solid var(--line);
  background: var(--panel);
  transition: border-color 180ms var(--ease), background-color 180ms var(--ease);
}

.page-faq .faq-item:hover {
  border-color: var(--acc);
}

.page-faq .faq-item[open] {
  border-color: var(--acc);
  background: var(--raise);
}

.page-faq .faq-item > summary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(16px, 2.2vw, 22px);
  cursor: pointer;
  list-style: none;
}

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

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

.page-faq .faq-item__no {
  flex: none;
  padding-top: 0.34em;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--acc);
}

.page-faq .faq-item__q {
  flex: 1 1 auto;
  font-size: clamp(0.98rem, 1.5vw, 1.08rem);
  font-weight: 600;
  line-height: 1.6;
  color: var(--paper);
}

.page-faq .faq-item__sign {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 0.35em;
}

.page-faq .faq-item__sign::before,
.page-faq .faq-item__sign::after {
  content: "";
  position: absolute;
  background: var(--acc);
  transition: transform 200ms var(--ease);
}

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

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

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

.page-faq .faq-item__a {
  margin: 0 clamp(16px, 2.2vw, 22px) clamp(18px, 2.2vw, 24px) calc(clamp(16px, 2.2vw, 22px) + 30px);
  padding-left: 16px;
  border-left: 2px solid var(--cyan);
}

.page-faq .faq-item__a p {
  margin: 0;
  max-width: 42em;
  font-size: 0.97rem;
  line-height: 1.85;
  color: var(--mute);
}

.page-faq .faq-item__a ol {
  margin: 12px 0 0;
  padding-left: 1.25em;
  max-width: 42em;
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--mute);
}

.page-faq .faq-item__a li + li {
  margin-top: 6px;
}

.page-faq .faq-item__a li::marker {
  font-family: var(--font-mono);
  color: var(--cyan);
}

/* ---------- 中段图 ---------- */

.page-faq .faq-media {
  margin: 0 0 clamp(44px, 5.5vw, 80px);
  padding: 10px;
  border: var(--faq-line-w) solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow-hard);
}

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

.page-faq .faq-media__cap {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--mute);
}

/* ---------- 收尾 ---------- */

.page-faq .faq-more {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  line-height: 1.85;
  color: var(--mute);
}

.page-faq .faq-more a {
  margin: 0 2px;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--cyan);
}

.page-faq .faq-cue {
  background: var(--orange);
  color: var(--ink);
}

.page-faq .faq-cue__inner {
  display: grid;
  gap: 16px;
  align-items: center;
  padding-top: clamp(24px, 3vw, 34px);
  padding-bottom: clamp(24px, 3vw, 34px);
}

.page-faq .faq-cue__mark {
  justify-self: start;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.26em;
}

.page-faq .faq-cue__text {
  margin: 0;
  max-width: 40em;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-weight: 600;
  line-height: 1.6;
}

.page-faq .faq-cue .btn--signal {
  justify-self: start;
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--ink);
}

.page-faq .faq-cue .btn--signal:hover,
.page-faq .faq-cue .btn--signal:focus-visible {
  background: transparent;
  color: var(--ink);
}

/* ---------- 响应式 ---------- */

@media (min-width: 720px) {
  .page-faq .faq-cue__inner {
    grid-template-columns: auto 1fr auto;
    gap: 26px;
  }

  .page-faq .faq-cue__mark {
    padding-bottom: 0;
    padding-left: 14px;
    border-bottom: 0;
    border-left: 3px solid var(--ink);
  }

  .page-faq .faq-cue .btn--signal {
    justify-self: end;
  }
}

@media (min-width: 900px) {
  .page-faq .faq-hero__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }

  .page-faq .faq-hero__plate {
    transform: translateY(-8px);
  }
}

@media (min-width: 1040px) {
  .page-faq .faq-body {
    grid-template-columns: 246px minmax(0, 1fr);
    align-items: start;
  }

  .page-faq .faq-index {
    position: sticky;
    top: calc(var(--header-h) + 26px);
  }
}

@media (min-width: 1320px) {
  .page-faq .faq-body {
    grid-template-columns: 262px minmax(0, 1fr) 96px;
  }

  .page-faq .faq-media {
    margin-right: -24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-jump a,
  .page-faq .faq-index__link,
  .page-faq .faq-item,
  .page-faq .faq-item__sign::before,
  .page-faq .faq-item__sign::after,
  .page-faq .faq-hero__plate,
  .page-faq .breadcrumb-link {
    transition: none;
    transform: none;
  }
}