/* ================= 支持中心 · 页面专属样式 ================= */

.page-faq {
  --faq-surface: rgba(232, 217, 190, 0.46);
  --faq-surface-strong: rgba(232, 217, 190, 0.8);
  background-color: var(--sj-cream);
  color: var(--sj-stone);
  font-family: var(--sj-sans);
}

/* ---------- 面包屑 ---------- */
.page-faq .faq-crumb {
  padding-top: clamp(0.9rem, 2.4vw, 1.6rem);
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero {
  position: relative;
  padding-block: clamp(1.25rem, 3vw, 2.25rem) clamp(2.5rem, 6vw, 4.5rem);
}

.page-faq .faq-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 62%;
  background: linear-gradient(180deg, rgba(201, 169, 110, 0.18), rgba(245, 239, 230, 0));
  pointer-events: none;
  z-index: 0;
}

.page-faq .faq-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}

.page-faq .faq-hero__title {
  margin: 0.75rem 0 0;
  font-family: var(--sj-serif);
  font-weight: 700;
  font-size: clamp(1.9rem, 6vw, 3.15rem);
  line-height: 1.14;
  letter-spacing: -0.012em;
  color: var(--sj-ink);
}

.page-faq .faq-hero__title::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 3px;
  margin-top: 1.1rem;
  border-radius: 2px;
  background: var(--sj-grad-gold);
}

.page-faq .faq-hero__lede {
  margin: 1rem 0 0;
  max-width: 54ch;
}

.page-faq .faq-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1.25rem;
  margin: clamp(1.5rem, 3.5vw, 2.25rem) 0 0;
  padding: clamp(1.1rem, 2.6vw, 1.5rem) 0 0;
  border-top: 1px solid var(--sj-line-soft);
}

.page-faq .faq-stat {
  display: block;
  margin: 0;
}

.page-faq .faq-stat__value {
  display: block;
  font-size: clamp(1.25rem, 3.4vw, 1.6rem);
  line-height: 1.1;
  font-weight: 600;
  color: var(--sj-gold-deep);
  letter-spacing: -0.01em;
}

.page-faq .faq-stat__label {
  display: block;
  margin: 0.45rem 0 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--sj-stone);
}

.page-faq .faq-hero__media {
  margin: 0;
  border-radius: var(--sj-radius);
  overflow: hidden;
}

.page-faq .faq-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* ---------- 主体两栏 ---------- */
.page-faq .faq-body {
  padding-block: clamp(1rem, 2.5vw, 1.5rem) clamp(2.5rem, 6vw, 4rem);
}

.page-faq .faq-body__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 3.5rem);
}

/* ---------- 左侧分类索引 ---------- */
.page-faq .faq-index__list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

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

.page-faq .faq-index__link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--sj-line-soft);
  border-radius: 999px;
  background: var(--faq-surface);
  color: var(--sj-ink);
  font-size: 0.88rem;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.page-faq .faq-index__link:hover,
.page-faq .faq-index__link:focus-visible {
  background: var(--faq-surface-strong);
  border-color: var(--sj-gold);
  transform: translateY(-1px);
}

.page-faq .faq-index__num {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--sj-gold-deep);
}

/* ---------- 问答分区 ---------- */
.page-faq .faq-block {
  scroll-margin-top: 6rem;
  padding-block: clamp(1.75rem, 4.5vw, 3rem);
  border-top: 1px solid var(--sj-line-soft);
}

.page-faq .faq-answers > .faq-block:first-child {
  border-top: 0;
  padding-top: 0;
}

.page-faq .faq-block__index {
  margin: 0;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sj-gold-deep);
}

.page-faq .faq-block__title {
  margin: 0.5rem 0 0;
  font-family: var(--sj-serif);
  font-weight: 700;
  font-size: clamp(1.35rem, 3.6vw, 1.85rem);
  line-height: 1.28;
  color: var(--sj-ink);
}

.page-faq .faq-block__lede {
  margin: 0.7rem 0 0;
  max-width: 58ch;
  line-height: 1.8;
  color: var(--sj-stone);
}

.page-faq .faq-block__lede a {
  color: var(--sj-gold-deep);
  text-decoration: underline;
  text-decoration-color: var(--sj-line);
  text-underline-offset: 3px;
}

.page-faq .faq-block__lede a:hover {
  color: var(--sj-red);
}

/* ---------- 折叠问答 ---------- */
.page-faq .faq-q {
  margin-top: 0.75rem;
  border: 1px solid var(--sj-line-soft);
  border-radius: var(--sj-radius-sm);
  background: linear-gradient(160deg, rgba(232, 217, 190, 0.52) 0%, rgba(245, 239, 230, 0.72) 72%);
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.page-faq .faq-q:hover {
  border-color: var(--sj-line);
}

.page-faq .faq-q[open] {
  border-color: var(--sj-gold);
  box-shadow: var(--sj-shadow);
}

.page-faq .faq-q__summary {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  cursor: pointer;
  list-style: none;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--sj-ink);
}

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

.page-faq .faq-q__summary::marker {
  content: "";
}

.page-faq .faq-q__summary::after {
  content: "＋";
  margin-left: auto;
  flex: none;
  font-family: var(--sj-mono);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--sj-gold-deep);
  transition: color 0.25s ease;
}

.page-faq .faq-q[open] .faq-q__summary::after {
  content: "−";
  color: var(--sj-red);
}

.page-faq .faq-q__mark {
  flex: none;
  padding-top: 0.24rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--sj-gold-mid);
}

.page-faq .faq-q__body {
  padding: 0 1.1rem 1.15rem;
  font-size: 0.94rem;
  line-height: 1.85;
  color: var(--sj-stone);
}

.page-faq .faq-q__body > p {
  margin: 0 0 0.65rem;
}

.page-faq .faq-q__body > p:last-child {
  margin-bottom: 0;
}

.page-faq .faq-q__body a {
  color: var(--sj-gold-deep);
  text-decoration: underline;
  text-decoration-color: var(--sj-line);
  text-underline-offset: 3px;
}

.page-faq .faq-q__body a:hover {
  color: var(--sj-red);
}

/* ---------- 小屏主页章节 ---------- */
.page-faq .faq-mini__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: 1.25rem;
  align-items: start;
}

.page-faq .faq-mini__media {
  margin: 0 auto;
  width: 100%;
  max-width: 21rem;
  border-radius: var(--sj-radius);
  overflow: hidden;
}

.page-faq .faq-mini__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
}

/* ---------- 联系方式面板 ---------- */
.page-faq .faq-contact {
  display: grid;
  gap: 1.15rem;
  margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
  padding: clamp(1.25rem, 3.5vw, 1.9rem);
  border-radius: var(--sj-radius);
  border: 1px solid rgba(201, 169, 110, 0.34);
  background: linear-gradient(150deg, var(--sj-ink) 0%, var(--sj-ink-soft) 100%);
  color: var(--sj-cream);
}

.page-faq .faq-contact__row {
  display: grid;
  gap: 0.4rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed rgba(201, 169, 110, 0.3);
}

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

.page-faq .faq-contact__label {
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sj-gold);
}

.page-faq .faq-contact__value {
  font-size: clamp(0.92rem, 2.6vw, 1.12rem);
  line-height: 1.5;
  color: var(--sj-cream);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.page-faq .faq-contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ---------- 断点 ---------- */
@media (min-width: 640px) {
  .page-faq .faq-hero__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-faq .faq-q__summary {
    padding: 1.05rem 1.25rem;
  }

  .page-faq .faq-q__body {
    padding: 0 1.25rem 1.25rem 3.35rem;
  }

  .page-faq .faq-contact__actions {
    justify-content: flex-start;
  }
}

@media (min-width: 820px) {
  .page-faq .faq-hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }

  .page-faq .faq-mini__layout {
    grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.68fr);
  }

  .page-faq .faq-mini__media {
    max-width: none;
    margin: 0;
  }
}

@media (min-width: 980px) {
  .page-faq .faq-body__grid {
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.78fr);
    gap: clamp(2.5rem, 5vw, 4rem);
  }

  .page-faq .faq-index {
    position: sticky;
    top: 6.5rem;
  }

  .page-faq .faq-index__list {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.25rem;
  }

  .page-faq .faq-index__link {
    display: flex;
    width: 100%;
    padding: 0.68rem 0.8rem;
    border-color: transparent;
    border-left: 2px solid transparent;
    border-radius: var(--sj-radius-sm);
    background: transparent;
  }

  .page-faq .faq-index__link:hover,
  .page-faq .faq-index__link:focus-visible {
    background: var(--faq-surface);
    border-color: transparent;
    border-left-color: var(--sj-gold-deep);
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-index__link,
  .page-faq .faq-q,
  .page-faq .faq-q__summary::after {
    transition: none;
  }

  .page-faq .faq-index__link:hover,
  .page-faq .faq-index__link:focus-visible {
    transform: none;
  }
}
<<<END>>>

检查一下——规则说 `<main id="main-content" class="page-faq">`。我写的是 `<main id="main-content" class="page-faq">`。嗯，我写成 `class="page-faq"` 了？再回头看：我写的是 `class="page-faq"`。对。

好。而且我还需要确保面包屑链接用 `sj-crumb__link`——这个可能不在共享类列表里，但没关系，因为这是作用域内的，而且我没给它写样式（依赖共享样式）。其实没样式可能会看起来没装饰。但 `sj-crumb__item a` 大概率有共享样式。算了，就这样。

嗯，实际上共享类列表里有 `sj-crumb`、`sj-crumb__item`、`sj-crumb__list`，但没有 `sj-crumb__link`。用没定义的类没关系（只是个类，不算死属性），但可能没有样式。我还是稳妥一点，给它加个内联样式……不行。干脆给它加一个简单的 `.page-faq` 作用域规则，覆盖链接颜色。

在 CSS 里加上：

.page-faq .faq-crumb .sj-crumb__link { color: var(--sj-gold-deep); text-decoration: none; }

嗯，但是 `sj-crumb__link` 本来就不是共享类，那就是我自己的类了。让我就定成 `.faq-crumb a` 吧。更简单。

加：
```css
.page-faq .faq-crumb a {
  color: var(--sj-gold-deep);
  text-decoration: none;
}
.page-faq .faq-crumb a:hover { color: var(--sj-red); }
```

我把它加进 CSS 里。再更新一下。

最终输出。
<main id="main-content" class="page-faq">

  <div class="sj-container faq-crumb">
    <nav class="sj-crumb" aria-label="面包屑">
      <ol class="sj-crumb__list">
        <li class="sj-crumb__item"><a href="/">首页</a></li>
        <li class="sj-crumb__item"><a href="/support/" aria-current="page">支持中心</a></li>
      </ol>
    </nav>
  </div>

  <section class="sj-section faq-hero" aria-labelledby="faq-hero-title">
    <div class="sj-container faq-hero__grid">
      <div class="faq-hero__lead">
        <p class="sj-eyebrow">支持中心 · 问答手册</p>
        <h1 class="faq-hero__title" id="faq-hero-title">订阅、配置、开服价格，疑问一次问清</h1>
        <p class="sj-lede faq-hero__lede">澳门沙金游把玩家从挑方案、比机器到开服后遇到故障最常卡住的几件事收成了一册。多数疑问点开就有答案，剩下的交给邮件支持。</p>
        <dl class="faq-hero__stats">
          <div class="faq-stat">
            <dt class="faq-stat__value sj-mono">7×12</dt>
            <dd class="faq-stat__label">小时邮件响应窗口</dd>
          </div>
          <div class="faq-stat">
            <dt class="faq-stat__value sj-mono">24</dt>
            <dd class="faq-stat__label">小时内给出配置排查建议</dd>
          </div>
          <div class="faq-stat">
            <dt class="faq-stat__value sj-mono">48</dt>
            <dd class="faq-stat__label">小时同步平台侧价格变更</dd>
          </div>
          <div class="faq-stat">
            <dt class="faq-stat__value sj-mono">3200+</dt>
            <dd class="faq-stat__label">篇攻略挂在攻略区随手翻</dd>
          </div>
        </dl>
      </div>
      <figure class="sj-media faq-hero__media">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="沙金与深墨绿抽象纹理，低饱和金属质感，作为支持中心页首视觉">
      </figure>
    </div>
  </section>

  <section class="sj-section faq-body" aria-labelledby="faq-index-title">
    <div class="sj-container faq-body__grid">

      <aside class="faq-index">
        <p class="sj-eyebrow" id="faq-index-title">问题分类</p>
        <ul class="faq-index__list">
          <li class="faq-index__item"><a class="faq-index__link" href="#fees"><span class="faq-index__num sj-mono">01</span>订阅怎么选</a></li>
          <li class="faq-index__item"><a class="faq-index__link" href="#spec"><span class="faq-index__num sj-mono">02</span>配置对不对</a></li>
          <li class="faq-index__item"><a class="faq-index__link" href="#opening"><span class="faq-index__num sj-mono">03</span>开服价格</a></li>
          <li class="faq-index__item"><a class="faq-index__link" href="#mini"><span class="faq-index__num sj-mono">04</span>小屏主页</a></li>
          <li class="faq-index__item"><a class="faq-index__link" href="#account"><span class="faq-index__num sj-mono">05</span>账号与安装包</a></li>
          <li class="faq-index__item"><a class="faq-index__link" href="#help"><span class="faq-index__num sj-mono">06</span>找客服</a></li>
        </ul>
      </aside>

      <div class="faq-answers">

        <article class="faq-block" id="fees">
          <header class="faq-block__head">
            <p class="faq-block__index sj-mono">01 / 订阅</p>
            <h2 class="faq-block__title">订阅怎么选，费用怎么看</h2>
            <p class="faq-block__lede">三档用的是同一套客户端功能和内容权限，差别在周期长短与折算下来的月成本。先把选择逻辑理顺，再打开<a href="/app-download/">客户端下载页</a>那张三档并排的对比卡看金额，会省事很多。</p>
          </header>
          <div class="faq-block__items">
            <details class="sj-panel faq-q" data-reveal>
              <summary class="faq-q__summary">
                <span class="faq-q__mark sj-mono">Q1</span>
                <span class="faq-q__text">月付、季付、年付，我从哪一档开始比较合适？</span>
              </summary>
              <div class="sj-panel__body faq-q__body">
                <p>第一次接触沙金客户端，月付最轻，先跑通配置、跟完一个版本周期再说。已经确定会连续跟版本更新的玩家，季付把时间成本和费用都摊得更平。把攻略库、版本提醒和配置对比方案长期当工具用的人，年付最省。</p>
              </div>
            </details>
            <details class="sj-panel faq-q" data-reveal>
              <summary class="faq-q__summary">
                <span class="faq-q__mark sj-mono">Q2</span>
                <span class="faq-q__text">澳门沙金服务订阅费用在哪里能看到最新的？</span>
              </summary>
              <div class="sj-panel__body faq-q__body">
                <p>在客户端下载页。那里有一张三档并排的对比卡，逐项列出计费周期、折算月价和各自包含的内容，价格数字用等宽字体单独排出来，横向比一眼就能看完。</p>
              </div>
            </details>
            <details class="sj-panel faq-q" data-reveal>
              <summary class="faq-q__summary">
                <span class="faq-q__mark sj-mono">Q3</span>
                <span class="faq-q__text">订阅到期后，我收藏的攻略和存好的配置方案会丢吗？</span>
              </summary>
              <div class="sj-panel__body faq-q__body">
                <p>不会。收藏的攻略、订阅的版本变更提醒、保存下来的配置对比方案都跟着账号走，重新订阅后照常打开。攻略区的公开内容一直可以翻阅，不受周期影响。</p>
              </div>
            </details>
            <details class="sj-panel faq-q" data-reveal>
              <summary class="faq-q__summary">
                <span class="faq-q__mark sj-mono">Q4</span>
                <span class="faq-q__text">中途想换档位怎么办？</span>
              </summary>
              <div class="sj-panel__body faq-q__body">
                <p>在当前周期结束后改选即可，新周期按新档位计。换档不影响账号里的收藏、提醒和配置方案，改完继续用。</p>
              </div>
            </details>
          </div>
        </article>

        <article class="faq-block" id="spec">
          <header class="faq-block__head">
            <p class="faq-block__index sj-mono">02 / 配置</p>
            <h2 class="faq-block__title">配置对得上，玩起来才顺</h2>
            <p class="faq-block__lede">沙金新版配置要求分基础、推荐、高帧三个档位，覆盖 Windows、macOS、Android 与 iOS 客户端。先看显卡和内存，再决定按哪一档装，能挡掉装完才发现跑不动的情况。</p>
          </header>
          <div class="faq-block__items">
            <details class="sj-panel faq-q" data-reveal>
              <summary class="faq-q__summary">
                <span class="faq-q__mark sj-mono">Q1</span>
                <span class="faq-q__text">基础档、推荐档、高帧档分别适合什么机器？</span>
              </summary>
              <div class="sj-panel__body faq-q__body">
                <p>基础档保证进得去、界面操作跟得上，老一点的笔记本和办公本按这一档看。推荐档是大多数玩家的落点，画质和帧率都留了余量。高帧档给高刷新率显示器和愿意手动调画质的人准备，对显卡和内存的要求更宽。</p>
              </div>
            </details>
            <details class="sj-panel faq-q" data-reveal>
              <summary class="faq-q__summary">
                <span class="faq-q__mark sj-mono">Q2</span>
                <span class="faq-q__text">我的机器卡在两档之间，按哪一档装？</span>
              </summary>
              <div class="sj-panel__body faq-q__body">
                <p>优先按低一档装，先进游戏跑一遍，再逐项把画质往上抬。这样比直接按高档装、遇到掉帧再往下降要省心，也更容易找到自己机器真正舒服的那条线。</p>
              </div>
            </details>
            <details class="sj-panel faq-q" data-reveal>
              <summary class="faq-q__summary">
                <span class="faq-q__mark sj-mono">Q3</span>
                <span class="faq-q__text">三档配置表多久更新一次？</span>
              </summary>
              <div class="sj-panel__body faq-q__body">
                <p>配置要求表每季度复核一次，遇到重大版本更新会提前调整，一般在新版本上线前后 48 小时内完成同步。版本号和更新摘要可以在<a href="/stories/">内容故事</a>栏看到。</p>
              </div>
            </details>
            <details class="sj-panel faq-q" data-reveal>
              <summary class="faq-q__summary">
                <span class="faq-q__mark sj-mono">Q4</span>
                <span class="faq-q__text">装好之后卡顿、闪退，从哪儿下手排查？</span>
              </summary>
              <div class="sj-panel__body faq-q__body">
                <p>先看显卡驱动和系统版本是不是最新，再看客户端的版本号是不是当前版本。把设备型号、系统版本、客户端版本号和报错截图发到客服邮箱，复杂的配置问题一般在 24 小时内会给出排查建议。</p>
              </div>
            </details>
            <details class="sj-panel faq-q" data-reveal>
              <summary class="faq-q__summary">
                <span class="faq-q__mark sj-mono">Q5</span>
                <span class="faq-q__text">macOS 和手机端也能玩吗？</span>
              </summary>
              <div class="sj-panel__body faq-q__body">
                <p>能。三个档位都覆盖 Windows、macOS、Android 和 iOS 客户端。移动端可调的画质项少一些，按推荐档的硬件标准看就够用。</p>
              </div>
            </details>
          </div>
        </article>

        <article class="faq-block" id="opening">
          <header class="faq-block__head">
            <p class="faq-block__index sj-mono">03 / 价格</p>
            <h2 class="faq-block__title">开服价格翻到哪里看</h2>
            <p class="faq-block__lede">每款游戏详情页的第二栏就是开服价格，按平台并排列出，适合在掏钱之前横向比一遍，再决定在哪家开。</p>
          </header>
          <div class="faq-block__items">
            <details class="sj-panel faq-q" data-reveal>
              <summary class="faq-q__summary">
                <span class="faq-q__mark sj-mono">Q1</span>
                <span class="faq-q__text">具体在详情页的哪个位置？</span>
              </summary>
              <div class="sj-panel__body faq-q__body">
                <p>打开任意一款游戏，往下滚到第二栏，开服价格按国内游戏平台并排展示，同一天各家什么价一眼就比完了，不用来回切页面。</p>
              </div>
            </details>
            <details class="sj-panel faq-q" data-reveal>
              <summary class="faq-q__summary">
                <span class="faq-q__mark sj-mono">Q2</span>
                <span class="faq-q__text">价格多久刷新一次？</span>
              </summary>
              <div class="sj-panel__body faq-q__body">
                <p>开服价格数据库每 48 小时同步一次平台侧的变更，页面保留最近 12 个版本的价格记录，看得出哪些平台在调整节奏、调了几轮。</p>
              </div>
            </details>
            <details class="sj-panel faq-q" data-reveal>
              <summary class="faq-q__summary">
                <span class="faq-q__mark sj-mono">Q3</span>
                <span class="faq-q__text">价格库覆盖多少游戏和平台？</span>
              </summary>
              <div class="sj-panel__body faq-q__body">
                <p>价格库覆盖 320 款以上游戏，并与 48 家国内游戏平台建立了开服信息同步合作，热门新游基本都能查到开盘当天的价格分布。</p>
              </div>
            </details>
            <details class="sj-panel faq-q" data-reveal>
              <summary class="faq-q__summary">
                <span class="faq-q__mark sj-mono">Q4</span>
                <span class="faq-q__text">手机上也能查价格吗？</span>
              </summary>
              <div class="sj-panel__body faq-q__body">
                <p>可以。小屏主页的分类标签能快速跳到开服情报和版本变更，锁定想看的游戏后再进详情页第二栏，就能看到完整的平台价格。</p>
              </div>
            </details>
          </div>
        </article>

        <article class="faq-block faq-block--mini" id="mini">
          <header class="faq-block__head">
            <p class="faq-block__index sj-mono">04 / 小屏</p>
            <h2 class="faq-block__title">小屏主页怎么用</h2>
            <p class="faq-block__lede">小屏主页专为手机和小尺寸窗口优化，点开就是分类标签，不用一层层翻菜单。</p>
          </header>
          <div class="faq-mini__layout">
            <div class="faq-mini__items">
              <details class="sj-panel faq-q" data-reveal>
                <summary class="faq-q__summary">
                  <span class="faq-q__mark sj-mono">Q1</span>
                  <span class="faq-q__text">电脑上从哪里进小屏主页？</span>
                </summary>
                <div class="sj-panel__body faq-q__body">
                  <p>桌面端入口固定在主页右侧，是一枚竖向胶囊。鼠标移上去会向左展开分类标签预览，点一下直接进入，不用先回顶部再找菜单。</p>
                </div>
              </details>
              <details class="sj-panel faq-q" data-reveal>
                <summary class="faq-q__summary">
                  <span class="faq-q__mark sj-mono">Q2</span>
                  <span class="faq-q__text">手机上入口在哪？</span>
                </summary>
                <div class="sj-panel__body faq-q__body">
                  <p>移动端入口转成底部悬浮横条，滚动时一直在，头部同时收成折叠菜单，单手就能切分类。</p>
                </div>
              </details>
              <details class="sj-panel faq-q" data-reveal>
                <summary class="faq-q__summary">
                  <span class="faq-q__mark sj-mono">Q3</span>
                  <span class="faq-q__text">点开之后能直接看到什么？</span>
                </summary>
                <div class="sj-panel__body faq-q__body">
                  <p>首屏就是分类标签，覆盖开服情报、配置要求、攻略、订阅费用与版本变更。首屏平均 1.2 秒加载完，点标签后 0.4 秒内呈现内容，地铁里刷也不费劲。</p>
                </div>
              </details>
            </div>
            <figure class="sj-media faq-mini__media">
              <img src="{zhanqunpic:h:1280w:720}" width="720" height="1280" loading="lazy" decoding="async" alt="小屏设备上的支持中心界面，分类标签与折叠问答可见">
            </figure>
          </div>
        </article>

        <article class="faq-block" id="account">
          <header class="faq-block__head">
            <p class="faq-block__index sj-mono">05 / 安全</p>
            <h2 class="faq-block__title">账号与安装包，这几件事最要紧</h2>
            <p class="faq-block__lede">安装包从哪来、账号信息往哪去，是玩家问得最多的两类安全问题。账号数据的处理方式可以看<a href="/personal-data/">个人信息说明</a>。</p>
          </header>
          <div class="faq-block__items">
            <details class="sj-panel faq-q" data-reveal>
              <summary class="faq-q__summary">
                <span class="faq-q__mark sj-mono">Q1</span>
                <span class="faq-q__text">怎么确认下载到的安装包没被改过？</span>
              </summary>
              <div class="sj-panel__body faq-q__body">
                <p>客户端安装包带数字签名，下载页同时提供 SHA-256 校验值。下载完成后在本地跑一遍校验，对上了再安装，这一步花不了两分钟。</p>
              </div>
            </details>
            <details class="sj-panel faq-q" data-reveal>
              <summary class="faq-q__summary">
                <span class="faq-q__mark sj-mono">Q2</span>
                <span class="faq-q__text">有哪些账号风险要特别留心？</span>
              </summary>
              <div class="sj-panel__body faq-q__body">
                <p>任何情况下都不要把账号密码交给别人，包括自称客服的私信和陌生人转发的链接。订阅相关的沟通一律走客服邮箱，不要在第三方渠道提交订单号、支付信息或验证码。</p>
              </div>
            </details>
            <details class="sj-panel faq-q" data-reveal>
              <summary class="faq-q__summary">
                <span class="faq-q__mark sj-mono">Q3</span>
                <span class="faq-q__text">没有收到版本变更提醒怎么办？</span>
              </summary>
              <div class="sj-panel__body faq-q__body">
                <p>在客户端设置里看一下版本变更提醒是不是开着，并确认客户端已经是最新版本。仍然收不到，把账号和设备信息发到客服邮箱，我们帮你从后台查一遍订阅状态。</p>
              </div>
            </details>
            <details class="sj-panel faq-q" data-reveal>
              <summary class="faq-q__summary">
                <span class="faq-q__mark sj-mono">Q4</span>
                <span class="faq-q__text">换设备后，收藏的攻略和配置方案还在吗？</span>
              </summary>
              <div class="sj-panel__body faq-q__body">
                <p>在。用同一账号登录，收藏的攻略、订阅的版本提醒和保存的配置对比方案都会跟着账号走，新设备上打开就能接着用。</p>
              </div>
            </details>
          </div>
        </article>

        <article class="faq-block" id="help">
          <header class="faq-block__head">
            <p class="faq-block__index sj-mono">06 / 支持</p>
            <h2 class="faq-block__title">找客服，邮件最快</h2>
            <p class="faq-block__lede">订阅和开服相关的问题优先走邮件，账号、设备、版本号和截图一次说清，来回次数最少。想先了解平台的使用条款与内容版权，可以翻一下<a href="/legal/">法律声明</a>。</p>
          </header>
          <div class="faq-block__items">
            <details class="sj-panel faq-q" data-reveal>
              <summary class="faq-q__summary">
                <span class="faq-q__mark sj-mono">Q1</span>
                <span class="faq-q__text">订阅和开服咨询为什么建议先发邮件？</span>
              </summary>
              <div class="sj-panel__body faq-q__body">
                <p>邮件能把账号、设备型号、客户端版本号和截图放在一起，客服在 7×12 小时内响应，复杂的配置问题通常在 24 小时内给出排查建议。文字记录留在邮箱里，后续跟进也方便。</p>
              </div>
            </details>
            <details class="sj-panel faq-q" data-reveal>
              <summary class="faq-q__summary">
                <span class="faq-q__mark sj-mono">Q2</span>
                <span class="faq-q__text">什么情况下打电话更合适？</span>
              </summary>
              <div class="sj-panel__body faq-q__body">
                <p>登录受阻、支付状态显示异常这类需要当场确认的情况，可以拨打咨询电话。常规的费用询问和配置比对，走邮件会更清楚。</p>
              </div>
            </details>
            <details class="sj-panel faq-q" data-reveal>
              <summary class="faq-q__summary">
                <span class="faq-q__mark sj-mono">Q3</span>
                <span class="faq-q__text">发邮件时最好附上哪些信息？</span>
              </summary>
              <div class="sj-panel__body faq-q__body">
                <p>账号、设备型号与系统版本、客户端版本号、问题出现的时间点，再配一张报错截图。信息给得越齐，第一封回复就越接近答案。</p>
              </div>
            </details>
          </div>

          <aside class="faq-contact" aria-label="客服联系方式">
            <div class="faq-contact__row">
              <span class="faq-contact__label">客服邮箱 · 订阅与开服咨询优先</span>
              <span class="faq-contact__value sj-mono">support@shajin-macau-oasis.com.cn</span>
            </div>
            <div class="faq-contact__row">
              <span class="faq-contact__label">咨询电话 · 紧急账号问题</span>
              <span class="faq-contact__value sj-mono">400-9030-4790</span>
            </div>
            <div class="faq-contact__actions">
              <a class="sj-btn sj-btn--ember" href="/contact/">查看联系流程</a>
              <a class="sj-btn sj-btn--ghost" href="/app-download/">打开下载页</a>
            </div>
          </aside>
        </article>

      </div>
    </div>
  </section>

</main>

/* ================= 支持中心 · 页面专属样式 ================= */

.page-faq {
  --faq-surface: rgba(232, 217, 190, 0.46);
  --faq-surface-strong: rgba(232, 217, 190, 0.8);
  background-color: var(--sj-cream);
  color: var(--sj-stone);
  font-family: var(--sj-sans);
}

/* ---------- 面包屑 ---------- */
.page-faq .faq-crumb {
  padding-top: clamp(0.9rem, 2.4vw, 1.6rem);
}

.page-faq .faq-crumb a {
  color: var(--sj-gold-deep);
  text-decoration: none;
  transition: color 0.25s ease;
}

.page-faq .faq-crumb a:hover,
.page-faq .faq-crumb a:focus-visible {
  color: var(--sj-red);
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero {
  position: relative;
  padding-block: clamp(1.25rem, 3vw, 2.25rem) clamp(2.5rem, 6vw, 4.5rem);
}

.page-faq .faq-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 62%;
  background: linear-gradient(180deg, rgba(201, 169, 110, 0.18), rgba(245, 239, 230, 0));
  pointer-events: none;
  z-index: 0;
}

.page-faq .faq-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}

.page-faq .faq-hero__title {
  margin: 0.75rem 0 0;
  font-family: var(--sj-serif);
  font-weight: 700;
  font-size: clamp(1.9rem, 6vw, 3.15rem);
  line-height: 1.14;
  letter-spacing: -0.012em;
  color: var(--sj-ink);
}

.page-faq .faq-hero__title::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 3px;
  margin-top: 1.1rem;
  border-radius: 2px;
  background: var(--sj-grad-gold);
}

.page-faq .faq-hero__lede {
  margin: 1rem 0 0;
  max-width: 54ch;
}

.page-faq .faq-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1.25rem;
  margin: clamp(1.5rem, 3.5vw, 2.25rem) 0 0;
  padding: clamp(1.1rem, 2.6vw, 1.5rem) 0 0;
  border-top: 1px solid var(--sj-line-soft);
}

.page-faq .faq-stat {
  display: block;
  margin: 0;
}

.page-faq .faq-stat__value {
  display: block;
  font-size: clamp(1.25rem, 3.4vw, 1.6rem);
  line-height: 1.1;
  font-weight: 600;
  color: var(--sj-gold-deep);
  letter-spacing: -0.01em;
}

.page-faq .faq-stat__label {
  display: block;
  margin: 0.45rem 0 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--sj-stone);
}

.page-faq .faq-hero__media {
  margin: 0;
  border-radius: var(--sj-radius);
  overflow: hidden;
}

.page-faq .faq-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* ---------- 主体两栏 ---------- */
.page-faq .faq-body {
  padding-block: clamp(1rem, 2.5vw, 1.5rem) clamp(2.5rem, 6vw, 4rem);
}

.page-faq .faq-body__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 3.5rem);
}

/* ---------- 左侧分类索引 ---------- */
.page-faq .faq-index__list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

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

.page-faq .faq-index__link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--sj-line-soft);
  border-radius: 999px;
  background: var(--faq-surface);
  color: var(--sj-ink);
  font-size: 0.88rem;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.page-faq .faq-index__link:hover,
.page-faq .faq-index__link:focus-visible {
  background: var(--faq-surface-strong);
  border-color: var(--sj-gold);
  transform: translateY(-1px);
}

.page-faq .faq-index__num {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--sj-gold-deep);
}

/* ---------- 问答分区 ---------- */
.page-faq .faq-block {
  scroll-margin-top: 6rem;
  padding-block: clamp(1.75rem, 4.5vw, 3rem);
  border-top: 1px solid var(--sj-line-soft);
}

.page-faq .faq-answers > .faq-block:first-child {
  border-top: 0;
  padding-top: 0;
}

.page-faq .faq-block__index {
  margin: 0;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sj-gold-deep);
}

.page-faq .faq-block__title {
  margin: 0.5rem 0 0;
  font-family: var(--sj-serif);
  font-weight: 700;
  font-size: clamp(1.35rem, 3.6vw, 1.85rem);
  line-height: 1.28;
  color: var(--sj-ink);
}

.page-faq .faq-block__lede {
  margin: 0.7rem 0 0;
  max-width: 58ch;
  line-height: 1.8;
  color: var(--sj-stone);
}

.page-faq .faq-block__lede a {
  color: var(--sj-gold-deep);
  text-decoration: underline;
  text-decoration-color: var(--sj-line);
  text-underline-offset: 3px;
}

.page-faq .faq-block__lede a:hover {
  color: var(--sj-red);
}

/* ---------- 折叠问答 ---------- */
.page-faq .faq-q {
  margin-top: 0.75rem;
  border: 1px solid var(--sj-line-soft);
  border-radius: var(--sj-radius-sm);
  background: linear-gradient(160deg, rgba(232, 217, 190, 0.52) 0%, rgba(245, 239, 230, 0.72) 72%);
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.page-faq .faq-q:hover {
  border-color: var(--sj-line);
}

.page-faq .faq-q[open] {
  border-color: var(--sj-gold);
  box-shadow: var(--sj-shadow);
}

.page-faq .faq-q__summary {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  cursor: pointer;
  list-style: none;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--sj-ink);
}

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

.page-faq .faq-q__summary::marker {
  content: "";
}

.page-faq .faq-q__summary::after {
  content: "＋";
  margin-left: auto;
  flex: none;
  font-family: var(--sj-mono);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--sj-gold-deep);
  transition: color 0.25s ease;
}

.page-faq .faq-q[open] .faq-q__summary::after {
  content: "−";
  color: var(--sj-red);
}

.page-faq .faq-q__mark {
  flex: none;
  padding-top: 0.24rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--sj-gold-mid);
}

.page-faq .faq-q__body {
  padding: 0 1.1rem 1.15rem;
  font-size: 0.94rem;
  line-height: 1.85;
  color: var(--sj-stone);
}

.page-faq .faq-q__body > p {
  margin: 0 0 0.65rem;
}

.page-faq .faq-q__body > p:last-child {
  margin-bottom: 0;
}

.page-faq .faq-q__body a {
  color: var(--sj-gold-deep);
  text-decoration: underline;
  text-decoration-color: var(--sj-line);
  text-underline-offset: 3px;
}

.page-faq .faq-q__body a:hover {
  color: var(--sj-red);
}

/* ---------- 小屏主页章节 ---------- */
.page-faq .faq-mini__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: 1.25rem;
  align-items: start;
}

.page-faq .faq-mini__media {
  margin: 0 auto;
  width: 100%;
  max-width: 21rem;
  border-radius: var(--sj-radius);
  overflow: hidden;
}

.page-faq .faq-mini__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
}

/* ---------- 联系方式面板 ---------- */
.page-faq .faq-contact {
  display: grid;
  gap: 1.15rem;
  margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
  padding: clamp(1.25rem, 3.5vw, 1.9rem);
  border-radius: var(--sj-radius);
  border: 1px solid rgba(201, 169, 110, 0.34);
  background: linear-gradient(150deg, var(--sj-ink) 0%, var(--sj-ink-soft) 100%);
  color: var(--sj-cream);
}

.page-faq .faq-contact__row {
  display: grid;
  gap: 0.4rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed rgba(201, 169, 110, 0.3);
}

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

.page-faq .faq-contact__label {
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sj-gold);
}

.page-faq .faq-contact__value {
  font-size: clamp(0.92rem, 2.6vw, 1.12rem);
  line-height: 1.5;
  color: var(--sj-cream);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.page-faq .faq-contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ---------- 断点 ---------- */
@media (min-width: 640px) {
  .page-faq .faq-hero__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-faq .faq-q__summary {
    padding: 1.05rem 1.25rem;
  }

  .page-faq .faq-q__body {
    padding: 0 1.25rem 1.25rem 3.35rem;
  }
}

@media (min-width: 820px) {
  .page-faq .faq-hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }

  .page-faq .faq-mini__layout {
    grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.68fr);
  }

  .page-faq .faq-mini__media {
    max-width: none;
    margin: 0;
  }
}

@media (min-width: 980px) {
  .page-faq .faq-body__grid {
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.78fr);
    gap: clamp(2.5rem, 5vw, 4rem);
  }

  .page-faq .faq-index {
    position: sticky;
    top: 6.5rem;
  }

  .page-faq .faq-index__list {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.25rem;
  }

  .page-faq .faq-index__link {
    display: flex;
    width: 100%;
    padding: 0.68rem 0.8rem;
    border-color: transparent;
    border-left: 2px solid transparent;
    border-radius: var(--sj-radius-sm);
    background: transparent;
  }

  .page-faq .faq-index__link:hover,
  .page-faq .faq-index__link:focus-visible {
    background: var(--faq-surface);
    border-color: transparent;
    border-left-color: var(--sj-gold-deep);
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-index__link,
  .page-faq .faq-q,
  .page-faq .faq-q__summary::after,
  .page-faq .faq-crumb a {
    transition: none;
  }

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