.page-faq {
  --faq-paper: #F7F1E6;
  --faq-dot: rgba(36, 28, 20, .24);
  --faq-soft: rgba(255, 106, 26, .1);
  display: block;
  background: var(--ink);
  color: var(--text);
  padding-bottom: 64px;
}

.page-faq .faq-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(158deg, var(--deck) 0%, var(--ink) 68%);
  border-bottom: 1px solid var(--steel);
  padding: 30px 0 34px;
}

.page-faq .faq-hero::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -120px;
  width: 260px;
  height: 170%;
  background: var(--orange);
  opacity: .14;
  transform: skewX(-8deg);
  pointer-events: none;
}

.page-faq .faq-hero__inner {
  position: relative;
}

.page-faq .faq-hero__kicker {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--orange);
  text-transform: uppercase;
}

.page-faq .faq-hero__title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 7vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 18em;
}

.page-faq .faq-hero__lede {
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
  max-width: 36em;
}

.page-faq .faq-stats {
  list-style: none;
  margin: 0 0 24px;
  padding: 14px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 34px;
  border-top: 1px solid var(--steel);
}

.page-faq .faq-stats__item {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.page-faq .faq-stats__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 26px;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: -0.02em;
}

.page-faq .faq-stats__label {
  font-size: 13px;
  color: var(--mist);
}

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

.page-faq .faq-hero__actions .btn {
  display: inline-block;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--dur), color var(--dur), border-color var(--dur);
}

.page-faq .faq-hero__actions .btn--primary {
  background: var(--orange);
  color: #14100b;
  border: 1px solid var(--orange);
  clip-path: polygon(0 0, 100% 0, 100% 68%, 96% 100%, 0 100%);
}

.page-faq .faq-hero__actions .btn--primary:hover,
.page-faq .faq-hero__actions .btn--primary:focus-visible {
  background: var(--amber);
  border-color: var(--amber);
}

.page-faq .faq-hero__actions .btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--steel);
}

.page-faq .faq-hero__actions .btn--ghost:hover,
.page-faq .faq-hero__actions .btn--ghost:focus-visible {
  border-color: var(--orange);
  color: var(--amber);
}

.page-faq .faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  padding-top: 26px;
}

.page-faq .faq-toc__panel {
  background: var(--deck);
  border: 1px solid var(--steel);
  padding: 16px 14px 10px;
}

.page-faq .faq-toc__label {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--mist);
}

.page-faq .toc-group {
  border-top: 1px solid rgba(30, 64, 89, .7);
}

.page-faq .toc-group__sum {
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 2px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  transition: color var(--dur);
}

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

.page-faq .toc-group__sum:hover {
  color: var(--amber);
}

.page-faq .toc-group__sum:focus-visible {
  outline: 2px solid var(--jade);
  outline-offset: 2px;
}

.page-faq .toc-group__num {
  font-size: 11px;
  color: var(--orange);
  letter-spacing: .06em;
}

.page-faq .toc-group__sum::after {
  content: "▾";
  margin-left: auto;
  font-size: 11px;
  color: var(--orange);
}

.page-faq .toc-group:not([open]) .toc-group__sum::after {
  content: "▸";
}

.page-faq .toc-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0 0 0 18px;
  border-left: 1px solid var(--steel);
}

.page-faq .toc-link {
  display: block;
  padding: 5px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur), border-color var(--dur);
}

.page-faq .toc-link:hover,
.page-faq .toc-link:focus-visible {
  color: var(--amber);
  border-bottom-color: var(--orange);
}

.page-faq .toc-link:focus-visible {
  outline: 2px solid var(--jade);
  outline-offset: 2px;
}

.page-faq .faq-body {
  background: var(--cream);
  color: var(--brown);
  border: 1px solid var(--steel);
  padding: 22px 18px 26px;
  min-width: 0;
}

.page-faq .faq-sec {
  padding-bottom: 22px;
}

.page-faq .faq-sec + .faq-sec {
  border-top: 1px solid var(--steel);
  padding-top: 24px;
}

.page-faq .faq-sec__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 12px;
}

.page-faq .faq-sec__num {
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--orange);
}

.page-faq .faq-sec__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 4.6vw, 27px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--brown);
}

.page-faq .faq-sec__note {
  margin-left: auto;
  font-size: 12px;
  font-family: var(--font-mono);
  color: #7c6a55;
}

.page-faq .faq-p {
  margin: 0 0 14px;
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--brown);
  max-width: 36em;
}

.page-faq .faq-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin: 0 0 16px;
}

.page-faq .faq-cat {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--orange);
}

.page-faq .faq-cat__item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 2px 10px;
  padding: 10px 0 10px 12px;
  border-bottom: 1px dotted var(--faq-dot);
}

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

.page-faq .faq-cat__num {
  grid-row: span 2;
  font-size: 22px;
  font-weight: 700;
  color: #b4520f;
  line-height: 1.1;
}

.page-faq .faq-cat__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--brown);
}

.page-faq .faq-cat__desc {
  font-size: 13px;
  line-height: 1.6;
  color: #5c4a37;
}

.page-faq .faq-figure {
  margin: 0;
}

.page-faq .faq-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  border: 1px solid var(--steel);
  background: var(--deck);
}

.page-faq .faq-figure figcaption {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #6f5d49;
}

.page-faq .qa {
  padding: 13px 0 12px;
  border-bottom: 1px dotted var(--faq-dot);
  scroll-margin-top: calc(var(--bar-h) + 20px);
}

.page-faq .qa:last-of-type {
  border-bottom: 0;
}

.page-faq .qa:target {
  background: #fff8ea;
  box-shadow: inset 3px 0 0 var(--orange);
  padding-left: 12px;
}

.page-faq .qa__q {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 9px;
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--brown);
}

.page-faq .qa__tag {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  padding: 2px 6px;
  color: #8f4508;
  background: var(--faq-soft);
  border: 1px solid rgba(143, 69, 8, .28);
}

.page-faq .qa__a {
  margin: 0;
  font-size: 15px;
  line-height: 1.78;
  color: #3a2f24;
  max-width: 36em;
}

.page-faq .faq-tip {
  margin: 14px 0 0;
  padding: 10px 12px;
  font-size: 13.5px;
  line-height: 1.7;
  color: #4a3c2c;
  background: rgba(30, 64, 89, .07);
  border-left: 2px solid var(--steel);
}

.page-faq .faq-tip a {
  color: #8f4508;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.page-faq .faq-tip a:hover,
.page-faq .faq-tip a:focus-visible {
  color: var(--orange);
  text-decoration-thickness: 3px;
}

.page-faq .legend {
  list-style: none;
  margin: 0 0 16px;
  padding: 12px 14px;
  display: grid;
  gap: 10px;
  background: #efe5d3;
  border: 1px solid rgba(30, 64, 89, .35);
}

.page-faq .legend__item {
  display: grid;
  grid-template-columns: 14px 68px minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  line-height: 1.6;
}

.page-faq .legend__name {
  font-weight: 700;
  color: var(--brown);
}

.page-faq .legend__desc {
  color: #5c4a37;
}

.page-faq .legend__dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  align-self: center;
}

.page-faq .legend__dot--amber {
  background: var(--gold);
}

.page-faq .legend__dot--mist {
  background: var(--mist);
}

.page-faq .faq-twocol {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-bottom: 4px;
}

.page-faq .steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}

.page-faq .steps__item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 0 0 14px;
}

.page-faq .steps__item:last-child {
  padding-bottom: 0;
}

.page-faq .steps__num {
  font-size: 19px;
  font-weight: 700;
  color: var(--orange);
  line-height: 1.3;
}

.page-faq .steps__name {
  display: block;
  font-size: 15px;
  color: var(--brown);
  margin-bottom: 2px;
}

.page-faq .steps__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: #3a2f24;
  max-width: 34em;
}

.page-faq .faq-figure--tight img {
  max-height: 240px;
  object-fit: cover;
}

.page-faq .faq-code {
  padding: 1px 5px;
  background: rgba(36, 28, 20, .08);
  border: 1px solid var(--faq-dot);
  font-size: 13px;
  color: #7a3a06;
}

.page-faq .faq-mail {
  margin: 4px 0 14px;
}

.page-faq .faq-mail .mail-btn {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 10px 16px;
  background: var(--brown);
  color: var(--cream);
  border: 1px solid var(--brown);
  cursor: pointer;
  transition: background var(--dur), border-color var(--dur);
}

.page-faq .faq-mail .mail-btn:hover,
.page-faq .faq-mail .mail-btn:focus-visible {
  background: var(--orange);
  border-color: var(--orange);
  color: #16110a;
}

.page-faq .faq-mail .mail-btn:focus-visible {
  outline: 2px solid var(--jade);
  outline-offset: 2px;
}

.page-faq .faq-mail .mail-btn__text {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: .01em;
}

.page-faq .faq-mail .mail-btn__hint {
  font-size: 11.5px;
  color: var(--amber);
  letter-spacing: .06em;
}

.page-faq .faq-mail .mail-btn:hover .mail-btn__hint,
.page-faq .faq-mail .mail-btn:focus-visible .mail-btn__hint {
  color: #3a1c04;
}

.page-faq .faq-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: #6f5d49;
  max-width: 36em;
}

.page-faq .faq-note a {
  color: #8f4508;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-faq .faq-note a:hover,
.page-faq .faq-note a:focus-visible {
  color: var(--orange);
  text-decoration-thickness: 3px;
}

.page-faq .breadcrumb {
  padding-top: 16px;
}

.page-faq .breadcrumb__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  font-size: 12.5px;
  color: var(--mist);
}

.page-faq .breadcrumb__link {
  color: var(--mist);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.page-faq .breadcrumb__link:hover,
.page-faq .breadcrumb__link:focus-visible {
  color: var(--amber);
  border-bottom-color: var(--orange);
}

.page-faq .breadcrumb__current {
  color: var(--cream);
}

.page-faq .breadcrumb__sep {
  color: var(--steel);
}

@media (min-width: 720px) {
  .page-faq .faq-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  .page-faq .faq-twocol {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: start;
  }

  .page-faq .faq-body {
    padding: 28px 26px 32px;
  }

  .page-faq .legend {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .page-faq .legend__item {
    grid-template-columns: 14px minmax(0, 1fr);
    grid-template-rows: auto auto;
  }

  .page-faq .legend__desc {
    grid-column: 2;
  }
}

@media (min-width: 980px) {
  .page-faq .faq-layout {
    grid-template-columns: 268px minmax(0, 1fr);
    gap: 36px;
    padding-top: 30px;
    align-items: start;
  }

  .page-faq .faq-toc {
    position: sticky;
    top: calc(var(--bar-h) + 18px);
    align-self: start;
    max-height: calc(100vh - var(--bar-h) - 40px);
    overflow-y: auto;
  }

  .page-faq .faq-body {
    padding: 34px 36px 38px;
  }

  .page-faq .faq-hero {
    padding: 40px 0 44px;
  }

  .page-faq .faq-stats {
    gap: 14px 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .qa,
  .page-faq .toc-link,
  .page-faq .mail-btn,
  .page-faq .btn {
    transition: none;
  }
}


<main id="main-content" class="page-faq">
  <nav class="breadcrumb container" aria-label="面包屑">
    <ol class="breadcrumb__list">
      <li class="breadcrumb__item"><a class="breadcrumb__link" href="/">赛场总览</a></li>
      <li class="breadcrumb__sep">/</li>
      <li class="breadcrumb__item"><span class="breadcrumb__current">使用指南</span></li>
    </ol>
  </nav>

  <header class="faq-hero">
    <div class="container faq-hero__inner">
      <p class="faq-hero__kicker mono">05 — 使用指南</p>
      <h1 class="faq-hero__title">赛程、访问、伤停标记，120 条条目逐项给答案</h1>
      <p class="faq-hero__lede">乐鱼赛场把内地体育赛事服务清单拆成一组组能单独查的问题：某轮对阵去哪个页面看、桌面端装好之后从哪启动、列表里的绿色圆点什么意思，找到那一条照着做完就行，不用等回复。</p>
      <ul class="faq-stats">
        <li class="faq-stats__item"><span class="faq-stats__num mono">120</span><span class="faq-stats__label">条服务条目</span></li>
        <li class="faq-stats__item"><span class="faq-stats__num mono">3</span><span class="faq-stats__label">类查阅场景</span></li>
        <li class="faq-stats__item"><span class="faq-stats__num mono">2h</span><span class="faq-stats__label">赛后发布间隔</span></li>
      </ul>
      <div class="faq-hero__actions">
        <a class="btn btn--primary" href="#overview">从清单总览开始</a>
        <a class="btn btn--ghost" href="/find-us/">写邮件问我们</a>
      </div>
    </div>
  </header>

  <div class="container faq-layout">
    <aside class="faq-toc">
      <nav class="faq-toc__panel" aria-label="指南目录">
        <p class="faq-toc__label mono">目录 / INDEX</p>

        <details class="toc-group" open>
          <summary class="toc-group__sum"><span class="toc-group__num mono">01</span>服务清单总览</summary>
          <ul class="toc-list">
            <li><a class="toc-link" href="#overview">三类条目各有多少</a></li>
            <li><a class="toc-link" href="#legend">伤停状态怎么看</a></li>
          </ul>
        </details>

        <details class="toc-group" open>
          <summary class="toc-group__sum"><span class="toc-group__num mono">02</span>赛事信息</summary>
          <ul class="toc-list">
            <li><a class="toc-link" href="#q-round-schedule">定位某一轮的对阵</a></li>
            <li><a class="toc-link" href="#q-report-time">战报几点能看到</a></li>
            <li><a class="toc-link" href="#q-clip-team">按球队筛集锦</a></li>
            <li><a class="toc-link" href="#q-league-topic">联赛专题里有啥</a></li>
            <li><a class="toc-link" href="#q-column-cadence">专家专栏更新节奏</a></li>
            <li><a class="toc-link" href="#q-team-file">球队资料查什么</a></li>
            <li><a class="toc-link" href="#q-archive">按比赛日翻旧战报</a></li>
          </ul>
        </details>

        <details class="toc-group" open>
          <summary class="toc-group__sum"><span class="toc-group__num mono">03</span>账号与访问</summary>
          <ul class="toc-list">
            <li><a class="toc-link" href="#q-need-login">要不要登录</a></li>
            <li><a class="toc-link" href="#q-launch">装完怎么启动</a></li>
            <li><a class="toc-link" href="#q-blank">页面打不开的排查</a></li>
            <li><a class="toc-link" href="#q-browser">浏览器兼容</a></li>
            <li><a class="toc-link" href="#q-narrow">窄屏能不能用</a></li>
            <li><a class="toc-link" href="#q-release-note">版本说明在哪</a></li>
          </ul>
        </details>

        <details class="toc-group" open>
          <summary class="toc-group__sum"><span class="toc-group__num mono">04</span>数据说明</summary>
          <ul class="toc-list">
            <li><a class="toc-link" href="#q-status-three">三种伤停状态</a></li>
            <li><a class="toc-link" href="#q-jade-dot">绿点代表什么</a></li>
            <li><a class="toc-link" href="#q-stat-update">统计多久更新</a></li>
            <li><a class="toc-link" href="#q-match-id">场次编号怎么用</a></li>
            <li><a class="toc-link" href="#q-three-clicks">查完一场要点几次</a></li>
            <li><a class="toc-link" href="#q-two-steps">查伤停走几步</a></li>
          </ul>
        </details>

        <details class="toc-group" open>
          <summary class="toc-group__sum"><span class="toc-group__num mono">05</span>桌面端操作</summary>
          <ul class="toc-list">
            <li><a class="toc-link" href="#desktop">两次点击查到伤停</a></li>
          </ul>
        </details>

        <details class="toc-group" open>
          <summary class="toc-group__sum"><span class="toc-group__num mono">06</span>还没对上号</summary>
          <ul class="toc-list">
            <li><a class="toc-link" href="#support">直接写信问</a></li>
          </ul>
        </details>
      </nav>
    </aside>

    <div class="faq-body">
      <section class="faq-sec" id="overview">
        <header class="faq-sec__head">
          <span class="faq-sec__num mono">01</span>
          <h2 class="faq-sec__title">服务清单总览</h2>
          <span class="faq-sec__note">120 条</span>
        </header>

        <p class="faq-p">按你遇上问题的时机分成三组：赛前的赛事信息 52 条，使用过程中的账号与访问 38 条，赛后的数据说明 30 条。先从下面挑出自己那一组，往下扫标题，多数问题三十秒内能对上号。</p>

        <div class="faq-split">
          <ul class="faq-cat">
            <li class="faq-cat__item">
              <span class="faq-cat__num mono">52</span>
              <span class="faq-cat__name">赛事信息</span>
              <span class="faq-cat__desc">赛程定位、战报归档、视频集锦、联赛专题与球队资料</span>
            </li>
            <li class="faq-cat__item">
              <span class="faq-cat__num mono">38</span>
              <span class="faq-cat__name">账号与访问</span>
              <span class="faq-cat__desc">桌面端启动、页面打不开、浏览器兼容与版本更新</span>
            </li>
            <li class="faq-cat__item">
              <span class="faq-cat__num mono">30</span>
              <span class="faq-cat__name">数据说明</span>
              <span class="faq-cat__desc">伤停状态标记、统计更新时间、场次编号与点击路径</span>
            </li>
          </ul>

          <figure class="faq-figure">
            <img src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="三层信息结构示意图，深蓝底上以橙色编号与细线划分出三个条目分区" loading="lazy" decoding="async">
            <figcaption>三组条目对应赛前准备、使用过程与赛后查看三个阶段</figcaption>
          </figure>
        </div>

        <p class="faq-p">拿不准该翻哪组时，记住一条：跟比赛内容有关的都在赛事信息，跟打开、进入、版本有关的都在账号与访问，跟数字和标记含义有关的都在数据说明。</p>
      </section>

      <section class="faq-sec" id="info">
        <header class="faq-sec__head">
          <span class="faq-sec__num mono">02</span>
          <h2 class="faq-sec__title">赛事信息：赛程、战报与集锦</h2>
          <span class="faq-sec__note">7 条</span>
        </header>

        <article class="qa" id="q-round-schedule">
          <h3 class="qa__q"><span class="qa__tag">赛事信息</span>怎么找到某一轮的完整对阵？</h3>
          <p class="qa__a">进入赛程归档后按赛季、轮次、球队三级收窄，单轮页面会把该轮全部场次一次列齐，每场都带视频集锦入口，不用一场一场点开找。</p>
        </article>

        <article class="qa" id="q-report-time">
          <h3 class="qa__q"><span class="qa__tag">赛事信息</span>战报什么时候能看到？</h3>
          <p class="qa__a">每个比赛日赛后两小时内完成发布。战报按比赛日归档，同一轮的多场内容顺序排开，向下滚动就能连着读完，不必回目录。</p>
        </article>

        <article class="qa" id="q-clip-team">
          <h3 class="qa__q"><span class="qa__tag">赛事信息</span>视频集锦能按球队筛吗？</h3>
          <p class="qa__a">可以。3,800 余条视频集锦按轮次与球队两个维度归档，每条都保留时长与场次编号，选好球队后能顺着链接跳到对应轮次。</p>
        </article>

        <article class="qa" id="q-league-topic">
          <h3 class="qa__q"><span class="qa__tag">赛事信息</span>联赛专题里包含哪些内容？</h3>
          <p class="qa__a">12 个常设联赛各有一个专题，里面分战报、专家专栏与球队资料三部分。同一支球队的三类内容在专题内连着看，不用来回切换。</p>
        </article>

        <article class="qa" id="q-column-cadence">
          <h3 class="qa__q"><span class="qa__tag">赛事信息</span>专家专栏多久更新一次？</h3>
          <p class="qa__a">16 位专栏作者按轮次发布，每轮更新 6 至 10 篇，与战报同一节奏上线，赛后两小时内可以一起看到。</p>
        </article>

        <article class="qa" id="q-team-file">
          <h3 class="qa__q"><span class="qa__tag">赛事信息</span>球队资料库能查到什么？</h3>
          <p class="qa__a">收录 480 支球队，含主场信息、近期战绩与伤停记录，并与战报、集锦互相链接，从资料页能直接进到该队最近一轮的比赛内容。</p>
        </article>

        <article class="qa" id="q-archive">
          <h3 class="qa__q"><span class="qa__tag">赛事信息</span>想翻几轮之前的旧战报怎么找？</h3>
          <p class="qa__a">4 月战报专栏已按比赛日整理上线，并与球队资料互相链接。从球队资料页进入，比按日期往下翻列表更快。</p>
        </article>

        <p class="faq-tip">顺着看更省事：<a href="/press/">战报与专栏</a>页面把当轮战报、集锦与专栏文章放在同一条阅读动线上。</p>
      </section>

      <section class="faq-sec" id="access">
        <header class="faq-sec__head">
          <span class="faq-sec__num mono">03</span>
          <h2 class="faq-sec__title">账号与访问</h2>
          <span class="faq-sec__note">6 条</span>
        </header>

        <article class="qa" id="q-need-login">
          <h3 class="qa__q"><span class="qa__tag">账号与访问</span>看赛程和战报需要登录吗？</h3>
          <p class="qa__a">不需要。全站页面为静态访问，打开赛程、战报和球队资料都不用登录，也不用填写任何信息。</p>
        </article>

        <article class="qa" id="q-launch">
          <h3 class="qa__q"><span class="qa__tag">账号与访问</span>桌面端装好之后从哪启动？</h3>
          <p class="qa__a">安装完成后从开始菜单或桌面图标启动，首次打开直接落在赛场总览，查伤停的入口在顶部命令栏，装好就能用。</p>
        </article>

        <article class="qa" id="q-blank">
          <h3 class="qa__q"><span class="qa__tag">账号与访问</span>页面打不开，先查哪几项？</h3>
          <p class="qa__a">按顺序来：先刷新，再换一个浏览器打开同一链接，然后检查网络与代理设置。三步都无效时，把链接发给客服邮箱，我们看具体页面。</p>
        </article>

        <article class="qa" id="q-browser">
          <h3 class="qa__q"><span class="qa__tag">账号与访问</span>支持哪些浏览器？</h3>
          <p class="qa__a">Chrome、Edge、Firefox 的当前版本都能正常打开，建议开启硬件加速让滚动更顺。版本过旧的浏览器可能出现排版错位。</p>
        </article>

        <article class="qa" id="q-narrow">
          <h3 class="qa__q"><span class="qa__tag">账号与访问</span>屏幕窄一点还能用吗？</h3>
          <p class="qa__a">能用。导航会折叠成下拉，赛程与战报仍可完整阅读，横向赛程带改为单列纵向排列，不需要左右拖动。</p>
        </article>

        <article class="qa" id="q-release-note">
          <h3 class="qa__q"><span class="qa__tag">账号与访问</span>版本更新说明在哪里看？</h3>
          <p class="qa__a">每月最后一个比赛周发布迭代说明，记录导航与数据字段的变化。桌面端当前在用版本为 v3.6，新版本包在下载中心统一放出。</p>
        </article>

        <p class="faq-tip">要重新安装或换一台电脑，去 <a href="/download/">下载中心</a> 取当前版本的安装包和系统要求。</p>
      </section>

      <section class="faq-sec" id="data">
        <header class="faq-sec__head">
          <span class="faq-sec__num mono">04</span>
          <h2 class="faq-sec__title">数据说明：标记与更新时间</h2>
          <span class="faq-sec__note">6 条</span>
        </header>

        <ul class="legend" id="legend">
          <li class="legend__item">
            <span class="status-dot" aria-hidden="true"></span>
            <span class="legend__name">已确认</span>
            <span class="legend__desc">这条伤停信息已经定稿并发布，可以照着看</span>
          </li>
          <li class="legend__item">
            <span class="legend__dot legend__dot--amber" aria-hidden="true"></span>
            <span class="legend__name">待更新</span>
            <span class="legend__desc">名单尚未公布或仍在变动，稍后再看这一条</span>
          </li>
          <li class="legend__item">
            <span class="legend__dot legend__dot--mist" aria-hidden="true"></span>
            <span class="legend__name">暂无记录</span>
            <span class="legend__desc">该队本轮没有查到伤停条目，并非等于全员可上</span>
          </li>
        </ul>

        <article class="qa" id="q-status-three">
          <h3 class="qa__q"><span class="qa__tag">数据说明</span>三种伤停状态分别代表什么？</h3>
          <p class="qa__a">已确认是信息已经定稿，待更新是名单还在变动，暂无记录是该队本轮没有查到条目。列表里直接显示状态，不用点进详情猜。</p>
        </article>

        <article class="qa" id="q-jade-dot">
          <h3 class="qa__q"><span class="qa__tag">数据说明</span>列表里的青瓷绿圆点是什么意思？</h3>
          <p class="qa__a">绿点表示这一条已完成发布，与“已确认”对应。琥珀点对应待更新，灰点对应暂无记录。看到一个点就知道这条要不要再看一次。</p>
        </article>

        <article class="qa" id="q-stat-update">
          <h3 class="qa__q"><span class="qa__tag">数据说明</span>统计数据什么时候更新？</h3>
          <p class="qa__a">每个比赛日赛后两小时内完成战报发布与统计更新。页面上带状态点的字段，就是最近一次更新之后的结果。</p>
        </article>

        <article class="qa" id="q-match-id">
          <h3 class="qa__q"><span class="qa__tag">数据说明</span>场次编号有什么用处？</h3>
          <p class="qa__a">场次编号是每场比赛的唯一标识，在战报、视频集锦与统计页出现在同一位置。把编号交给站内检索，就能直接落到那一场比赛。</p>
        </article>

        <article class="qa" id="q-three-clicks">
          <h3 class="qa__q"><span class="qa__tag">数据说明</span>查完一场比赛的统计要点几次？</h3>
          <p class="qa__a">平均 3 次点击，路径是比赛页、统计页、字段说明。v3.6 把这条路从 5 次压到 3 次，省下的都是翻页。</p>
        </article>

        <article class="qa" id="q-two-steps">
          <h3 class="qa__q"><span class="qa__tag">数据说明</span>查一支球队的伤停要走几步？</h3>
          <p class="qa__a">两步：先选联赛，再选球队，结果直接落在同一屏上，不需要再翻一页。</p>
        </article>
      </section>

      <section class="faq-sec" id="desktop">
        <header class="faq-sec__head">
          <span class="faq-sec__num mono">05</span>
          <h2 class="faq-sec__title">桌面端操作：两次点击查到伤停</h2>
        </header>

        <div class="faq-twocol">
          <ol class="steps">
            <li class="steps__item">
              <span class="steps__num mono">01</span>
              <div class="steps__body">
                <b class="steps__name">选联赛</b>
                <p class="steps__text">在顶部命令栏点“查伤停”，从 12 个常设联赛里点中你要看的那一个。</p>
              </div>
            </li>
            <li class="steps__item">
              <span class="steps__num mono">02</span>
              <div class="steps__body">
                <b class="steps__name">选球队</b>
                <p class="steps__text">联赛下直接列出球队，点中球队，本轮伤停名单与状态标记落在同一屏，不用再翻页。</p>
              </div>
            </li>
          </ol>

          <figure class="faq-figure faq-figure--tight">
            <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="两步流程示意图，两个方块由一支橙色箭头连接，示意选联赛与选球队" loading="lazy" decoding="async">
            <figcaption>两步之内出结果，中间没有中转页</figcaption>
          </figure>
        </div>

        <p class="faq-tip">手上有场次编号时更快：把 <span class="mono faq-code">LY-2604-018</span> 这样的编号放进站内检索，直接跳到那一场的赛程页，战报与集锦入口都在同一页上。</p>
      </section>

      <section class="faq-sec" id="support">
        <header class="faq-sec__head">
          <span class="faq-sec__num mono">06</span>
          <h2 class="faq-sec__title">还没对上号，直接写信问</h2>
        </header>

        <p class="faq-p">把页面链接和场次编号一起贴上，说明你看到的现象和期望的结果，我们按具体页面去找，比描述性文字快得多。合作与内容纠错也走同一个信箱。</p>

        <div class="faq-mail">
          <button class="mail-btn" type="button" data-copy-mail="kefu@web-leyu-h5.com.cn">
            <span class="mail-btn__text mono">kefu@web-leyu-h5.com.cn</span>
            <span class="mail-btn__hint" data-copy-hint>点击复制</span>
          </button>
        </div>

        <p class="faq-note">工作日 9:00–18:00 内回复。关于内容引用方式与浏览器兼容的细则，先看 <a href="/instructions/">使用说明</a>；需要完整联系方式，见 <a href="/find-us/">找到我们</a>。</p>
      </section>
    </div>
  </div>
</main>

.page-faq {
  --faq-paper: #F7F1E6;
  --faq-dot: rgba(36, 28, 20, .24);
  --faq-soft: rgba(255, 106, 26, .1);
  --faq-muted: #6f5d49;
  display: block;
  background: var(--ink);
  color: var(--text);
  padding-bottom: 64px;
}

.page-faq .faq-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(158deg, var(--deck) 0%, var(--ink) 68%);
  border-bottom: 1px solid var(--steel);
  padding: 30px 0 34px;
}

.page-faq .faq-hero::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -120px;
  width: 260px;
  height: 170%;
  background: var(--orange);
  opacity: .14;
  transform: skewX(-8deg);
  pointer-events: none;
}

.page-faq .faq-hero__inner {
  position: relative;
}

.page-faq .faq-hero__kicker {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--orange);
  text-transform: uppercase;
}

.page-faq .faq-hero__title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 7vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 18em;
}

.page-faq .faq-hero__lede {
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
  max-width: 36em;
}

.page-faq .faq-stats {
  list-style: none;
  margin: 0 0 24px;
  padding: 14px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 34px;
  border-top: 1px solid var(--steel);
}

.page-faq .faq-stats__item {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.page-faq .faq-stats__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 26px;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: -0.02em;
}

.page-faq .faq-stats__label {
  font-size: 13px;
  color: var(--mist);
}

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

.page-faq .faq-hero__actions .btn {
  display: inline-block;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--dur), color var(--dur), border-color var(--dur);
}

.page-faq .faq-hero__actions .btn--primary {
  background: var(--orange);
  color: #14100b;
  border: 1px solid var(--orange);
  clip-path: polygon(0 0, 100% 0, 100% 68%, 96% 100%, 0 100%);
}

.page-faq .faq-hero__actions .btn--primary:hover,
.page-faq .faq-hero__actions .btn--primary:focus-visible {
  background: var(--amber);
  border-color: var(--amber);
}

.page-faq .faq-hero__actions .btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--steel);
}

.page-faq .faq-hero__actions .btn--ghost:hover,
.page-faq .faq-hero__actions .btn--ghost:focus-visible {
  border-color: var(--orange);
  color: var(--amber);
}

.page-faq .faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  padding-top: 26px;
}

.page-faq .faq-toc__panel {
  background: var(--deck);
  border: 1px solid var(--steel);
  padding: 16px 14px 10px;
}

.page-faq .faq-toc__label {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--mist);
}

.page-faq .toc-group {
  border-top: 1px solid rgba(30, 64, 89, .7);
}

.page-faq .toc-group__sum {
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 2px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  transition: color var(--dur);
}

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

.page-faq .toc-group__sum:hover {
  color: var(--amber);
}

.page-faq .toc-group__sum:focus-visible {
  outline: 2px solid var(--jade);
  outline-offset: 2px;
}

.page-faq .toc-group__num {
  font-size: 11px;
  color: var(--orange);
  letter-spacing: .06em;
}

.page-faq .toc-group__sum::after {
  content: "▾";
  margin-left: auto;
  font-size: 11px;
  color: var(--orange);
}

.page-faq .toc-group:not([open]) .toc-group__sum::after {
  content: "▸";
}

.page-faq .toc-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0 0 0 18px;
  border-left: 1px solid var(--steel);
}

.page-faq .toc-link {
  display: block;
  padding: 5px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur), border-color var(--dur);
}

.page-faq .toc-link:hover,
.page-faq .toc-link:focus-visible {
  color: var(--amber);
  border-bottom-color: var(--orange);
}

.page-faq .toc-link:focus-visible {
  outline: 2px solid var(--jade);
  outline-offset: 2px;
}

.page-faq .faq-body {
  background: var(--cream);
  color: var(--brown);
  border: 1px solid var(--steel);
  padding: 22px 18px 26px;
  min-width: 0;
}

.page-faq .faq-sec {
  padding-bottom: 22px;
  scroll-margin-top: calc(var(--bar-h) + 20px);
}

.page-faq .faq-sec + .faq-sec {
  border-top: 1px solid var(--steel);
  padding-top: 24px;
}

.page-faq .faq-sec__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 12px;
}

.page-faq .faq-sec__num {
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--orange);
}

.page-faq .faq-sec__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 4.6vw, 27px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--brown);
}

.page-faq .faq-sec__note {
  margin-left: auto;
  font-size: 12px;
  font-family: var(--font-mono);
  color: #7c6a55;
}

.page-faq .faq-p {
  margin: 0 0 14px;
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--brown);
  max-width: 36em;
}

.page-faq .faq-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin: 0 0 16px;
}

.page-faq .faq-cat {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--orange);
}

.page-faq .faq-cat__item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 2px 10px;
  padding: 10px 0 10px 12px;
  border-bottom: 1px dotted var(--faq-dot);
}

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

.page-faq .faq-cat__num {
  grid-row: span 2;
  font-size: 22px;
  font-weight: 700;
  color: #b4520f;
  line-height: 1.1;
}

.page-faq .faq-cat__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--brown);
}

.page-faq .faq-cat__desc {
  font-size: 13px;
  line-height: 1.6;
  color: #5c4a37;
}

.page-faq .faq-figure {
  margin: 0;
}

.page-faq .faq-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  border: 1px solid var(--steel);
  background: var(--deck);
}

.page-faq .faq-figure figcaption {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--faq-muted);
}

.page-faq .qa {
  padding: 13px 0 12px;
  border-bottom: 1px dotted var(--faq-dot);
  scroll-margin-top: calc(var(--bar-h) + 20px);
}

.page-faq .qa:last-of-type {
  border-bottom: 0;
}

.page-faq .qa:target {
  background: #fff8ea;
  box-shadow: inset 3px 0 0 var(--orange);
  padding-left: 12px;
}

.page-faq .qa__q {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 9px;
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--brown);
}

.page-faq .qa__tag {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  padding: 2px 6px;
  color: #8f4508;
  background: var(--faq-soft);
  border: 1px solid rgba(143, 69, 8, .28);
}

.page-faq .qa__a {
  margin: 0;
  font-size: 15px;
  line-height: 1.78;
  color: #3a2f24;
  max-width: 36em;
}

.page-faq .faq-tip {
  margin: 14px 0 0;
  padding: 10px 12px;
  font-size: 13.5px;
  line-height: 1.7;
  color: #4a3c2c;
  background: rgba(30, 64, 89, .07);
  border-left: 2px solid var(--steel);
}

.page-faq .faq-tip a {
  color: #8f4508;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.page-faq .faq-tip a:hover,
.page-faq .faq-tip a:focus-visible {
  color: var(--orange);
  text-decoration-thickness: 3px;
}

.page-faq .legend {
  list-style: none;
  margin: 0 0 16px;
  padding: 12px 14px;
  display: grid;
  gap: 10px;
  background: #efe5d3;
  border: 1px solid rgba(30, 64, 89, .35);
}

.page-faq .legend__item {
  display: grid;
  grid-template-columns: 14px 68px minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  line-height: 1.6;
}

.page-faq .legend__name {
  font-weight: 700;
  color: var(--brown);
}

.page-faq .legend__desc {
  color: #5c4a37;
}

.page-faq .legend__dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  align-self: center;
}

.page-faq .legend__dot--amber {
  background: var(--gold);
}

.page-faq .legend__dot--mist {
  background: var(--mist);
}

.page-faq .faq-twocol {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-bottom: 4px;
}

.page-faq .steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-faq .steps__item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 0 0 14px;
}

.page-faq .steps__item:last-child {
  padding-bottom: 0;
}

.page-faq .steps__num {
  font-size: 19px;
  font-weight: 700;
  color: var(--orange);
  line-height: 1.3;
}

.page-faq .steps__name {
  display: block;
  font-size: 15px;
  color: var(--brown);
  margin-bottom: 2px;
}

.page-faq .steps__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: #3a2f24;
  max-width: 34em;
}

.page-faq .faq-figure--tight img {
  max-height: 240px;
  object-fit: cover;
}

.page-faq .faq-code {
  padding: 1px 5px;
  background: rgba(36, 28, 20, .08);
  border: 1px solid var(--faq-dot);
  font-size: 13px;
  color: #7a3a06;
}

.page-faq .faq-mail {
  margin: 4px 0 14px;
}

.page-faq .faq-mail .mail-btn {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 10px 16px;
  background: var(--brown);
  color: var(--cream);
  border: 1px solid var(--brown);
  cursor: pointer;
  transition: background var(--dur), border-color var(--dur), color var(--dur);
}

.page-faq .faq-mail .mail-btn:hover,
.page-faq .faq-mail .mail-btn:focus-visible {
  background: var(--orange);
  border-color: var(--orange);
  color: #16110a;
}

.page-faq .faq-mail .mail-btn:focus-visible {
  outline: 2px solid var(--jade);
  outline-offset: 2px;
}

.page-faq .faq-mail .mail-btn__text {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: .01em;
}

.page-faq .faq-mail .mail-btn__hint {
  font-size: 11.5px;
  color: var(--amber);
  letter-spacing: .06em;
}

.page-faq .faq-mail .mail-btn:hover .mail-btn__hint,
.page-faq .faq-mail .mail-btn:focus-visible .mail-btn__hint {
  color: #3a1c04;
}

.page-faq .faq-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--faq-muted);
  max-width: 36em;
}

.page-faq .faq-note a {
  color: #8f4508;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-faq .faq-note a:hover,
.page-faq .faq-note a:focus-visible {
  color: var(--orange);
  text-decoration-thickness: 3px;
}

.page-faq .breadcrumb {
  padding-top: 16px;
}

.page-faq .breadcrumb__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  font-size: 12.5px;
  color: var(--mist);
}

.page-faq .breadcrumb__link {
  color: var(--mist);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.page-faq .breadcrumb__link:hover,
.page-faq .breadcrumb__link:focus-visible {
  color: var(--amber);
  border-bottom-color: var(--orange);
}

.page-faq .breadcrumb__current {
  color: var(--cream);
}

.page-faq .breadcrumb__sep {
  color: var(--steel);
}

@media (min-width: 720px) {
  .page-faq .faq-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  .page-faq .faq-twocol {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: start;
  }

  .page-faq .faq-body {
    padding: 28px 26px 32px;
  }

  .page-faq .legend {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .page-faq .legend__item {
    grid-template-columns: 14px minmax(0, 1fr);
    grid-template-rows: auto auto;
  }

  .page-faq .legend__desc {
    grid-column: 2;
  }
}

@media (min-width: 980px) {
  .page-faq .faq-layout {
    grid-template-columns: 268px minmax(0, 1fr);
    gap: 36px;
    padding-top: 30px;
    align-items: start;
  }

  .page-faq .faq-toc {
    position: sticky;
    top: calc(var(--bar-h) + 18px);
    align-self: start;
    max-height: calc(100vh - var(--bar-h) - 40px);
    overflow-y: auto;
  }

  .page-faq .faq-body {
    padding: 34px 36px 38px;
  }

  .page-faq .faq-hero {
    padding: 40px 0 44px;
  }

  .page-faq .faq-stats {
    gap: 14px 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .qa,
  .page-faq .toc-link,
  .page-faq .mail-btn,
  .page-faq .faq-hero__actions .btn {
    transition: none;
  }
}