.page-faq {
  --faq-accent: var(--lime);
  background: var(--carbon);
  color: var(--chalk);
  padding-bottom: 96px;
  overflow-x: hidden;
}

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

.page-faq .faq-hero {
  padding-top: 24px;
}

.page-faq .faq-hero .bb-label {
  display: block;
  margin-top: 28px;
}

.page-faq .faq-hero__title {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 7vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  max-width: min(100%, 820px);
  text-wrap: balance;
}

.page-faq .faq-hero__lead {
  margin: 24px 0 0;
  max-width: 34em;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.75;
  color: rgba(241, 238, 227, 0.78);
}

.page-faq .faq-hero__figure {
  margin: 40px 0 0;
}

.page-faq .faq-hero__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border: 2px solid var(--line-strong);
  box-shadow: var(--shadow-deep);
  background: var(--ink);
}

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

/* ---------- 高频三问 ---------- */

.page-faq .faq-quick {
  padding-top: 72px;
}

.page-faq .faq-quick__grid {
  display: grid;
  gap: 16px;
  margin-top: 32px;
}

.page-faq .faq-quick__item {
  padding: 24px 20px 28px;
  background: var(--ink);
  border: 1px solid var(--line-soft);
  border-top: 4px solid var(--faq-accent);
}

.page-faq .faq-quick__item:nth-child(1) {
  --faq-accent: var(--lime);
}

.page-faq .faq-quick__item:nth-child(2) {
  --faq-accent: var(--amber);
}

.page-faq .faq-quick__item:nth-child(3) {
  --faq-accent: var(--clay);
}

.page-faq .faq-quick__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--faq-accent);
  font-variant-numeric: tabular-nums;
}

.page-faq .faq-quick__title {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--chalk);
}

.page-faq .faq-quick__body {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(241, 238, 227, 0.74);
}

.page-faq .faq-quick__link {
  margin-top: 20px;
  font-size: 13px;
}

/* ---------- 主体：索引 + 问答列 ---------- */

.page-faq .faq-main {
  padding-top: 80px;
}

.page-faq .faq-main .bb-section__head {
  margin-bottom: 24px;
}

.page-faq .faq-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
}

.page-faq .faq-jump__link {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  color: var(--chalk);
  font-size: 13px;
  line-height: 1.2;
  text-decoration: none;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.page-faq .faq-jump__link:hover,
.page-faq .faq-jump__link:focus-visible {
  border-color: var(--lime);
  color: var(--lime);
  background: var(--lime-ghost);
}

.page-faq .faq-layout {
  display: block;
}

.page-faq .faq-side,
.page-faq .faq-rail {
  display: none;
}

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

/* ---------- 分组 ---------- */

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

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

.page-faq #grp-access {
  --faq-accent: var(--lime);
}

.page-faq #grp-data {
  --faq-accent: var(--amber);
}

.page-faq #grp-board {
  --faq-accent: var(--clay);
}

.page-faq #grp-device {
  --faq-accent: var(--mist);
}

.page-faq .faq-group__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 2px solid var(--faq-accent);
}

.page-faq .faq-group__no {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faq-accent);
  white-space: nowrap;
}

.page-faq .faq-group__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.25rem, 5vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* ---------- 问答条目 ---------- */

.page-faq .faq-item {
  border-bottom: 1px solid var(--line-soft);
  transition: background-color 0.25s var(--ease);
}

.page-faq .faq-item[open] {
  background: var(--ink);
}

.page-faq .faq-item__q {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 14px;
  column-gap: 10px;
  align-items: start;
  padding: 18px 12px;
  cursor: pointer;
  list-style: none;
}

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

.page-faq .faq-item__q:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: -2px;
}

.page-faq .faq-item__idx {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  padding-top: 3px;
  color: var(--faq-accent);
  font-variant-numeric: tabular-nums;
}

.page-faq .faq-item__text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--chalk);
  transition: color 0.2s var(--ease);
}

.page-faq .faq-item__q:hover .faq-item__text {
  color: var(--lime);
}

.page-faq .faq-item__arrow {
  justify-self: end;
  width: 9px;
  height: 9px;
  margin-top: 7px;
  border-right: 2px solid var(--mist);
  border-bottom: 2px solid var(--mist);
  transform: rotate(45deg);
  transition: transform 0.22s var(--ease), border-color 0.22s var(--ease);
}

.page-faq .faq-item[open] .faq-item__arrow {
  transform: rotate(135deg);
  border-color: var(--lime);
}

.page-faq .faq-item__a {
  padding: 0 20px 20px 52px;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(241, 238, 227, 0.76);
}

.page-faq .faq-item__a p {
  margin: 0;
  max-width: 34em;
}

.page-faq .faq-item__a a {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 终端配图 ---------- */

.page-faq .faq-device {
  margin: 28px 0 0;
  padding: 12px;
  border: 1px solid var(--line-soft);
  background: var(--ink);
}

.page-faq .faq-device img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border: 1px solid var(--line-soft);
}

.page-faq .faq-device figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--mist);
}

/* ---------- 联系区块 ---------- */

.page-faq .faq-help {
  padding-top: 88px;
}

.page-faq .faq-help__panel {
  padding: 32px 20px;
  border: 2px solid var(--line-strong);
  background: var(--ink);
  box-shadow: var(--shadow-deep);
}

.page-faq .faq-help__title {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 5vw, 2.25rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
}

.page-faq .faq-help__lead {
  margin: 16px 0 0;
  max-width: 34em;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(241, 238, 227, 0.76);
}

.page-faq .faq-help__channels {
  display: grid;
  gap: 20px;
  margin-top: 28px;
}

.page-faq .faq-help__channel {
  padding: 4px 0 4px 16px;
  border-left: 3px solid var(--lime);
}

.page-faq .faq-help__channel:nth-child(2) {
  border-left-color: var(--amber);
}

.page-faq .faq-help__value {
  margin: 8px 0 6px;
  font-family: var(--font-mono);
  font-size: clamp(15px, 3.6vw, 19px);
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--chalk);
  word-break: break-all;
  font-variant-numeric: tabular-nums;
}

.page-faq .faq-help__meta {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--mist);
}

.page-faq .faq-help__foot {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.page-faq .faq-help__tip {
  flex: 1 1 240px;
  margin: 0;
  max-width: 34em;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(241, 238, 227, 0.76);
}

.page-faq .faq-help__tip a {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 断点 ---------- */

@media (min-width: 600px) {
  .page-faq .faq-item__q {
    grid-template-columns: 34px minmax(0, 1fr) 16px;
    column-gap: 14px;
    padding: 22px 16px;
  }

  .page-faq .faq-item__a {
    padding: 0 28px 24px 64px;
  }
}

@media (min-width: 720px) {
  .page-faq .faq-hero__frame {
    aspect-ratio: 8 / 3;
  }

  .page-faq .faq-help__panel {
    padding: 40px 36px;
  }
}

@media (min-width: 820px) {
  .page-faq .faq-quick__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  .page-faq .faq-help__channels {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

@media (min-width: 1024px) {
  .page-faq {
    padding-bottom: 128px;
  }

  .page-faq .faq-hero {
    padding-top: 32px;
  }

  .page-faq .faq-layout {
    display: grid;
    grid-template-columns: 152px minmax(0, 720px) minmax(0, 1fr);
    column-gap: 40px;
    align-items: start;
  }

  .page-faq .faq-jump {
    display: none;
  }

  .page-faq .faq-side {
    display: block;
    position: sticky;
    top: calc(var(--bar-h) + 24px);
  }

  .page-faq .faq-side__list {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
  }

  .page-faq .faq-side__link {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 12px 0 12px 14px;
    border-left: 2px solid var(--line-soft);
    color: var(--mist);
    font-size: 13px;
    line-height: 1.4;
    text-decoration: none;
    transition: color 0.2s var(--ease), border-left-color 0.2s var(--ease);
  }

  .page-faq .faq-side__link:hover,
  .page-faq .faq-side__link:focus-visible {
    color: var(--lime);
    border-left-color: var(--lime);
  }

  .page-faq .faq-side__no {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--faq-accent);
  }

  .page-faq .faq-rail {
    display: block;
    position: sticky;
    top: calc(var(--bar-h) + 24px);
    height: 320px;
    min-height: 200px;
  }

  .page-faq .faq-rail::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 1px;
    background: var(--line-soft);
  }

  .page-faq .faq-rail::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 13px;
    background-image: repeating-linear-gradient(
      to bottom,
      var(--moss) 0,
      var(--moss) 1px,
      transparent 1px,
      transparent 32px
    );
  }

  .page-faq .faq-help__panel {
    padding: 56px 48px;
  }
}
</main>
<<<END>>>

等一下，我需要检查一下输出格式。要求的标记顺序是：


...main .page-faq...

...css...

我不应该在 main_html 后面写 `</main>`——main 应该在我写的内容里就闭合了。让我重新仔细写一遍。

另外还有一件事：在 `.page-faq .faq-side__no` 里我用了 `var(--faq-accent)`，但它在 aside 里，而 aside 不是某个分组的子元素，所以会回退到 `.page-faq` 上定义的默认值 `lime`。没问题。

还有 `var(--shadow-deep)` 和 `var(--shadow-hard)` 是存在的。对。

现在再仔细检查一下 `bb-btn--ghost`——它是在全局类列表里的。好。

还有一个顾虑：`bb-btn` 加上 `bb-btn--ghost` 配合 `faq-quick__link` 的 margin-top——按钮的默认样式可能会让它在行内块布局下上下偏移。用 `display: inline-block` 加 `margin-top` 在行内块元素上是没问题的。不过它是放在 `<p>` 后面。应该可以。

我再最后确认一下整个结构。

另外，`bb-crumbs` 这个导航是放在 header 里的——没问题，它只是页面级的面包屑，不是站点页头。

接下来我重新完整地输出一遍。
<main id="main-content" class="page-faq">

  <header class="faq-hero">
    <div class="bb-shell">
      <nav class="bb-crumbs" aria-label="面包屑导航">
        <ol class="bb-crumbs__list">
          <li class="bb-crumbs__item"><a href="/">首页</a></li>
          <li class="bb-crumbs__item"><a href="/answers/" aria-current="page">答疑中心</a></li>
        </ol>
      </nav>

      <p class="bb-label">答疑中心 · ANSWERS</p>
      <h1 class="faq-hero__title">打不开、对不上、导不出，先在这儿找答案</h1>
      <p class="faq-hero__lead">必博体育日常使用中最常卡住的十四处地方，按访问、数据、导出、终端四组排开。多数问题照着两步就能自己处理掉，剩下那些确实要人看的，也有明确的联系人和该准备的材料。</p>

      <figure class="faq-hero__figure">
        <div class="faq-hero__frame">
          <img src="{zhanqunpic:h:600w:1600}" width="1600" height="600" alt="暗色界面上放大的镂空问号轮廓，一条青柠色细线斜穿画面，背景衬着淡色数据条">
        </div>
      </figure>
    </div>
  </header>

  <section class="faq-quick" aria-labelledby="quick-title" data-reveal>
    <div class="bb-shell">
      <div class="bb-section__head">
        <h2 class="bb-h2" id="quick-title">三种情况，先看这里</h2>
        <span class="bb-label">高频 / TOP 3</span>
      </div>

      <div class="faq-quick__grid">
        <article class="faq-quick__item">
          <span class="faq-quick__num bb-num">01</span>
          <h3 class="faq-quick__title">怎么确认进的是正式入口</h3>
          <p class="faq-quick__body">看两处就够：地址栏是否为 bibo-h5.com.cn，页头右上方是否标着「新版入口 V2.0」。两边都对上，说明你打开的就是正式页面，可以直接进赛事列表。</p>
        </article>

        <article class="faq-quick__item">
          <span class="faq-quick__num bb-num">02</span>
          <h3 class="faq-quick__title">名单和统计什么时候更新</h3>
          <p class="faq-quick__body">开赛前十分钟换上双方首发与替补，临时的阵容调整一般在 60 秒内反映到赛事页。比分、射门这类事件跟着比赛节奏走，事件录入后页面上的数值会随之变化。</p>
        </article>

        <article class="faq-quick__item">
          <span class="faq-quick__num bb-num">03</span>
          <h3 class="faq-quick__title">积分榜对比结果怎么导出</h3>
          <p class="faq-quick__body">在对比工具里选好球队和筛选维度，点导出即可，CSV 与 XLSX 两种格式都支持，单次上限 5,000 行。做赛季复盘按轮次分批导，比一次拉全季更省事。</p>
          <a class="bb-btn bb-btn--ghost faq-quick__link" href="/services/">打开数据服务与工具</a>
        </article>
      </div>
    </div>
  </section>

  <section class="faq-main" id="faq-all" aria-labelledby="faq-all-title">
    <div class="bb-shell">
      <div class="bb-section__head">
        <h2 class="bb-h2" id="faq-all-title">全部问题，按场景分组</h2>
        <span class="bb-label">14 条 / 4 组</span>
      </div>

      <nav class="faq-jump" aria-label="跳转到问题分组">
        <a class="faq-jump__link" href="#grp-access">访问与入口</a>
        <a class="faq-jump__link" href="#grp-data">数据与阵容</a>
        <a class="faq-jump__link" href="#grp-board">积分榜与导出</a>
        <a class="faq-jump__link" href="#grp-device">终端与显示</a>
      </nav>

      <div class="faq-layout">
        <aside class="faq-side">
          <p class="bb-label">问题分组</p>
          <ul class="faq-side__list">
            <li><a class="faq-side__link" href="#grp-access"><span class="faq-side__no">A</span>访问与入口</a></li>
            <li><a class="faq-side__link" href="#grp-data"><span class="faq-side__no">B</span>数据与阵容</a></li>
            <li><a class="faq-side__link" href="#grp-board"><span class="faq-side__no">C</span>积分榜与导出</a></li>
            <li><a class="faq-side__link" href="#grp-device"><span class="faq-side__no">D</span>终端与显示</a></li>
          </ul>
        </aside>

        <div class="faq-col">

          <section class="faq-group" id="grp-access" aria-labelledby="grp-access-title" data-reveal>
            <div class="faq-group__head">
              <span class="faq-group__no">GROUP A</span>
              <h3 class="faq-group__title" id="grp-access-title">访问与入口</h3>
            </div>

            <div class="faq-list">
              <details class="faq-item">
                <summary class="faq-item__q">
                  <span class="faq-item__idx">01</span>
                  <span class="faq-item__text">页面打不开或一直转圈，先查哪几处？</span>
                  <span class="faq-item__arrow" aria-hidden="true"></span>
                </summary>
                <div class="faq-item__a">
                  <p>先看地址栏是不是 bibo-h5.com.cn，再刷新一次；还不行就清掉浏览器缓存重新打开。多数打不开的情况出在本地网络或旧缓存上，换一个浏览器试一次，通常就能分清是哪一头的问题。</p>
                </div>
              </details>

              <details class="faq-item">
                <summary class="faq-item__q">
                  <span class="faq-item__idx">02</span>
                  <span class="faq-item__text">怎么确认自己打开的是正式页面？</span>
                  <span class="faq-item__arrow" aria-hidden="true"></span>
                </summary>
                <div class="faq-item__a">
                  <p>看两处：域名是否与常用地址一致，页头右上角是否显示「新版入口 V2.0」。两处都对得上，说明你进的就是正式入口，赛事列表、积分榜和订阅提醒都在同一套数据里。</p>
                </div>
              </details>

              <details class="faq-item">
                <summary class="faq-item__q">
                  <span class="faq-item__idx">03</span>
                  <span class="faq-item__text">提示版本太旧，该怎么处理？</span>
                  <span class="faq-item__arrow" aria-hidden="true"></span>
                </summary>
                <div class="faq-item__a">
                  <p>做一次强制刷新：电脑上按 Ctrl+F5，手机用浏览器菜单里的刷新按钮。旧版本缓存清掉之后，V2.0 的页面会重新加载，入口位置也回到正常状态。</p>
                </div>
              </details>

              <details class="faq-item">
                <summary class="faq-item__q">
                  <span class="faq-item__idx">04</span>
                  <span class="faq-item__text">换手机或换电脑，要记不同的地址吗？</span>
                  <span class="faq-item__arrow" aria-hidden="true"></span>
                </summary>
                <div class="faq-item__a">
                  <p>不用。网页端和移动端 H5 打开的是同一套赛事数据，记住一个域名就够。把首页存进常用浏览器的收藏夹，之后从收藏进来看到的列表完全一样。</p>
                </div>
              </details>
            </div>
          </section>

          <section class="faq-group" id="grp-data" aria-labelledby="grp-data-title" data-reveal>
            <div class="faq-group__head">
              <span class="faq-group__no">GROUP B</span>
              <h3 class="faq-group__title" id="grp-data-title">数据与阵容</h3>
            </div>

            <div class="faq-list">
              <details class="faq-item">
                <summary class="faq-item__q">
                  <span class="faq-item__idx">05</span>
                  <span class="faq-item__text">一场比赛能看到哪些技术统计？</span>
                  <span class="faq-item__arrow" aria-hidden="true"></span>
                </summary>
                <div class="faq-item__a">
                  <p>实时战报、射门统计、控球与传球区间等 18 项技术统计。数据跟着比赛节奏推进，进球、换人这类事件录入进去之后，页面上对应的数值会跟着变化。</p>
                </div>
              </details>

              <details class="faq-item">
                <summary class="faq-item__q">
                  <span class="faq-item__idx">06</span>
                  <span class="faq-item__text">首发阵容什么时候能查到？</span>
                  <span class="faq-item__arrow" aria-hidden="true"></span>
                </summary>
                <div class="faq-item__a">
                  <p>开赛前十分钟更新双方首发与替补名单。临时调整一般在 60 秒内同步到赛事页，所以临开赛前再刷一次，看到的名单最接近最终结果。</p>
                </div>
              </details>

              <details class="faq-item">
                <summary class="faq-item__q">
                  <span class="faq-item__idx">07</span>
                  <span class="faq-item__text">我看到的比分和别处不一样，先做什么？</span>
                  <span class="faq-item__arrow" aria-hidden="true"></span>
                </summary>
                <div class="faq-item__a">
                  <p>先刷新页面，再看事件时间线里对应的那个时间点是否已经录入。异常事件会转给编辑组人工确认，确认后的结果会替换掉原来的数值，整场结束后再回看一遍最稳妥。</p>
                </div>
              </details>

              <details class="faq-item">
                <summary class="faq-item__q">
                  <span class="faq-item__idx">08</span>
                  <span class="faq-item__text">冷门联赛也能查到数据吗？</span>
                  <span class="faq-item__arrow" aria-hidden="true"></span>
                </summary>
                <div class="faq-item__a">
                  <p>覆盖 32 个联赛与杯赛，单赛季录入赛事 4,800 场以上，每天处理的赛事事件约 12,000 条。确实遇到没收录的比赛，把赛事名称和开赛时间发到客服邮箱，我们会去查。</p>
                </div>
              </details>
            </div>
          </section>

          <section class="faq-group" id="grp-board" aria-labelledby="grp-board-title" data-reveal>
            <div class="faq-group__head">
              <span class="faq-group__no">GROUP C</span>
              <h3 class="faq-group__title" id="grp-board-title">积分榜与导出</h3>
            </div>

            <div class="faq-list">
              <details class="faq-item">
                <summary class="faq-item__q">
                  <span class="faq-item__idx">09</span>
                  <span class="faq-item__text">积分榜对比能同时放几支球队？</span>
                  <span class="faq-item__arrow" aria-hidden="true"></span>
                </summary>
                <div class="faq-item__a">
                  <p>最多同时对比 4 支球队，支持 12 个维度筛选。对比工具自 2023 年起上线，筛完条件可以直接把结果导出成表格，写复盘时不用再手动抄一遍。</p>
                </div>
              </details>

              <details class="faq-item">
                <summary class="faq-item__q">
                  <span class="faq-item__idx">10</span>
                  <span class="faq-item__text">导出的文件是什么格式，一次能导多少？</span>
                  <span class="faq-item__arrow" aria-hidden="true"></span>
                </summary>
                <div class="faq-item__a">
                  <p>CSV 与 XLSX 两种格式都支持，单次导出上限 5,000 行。要整理整个赛季，按轮次或按月分批导，文件更好打开，也方便放进自己的表格模板里。</p>
                </div>
              </details>

              <details class="faq-item">
                <summary class="faq-item__q">
                  <span class="faq-item__idx">11</span>
                  <span class="faq-item__text">导出的内容能直接用在稿件里吗？</span>
                  <span class="faq-item__arrow" aria-hidden="true"></span>
                </summary>
                <div class="faq-item__a">
                  <p>可以，注明数据来自必博体育即可。转载规范、引用格式和导出内容的使用范围，都写在<a href="/legal/">使用说明</a>页里，发稿前扫一眼更稳。</p>
                </div>
              </details>
            </div>
          </section>

          <section class="faq-group" id="grp-device" aria-labelledby="grp-device-title" data-reveal>
            <div class="faq-group__head">
              <span class="faq-group__no">GROUP D</span>
              <h3 class="faq-group__title" id="grp-device-title">终端与显示</h3>
            </div>

            <div class="faq-list">
              <details class="faq-item">
                <summary class="faq-item__q">
                  <span class="faq-item__idx">12</span>
                  <span class="faq-item__text">手机上打开会不会缺内容？</span>
                  <span class="faq-item__arrow" aria-hidden="true"></span>
                </summary>
                <div class="faq-item__a">
                  <p>站点适配桌面、平板与手机三类终端，最小适配宽度 360px。窄屏上技术统计表格会改成横向滑动，条目一条不少，用手指左右拨就能看全。</p>
                </div>
              </details>

              <details class="faq-item">
                <summary class="faq-item__q">
                  <span class="faq-item__idx">13</span>
                  <span class="faq-item__text">从赛事列表进到单场数据要点几次？</span>
                  <span class="faq-item__arrow" aria-hidden="true"></span>
                </summary>
                <div class="faq-item__a">
                  <p>不超过两次点击。在列表上点一场比赛进入详情，射门、控球这些统计就在首屏，不用往下翻找入口。</p>
                </div>
              </details>

              <details class="faq-item">
                <summary class="faq-item__q">
                  <span class="faq-item__idx">14</span>
                  <span class="faq-item__text">赛事页打开大概要等多久？</span>
                  <span class="faq-item__arrow" aria-hidden="true"></span>
                </summary>
                <div class="faq-item__a">
                  <p>赛事页首屏平均加载时间约 1.2 秒。如果你那边明显更慢，多半是网络或缓存的问题，清一次缓存重新打开通常就回到正常速度。</p>
                </div>
              </details>
            </div>

            <figure class="faq-device">
              <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="桌面、平板与手机三种屏幕轮廓并排，屏内显示同一赛事列表的不同排版" loading="lazy" decoding="async">
              <figcaption>同一个赛事列表在桌面、平板与手机上的排版差异</figcaption>
            </figure>
          </section>

        </div>

        <div class="faq-rail" aria-hidden="true"></div>
      </div>
    </div>
  </section>

  <section class="faq-help" aria-labelledby="help-title" data-reveal>
    <div class="bb-shell">
      <div class="faq-help__panel">
        <p class="bb-label">还没解决</p>
        <h2 class="faq-help__title" id="help-title">把截图和场次发过来，定位快得多</h2>
        <p class="faq-help__lead">上面十四条没覆盖到的情况，直接找客服。邮件里附上截图、赛事名称和比赛时间，多数问题一轮就能说清楚，不用来回追问。</p>

        <div class="faq-help__channels">
          <div class="faq-help__channel">
            <span class="bb-label">客服邮箱</span>
            <p class="faq-help__value">info@bibo-h5.com.cn</p>
            <p class="faq-help__meta">工作日 9:00–18:00 内回复，积分榜与导出的问题附截图更快</p>
          </div>
          <div class="faq-help__channel">
            <span class="bb-label">客服电话</span>
            <p class="faq-help__value bb-num">18924408115</p>
            <p class="faq-help__meta">工作日 9:00–18:00 有人接听，适合描述打不开或显示异常</p>
          </div>
        </div>

        <div class="faq-help__foot">
          <p class="faq-help__tip">需要谈评测合作或专栏供稿，走<a href="/contact/">联系我们</a>页；想了解个人信息怎么处理，见<a href="/privacy/">隐私政策</a>。</p>
          <a class="bb-btn bb-btn--lime" href="/contact/">去联系页</a>
        </div>
      </div>
    </div>
  </section>

</main>

.page-faq {
  --faq-accent: var(--lime);
  background: var(--carbon);
  color: var(--chalk);
  padding-bottom: 96px;
  overflow-x: hidden;
}

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

.page-faq .faq-hero {
  padding-top: 24px;
}

.page-faq .faq-hero .bb-label {
  display: block;
  margin-top: 28px;
}

.page-faq .faq-hero__title {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 7vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  max-width: min(100%, 820px);
  text-wrap: balance;
}

.page-faq .faq-hero__lead {
  margin: 24px 0 0;
  max-width: 34em;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.75;
  color: rgba(241, 238, 227, 0.78);
}

.page-faq .faq-hero__figure {
  margin: 40px 0 0;
}

.page-faq .faq-hero__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border: 2px solid var(--line-strong);
  box-shadow: var(--shadow-deep);
  background: var(--ink);
}

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

/* ---------- 高频三问 ---------- */

.page-faq .faq-quick {
  padding-top: 72px;
}

.page-faq .faq-quick__grid {
  display: grid;
  gap: 16px;
  margin-top: 32px;
}

.page-faq .faq-quick__item {
  padding: 24px 20px 28px;
  background: var(--ink);
  border: 1px solid var(--line-soft);
  border-top: 4px solid var(--faq-accent);
}

.page-faq .faq-quick__item:nth-child(1) {
  --faq-accent: var(--lime);
}

.page-faq .faq-quick__item:nth-child(2) {
  --faq-accent: var(--amber);
}

.page-faq .faq-quick__item:nth-child(3) {
  --faq-accent: var(--clay);
}

.page-faq .faq-quick__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--faq-accent);
  font-variant-numeric: tabular-nums;
}

.page-faq .faq-quick__title {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--chalk);
}

.page-faq .faq-quick__body {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(241, 238, 227, 0.74);
}

.page-faq .faq-quick__link {
  margin-top: 20px;
  font-size: 13px;
}

/* ---------- 主体：索引 + 问答列 ---------- */

.page-faq .faq-main {
  padding-top: 80px;
}

.page-faq .faq-main .bb-section__head {
  margin-bottom: 24px;
}

.page-faq .faq-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
}

.page-faq .faq-jump__link {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  color: var(--chalk);
  font-size: 13px;
  line-height: 1.2;
  text-decoration: none;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.page-faq .faq-jump__link:hover,
.page-faq .faq-jump__link:focus-visible {
  border-color: var(--lime);
  color: var(--lime);
  background: var(--lime-ghost);
}

.page-faq .faq-layout {
  display: block;
}

.page-faq .faq-side,
.page-faq .faq-rail {
  display: none;
}

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

/* ---------- 分组 ---------- */

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

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

.page-faq #grp-access {
  --faq-accent: var(--lime);
}

.page-faq #grp-data {
  --faq-accent: var(--amber);
}

.page-faq #grp-board {
  --faq-accent: var(--clay);
}

.page-faq #grp-device {
  --faq-accent: var(--mist);
}

.page-faq .faq-group__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 2px solid var(--faq-accent);
}

.page-faq .faq-group__no {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faq-accent);
  white-space: nowrap;
}

.page-faq .faq-group__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.25rem, 5vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* ---------- 问答条目 ---------- */

.page-faq .faq-item {
  border-bottom: 1px solid var(--line-soft);
  transition: background-color 0.25s var(--ease);
}

.page-faq .faq-item[open] {
  background: var(--ink);
}

.page-faq .faq-item__q {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 14px;
  column-gap: 10px;
  align-items: start;
  padding: 18px 12px;
  cursor: pointer;
  list-style: none;
}

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

.page-faq .faq-item__q:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: -2px;
}

.page-faq .faq-item__idx {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  padding-top: 3px;
  color: var(--faq-accent);
  font-variant-numeric: tabular-nums;
}

.page-faq .faq-item__text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--chalk);
  transition: color 0.2s var(--ease);
}

.page-faq .faq-item__q:hover .faq-item__text {
  color: var(--lime);
}

.page-faq .faq-item__arrow {
  justify-self: end;
  width: 9px;
  height: 9px;
  margin-top: 7px;
  border-right: 2px solid var(--mist);
  border-bottom: 2px solid var(--mist);
  transform: rotate(45deg);
  transition: transform 0.22s var(--ease), border-color 0.22s var(--ease);
}

.page-faq .faq-item[open] .faq-item__arrow {
  transform: rotate(135deg);
  border-color: var(--lime);
}

.page-faq .faq-item__a {
  padding: 0 20px 20px 52px;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(241, 238, 227, 0.76);
}

.page-faq .faq-item__a p {
  margin: 0;
  max-width: 34em;
}

.page-faq .faq-item__a a {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 终端配图 ---------- */

.page-faq .faq-device {
  margin: 28px 0 0;
  padding: 12px;
  border: 1px solid var(--line-soft);
  background: var(--ink);
}

.page-faq .faq-device img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border: 1px solid var(--line-soft);
}

.page-faq .faq-device figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--mist);
}

/* ---------- 联系区块 ---------- */

.page-faq .faq-help {
  padding-top: 88px;
}

.page-faq .faq-help__panel {
  padding: 32px 20px;
  border: 2px solid var(--line-strong);
  background: var(--ink);
  box-shadow: var(--shadow-deep);
}

.page-faq .faq-help__title {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 5vw, 2.25rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
}

.page-faq .faq-help__lead {
  margin: 16px 0 0;
  max-width: 34em;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(241, 238, 227, 0.76);
}

.page-faq .faq-help__channels {
  display: grid;
  gap: 20px;
  margin-top: 28px;
}

.page-faq .faq-help__channel {
  padding: 4px 0 4px 16px;
  border-left: 3px solid var(--lime);
}

.page-faq .faq-help__channel:nth-child(2) {
  border-left-color: var(--amber);
}

.page-faq .faq-help__value {
  margin: 8px 0 6px;
  font-family: var(--font-mono);
  font-size: clamp(15px, 3.6vw, 19px);
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--chalk);
  word-break: break-all;
  font-variant-numeric: tabular-nums;
}

.page-faq .faq-help__meta {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--mist);
}

.page-faq .faq-help__foot {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.page-faq .faq-help__tip {
  flex: 1 1 240px;
  margin: 0;
  max-width: 34em;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(241, 238, 227, 0.76);
}

.page-faq .faq-help__tip a {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 断点 ---------- */

@media (min-width: 600px) {
  .page-faq .faq-item__q {
    grid-template-columns: 34px minmax(0, 1fr) 16px;
    column-gap: 14px;
    padding: 22px 16px;
  }

  .page-faq .faq-item__a {
    padding: 0 28px 24px 64px;
  }
}

@media (min-width: 720px) {
  .page-faq .faq-hero__frame {
    aspect-ratio: 8 / 3;
  }

  .page-faq .faq-help__panel {
    padding: 40px 36px;
  }
}

@media (min-width: 820px) {
  .page-faq .faq-quick__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  .page-faq .faq-help__channels {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

@media (min-width: 1024px) {
  .page-faq {
    padding-bottom: 128px;
  }

  .page-faq .faq-hero {
    padding-top: 32px;
  }

  .page-faq .faq-layout {
    display: grid;
    grid-template-columns: 152px minmax(0, 720px) minmax(0, 1fr);
    column-gap: 40px;
    align-items: start;
  }

  .page-faq .faq-jump {
    display: none;
  }

  .page-faq .faq-side {
    display: block;
    position: sticky;
    top: calc(var(--bar-h) + 24px);
  }

  .page-faq .faq-side__list {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
  }

  .page-faq .faq-side__link {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 12px 0 12px 14px;
    border-left: 2px solid var(--line-soft);
    color: var(--mist);
    font-size: 13px;
    line-height: 1.4;
    text-decoration: none;
    transition: color 0.2s var(--ease), border-left-color 0.2s var(--ease);
  }

  .page-faq .faq-side__link:hover,
  .page-faq .faq-side__link:focus-visible {
    color: var(--lime);
    border-left-color: var(--lime);
  }

  .page-faq .faq-side__no {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--lime);
  }

  .page-faq .faq-rail {
    display: block;
    position: sticky;
    top: calc(var(--bar-h) + 24px);
    height: 320px;
    min-height: 200px;
  }

  .page-faq .faq-rail::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 1px;
    background: var(--line-soft);
  }

  .page-faq .faq-rail::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 13px;
    background-image: repeating-linear-gradient(
      to bottom,
      var(--moss) 0,
      var(--moss) 1px,
      transparent 1px,
      transparent 32px
    );
  }

  .page-faq .faq-help__panel {
    padding: 56px 48px;
  }
}
<<<END>>>