.page-faq {
  --faq-rail: 252px;
  --faq-paper-accent: #0E7A63;
}

.page-faq .breadcrumb {
  margin-bottom: 20px;
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero {
  position: relative;
  padding: 22px 0 34px;
  overflow: hidden;
}

.page-faq .faq-hero::before {
  content: "";
  position: absolute;
  top: -60px;
  left: -12%;
  right: -12%;
  height: 380px;
  background:
    linear-gradient(118deg, rgba(56, 242, 198, 0.18) 0%, rgba(56, 242, 198, 0.05) 34%, rgba(255, 138, 61, 0.12) 62%, rgba(11, 43, 38, 0) 84%);
  clip-path: polygon(0 0, 100% 0, 84% 100%, 0 72%);
  pointer-events: none;
}

.page-faq .faq-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
  align-items: center;
}

.page-faq .faq-hero__copy h1 {
  margin: 14px 0 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(30px, 7.4vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--paper);
}

.page-faq .faq-hero__copy .lede {
  margin-top: 16px;
  max-width: 62ch;
  color: var(--text-soft);
}

.page-faq .faq-hero__figure {
  margin: 0;
  border-color: var(--line);
}

/* 入口路径提示条 */
.page-faq .faq-pathbar {
  margin-top: 26px;
  padding: 16px 18px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(150deg, rgba(18, 63, 54, 0.72), rgba(7, 28, 25, 0.55));
  box-shadow: var(--shadow-float);
}

.page-faq .faq-pathbar__label {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-faq .faq-pathbar__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.page-faq .faq-pathbar__node {
  position: relative;
  padding: 6px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  font-size: 13px;
  color: var(--text-soft);
  background: rgba(11, 43, 38, 0.5);
}

.page-faq .faq-pathbar__node:not(:last-child)::after {
  content: "›";
  position: absolute;
  right: -9px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-data);
  color: var(--cool);
}

.page-faq .faq-pathbar__node.is-active {
  border-color: var(--cyan);
  color: var(--ink);
  background: var(--cyan);
  font-weight: 600;
}

.page-faq .faq-pathbar__hint {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--text-faint);
}

/* ---------- 主体分栏 ---------- */
.page-faq .faq-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

/* 问题索引 */
.page-faq .faq-index {
  padding: 16px 16px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(18, 63, 54, 0.5), rgba(11, 43, 38, 0.28));
}

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

.page-faq .faq-index .toc-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 12px 0 0;
  padding: 0 0 6px;
  list-style: none;
  scrollbar-width: thin;
}

.page-faq .faq-index .toc-item {
  flex: 0 0 auto;
}

.page-faq .faq-index .toc-link {
  display: block;
  padding: 7px 13px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  font-size: 13px;
  white-space: nowrap;
  color: var(--text-soft);
  text-decoration: none;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.page-faq .faq-index .toc-link:hover {
  color: var(--paper);
  border-color: var(--line);
}

.page-faq .faq-index .toc-link[aria-current="true"] {
  color: var(--ink);
  background: var(--cyan);
  border-color: var(--cyan);
  font-weight: 600;
}

.page-faq .faq-index__note {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-faint);
}

/* ---------- 问答区块 ---------- */
.page-faq .faq-block {
  padding: 26px 0 30px;
  border-top: 1px solid var(--line-soft);
  scroll-margin-top: 108px;
}

.page-faq .faq-block:first-child {
  padding-top: 4px;
  border-top: 0;
}

.page-faq .faq-block__head .tag {
  margin-bottom: 12px;
}

.page-faq .faq-block__title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(22px, 4.4vw, 34px);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--paper);
}

.page-faq .faq-block__desc {
  margin: 12px 0 0;
  max-width: 68ch;
  color: var(--text-soft);
}

/* 步骤清单 */
.page-faq .faq-steps {
  display: grid;
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.page-faq .faq-step {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: linear-gradient(170deg, rgba(18, 63, 54, 0.52), rgba(11, 43, 38, 0.3));
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.page-faq .faq-step:hover {
  transform: translateY(-2px);
  border-color: var(--line);
  box-shadow: var(--shadow-card);
}

.page-faq .faq-step__num {
  font-family: var(--font-data);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--cyan);
}

.page-faq .faq-step__title {
  margin: 0 0 6px;
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--paper);
}

.page-faq .faq-step__body p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text-soft);
}

/* 要点列表 */
.page-faq .faq-points {
  display: grid;
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.page-faq .faq-point {
  padding: 16px 18px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(7, 28, 25, 0.42);
}

.page-faq .faq-point__title {
  margin: 0 0 6px;
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--paper);
}

.page-faq .faq-point p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text-soft);
}

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

/* 可展开答案 */
.page-faq .faq-details {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.page-faq .faq-details details {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(7, 28, 25, 0.45);
  overflow: hidden;
}

.page-faq .faq-details summary {
  position: relative;
  padding: 14px 46px 14px 16px;
  cursor: pointer;
  list-style: none;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--paper);
  transition: color 0.25s var(--ease);
}

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

.page-faq .faq-details summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  font-family: var(--font-data);
  font-size: 18px;
  color: var(--cyan);
  transition: transform 0.3s var(--ease);
}

.page-faq .faq-details details[open] summary {
  color: var(--cyan);
}

.page-faq .faq-details details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.page-faq .faq-answer {
  padding: 0 16px 16px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-soft);
  border-top: 1px solid var(--line-soft);
  padding-top: 14px;
}

/* ---------- 纸面数据面板 ---------- */
.page-faq .faq-block--paper {
  margin: 12px 0 30px;
  padding: 26px 20px 28px;
  border: 0;
  border-radius: var(--radius-l);
  background: linear-gradient(158deg, var(--paper) 0%, var(--paper-2) 100%);
  box-shadow: var(--shadow-card);
  color: var(--ink-text);
}

.page-faq .faq-block--paper .faq-block__title {
  color: var(--ink);
}

.page-faq .faq-block--paper .faq-block__desc {
  color: var(--ink-text-soft);
}

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

.page-faq .faq-panel__list {
  display: grid;
  gap: 10px;
}

.page-faq .faq-point--paper {
  background: rgba(255, 255, 255, 0.62);
  border-color: var(--line-ink);
  border-left: 3px solid var(--faq-paper-accent);
}

.page-faq .faq-point--paper .faq-point__title {
  color: var(--ink);
}

.page-faq .faq-point--paper p {
  color: var(--ink-text-soft);
}

.page-faq .faq-point--paper a {
  color: var(--faq-paper-accent);
}

.page-faq .faq-panel__figure {
  margin: 0;
  align-self: start;
  border-color: var(--line-ink);
}

/* ---------- 联系支持 ---------- */
.page-faq .faq-block--support {
  margin-bottom: 40px;
}

.page-faq .faq-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 22px 0 0;
}

.page-faq .faq-contact__item {
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--cyan);
  border-radius: var(--radius-s);
  background: rgba(18, 63, 54, 0.4);
}

.page-faq .faq-contact__item dt {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cool);
}

.page-faq .faq-contact__item dd {
  margin: 6px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--paper);
  overflow-wrap: anywhere;
}

.page-faq .faq-contact__item .mono {
  color: var(--cyan);
}

.page-faq .faq-support__links {
  margin: 20px 0 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-soft);
}

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

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  .page-faq .faq-contact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .page-faq .faq-hero {
    padding: 32px 0 48px;
  }

  .page-faq .faq-hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 48px;
  }

  .page-faq .faq-panel-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 26px;
  }

  .page-faq .faq-block--paper {
    padding: 34px 32px 34px;
  }
}

@media (min-width: 980px) {
  .page-faq .faq-shell {
    grid-template-columns: var(--faq-rail) minmax(0, 1fr);
    gap: 52px;
  }

  .page-faq .faq-index {
    position: sticky;
    top: 104px;
    padding: 20px 18px;
  }

  .page-faq .faq-index .toc-list {
    flex-direction: column;
    gap: 4px;
    overflow: visible;
    padding-bottom: 0;
  }

  .page-faq .faq-index .toc-item {
    flex: 1 1 auto;
  }

  .page-faq .faq-index .toc-link {
    border: 0;
    border-left: 2px solid var(--line-soft);
    border-radius: 0;
    padding: 9px 10px;
    white-space: normal;
    font-size: 14px;
  }

  .page-faq .faq-index .toc-link:hover {
    background: rgba(56, 242, 198, 0.08);
  }

  .page-faq .faq-index .toc-link[aria-current="true"] {
    background: rgba(56, 242, 198, 0.12);
    border-left-color: var(--cyan);
    color: var(--cyan);
    font-weight: 600;
  }

  .page-faq .faq-step {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 18px;
    padding: 18px 20px;
  }

  .page-faq .faq-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
<<<END>>>

<main id="main-content" class="page-faq">
  <section class="faq-hero">
    <div class="container container--wide">
      <nav class="breadcrumb" aria-label="页面位置">
        <ol class="breadcrumb-list">
          <li class="breadcrumb-item"><a href="/">首页总览</a></li>
          <li class="breadcrumb-item breadcrumb-current" aria-current="page">使用指南</li>
        </ol>
      </nav>

      <div class="faq-hero__grid">
        <div class="faq-hero__copy">
          <p class="eyebrow">入口路径 · 赛程查看 · 数据筛选</p>
          <h1>第一次用浏览器访问，先找到入口再看赛程</h1>
          <p class="lede">
            新版入口把赛程栏提到了首屏，你打开三升体育官网就能看到当前轮次的对阵，不必先展开两级菜单。
            下面按找入口、看轮次、切数据筛选、排查异常四种场景给出具体步骤，卡在哪一步都可以照着做。
          </p>

          <div class="faq-pathbar" aria-label="入口路径提示">
            <span class="faq-pathbar__label mono">入口路径</span>
            <ol class="faq-pathbar__list">
              <li class="faq-pathbar__node">打开首页</li>
              <li class="faq-pathbar__node is-active">首屏赛程栏</li>
              <li class="faq-pathbar__node">轮次卡片流</li>
              <li class="faq-pathbar__node">分布与面板</li>
            </ol>
            <p class="faq-pathbar__hint">荧光青亮起的一格，就是你此刻所在的层级。</p>
          </div>
        </div>

        <figure class="media-frame faq-hero__figure">
          <div class="media-frame__inner">
            <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="首屏三栏入口路径抽象示意图，赛程栏以荧光青高亮标出">
          </div>
          <figcaption class="media-frame__label">首屏入口路径 · 赛程栏高亮</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="section section--tight faq-body">
    <div class="container container--wide">
      <div class="faq-shell">
        <aside class="faq-index">
          <p class="faq-index__title mono">问题索引</p>
          <nav class="toc" aria-label="章节索引">
            <ul class="toc-list">
              <li class="toc-item"><a class="toc-link" href="#entry" data-toc-link>01 入口在哪</a></li>
              <li class="toc-item"><a class="toc-link" href="#fixtures" data-toc-link>02 查看赛程与轮次</a></li>
              <li class="toc-item"><a class="toc-link" href="#panel" data-toc-link>03 切换数据筛选</a></li>
              <li class="toc-item"><a class="toc-link" href="#trouble" data-toc-link>04 页面异常排查</a></li>
              <li class="toc-item"><a class="toc-link" href="#support" data-toc-link>05 联系客服</a></li>
            </ul>
          </nav>
          <p class="faq-index__note">入口路径与赛程问题，工作日都会有回复。</p>
        </aside>

        <div class="faq-answers">
          <section id="entry" class="faq-block" data-toc-section data-reveal>
            <header class="faq-block__head">
              <span class="tag">入口路径</span>
              <h2 class="faq-block__title">浏览器第一次打开，入口就在首屏上方</h2>
              <p class="faq-block__desc">
                旧版要展开顶级菜单、再展开二级菜单才能看到赛程。现在赛程栏直接排在首屏，第一次访问也能一步点到。
                按下面四步走，你会在一屏之内把入口、轮次和分布全部定位到。
              </p>
            </header>

            <ol class="faq-steps">
              <li class="faq-step">
                <span class="faq-step__num">01</span>
                <div class="faq-step__body">
                  <h3 class="faq-step__title">地址栏输入域名，进入首页</h3>
                  <p>页面加载完成后，视线落在上部即可。赛程栏已经排在首屏靠上的位置，不需要先点开任何菜单。</p>
                </div>
              </li>
              <li class="faq-step">
                <span class="faq-step__num">02</span>
                <div class="faq-step__body">
                  <h3 class="faq-step__title">看左侧的入口路径指示灯</h3>
                  <p>这一列显示你当前所处的层级，荧光青亮起的那一格就是入口位置；点其他格可以直接跳到对应区域。</p>
                </div>
              </li>
              <li class="faq-step">
                <span class="faq-step__num">03</span>
                <div class="faq-step__body">
                  <h3 class="faq-step__title">中间一列是轮次战绩卡片流</h3>
                  <p>卡片按轮次从上往下排，正面显示轮次编号和对阵摘要，想看哪一轮直接点哪一张。</p>
                </div>
              </li>
              <li class="faq-step">
                <span class="faq-step__num">04</span>
                <div class="faq-step__body">
                  <h3 class="faq-step__title">右侧一列放分布图与面板入口</h3>
                  <p>进失球分布小图和 2025 服务清单面板的入口都在这一列，需要核对数据或了解接入方式时从这里进。</p>
                </div>
              </li>
            </ol>

            <div class="faq-details">
              <details>
                <summary>以前要翻两级菜单，现在该怎么走？</summary>
                <div class="faq-answer">
                  旧版路径是先展开顶级菜单，再展开二级菜单，赛程才出现，第一次访问的人容易在中途走岔。
                  现在赛程栏提到了首屏，一步就能点到。如果你还习惯往菜单里找，直接看页面中部，轮次卡片就排在赛程栏下方。
                </div>
              </details>
              <details>
                <summary>手机上也能看到三栏排布吗？</summary>
                <div class="faq-answer">
                  窄屏下三栏会依次折成单列，入口路径提示条移到内容顶部，赛程栏仍然排在前面。
                  顺序不变、层级不变，只是从横向排布变成竖向阅读。
                </div>
              </details>
            </div>
          </section>

          <section id="fixtures" class="faq-block" data-toc-section data-reveal>
            <header class="faq-block__head">
              <span class="tag">赛程速览</span>
              <h2 class="faq-block__title">赛程怎么查，轮次战绩怎么展开</h2>
              <p class="faq-block__desc">
                赛程栏按开赛时间从早到晚排列，赛程与比分状态每 15 分钟刷新一次。
                轮次战绩默认收起，点开就地展开当轮详情，不影响你继续往下翻。
              </p>
            </header>

            <ul class="faq-points">
              <li class="faq-point">
                <h3 class="faq-point__title">查本轮对阵</h3>
                <p>首发日程从上往下依次排开，日期之间用分隔条切开，已结束、进行中、未开始用不同颜色标签区分，扫一眼就能判断进度。</p>
              </li>
              <li class="faq-point">
                <h3 class="faq-point__title">展开某一轮</h3>
                <p>在卡片流里点任意一张卡片，当轮的比分、开赛时间与进失球摘要就地展开；再点一次即可收起，列表回到紧凑状态。</p>
              </li>
              <li class="faq-point">
                <h3 class="faq-point__title">回看整个赛季</h3>
                <p>卡片流按时间倒序保留每一轮，往回翻就能看到赛季前段。2025 赛季的近期战绩都依照轮次排开，翻到哪一轮都能点开。</p>
              </li>
              <li class="faq-point">
                <h3 class="faq-point__title">定位到单场</h3>
                <p>只想看某一场时，在检索框输入球队名或轮次编号，列表会收窄到匹配结果，不必一轮一轮翻。</p>
              </li>
            </ul>
          </section>

          <section id="panel" class="faq-block faq-block--paper" data-toc-section data-reveal>
            <header class="faq-block__head">
              <span class="tag tag--paper">数据面板</span>
              <h2 class="faq-block__title">进失球分布与 2025 服务清单面板怎么切换</h2>
              <p class="faq-block__desc">
                两张面板并列放在同一页，切换维度、切换模块都不离开当前位置，看完分布就能接着挑要接入的模块。
              </p>
            </header>

            <div class="faq-panel-grid">
              <div class="faq-panel__list">
                <article class="faq-point faq-point--paper">
                  <h3 class="faq-point__title">分布图切换三个维度</h3>
                  <p>进失球分布支持按主客场、时间段、轮次三种维度切换，切换后图形与数值同步变化，用来比较同一支队伍在不同条件下的攻防走势。</p>
                </article>
                <article class="faq-point faq-point--paper">
                  <h3 class="faq-point__title">服务清单面板挑模块</h3>
                  <p>2025 服务清单面板提供 4 个核心模块与 18 个可配置数据卡片，你可以按自己的使用角色勾选常看的卡片，把面板调成顺手的排列。</p>
                </article>
                <article class="faq-point faq-point--paper">
                  <h3 class="faq-point__title">历史数据组合筛选</h3>
                  <p>关键词、赛季区间与赛事级别可以组合使用。平台已整理超过 320 个赛季的赛事档案，覆盖足球、篮球等 12 个运动项目。</p>
                </article>
                <article class="faq-point faq-point--paper">
                  <h3 class="faq-point__title">接入方式与周期</h3>
                  <p>提供 API 与嵌入面板两种接入方式，平均接入周期为 5 个工作日。具体的模块清单与接入说明放在<a href="/solutions/">方案中心</a>。</p>
                </article>
              </div>

              <figure class="media-frame media-frame--wide faq-panel__figure">
                <div class="media-frame__inner">
                  <img src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="筛选标签与进失球分布图表组合的抽象示意，暖橙与荧光青配色" loading="lazy" decoding="async">
                </div>
                <figcaption class="media-frame__label">筛选标签 · 分布图表</figcaption>
              </figure>
            </div>
          </section>

          <section id="trouble" class="faq-block" data-toc-section data-reveal>
            <header class="faq-block__head">
              <span class="tag">异常排查</span>
              <h2 class="faq-block__title">页面没按预期显示时的处理办法</h2>
              <p class="faq-block__desc">
                多数情况是浏览器缓存或窗口宽度造成的。按下面的顺序试一遍，通常几步之内就能恢复正常显示。
              </p>
            </header>

            <div class="faq-details">
              <details>
                <summary>打开还是旧版页面</summary>
                <div class="faq-answer">
                  浏览器可能仍在用本机保存的旧资源。按 Ctrl+F5（Mac 用 Command+Shift+R）强制刷新一次；
                  如果仍无变化，清理最近的缓存记录后重新打开页面。
                </div>
              </details>
              <details>
                <summary>三栏被挤成了一列</summary>
                <div class="faq-answer">
                  浏览器窗口过窄时，三栏会依次折成单列，入口路径提示条会移到内容上方。
                  把窗口拉宽或改用桌面端查看，三栏排布就会恢复；这只是显示方式的变化，入口和赛程的位置关系没有变。
                </div>
              </details>
              <details>
                <summary>看不到入口路径提示</summary>
                <div class="faq-answer">
                  提示条固定在内容区上部，容易被浏览器工具栏遮住。按 F11 进入全屏，或者向下滚动一点就能看到；
                  也可以直接用顶部胶囊导航跳到赛程栏与数据面板。
                </div>
              </details>
              <details>
                <summary>比分长时间没有变化</summary>
                <div class="faq-answer">
                  赛程与比分状态每 15 分钟刷新一次。若超过这个间隔仍未更新，先刷新页面；
                  还是没有变化的话，发邮件说明是哪一轮、哪一场，我们会单独查一下。
                </div>
              </details>
              <details>
                <summary>点轮次卡片没有反应</summary>
                <div class="faq-answer">
                  先确认页面已经加载完成。若浏览器拦截了脚本，卡片会以展开的静态列表形式呈现，
                  轮次、比分和分布内容照样可以逐条阅读，不影响查看结果。
                </div>
              </details>
            </div>
          </section>

          <section id="support" class="faq-block faq-block--support" data-toc-section data-reveal>
            <header class="faq-block__head">
              <span class="tag tag--orange">联系客服</span>
              <h2 class="faq-block__title">入口或赛程卡住了，直接找我们</h2>
              <p class="faq-block__desc">
                找不到入口、赛程对不上、筛选没有结果，都可以直接联系客服。邮件标题注明“入口”或“赛程”，会优先安排处理。
              </p>
            </header>

            <dl class="faq-contact">
              <div class="faq-contact__item">
                <dt>客服邮箱</dt>
                <dd class="mono">service@sansheng-champion.com.cn</dd>
              </div>
              <div class="faq-contact__item">
                <dt>联系电话</dt>
                <dd class="mono">15741968531</dd>
              </div>
              <div class="faq-contact__item">
                <dt>对外联系地址</dt>
                <dd>湖北省武汉市洪山区珞喻路726号光谷体育产业园B座12层</dd>
              </div>
              <div class="faq-contact__item">
                <dt>回复时间</dt>
                <dd>工作日 9:00-18:00</dd>
              </div>
            </dl>

            <p class="faq-support__links">
              赛程更新与版本迭代发布在<a href="/information/">资讯中心</a>；
              需要长期合作或对接数据服务，走<a href="/connect/">联系通道</a>说明场景即可；
              想先了解面板能做什么，可以回到<a href="/">首页总览</a>从入口开始看。
            </p>
          </section>
        </div>
      </div>
    </div>
  </section>
</main>

.page-faq {
  --faq-rail: 252px;
  --faq-paper-accent: #0E7A63;
}

.page-faq .breadcrumb {
  margin-bottom: 20px;
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero {
  position: relative;
  padding: 22px 0 34px;
  overflow: hidden;
}

.page-faq .faq-hero::before {
  content: "";
  position: absolute;
  top: -60px;
  left: -12%;
  right: -12%;
  height: 380px;
  background: linear-gradient(118deg, rgba(56, 242, 198, 0.18) 0%, rgba(56, 242, 198, 0.05) 34%, rgba(255, 138, 61, 0.12) 62%, rgba(11, 43, 38, 0) 84%);
  clip-path: polygon(0 0, 100% 0, 84% 100%, 0 72%);
  pointer-events: none;
}

.page-faq .faq-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
  align-items: center;
}

.page-faq .faq-hero__copy h1 {
  margin: 14px 0 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(30px, 7.4vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--paper);
}

.page-faq .faq-hero__copy .lede {
  margin-top: 16px;
  max-width: 62ch;
  color: var(--text-soft);
}

.page-faq .faq-hero__figure {
  margin: 0;
  border-color: var(--line);
}

/* 入口路径提示条 */
.page-faq .faq-pathbar {
  margin-top: 26px;
  padding: 16px 18px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(150deg, rgba(18, 63, 54, 0.72), rgba(7, 28, 25, 0.55));
  box-shadow: var(--shadow-float);
}

.page-faq .faq-pathbar__label {
  display: inline-block;
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-faq .faq-pathbar__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.page-faq .faq-pathbar__node {
  position: relative;
  padding: 6px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  font-size: 13px;
  color: var(--text-soft);
  background: rgba(11, 43, 38, 0.5);
}

.page-faq .faq-pathbar__node:not(:last-child)::after {
  content: "›";
  position: absolute;
  right: -9px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-data);
  color: var(--cool);
}

.page-faq .faq-pathbar__node.is-active {
  border-color: var(--cyan);
  color: var(--ink);
  background: var(--cyan);
  font-weight: 600;
}

.page-faq .faq-pathbar__node.is-active::after {
  color: var(--cyan);
}

.page-faq .faq-pathbar__hint {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--text-faint);
}

/* ---------- 主体分栏 ---------- */
.page-faq .faq-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

/* 问题索引 */
.page-faq .faq-index {
  padding: 16px 16px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(18, 63, 54, 0.5), rgba(11, 43, 38, 0.28));
}

.page-faq .faq-index__title {
  margin: 0;
  font-family: var(--font-data);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-faq .faq-index .toc-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 12px 0 0;
  padding: 0 0 6px;
  list-style: none;
  scrollbar-width: thin;
}

.page-faq .faq-index .toc-item {
  flex: 0 0 auto;
}

.page-faq .faq-index .toc-link {
  display: block;
  padding: 7px 13px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  font-size: 13px;
  white-space: nowrap;
  color: var(--text-soft);
  text-decoration: none;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.page-faq .faq-index .toc-link:hover {
  color: var(--paper);
  border-color: var(--line);
}

.page-faq .faq-index .toc-link[aria-current="true"] {
  color: var(--ink);
  background: var(--cyan);
  border-color: var(--cyan);
  font-weight: 600;
}

.page-faq .faq-index__note {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-faint);
}

/* ---------- 问答区块 ---------- */
.page-faq .faq-block {
  padding: 26px 0 30px;
  border-top: 1px solid var(--line-soft);
  scroll-margin-top: 108px;
}

.page-faq .faq-block:first-child {
  padding-top: 4px;
  border-top: 0;
}

.page-faq .faq-block__head .tag {
  margin-bottom: 12px;
}

.page-faq .faq-block__title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(22px, 4.4vw, 34px);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--paper);
}

.page-faq .faq-block__desc {
  margin: 12px 0 0;
  max-width: 68ch;
  color: var(--text-soft);
}

/* 步骤清单 */
.page-faq .faq-steps {
  display: grid;
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.page-faq .faq-step {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: linear-gradient(170deg, rgba(18, 63, 54, 0.52), rgba(11, 43, 38, 0.3));
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.page-faq .faq-step:hover {
  transform: translateY(-2px);
  border-color: var(--line);
  box-shadow: var(--shadow-card);
}

.page-faq .faq-step__num {
  font-family: var(--font-data);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--cyan);
}

.page-faq .faq-step__title {
  margin: 0 0 6px;
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--paper);
}

.page-faq .faq-step__body p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text-soft);
}

/* 要点列表 */
.page-faq .faq-points {
  display: grid;
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.page-faq .faq-point {
  padding: 16px 18px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(7, 28, 25, 0.42);
}

.page-faq .faq-point__title {
  margin: 0 0 6px;
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--paper);
}

.page-faq .faq-point p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text-soft);
}

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

/* 可展开答案 */
.page-faq .faq-details {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.page-faq .faq-details details {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(7, 28, 25, 0.45);
  overflow: hidden;
}

.page-faq .faq-details summary {
  position: relative;
  padding: 14px 46px 14px 16px;
  cursor: pointer;
  list-style: none;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--paper);
  transition: color 0.25s var(--ease);
}

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

.page-faq .faq-details summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  font-family: var(--font-data);
  font-size: 18px;
  color: var(--cyan);
  transition: transform 0.3s var(--ease);
}

.page-faq .faq-details details[open] summary {
  color: var(--cyan);
}

.page-faq .faq-details details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.page-faq .faq-answer {
  padding: 14px 16px 16px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-soft);
  border-top: 1px solid var(--line-soft);
}

/* ---------- 纸面数据面板 ---------- */
.page-faq .faq-block--paper {
  margin: 12px 0 30px;
  padding: 26px 20px 28px;
  border: 0;
  border-radius: var(--radius-l);
  background: linear-gradient(158deg, var(--paper) 0%, var(--paper-2) 100%);
  box-shadow: var(--shadow-card);
  color: var(--ink-text);
}

.page-faq .faq-block--paper .faq-block__title {
  color: var(--ink);
}

.page-faq .faq-block--paper .faq-block__desc {
  color: var(--ink-text-soft);
}

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

.page-faq .faq-panel__list {
  display: grid;
  gap: 10px;
}

.page-faq .faq-point--paper {
  background: rgba(255, 255, 255, 0.62);
  border-color: var(--line-ink);
  border-left: 3px solid var(--faq-paper-accent);
}

.page-faq .faq-point--paper .faq-point__title {
  color: var(--ink);
}

.page-faq .faq-point--paper p {
  color: var(--ink-text-soft);
}

.page-faq .faq-point--paper a {
  color: var(--faq-paper-accent);
}

.page-faq .faq-panel__figure {
  margin: 0;
  align-self: start;
  border-color: var(--line-ink);
}

/* ---------- 联系客服 ---------- */
.page-faq .faq-block--support {
  margin-bottom: 40px;
}

.page-faq .faq-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 22px 0 0;
}

.page-faq .faq-contact__item {
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--cyan);
  border-radius: var(--radius-s);
  background: rgba(18, 63, 54, 0.4);
}

.page-faq .faq-contact__item dt {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cool);
}

.page-faq .faq-contact__item dd {
  margin: 6px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--paper);
  overflow-wrap: anywhere;
}

.page-faq .faq-contact__item .mono {
  font-family: var(--font-data);
  color: var(--cyan);
}

.page-faq .faq-support__links {
  margin: 20px 0 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-soft);
}

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

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  .page-faq .faq-contact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .page-faq .faq-hero {
    padding: 32px 0 48px;
  }

  .page-faq .faq-hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 48px;
  }

  .page-faq .faq-panel-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 26px;
  }

  .page-faq .faq-block--paper {
    padding: 34px 32px;
  }
}

@media (min-width: 980px) {
  .page-faq .faq-shell {
    grid-template-columns: var(--faq-rail) minmax(0, 1fr);
    gap: 52px;
  }

  .page-faq .faq-index {
    position: sticky;
    top: 104px;
    padding: 20px 18px;
  }

  .page-faq .faq-index .toc-list {
    flex-direction: column;
    gap: 4px;
    overflow: visible;
    padding-bottom: 0;
  }

  .page-faq .faq-index .toc-item {
    flex: 1 1 auto;
  }

  .page-faq .faq-index .toc-link {
    border: 0;
    border-left: 2px solid var(--line-soft);
    border-radius: 0;
    padding: 9px 10px;
    white-space: normal;
    font-size: 14px;
  }

  .page-faq .faq-index .toc-link:hover {
    background: rgba(56, 242, 198, 0.08);
  }

  .page-faq .faq-index .toc-link[aria-current="true"] {
    background: rgba(56, 242, 198, 0.12);
    border-left-color: var(--cyan);
    color: var(--cyan);
    font-weight: 600;
  }

  .page-faq .faq-step {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 18px;
    padding: 18px 20px;
  }

  .page-faq .faq-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
<<<END>>>