/* ===== 常见问答 /faqs/ ===== */

.page-faq .breadcrumb {
  margin-bottom: clamp(18px, 3vw, 30px);
}

/* ---------- 开篇 ---------- */

.page-faq .faq-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(22px, 4.5vw, 46px) 0 clamp(34px, 6vw, 68px);
  border-bottom: 1px solid var(--line);
}

.page-faq .faq-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(233, 242, 245, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233, 242, 245, .045) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: radial-gradient(125% 85% at 18% 0%, #000 0%, transparent 74%);
  mask-image: radial-gradient(125% 85% at 18% 0%, #000 0%, transparent 74%);
}

.page-faq .faq-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 46px);
  align-items: end;
}

.page-faq .faq-hero-copy {
  min-width: 0;
}

.page-faq h1 {
  margin: 12px 0 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 6.4vw, 58px);
  line-height: 1.05;
  letter-spacing: -.012em;
  color: var(--mist-100);
  text-wrap: balance;
}

.page-faq .faq-hero .lede {
  max-width: 60ch;
  margin: 0;
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.7;
  color: var(--mist-200);
}

.page-faq .faq-hero-media {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--shadow-1);
}

.page-faq .faq-hero-media img {
  display: block;
  width: 100%;
  height: clamp(196px, 30vw, 296px);
  object-fit: cover;
}

@media (min-width: 920px) {
  .page-faq .faq-hero-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  }
}

/* ---------- 分组跳转 ---------- */

.page-faq .faq-jump {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: clamp(20px, 3vw, 30px) 0 0;
  padding: 0;
}

.page-faq .faq-jump a {
  display: inline-block;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--mist-200);
  text-decoration: none;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}

.page-faq .faq-jump a:hover,
.page-faq .faq-jump a:focus-visible {
  color: var(--ink-950);
  background: var(--cyan-400);
  border-color: var(--cyan-400);
}

/* ---------- 主体布局 ---------- */

.page-faq .faq-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 5vw, 58px);
  align-items: start;
}

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

@media (min-width: 1024px) {
  .page-faq .faq-layout {
    grid-template-columns: minmax(0, 1fr) 286px;
  }
}

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

.page-faq .faq-group {
  position: relative;
  margin: 0 0 clamp(34px, 5vw, 54px);
  padding-left: clamp(14px, 2vw, 22px);
  border-top: 1px solid var(--line);
}

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

.page-faq .faq-group::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 14px;
  width: 2px;
  pointer-events: none;
  background: linear-gradient(180deg, var(--cyan-400) 0%, rgba(47, 227, 200, .04) 100%);
  opacity: .55;
}

.page-faq .faq-group-head {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 16px);
  padding: clamp(16px, 2.4vw, 24px) 0 clamp(10px, 1.6vw, 16px);
  cursor: pointer;
  list-style: none;
}

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

.page-faq .faq-group-head::marker {
  content: "";
}

.page-faq .faq-group-num {
  flex: none;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .14em;
  color: var(--cyan-400);
}

.page-faq .faq-group-title {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(21px, 3.2vw, 30px);
  line-height: 1.2;
  letter-spacing: .01em;
  color: var(--mist-100);
  transition: color .16s ease;
}

.page-faq .faq-group-head:hover .faq-group-title,
.page-faq .faq-group-head:focus-visible .faq-group-title {
  color: var(--cyan-300);
}

.page-faq .faq-group-caret {
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--cyan-400);
  border-bottom: 2px solid var(--cyan-400);
  transform: rotate(45deg);
  transition: transform .18s ease;
  opacity: .85;
}

.page-faq .faq-group[open] .faq-group-caret {
  transform: rotate(-135deg);
}

/* ---------- 单条问答 ---------- */

.page-faq .faq-item {
  border-bottom: 1px dashed rgba(233, 242, 245, .13);
}

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

.page-faq .faq-q {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(15px, 1.9vw, 16.5px);
  line-height: 1.6;
  color: var(--mist-100);
  transition: color .16s ease;
}

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

.page-faq .faq-q::marker {
  content: "";
}

.page-faq .faq-q:hover,
.page-faq .faq-q:focus-visible {
  color: var(--cyan-300);
}

.page-faq .faq-q-text {
  display: block;
  flex: 1 1 auto;
  margin: 0;
  text-align: left;
}

.page-faq .faq-caret {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-right: 1.5px solid var(--cyan-400);
  border-bottom: 1.5px solid var(--cyan-400);
  transform: rotate(45deg);
  transition: transform .18s ease;
  opacity: .75;
}

.page-faq .faq-item[open] .faq-caret {
  transform: rotate(-135deg);
}

.page-faq .faq-a {
  max-width: 66ch;
  padding: 0 0 18px;
  font-size: clamp(14.5px, 1.8vw, 15.5px);
  line-height: 1.72;
  color: var(--mist-200);
  overflow-wrap: anywhere;
}

.page-faq .faq-item[open] .faq-a {
  padding-left: 16px;
  border-left: 2px solid rgba(47, 227, 200, .3);
}

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

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

.page-faq .faq-a a {
  color: var(--cyan-300);
  text-decoration: underline;
  text-decoration-color: rgba(47, 227, 200, .42);
  text-underline-offset: 3px;
}

.page-faq .faq-a a:hover {
  text-decoration-color: var(--cyan-300);
}

/* ---------- 分组内的横向图条 ---------- */

.page-faq .faq-band {
  margin: 2px 0 clamp(16px, 2.4vw, 22px);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}

.page-faq .faq-band img {
  display: block;
  width: 100%;
  height: clamp(128px, 20vw, 196px);
  object-fit: cover;
}

/* ---------- 右侧常驻提示 ---------- */

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

.page-faq .faq-aside-card {
  position: relative;
  padding: 22px 20px 20px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: linear-gradient(165deg, var(--teal-800) 0%, var(--ink-900) 74%);
  box-shadow: var(--shadow-1);
}

.page-faq .faq-aside-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 58px;
  height: 2px;
  background: var(--cyan-400);
}

.page-faq .faq-aside-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: .02em;
  color: var(--mist-100);
}

.page-faq .faq-aside-text {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.68;
  color: var(--mist-200);
}

.page-faq .faq-aside-card .contact-item {
  margin-bottom: 12px;
}

.page-faq .faq-aside-card .contact-label {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--slate-400);
}

.page-faq .faq-aside-card .contact-value {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mist-100);
  overflow-wrap: anywhere;
}

.page-faq .faq-aside-card .contact-note {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.62;
  color: var(--slate-400);
}

.page-faq .faq-aside-link {
  display: inline-block;
  margin-top: 16px;
  padding-bottom: 2px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--cyan-400);
  text-decoration: none;
  border-bottom: 1px solid rgba(47, 227, 200, .38);
}

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

@media (min-width: 1024px) {
  .page-faq .faq-aside {
    position: sticky;
    top: calc(var(--header-upper-h) + 78px);
  }
}

/* ---------- 下一站 ---------- */

.page-faq .faq-next {
  margin-top: clamp(24px, 4vw, 42px);
  padding: clamp(34px, 5vw, 58px) 0 clamp(42px, 6vw, 68px);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(11, 46, 61, .52) 0%, rgba(5, 22, 31, 0) 100%);
}

.page-faq .faq-next-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: center;
}

.page-faq .faq-next-title {
  margin: 8px 0 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(23px, 3.4vw, 34px);
  line-height: 1.18;
  letter-spacing: .01em;
  color: var(--mist-100);
}

.page-faq .faq-next-text {
  max-width: 58ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--mist-200);
}

.page-faq .faq-next-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (min-width: 820px) {
  .page-faq .faq-next-inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* ---------- 窄屏收口 ---------- */

@media (max-width: 560px) {
  .page-faq .faq-jump {
    gap: 6px;
  }

  .page-faq .faq-jump a {
    padding: 6px 10px;
    font-size: 11.5px;
  }

  .page-faq .faq-group {
    padding-left: 13px;
  }

  .page-faq .faq-group-head {
    gap: 9px;
  }

  .page-faq .faq-q {
    gap: 10px;
  }

  .page-faq .faq-item[open] .faq-a {
    padding-left: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-group-caret,
  .page-faq .faq-caret,
  .page-faq .faq-jump a,
  .page-faq .faq-q {
    transition: none;
  }
}
<<<END>>>

【修正】上一版输出末尾多写了一个 `<<<END>>>` 标记，该标记不在允许的标记集合内。现补发完整正确版本，请以下方内容为准：


<main id="main-content" class="page-faq">

  <div class="container">
    <nav class="breadcrumb" aria-label="当前位置">
      <ol class="breadcrumb-list">
        <li class="breadcrumb-item"><a class="breadcrumb-link" href="/">看台首页</a></li>
        <li class="breadcrumb-item" aria-current="page">常见问答</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">乐鱼看台每个比赛日更新 1,200 条赛事条目，用得多了难免碰上入口找不到、数字对不上、筛选条件不知道怎么组合这类问题。下面按使用顺序分成六组，点开就能看到答复；六组翻过仍没解决，页面右侧的客服入口随时可用。</p>
        <ul class="faq-jump">
          <li><a href="#faq-access">01 入口与账号</a></li>
          <li><a href="#faq-update">02 数据与更新</a></li>
          <li><a href="#faq-reading">03 赔率与判罚读法</a></li>
          <li><a href="#faq-filter">04 筛选与导出</a></li>
          <li><a href="#faq-correction">05 纠错与补充</a></li>
          <li><a href="#faq-support">06 服务与响应</a></li>
        </ul>
      </div>
      <figure class="media-frame faq-hero-media">
        <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="数据看台界面的抽象特写，展示顶部入口与个人关注列表区域">
      </figure>
    </div>
  </section>

  <section class="section faq-body">
    <div class="container faq-layout">

      <div class="faq-column">

        <details class="faq-group" id="faq-access" open data-reveal>
          <summary class="faq-group-head">
            <span class="faq-group-num">01</span>
            <h2 class="faq-group-title">从哪进去，账号跟着谁走</h2>
            <span class="faq-group-caret" aria-hidden="true"></span>
          </summary>
          <div class="faq-list">

            <details class="faq-item">
              <summary class="faq-q">
                <span class="faq-q-text">从哪个入口能直接进到数据看台？</span>
                <span class="faq-caret" aria-hidden="true"></span>
              </summary>
              <div class="faq-a">
                <p>站点每一页的顶部右侧都有“登录入口”，点它就会回到首页完成进入。进去之后看到的是整体概览：最近一轮的赛程与结果、赔率变化、判罚索引和名次形势都排在同一屏里。</p>
                <p>如果你已经清楚自己要查哪一项，头部那枚“浏览数据目录”会更快，从<a href="/catalog/">数据目录</a>按联赛或赛季往下钻，比在首页一条条翻省时间。</p>
              </div>
            </details>

            <details class="faq-item">
              <summary class="faq-q">
                <span class="faq-q-text">电脑和手机打开的是不是同一份记录？</span>
                <span class="faq-caret" aria-hidden="true"></span>
              </summary>
              <div class="faq-a">
                <p>是同一份。网页端和移动端共用一套数据，你在电脑上筛出来的视图，换到手机上是同样的内容，字段和数值都不会变。</p>
                <p>两端唯一的差别只在屏幕上能同时铺开多少列，窄屏会把并列的信息叠起来放，读起来不受影响。</p>
              </div>
            </details>

            <details class="faq-item">
              <summary class="faq-q">
                <span class="faq-q-text">关注列表能订阅多少，换个设备还在吗？</span>
                <span class="faq-caret" aria-hidden="true"></span>
              </summary>
              <div class="faq-a">
                <p>最多可以关注 20 支球队和 12 项赛事。关注之后，这些球队与赛事的赔率变动、判罚记录、补时数据和名次变化会汇总到个人看台首页，不用每次重新筛一遍。</p>
                <p>列表跟着账号走。在电脑上加了球队，手机上打开就是加好的状态，不需要再设一次。</p>
              </div>
            </details>

            <details class="faq-item">
              <summary class="faq-q">
                <span class="faq-q-text">忘记密码了怎么处理？</span>
                <span class="faq-caret" aria-hidden="true"></span>
              </summary>
              <div class="faq-a">
                <p>在登录入口页面选择找回，用注册时留的邮箱重置即可。</p>
                <p>如果那个邮箱已经不可用，把账号信息和你的情况发到站点客服邮箱说明一下，工作日 12 小时内会有人跟进。</p>
              </div>
            </details>

          </div>
        </details>

        <details class="faq-group" id="faq-update" open data-reveal>
          <summary class="faq-group-head">
            <span class="faq-group-num">02</span>
            <h2 class="faq-group-title">数据更新到哪一轮</h2>
            <span class="faq-group-caret" aria-hidden="true"></span>
          </summary>
          <div class="faq-list">

            <details class="faq-item">
              <summary class="faq-q">
                <span class="faq-q-text">现在能看到的最新数据是哪一轮？</span>
                <span class="faq-caret" aria-hidden="true"></span>
              </summary>
              <div class="faq-a">
                <p>更新一直跟到最近结束的那一轮。每个比赛日平均落进 1,200 条赛事条目，赛程、比分、判罚和补时记录会随着比赛进程分批补齐。</p>
                <p>每个数据模块的标题旁边都标着更新轮次，扫一眼就知道手上这份是不是最新的。</p>
              </div>
            </details>

            <details class="faq-item">
              <summary class="faq-q">
                <span class="faq-q-text">什么时间更新最密集？</span>
                <span class="faq-caret" aria-hidden="true"></span>
              </summary>
              <div class="faq-a">
                <p>欧洲赛季的晚间是高峰。各联赛开赛时间不同，条目会随着比赛推进陆续覆盖；凌晨结束的场次通常在随后的批次里补齐补时时长与替补贡献。</p>
                <p>如果你盯的是具体某一场，隔一段时间刷一次就能看到变化，不必守在页面上。</p>
              </div>
            </details>

            <details class="faq-item">
              <summary class="faq-q">
                <span class="faq-q-text">赛季初的记录还能翻回去看吗？</span>
                <span class="faq-caret" aria-hidden="true"></span>
              </summary>
              <div class="faq-a">
                <p>能。历史轮次保留在对应赛季下，按联赛、赛季、轮次逐层进入就能回到赛季初。</p>
                <p>赔率周档从 2006 年起累积了 9,400 余条周度快照，把这条线连起来看，一支球队在赛季里走到哪一步、走势怎么变，很快就清楚了。</p>
              </div>
            </details>

            <details class="faq-item">
              <summary class="faq-q">
                <span class="faq-q-text">补时和替补上场的记录什么时候跟上？</span>
                <span class="faq-caret" aria-hidden="true"></span>
              </summary>
              <div class="faq-a">
                <p>伤停补时替补贡献单独登记，逐场记录替补登场时间、进球与助攻，并把这场比赛的补时时长和半场比分一起标上。</p>
                <p>这几个字段一般与该轮赛程结果同批次更新，晚场场次可能落到下一个批次里。</p>
              </div>
            </details>

          </div>
        </details>

        <details class="faq-group" id="faq-reading" open data-reveal>
          <summary class="faq-group-head">
            <span class="faq-group-num">03</span>
            <h2 class="faq-group-title">赔率周档和判罚记录怎么读</h2>
            <span class="faq-group-caret" aria-hidden="true"></span>
          </summary>

          <figure class="media-frame faq-band">
            <img src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="冷调网格纸与描线叠加的抽象画面，用于数据读法章节的背景" loading="lazy" decoding="async">
          </figure>

          <div class="faq-list">

            <details class="faq-item">
              <summary class="faq-q">
                <span class="faq-q-text">夺冠赔率多久登记一次？</span>
                <span class="faq-caret" aria-hidden="true"></span>
              </summary>
              <div class="faq-a">
                <p>按周登记，每周形成一个快照。你读到的是每周一个点连起来的走势，不是每分钟跳动的数字。</p>
                <p>这样更适合做赛前背景整理和赛季复盘：翻起来不被噪声干扰，一条线的转折点在哪一眼就能看到。</p>
              </div>
            </details>

            <details class="faq-item">
              <summary class="faq-q">
                <span class="faq-q-text">点球判罚记录里能看到哪些信息？</span>
                <span class="faq-caret" aria-hidden="true"></span>
              </summary>
              <div class="faq-a">
                <p>每条判罚记录包含判罚分钟、主罚方、结果和赛事阶段四项，逐场可以点进去看具体那一场。</p>
                <p>档案从 1998 年至今收录了 641 场判罚。想比较不同联赛或不同赛事阶段的判罚分布，先按赛事阶段筛一遍再看会顺很多。</p>
              </div>
            </details>

            <details class="faq-item">
              <summary class="faq-q">
                <span class="faq-q-text">补时和半场比分怎么对应到具体某一场？</span>
                <span class="faq-caret" aria-hidden="true"></span>
              </summary>
              <div class="faq-a">
                <p>同一场比赛的补时时长、半场比分、替补登场时间、进球与助攻登记在一起，打开某一场就能全部看到，不用在两处来回对。</p>
              </div>
            </details>

            <details class="faq-item">
              <summary class="faq-q">
                <span class="faq-q-text">升降级形势里的“压力”指什么？</span>
                <span class="faq-caret" aria-hidden="true"></span>
              </summary>
              <div class="faq-a">
                <p>按联赛登记，展示每支球队的排名压力区间，以及剩余赛程的强度。</p>
                <p>赛季末段想判断哪几支球队真的危险，看这两项比只看当前积分更接近实情。<a href="/press/">看台动态</a>里有持续更新的形势观察，可以配合着看。</p>
              </div>
            </details>

          </div>
        </details>

        <details class="faq-group" id="faq-filter" open data-reveal>
          <summary class="faq-group-head">
            <span class="faq-group-num">04</span>
            <h2 class="faq-group-title">筛选条件怎么组合，结果怎么带走</h2>
            <span class="faq-group-caret" aria-hidden="true"></span>
          </summary>
          <div class="faq-list">

            <details class="faq-item">
              <summary class="faq-q">
                <span class="faq-q-text">能按哪些条件筛选？</span>
                <span class="faq-caret" aria-hidden="true"></span>
              </summary>
              <div class="faq-a">
                <p>联赛、赛季、球队、球员、判罚类型和轮次都可以，条件能自由组合。眼下收录的 47 个国家和地区、218 项联赛与杯赛都在同一套筛选里，选中之后视图立刻跟着变。</p>
              </div>
            </details>

            <details class="faq-item">
              <summary class="faq-q">
                <span class="faq-q-text">四类数据视图分别对应什么场景？</span>
                <span class="faq-caret" aria-hidden="true"></span>
              </summary>
              <div class="faq-a">
                <p>赔率、判罚、补时、名次，四类视图各有侧重。做赛前背景整理看赔率，复盘争议判罚看判罚，判断轮换带来的影响看补时，推演赛季末去向看名次。</p>
                <p>视图之间可以随时切换，你已经设好的筛选条件会保留，不用重新选一遍。</p>
              </div>
            </details>

            <details class="faq-item">
              <summary class="faq-q">
                <span class="faq-q-text">导出的是什么内容？</span>
                <span class="faq-caret" aria-hidden="true"></span>
              </summary>
              <div class="faq-a">
                <p>可以按赛季导出对阵摘要，把该赛季已经登记完成的场次和结果整理到一起。</p>
                <p>做赛季回顾、做青训教学里的对阵参考，或者给一篇长文凑背景资料，这一份基本够用。</p>
              </div>
            </details>

            <details class="faq-item">
              <summary class="faq-q">
                <span class="faq-q-text">引用这些内容时需要注意什么？</span>
                <span class="faq-caret" aria-hidden="true"></span>
              </summary>
              <div class="faq-a">
                <p>注明来源为乐鱼看台，并保留该模块标注的更新轮次。赔率、判罚这类数字建议连轮次一起写进引用里，读者一看就知道你说的是哪一版。</p>
                <p>更细的引用写法可以在页脚的“使用与访问须知”里找到。</p>
              </div>
            </details>

          </div>
        </details>

        <details class="faq-group" id="faq-correction" open data-reveal>
          <summary class="faq-group-head">
            <span class="faq-group-num">05</span>
            <h2 class="faq-group-title">发现记录有出入时怎么提交</h2>
            <span class="faq-group-caret" aria-hidden="true"></span>
          </summary>
          <div class="faq-list">

            <details class="faq-item">
              <summary class="faq-q">
                <span class="faq-q-text">发现某场比赛的数据不对，交到哪里？</span>
                <span class="faq-caret" aria-hidden="true"></span>
              </summary>
              <div class="faq-a">
                <p>发到站点客服邮箱就行。赔率纠错和判罚记录补充走同一个入口，每条都会有人看。</p>
                <p>数据团队由 34 人组成，分赛程、赔率、判罚、补时、名次和校对六个小组，收到的反馈会转到对应小组处理。</p>
              </div>
            </details>

            <details class="faq-item">
              <summary class="faq-q">
                <span class="faq-q-text">提交时最好带上哪些信息？</span>
                <span class="faq-caret" aria-hidden="true"></span>
              </summary>
              <div class="faq-a">
                <p>联赛与赛季、具体轮次、涉及的球队或球员，再加上你手上那份数据的来源。</p>
                <p>写得越具体，核对起来越快，也越容易定位到到底是哪一条要改。</p>
              </div>
            </details>

            <details class="faq-item">
              <summary class="faq-q">
                <span class="faq-q-text">更正之后多久能看到？</span>
                <span class="faq-caret" aria-hidden="true"></span>
              </summary>
              <div class="faq-a">
                <p>客服在收到后的工作日 12 小时内给出回复。确认成立的修改会落到对应模块里，并在该模块的更新轮次上反映出来。</p>
              </div>
            </details>

          </div>
        </details>

        <details class="faq-group" id="faq-support" open data-reveal>
          <summary class="faq-group-head">
            <span class="faq-group-num">06</span>
            <h2 class="faq-group-title">联系渠道和回复节奏</h2>
            <span class="faq-group-caret" aria-hidden="true"></span>
          </summary>
          <div class="faq-list">

            <details class="faq-item">
              <summary class="faq-q">
                <span class="faq-q-text">通过哪个渠道联系最快？</span>
                <span class="faq-caret" aria-hidden="true"></span>
              </summary>
              <div class="faq-a">
                <p>客服邮箱是最直接的渠道，写清楚问题就能处理。工作时间内电话也可以，紧急情况打过去更省事。</p>
              </div>
            </details>

            <details class="faq-item">
              <summary class="faq-q">
                <span class="faq-q-text">“工作日 12 小时内回复”具体怎么算？</span>
                <span class="faq-caret" aria-hidden="true"></span>
              </summary>
              <div class="faq-a">
                <p>从收到你的邮件开始算，工作日 12 小时内会有人回复。</p>
                <p>周末和法定节假日收到的信件，会顺延到下一个工作日开始计时。</p>
              </div>
            </details>

            <details class="faq-item">
              <summary class="faq-q">
                <span class="faq-q-text">合作和内容授权找谁谈？</span>
                <span class="faq-caret" aria-hidden="true"></span>
              </summary>
              <div class="faq-a">
                <p>同样发到客服邮箱，在主题里写明合作方向，会转给对应的同事。</p>
                <p>先看一眼<a href="/values/">品牌理念与数据团队</a>里的分工说明再谈，双方沟通会快不少。</p>
              </div>
            </details>

            <details class="faq-item">
              <summary class="faq-q">
                <span class="faq-q-text">江苏本地的赛事资料能查到吗？</span>
                <span class="faq-caret" aria-hidden="true"></span>
              </summary>
              <div class="faq-a">
                <p>可以。苏州本地团队负责赛季档案整理与季度校对，江苏地区的赛事资料按月归档，查某个赛季的本地球队表现不受影响。</p>
              </div>
            </details>

          </div>
        </details>

      </div>

      <aside class="faq-aside" aria-label="未解决时的联系方式">
        <div class="faq-aside-card">
          <p class="faq-aside-title">还没解决？</p>
          <p class="faq-aside-text">把具体的场次、联赛赛季和你手上的那份数据一起说明，核实起来会快很多。</p>
          <div class="contact-item">
            <span class="contact-label">客服邮箱</span>
            <span class="contact-value">info@leyu-app-download.com.cn</span>
          </div>
          <div class="contact-item">
            <span class="contact-label">电话</span>
            <span class="contact-value">18228370320</span>
          </div>
          <p class="contact-note">工作日 12 小时内回复，用于赔率数据纠错、点球记录补充及升降级形势咨询。</p>
          <a class="faq-aside-link" href="/find-us/">查看全部联系方式</a>
        </div>
      </aside>

    </div>
  </section>

  <section class="faq-next">
    <div class="container faq-next-inner">
      <div>
        <p class="eyebrow">下一站</p>
        <h2 class="faq-next-title">问题清了，直接进数据看看</h2>
        <p class="faq-next-text">想确认某个字段到底长什么样、某一轮的记录在不在，从数据目录按联赛和赛季往下走是最短的路径。想先看看别人怎么读这些数字，动态里有持续更新的盘点。</p>
      </div>
      <div class="faq-next-actions">
        <a class="btn btn-primary" href="/catalog/">查看数据目录</a>
        <a class="btn btn-ghost" href="/press/">读看台动态</a>
      </div>
    </div>
  </section>

</main>

/* ===== 常见问答 /faqs/ ===== */

.page-faq .breadcrumb {
  margin-bottom: clamp(18px, 3vw, 30px);
}

/* ---------- 开篇 ---------- */

.page-faq .faq-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(22px, 4.5vw, 46px) 0 clamp(34px, 6vw, 68px);
  border-bottom: 1px solid var(--line);
}

.page-faq .faq-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(233, 242, 245, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233, 242, 245, .045) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: radial-gradient(125% 85% at 18% 0%, #000 0%, transparent 74%);
  mask-image: radial-gradient(125% 85% at 18% 0%, #000 0%, transparent 74%);
}

.page-faq .faq-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 46px);
  align-items: end;
}

.page-faq .faq-hero-copy {
  min-width: 0;
}

.page-faq h1 {
  margin: 12px 0 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 6.4vw, 58px);
  line-height: 1.05;
  letter-spacing: -.012em;
  color: var(--mist-100);
  text-wrap: balance;
}

.page-faq .faq-hero .lede {
  max-width: 60ch;
  margin: 0;
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.7;
  color: var(--mist-200);
}

.page-faq .faq-hero-media {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--shadow-1);
}

.page-faq .faq-hero-media img {
  display: block;
  width: 100%;
  height: clamp(196px, 30vw, 296px);
  object-fit: cover;
}

@media (min-width: 920px) {
  .page-faq .faq-hero-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  }
}

/* ---------- 分组跳转 ---------- */

.page-faq .faq-jump {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: clamp(20px, 3vw, 30px) 0 0;
  padding: 0;
}

.page-faq .faq-jump a {
  display: inline-block;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--mist-200);
  text-decoration: none;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}

.page-faq .faq-jump a:hover,
.page-faq .faq-jump a:focus-visible {
  color: var(--ink-950);
  background: var(--cyan-400);
  border-color: var(--cyan-400);
}

/* ---------- 主体布局 ---------- */

.page-faq .faq-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 5vw, 58px);
  align-items: start;
}

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

@media (min-width: 1024px) {
  .page-faq .faq-layout {
    grid-template-columns: minmax(0, 1fr) 286px;
  }
}

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

.page-faq .faq-group {
  position: relative;
  margin: 0 0 clamp(34px, 5vw, 54px);
  padding-left: clamp(14px, 2vw, 22px);
  border-top: 1px solid var(--line);
}

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

.page-faq .faq-group::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 14px;
  width: 2px;
  pointer-events: none;
  background: linear-gradient(180deg, var(--cyan-400) 0%, rgba(47, 227, 200, .04) 100%);
  opacity: .55;
}

.page-faq .faq-group-head {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 16px);
  padding: clamp(16px, 2.4vw, 24px) 0 clamp(10px, 1.6vw, 16px);
  cursor: pointer;
  list-style: none;
}

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

.page-faq .faq-group-head::marker {
  content: "";
}

.page-faq .faq-group-num {
  flex: none;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .14em;
  color: var(--cyan-400);
}

.page-faq .faq-group-title {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(21px, 3.2vw, 30px);
  line-height: 1.2;
  letter-spacing: .01em;
  color: var(--mist-100);
  transition: color .16s ease;
}

.page-faq .faq-group-head:hover .faq-group-title,
.page-faq .faq-group-head:focus-visible .faq-group-title {
  color: var(--cyan-300);
}

.page-faq .faq-group-caret {
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--cyan-400);
  border-bottom: 2px solid var(--cyan-400);
  transform: rotate(45deg);
  transition: transform .18s ease;
  opacity: .85;
}

.page-faq .faq-group[open] .faq-group-caret {
  transform: rotate(-135deg);
}

/* ---------- 单条问答 ---------- */

.page-faq .faq-item {
  border-bottom: 1px dashed rgba(233, 242, 245, .13);
}

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

.page-faq .faq-q {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(15px, 1.9vw, 16.5px);
  line-height: 1.6;
  color: var(--mist-100);
  transition: color .16s ease;
}

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

.page-faq .faq-q::marker {
  content: "";
}

.page-faq .faq-q:hover,
.page-faq .faq-q:focus-visible {
  color: var(--cyan-300);
}

.page-faq .faq-q-text {
  display: block;
  flex: 1 1 auto;
  margin: 0;
  text-align: left;
}

.page-faq .faq-caret {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-right: 1.5px solid var(--cyan-400);
  border-bottom: 1.5px solid var(--cyan-400);
  transform: rotate(45deg);
  transition: transform .18s ease;
  opacity: .75;
}

.page-faq .faq-item[open] .faq-caret {
  transform: rotate(-135deg);
}

.page-faq .faq-a {
  max-width: 66ch;
  padding: 0 0 18px;
  font-size: clamp(14.5px, 1.8vw, 15.5px);
  line-height: 1.72;
  color: var(--mist-200);
  overflow-wrap: anywhere;
}

.page-faq .faq-item[open] .faq-a {
  padding-left: 16px;
  border-left: 2px solid rgba(47, 227, 200, .3);
}

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

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

.page-faq .faq-a a {
  color: var(--cyan-300);
  text-decoration: underline;
  text-decoration-color: rgba(47, 227, 200, .42);
  text-underline-offset: 3px;
}

.page-faq .faq-a a:hover {
  text-decoration-color: var(--cyan-300);
}

/* ---------- 分组内的横向图条 ---------- */

.page-faq .faq-band {
  margin: 2px 0 clamp(16px, 2.4vw, 22px);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}

.page-faq .faq-band img {
  display: block;
  width: 100%;
  height: clamp(128px, 20vw, 196px);
  object-fit: cover;
}

/* ---------- 右侧常驻提示 ---------- */

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

.page-faq .faq-aside-card {
  position: relative;
  padding: 22px 20px 20px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: linear-gradient(165deg, var(--teal-800) 0%, var(--ink-900) 74%);
  box-shadow: var(--shadow-1);
}

.page-faq .faq-aside-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 58px;
  height: 2px;
  background: var(--cyan-400);
}

.page-faq .faq-aside-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: .02em;
  color: var(--mist-100);
}

.page-faq .faq-aside-text {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.68;
  color: var(--mist-200);
}

.page-faq .faq-aside-card .contact-item {
  margin-bottom: 12px;
}

.page-faq .faq-aside-card .contact-label {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--slate-400);
}

.page-faq .faq-aside-card .contact-value {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mist-100);
  overflow-wrap: anywhere;
}

.page-faq .faq-aside-card .contact-note {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.62;
  color: var(--slate-400);
}

.page-faq .faq-aside-link {
  display: inline-block;
  margin-top: 16px;
  padding-bottom: 2px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--cyan-400);
  text-decoration: none;
  border-bottom: 1px solid rgba(47, 227, 200, .38);
}

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

@media (min-width: 1024px) {
  .page-faq .faq-aside {
    position: sticky;
    top: calc(var(--header-upper-h) + 78px);
  }
}

/* ---------- 下一站 ---------- */

.page-faq .faq-next {
  margin-top: clamp(24px, 4vw, 42px);
  padding: clamp(34px, 5vw, 58px) 0 clamp(42px, 6vw, 68px);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(11, 46, 61, .52) 0%, rgba(5, 22, 31, 0) 100%);
}

.page-faq .faq-next-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: center;
}

.page-faq .faq-next-title {
  margin: 8px 0 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(23px, 3.4vw, 34px);
  line-height: 1.18;
  letter-spacing: .01em;
  color: var(--mist-100);
}

.page-faq .faq-next-text {
  max-width: 58ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--mist-200);
}

.page-faq .faq-next-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (min-width: 820px) {
  .page-faq .faq-next-inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* ---------- 窄屏收口 ---------- */

@media (max-width: 560px) {
  .page-faq .faq-jump {
    gap: 6px;
  }

  .page-faq .faq-jump a {
    padding: 6px 10px;
    font-size: 11.5px;
  }

  .page-faq .faq-group {
    padding-left: 13px;
  }

  .page-faq .faq-group-head {
    gap: 9px;
  }

  .page-faq .faq-q {
    gap: 10px;
  }

  .page-faq .faq-item[open] .faq-a {
    padding-left: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-group-caret,
  .page-faq .faq-caret,
  .page-faq .faq-jump a,
  .page-faq .faq-q {
    transition: none;
  }
}
<<<END>>>