.page-faq {
  --faq-index-w: 258px;
  color: var(--c-text);
  padding-bottom: clamp(3rem, 8vw, 6rem);
  overflow-x: clip;
}

/* ---------- 页头 ---------- */
.page-faq .faq-hero {
  padding: clamp(1.25rem, 3vw, 2rem) 0 clamp(1.5rem, 4vw, 2.25rem);
}

.page-faq .faq-hero-grid {
  display: grid;
  gap: clamp(1.5rem, 5vw, 3rem);
  align-items: center;
}

@media (min-width: 900px) {
  .page-faq .faq-hero-grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: clamp(2rem, 5vw, 4rem);
  }
}

.page-faq .faq-hero-copy {
  position: relative;
  padding-top: 1.4rem;
}

.page-faq .faq-hero-copy::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: min(9rem, 42%);
  height: 2px;
  background: linear-gradient(90deg, var(--c-orange), var(--c-cyan) 62%, transparent);
}

.page-faq .faq-hero h1 {
  margin: 0.55rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.6vw, 3.5rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: 0.005em;
  color: var(--c-bright);
}

.page-faq .faq-hero .lede {
  margin: 1rem 0 0;
  max-width: 48ch;
  font-size: clamp(1rem, 1.6vw, 1.06rem);
  line-height: 1.78;
  color: var(--c-text-dim);
}

.page-faq .faq-hero-chips {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.page-faq .faq-hero-actions {
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.page-faq .faq-hero-figure {
  margin: 0;
  position: relative;
}

.page-faq .faq-hero-figure .figure-frame {
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border: 1px solid var(--c-line);
  box-shadow: 0 24px 60px -32px rgba(33, 230, 193, 0.45);
}

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

/* ---------- 现象分流 ---------- */
.page-faq .faq-split {
  margin-top: clamp(1.25rem, 3.5vw, 2rem);
}

.page-faq .faq-split-inner {
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(127, 212, 255, 0.09), transparent 72%), var(--c-panel);
  padding: clamp(0.9rem, 2.5vw, 1.3rem);
}

.page-faq .faq-split-title {
  margin: 0 0 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--c-steel);
}

.page-faq .faq-split .tablist {
  display: flex;
  gap: 0.45rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
  scrollbar-width: thin;
}

.page-faq .faq-split .tab {
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 0.48rem 0.95rem;
  border: 1px solid var(--c-line-soft);
  border-radius: 999px;
  background: transparent;
  color: var(--c-text-dim);
  cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-faq .faq-split .tab:hover {
  color: var(--c-bright);
  border-color: var(--c-line);
}

.page-faq .faq-split .tab[aria-selected="true"] {
  color: var(--c-void);
  background: var(--c-ice);
  border-color: var(--c-ice);
  font-weight: 600;
}

.page-faq .faq-split .tabpanel {
  margin-top: 0.9rem;
  display: grid;
  gap: 0.6rem;
  padding: 0;
  border: 0;
  background: none;
}

.page-faq .faq-split .tabpanel p {
  margin: 0;
  max-width: 62ch;
  color: var(--c-text-dim);
  line-height: 1.75;
  font-size: 0.95rem;
}

.page-faq .faq-split .tabpanel a {
  justify-self: start;
  color: var(--c-cyan);
  font-size: 0.88rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(33, 230, 193, 0.5);
  padding-bottom: 0.1rem;
}

.page-faq .faq-split .tabpanel a:hover {
  color: var(--c-bright);
  border-bottom-color: var(--c-bright);
}

/* ---------- 工作台 ---------- */
.page-faq .faq-workbench {
  display: grid;
  gap: clamp(1.4rem, 4vw, 2.75rem);
  margin-top: clamp(2rem, 5vw, 3.25rem);
  align-items: start;
}

@media (min-width: 1000px) {
  .page-faq .faq-workbench {
    grid-template-columns: var(--faq-index-w) minmax(0, 1fr);
  }
}

.page-faq .faq-index {
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius);
  background: var(--c-panel);
  padding: 0.9rem 1rem 1rem;
}

@media (min-width: 1000px) {
  .page-faq .faq-index {
    position: sticky;
    top: 6rem;
    background: linear-gradient(180deg, rgba(127, 212, 255, 0.1), transparent 68%), var(--c-panel);
  }
}

.page-faq .faq-index-title {
  margin: 0 0 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--c-steel);
}

.page-faq .faq-index-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0.3rem;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

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

.page-faq .faq-index-list a {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--c-line-soft);
  border-radius: 999px;
  color: var(--c-text-dim);
  text-decoration: none;
  font-size: 0.86rem;
  white-space: nowrap;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-faq .faq-index-list a:hover {
  color: var(--c-bright);
  border-color: var(--c-line);
  background: var(--c-glass);
}

.page-faq .faq-idx {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--c-ice);
}

.page-faq .faq-index-hint {
  margin: 0.75rem 0 0;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--c-steel);
}

@media (min-width: 1000px) {
  .page-faq .faq-index-list {
    display: block;
    overflow: visible;
    padding-bottom: 0;
  }

  .page-faq .faq-index-list li + li {
    margin-top: 0.28rem;
  }

  .page-faq .faq-index-list a {
    border-radius: var(--radius);
    padding: 0.5rem 0.6rem;
  }
}

/* ---------- 章节 ---------- */
.page-faq .faq-section {
  padding-top: clamp(1.6rem, 4vw, 2.5rem);
  scroll-margin-top: 6.5rem;
}

.page-faq .faq-section + .faq-section {
  border-top: 1px solid var(--c-line-soft);
}

.page-faq .faq-section .section-head {
  margin-bottom: 1.1rem;
}

.page-faq .faq-block {
  margin-top: 1rem;
}

.page-faq .faq-block-label {
  margin: 0 0 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--c-steel);
}

/* ---------- 编号步骤 ---------- */
.page-faq .faq-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--c-line-soft);
}

.page-faq .faq-step {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  gap: 0.8rem;
  padding: 0.85rem 0;
  border-bottom: 1px dashed var(--c-line-soft);
}

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

.page-faq .faq-step-num {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--c-cyan);
  padding-top: 0.18rem;
}

.page-faq .faq-step-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-bright);
}

.page-faq .faq-step-text {
  margin: 0.32rem 0 0;
  font-size: 0.94rem;
  line-height: 1.72;
  color: var(--c-text-dim);
}

.page-faq .faq-step-text a {
  color: var(--c-ice);
  text-decoration: none;
  border-bottom: 1px solid rgba(127, 212, 255, 0.45);
}

.page-faq .faq-step-text a:hover {
  color: var(--c-bright);
  border-bottom-color: var(--c-bright);
}

/* ---------- 图片 ---------- */
.page-faq .faq-figure {
  margin: 1.25rem 0 0;
}

.page-faq .faq-figure .figure-frame {
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border: 1px solid var(--c-line-soft);
}

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

/* ---------- 手风琴 ---------- */
.page-faq .faq-item {
  margin-top: 0.55rem;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius);
  background: var(--c-panel);
  overflow: hidden;
}

.page-faq .faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  cursor: pointer;
  list-style: none;
  color: var(--c-bright);
  font-size: 0.95rem;
  line-height: 1.55;
  transition: background var(--dur) var(--ease);
}

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

.page-faq .faq-item > summary:hover {
  background: var(--c-glass);
}

.page-faq .faq-item[open] > summary {
  background: var(--c-glass);
}

.page-faq .faq-q-mark {
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: -0.25rem;
  border-right: 2px solid var(--c-ice);
  border-bottom: 2px solid var(--c-ice);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}

.page-faq .faq-item[open] .faq-q-mark {
  transform: rotate(-135deg);
  margin-top: 0.25rem;
}

.page-faq .faq-a {
  padding: 0 1rem 0.95rem;
  color: var(--c-text-dim);
  font-size: 0.94rem;
  line-height: 1.78;
}

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

.page-faq .faq-a a {
  color: var(--c-ice);
  text-decoration: none;
  border-bottom: 1px solid rgba(127, 212, 255, 0.45);
}

.page-faq .faq-a a:hover {
  color: var(--c-bright);
}

/* ---------- 清单与信息单 ---------- */
.page-faq .faq-checklist {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .page-faq .faq-checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.page-faq .faq-checklist li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.93rem;
  line-height: 1.68;
  color: var(--c-text-dim);
}

.page-faq .faq-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--c-cyan);
  box-shadow: 0 0 0 3px rgba(33, 230, 193, 0.14);
}

.page-faq .faq-template {
  margin-top: 1.1rem;
  padding: 1rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(33, 230, 193, 0.08), transparent 62%), var(--c-panel);
}

.page-faq .faq-template-head {
  margin: 0 0 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.85rem;
  color: var(--c-text-dim);
}

.page-faq .faq-template-body {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.83rem;
  line-height: 1.9;
  color: var(--c-ice);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

/* ---------- 联系方式 ---------- */
.page-faq .faq-contact {
  margin-top: 1rem;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .page-faq .faq-contact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.page-faq .faq-contact-item {
  padding: 0.85rem 1rem;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius);
  background: var(--c-glass);
}

.page-faq .faq-contact-label {
  margin: 0 0 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.71rem;
  letter-spacing: 0.14em;
  color: var(--c-steel);
}

.page-faq .faq-contact-value {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--c-bright);
  word-break: break-all;
}

.page-faq .faq-contact-value--body {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.65;
}

.page-faq .faq-contact-actions {
  margin-top: 1.15rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

/* ---------- 窄屏 ---------- */
@media (max-width: 480px) {
  .page-faq .faq-step {
    grid-template-columns: 1.75rem minmax(0, 1fr);
    gap: 0.6rem;
  }

  .page-faq .faq-hero-chips .chip {
    font-size: 0.76rem;
  }

  .page-faq .faq-contact-value {
    font-size: 0.88rem;
    word-break: break-all;
  }
}
</final CSS>
<<<END>>>

等等，我犯了一个错误。输出格式本应在 `` 标记处结束，且不应包含 `<<<END>>>`。让我修正最后的输出。
<main id="main-content" class="page-faq">

  <div class="container">
    <nav class="breadcrumbs" aria-label="面包屑">
      <ol class="crumb-list">
        <li><a href="/">首页</a></li>
        <li><a href="/troubleshooting/" aria-current="page">问题排查</a></li>
      </ol>
    </nav>
  </div>

  <section class="faq-hero">
    <div class="container faq-hero-grid">
      <div class="faq-hero-copy">
        <p class="eyebrow">故障定位 · 快速自查</p>
        <h1>贝博打不开、赛事中心加载慢？先按这几类问题定位</h1>
        <p class="lede">版本、加载、显示、比分——赛事中心里最常遇到的几类异常，多数能在你自己的设备上几步之内判断出方向。下面按现象分成六段，每一段都给出可以直接照做的操作顺序，省下反复重装和干等的时间。</p>
        <ul class="faq-hero-chips">
          <li><span class="chip chip--warn">提示版本过旧</span></li>
          <li><span class="chip chip--warn">页面加载慢</span></li>
          <li><span class="chip chip--warn">小屏标签错乱</span></li>
          <li><span class="chip chip--warn">比分不刷新</span></li>
        </ul>
        <div class="faq-hero-actions">
          <a class="btn btn-ice" href="#s01">从版本问题开始</a>
          <a class="btn btn-line" href="/inquiry/">联系客服</a>
        </div>
      </div>

      <figure class="figure faq-hero-figure">
        <div class="figure-frame figure-frame--square">
          <img src="{zhanqunpic:h:800w:1000}" width="1000" height="800" alt="由节点、断点与连线组成的抽象排查路径图，冰蓝与荧光青线条在深色背景上分叉延伸" />
        </div>
        <figcaption class="figure-caption">从版本号出发，顺着节点逐个排除加载、显示与比分刷新问题</figcaption>
      </figure>
    </div>
  </section>

  <section class="faq-split" aria-labelledby="faq-split-title">
    <div class="container">
      <div class="faq-split-inner">
        <h2 id="faq-split-title" class="faq-split-title">先看现象，再看步骤</h2>
        <div class="tabs" data-tabs>
          <div class="tablist" role="tablist" aria-label="按现象快速定位">
            <button type="button" class="tab" role="tab" id="faq-tab-1" aria-controls="faq-panel-1" aria-selected="true" tabindex="0">打不开 / 提示更新</button>
            <button type="button" class="tab" role="tab" id="faq-tab-2" aria-controls="faq-panel-2" aria-selected="false" tabindex="-1">打开慢 / 转圈久</button>
            <button type="button" class="tab" role="tab" id="faq-tab-3" aria-controls="faq-panel-3" aria-selected="false" tabindex="-1">显示乱 / 标签重叠</button>
            <button type="button" class="tab" role="tab" id="faq-tab-4" aria-controls="faq-panel-4" aria-selected="false" tabindex="-1">比分长时间不动</button>
          </div>

          <div class="tabpanel" role="tabpanel" id="faq-panel-1" aria-labelledby="faq-tab-1" tabindex="0">
            <p>客户端起不来时，最值得先确认的只有一件事：设置里 V4 后面的那串数字。记下来，再决定要不要重新取安装包。</p>
            <a href="#s01">查看版本问题的处理顺序</a>
          </div>

          <div class="tabpanel" role="tabpanel" id="faq-panel-2" aria-labelledby="faq-tab-2" tabindex="0">
            <p>清一次缓存、换一次网络，两步就能排除掉大部分本地原因；如果只有比赛密集的时段变慢，那多半是并发高峰，而不是你的设备。</p>
            <a href="#s02">查看加载慢的四层排查</a>
          </div>

          <div class="tabpanel" role="tabpanel" id="faq-panel-3" aria-labelledby="faq-tab-3" tabindex="0">
            <p>窄屏上标签挤在一起，多数是页面没有按当前宽度重新排版。转动一次设备触发重排，往往当场就能恢复。</p>
            <a href="#s03">查看小屏显示的处理办法</a>
          </div>

          <div class="tabpanel" role="tabpanel" id="faq-panel-4" aria-labelledby="faq-tab-4" tabindex="0">
            <p>比分停着不动，先回“我的关注”看一眼地区设的是不是自己所在的省份，再考虑手动刷新。</p>
            <a href="#s04">查看比分刷新的检查项</a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <div class="container faq-workbench">

    <aside class="faq-index" aria-label="排查目录">
      <p class="faq-index-title">排查目录</p>
      <ol class="faq-index-list">
        <li><a href="#s01"><span class="faq-idx">01</span><span>客户端提示版本过旧</span></a></li>
        <li><a href="#s02"><span class="faq-idx">02</span><span>赛事中心加载慢</span></a></li>
        <li><a href="#s03"><span class="faq-idx">03</span><span>小屏分类标签错乱</span></a></li>
        <li><a href="#s04"><span class="faq-idx">04</span><span>本地实时比分不刷新</span></a></li>
        <li><a href="#s05"><span class="faq-idx">05</span><span>反馈时附上什么</span></a></li>
        <li><a href="#s06"><span class="faq-idx">06</span><span>仍然没有解决</span></a></li>
      </ol>
      <p class="faq-index-hint">遇到对应现象可以直接跳过去，按顺序做完再看下一段。</p>
    </aside>

    <div class="faq-body">

      <section class="section faq-section" id="s01">
        <div class="section-head">
          <span class="section-index">01</span>
          <h2 class="section-title">客户端提示版本过旧</h2>
          <p class="section-lede">一下载就打不开，或者刚进去就弹更新提示，通常说明安装包还停在较早的迭代上。这种状态下即使勉强进入，球员数据和比分面板也容易显示成旧的画面。</p>
        </div>

        <div class="faq-block">
          <h3 class="faq-block-label">操作顺序</h3>
          <ol class="faq-steps">
            <li class="faq-step">
              <span class="faq-step-num">01</span>
              <div class="faq-step-body">
                <p class="faq-step-title">先看清当前版本号</p>
                <p class="faq-step-text">在客户端的设置页打开“关于”，记下 V4 后面跟着的那串数字，后面几步都靠它来判断。</p>
              </div>
            </li>
            <li class="faq-step">
              <span class="faq-step-num">02</span>
              <div class="faq-step-body">
                <p class="faq-step-title">拿它去对照迭代记录</p>
                <p class="faq-step-text"><a href="/platform/">平台服务</a>里列出了 V4 更新通道的迭代说明，从 V4.0 一直到 V4.6，看看自己落后了几版。</p>
              </div>
            </li>
            <li class="faq-step">
              <span class="faq-step-num">03</span>
              <div class="faq-step-body">
                <p class="faq-step-title">从官方通道取新版安装包</p>
                <p class="faq-step-text">下载前先腾出足够的存储空间，并保持网络稳定，避免安装包下到一半中断。</p>
              </div>
            </li>
            <li class="faq-step">
              <span class="faq-step-num">04</span>
              <div class="faq-step-body">
                <p class="faq-step-title">装完逐块确认一遍</p>
                <p class="faq-step-text">重新打开赛事中心，依次查看球员数据、视频集锦和本地实时比分，确认三块内容都能正常显示。</p>
              </div>
            </li>
          </ol>
        </div>

        <details class="faq-item">
          <summary class="faq-q">
            <span>点了更新却一直没有反应</span>
            <span class="faq-q-mark" aria-hidden="true"></span>
          </summary>
          <div class="faq-a">
            <p>先把客户端完全关闭再重新打开，确认这台设备能正常访问其他网页。如果提示还停在那里，就直接回到设置页记下版本号，从官方通道取安装包覆盖安装，不必反复点更新按钮。</p>
          </div>
        </details>

        <details class="faq-item">
          <summary class="faq-q">
            <span>怎么知道手上的版本是不是最新一版</span>
            <span class="faq-q-mark" aria-hidden="true"></span>
          </summary>
          <div class="faq-a">
            <p>把“关于”里的版本号和更新通道最上面那条记录放在一起看就行。各次迭代的改动说明整理在<a href="/journal/">品牌日志</a>里，尤其加载性能相关的调整，翻一翻就能对上是哪一版带来的改善。</p>
          </div>
        </details>
      </section>

      <section class="section faq-section" id="s02">
        <div class="section-head">
          <span class="section-index">02</span>
          <h2 class="section-title">赛事中心加载慢</h2>
          <p class="section-lede">转圈很久才出来，或者只加载一半内容就卡住，原因通常只在这四层里。从离你最近的一层开始排除，多数情况前两步就能看清方向。</p>
        </div>

        <div class="faq-block">
          <h3 class="faq-block-label">按由近到远排</h3>
          <ol class="faq-steps">
            <li class="faq-step">
              <span class="faq-step-num">01</span>
              <div class="faq-step-body">
                <p class="faq-step-title">清一次缓存</p>
                <p class="faq-step-text">在设置里清除客户端缓存，然后重新进入赛事中心。旧的页面碎片积累久了，会让首屏明显变慢。</p>
              </div>
            </li>
            <li class="faq-step">
              <span class="faq-step-num">02</span>
              <div class="faq-step-body">
                <p class="faq-step-title">换一条网络</p>
                <p class="faq-step-text">在 Wi-Fi 和移动数据之间切换一次，排除单一网络出口的问题。这一条能解释掉不少“只有我打不开”的情况。</p>
              </div>
            </li>
            <li class="faq-step">
              <span class="faq-step-num">03</span>
              <div class="faq-step-body">
                <p class="faq-step-title">看版本有没有跟上</p>
                <p class="faq-step-text">最近一次大版本把移动端首屏的平均加载时间压低了 38%，但旧版本吃不到这次改进。版本落后的处理办法见第一段。</p>
              </div>
            </li>
            <li class="faq-step">
              <span class="faq-step-num">04</span>
              <div class="faq-step-body">
                <p class="faq-step-title">判断是不是碰上了高峰</p>
                <p class="faq-step-text">比赛密集时段大量用户同时刷新，打开速度会比平时慢一些。日常维护都安排在赛事低峰期，每月不超过 2 次，每次窗口不超过 45 分钟。</p>
              </div>
            </li>
          </ol>
        </div>

        <details class="faq-item">
          <summary class="faq-q">
            <span>页面上的数字多久动一次</span>
            <span class="faq-q-mark" aria-hidden="true"></span>
          </summary>
          <div class="faq-a">
            <p>比分和数据面板按分钟刷新一次，页面本身不需要你反复下拉。如果你的画面超过一两分钟毫无变化，先按第四段检查地区关注设成了哪里。</p>
          </div>
        </details>

        <details class="faq-item">
          <summary class="faq-q">
            <span>维护期间打开会看到什么</span>
            <span class="faq-q-mark" aria-hidden="true"></span>
          </summary>
          <div class="faq-a">
            <p>维护窗口放在低峰时段，期间个别板块可能短暂打不开。等窗口过去重新进入即可，之前收藏的常用页面和关注设置都会留着。</p>
          </div>
        </details>
      </section>

      <section class="section faq-section" id="s03">
        <div class="section-head">
          <span class="section-index">03</span>
          <h2 class="section-title">小屏设备上分类标签错乱</h2>
          <p class="section-lede">屏幕宽度在 320px 到 768px 之间时，分类标签如果互相压住或者挤成两行，多半是页面没有跟着当前宽度重新排一次版。</p>
        </div>

        <figure class="figure faq-figure">
          <div class="figure-frame figure-frame--wide">
            <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="冰面裂纹与横向刻度线组成的纹理，深蓝黑基调上延伸出冰蓝色细线" loading="lazy" decoding="async" />
          </div>
          <figcaption class="figure-caption">窄屏上的标签按单行排布，超出的部分交给横向滑动</figcaption>
        </figure>

        <div class="faq-block">
          <h3 class="faq-block-label">操作顺序</h3>
          <ol class="faq-steps">
            <li class="faq-step">
              <span class="faq-step-num">01</span>
              <div class="faq-step-body">
                <p class="faq-step-title">转动一次设备</p>
                <p class="faq-step-text">横竖屏切换一次，让页面按新的宽度重新算一遍布局，这是最省事的一步。</p>
              </div>
            </li>
            <li class="faq-step">
              <span class="faq-step-num">02</span>
              <div class="faq-step-body">
                <p class="faq-step-title">回到首页清缓存</p>
                <p class="faq-step-text">在设置里清除缓存，把可能残留的旧样式一起清掉。</p>
              </div>
            </li>
            <li class="faq-step">
              <span class="faq-step-num">03</span>
              <div class="faq-step-body">
                <p class="faq-step-title">重新进入赛事中心</p>
                <p class="faq-step-text">看分类标签有没有恢复成整齐的一行，超出的栏目名能不能靠横向滑动看到。</p>
              </div>
            </li>
            <li class="faq-step">
              <span class="faq-step-num">04</span>
              <div class="faq-step-body">
                <p class="faq-step-title">还是乱的就把信息留好</p>
                <p class="faq-step-text">记下设备型号和系统版本，截一张完整页面图，按第五段列的清单发给我们。</p>
              </div>
            </li>
          </ol>
        </div>

        <details class="faq-item">
          <summary class="faq-q">
            <span>标签为什么不做成换行显示</span>
            <span class="faq-q-mark" aria-hidden="true"></span>
          </summary>
          <div class="faq-a">
            <p>窄屏上把分类标签固定为单行、用横向滑动查看剩余部分，能保证一眼看清有多少个栏目，也不会把正文挤到屏幕外面去。导航栏用的是同一套做法。</p>
          </div>
        </details>

        <details class="faq-item">
          <summary class="faq-q">
            <span>顶部的快捷条会不会挡住内容</span>
            <span class="faq-q-mark" aria-hidden="true"></span>
          </summary>
          <div class="faq-a">
            <p>快捷条吸附在页面顶部，正文在它下方滚动，阅读顺序不受影响。如果你觉得它太高，横屏下会自动收窄一些。</p>
          </div>
        </details>
      </section>

      <section class="section faq-section" id="s04">
        <div class="section-head">
          <span class="section-index">04</span>
          <h2 class="section-title">本地实时比分不刷新</h2>
          <p class="section-lede">盯的那场比赛一直停在旧数字上，先确认地区关注设对了没有，再看这场赛事在不在你的列表里，最后才轮到刷新方式。</p>
        </div>

        <div class="faq-block">
          <h3 class="faq-block-label">操作顺序</h3>
          <ol class="faq-steps">
            <li class="faq-step">
              <span class="faq-step-num">01</span>
              <div class="faq-step-body">
                <p class="faq-step-title">检查地区关注</p>
                <p class="faq-step-text">在“我的关注”里把地区设成自己实际所在的省份。目前支持 31 个省级地区的偏好设置，设对了，面板才会优先推你身边的赛事。</p>
              </div>
            </li>
            <li class="faq-step">
              <span class="faq-step-num">02</span>
              <div class="faq-step-body">
                <p class="faq-step-title">看看联赛和球队选没选</p>
                <p class="faq-step-text">没有加进关注列表的赛事不会出现在比分面板上，这一点最容易被忽略。</p>
              </div>
            </li>
            <li class="faq-step">
              <span class="faq-step-num">03</span>
              <div class="faq-step-body">
                <p class="faq-step-title">触发一次完整刷新</p>
                <p class="faq-step-text">切换网络，或者退出赛事中心再重新进入，让面板整体重新加载一遍。</p>
              </div>
            </li>
            <li class="faq-step">
              <span class="faq-step-num">04</span>
              <div class="faq-step-body">
                <p class="faq-step-title">横向比一比别的板块</p>
                <p class="faq-step-text">如果只有某一场不动，看看同一时间段的视频集锦和球员数据有没有更新，能帮你分清是个别赛事的问题还是整体的问题。</p>
              </div>
            </li>
          </ol>
        </div>

        <details class="faq-item">
          <summary class="faq-q">
            <span>比分和战报对不上</span>
            <span class="faq-q-mark" aria-hidden="true"></span>
          </summary>
          <div class="faq-a">
            <p>比分面板按分钟刷新，战报要等比赛进程走完再整理发布，发布前还会经过两次内容校对，所以刚结束的比赛，战报会比比分晚一点出现。刷新一次页面再看。</p>
          </div>
        </details>

        <details class="faq-item">
          <summary class="faq-q">
            <span>关注列表能不能随时改</span>
            <span class="faq-q-mark" aria-hidden="true"></span>
          </summary>
          <div class="faq-a">
            <p>地区、联赛、球队三个维度都可以随时增删。改完之后重新进入赛事中心，比分面板会按新的列表重新组织内容。</p>
          </div>
        </details>
      </section>

      <section class="section faq-section" id="s05">
        <div class="section-head">
          <span class="section-index">05</span>
          <h2 class="section-title">反馈时需要附上什么</h2>
          <p class="section-lede">一次把下面几项写清楚，就能少一轮来回追问，让问题更快落到具体的那一层：是版本、网络，还是显示。</p>
        </div>

        <ul class="faq-checklist">
          <li>设备型号，例如手机或平板的完整名称</li>
          <li>系统版本号</li>
          <li>客户端版本号，也就是 V4 开头的那一串</li>
          <li>出问题的页面，比如球员数据、视频集锦或本地实时比分</li>
          <li>问题描述，尽量写清是哪一步开始不对</li>
          <li>问题发生的时间，越具体越好</li>
          <li>一张完整页面截图，必要时再补一段录屏</li>
        </ul>

        <div class="faq-template">
          <p class="faq-template-head"><span class="chip chip--ok">照着填</span> 把下面这段抄进反馈里，逐项补齐</p>
          <pre class="faq-template-body">设备型号：
系统版本：
客户端版本：V4.
出问题页面：球员数据 / 视频集锦 / 本地实时比分
问题描述：
发生时间：
截图或录屏：</pre>
        </div>

        <details class="faq-item">
          <summary class="faq-q">
            <span>版本号在哪里能看到</span>
            <span class="faq-q-mark" aria-hidden="true"></span>
          </summary>
          <div class="faq-a">
            <p>设置页的“关于”里同时能看到客户端版本和系统版本，截图时把整屏一起拍下来，比只截一小块更有用。</p>
          </div>
        </details>
      </section>

      <section class="section faq-section" id="s06">
        <div class="section-head">
          <span class="section-index">06</span>
          <h2 class="section-title">上面都试过还是不行</h2>
          <p class="section-lede">把整理好的信息发过来，工作日的 9:00 到 18:00 有专人处理版本咨询和页面反馈，通常会先回你一个更具体的下一步。</p>
        </div>

        <div class="faq-contact">
          <div class="faq-contact-item">
            <p class="faq-contact-label">客服邮箱</p>
            <p class="faq-contact-value">service@beibo-champion.com.cn</p>
          </div>
          <div class="faq-contact-item">
            <p class="faq-contact-label">咨询电话</p>
            <p class="faq-contact-value">13838130623</p>
          </div>
          <div class="faq-contact-item">
            <p class="faq-contact-label">服务时间</p>
            <p class="faq-contact-value">工作日 9:00 - 18:00</p>
          </div>
          <div class="faq-contact-item">
            <p class="faq-contact-label">通信地址</p>
            <p class="faq-contact-value faq-contact-value--body">黑龙江省哈尔滨市松北区创新三路600号科技大厦A座12层</p>
          </div>
        </div>

        <div class="faq-contact-actions">
          <a class="btn btn-ice" href="/inquiry/">前往咨询通道</a>
          <a class="btn btn-line" href="/platform/">回到平台服务</a>
        </div>
      </section>

    </div>
  </div>

</main>

.page-faq {
  --faq-index-w: 258px;
  color: var(--c-text);
  padding-bottom: clamp(3rem, 8vw, 6rem);
  overflow-x: clip;
}

/* ---------- 页头 ---------- */
.page-faq .faq-hero {
  padding: clamp(1.25rem, 3vw, 2rem) 0 clamp(1.5rem, 4vw, 2.25rem);
}

.page-faq .faq-hero-grid {
  display: grid;
  gap: clamp(1.5rem, 5vw, 3rem);
  align-items: center;
}

@media (min-width: 900px) {
  .page-faq .faq-hero-grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: clamp(2rem, 5vw, 4rem);
  }
}

.page-faq .faq-hero-copy {
  position: relative;
  padding-top: 1.4rem;
}

.page-faq .faq-hero-copy::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: min(9rem, 42%);
  height: 2px;
  background: linear-gradient(90deg, var(--c-orange), var(--c-cyan) 62%, transparent);
}

.page-faq .faq-hero h1 {
  margin: 0.55rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.6vw, 3.5rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: 0.005em;
  color: var(--c-bright);
}

.page-faq .faq-hero .lede {
  margin: 1rem 0 0;
  max-width: 48ch;
  font-size: clamp(1rem, 1.6vw, 1.06rem);
  line-height: 1.78;
  color: var(--c-text-dim);
}

.page-faq .faq-hero-chips {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.page-faq .faq-hero-actions {
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.page-faq .faq-hero-figure {
  margin: 0;
  position: relative;
}

.page-faq .faq-hero-figure .figure-frame {
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border: 1px solid var(--c-line);
  box-shadow: 0 24px 60px -32px rgba(33, 230, 193, 0.45);
}

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

/* ---------- 现象分流 ---------- */
.page-faq .faq-split {
  margin-top: clamp(1.25rem, 3.5vw, 2rem);
}

.page-faq .faq-split-inner {
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(127, 212, 255, 0.09), transparent 72%), var(--c-panel);
  padding: clamp(0.9rem, 2.5vw, 1.3rem);
}

.page-faq .faq-split-title {
  margin: 0 0 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--c-steel);
}

.page-faq .faq-split .tablist {
  display: flex;
  gap: 0.45rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
  scrollbar-width: thin;
}

.page-faq .faq-split .tab {
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 0.48rem 0.95rem;
  border: 1px solid var(--c-line-soft);
  border-radius: 999px;
  background: transparent;
  color: var(--c-text-dim);
  cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-faq .faq-split .tab:hover {
  color: var(--c-bright);
  border-color: var(--c-line);
}

.page-faq .faq-split .tab[aria-selected="true"] {
  color: var(--c-void);
  background: var(--c-ice);
  border-color: var(--c-ice);
  font-weight: 600;
}

.page-faq .faq-split .tabpanel {
  margin-top: 0.9rem;
  display: grid;
  gap: 0.6rem;
  padding: 0;
  border: 0;
  background: none;
}

.page-faq .faq-split .tabpanel p {
  margin: 0;
  max-width: 62ch;
  color: var(--c-text-dim);
  line-height: 1.75;
  font-size: 0.95rem;
}

.page-faq .faq-split .tabpanel a {
  justify-self: start;
  color: var(--c-cyan);
  font-size: 0.88rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(33, 230, 193, 0.5);
  padding-bottom: 0.1rem;
}

.page-faq .faq-split .tabpanel a:hover {
  color: var(--c-bright);
  border-bottom-color: var(--c-bright);
}

/* ---------- 工作台 ---------- */
.page-faq .faq-workbench {
  display: grid;
  gap: clamp(1.4rem, 4vw, 2.75rem);
  margin-top: clamp(2rem, 5vw, 3.25rem);
  align-items: start;
}

@media (min-width: 1000px) {
  .page-faq .faq-workbench {
    grid-template-columns: var(--faq-index-w) minmax(0, 1fr);
  }
}

.page-faq .faq-index {
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius);
  background: var(--c-panel);
  padding: 0.9rem 1rem 1rem;
}

@media (min-width: 1000px) {
  .page-faq .faq-index {
    position: sticky;
    top: 6rem;
    background: linear-gradient(180deg, rgba(127, 212, 255, 0.1), transparent 68%), var(--c-panel);
  }
}

.page-faq .faq-index-title {
  margin: 0 0 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--c-steel);
}

.page-faq .faq-index-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0.3rem;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

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

.page-faq .faq-index-list a {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--c-line-soft);
  border-radius: 999px;
  color: var(--c-text-dim);
  text-decoration: none;
  font-size: 0.86rem;
  white-space: nowrap;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-faq .faq-index-list a:hover {
  color: var(--c-bright);
  border-color: var(--c-line);
  background: var(--c-glass);
}

.page-faq .faq-idx {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--c-ice);
}

.page-faq .faq-index-hint {
  margin: 0.75rem 0 0;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--c-steel);
}

@media (min-width: 1000px) {
  .page-faq .faq-index-list {
    display: block;
    overflow: visible;
    padding-bottom: 0;
  }

  .page-faq .faq-index-list li + li {
    margin-top: 0.28rem;
  }

  .page-faq .faq-index-list a {
    border-radius: var(--radius);
    padding: 0.5rem 0.6rem;
  }
}

/* ---------- 章节 ---------- */
.page-faq .faq-section {
  padding-top: clamp(1.6rem, 4vw, 2.5rem);
  scroll-margin-top: 6.5rem;
}

.page-faq .faq-section + .faq-section {
  border-top: 1px solid var(--c-line-soft);
}

.page-faq .faq-section .section-head {
  margin-bottom: 1.1rem;
}

.page-faq .faq-block {
  margin-top: 1rem;
}

.page-faq .faq-block-label {
  margin: 0 0 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--c-steel);
}

/* ---------- 编号步骤 ---------- */
.page-faq .faq-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--c-line-soft);
}

.page-faq .faq-step {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  gap: 0.8rem;
  padding: 0.85rem 0;
  border-bottom: 1px dashed var(--c-line-soft);
}

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

.page-faq .faq-step-num {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--c-cyan);
  padding-top: 0.18rem;
}

.page-faq .faq-step-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-bright);
}

.page-faq .faq-step-text {
  margin: 0.32rem 0 0;
  font-size: 0.94rem;
  line-height: 1.72;
  color: var(--c-text-dim);
}

.page-faq .faq-step-text a {
  color: var(--c-ice);
  text-decoration: none;
  border-bottom: 1px solid rgba(127, 212, 255, 0.45);
}

.page-faq .faq-step-text a:hover {
  color: var(--c-bright);
  border-bottom-color: var(--c-bright);
}

/* ---------- 图片 ---------- */
.page-faq .faq-figure {
  margin: 1.25rem 0 0;
}

.page-faq .faq-figure .figure-frame {
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border: 1px solid var(--c-line-soft);
}

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

/* ---------- 手风琴 ---------- */
.page-faq .faq-item {
  margin-top: 0.55rem;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius);
  background: var(--c-panel);
  overflow: hidden;
}

.page-faq .faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  cursor: pointer;
  list-style: none;
  color: var(--c-bright);
  font-size: 0.95rem;
  line-height: 1.55;
  transition: background var(--dur) var(--ease);
}

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

.page-faq .faq-item > summary:hover {
  background: var(--c-glass);
}

.page-faq .faq-item[open] > summary {
  background: var(--c-glass);
}

.page-faq .faq-q-mark {
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: -0.25rem;
  border-right: 2px solid var(--c-ice);
  border-bottom: 2px solid var(--c-ice);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}

.page-faq .faq-item[open] .faq-q-mark {
  transform: rotate(-135deg);
  margin-top: 0.25rem;
}

.page-faq .faq-a {
  padding: 0 1rem 0.95rem;
  color: var(--c-text-dim);
  font-size: 0.94rem;
  line-height: 1.78;
}

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

.page-faq .faq-a a {
  color: var(--c-ice);
  text-decoration: none;
  border-bottom: 1px solid rgba(127, 212, 255, 0.45);
}

.page-faq .faq-a a:hover {
  color: var(--c-bright);
}

/* ---------- 清单与信息单 ---------- */
.page-faq .faq-checklist {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .page-faq .faq-checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.page-faq .faq-checklist li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.93rem;
  line-height: 1.68;
  color: var(--c-text-dim);
}

.page-faq .faq-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--c-cyan);
  box-shadow: 0 0 0 3px rgba(33, 230, 193, 0.14);
}

.page-faq .faq-template {
  margin-top: 1.1rem;
  padding: 1rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(33, 230, 193, 0.08), transparent 62%), var(--c-panel);
}

.page-faq .faq-template-head {
  margin: 0 0 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.85rem;
  color: var(--c-text-dim);
}

.page-faq .faq-template-body {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.83rem;
  line-height: 1.9;
  color: var(--c-ice);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

/* ---------- 联系方式 ---------- */
.page-faq .faq-contact {
  margin-top: 1rem;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .page-faq .faq-contact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.page-faq .faq-contact-item {
  padding: 0.85rem 1rem;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius);
  background: var(--c-glass);
}

.page-faq .faq-contact-label {
  margin: 0 0 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.71rem;
  letter-spacing: 0.14em;
  color: var(--c-steel);
}

.page-faq .faq-contact-value {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--c-bright);
  word-break: break-all;
}

.page-faq .faq-contact-value--body {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.65;
}

.page-faq .faq-contact-actions {
  margin-top: 1.15rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

/* ---------- 窄屏 ---------- */
@media (max-width: 480px) {
  .page-faq .faq-step {
    grid-template-columns: 1.75rem minmax(0, 1fr);
    gap: 0.6rem;
  }

  .page-faq .faq-hero-chips .chip {
    font-size: 0.76rem;
  }

  .page-faq .faq-contact-value {
    font-size: 0.88rem;
  }
}