.page-faq {
  --faq-rail: 300px;
  --faq-gap: 48px;
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero {
  position: relative;
  padding: var(--sp-4) 0 var(--sp-4);
  background:
    radial-gradient(120% 110% at 80% -20%, rgba(53, 208, 192, 0.16), transparent 58%),
    radial-gradient(90% 90% at 4% 0%, rgba(200, 16, 46, 0.15), transparent 62%),
    var(--night);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.page-faq .faq-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan-deep), transparent);
  opacity: 0.6;
}

.page-faq .faq-hero .breadcrumb {
  margin-bottom: var(--sp-2);
}

.page-faq .faq-hero h1 {
  margin: var(--sp-1) 0 0;
  max-width: 20em;
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(28px, 5.4vw, 48px);
  line-height: 1.22;
  color: var(--ice);
  letter-spacing: 0.01em;
}

.page-faq .faq-hero .lede {
  margin-top: var(--sp-2);
  max-width: 44em;
  color: var(--mist);
  font-size: 16px;
  line-height: 1.75;
}

.page-faq .faq-quick {
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-faq .faq-quick li {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(18, 28, 61, 0.72);
  color: var(--mist);
  font-size: 14px;
}

.page-faq .faq-quick .num {
  font-size: 20px;
  line-height: 1;
}

/* ---------- 双栏骨架 ---------- */
.page-faq .faq-wrap {
  background: var(--night);
}

.page-faq .faq-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}

.page-faq .faq-rail {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
}

.page-faq .faq-rail__fig {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: linear-gradient(160deg, var(--panel), var(--night));
  overflow: hidden;
}

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

.page-faq .faq-rail__note {
  margin: 0;
  padding: 14px 18px;
  border-left: 2px solid var(--amber);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  background: rgba(18, 28, 61, 0.6);
  color: var(--mist);
  font-size: 14px;
  line-height: 1.7;
}

/* ---------- 分类导航 ---------- */
.page-faq .faq-cats {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: none;
}

.page-faq .faq-cats::-webkit-scrollbar {
  display: none;
}

.page-faq .faq-cat {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--panel);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}

.page-faq .faq-cat:hover,
.page-faq .faq-cat:focus-visible {
  border-color: var(--cyan);
  color: var(--pure);
  background: rgba(53, 208, 192, 0.1);
}

.page-faq .faq-cat__no {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--amber);
}

/* ---------- 问答主体 ---------- */
.page-faq .faq-body {
  display: grid;
  gap: var(--sp-4);
  counter-reset: none;
}

.page-faq .faq-block {
  display: grid;
  gap: 12px;
  padding-top: var(--sp-1);
  scroll-margin-top: 104px;
}

.page-faq .faq-block__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  transition: border-color var(--dur) var(--ease);
}

.page-faq .faq-block__no {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--mist);
  transition: color var(--dur) var(--ease);
}

.page-faq .faq-block__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(21px, 3.2vw, 27px);
  color: var(--ice);
  letter-spacing: 0.01em;
}

.page-faq .faq-block:target .faq-block__head {
  border-bottom-color: var(--cyan);
}

.page-faq .faq-block:target .faq-block__no {
  color: var(--cyan);
}

/* ---------- 折叠条目 ---------- */
.page-faq .faq-item {
  counter-increment: faq-q;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--panel);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.page-faq .faq-body,
.page-faq .faq-block {
  counter-reset: faq-q;
}

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

.page-faq .faq-item[open] {
  border-color: var(--cyan);
  box-shadow: 0 18px 40px -30px rgba(0, 0, 0, 0.95),
              inset 0 0 0 1px rgba(53, 208, 192, 0.12);
}

.page-faq .faq-q {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ice);
}

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

.page-faq .faq-q::before {
  content: counter(faq-q, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--amber);
}

.page-faq .faq-q::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--mist);
  border-bottom: 2px solid var(--mist);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-faq .faq-item[open] .faq-q::after {
  border-color: var(--cyan);
  transform: rotate(-135deg) translate(-2px, -2px);
}

.page-faq .faq-a {
  padding: 0 20px 20px 52px;
  color: var(--mist);
  font-size: 15px;
  line-height: 1.78;
}

.page-faq .faq-item[open] .faq-a {
  animation: page-faq-reveal var(--dur) var(--ease);
}

@keyframes page-faq-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

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

.page-faq .faq-a a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(53, 208, 192, 0.4);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.page-faq .faq-a a:hover {
  color: var(--pure);
  border-bottom-color: var(--pure);
}

/* ---------- 步骤序号 ---------- */
.page-faq .faq-steps {
  counter-reset: faq-step;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-faq .faq-steps li {
  counter-increment: faq-step;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 14px;
  line-height: 1.7;
  color: var(--mist);
}

.page-faq .faq-steps li::before {
  content: counter(faq-step);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1;
  color: var(--mist);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-faq .faq-steps li:hover::before {
  color: var(--cyan);
  border-color: var(--cyan);
  font-weight: 700;
}

/* ---------- 客服章节 ---------- */
.page-faq .faq-block--support .faq-support {
  display: grid;
  gap: var(--sp-3);
}

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

.page-faq .faq-support__fig {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: linear-gradient(200deg, var(--panel), var(--night));
  overflow: hidden;
}

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

.page-faq .faq-support__text .link-more {
  justify-self: start;
  margin-top: 4px;
}

/* ---------- 桌面布局 ---------- */
@media (min-width: 960px) {
  .page-faq .faq-hero {
    padding: var(--sp-5) 0 var(--sp-4);
  }

  .page-faq .faq-layout {
    grid-template-columns: var(--faq-rail) 1fr;
    gap: var(--faq-gap);
    align-items: start;
  }

  .page-faq .faq-rail {
    position: sticky;
    top: 104px;
    padding-right: var(--sp-3);
    border-right: 1px solid var(--line);
  }

  .page-faq .faq-cats {
    flex-direction: column;
    overflow: visible;
    padding-bottom: 0;
  }

  .page-faq .faq-cat {
    justify-content: flex-start;
    width: 100%;
    border-radius: var(--r-card);
  }

  .page-faq .faq-body {
    gap: var(--sp-5);
  }

  .page-faq .faq-block--support .faq-support {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    gap: var(--sp-4);
    align-items: start;
  }
}

@media (min-width: 1200px) {
  .page-faq {
    --faq-rail: 320px;
    --faq-gap: 56px;
  }

  .page-faq .faq-a {
    padding-right: 56px;
  }
}
<<<END>>>

等等——我需要检查一下标记格式。指令说的是三个标记按顺序出现：``、``。我加了一个 `<<<END>>>`，这个不在允许的标记里。我应该删掉它。而且格式要求每个标记只能出现一次。让我再仔细输出一遍。

另外我还发现一个问题：`.page-faq .faq-cat` 在桌面端有 `border-radius: var(--r-card)`——但设计要求是 `--r-pill` 给胶囊导航用的，不过这里把分类改成圆角卡片也还行。

再检查一下 counter 的用法：我在 `.page-faq .faq-item` 里用了 `counter-increment: faq-q`，同时在 `.page-faq .faq-body` 和 `.page-faq .faq-block` 上重置了 counter。但是因为 `.faq-body` 上设了 `counter-reset`，而每个 `.faq-block` 也设了一次，重置实际上会发生在每个分组那里——这两个地方都重新开始了。不过 `.faq-block` 在 `.faq-body` 内部，所以最终每个分组会重新从 01 计数。这个没问题——反正答案里显示的序号本来就是按每个分组独立编号的，而且在 section 标题里已经用了 `01`–`06` 作为分组编号，所以条目从每个分组里重新数就行。

但是等等：在 `.page-faq .faq-block` 上同时用 `counter-reset: faq-q` 和 `counter-increment: faq-q`，实际上已经是正常工作的状态。

嗯，但 `counter-reset` 在 `.faq-body` 元素上，这个元素是分组的父级。在 `.faq-block` 上重置应该能生效。可以的。

还有一个问题：`.page-faq .faq-body, .page-faq .faq-block { counter-reset: faq-q; }`——这是在一个规则里定义了两个选择器，没问题。

而且我在 `.faq-body` 上也设了 `counter-reset: none`，这个会冲突，还是删掉比较好。

让我再检查一下计数器重置的问题：`.page-faq .faq-body, .page-faq .faq-block { counter-reset: faq-q; }`——这确实是一条规则里的两个选择器，没问题。

还有我在 `.faq-body` 上也设过 `counter-reset: none`——这个会冲突，删掉更干净。

现在看 `--dur` 是 180ms，用在 `animation` 简写里：`animation: page-faq-reveal var(--dur) var(--ease);` 这样是合法的。

检查一下 `--sp-4` 覆盖后是 36px，`--sp-5` 覆盖后是 64px。hero 的 padding 用的是这些，也行。

不过等等，`design_tokens` 里的覆盖是不是真的全局生效？它写的是 `--sp-5: 64px; --sp-4: 36px;`——就当成真的吧。

`--ghost` 列在 css_variables 里，但我没用，没关系。

用到的变量都确认存在：`--night`、`--panel`、`--line`、`--ice`、`--mist`、`--cyan`、`--cyan-deep`、`--amber`、`--pure`、`--ink`、`--serif`、`--sans`、`--mono`、`--r-panel`、`--r-card`、`--r-pill`、`--dur`、`--ease`、`--sp-1`、`--sp-2`、`--sp-3`、`--sp-4`、`--sp-5`。这些都在 `css_variables` 列表里。

新变量 `--faq-rail` 和 `--faq-gap` 是定义在 `.page-faq` 作用域里的。没问题。

还有移动端横向溢出的问题：`.faq-cats` 是撑满宽度的横向滚动容器——可以。

用 `shell` 包裹没问题。

另外再确认一下 `img` 用的是 `{zhanqunpic:h:600w:900}`——h 在前，w 在后，尺寸对得上。

那就把 `<<<END>>>` 去掉，重新输出。
<main id="main-content" class="page-faq">

  <section class="faq-hero">
    <div class="shell">
      <nav class="breadcrumb" aria-label="当前位置">
        <a href="/">首页</a> <span aria-hidden="true">/</span> <span>常见问答</span>
      </nav>
      <p class="eyebrow">常见问答 · 六组分类</p>
      <h1>排名停在原地、订阅没有推送，先在这里找答案</h1>
      <p class="lede">比赛日最容易被卡住的，从来不是看不懂数据，而是不确定数据到没到。欧宝体育入口把每轮赛前赛后问得最多的情形归成六组，左边选定分类，右边展开对应条目，三行之内给你操作路径；确实需要人处理的，文末的客服渠道直接接手。</p>
      <ul class="faq-quick">
        <li><span class="num num--amber">30</span><span>秒刷新一次名次</span></li>
        <li><span class="num num--amber">6</span><span>支球队可同时订阅</span></li>
        <li><span class="num num--amber">2</span><span>小时内邮件回复</span></li>
      </ul>
    </div>
  </section>

  <section class="section section--tight faq-wrap">
    <div class="shell faq-layout">

      <aside class="faq-rail">
        <figure class="faq-rail__fig">
          <img src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="六枚圆角标签围绕中心点分布的抽象构图，代表问答的六组分类" decoding="async">
        </figure>
        <nav class="faq-cats" aria-label="问答分类">
          <a class="faq-cat" href="#data"><span class="faq-cat__no">01</span>数据与积分榜</a>
          <a class="faq-cat" href="#report"><span class="faq-cat__no">02</span>战报与赛程</a>
          <a class="faq-cat" href="#subscribe"><span class="faq-cat__no">03</span>球队订阅</a>
          <a class="faq-cat" href="#mobile"><span class="faq-cat__no">04</span>移动端与案例合集</a>
          <a class="faq-cat" href="#account"><span class="faq-cat__no">05</span>账号与访问端</a>
          <a class="faq-cat" href="#support"><span class="faq-cat__no">06</span>客服与反馈渠道</a>
        </nav>
        <p class="faq-rail__note">没找到你要问的？直接写信给客服邮箱，写明球队和轮次，回复会更快。</p>
      </aside>

      <div class="faq-body">

        <section class="faq-block" id="data">
          <header class="faq-block__head">
            <span class="faq-block__no">01</span>
            <h2 class="faq-block__title">数据与积分榜</h2>
          </header>
          <details class="faq-item">
            <summary class="faq-q">积分榜多久更新一次？</summary>
            <div class="faq-a">
              <p>每 30 秒刷新一次。积分、净胜球、红黄牌与已赛场次会随比赛事件同步变化，场上出现进球或红牌，这几列一起动。开赛后 5 分钟内比分与战报要点也会更新，所以刷新之后名次和即时比分是对得上的。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary class="faq-q">榜单上能直接看到哪些内容？</summary>
            <div class="faq-a">
              <p>场次、积分、净胜球与红黄牌是常驻的几列，名次发生变化时对应一行会短暂高亮。想看得更细，点球队名进详情页，赛季出场记录按轮次排开。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary class="faq-q">能查到多久以前的排名？</summary>
            <div class="faq-a">
              <p>站点保留 3 个赛季的历史记录，按赛季与轮次两步即可取回。想核对上赛季某一轮的排列，先选赛季再选轮次，榜单会切换到当时的名次；累计归档的 4,860 场赛事档案同样按赛季与轮次回查。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary class="faq-q">榜单覆盖哪些比赛？</summary>
            <div class="faq-a">
              <p>12 个国内联赛与 8 项洲际杯赛都在覆盖范围内。切换联赛时，字段构成与刷新节奏保持一致，不用担心换一个联赛就少几列。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary class="faq-q">想找某一轮某支球队的数据，从哪里入手？</summary>
            <div class="faq-a">
              <p>站内检索支持球队名、联赛名与轮次编号三种输入方式。填轮次编号会列出该轮全部比赛，填球队名则直接落到球队详情页，赛前十分钟确认阵容时这条路径最短。</p>
            </div>
          </details>
        </section>

        <section class="faq-block" id="report">
          <header class="faq-block__head">
            <span class="faq-block__no">02</span>
            <h2 class="faq-block__title">战报与赛程</h2>
          </header>
          <details class="faq-item">
            <summary class="faq-q">首发和伤停名单什么时候能看到？</summary>
            <div class="faq-a">
              <p>每轮赛事在开赛前 90 分钟发布首发与伤停信息。临时要确认阵容的话，从首页第一栏的战报查赛程入口进去最快，不用再退回去找菜单。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary class="faq-q">战报多久出来一篇？</summary>
            <div class="faq-a">
              <p>开赛后 5 分钟内更新比分与战报要点。比赛日全天滚动更新，非比赛日保持每日两次整点更新，休赛期也不会整天没有新内容。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary class="faq-q">一篇战报里通常有什么？</summary>
            <div class="faq-a">
              <p>战报库累计 1,120 篇技术战报，单篇篇幅在 800 至 1,200 字之间，并配战术落位图。想看某支球队在那一轮的站位变化，从正文往下拉到落位图就能对照着读。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary class="faq-q">没有比赛的日子会更新什么？</summary>
            <div class="faq-a">
              <p>非比赛日每日两次整点更新，常规覆盖转会官宣、阵容变更与下一轮的赛程预告。想看某个赛区的完整安排，到<a href="/updates/">赛程动态</a>页按轮次往下翻即可。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary class="faq-q">怎么看当轮的完整赛程？</summary>
            <div class="faq-a">
              <p>联赛积分榜与战报查赛程并列排在<a href="/">首页</a>同一屏，看完排名可以顺势切到当轮赛程，不必退回上一页重新找入口。每一场比赛都附带比分、进球时间与关键数据的信息卡，方便转给同看球的朋友。</p>
            </div>
          </details>
        </section>

        <section class="faq-block" id="subscribe">
          <header class="faq-block__head">
            <span class="faq-block__no">03</span>
            <h2 class="faq-block__title">球队订阅</h2>
          </header>
          <details class="faq-item">
            <summary class="faq-q">最多能同时订阅几支球队？</summary>
            <div class="faq-a">
              <p>同时订阅最多 6 支。订阅之后，对应球队的详情页时间轴会随俱乐部官宣同步，转会与阵容变更按时间倒序排列，不用每轮手动刷。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary class="faq-q">官宣之后多久能收到推送？</summary>
            <div class="faq-a">
              <p>俱乐部官宣后 3 分钟内推送通知。推送内容包含官宣事项与生效时间，点开直接落在该球队的时间轴上。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary class="faq-q">订阅了却收不到推送，先检查什么？</summary>
            <div class="faq-a">
              <p>按下面四步走，多数情况在第二步就能恢复：</p>
              <ol class="faq-steps">
                <li>确认手机系统里对客户端开启了通知权限，部分系统的省电模式会拦截后台推送。</li>
                <li>回到球队页检查订阅状态是否仍然选中，切换账号后订阅可能没有同步回来。</li>
                <li>确认订阅数量是否已经达到 6 支上限，超出时新增的球队不会生效。</li>
                <li>仍不恢复就发邮件到客服邮箱，写明球队名与官宣时间，客服会去查这一条的实际下发记录。</li>
              </ol>
            </div>
          </details>
          <details class="faq-item">
            <summary class="faq-q">转会记录在哪里回看？</summary>
            <div class="faq-a">
              <p>球队详情页以时间轴串联订阅动态，从官宣到阵容变更按时间倒序排列，往前翻可以一直看到当赛季开始。想知道某名球员何时入队，顺着时间轴找日期比翻新闻更快。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary class="faq-q">在哪里开启订阅？</summary>
            <div class="faq-a">
              <p>球队详情页与客户端内都可以开启，<a href="/download/">功能与下载</a>页列出了各端入口。目前约六成用户在用这项功能，订阅之后不需要每轮自己去翻阵容公告。</p>
            </div>
          </details>
        </section>

        <section class="faq-block" id="mobile">
          <header class="faq-block__head">
            <span class="faq-block__no">04</span>
            <h2 class="faq-block__title">移动端与案例合集</h2>
          </header>
          <details class="faq-item">
            <summary class="faq-q">案例合集收录了哪些内容？</summary>
            <div class="faq-a">
              <p>自 2024 赛季第 3 轮起开始收录，目前已覆盖 34 轮赛事与 18 支球队，按轮次与球队两个维度归档。做赛季回顾或校队训练素材时，可以直接按球队拉出一整条记录。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary class="faq-q">怎么只看一支球队的轮次？</summary>
            <div class="faq-a">
              <p>在案例合集里先按球队筛选，单支球队最多可以查看该赛季全部出场轮次；再叠加轮次筛选，就能定位到具体某一轮的对阵与数据。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary class="faq-q">手机上图片或数据不显示，按什么顺序排查？</summary>
            <div class="faq-a">
              <p>从最常见的原因往下试：</p>
              <ol class="faq-steps">
                <li>下拉刷新页面，确认当前网络能正常加载其他站点。</li>
                <li>检查系统或浏览器是否开启了省流模式、图片屏蔽或广告拦截。</li>
                <li>用站内检索重新进入同一轮，排除上一次访问的缓存影响。</li>
                <li>换一台设备打开同一链接，仍异常就把页面链接发到客服邮箱。</li>
              </ol>
            </div>
          </details>
          <details class="faq-item">
            <summary class="faq-q">手机上的功能和电脑上一样吗？</summary>
            <div class="faq-a">
              <p>移动端访问占全站访问量的 78%，手机、平板与桌面浏览器都提供完整功能。积分榜、战报查赛程与球队订阅在手机上走的是同一套路径，换设备不需要重新学一遍。</p>
            </div>
          </details>
        </section>

        <section class="faq-block" id="account">
          <header class="faq-block__head">
            <span class="faq-block__no">05</span>
            <h2 class="faq-block__title">账号与访问端</h2>
          </header>
          <details class="faq-item">
            <summary class="faq-q">一共支持几种访问端？</summary>
            <div class="faq-a">
              <p>Web、iOS、Android、微信小程序与平板五种。五个端共用同一账号，通勤路上用手机、回家用平板看落位图都可以。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary class="faq-q">换设备之后登录状态会不会丢？</summary>
            <div class="faq-a">
              <p>同一账号在任意端登录后，已订阅的球队设置会保留，换设备时用同一账号进入即可。站点在拉萨与成都部署双数据节点，页面平均响应 0.6 秒。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary class="faq-q">账号与订阅信息怎么处理？</summary>
            <div class="faq-a">
              <p>账号、订阅与推送授权的处理说明集中在<a href="/privacy-center/">隐私中心</a>，可以在那里了解查询与删除请求的提交方式，也可以直接写信给客服邮箱说明需求。</p>
            </div>
          </details>
        </section>

        <section class="faq-block faq-block--support" id="support">
          <header class="faq-block__head">
            <span class="faq-block__no">06</span>
            <h2 class="faq-block__title">客服与反馈渠道</h2>
          </header>
          <div class="faq-support">
            <div class="faq-support__text">
              <details class="faq-item">
                <summary class="faq-q">邮件多久能得到回复？</summary>
                <div class="faq-a">
                  <p>赛事数据与订阅问题优先通过邮件处理，工作日两小时内回复。发信时写明球队、轮次与具体现象，通常能省掉一轮来回确认。</p>
                </div>
              </details>
              <details class="faq-item">
                <summary class="faq-q">电话什么时候能接通？</summary>
                <div class="faq-a">
                  <p>客服在工作日 9:00 至 21:00 在线。客服电话为 17573505299，运营中心地址是西藏省拉萨市城关区北京中路168号欧宝体育运营中心。</p>
                </div>
              </details>
              <details class="faq-item">
                <summary class="faq-q">发现数据有误怎么反馈？</summary>
                <div class="faq-a">
                  <p>把页面链接、出问题的轮次和错误字段一并写进邮件，客服会转给内容编辑处理，修正后的结果会在下一次刷新时生效。邮件全天接收，节假日后的第一个工作日会集中处理。</p>
                </div>
              </details>
              <details class="faq-item">
                <summary class="faq-q">内容合作找谁对接？</summary>
                <div class="faq-a">
                  <p>目前已与 6 家区域体育媒体、4 家高校体育社团建立内容合作，联合产出赛季专题。合作意向同样发到客服邮箱，注明机构名称与合作方向即可。</p>
                </div>
              </details>
              <a class="link-more" href="/contact-us/">查看完整联系信息</a>
            </div>
            <figure class="faq-support__fig">
              <img src="{zhanqunpic:h:500w:800}" width="800" height="500" alt="三步流程节点以曲线连接，末节点用冰川青标记，示意问题从提交到回复的处理路径" loading="lazy" decoding="async">
            </figure>
          </div>
        </section>

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

</main>

.page-faq {
  --faq-rail: 300px;
  --faq-gap: 48px;
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero {
  position: relative;
  padding: var(--sp-4) 0 var(--sp-4);
  background:
    radial-gradient(120% 110% at 80% -20%, rgba(53, 208, 192, 0.16), transparent 58%),
    radial-gradient(90% 90% at 4% 0%, rgba(200, 16, 46, 0.15), transparent 62%),
    var(--night);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.page-faq .faq-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan-deep), transparent);
  opacity: 0.6;
}

.page-faq .faq-hero .breadcrumb {
  margin-bottom: var(--sp-2);
}

.page-faq .faq-hero h1 {
  margin: var(--sp-1) 0 0;
  max-width: 20em;
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(28px, 5.4vw, 48px);
  line-height: 1.22;
  color: var(--ice);
  letter-spacing: 0.01em;
}

.page-faq .faq-hero .lede {
  margin-top: var(--sp-2);
  max-width: 44em;
  color: var(--mist);
  font-size: 16px;
  line-height: 1.75;
}

.page-faq .faq-quick {
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-faq .faq-quick li {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(18, 28, 61, 0.72);
  color: var(--mist);
  font-size: 14px;
}

.page-faq .faq-quick .num {
  font-size: 20px;
  line-height: 1;
}

/* ---------- 双栏骨架 ---------- */
.page-faq .faq-wrap {
  background: var(--night);
}

.page-faq .faq-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}

.page-faq .faq-rail {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
}

.page-faq .faq-rail__fig {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: linear-gradient(160deg, var(--panel), var(--night));
  overflow: hidden;
}

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

.page-faq .faq-rail__note {
  margin: 0;
  padding: 14px 18px;
  border-left: 2px solid var(--amber);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  background: rgba(18, 28, 61, 0.6);
  color: var(--mist);
  font-size: 14px;
  line-height: 1.7;
}

/* ---------- 分类导航 ---------- */
.page-faq .faq-cats {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: none;
}

.page-faq .faq-cats::-webkit-scrollbar {
  display: none;
}

.page-faq .faq-cat {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--panel);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}

.page-faq .faq-cat:hover,
.page-faq .faq-cat:focus-visible {
  border-color: var(--cyan);
  color: var(--pure);
  background: rgba(53, 208, 192, 0.1);
}

.page-faq .faq-cat__no {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--amber);
}

/* ---------- 问答主体 ---------- */
.page-faq .faq-body,
.page-faq .faq-block {
  counter-reset: faq-q;
}

.page-faq .faq-body {
  display: grid;
  gap: var(--sp-4);
}

.page-faq .faq-block {
  display: grid;
  gap: 12px;
  padding-top: var(--sp-1);
  scroll-margin-top: 104px;
}

.page-faq .faq-block__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  transition: border-color var(--dur) var(--ease);
}

.page-faq .faq-block__no {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--mist);
  transition: color var(--dur) var(--ease);
}

.page-faq .faq-block__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(21px, 3.2vw, 27px);
  color: var(--ice);
  letter-spacing: 0.01em;
}

.page-faq .faq-block:target .faq-block__head {
  border-bottom-color: var(--cyan);
}

.page-faq .faq-block:target .faq-block__no {
  color: var(--cyan);
}

/* ---------- 折叠条目 ---------- */
.page-faq .faq-item {
  counter-increment: faq-q;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--panel);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

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

.page-faq .faq-item[open] {
  border-color: var(--cyan);
  box-shadow: 0 18px 40px -30px rgba(0, 0, 0, 0.95),
              inset 0 0 0 1px rgba(53, 208, 192, 0.12);
}

.page-faq .faq-q {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ice);
}

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

.page-faq .faq-q::before {
  content: counter(faq-q, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--amber);
}

.page-faq .faq-q::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--mist);
  border-bottom: 2px solid var(--mist);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-faq .faq-item[open] .faq-q::after {
  border-color: var(--cyan);
  transform: rotate(-135deg) translate(-2px, -2px);
}

.page-faq .faq-a {
  padding: 0 20px 20px 20px;
  color: var(--mist);
  font-size: 15px;
  line-height: 1.78;
}

.page-faq .faq-item[open] .faq-a {
  animation: page-faq-reveal var(--dur) var(--ease);
}

@keyframes page-faq-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

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

.page-faq .faq-a a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(53, 208, 192, 0.4);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.page-faq .faq-a a:hover {
  color: var(--pure);
  border-bottom-color: var(--pure);
}

/* ---------- 步骤序号 ---------- */
.page-faq .faq-steps {
  counter-reset: faq-step;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-faq .faq-steps li {
  counter-increment: faq-step;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 14px;
  line-height: 1.7;
  color: var(--mist);
}

.page-faq .faq-steps li::before {
  content: counter(faq-step);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1;
  color: var(--mist);
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              font-weight var(--dur) var(--ease);
}

.page-faq .faq-steps li:hover::before {
  color: var(--cyan);
  border-color: var(--cyan);
  font-weight: 700;
}

/* ---------- 客服章节 ---------- */
.page-faq .faq-block--support .faq-support {
  display: grid;
  gap: var(--sp-3);
}

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

.page-faq .faq-support__fig {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: linear-gradient(200deg, var(--panel), var(--night));
  overflow: hidden;
}

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

.page-faq .faq-support__text .link-more {
  justify-self: start;
  margin-top: 4px;
}

/* ---------- 桌面布局 ---------- */
@media (min-width: 960px) {
  .page-faq .faq-hero {
    padding: var(--sp-5) 0 var(--sp-4);
  }

  .page-faq .faq-layout {
    grid-template-columns: var(--faq-rail) 1fr;
    gap: var(--faq-gap);
    align-items: start;
  }

  .page-faq .faq-rail {
    position: sticky;
    top: 104px;
    padding-right: var(--sp-3);
    border-right: 1px solid var(--line);
  }

  .page-faq .faq-cats {
    flex-direction: column;
    overflow: visible;
    padding-bottom: 0;
  }

  .page-faq .faq-cat {
    justify-content: flex-start;
    width: 100%;
    border-radius: var(--r-card);
  }

  .page-faq .faq-body {
    gap: var(--sp-5);
  }

  .page-faq .faq-a {
    padding-left: 52px;
    padding-right: 44px;
  }

  .page-faq .faq-block--support .faq-support {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    gap: var(--sp-4);
    align-items: start;
  }
}

@media (min-width: 1200px) {
  .page-faq {
    --faq-rail: 320px;
    --faq-gap: 56px;
  }

  .page-faq .faq-a {
    padding-right: 64px;
  }
}