.page-faq {
  --faq-line: rgba(36, 67, 95, 0.72);
  --faq-line-soft: rgba(36, 67, 95, 0.4);
  --faq-sticky: calc(var(--header-h) + 28px);
  padding-bottom: 88px;
}

.page-faq a {
  color: var(--cyan);
  text-decoration-color: rgba(39, 225, 193, 0.4);
  text-underline-offset: 3px;
}

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

/* ---------- 首屏 ---------- */
.page-faq .faq-hero {
  padding-top: 28px;
  padding-bottom: 34px;
}

.page-faq .faq-hero__grid {
  display: grid;
  gap: 30px;
}

.page-faq .faq-hero h1 {
  margin: 14px 0 0;
  font-family: var(--font-light);
  font-weight: 300;
  font-size: clamp(2.1rem, 6.4vw, 4.1rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--paper);
}

.page-faq .faq-hero__intro {
  margin: 20px 0 0;
  max-width: 58ch;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--muted);
}

.page-faq .faq-hero__meter {
  position: relative;
  padding: 22px 20px 18px;
  border: 1px solid var(--faq-line);
  border-radius: 14px;
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(39, 225, 193, 0.16), transparent 58%),
    linear-gradient(160deg, rgba(16, 38, 61, 0.92), rgba(7, 17, 31, 0.7));
  overflow: hidden;
}

.page-faq .faq-hero__meter::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(143, 163, 184, 0.1) 0 1px,
    transparent 1px 24px
  );
  pointer-events: none;
}

.page-faq .faq-hero__meter-title {
  position: relative;
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--muted);
}

.page-faq .meter-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 14px;
  margin: 0;
}

.page-faq .meter dt {
  font-size: 0.76rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.page-faq .meter dd {
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-size: 1.55rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--amber);
}

.page-faq .meter dd span {
  margin-left: 3px;
  font-size: 0.72rem;
  color: var(--muted);
}

.page-faq .faq-hero__meter-note {
  position: relative;
  margin: 18px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--faq-line-soft);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--cyan);
}

/* ---------- 布局与粘性索引 ---------- */
.page-faq .faq-layout {
  display: grid;
  gap: 8px;
}

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

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

.page-faq .faq-section {
  padding: 38px 0 34px;
  border-top: 1px solid var(--faq-line);
}

.page-faq .faq-section:first-child {
  border-top: 1px solid var(--faq-line);
}

.page-faq .faq-section .section__title {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4.2vw, 2.2rem);
  line-height: 1.24;
  letter-spacing: -0.01em;
  color: var(--paper);
}

.page-faq .faq-section__lead {
  margin: 14px 0 0;
  max-width: 62ch;
  font-size: 0.97rem;
  line-height: 1.85;
  color: var(--muted);
}

.page-faq .faq-section__note {
  margin: 20px 0 0;
  max-width: 64ch;
  font-size: 0.86rem;
  line-height: 1.8;
  color: var(--muted);
}

/* ---------- 准备清单 ---------- */
.page-faq .ready-list {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}

.page-faq .ready-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 18px 0;
  border-top: 1px dashed var(--faq-line-soft);
}

.page-faq .ready-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.page-faq .ready-item__key {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  color: var(--amber);
}

.page-faq .ready-item__title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--paper);
}

.page-faq .ready-item p {
  margin: 6px 0 0;
  max-width: 60ch;
  font-size: 0.94rem;
  line-height: 1.8;
  color: var(--muted);
}

/* ---------- 五步 ---------- */
.page-faq .faq-steps {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}

.page-faq .faq-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--faq-line-soft);
}

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

.page-faq .faq-step__num {
  font-family: var(--font-mono);
  font-size: 1.9rem;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}

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

.page-faq .faq-step__body h3 {
  margin: 0;
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--paper);
}

.page-faq .faq-step__body p {
  margin: 8px 0 0;
  max-width: 62ch;
  font-size: 0.94rem;
  line-height: 1.8;
  color: var(--muted);
}

.page-faq .faq-step__do {
  display: flex;
  gap: 8px;
  align-items: baseline;
  color: var(--cyan);
  font-size: 0.86rem;
}

.page-faq .faq-step__do::before {
  content: "→";
  font-family: var(--font-mono);
  color: var(--cyan);
  flex: none;
}

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

.page-faq .media-frame img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: inherit;
}

/* ---------- 小屏与订阅 ---------- */
.page-faq .screen-grid {
  display: grid;
  gap: 26px;
  margin-top: 22px;
}

.page-faq .screen-text p {
  margin: 0 0 16px;
  max-width: 62ch;
  font-size: 0.96rem;
  line-height: 1.85;
  color: var(--muted);
}

.page-faq .screen-points {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-faq .screen-points li {
  position: relative;
  padding-left: 20px;
  font-size: 0.94rem;
  line-height: 1.8;
  color: var(--muted);
}

.page-faq .screen-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 10px;
  height: 2px;
  background: var(--cyan);
}

.page-faq .screen-points strong {
  color: var(--paper);
  font-weight: 600;
}

/* ---------- 常见异常 ---------- */
.page-faq .faults {
  position: relative;
  margin-top: 26px;
}

.page-faq .faults__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

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

.page-faq .faults__chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid var(--ink-700);
  border-radius: 999px;
  font-size: 0.84rem;
  color: var(--muted);
  background: rgba(16, 38, 61, 0.5);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

.page-faq .faults__chip:hover {
  color: var(--paper);
  border-color: var(--cyan);
}

.page-faq #fault-all:checked ~ .faults__chips label[for="fault-all"],
.page-faq #fault-start:checked ~ .faults__chips label[for="fault-start"],
.page-faq #fault-screen:checked ~ .faults__chips label[for="fault-screen"],
.page-faq #fault-error:checked ~ .faults__chips label[for="fault-error"],
.page-faq #fault-move:checked ~ .faults__chips label[for="fault-move"] {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--ink-900);
  font-weight: 600;
}

.page-faq .faults__radio:focus-visible ~ .faults__chips {
  outline: 2px solid var(--cyan);
  outline-offset: 6px;
  border-radius: 10px;
}

.page-faq #fault-start:checked ~ .faults__list .fault:not([data-cat="start"]),
.page-faq #fault-screen:checked ~ .faults__list .fault:not([data-cat="screen"]),
.page-faq #fault-error:checked ~ .faults__list .fault:not([data-cat="error"]),
.page-faq #fault-move:checked ~ .faults__list .fault:not([data-cat="move"]) {
  display: none;
}

.page-faq .fault {
  border-bottom: 1px solid var(--faq-line-soft);
}

.page-faq .faults__list .fault:first-child {
  border-top: 1px solid var(--faq-line);
}

.page-faq .fault__summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 32px 15px 0;
  cursor: pointer;
  list-style: none;
  font-size: 0.96rem;
  font-weight: 600;
  line-height: 1.55;
  color: var(--paper);
  transition: color var(--dur) var(--ease);
}

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

.page-faq .fault__summary:hover {
  color: var(--cyan-soft);
}

.page-faq .fault__summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 1.15rem;
  line-height: 1;
  color: var(--cyan);
}

.page-faq .fault[open] .fault__summary::after {
  content: "–";
}

.page-faq .fault__summary .tag {
  flex: none;
  white-space: nowrap;
}

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

.page-faq .fault__body {
  padding: 0 0 18px;
  max-width: 66ch;
  font-size: 0.92rem;
  line-height: 1.85;
  color: var(--muted);
}

.page-faq .fault__body p {
  margin: 0;
}

.page-faq .fault__body ol {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: fault-step;
  display: grid;
  gap: 6px;
}

.page-faq .fault__body li {
  position: relative;
  padding-left: 22px;
  counter-increment: fault-step;
}

.page-faq .fault__body li::before {
  content: counter(fault-step);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.95;
  color: var(--amber);
}

/* ---------- 老用户迁移 ---------- */
.page-faq .migrate-grid {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.page-faq .migrate-card {
  position: relative;
  padding: 20px 18px;
  border: 1px solid var(--faq-line);
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(16, 38, 61, 0.9), rgba(7, 17, 31, 0.55));
}

.page-faq .migrate-card:first-child {
  background:
    radial-gradient(130% 140% at 0% 0%, rgba(242, 184, 75, 0.16), transparent 60%),
    linear-gradient(150deg, rgba(16, 38, 61, 0.9), rgba(7, 17, 31, 0.55));
}

.page-faq .migrate-card__label {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--amber);
}

.page-faq .migrate-card h3 {
  margin: 0;
  font-size: 1.04rem;
  font-weight: 600;
  color: var(--paper);
}

.page-faq .migrate-card p {
  margin: 8px 0 0;
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--muted);
}

/* ---------- 联系支持 ---------- */
.page-faq .help-panel {
  display: grid;
  gap: 26px;
  margin-top: 24px;
  padding: 24px 20px;
  border: 1px solid var(--ink-700);
  border-radius: 14px;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(39, 225, 193, 0.14), transparent 58%),
    linear-gradient(160deg, rgba(11, 27, 46, 0.96), rgba(7, 17, 31, 0.72));
}

.page-faq .help-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--faq-line-soft);
}

.page-faq .help-row:first-child {
  padding-top: 0;
}

.page-faq .help-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-faq .help-row__key {
  flex: none;
  min-width: 76px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  padding-top: 4px;
}

.page-faq .help-row__val {
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--paper);
  word-break: break-word;
}

.page-faq .help-panel__title {
  margin: 0 0 14px;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--paper);
}

.page-faq .help-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.page-faq .help-list li {
  position: relative;
  padding-left: 20px;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--muted);
}

.page-faq .help-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 10px;
  height: 2px;
  background: var(--amber);
}

.page-faq .help-panel__note {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--faq-line-soft);
  font-size: 0.86rem;
  line-height: 1.8;
  color: var(--muted);
}

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  .page-faq .ready-item {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
  }

  .page-faq .ready-item__key {
    padding-top: 3px;
  }

  .page-faq .faq-step {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 22px;
    padding: 24px 0;
  }

  .page-faq .faq-step__num {
    font-size: 2.4rem;
  }

  .page-faq .help-row__key {
    min-width: 92px;
  }
}

@media (min-width: 860px) {
  .page-faq .faq-hero__grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: end;
    gap: 44px;
  }

  .page-faq .screen-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 36px;
  }

  .page-faq .migrate-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

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

@media (min-width: 1024px) {
  .page-faq .faq-layout {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 60px;
    align-items: start;
  }

  .page-faq .faq-index {
    display: block;
    position: sticky;
    top: var(--faq-sticky);
    padding-top: 42px;
  }

  .page-faq .faq-index__title {
    margin: 0 0 14px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: var(--muted);
  }

  .page-faq .faq-index ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
  }

  .page-faq .faq-index a {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 8px 10px;
    border-left: 1px solid transparent;
    border-radius: 0 6px 6px 0;
    font-size: 0.87rem;
    color: var(--muted);
    text-decoration: none;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
      background-color var(--dur) var(--ease);
  }

  .page-faq .faq-index a:hover,
  .page-faq .faq-index a:focus-visible {
    color: var(--cyan);
    border-left-color: var(--cyan);
    background: rgba(39, 225, 193, 0.07);
  }

  .page-faq .faq-index__n {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--amber);
  }

  .page-faq .faq-section {
    padding: 46px 0 40px;
  }
}

@media (min-width: 1180px) {
  .page-faq .faq-index {
    padding-top: 48px;
  }

  .page-faq .faq-hero__meter {
    padding: 26px 24px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faults__chip,
  .page-faq .fault__summary,
  .page-faq .faq-index a {
    transition: none;
  }
}


<main id="main-content" class="page-faq">
  <nav class="breadcrumb wrap" aria-label="面包屑">
    <a class="breadcrumb__link" href="/">首页</a>
    <span class="breadcrumb__sep" aria-hidden="true">/</span>
    <span class="breadcrumb__current">问题排查</span>
  </nav>

  <header class="faq-hero wrap">
    <div class="faq-hero__grid">
      <div class="faq-hero__lead">
        <p class="eyebrow">排查手册 · 01—06</p>
        <h1>注册到小屏比分，卡在哪一步就查哪一步</h1>
        <p class="faq-hero__intro">必博体育官网把新用户最常撞上的几个坎，按发生顺序排好了：先备齐手机号、邮箱和赛事偏好，再走完注册与赛事中心导览，最后把比分条挂到第二屏上。顺着往下走，多数情况几分钟就能回到比赛里。</p>
      </div>
      <aside class="faq-hero__meter" aria-label="赛事中心的基本节奏">
        <p class="faq-hero__meter-title">赛事中心的基本节奏</p>
        <dl class="meter-grid">
          <div class="meter">
            <dt>运动项目</dt>
            <dd>12<span>类</span></dd>
          </div>
          <div class="meter">
            <dt>常设赛事条目</dt>
            <dd>1,800<span>项</span></dd>
          </div>
          <div class="meter">
            <dt>重点赛事</dt>
            <dd>260<span>项</span></dd>
          </div>
          <div class="meter">
            <dt>比分延迟</dt>
            <dd>≤15<span>秒</span></dd>
          </div>
        </dl>
        <p class="faq-hero__meter-note">每日 6:00–24:00 滚动更新</p>
      </aside>
    </div>
  </header>

  <div class="faq-layout wrap">
    <nav class="faq-index" aria-label="章节索引">
      <p class="faq-index__title">按顺序查</p>
      <ol>
        <li><a href="#ready"><span class="faq-index__n">01</span>开始之前</a></li>
        <li><a href="#five-steps"><span class="faq-index__n">02</span>五步上手</a></li>
        <li><a href="#second-screen"><span class="faq-index__n">03</span>小屏与订阅</a></li>
        <li><a href="#faults"><span class="faq-index__n">04</span>常见异常</a></li>
        <li><a href="#migrate"><span class="faq-index__n">05</span>老用户迁移</a></li>
        <li><a href="#support"><span class="faq-index__n">06</span>联系支持</a></li>
      </ol>
    </nav>

    <div class="faq-body">
      <section class="faq-section" id="ready" data-reveal>
        <p class="eyebrow">01 · 开始之前</p>
        <h2 class="section__title">三样东西备齐，注册一次就能过</h2>
        <p class="faq-section__lead">必博体育本地注册用到的信息不多，提前放在手边，中途来回翻找的麻烦就省掉了。</p>

        <ul class="ready-list">
          <li class="ready-item">
            <span class="ready-item__key">手机号</span>
            <div>
              <h3 class="ready-item__title">用来接验证码，也是账号主标识</h3>
              <p>注册后的找回密码、比分提醒都从这里发起，建议用自己长期在用的号码。</p>
            </div>
          </li>
          <li class="ready-item">
            <span class="ready-item__key">邮箱</span>
            <div>
              <h3 class="ready-item__title">多一条找回路径</h3>
              <p>绑定后短信一时收不到也不至于卡住，随时可以在设置里补绑或更换。</p>
            </div>
          </li>
          <li class="ready-item">
            <span class="ready-item__key">赛事偏好</span>
            <div>
              <h3 class="ready-item__title">决定赛事中心先给你看什么</h3>
              <p>常看的项目、长期关注的赛事在注册时勾选，进入赛事中心就按你的关注排序，不必每次重新找一遍。</p>
            </div>
          </li>
        </ul>

        <p class="faq-section__note">注册过程只做身份确认和偏好设置，不涉及任何资金账户，完成后直接进入赛事中心。账号信息怎么保存、日志保留多久，可以看 <a href="/data-protection/">数据保护</a> 页的说明。</p>
      </section>

      <section class="faq-section" id="five-steps" data-reveal>
        <p class="eyebrow">02 · 五步上手</p>
        <h2 class="section__title">五步走完，比分条就能常驻旁边</h2>
        <p class="faq-section__lead">必博体育新手指南固定为五步，顺序别跳——跳过的环节，后面还得回头补一遍。</p>

        <ol class="faq-steps">
          <li class="faq-step">
            <span class="faq-step__num">01</span>
            <div class="faq-step__body">
              <h3>完成注册</h3>
              <p>手机号收验证码，设定昵称，绑定邮箱，再勾选常看的运动项目和要跟的赛事。</p>
              <p class="faq-step__do">收不到验证码，先查拦截短信箱，隔一分钟再点重发。</p>
            </div>
          </li>
          <li class="faq-step">
            <span class="faq-step__num">02</span>
            <div class="faq-step__body">
              <h3>走进赛事中心</h3>
              <p>电脑端入口就在首页顶栏。进去之后是 12 类运动项目、常设 1,800 项赛事条目，其中重点赛事 260 项。</p>
              <p class="faq-step__do">先按项目筛一轮，再把要跟的赛事固定下来。</p>
            </div>
          </li>
          <li class="faq-step">
            <span class="faq-step__num">03</span>
            <div class="faq-step__body">
              <h3>在设置里选中小屏布局</h3>
              <p>手机、平板、桌面小窗都适用。选中保存后，界面会自动收窄成适合常驻第二屏的样子。</p>
              <p class="faq-step__do">保存后重新打开一次，确认布局真的生效。</p>
            </div>
          </li>
          <li class="faq-step">
            <span class="faq-step__num">04</span>
            <div class="faq-step__body">
              <h3>打开订阅入口</h3>
              <p>订阅入口单独放在新手指南里，和布局设置不在同一处，这是最容易漏的一步。</p>
              <p class="faq-step__do">开启后回到小屏，看一眼关注的赛事有没有出现。</p>
            </div>
          </li>
          <li class="faq-step">
            <span class="faq-step__num">05</span>
            <div class="faq-step__body">
              <h3>查看对照数据</h3>
              <p>3 月版本起，对照数据挪到了侧栏，48 个旧版栏目支持逐项切换，新旧两版并列摆在眼前。</p>
              <p class="faq-step__do">完整用法可以在 <a href="/tools/">数据工具</a> 页继续看。</p>
            </div>
          </li>
        </ol>

        <figure class="media-frame media-frame--wide faq-figure">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="注册、赛事中心、小屏布局、订阅入口与对照数据组成的五步上手抽象流程示意">
          <figcaption class="media-frame__caption">五步的先后不能打乱：注册 → 赛事中心 → 小屏布局 → 订阅入口 → 对照数据</figcaption>
        </figure>
      </section>

      <section class="faq-section" id="second-screen" data-reveal>
        <p class="eyebrow">03 · 小屏与订阅</p>
        <h2 class="section__title">让它安安静静挂在旁边</h2>

        <div class="screen-grid">
          <div class="screen-text">
            <p>小屏追比分从 2021 年起就能当第二屏用：主屏看比赛，旁边那条比分一直在。</p>
            <ul class="screen-points">
              <li><strong>布局和订阅是两步。</strong>先在设置里选中小屏布局并保存，再回到新手指南开启订阅入口，只做一步是不够的。</li>
              <li><strong>别让系统休眠。</strong>小窗要留在前台，系统自动休眠会打断刷新。</li>
              <li><strong>刷新有固定时段。</strong>比分与赛程每日 6:00–24:00 滚动更新，重点赛事延迟不超过 15 秒。</li>
            </ul>
            <p class="faq-section__note">订阅开好了但列表空着，通常是关注的赛事还没勾，回设置补一两项就正常了。</p>
          </div>
          <figure class="media-frame media-frame--tall faq-figure">
            <img src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="设置面板中选择小屏布局并开启订阅入口的抽象界面示意" loading="lazy" decoding="async">
            <figcaption class="media-frame__caption">设置里选布局，指南里开订阅</figcaption>
          </figure>
        </div>
      </section>

      <section class="faq-section" id="faults" data-reveal>
        <p class="eyebrow">04 · 常见异常</p>
        <h2 class="section__title">比分不动、布局没变，按这个顺序查</h2>
        <p class="faq-section__lead">先挑一个类别，再展开对应条目。多数情况在前两步就有答案。</p>

        <div class="faults">
          <input class="faults__radio" type="radio" name="fault-cat" id="fault-all" checked>
          <input class="faults__radio" type="radio" name="fault-cat" id="fault-start">
          <input class="faults__radio" type="radio" name="fault-cat" id="fault-screen">
          <input class="faults__radio" type="radio" name="fault-cat" id="fault-error">
          <input class="faults__radio" type="radio" name="fault-cat" id="fault-move">

          <div class="faults__chips" role="group" aria-label="按类别筛选问题">
            <label class="faults__chip" for="fault-all">全部问题</label>
            <label class="faults__chip" for="fault-start">新手与注册</label>
            <label class="faults__chip" for="fault-screen">小屏与订阅</label>
            <label class="faults__chip" for="fault-error">数据异常</label>
            <label class="faults__chip" for="fault-move">老版迁移</label>
          </div>

          <div class="faults__list">
            <details class="fault" data-cat="start">
              <summary class="fault__summary">
                <span class="tag">可自行解决</span>
                <span class="fault__q">注册时一直收不到验证码</span>
              </summary>
              <div class="fault__body">
                <p>短信通道本身很少出问题，按下面三条走一遍基本就通了。</p>
                <ol>
                  <li>核对手机号有没有输错一位，尤其是尾号；</li>
                  <li>翻一下拦截短信和垃圾信息文件夹；</li>
                  <li>等满一分钟再点重发，连续快速点击反而会被暂时拦住。</li>
                </ol>
              </div>
            </details>

            <details class="fault" data-cat="start">
              <summary class="fault__summary">
                <span class="tag">可自行解决</span>
                <span class="fault__q">邮箱绑定这一步没走通</span>
              </summary>
              <div class="fault__body">
                <p>先检查地址拼写，包括 @ 后面的域名部分。还是不行就换一个常用邮箱重试。绑定不影响已经完成的手机号验证，随时能回设置里补上。</p>
              </div>
            </details>

            <details class="fault" data-cat="start">
              <summary class="fault__summary">
                <span class="tag tag--amber">需检查</span>
                <span class="fault__q">进不去赛事中心，页面一直转圈</span>
              </summary>
              <div class="fault__body">
                <p>电脑端请从首页顶栏的“赛事中心”进，别直接收藏内层地址。入口没问题却仍加载不出来，依次试：换个浏览器 → 关掉插件再开 → 切换网络后重进。</p>
              </div>
            </details>

            <details class="fault" data-cat="screen">
              <summary class="fault__summary">
                <span class="tag tag--amber">需检查</span>
                <span class="fault__q">选了小屏布局，界面还是大屏样子</span>
              </summary>
              <div class="fault__body">
                <p>布局保存后要重新加载才会套用。先把小窗或标签页关掉再打开；如果仍然没变，回设置确认当前选中的是小屏布局，而不是默认布局。</p>
              </div>
            </details>

            <details class="fault" data-cat="screen">
              <summary class="fault__summary">
                <span class="tag tag--amber">待订阅</span>
                <span class="fault__q">小屏里一条比分都看不到</span>
              </summary>
              <div class="fault__body">
                <p>多半是订阅入口还没开。回到新手指南，在订阅一项点开启；再看一眼小屏，列表依旧为空就去设置里把要跟的赛事勾上。</p>
              </div>
            </details>

            <details class="fault" data-cat="screen">
              <summary class="fault__summary">
                <span class="tag tag--amber">待订阅</span>
                <span class="fault__q">第二屏挂久了比分不再跳动</span>
              </summary>
              <div class="fault__body">
                <p>先看系统有没有把小窗划进休眠或省电模式，保持前台常驻就能恢复。另外每日 6:00–24:00 之外是更新空档，这段时间数字不动属于正常。</p>
              </div>
            </details>

            <details class="fault" data-cat="error">
              <summary class="fault__summary">
                <span class="tag tag--live">需检查</span>
                <span class="fault__q">比分停在上一场，刷新也不动</span>
              </summary>
              <div class="fault__body">
                <p>照这个顺序排查：</p>
                <ol>
                  <li>确认当前时间落在 6:00–24:00 的更新时段；</li>
                  <li>手动刷新一次，或切到别的赛事再切回来；</li>
                  <li>换一个网络环境重进；</li>
                  <li>以上都无效，联系客服并说明赛事名称与异常出现的准确时间。</li>
                </ol>
              </div>
            </details>

            <details class="fault" data-cat="error">
              <summary class="fault__summary">
                <span class="tag tag--live">需检查</span>
                <span class="fault__q">重点赛事的比分别人比我快</span>
              </summary>
              <div class="fault__body">
                <p>重点赛事比分延迟控制在 15 秒以内，短时间落后一两个回合属于正常。若整整超过 15 秒仍纹丝不动，把当时的画面和赛事名称发给我们，数据同事会立刻查这一场。</p>
              </div>
            </details>

            <details class="fault" data-cat="move">
              <summary class="fault__summary">
                <span class="tag tag--amber">需检查</span>
                <span class="fault__q">侧栏里找不到熟悉的对照栏目</span>
              </summary>
              <div class="fault__body">
                <p>对照数据在 3 月版本整体移到了侧栏，48 个旧版栏目都在里面，按原来的栏目名逐项切换就能找到。旧收藏地址会失效，从侧栏重新收藏一次更省事。</p>
              </div>
            </details>

            <details class="fault" data-cat="move">
              <summary class="fault__summary">
                <span class="tag tag--amber">需检查</span>
                <span class="fault__q">升级后偏好设置要重来一遍吗</span>
              </summary>
              <div class="fault__body">
                <p>不用。关注的赛事和常看的项目都跟着账号保留，变的只有对照视图的入口位置。逐条改动说明可以翻 <a href="/journal/">品牌日志</a> 里的老用户札记。</p>
              </div>
            </details>
          </div>
        </div>
      </section>

      <section class="faq-section" id="migrate" data-reveal>
        <p class="eyebrow">05 · 老用户迁移</p>
        <h2 class="section__title">从旧版过来，要改的习惯只有一处</h2>

        <div class="migrate-grid">
          <div class="migrate-card">
            <p class="migrate-card__label">变了</p>
            <h3>对照数据改在侧栏</h3>
            <p>侧栏面板与主数据区并列，48 个旧版栏目逐项切换后，新旧两版的同一项上下对齐，不用来回翻页。</p>
          </div>
          <div class="migrate-card">
            <p class="migrate-card__label">没变</p>
            <h3>关注的赛事和常用项目</h3>
            <p>登录后打开赛事中心，看到的还是熟悉的那几场。需要重新收藏的，只有旧版存在收藏夹里的对照栏目地址。</p>
          </div>
        </div>

        <p class="faq-section__note">从自动采集到编辑复核、异常回滚，数据要过三道流程才会出现在页面上，完整做法写在 <a href="/mission/">品牌使命</a> 页。</p>
      </section>

      <section class="faq-section" id="support" data-reveal>
        <p class="eyebrow">06 · 联系支持</p>
        <h2 class="section__title">查到这里还没解决，直接找我们</h2>

        <div class="help-panel">
          <div class="help-panel__contacts">
            <div class="help-row">
              <span class="help-row__key">客服电话</span>
              <span class="help-row__val">17717132745</span>
            </div>
            <div class="help-row">
              <span class="help-row__key">客服邮箱</span>
              <span class="help-row__val">email@bibo-c6sk.com.cn</span>
            </div>
            <div class="help-row">
              <span class="help-row__key">服务时段</span>
              <span class="help-row__val">工作日 9:00–18:00</span>
            </div>
          </div>

          <div class="help-panel__aside">
            <p class="help-panel__title">这样描述，第一通电话就能对上</p>
            <ul class="help-list">
              <li>注册时用的手机号后四位或邮箱</li>
              <li>出问题的赛事名称与开赛时间</li>
              <li>你用的设备：手机、平板还是桌面小窗</li>
              <li>异常出现的大致时间点</li>
            </ul>
            <p class="help-panel__note">注册和赛事数据相关的事都走这条线；内容合作、场馆服务与赛事专题协作，可以在 <a href="/consult/">咨询服务</a> 里找到对应入口。</p>
          </div>
        </div>
      </section>
    </div>
  </div>
</main>

.page-faq {
  --faq-line: rgba(36, 67, 95, 0.72);
  --faq-line-soft: rgba(36, 67, 95, 0.42);
  --faq-sticky: calc(var(--header-h) + 28px);
  padding-bottom: 88px;
}

.page-faq a {
  color: var(--cyan);
  text-decoration-color: rgba(39, 225, 193, 0.42);
  text-underline-offset: 3px;
}

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

/* ---------- 首屏 ---------- */
.page-faq .faq-hero {
  padding-top: 28px;
  padding-bottom: 34px;
}

.page-faq .faq-hero__grid {
  display: grid;
  gap: 30px;
}

.page-faq .faq-hero h1 {
  margin: 14px 0 0;
  font-family: var(--font-light);
  font-weight: 300;
  font-size: clamp(2rem, 6.2vw, 4rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--paper);
}

.page-faq .faq-hero__intro {
  margin: 20px 0 0;
  max-width: 58ch;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--muted);
}

.page-faq .faq-hero__meter {
  position: relative;
  padding: 22px 20px 18px;
  border: 1px solid var(--faq-line);
  border-radius: 14px;
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(39, 225, 193, 0.16), transparent 58%),
    linear-gradient(160deg, rgba(16, 38, 61, 0.92), rgba(7, 17, 31, 0.7));
  overflow: hidden;
}

.page-faq .faq-hero__meter::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(143, 163, 184, 0.1) 0 1px,
    transparent 1px 24px
  );
  pointer-events: none;
}

.page-faq .faq-hero__meter-title {
  position: relative;
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--muted);
}

.page-faq .meter-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 14px;
  margin: 0;
}

.page-faq .meter dt {
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.page-faq .meter dd {
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-size: 1.55rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--amber);
}

.page-faq .meter dd span {
  margin-left: 3px;
  font-size: 0.72rem;
  color: var(--muted);
}

.page-faq .faq-hero__meter-note {
  position: relative;
  margin: 18px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--faq-line-soft);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--cyan);
}

/* ---------- 布局与索引 ---------- */
.page-faq .faq-layout {
  display: grid;
  gap: 8px;
}

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

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

.page-faq .faq-section {
  padding: 38px 0 34px;
  border-top: 1px solid var(--faq-line);
}

.page-faq .faq-section .section__title {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4.2vw, 2.2rem);
  line-height: 1.26;
  letter-spacing: -0.01em;
  color: var(--paper);
}

.page-faq .faq-section__lead {
  margin: 14px 0 0;
  max-width: 62ch;
  font-size: 0.97rem;
  line-height: 1.85;
  color: var(--muted);
}

.page-faq .faq-section__note {
  margin: 20px 0 0;
  max-width: 64ch;
  font-size: 0.86rem;
  line-height: 1.8;
  color: var(--muted);
}

/* ---------- 准备清单 ---------- */
.page-faq .ready-list {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}

.page-faq .ready-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 18px 0;
  border-top: 1px dashed var(--faq-line-soft);
}

.page-faq .ready-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.page-faq .ready-item__key {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  color: var(--amber);
}

.page-faq .ready-item__title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--paper);
}

.page-faq .ready-item p {
  margin: 6px 0 0;
  max-width: 60ch;
  font-size: 0.94rem;
  line-height: 1.8;
  color: var(--muted);
}

/* ---------- 五步 ---------- */
.page-faq .faq-steps {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}

.page-faq .faq-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--faq-line-soft);
}

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

.page-faq .faq-step__num {
  font-family: var(--font-mono);
  font-size: 1.9rem;
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--amber);
}

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

.page-faq .faq-step__body h3 {
  margin: 0;
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--paper);
}

.page-faq .faq-step__body p {
  margin: 8px 0 0;
  max-width: 62ch;
  font-size: 0.94rem;
  line-height: 1.8;
  color: var(--muted);
}

.page-faq .faq-step__do {
  display: flex;
  gap: 8px;
  align-items: baseline;
  color: var(--cyan);
  font-size: 0.86rem;
}

.page-faq .faq-step__do::before {
  content: "→";
  flex: none;
  font-family: var(--font-mono);
  color: var(--cyan);
}

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

.page-faq .media-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
  object-fit: cover;
}

/* ---------- 小屏与订阅 ---------- */
.page-faq .screen-grid {
  display: grid;
  gap: 26px;
  margin-top: 22px;
}

.page-faq .screen-text p {
  margin: 0 0 16px;
  max-width: 62ch;
  font-size: 0.96rem;
  line-height: 1.85;
  color: var(--muted);
}

.page-faq .screen-points {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-faq .screen-points li {
  position: relative;
  padding-left: 20px;
  font-size: 0.94rem;
  line-height: 1.8;
  color: var(--muted);
}

.page-faq .screen-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 10px;
  height: 2px;
  background: var(--cyan);
}

.page-faq .screen-points strong {
  font-weight: 600;
  color: var(--paper);
}

/* ---------- 常见异常 ---------- */
.page-faq .faults {
  position: relative;
  margin-top: 26px;
}

.page-faq .faults__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

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

.page-faq .faults__chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid var(--ink-700);
  border-radius: 999px;
  background: rgba(16, 38, 61, 0.5);
  font-size: 0.84rem;
  color: var(--muted);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

.page-faq .faults__chip:hover {
  color: var(--paper);
  border-color: var(--cyan);
}

.page-faq #fault-all:checked ~ .faults__chips label[for="fault-all"],
.page-faq #fault-start:checked ~ .faults__chips label[for="fault-start"],
.page-faq #fault-screen:checked ~ .faults__chips label[for="fault-screen"],
.page-faq #fault-error:checked ~ .faults__chips label[for="fault-error"],
.page-faq #fault-move:checked ~ .faults__chips label[for="fault-move"] {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--ink-900);
  font-weight: 600;
}

.page-faq .faults__radio:focus-visible ~ .faults__chips {
  outline: 2px solid var(--cyan);
  outline-offset: 6px;
  border-radius: 10px;
}

.page-faq #fault-start:checked ~ .faults__list .fault:not([data-cat="start"]),
.page-faq #fault-screen:checked ~ .faults__list .fault:not([data-cat="screen"]),
.page-faq #fault-error:checked ~ .faults__list .fault:not([data-cat="error"]),
.page-faq #fault-move:checked ~ .faults__list .fault:not([data-cat="move"]) {
  display: none;
}

.page-faq .fault {
  border-bottom: 1px solid var(--faq-line-soft);
}

.page-faq .faults__list .fault:first-child {
  border-top: 1px solid var(--faq-line);
}

.page-faq .fault__summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 32px 15px 0;
  list-style: none;
  cursor: pointer;
  font-size: 0.96rem;
  font-weight: 600;
  line-height: 1.55;
  color: var(--paper);
  transition: color var(--dur) var(--ease);
}

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

.page-faq .fault__summary:hover {
  color: var(--cyan-soft);
}

.page-faq .fault__summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 1.15rem;
  line-height: 1;
  color: var(--cyan);
}

.page-faq .fault[open] .fault__summary::after {
  content: "–";
}

.page-faq .fault__summary .tag {
  flex: none;
  white-space: nowrap;
}

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

.page-faq .fault__body {
  padding: 0 0 18px;
  max-width: 66ch;
  font-size: 0.92rem;
  line-height: 1.85;
  color: var(--muted);
}

.page-faq .fault__body p {
  margin: 0;
}

.page-faq .fault__body ol {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: fault-step;
  display: grid;
  gap: 6px;
}

.page-faq .fault__body li {
  position: relative;
  padding-left: 22px;
  counter-increment: fault-step;
}

.page-faq .fault__body li::before {
  content: counter(fault-step);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.95;
  color: var(--amber);
}

/* ---------- 老用户迁移 ---------- */
.page-faq .migrate-grid {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.page-faq .migrate-card {
  padding: 20px 18px;
  border: 1px solid var(--faq-line);
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(16, 38, 61, 0.9), rgba(7, 17, 31, 0.55));
}

.page-faq .migrate-card:first-child {
  background:
    radial-gradient(130% 140% at 0% 0%, rgba(242, 184, 75, 0.16), transparent 60%),
    linear-gradient(150deg, rgba(16, 38, 61, 0.9), rgba(7, 17, 31, 0.55));
}

.page-faq .migrate-card__label {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--amber);
}

.page-faq .migrate-card h3 {
  margin: 0;
  font-size: 1.04rem;
  font-weight: 600;
  color: var(--paper);
}

.page-faq .migrate-card p {
  margin: 8px 0 0;
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--muted);
}

/* ---------- 联系支持 ---------- */
.page-faq .help-panel {
  display: grid;
  gap: 26px;
  margin-top: 24px;
  padding: 24px 20px;
  border: 1px solid var(--ink-700);
  border-radius: 14px;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(39, 225, 193, 0.14), transparent 58%),
    linear-gradient(160deg, rgba(11, 27, 46, 0.96), rgba(7, 17, 31, 0.72));
}

.page-faq .help-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--faq-line-soft);
}

.page-faq .help-row:first-child {
  padding-top: 0;
}

.page-faq .help-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-faq .help-row__key {
  flex: none;
  min-width: 76px;
  padding-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.page-faq .help-row__val {
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--paper);
  word-break: break-word;
}

.page-faq .help-panel__title {
  margin: 0 0 14px;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--paper);
}

.page-faq .help-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.page-faq .help-list li {
  position: relative;
  padding-left: 20px;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--muted);
}

.page-faq .help-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 10px;
  height: 2px;
  background: var(--amber);
}

.page-faq .help-panel__note {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--faq-line-soft);
  font-size: 0.86rem;
  line-height: 1.8;
  color: var(--muted);
}

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  .page-faq .ready-item {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
  }

  .page-faq .ready-item__key {
    padding-top: 3px;
  }

  .page-faq .faq-step {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 22px;
    padding: 24px 0;
  }

  .page-faq .faq-step__num {
    font-size: 2.4rem;
  }

  .page-faq .help-row__key {
    min-width: 92px;
  }
}

@media (min-width: 860px) {
  .page-faq .faq-hero__grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: end;
    gap: 44px;
  }

  .page-faq .screen-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 36px;
  }

  .page-faq .migrate-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

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

@media (min-width: 1024px) {
  .page-faq .faq-layout {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 60px;
    align-items: start;
  }

  .page-faq .faq-index {
    display: block;
    position: sticky;
    top: var(--faq-sticky);
    padding-top: 42px;
  }

  .page-faq .faq-index__title {
    margin: 0 0 14px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: var(--muted);
  }

  .page-faq .faq-index ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
  }

  .page-faq .faq-index a {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 8px 10px;
    border-left: 1px solid transparent;
    border-radius: 0 6px 6px 0;
    font-size: 0.87rem;
    color: var(--muted);
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
      background-color var(--dur) var(--ease);
  }

  .page-faq .faq-index a:hover,
  .page-faq .faq-index a:focus-visible {
    color: var(--cyan);
    border-left-color: var(--cyan);
    background: rgba(39, 225, 193, 0.07);
  }

  .page-faq .faq-index__n {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--amber);
  }

  .page-faq .faq-section {
    padding: 46px 0 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faults__chip,
  .page-faq .fault__summary,
  .page-faq .faq-index a {
    transition: none;
  }
}