.page-faq {
  --faq-rail-w: 268px;
  --faq-radius: 16px;
  --faq-glass: rgba(16, 36, 58, 0.62);
  background: var(--bs-void);
  color: var(--bs-ink);
  font-family: var(--bs-font);
}

.page-faq .faq-hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--bs-hd-h) + 34px);
  padding-bottom: clamp(52px, 8vw, 92px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 54px), 0 100%);
  background:
    radial-gradient(128% 92% at 88% -18%, rgba(122, 75, 232, 0.38), transparent 62%),
    radial-gradient(72% 62% at -8% 110%, rgba(37, 224, 200, 0.16), transparent 58%),
    linear-gradient(178deg, var(--bs-void) 6%, var(--bs-night) 100%);
}

.page-faq .faq-hero .bs-breadcrumb {
  margin-bottom: clamp(20px, 3vw, 32px);
}

.page-faq .faq-hero__grid {
  display: grid;
  gap: clamp(26px, 4vw, 46px);
}

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

.page-faq .faq-hero__title {
  margin: 12px 0 0;
  font-size: clamp(29px, 6.2vw, 58px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.page-faq .faq-hero__hl {
  background: linear-gradient(180deg, transparent 60%, rgba(242, 92, 31, 0.28) 60%);
  padding-bottom: 2px;
}

.page-faq .faq-hero__lede {
  margin-top: 20px;
  max-width: 52ch;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.78;
  color: var(--bs-muted);
}

.page-faq .faq-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.page-faq .faq-hero__chips a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--bs-line);
  border-radius: 999px;
  background: rgba(16, 36, 58, 0.6);
  color: var(--bs-ink);
  font-size: 13px;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: border-color 0.22s var(--bs-ease), background 0.22s var(--bs-ease), transform 0.22s var(--bs-ease);
}

.page-faq .faq-hero__chips a:hover,
.page-faq .faq-hero__chips a:focus-visible {
  border-color: var(--bs-cyan);
  background: rgba(37, 224, 200, 0.12);
  transform: translateX(3px);
}

.page-faq .faq-hero__chips a span {
  font-family: var(--bs-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--bs-cyan);
}

.page-faq .faq-hero__media {
  margin: 0;
  min-width: 0;
}

.page-faq .faq-hero__frame {
  position: relative;
  clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 95%);
  background: var(--bs-ice);
  box-shadow: 0 30px 64px -34px rgba(5, 8, 15, 0.95);
}

.page-faq .faq-hero__frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: brightness(0.88) saturate(1.04);
}

.page-faq .faq-hero__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(146deg, rgba(37, 224, 200, 0.18), transparent 56%, rgba(242, 92, 31, 0.16));
}

.page-faq .faq-body {
  display: grid;
  gap: clamp(30px, 4vw, 52px);
  margin-top: clamp(34px, 5vw, 62px);
  padding-bottom: clamp(44px, 6vw, 76px);
}

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

.page-faq .faq-rail__panel {
  border: 1px solid var(--bs-line-soft);
  border-radius: var(--faq-radius);
  background: linear-gradient(180deg, rgba(16, 36, 58, 0.74), rgba(11, 21, 38, 0.92));
  padding: 16px 14px 14px;
}

.page-faq .faq-rail__title {
  margin: 0 0 4px;
  padding: 0 8px 12px;
  border-bottom: 1px solid var(--bs-line-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bs-muted);
}

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

.page-faq .faq-rail__item + .faq-rail__item {
  margin-top: 2px;
}

.page-faq .faq-rail__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 10px 11px 26px;
  border-radius: 10px;
  color: var(--bs-muted);
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.2s var(--bs-ease), background 0.2s var(--bs-ease);
}

.page-faq .faq-rail__link::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--bs-line-soft);
  transition: background 0.2s var(--bs-ease);
}

.page-faq .faq-rail__link::after {
  content: "";
  position: absolute;
  left: 2.5px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: var(--bs-night);
  border: 1px solid var(--bs-line);
  transition: background 0.2s var(--bs-ease), border-color 0.2s var(--bs-ease), box-shadow 0.2s var(--bs-ease);
}

.page-faq .faq-rail__link:hover,
.page-faq .faq-rail__link:focus-visible {
  color: var(--bs-ink);
  background: rgba(37, 224, 200, 0.08);
}

.page-faq .faq-rail__link:hover::after,
.page-faq .faq-rail__link:focus-visible::after {
  background: var(--bs-cyan);
  border-color: var(--bs-cyan);
  box-shadow: 0 0 0 4px rgba(37, 224, 200, 0.14);
}

.page-faq .faq-rail__label {
  flex: 1 1 auto;
}

.page-faq .faq-rail__count {
  flex: none;
  padding: 1px 7px;
  border-radius: 6px;
  background: rgba(37, 224, 200, 0.1);
  color: var(--bs-cyan);
  font-family: var(--bs-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 700;
}

.page-faq .faq-rail__help {
  margin-top: 16px;
  padding: 18px 16px;
  border: 1px solid rgba(122, 75, 232, 0.4);
  border-radius: var(--faq-radius);
  background: linear-gradient(165deg, rgba(122, 75, 232, 0.3), rgba(11, 21, 38, 0.94));
}

.page-faq .faq-rail__help-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.page-faq .faq-rail__help-text {
  margin: 8px 0 14px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--bs-muted);
}

.page-faq .faq-stream {
  display: grid;
  gap: clamp(34px, 4.4vw, 56px);
  min-width: 0;
}

.page-faq .faq-group {
  scroll-margin-top: calc(var(--bs-hd-h-sm) + 26px);
}

.page-faq .faq-group__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--bs-line-soft);
}

.page-faq .faq-group__index {
  font-family: var(--bs-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--bs-orange);
}

.page-faq .faq-group__title {
  margin: 0;
  font-size: clamp(20px, 3vw, 27px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.page-faq .faq-group__desc {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--bs-muted);
}

.page-faq .faq-item {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--bs-line-soft);
  border-radius: 14px;
  background: rgba(11, 21, 38, 0.68);
  transition: border-color 0.24s var(--bs-ease), background 0.24s var(--bs-ease);
}

.page-faq .faq-item + .faq-item {
  margin-top: 10px;
}

.page-faq .faq-item:hover {
  border-color: rgba(37, 224, 200, 0.32);
}

.page-faq .faq-item[open] {
  border-color: rgba(37, 224, 200, 0.46);
  background: rgba(16, 36, 58, 0.8);
}

.page-faq .faq-item__q {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 15px 16px;
  list-style: none;
  cursor: pointer;
  color: var(--bs-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
  transition: color 0.2s var(--bs-ease);
}

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

.page-faq .faq-item__sign {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: rgba(37, 224, 200, 0.13);
}

.page-faq .faq-item__sign::before,
.page-faq .faq-item__sign::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--bs-cyan);
  transform: translate(-50%, -50%);
  transition: transform 0.26s var(--bs-ease), opacity 0.26s var(--bs-ease);
}

.page-faq .faq-item__sign::before {
  width: 10px;
  height: 1.5px;
}

.page-faq .faq-item__sign::after {
  width: 1.5px;
  height: 10px;
}

.page-faq .faq-item[open] .faq-item__sign::after {
  transform: translate(-50%, -50%) scaleY(0);
  opacity: 0;
}

.page-faq .faq-item__tag {
  flex: none;
  padding: 2px 6px;
  border: 1px solid var(--bs-line-soft);
  border-radius: 5px;
  background: rgba(31, 58, 82, 0.55);
  color: var(--bs-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.6;
}

.page-faq .faq-item__text {
  flex: 1 1 60%;
  min-width: 0;
}

.page-faq .faq-item__a {
  margin: 0 16px 16px;
  padding-left: 14px;
  border-left: 2px solid var(--bs-cyan);
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--bs-muted);
}

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

.page-faq .faq-item__a p + p {
  margin-top: 10px;
}

.page-faq .faq-item[open] .faq-item__a {
  animation: faqUnfold 0.26s var(--bs-ease) both;
}

@keyframes faqUnfold {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-faq .faq-cta {
  padding-top: clamp(40px, 6vw, 74px);
  padding-bottom: clamp(50px, 7vw, 88px);
  border-top: 1px solid rgba(142, 27, 58, 0.55);
  background:
    radial-gradient(92% 118% at 8% 0%, rgba(142, 27, 58, 0.5), transparent 62%),
    linear-gradient(180deg, var(--bs-night), var(--bs-void));
}

.page-faq .faq-cta__inner {
  display: grid;
  gap: clamp(24px, 4vw, 46px);
  align-items: center;
}

.page-faq .faq-cta__media {
  margin: 0;
  min-width: 0;
}

.page-faq .faq-cta__media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 400px;
  aspect-ratio: 9 / 11;
  object-fit: cover;
  border-radius: 18px 4px 18px 4px;
  filter: brightness(0.84) saturate(1.04);
  box-shadow: 0 32px 64px -34px rgba(0, 0, 0, 0.92);
}

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

.page-faq .faq-cta__title {
  margin: 12px 0 0;
  font-size: clamp(24px, 4vw, 38px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.018em;
}

.page-faq .faq-cta__lede {
  margin: 14px 0 0;
  max-width: 50ch;
  font-size: 15px;
  line-height: 1.78;
  color: var(--bs-muted);
}

.page-faq .faq-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.page-faq .faq-cta__note {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--bs-line-soft);
  font-size: 13px;
  line-height: 1.7;
  color: var(--bs-muted);
}

.page-faq .faq-rail__link:focus-visible,
.page-faq .faq-item__q:focus-visible,
.page-faq .faq-hero__chips a:focus-visible {
  outline: 2px solid var(--bs-cyan);
  outline-offset: 3px;
}

@media (min-width: 860px) {
  .page-faq .faq-cta__inner {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: clamp(30px, 4vw, 54px);
  }
}

@media (min-width: 900px) {
  .page-faq .faq-hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
  }
}

@media (min-width: 960px) {
  .page-faq .faq-body {
    grid-template-columns: var(--faq-rail-w) minmax(0, 1fr);
    align-items: start;
  }

  .page-faq .faq-rail {
    position: sticky;
    top: calc(var(--bs-hd-h-sm) + 26px);
    align-self: start;
  }
}

@media (max-width: 620px) {
  .page-faq .faq-hero {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), 0 100%);
  }

  .page-faq .faq-item__q {
    padding: 14px 14px;
    font-size: 14.5px;
  }

  .page-faq .faq-item__tag {
    order: 3;
    flex-basis: auto;
  }

  .page-faq .faq-item__text {
    flex: 1 1 100%;
    order: 2;
  }

  .page-faq .faq-item__sign {
    order: 1;
  }

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

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-item[open] .faq-item__a {
    animation: none;
  }

  .page-faq .faq-hero__chips a:hover,
  .page-faq .faq-hero__chips a:focus-visible {
    transform: none;
  }
}


<main id="main-content" class="page-faq" data-flush="true">
  <div class="faq-hero">
    <div class="bs-container">
      <nav class="bs-breadcrumb" aria-label="面包屑">
        <ol class="bs-breadcrumb__list">
          <li class="bs-breadcrumb__item"><a class="bs-breadcrumb__link" href="/">首页</a></li>
          <li class="bs-breadcrumb__item"><span aria-current="page">知识中心</span></li>
        </ol>
      </nav>

      <div class="faq-hero__grid">
        <div class="faq-hero__copy">
          <p class="bs-eyebrow">使用帮助</p>
          <h1 class="faq-hero__title">收藏、提醒与登录疑问，<span class="faq-hero__hl">逐条给你答案</span></h1>
          <p class="faq-hero__lede">遇到卡住的地方先翻这里。B体育 的收藏位置、提醒顺序、登录状态和版本切换问题都按场景放在一起，每条先给结论，再写清楚具体点哪里、什么时候生效。</p>
          <ul class="faq-hero__chips">
            <li><a href="#login">登录与直达 <span>4</span></a></li>
            <li><a href="#saved">收藏与订阅 <span>4</span></a></li>
            <li><a href="#version">版本与导出 <span>4</span></a></li>
            <li><a href="#device">账号与设备 <span>3</span></a></li>
            <li><a href="#other">其他情况 <span>3</span></a></li>
          </ul>
        </div>

        <figure class="faq-hero__media">
          <div class="faq-hero__frame">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="夜间地铁车厢里用手机查看赛事列表，屏幕光成为画面主要亮源，背景是深蓝色">
          </div>
        </figure>
      </div>
    </div>
  </div>

  <div class="bs-container">
    <div class="faq-body">
      <aside class="faq-rail" aria-label="问题分类">
        <div class="faq-rail__panel">
          <p class="faq-rail__title">按类别查找</p>
          <ul class="faq-rail__list">
            <li class="faq-rail__item">
              <a class="faq-rail__link" href="#login">
                <span class="faq-rail__label">登录与直达</span>
                <span class="faq-rail__count">4</span>
              </a>
            </li>
            <li class="faq-rail__item">
              <a class="faq-rail__link" href="#saved">
                <span class="faq-rail__label">收藏与订阅</span>
                <span class="faq-rail__count">4</span>
              </a>
            </li>
            <li class="faq-rail__item">
              <a class="faq-rail__link" href="#version">
                <span class="faq-rail__label">版本与导出</span>
                <span class="faq-rail__count">4</span>
              </a>
            </li>
            <li class="faq-rail__item">
              <a class="faq-rail__link" href="#device">
                <span class="faq-rail__label">账号与设备</span>
                <span class="faq-rail__count">3</span>
              </a>
            </li>
            <li class="faq-rail__item">
              <a class="faq-rail__link" href="#other">
                <span class="faq-rail__label">其他情况</span>
                <span class="faq-rail__count">3</span>
              </a>
            </li>
          </ul>
        </div>

        <div class="faq-rail__help">
          <p class="faq-rail__help-title">翻完还是没解决？</p>
          <p class="faq-rail__help-text">带上版本号和操作步骤描述，客服能更快定位。</p>
          <a class="bs-btn bs-btn--primary" href="/feedback/">去提交问题</a>
        </div>
      </aside>

      <div class="faq-stream">
        <section class="faq-group" id="login">
          <header class="faq-group__head">
            <span class="faq-group__index">01</span>
            <h2 class="faq-group__title">登录与直达</h2>
            <p class="faq-group__desc">从打开页面到看见当天的场次，中间几步都在这。</p>
          </header>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span class="faq-item__sign" aria-hidden="true"></span>
              <span class="faq-item__tag">顺序</span>
              <span class="faq-item__text">打开入口页面，应该先登录还是先看赛程？</span>
            </summary>
            <div class="faq-item__a">
              <p>先登录，再看赛程。登录之后页面会带上你自己的收藏和提醒，核对当天场次时不用再逐条翻找。未登录也能浏览赛程，只是收藏位置和提醒不会跟到其他设备上。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span class="faq-item__sign" aria-hidden="true"></span>
              <span class="faq-item__tag">刷新</span>
              <span class="faq-item__text">登录后当天赛程没有新变化，怎么刷新？</span>
            </summary>
            <div class="faq-item__a">
              <p>先手动刷新一次当前列表，多数情况是页面还停在旧数据上。当天赛程在临近开赛的几个小时里改动最频繁，页面开着超过半小时就该刷一下。刷新后仍然没有变化，再检查网络是不是切到了信号弱的环境。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span class="faq-item__sign" aria-hidden="true"></span>
              <span class="faq-item__tag">入口</span>
              <span class="faq-item__text">每天都想一步进站，怎么设置更省事？</span>
            </summary>
            <div class="faq-item__a">
              <p>两个办法：把首页存成浏览器书签，或者固定到手机桌面。桌面端还可以用浏览器的固定标签页，下次打开浏览器直接就在入口上。安卓版安装之后图标本身就是入口，不必每次重新搜索。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span class="faq-item__sign" aria-hidden="true"></span>
              <span class="faq-item__tag">排程</span>
              <span class="faq-item__text">一天里要看几场，赛程怎么排更清楚？</span>
            </summary>
            <div class="faq-item__a">
              <p>先按运动项目筛，再按开赛时间排，默认顺序就是从近到远。同一天有多场想看，把它们都收藏起来，提醒会按照各自的开始时间依次出现。收藏过的场次不用再逐个点开确认时间。</p>
            </div>
          </details>
        </section>

        <section class="faq-group" id="saved">
          <header class="faq-group__head">
            <span class="faq-group__index">02</span>
            <h2 class="faq-group__title">收藏与订阅</h2>
            <p class="faq-group__desc">位置固定、顺序自动，收藏之后基本不用再整理。</p>
          </header>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span class="faq-item__sign" aria-hidden="true"></span>
              <span class="faq-item__tag">第 3 栏</span>
              <span class="faq-item__text">收藏到第 3 栏到底是什么意思？</span>
            </summary>
            <div class="faq-item__a">
              <p>第 3 栏是收藏区的固定位置，放进去的页面会一直停在那儿，不会被新内容挤走。做法很简单：打开想留住的页面，点收藏，选第 3 栏。很多老用户把体育赛事常用页面收藏B体育 的习惯就是从这一栏养成的，之后每次进站，最先看到的就是这几个入口。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span class="faq-item__sign" aria-hidden="true"></span>
              <span class="faq-item__tag">排序</span>
              <span class="faq-item__text">订阅提醒为什么不是按收藏先后排的？</span>
            </summary>
            <div class="faq-item__a">
              <p>提醒按开赛时间排序，和收藏的先后没有关系。这样一晚连看几场的时候，通知的顺序和赛程顺序一致，不会前后颠倒。如果开赛时间临时调整，排序也会跟着重新计算。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span class="faq-item__sign" aria-hidden="true"></span>
              <span class="faq-item__tag">同步</span>
              <span class="faq-item__text">换了设备以后，收藏的位置还在吗？</span>
            </summary>
            <div class="faq-item__a">
              <p>在。用同一个账号登录，收藏栏的位置和顺序都会跟过来，包括停在第 3 栏的那一页。所以更推荐先登录再整理收藏，换手机、换电脑都不用重来一遍。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span class="faq-item__sign" aria-hidden="true"></span>
              <span class="faq-item__tag">整理</span>
              <span class="faq-item__text">收藏越来越多，怎么整理不混乱？</span>
            </summary>
            <div class="faq-item__a">
              <p>把一整季常看的放一起，偶尔才看的另放一处，找起来会快很多。提醒只对打开了订阅的场次生效，把不常看的提醒关掉，推送列表会清爽不少。想先看看最近的对照结论，赛事观察栏目里有持续更新的整理。</p>
            </div>
          </details>
        </section>

        <section class="faq-group" id="version">
          <header class="faq-group__head">
            <span class="faq-group__index">03</span>
            <h2 class="faq-group__title">版本与导出</h2>
            <p class="faq-group__desc">追比分、导数据，各版本的分工一次说清楚。</p>
          </header>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span class="faq-item__sign" aria-hidden="true"></span>
              <span class="faq-item__tag">版本</span>
              <span class="faq-item__text">追比分该用安卓版还是桌面版？</span>
            </summary>
            <div class="faq-item__a">
              <p>追比分优先用安卓版。当前安卓版是 v6.2，刷新频率更高，拿着手机看赛况更跟得上；坐下来看整轮赛程、整理数据，桌面新版 v6.0 更顺手。两个版本可以同时用，账号数据互通，随时切换。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span class="faq-item__sign" aria-hidden="true"></span>
              <span class="faq-item__tag">导出</span>
              <span class="faq-item__text">导出文件选 CSV 还是 JSON？</span>
            </summary>
            <div class="faq-item__a">
              <p>要拿进表格里算或者看，选 CSV；要交给程序处理或者保留字段结构，选 JSON。桌面新版支持这两种格式，导出前可以勾选需要的字段，不必整表带出。字段选得越准，后面整理的时间越省。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span class="faq-item__sign" aria-hidden="true"></span>
              <span class="faq-item__tag">文件</span>
              <span class="faq-item__text">导出的文件双击打不开怎么办？</span>
            </summary>
            <div class="faq-item__a">
              <p>CSV 默认用表格软件打开，电脑上没装的话，先打开表格软件再导入文件。JSON 不是双击查看的格式，用文本编辑器打开才看得清结构。导出后顺手重命名，带上赛季和项目，日后好找。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span class="faq-item__sign" aria-hidden="true"></span>
              <span class="faq-item__tag">经典版</span>
              <span class="faq-item__text">经典版现在还能用吗？</span>
            </summary>
            <div class="faq-item__a">
              <p>三个版本并行维护，经典版 v5.8 照样能用。只看看赛程、不涉及导出和字段自选，经典版够用；需要导出数据或者更细的筛选，换到桌面新版更省事。想逐项比较，版本与下载页有完整的对照。</p>
            </div>
          </details>
        </section>

        <section class="faq-group" id="device">
          <header class="faq-group__head">
            <span class="faq-group__index">04</span>
            <h2 class="faq-group__title">账号与设备</h2>
            <p class="faq-group__desc">在手机和电脑之间来回切换时，最常碰到的几种情况。</p>
          </header>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span class="faq-item__sign" aria-hidden="true"></span>
              <span class="faq-item__tag">多端</span>
              <span class="faq-item__text">手机和电脑同时登录会互相顶掉吗？</span>
            </summary>
            <div class="faq-item__a">
              <p>不会，同一个账号可以在多台设备上同时登录。收藏位置和提醒设置在各设备之间保持一致，在一台设备上改动，另一台刷新后就同步。上班时在电脑上排好，回家用手机接着看，不用重新设置。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span class="faq-item__sign" aria-hidden="true"></span>
              <span class="faq-item__tag">会话</span>
              <span class="faq-item__text">登录状态突然失效是什么原因？</span>
            </summary>
            <div class="faq-item__a">
              <p>多半是清理了浏览器数据，或者长时间没有操作、会话到期。重新登录就行，收藏和提醒都还在。换了网络环境之后失效，也属于常见的安全处理，不用紧张。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span class="faq-item__sign" aria-hidden="true"></span>
              <span class="faq-item__tag">安全</span>
              <span class="faq-item__text">看到不是自己操作的登录提示怎么办？</span>
            </summary>
            <div class="faq-item__a">
              <p>先回忆一下是不是自己在另一台设备上登录过。确认不是自己的操作，马上改密码，并把不认识的设备退出。之后留意提醒和收藏有没有异常变化，有情况及时联系客服。</p>
            </div>
          </details>
        </section>

        <section class="faq-group" id="other">
          <header class="faq-group__head">
            <span class="faq-group__index">05</span>
            <h2 class="faq-group__title">其他情况</h2>
            <p class="faq-group__desc">关于记录、建议和回复时间的三问。</p>
          </header>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span class="faq-item__sign" aria-hidden="true"></span>
              <span class="faq-item__tag">隐私</span>
              <span class="faq-item__text">收藏记录算个人信息吗？</span>
            </summary>
            <div class="faq-item__a">
              <p>收藏和提醒设置会跟着账号保存，属于账号数据的一部分。收集范围、使用目的和保存方式都写在隐私政策里，随时可以打开查看。对某一条有疑问，也可以通过反馈渠道提出来。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span class="faq-item__sign" aria-hidden="true"></span>
              <span class="faq-item__tag">建议</span>
              <span class="faq-item__text">想提一个功能建议走哪条渠道？</span>
            </summary>
            <div class="faq-item__a">
              <p>走页脚的客服邮箱，或者从帮助与反馈页面提交。写清楚你用的是什么设备、当时的操作步骤和期望的效果，比只写一句「希望更好用」更容易被采纳。带上截图说明会更直观。</p>
            </div>
          </details>

          <details class="faq-item">
            <summary class="faq-item__q">
              <span class="faq-item__sign" aria-hidden="true"></span>
              <span class="faq-item__tag">时效</span>
              <span class="faq-item__text">提交之后多久能收到回复？</span>
            </summary>
            <div class="faq-item__a">
              <p>客服邮箱在工作日 9:00-18:00 内回复。赛事期间咨询量集中，回复会慢一些，建议优先从登录入口内的帮助与反馈提交，问题会带着当前的版本和页面信息一起送到，省去来回确认。</p>
            </div>
          </details>
        </section>
      </div>
    </div>
  </div>

  <section class="faq-cta bs-reveal" data-reveal="out">
    <div class="bs-container">
      <div class="faq-cta__inner">
        <figure class="faq-cta__media">
          <img src="{zhanqunpic:h:1100w:900}" width="900" height="1100" alt="暗色桌面上摊开的手写赛程笔记与亮着赛事列表的手机屏幕" loading="lazy" decoding="async">
        </figure>
        <div class="faq-cta__copy">
          <p class="bs-eyebrow">还差一步</p>
          <h2 class="faq-cta__title">还是没找到答案</h2>
          <p class="faq-cta__lede">把问题写清楚，剩下的交给客服。工作日 9:00-18:00 内回复，赛事高峰时会慢一些；先从帮助与反馈提交，问题会附带当前版本和所在页面，定位更快。</p>
          <div class="faq-cta__actions">
            <a class="bs-btn bs-btn--primary" href="/feedback/">去帮助与反馈</a>
            <a class="bs-btn bs-btn--ghost" href="/press/">翻翻赛事观察</a>
          </div>
          <p class="faq-cta__note">涉及个人信息的处理方式，可先查阅隐私政策；需要继续追问时，再走反馈渠道。</p>
        </div>
      </div>
    </div>
  </section>
</main>

.page-faq {
  --faq-rail-w: 268px;
  --faq-radius: 16px;
  --faq-cyan-soft: rgba(37, 224, 200, 0.14);
  background: var(--bs-void);
  color: var(--bs-ink);
  font-family: var(--bs-font);
}

.page-faq .faq-hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--bs-hd-h) + 34px);
  padding-bottom: clamp(52px, 8vw, 92px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 54px), 0 100%);
  background:
    radial-gradient(128% 92% at 88% -18%, rgba(122, 75, 232, 0.38), transparent 62%),
    radial-gradient(72% 62% at -8% 110%, rgba(37, 224, 200, 0.16), transparent 58%),
    linear-gradient(178deg, var(--bs-void) 6%, var(--bs-night) 100%);
}

.page-faq .faq-hero .bs-breadcrumb {
  margin-bottom: clamp(20px, 3vw, 32px);
}

.page-faq .faq-hero__grid {
  display: grid;
  gap: clamp(26px, 4vw, 46px);
}

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

.page-faq .faq-hero__title {
  margin: 12px 0 0;
  font-size: clamp(29px, 6.2vw, 58px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.page-faq .faq-hero__hl {
  background: linear-gradient(180deg, transparent 60%, rgba(242, 92, 31, 0.28) 60%);
  padding-bottom: 2px;
}

.page-faq .faq-hero__lede {
  margin-top: 20px;
  max-width: 52ch;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.78;
  color: var(--bs-muted);
}

.page-faq .faq-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.page-faq .faq-hero__chips a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--bs-line);
  border-radius: 999px;
  background: rgba(16, 36, 58, 0.6);
  color: var(--bs-ink);
  font-size: 13px;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: border-color 0.22s var(--bs-ease), background 0.22s var(--bs-ease), transform 0.22s var(--bs-ease);
}

.page-faq .faq-hero__chips a:hover,
.page-faq .faq-hero__chips a:focus-visible {
  border-color: var(--bs-cyan);
  background: var(--faq-cyan-soft);
  transform: translateX(3px);
}

.page-faq .faq-hero__chips a span {
  font-family: var(--bs-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--bs-cyan);
}

.page-faq .faq-hero__media {
  margin: 0;
  min-width: 0;
}

.page-faq .faq-hero__frame {
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 95%);
  background: var(--bs-ice);
  box-shadow: 0 30px 64px -34px rgba(5, 8, 15, 0.95);
}

.page-faq .faq-hero__frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: brightness(0.88) saturate(1.04);
}

.page-faq .faq-hero__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(146deg, rgba(37, 224, 200, 0.18), transparent 56%, rgba(242, 92, 31, 0.16));
}

.page-faq .faq-body {
  display: grid;
  gap: clamp(30px, 4vw, 52px);
  margin-top: clamp(34px, 5vw, 62px);
  padding-bottom: clamp(44px, 6vw, 76px);
}

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

.page-faq .faq-rail__panel {
  border: 1px solid var(--bs-line-soft);
  border-radius: var(--faq-radius);
  background: linear-gradient(180deg, rgba(16, 36, 58, 0.74), rgba(11, 21, 38, 0.92));
  padding: 16px 14px 14px;
}

.page-faq .faq-rail__title {
  margin: 0 0 4px;
  padding: 0 8px 12px;
  border-bottom: 1px solid var(--bs-line-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bs-muted);
}

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

.page-faq .faq-rail__item + .faq-rail__item {
  margin-top: 2px;
}

.page-faq .faq-rail__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 10px 11px 26px;
  border-radius: 10px;
  color: var(--bs-muted);
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.2s var(--bs-ease), background 0.2s var(--bs-ease);
}

.page-faq .faq-rail__link::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--bs-line-soft);
  transition: background 0.2s var(--bs-ease);
}

.page-faq .faq-rail__link::after {
  content: "";
  position: absolute;
  left: 2.5px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: var(--bs-night);
  border: 1px solid var(--bs-line);
  transition: background 0.2s var(--bs-ease), border-color 0.2s var(--bs-ease), box-shadow 0.2s var(--bs-ease);
}

.page-faq .faq-rail__link:hover,
.page-faq .faq-rail__link:focus-visible {
  color: var(--bs-ink);
  background: rgba(37, 224, 200, 0.08);
}

.page-faq .faq-rail__link:hover::before,
.page-faq .faq-rail__link:focus-visible::before {
  background: rgba(37, 224, 200, 0.42);
}

.page-faq .faq-rail__link:hover::after,
.page-faq .faq-rail__link:focus-visible::after {
  background: var(--bs-cyan);
  border-color: var(--bs-cyan);
  box-shadow: 0 0 0 4px rgba(37, 224, 200, 0.14);
}

.page-faq .faq-rail__label {
  flex: 1 1 auto;
}

.page-faq .faq-rail__count {
  flex: none;
  padding: 1px 7px;
  border-radius: 6px;
  background: rgba(37, 224, 200, 0.1);
  color: var(--bs-cyan);
  font-family: var(--bs-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 700;
}

.page-faq .faq-rail__help {
  margin-top: 16px;
  padding: 18px 16px;
  border: 1px solid rgba(122, 75, 232, 0.42);
  border-radius: var(--faq-radius);
  background: linear-gradient(165deg, rgba(122, 75, 232, 0.3), rgba(11, 21, 38, 0.94));
}

.page-faq .faq-rail__help-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.page-faq .faq-rail__help-text {
  margin: 8px 0 14px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--bs-muted);
}

.page-faq .faq-stream {
  display: grid;
  gap: clamp(34px, 4.4vw, 56px);
  min-width: 0;
}

.page-faq .faq-group {
  scroll-margin-top: calc(var(--bs-hd-h-sm) + 26px);
  min-width: 0;
}

.page-faq .faq-group__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--bs-line-soft);
}

.page-faq .faq-group__index {
  font-family: var(--bs-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--bs-orange);
}

.page-faq .faq-group__title {
  margin: 0;
  font-size: clamp(20px, 3vw, 27px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.page-faq .faq-group__desc {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--bs-muted);
}

.page-faq .faq-item {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--bs-line-soft);
  border-radius: 14px;
  background: rgba(11, 21, 38, 0.68);
  transition: border-color 0.24s var(--bs-ease), background 0.24s var(--bs-ease);
}

.page-faq .faq-item + .faq-item {
  margin-top: 10px;
}

.page-faq .faq-item:hover {
  border-color: rgba(37, 224, 200, 0.32);
}

.page-faq .faq-item[open] {
  border-color: rgba(37, 224, 200, 0.46);
  background: rgba(16, 36, 58, 0.8);
}

.page-faq .faq-item__q {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 15px 16px;
  list-style: none;
  cursor: pointer;
  color: var(--bs-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
  transition: color 0.2s var(--bs-ease);
}

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

.page-faq .faq-item__sign {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: rgba(37, 224, 200, 0.13);
}

.page-faq .faq-item__sign::before,
.page-faq .faq-item__sign::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--bs-cyan);
  transform: translate(-50%, -50%);
  transition: transform 0.26s var(--bs-ease), opacity 0.26s var(--bs-ease);
}

.page-faq .faq-item__sign::before {
  width: 10px;
  height: 1.5px;
}

.page-faq .faq-item__sign::after {
  width: 1.5px;
  height: 10px;
}

.page-faq .faq-item[open] .faq-item__sign::after {
  transform: translate(-50%, -50%) scaleY(0);
  opacity: 0;
}

.page-faq .faq-item__tag {
  flex: none;
  padding: 2px 6px;
  border: 1px solid var(--bs-line-soft);
  border-radius: 5px;
  background: rgba(31, 58, 82, 0.55);
  color: var(--bs-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.6;
}

.page-faq .faq-item__text {
  flex: 1 1 60%;
  min-width: 0;
}

.page-faq .faq-item__a {
  margin: 0 16px 16px;
  padding-left: 14px;
  border-left: 2px solid var(--bs-cyan);
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--bs-muted);
}

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

.page-faq .faq-item__a p + p {
  margin-top: 10px;
}

.page-faq .faq-item[open] .faq-item__a {
  animation: faqUnfold 0.26s var(--bs-ease) both;
}

@keyframes faqUnfold {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-faq .faq-cta {
  padding-top: clamp(40px, 6vw, 74px);
  padding-bottom: clamp(50px, 7vw, 88px);
  border-top: 1px solid rgba(142, 27, 58, 0.55);
  background:
    radial-gradient(92% 118% at 8% 0%, rgba(142, 27, 58, 0.5), transparent 62%),
    linear-gradient(180deg, var(--bs-night), var(--bs-void));
}

.page-faq .faq-cta__inner {
  display: grid;
  gap: clamp(24px, 4vw, 46px);
  align-items: center;
}

.page-faq .faq-cta__media {
  margin: 0;
  min-width: 0;
}

.page-faq .faq-cta__media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 400px;
  aspect-ratio: 9 / 11;
  object-fit: cover;
  border-radius: 18px 4px 18px 4px;
  filter: brightness(0.84) saturate(1.04);
  box-shadow: 0 32px 64px -34px rgba(0, 0, 0, 0.92);
}

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

.page-faq .faq-cta__title {
  margin: 12px 0 0;
  font-size: clamp(24px, 4vw, 38px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.018em;
}

.page-faq .faq-cta__lede {
  margin: 14px 0 0;
  max-width: 50ch;
  font-size: 15px;
  line-height: 1.78;
  color: var(--bs-muted);
}

.page-faq .faq-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.page-faq .faq-cta__note {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--bs-line-soft);
  font-size: 13px;
  line-height: 1.7;
  color: var(--bs-muted);
}

.page-faq .faq-rail__link:focus-visible,
.page-faq .faq-item__q:focus-visible,
.page-faq .faq-hero__chips a:focus-visible {
  outline: 2px solid var(--bs-cyan);
  outline-offset: 3px;
}

@media (min-width: 860px) {
  .page-faq .faq-cta__inner {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: clamp(30px, 4vw, 54px);
  }
}

@media (min-width: 900px) {
  .page-faq .faq-hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
  }
}

@media (min-width: 960px) {
  .page-faq .faq-body {
    grid-template-columns: var(--faq-rail-w) minmax(0, 1fr);
    align-items: start;
  }

  .page-faq .faq-rail {
    position: sticky;
    top: calc(var(--bs-hd-h-sm) + 26px);
    align-self: start;
  }
}

@media (max-width: 620px) {
  .page-faq .faq-hero {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), 0 100%);
  }

  .page-faq .faq-item__q {
    padding: 14px 14px;
    font-size: 14.5px;
  }

  .page-faq .faq-item__sign {
    order: 1;
  }

  .page-faq .faq-item__text {
    order: 2;
    flex: 1 1 100%;
  }

  .page-faq .faq-item__tag {
    order: 3;
  }

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

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-item[open] .faq-item__a {
    animation: none;
  }

  .page-faq .faq-hero__chips a:hover,
  .page-faq .faq-hero__chips a:focus-visible {
    transform: none;
  }
}