.page-faq{
  --faq-card:#082a22;
  --faq-line:rgba(147,168,162,.22);
  --faq-soft:rgba(244,248,246,.78);
  --faq-dim:rgba(244,248,246,.6);
  background:
    radial-gradient(120% 55% at 88% -8%, rgba(53,240,200,.10), transparent 62%),
    radial-gradient(90% 50% at 4% 30%, rgba(76,141,255,.07), transparent 60%),
    var(--ink);
  color:var(--mist);
  font-family:var(--font-body);
  padding-top:clamp(18px,3vw,34px);
  padding-bottom:clamp(52px,8vw,104px);
}
.page-faq a{color:inherit;}
.page-faq h1,
.page-faq h2,
.page-faq h3{font-family:var(--font-display);font-weight:700;margin:0;}
.page-faq h2{font-size:clamp(24px,3.4vw,34px);line-height:1.14;letter-spacing:.01em;}
.page-faq h3{font-size:16.5px;line-height:1.3;letter-spacing:.01em;}

.page-faq .faq-crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;color:var(--sage);}
.page-faq .faq-crumb a{color:var(--sage);text-decoration:none;transition:color .18s ease;}
.page-faq .faq-crumb a:hover,
.page-faq .faq-crumb a:focus-visible{color:var(--cyan);}
.page-faq .faq-crumb__sep{color:rgba(147,168,162,.5);}
.page-faq .faq-crumb span[aria-current]{color:var(--mist);}

.page-faq .faq-hero{display:grid;gap:26px;margin-top:18px;}
.page-faq .faq-hero h1{
  font-size:clamp(32px,5.6vw,60px);
  line-height:1.03;
  letter-spacing:.004em;
  margin-top:14px;
  max-width:20ch;
}
.page-faq .faq-hero__lead{
  margin:18px 0 0;
  max-width:56ch;
  font-size:15px;
  line-height:1.85;
  color:var(--faq-soft);
}
.page-faq .faq-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;}
.page-faq .faq-hero__panel{
  border:1px solid var(--line-cyan);
  border-radius:var(--r-lg);
  padding:22px 20px;
  background:linear-gradient(158deg, rgba(53,240,200,.12), rgba(12,59,49,.72) 55%, rgba(4,23,15,.9));
  box-shadow:var(--shadow-deep);
}
.page-faq .faq-hero__panel-title{
  margin:0;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--cyan);
  text-transform:uppercase;
}
.page-faq .faq-path{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:11px;}
.page-faq .faq-path li{display:flex;gap:12px;align-items:baseline;font-size:13.5px;line-height:1.55;color:rgba(244,248,246,.9);}
.page-faq .faq-path__no{
  flex:none;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.06em;
  color:var(--amber);
}
.page-faq .faq-hero__note{
  margin:18px 0 0;
  padding-top:14px;
  border-top:1px dashed rgba(53,240,200,.28);
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.08em;
  color:var(--sage);
}

.page-faq .faq-steps-wrap{padding-top:clamp(46px,6vw,78px);padding-bottom:0;}
.page-faq .faq-head{max-width:64ch;}
.page-faq .faq-head h2{margin-top:12px;}
.page-faq .faq-head__sub{margin:12px 0 0;font-size:14.5px;line-height:1.8;color:var(--faq-dim);}

.page-faq .faq-figure{
  margin:24px 0 0;
  border:1px solid var(--faq-line);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:rgba(4,23,15,.55);
}
.page-faq .faq-figure img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;}
.page-faq .faq-figure figcaption{
  padding:10px 16px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--sage);
  background:rgba(4,23,15,.7);
  border-top:1px solid var(--faq-line);
}

.page-faq .faq-steps{
  list-style:none;
  margin:22px 0 0;
  padding:0;
  display:grid;
  gap:14px;
  position:relative;
}
.page-faq .faq-step{
  position:relative;
  z-index:1;
  background:var(--faq-card);
  border:1px solid var(--faq-line);
  border-radius:var(--r-md);
  padding:20px 20px 22px;
  transition:border-color .2s ease, background .2s ease;
}
.page-faq .faq-step:hover{border-color:rgba(53,240,200,.45);}
.page-faq .faq-step__no{
  display:block;
  font-family:var(--font-mono);
  font-size:28px;
  line-height:1;
  letter-spacing:.02em;
  color:var(--cyan);
}
.page-faq .faq-step--amber .faq-step__no{color:var(--amber);}
.page-faq .faq-step--blue .faq-step__no{color:var(--blue);}
.page-faq .faq-step h3{margin:14px 0 8px;}
.page-faq .faq-step p{margin:0;font-size:13.8px;line-height:1.78;color:var(--faq-soft);}

.page-faq .faq-layout{display:grid;gap:30px;margin-top:clamp(40px,6vw,72px);}
.page-faq .faq-toc{
  border:1px solid var(--faq-line);
  border-radius:var(--r-md);
  padding:16px 16px 14px;
  background:rgba(4,23,15,.55);
}
.page-faq .faq-toc__title{
  margin:0 0 10px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.2em;
  color:var(--sage);
  text-transform:uppercase;
}
.page-faq .faq-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;counter-reset:none;}
.page-faq .faq-toc a{
  display:flex;
  gap:10px;
  align-items:baseline;
  padding:8px 9px;
  border-radius:var(--r-sm);
  font-size:13.2px;
  line-height:1.45;
  color:rgba(244,248,246,.8);
  text-decoration:none;
  transition:background .18s ease, color .18s ease;
}
.page-faq .faq-toc a span{font-family:var(--font-mono);font-size:10.5px;color:var(--sage);}
.page-faq .faq-toc a:hover,
.page-faq .faq-toc a:focus-visible{background:rgba(53,240,200,.1);color:var(--cyan);}
.page-faq .faq-toc a:hover span,
.page-faq .faq-toc a:focus-visible span{color:var(--cyan);}

.page-faq .faq-body{display:grid;gap:clamp(34px,5vw,58px);min-width:0;}
.page-faq .faq-block{scroll-margin-top:108px;min-width:0;}
.page-faq .faq-p{
  margin:18px 0 0;
  max-width:62ch;
  font-size:14.8px;
  line-height:1.85;
  color:var(--faq-soft);
}

.page-faq .faq-notes{
  list-style:none;
  margin:20px 0 0;
  padding:0;
  display:grid;
  gap:14px;
}
.page-faq .faq-notes li{
  border-left:2px solid rgba(53,240,200,.5);
  padding:1px 0 1px 14px;
  font-size:13.5px;
  line-height:1.72;
  color:var(--faq-soft);
}
.page-faq .faq-notes strong{display:block;margin-bottom:3px;font-size:14px;font-weight:600;color:var(--mist);}

.page-faq .faq-matrix{
  margin-top:20px;
  border:1px solid var(--faq-line);
  border-radius:var(--r-md);
  overflow:hidden;
  background:rgba(4,23,15,.5);
}
.page-faq .faq-matrix__row{
  display:grid;
  grid-template-columns:1.15fr 1fr 1fr;
  border-top:1px solid var(--faq-line);
}
.page-faq .faq-matrix__row:first-child{border-top:0;background:rgba(12,59,49,.6);}
.page-faq .faq-matrix__row > *{
  padding:11px 10px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.05em;
  display:flex;
  align-items:center;
}
.page-faq .faq-matrix__row > :first-child{
  font-family:var(--font-body);
  font-size:13px;
  letter-spacing:0;
  color:rgba(244,248,246,.86);
}
.page-faq .faq-matrix__axis--home{color:var(--home);justify-content:center;}
.page-faq .faq-matrix__axis--away{color:var(--away);justify-content:center;}
.page-faq .faq-mx{
  position:relative;
  justify-content:center;
  cursor:default;
  outline-offset:-2px;
  transition:background .18s ease;
}
.page-faq .faq-mx--home{color:var(--home);}
.page-faq .faq-mx--away{color:var(--away);}
.page-faq .faq-mx::after{
  content:attr(data-hint);
  position:absolute;
  inset:3px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  background:var(--cyan);
  color:var(--ink);
  font-size:10.5px;
  letter-spacing:.06em;
  opacity:0;
  transition:opacity .18s ease;
}
.page-faq .faq-mx:hover::after,
.page-faq .faq-mx:focus-visible::after{opacity:1;}

.page-faq .faq-fields{
  list-style:none;
  margin:20px 0 0;
  padding:0;
  display:grid;
  gap:1px;
  background:var(--faq-line);
  border:1px solid var(--faq-line);
  border-radius:var(--r-md);
  overflow:hidden;
}
.page-faq .faq-fields li{
  display:grid;
  gap:4px;
  padding:13px 16px;
  background:var(--faq-card);
}
.page-faq .faq-fields__k{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  color:var(--amber);
}
.page-faq .faq-fields__v{font-size:13.5px;line-height:1.65;color:var(--faq-soft);}

.page-faq .faq-list{margin-top:20px;display:grid;gap:10px;counter-reset:q;}
.page-faq .faq-item{
  border:1px solid var(--faq-line);
  border-radius:var(--r-md);
  background:rgba(4,23,15,.5);
  overflow:hidden;
  transition:border-color .18s ease, background .18s ease;
}
.page-faq .faq-item:hover{border-color:rgba(147,168,162,.4);}
.page-faq .faq-item[open]{border-color:rgba(53,240,200,.42);background:rgba(12,59,49,.55);}
.page-faq .faq-item summary{
  display:flex;
  gap:12px;
  align-items:baseline;
  padding:15px 16px;
  font-size:14.5px;
  font-weight:600;
  line-height:1.55;
  color:var(--mist);
  cursor:pointer;
  list-style:none;
}
.page-faq .faq-item summary::-webkit-details-marker{display:none;}
.page-faq .faq-item summary::before{
  content:counter(q,decimal-leading-zero);
  counter-increment:q;
  flex:none;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--cyan);
}
.page-faq .faq-item summary::after{
  content:"+";
  margin-left:auto;
  flex:none;
  font-family:var(--font-mono);
  font-size:15px;
  line-height:1;
  color:var(--sage);
}
.page-faq .faq-item[open] summary::after{content:"–";color:var(--cyan);}
.page-faq .faq-item__body{
  padding:0 16px 16px 42px;
  font-size:13.8px;
  line-height:1.82;
  color:var(--faq-soft);
}

.page-faq .faq-help{
  border:1px solid rgba(242,163,58,.38);
  border-left:3px solid var(--amber);
  border-radius:var(--r-md);
  padding:22px 20px;
  background:linear-gradient(118deg, rgba(242,163,58,.12), rgba(4,23,15,.55) 62%);
}
.page-faq .faq-help h2{font-size:clamp(21px,2.6vw,27px);}
.page-faq .faq-help__lead{
  margin:12px 0 0;
  max-width:58ch;
  font-size:14px;
  line-height:1.8;
  color:var(--faq-soft);
}
.page-faq .faq-help__list{
  list-style:none;
  margin:18px 0 0;
  padding:0;
  display:grid;
  gap:9px;
}
.page-faq .faq-help__list li{display:flex;gap:12px;align-items:baseline;font-size:13.5px;}
.page-faq .faq-help__k{
  flex:none;
  width:36px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.14em;
  color:var(--sage);
}
.page-faq .faq-help__v{color:var(--mist);font-family:var(--font-mono);font-size:12.5px;letter-spacing:.02em;word-break:break-word;}
.page-faq .faq-help__tip{
  margin:16px 0 0;
  padding-top:14px;
  border-top:1px dashed rgba(242,163,58,.35);
  font-size:13px;
  line-height:1.7;
  color:var(--faq-dim);
}
.page-faq .faq-help__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}

@media (min-width:700px){
  .page-faq .faq-notes{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
  .page-faq .faq-fields{grid-template-columns:repeat(2,minmax(0,1fr));}
  .page-faq .faq-matrix__row > *{padding:12px 16px;font-size:12px;}
  .page-faq .faq-matrix__row > :first-child{font-size:13.5px;}
}

@media (min-width:780px){
  .page-faq .faq-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
  .page-faq .faq-steps::before{
    content:"";
    position:absolute;
    top:34px;
    left:7%;
    right:7%;
    height:1px;
    background:linear-gradient(90deg, rgba(53,240,200,0), rgba(53,240,200,.55), rgba(53,240,200,.55), rgba(53,240,200,0));
    z-index:0;
  }
  .page-faq .faq-step{padding:22px 20px 24px;}
}

@media (min-width:960px){
  .page-faq .faq-hero{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:48px;align-items:end;}
  .page-faq .faq-hero__panel{padding:26px 24px;}
  .page-faq .faq-layout{grid-template-columns:236px minmax(0,1fr);gap:52px;align-items:start;}
  .page-faq .faq-toc{position:sticky;top:104px;}
  .page-faq .faq-fields{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (min-width:1200px){
  .page-faq .faq-hero h1{max-width:18ch;}
  .page-faq .faq-body{gap:64px;}
}
<<<PAGE_CSS_END>>>
<<<END>>>

<main id="main-content" class="page-faq">
  <div class="bsp-container">
    <nav class="bsp-breadcrumb faq-crumb" aria-label="页面位置">
      <a href="/">首页</a><span class="faq-crumb__sep" aria-hidden="true">/</span><span aria-current="page">使用教程</span>
    </nav>

    <header class="faq-hero">
      <div class="faq-hero__copy">
        <p class="bsp-kicker">操作指引 · V3.1 正式通道</p>
        <h1>三步走进新版专区，把球队资料翻到手边</h1>
        <p class="faq-hero__lead">如果你从旧版一路用到现在，必一赛场不必让你重新学一遍：必一老用户PC端栏目的位置、筛选习惯都保留着，新版主要在打开速度和宽屏看板上做了加法。下面按真实操作顺序拆开讲，边看边点，几分钟就能把一支球队的主客场表现翻到眼前。</p>
        <div class="faq-hero__actions">
          <a class="bsp-btn bsp-btn--primary bsp-cta" href="/apps/">进入新版专区<span class="bsp-cta__arrow" aria-hidden="true">→</span></a>
          <a class="bsp-btn bsp-btn--ghost" href="#qa">先看常见问题</a>
        </div>
      </div>
      <aside class="faq-hero__panel" aria-label="操作概览">
        <p class="faq-hero__panel-title">一条完整动线</p>
        <ol class="faq-path">
          <li><span class="faq-path__no">01</span>页头点击「进入新版专区」</li>
          <li><span class="faq-path__no">02</span>左栏进入老用户 PC 端栏目</li>
          <li><span class="faq-path__no">03</span>挑专题，或直接查球队资料卡</li>
        </ol>
        <p class="faq-hero__note">7 类统计标签 · 1,280 支球队档案</p>
      </aside>
    </header>

    <section class="bsp-section faq-steps-wrap" id="steps" aria-labelledby="steps-title">
      <div class="faq-head">
        <p class="bsp-kicker">从进入到打开</p>
        <h2 id="steps-title">三步进入新版专区</h2>
        <p class="faq-head__sub">路径短，回退也短。顺着页面层级往回退就能逐层返回，不必重新找入口。</p>
      </div>

      <figure class="faq-figure">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="三个编号面板由荧光青连线串联，示意从首页入口经 PC 端栏目到球队资料的操作流程">
        <figcaption>入口 → 栏目 → 资料，全程三步。</figcaption>
      </figure>

      <ol class="faq-steps">
        <li class="faq-step faq-step--cyan">
          <span class="faq-step__no">01</span>
          <h3>点开页头入口</h3>
          <p>点击页面右上角的「进入新版专区」，直接落到 V3.1 通道。首页专题区块里的同色按钮，去的是同一个地方。</p>
        </li>
        <li class="faq-step faq-step--amber">
          <span class="faq-step__no">02</span>
          <h3>走左栏进栏目</h3>
          <p>查看新版专区左侧栏目树，第一组就是给老用户保留的 PC 端栏目入口。展开后能看到球队资料、赛季对比与统计筛选三个分组。</p>
        </li>
        <li class="faq-step faq-step--blue">
          <span class="faq-step__no">03</span>
          <h3>选专题或查球队</h3>
          <p>挑一个联赛专题，用主客场标签把范围收窄。手上有明确球队名时，直接在搜索框输入，两三次点击即可打开对应资料卡。</p>
        </li>
      </ol>
    </section>

    <div class="faq-layout">
      <nav class="faq-toc" aria-label="教程目录">
        <p class="faq-toc__title">目录</p>
        <ol>
          <li><a href="#steps"><span>01</span>三步进入新版专区</a></li>
          <li><a href="#column"><span>02</span>PC 端栏目里有什么</a></li>
          <li><a href="#tags"><span>03</span>标签怎么组合</a></li>
          <li><a href="#season"><span>04</span>查一支球队</a></li>
          <li><a href="#qa"><span>05</span>常见问题</a></li>
          <li><a href="#help"><span>06</span>还需要人帮</a></li>
        </ol>
      </nav>

      <div class="faq-body">
        <section class="faq-block" id="column" aria-labelledby="column-title">
          <div class="faq-head">
            <p class="bsp-kicker">位置感</p>
            <h2 id="column-title">PC 端栏目里有什么，怎么不迷路</h2>
            <p class="faq-head__sub">整块界面分成三竖条：左边是栏目，中间是列表，右边是标签与快捷筛选。记住这个顺序，走到哪儿都能自己回来。</p>
          </div>

          <figure class="faq-figure">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="PC 窗口轮廓内的三列栏目分区线框，配琥珀橙主场标签与电光蓝客场标签色块" loading="lazy" decoding="async">
            <figcaption>左栏目、中列表、右标签，顶部常驻返回路径。</figcaption>
          </figure>

          <ul class="faq-notes">
            <li><strong>左侧栏目树</strong>联赛专题、球队资料、赛季对比、版本说明四组固定排序，展开状态会被记住。</li>
            <li><strong>中间内容区</strong>专题与资料卡共用一列，列表顶部挂着当前筛选条件和清除按钮。</li>
            <li><strong>右侧标签栏</strong>主客场与统计维度放在一起，勾选即生效，不需要再按提交。</li>
          </ul>

          <p class="faq-p">顶部有一条常驻的位置提示，写着「联赛 / 专题 / 详情」这样的层级。点其中任意一级都能回到上一层，比连点后退更省事。宽屏下右侧标签栏会一直停在那里，往下翻列表也不会跑掉。</p>
        </section>

        <section class="faq-block" id="tags" aria-labelledby="tags-title">
          <div class="faq-head">
            <p class="bsp-kicker">筛选</p>
            <h2 id="tags-title">主客场标签与统计维度，怎么叠着用</h2>
            <p class="faq-head__sub">先定视角，再加维度。主场用暖橙、客场用冷蓝，任何一步都能看清自己站在哪一边。</p>
          </div>

          <p class="faq-p">入口处的两个标签决定视角：点主场，整页数字都换成球队在自己场地打出的一组；点客场，同理换成另一组。定好视角后，再从统计维度里挑一项叠上去，行列就收成你想要的那一小块。</p>

          <div class="faq-matrix" role="table" aria-label="主客场视角与统计维度的组合示例">
            <div class="faq-matrix__row faq-matrix__row--head" role="row">
              <span role="columnheader">统计维度</span>
              <span class="faq-matrix__axis faq-matrix__axis--home" role="columnheader">主场</span>
              <span class="faq-matrix__axis faq-matrix__axis--away" role="columnheader">客场</span>
            </div>
            <div class="faq-matrix__row" role="row">
              <span role="rowheader">进失球</span>
              <span class="faq-mx faq-mx--home" role="cell" tabindex="0" data-hint="主场 · 进失球">主视角</span>
              <span class="faq-mx faq-mx--away" role="cell" tabindex="0" data-hint="客场 · 进失球">客视角</span>
            </div>
            <div class="faq-matrix__row" role="row">
              <span role="rowheader">控球</span>
              <span class="faq-mx faq-mx--home" role="cell" tabindex="0" data-hint="主场 · 控球">主视角</span>
              <span class="faq-mx faq-mx--away" role="cell" tabindex="0" data-hint="客场 · 控球">客视角</span>
            </div>
            <div class="faq-matrix__row" role="row">
              <span role="rowheader">射门</span>
              <span class="faq-mx faq-mx--home" role="cell" tabindex="0" data-hint="主场 · 射门">主视角</span>
              <span class="faq-mx faq-mx--away" role="cell" tabindex="0" data-hint="客场 · 射门">客视角</span>
            </div>
            <div class="faq-matrix__row" role="row">
              <span role="rowheader">角球</span>
              <span class="faq-mx faq-mx--home" role="cell" tabindex="0" data-hint="主场 · 角球">主视角</span>
              <span class="faq-mx faq-mx--away" role="cell" tabindex="0" data-hint="客场 · 角球">客视角</span>
            </div>
            <div class="faq-matrix__row" role="row">
              <span role="rowheader">犯规</span>
              <span class="faq-mx faq-mx--home" role="cell" tabindex="0" data-hint="主场 · 犯规">主视角</span>
              <span class="faq-mx faq-mx--away" role="cell" tabindex="0" data-hint="客场 · 犯规">客视角</span>
            </div>
            <div class="faq-matrix__row" role="row">
              <span role="rowheader">近期状态</span>
              <span class="faq-mx faq-mx--home" role="cell" tabindex="0" data-hint="主场 · 近期状态">主视角</span>
              <span class="faq-mx faq-mx--away" role="cell" tabindex="0" data-hint="客场 · 近期状态">客视角</span>
            </div>
          </div>

          <p class="faq-p">看完一场比赛想再翻数据时，常见的顺序是：先看整场比分，再切主客场视角看半场差异，最后叠一项射门或控球，基本能还原比赛是被什么拉开的。用户平均一次访问会翻到 4.6 个标签，这条路走起来并不绕。</p>
        </section>

        <section class="faq-block" id="season" aria-labelledby="season-title">
          <div class="faq-head">
            <p class="bsp-kicker">资料卡</p>
            <h2 id="season-title">2024 赛季的球队资料，怎么查最快</h2>
            <p class="faq-head__sub">一张资料卡把球队的赛季面貌压在一屏里，字段顺序固定，看第二支球队时不用重新适应。</p>
          </div>

          <p class="faq-p">在栏目搜索框输入球队名，或从联赛专题页进入后点球队的文字标，都能打开同一张资料卡。列表默认按联赛分组，同一联赛内按球队名称排序，翻两屏就能扫完一个联赛。</p>

          <ul class="faq-fields">
            <li><span class="faq-fields__k">主客场战绩</span><span class="faq-fields__v">主客两栏并排，胜平负与场均得失球同屏呈现</span></li>
            <li><span class="faq-fields__k">进失球</span><span class="faq-fields__v">赛季累计与场均两个数值，可切到近期区间看变化</span></li>
            <li><span class="faq-fields__k">近期状态</span><span class="faq-fields__v">最近若干场的连续走势，用色块长短表示高低</span></li>
            <li><span class="faq-fields__k">交锋记录</span><span class="faq-fields__v">与同联赛对手的历史交手，可只看主场或只看客场</span></li>
          </ul>

          <p class="faq-p">筛选用的是「联赛 → 球队 → 主客场 → 统计维度」这条顺序，每选一层，列表就少一截。资料卡以 2024 赛季为基准，该赛季的资料完整率达到 96%，少数球队的早期赛季字段还在补齐，遇到空缺会直接留白，不填估算值。</p>
        </section>

        <section class="faq-block" id="qa" aria-labelledby="qa-title">
          <div class="faq-head">
            <p class="bsp-kicker">问答</p>
            <h2 id="qa-title">八个最常被问到的问题</h2>
            <p class="faq-head__sub">点开看答案，再点一次收起。问题按你可能遇到的先后排。</p>
          </div>

          <div class="faq-list">
            <details class="faq-item">
              <summary>从首页最快进新版专区，走哪条路？</summary>
              <div class="faq-item__body">点页头右上角的「进入新版专区」按钮，一步到位。首页专题区块下方的同色按钮指向同一入口，只是屏幕位置不同。</div>
            </details>
            <details class="faq-item">
              <summary>V3.1 和我以前用的版本，差别大吗？</summary>
              <div class="faq-item__body">界面骨架沿用老结构，栏目名和筛选位置都留着，不需要重新记一遍。变化在于页面加载平均提速 38%，入口固定在页头，1440px 以上宽屏可以打开双栏看板，把两支球队并排放在一起看。</div>
            </details>
            <details class="faq-item">
              <summary>同一个数字在两处看到的不一样，先看哪个？</summary>
              <div class="faq-item__body">先看资料卡，它以 2024 赛季的汇总为基准，变动较少。专题页里的统计会跟着赛程每日推进，短时间内的数值可能与资料卡不同步。把两处页面链接一并发给客服，我们能直接定位到具体字段。</div>
            </details>
            <details class="faq-item">
              <summary>手机上能用大屏看板模式吗？</summary>
              <div class="faq-item__body">看板专为 1440px 以上宽屏准备，手机上会自动换成单列卡片视图，主客场标签照样能点。移动端首屏加载控制在 1.8 秒内（4G 环境），网络一般时建议直接进专题列表。</div>
            </details>
            <details class="faq-item">
              <summary>以前收藏的专题链接打不开了，怎么找回来？</summary>
              <div class="faq-item__body">从首页专题入口，或从新版专区里的联赛分组重新走一遍，按联赛名和主客场标签组合，基本能翻回原来的页面。收藏夹里的旧地址随版本调整偶尔会失效，建议收藏栏目入口而不是长链接。</div>
            </details>
            <details class="faq-item">
              <summary>筛选标签能一次叠几个？</summary>
              <div class="faq-item__body">主客场二选一作为视角，再叠一项统计维度，这是最稳的组合。近期状态可以和任意一项统计同时勾选，用来观察球队近况与整季数据之间的落差。</div>
            </details>
            <details class="faq-item">
              <summary>球队资料更新到哪个赛季了？</summary>
              <div class="faq-item__body">当前以 2024 赛季为准，覆盖 1,280 支球队档案。赛季期间每天都有新的比分与统计摘要，常规周更新不少于 12 篇，可在赛场笔记里按更新时间倒序查看。</div>
            </details>
            <details class="faq-item">
              <summary>要反馈问题，提前准备什么最快？</summary>
              <div class="faq-item__body">准备好页面链接、使用的设备和浏览器、涉及的联赛与球队名，以及当时勾选的标签组合。这些信息一并写进邮件，客服不用来回追问就能直接查。</div>
            </details>
          </div>
        </section>

        <section class="faq-block faq-help" id="help" aria-labelledby="help-title">
          <h2 id="help-title">操作卡住了，直接找人</h2>
          <p class="faq-help__lead">工作日 9:00–18:00 客服在线，邮件平均 4 小时内回复。贵州地区的用户可申请本地化支持，反馈访问与使用问题时我们会优先跟进。</p>
          <ul class="faq-help__list">
            <li><span class="faq-help__k">邮箱</span><span class="faq-help__v">contact@bi-sports.com.cn</span></li>
            <li><span class="faq-help__k">电话</span><span class="faq-help__v">400-1240-7205</span></li>
            <li><span class="faq-help__k">时间</span><span class="faq-help__v">工作日 9:00–18:00</span></li>
          </ul>
          <p class="faq-help__tip">写信时附上出问题那个页面的链接，我们能更快复现你的操作步骤。</p>
          <div class="faq-help__actions">
            <a class="bsp-btn bsp-btn--primary bsp-cta" href="/connect/">去联系通道<span class="bsp-cta__arrow" aria-hidden="true">→</span></a>
            <a class="bsp-btn bsp-btn--ghost" href="/notes/">看看赛场笔记</a>
          </div>
        </section>

        <div class="bsp-tick" aria-hidden="true"></div>
      </div>
    </div>
  </div>
</main>

.page-faq{
  --faq-card:#082a22;
  --faq-line:rgba(147,168,162,.22);
  --faq-soft:rgba(244,248,246,.78);
  --faq-dim:rgba(244,248,246,.6);
  background:
    radial-gradient(120% 55% at 88% -8%, rgba(53,240,200,.10), transparent 62%),
    radial-gradient(90% 50% at 4% 30%, rgba(76,141,255,.07), transparent 60%),
    var(--ink);
  color:var(--mist);
  font-family:var(--font-body);
  padding-top:clamp(18px,3vw,34px);
  padding-bottom:clamp(52px,8vw,104px);
}
.page-faq a{color:inherit;}
.page-faq h1,
.page-faq h2,
.page-faq h3{font-family:var(--font-display);font-weight:700;margin:0;}
.page-faq h2{font-size:clamp(24px,3.4vw,34px);line-height:1.14;letter-spacing:.01em;}
.page-faq h3{font-size:16.5px;line-height:1.3;letter-spacing:.01em;}

.page-faq .faq-crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;color:var(--sage);}
.page-faq .faq-crumb a{color:var(--sage);text-decoration:none;transition:color .18s ease;}
.page-faq .faq-crumb a:hover,
.page-faq .faq-crumb a:focus-visible{color:var(--cyan);}
.page-faq .faq-crumb__sep{color:rgba(147,168,162,.5);}
.page-faq .faq-crumb span[aria-current]{color:var(--mist);}

.page-faq .faq-hero{display:grid;gap:26px;margin-top:18px;}
.page-faq .faq-hero h1{
  font-size:clamp(32px,5.6vw,60px);
  line-height:1.03;
  letter-spacing:.004em;
  margin-top:14px;
  max-width:20ch;
}
.page-faq .faq-hero__lead{
  margin:18px 0 0;
  max-width:56ch;
  font-size:15px;
  line-height:1.85;
  color:var(--faq-soft);
}
.page-faq .faq-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;}
.page-faq .faq-hero__panel{
  border:1px solid var(--line-cyan);
  border-radius:var(--r-lg);
  padding:22px 20px;
  background:linear-gradient(158deg, rgba(53,240,200,.12), rgba(12,59,49,.72) 55%, rgba(4,23,15,.9));
  box-shadow:var(--shadow-deep);
}
.page-faq .faq-hero__panel-title{
  margin:0;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--cyan);
  text-transform:uppercase;
}
.page-faq .faq-path{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:11px;}
.page-faq .faq-path li{display:flex;gap:12px;align-items:baseline;font-size:13.5px;line-height:1.55;color:rgba(244,248,246,.9);}
.page-faq .faq-path__no{flex:none;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;color:var(--amber);}
.page-faq .faq-hero__note{
  margin:18px 0 0;
  padding-top:14px;
  border-top:1px dashed rgba(53,240,200,.28);
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.08em;
  color:var(--sage);
}

.page-faq .faq-steps-wrap{padding-top:clamp(46px,6vw,78px);padding-bottom:0;}
.page-faq .faq-head{max-width:64ch;}
.page-faq .faq-head h2{margin-top:12px;}
.page-faq .faq-head__sub{margin:12px 0 0;font-size:14.5px;line-height:1.8;color:var(--faq-dim);}

.page-faq .faq-figure{
  margin:24px 0 0;
  border:1px solid var(--faq-line);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:rgba(4,23,15,.55);
}
.page-faq .faq-figure img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;}
.page-faq .faq-figure figcaption{
  padding:10px 16px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--sage);
  background:rgba(4,23,15,.7);
  border-top:1px solid var(--faq-line);
}

.page-faq .faq-steps{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px;position:relative;}
.page-faq .faq-step{
  position:relative;
  z-index:1;
  background:var(--faq-card);
  border:1px solid var(--faq-line);
  border-radius:var(--r-md);
  padding:20px 20px 22px;
  transition:border-color .2s ease, background .2s ease;
}
.page-faq .faq-step:hover{border-color:rgba(53,240,200,.45);}
.page-faq .faq-step__no{display:block;font-family:var(--font-mono);font-size:28px;line-height:1;letter-spacing:.02em;color:var(--cyan);}
.page-faq .faq-step--amber .faq-step__no{color:var(--amber);}
.page-faq .faq-step--blue .faq-step__no{color:var(--blue);}
.page-faq .faq-step h3{margin:14px 0 8px;}
.page-faq .faq-step p{margin:0;font-size:13.8px;line-height:1.78;color:var(--faq-soft);}

.page-faq .faq-layout{display:grid;gap:30px;margin-top:clamp(40px,6vw,72px);}
.page-faq .faq-toc{
  border:1px solid var(--faq-line);
  border-radius:var(--r-md);
  padding:16px 16px 14px;
  background:rgba(4,23,15,.55);
}
.page-faq .faq-toc__title{
  margin:0 0 10px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.2em;
  color:var(--sage);
  text-transform:uppercase;
}
.page-faq .faq-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;}
.page-faq .faq-toc a{
  display:flex;
  gap:10px;
  align-items:baseline;
  padding:8px 9px;
  border-radius:var(--r-sm);
  font-size:13.2px;
  line-height:1.45;
  color:rgba(244,248,246,.8);
  text-decoration:none;
  transition:background .18s ease, color .18s ease;
}
.page-faq .faq-toc a span{font-family:var(--font-mono);font-size:10.5px;color:var(--sage);}
.page-faq .faq-toc a:hover,
.page-faq .faq-toc a:focus-visible{background:rgba(53,240,200,.1);color:var(--cyan);}
.page-faq .faq-toc a:hover span,
.page-faq .faq-toc a:focus-visible span{color:var(--cyan);}

.page-faq .faq-body{display:grid;gap:clamp(34px,5vw,58px);min-width:0;}
.page-faq .faq-block{scroll-margin-top:108px;min-width:0;}
.page-faq .faq-p{margin:18px 0 0;max-width:62ch;font-size:14.8px;line-height:1.85;color:var(--faq-soft);}

.page-faq .faq-notes{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px;}
.page-faq .faq-notes li{
  border-left:2px solid rgba(53,240,200,.5);
  padding:1px 0 1px 14px;
  font-size:13.5px;
  line-height:1.72;
  color:var(--faq-soft);
}
.page-faq .faq-notes strong{display:block;margin-bottom:3px;font-size:14px;font-weight:600;color:var(--mist);}

.page-faq .faq-matrix{
  margin-top:20px;
  border:1px solid var(--faq-line);
  border-radius:var(--r-md);
  overflow:hidden;
  background:rgba(4,23,15,.5);
}
.page-faq .faq-matrix__row{display:grid;grid-template-columns:1.15fr 1fr 1fr;border-top:1px solid var(--faq-line);}
.page-faq .faq-matrix__row:first-child{border-top:0;background:rgba(12,59,49,.6);}
.page-faq .faq-matrix__row > *{
  padding:11px 10px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.05em;
  display:flex;
  align-items:center;
}
.page-faq .faq-matrix__row > :first-child{font-family:var(--font-body);font-size:13px;letter-spacing:0;color:rgba(244,248,246,.86);}
.page-faq .faq-matrix__axis--home{color:var(--home);justify-content:center;}
.page-faq .faq-matrix__axis--away{color:var(--away);justify-content:center;}
.page-faq .faq-mx{position:relative;justify-content:center;cursor:default;outline-offset:-2px;transition:background .18s ease;}
.page-faq .faq-mx--home{color:var(--home);}
.page-faq .faq-mx--away{color:var(--away);}
.page-faq .faq-mx::after{
  content:attr(data-hint);
  position:absolute;
  inset:3px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  background:var(--cyan);
  color:var(--ink);
  font-size:10.5px;
  letter-spacing:.06em;
  opacity:0;
  transition:opacity .18s ease;
}
.page-faq .faq-mx:hover::after,
.page-faq .faq-mx:focus-visible::after{opacity:1;}

.page-faq .faq-fields{
  list-style:none;
  margin:20px 0 0;
  padding:0;
  display:grid;
  gap:1px;
  background:var(--faq-line);
  border:1px solid var(--faq-line);
  border-radius:var(--r-md);
  overflow:hidden;
}
.page-faq .faq-fields li{display:grid;gap:4px;padding:13px 16px;background:var(--faq-card);}
.page-faq .faq-fields__k{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--amber);}
.page-faq .faq-fields__v{font-size:13.5px;line-height:1.65;color:var(--faq-soft);}

.page-faq .faq-list{margin-top:20px;display:grid;gap:10px;counter-reset:q;}
.page-faq .faq-item{
  border:1px solid var(--faq-line);
  border-radius:var(--r-md);
  background:rgba(4,23,15,.5);
  overflow:hidden;
  transition:border-color .18s ease, background .18s ease;
}
.page-faq .faq-item:hover{border-color:rgba(147,168,162,.4);}
.page-faq .faq-item[open]{border-color:rgba(53,240,200,.42);background:rgba(12,59,49,.55);}
.page-faq .faq-item summary{
  display:flex;
  gap:12px;
  align-items:baseline;
  padding:15px 16px;
  font-size:14.5px;
  font-weight:600;
  line-height:1.55;
  color:var(--mist);
  cursor:pointer;
  list-style:none;
}
.page-faq .faq-item summary::-webkit-details-marker{display:none;}
.page-faq .faq-item summary::before{
  content:counter(q,decimal-leading-zero);
  counter-increment:q;
  flex:none;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--cyan);
}
.page-faq .faq-item summary::after{
  content:"+";
  margin-left:auto;
  flex:none;
  font-family:var(--font-mono);
  font-size:15px;
  line-height:1;
  color:var(--sage);
}
.page-faq .faq-item[open] summary::after{content:"–";color:var(--cyan);}
.page-faq .faq-item__body{padding:0 16px 16px 42px;font-size:13.8px;line-height:1.82;color:var(--faq-soft);}

.page-faq .faq-help{
  border:1px solid rgba(242,163,58,.38);
  border-left:3px solid var(--amber);
  border-radius:var(--r-md);
  padding:22px 20px;
  background:linear-gradient(118deg, rgba(242,163,58,.12), rgba(4,23,15,.55) 62%);
}
.page-faq .faq-help h2{font-size:clamp(21px,2.6vw,27px);}
.page-faq .faq-help__lead{margin:12px 0 0;max-width:58ch;font-size:14px;line-height:1.8;color:var(--faq-soft);}
.page-faq .faq-help__list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px;}
.page-faq .faq-help__list li{display:flex;gap:12px;align-items:baseline;font-size:13.5px;}
.page-faq .faq-help__k{flex:none;width:36px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;color:var(--sage);}
.page-faq .faq-help__v{color:var(--mist);font-family:var(--font-mono);font-size:12.5px;letter-spacing:.02em;word-break:break-word;}
.page-faq .faq-help__tip{
  margin:16px 0 0;
  padding-top:14px;
  border-top:1px dashed rgba(242,163,58,.35);
  font-size:13px;
  line-height:1.7;
  color:var(--faq-dim);
}
.page-faq .faq-help__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}

@media (min-width:700px){
  .page-faq .faq-notes{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
  .page-faq .faq-fields{grid-template-columns:repeat(2,minmax(0,1fr));}
  .page-faq .faq-matrix__row > *{padding:12px 16px;font-size:12px;}
  .page-faq .faq-matrix__row > :first-child{font-size:13.5px;}
}

@media (min-width:780px){
  .page-faq .faq-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
  .page-faq .faq-steps::before{
    content:"";
    position:absolute;
    top:34px;
    left:7%;
    right:7%;
    height:1px;
    background:linear-gradient(90deg, rgba(53,240,200,0), rgba(53,240,200,.55), rgba(53,240,200,.55), rgba(53,240,200,0));
    z-index:0;
  }
  .page-faq .faq-step{padding:22px 20px 24px;}
}

@media (min-width:960px){
  .page-faq .faq-hero{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:48px;align-items:end;}
  .page-faq .faq-hero__panel{padding:26px 24px;}
  .page-faq .faq-layout{grid-template-columns:236px minmax(0,1fr);gap:52px;align-items:start;}
  .page-faq .faq-toc{position:sticky;top:104px;}
}

@media (min-width:1200px){
  .page-faq .faq-hero h1{max-width:18ch;}
  .page-faq .faq-body{gap:64px;}
}