.page-faq {
  --faq-index-w: 268px;
  --faq-line: rgba(233, 227, 213, .12);
  --faq-line-soft: rgba(233, 227, 213, .07);
  --faq-answer: rgba(233, 227, 213, .82);
  background: var(--ink);
  color: var(--bone);
  overflow-x: clip;
}

.page-faq .faq-crumb {
  padding-top: 26px;
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero {
  position: relative;
  padding-bottom: 40px;
}

.page-faq .faq-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  padding-top: 26px;
}

@media (min-width: 900px) {
  .page-faq .faq-hero__inner {
    grid-template-columns: 1.06fr .94fr;
    align-items: center;
    gap: 46px;
    padding-top: 42px;
    padding-bottom: 16px;
  }
}

.page-faq .faq-hero__frame {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 30px 24px 28px;
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(168, 85, 247, .16), transparent 58%),
    linear-gradient(160deg, rgba(27, 32, 39, .94), rgba(14, 17, 22, .62));
}

@media (min-width: 640px) {
  .page-faq .faq-hero__frame {
    padding: 42px 38px 36px;
  }
}

.page-faq .faq-hero__frame::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px dashed rgba(168, 85, 247, .26);
  border-radius: calc(var(--r-lg) - 6px);
  pointer-events: none;
}

.page-faq .faq-hero__frame::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 9px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--violet), var(--cyan) 48%, var(--lime));
  opacity: .75;
  pointer-events: none;
}

.page-faq .faq-hero__kicker {
  position: relative;
  z-index: 1;
  margin: 0 0 16px;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--cyan);
  text-transform: uppercase;
}

.page-faq .faq-hero__title {
  position: relative;
  z-index: 1;
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.28;
  letter-spacing: -.01em;
  color: var(--bone);
  text-shadow: 0 0 34px rgba(168, 85, 247, .4);
}

@media (min-width: 640px) {
  .page-faq .faq-hero__title {
    font-size: 40px;
  }
}

@media (min-width: 1080px) {
  .page-faq .faq-hero__title {
    font-size: 48px;
  }
}

.page-faq .faq-hero__lede {
  position: relative;
  z-index: 1;
  margin: 0 0 22px;
  max-width: 36em;
  font-size: 15.5px;
  line-height: 1.85;
  color: rgba(233, 227, 213, .86);
}

@media (min-width: 640px) {
  .page-faq .faq-hero__lede {
    font-size: 16.5px;
  }
}

.page-faq .faq-hero__meta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: rgba(233, 227, 213, .68);
}

.page-faq .faq-hero__meta li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.page-faq .faq-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.page-faq .faq-dot--lime {
  background: var(--lime);
  box-shadow: 0 0 10px 1px rgba(182, 255, 59, .8);
}

.page-faq .faq-dot--cyan {
  background: var(--cyan);
  box-shadow: 0 0 10px 1px rgba(34, 211, 238, .75);
}

.page-faq .faq-hero__figure {
  margin: 0;
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--glow-violet);
}

.page-faq .faq-hero__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(14, 17, 22, .1), rgba(14, 17, 22, .55));
  pointer-events: none;
}

.page-faq .faq-hero__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 先翻这三条 ---------- */
.page-faq .faq-top {
  padding: 12px 0 52px;
}

.page-faq .faq-top__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 30px;
}

@media (min-width: 760px) {
  .page-faq .faq-top__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}

.page-faq .faq-quick {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 22px 22px 26px;
  border-radius: var(--r-md);
  border: 1px solid var(--rule);
  background: linear-gradient(170deg, rgba(27, 32, 39, .96), rgba(14, 17, 22, .72));
  overflow: hidden;
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}

.page-faq .faq-quick::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--qc, var(--violet));
  box-shadow: 0 0 20px -1px var(--qc, var(--violet));
}

.page-faq .faq-quick:hover {
  border-color: var(--qc, var(--violet));
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-quick:hover {
    transform: none;
  }
}

.page-faq .faq-quick__tag {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--qc, var(--violet));
}

.page-faq .faq-quick__q {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--bone);
}

.page-faq .faq-quick__a {
  margin: 0;
  flex: 1 1 auto;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--faq-answer);
}

.page-faq .faq-quick .btn {
  align-self: flex-start;
}

/* ---------- 主体两栏 ---------- */
.page-faq .faq-body {
  padding: 46px 0 10px;
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(34, 211, 238, .07), transparent 60%),
    var(--ink);
}

.page-faq .faq-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

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

/* 左侧索引 */
.page-faq .faq-index {
  min-width: 0;
}

.page-faq .faq-index__title {
  margin: 0 0 12px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(233, 227, 213, .55);
}

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

.page-faq .faq-index__list::-webkit-scrollbar {
  display: none;
}

.page-faq .faq-index__list > li {
  flex: none;
}

.page-faq .faq-index__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: rgba(27, 32, 39, .82);
  color: rgba(233, 227, 213, .9);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), color .16s var(--ease), background-color .16s var(--ease);
}

.page-faq .faq-index__link::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex: none;
  background: var(--cat, var(--violet));
  transition: box-shadow .16s var(--ease);
}

.page-faq .faq-index__link:hover,
.page-faq .faq-index__link:focus-visible {
  color: #fff;
  border-color: var(--cat, var(--violet));
  box-shadow: 0 0 0 1px rgba(168, 85, 247, .28), 0 0 22px -8px var(--cat, var(--violet));
  outline: none;
}

.page-faq .faq-index__link:hover::before,
.page-faq .faq-index__link:focus-visible::before {
  box-shadow: 0 0 12px 1px var(--cat, var(--violet));
}

.page-faq .faq-index__count {
  font-size: 11.5px;
  color: rgba(233, 227, 213, .5);
}

.page-faq .faq-index__hint {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(233, 227, 213, .45);
}

@media (min-width: 960px) {
  .page-faq .faq-index {
    position: sticky;
    top: 92px;
    padding: 22px 20px 20px;
    border-radius: var(--r-md);
    border: 1px solid var(--rule);
    background: linear-gradient(180deg, rgba(27, 32, 39, .9), rgba(14, 17, 22, .5));
  }

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

  .page-faq .faq-index__link {
    width: 100%;
    justify-content: flex-start;
    border-radius: var(--r-sm);
    border-color: transparent;
    background: transparent;
    padding: 11px 12px;
  }

  .page-faq .faq-index__count {
    margin-left: auto;
  }
}

/* 问答面板 */
.page-faq .faq-panel {
  min-width: 0;
}

.page-faq .faq-group {
  margin-bottom: 42px;
  scroll-margin-top: 90px;
}

.page-faq .faq-group:last-child {
  margin-bottom: 0;
}

.page-faq .faq-group__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--faq-line);
}

.page-faq .faq-group__head::before {
  content: "";
  width: 22px;
  height: 3px;
  border-radius: 2px;
  flex: none;
  background: var(--cat, var(--moss));
  box-shadow: 0 0 14px -1px var(--cat, var(--moss));
}

.page-faq .faq-group__title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -.01em;
  color: var(--bone);
}

@media (min-width: 640px) {
  .page-faq .faq-group__title {
    font-size: 24px;
  }
}

.page-faq .faq-group__head .tag {
  margin-left: auto;
}

/* 折叠条目 */
.page-faq .faq-item {
  border-bottom: 1px solid var(--faq-line-soft);
  border-radius: var(--r-sm);
  transition: background-color .18s var(--ease), box-shadow .18s var(--ease);
}

.page-faq .faq-item[open] {
  background: linear-gradient(90deg, rgba(34, 211, 238, .07), rgba(168, 85, 247, .05) 58%, transparent);
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .14);
}

.page-faq .faq-item__q {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 17px 10px 17px 6px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.55;
  letter-spacing: -.005em;
  color: rgba(233, 227, 213, .95);
  transition: color .16s var(--ease);
}

@media (min-width: 640px) {
  .page-faq .faq-item__q {
    font-size: 16.5px;
    padding: 19px 12px 19px 8px;
  }
}

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

.page-faq .faq-item__q:hover {
  color: #fff;
}

.page-faq .faq-item__q:focus-visible {
  outline: 1px solid var(--cyan);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.page-faq .faq-item__mark {
  flex: none;
  width: 4px;
  height: 16px;
  border-radius: 2px;
  margin-top: 4px;
  background: var(--rule);
  transition: background-color .18s var(--ease), box-shadow .18s var(--ease), height .18s var(--ease);
}

.page-faq .faq-item[open] .faq-item__mark {
  height: 26px;
  background: var(--lime);
  box-shadow: 0 0 14px 0 rgba(182, 255, 59, .75);
}

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

.page-faq .faq-item__chev {
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 7px;
  margin-left: auto;
  border-right: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
  transform: rotate(45deg);
  transition: transform .2s var(--ease);
}

.page-faq .faq-item[open] .faq-item__chev {
  transform: rotate(-135deg);
}

.page-faq .faq-item__a {
  padding: 0 12px 22px 22px;
}

.page-faq .faq-item__a p {
  margin: 0;
  max-width: 44em;
  font-size: 14.8px;
  line-height: 1.85;
  color: var(--faq-answer);
}

@media (min-width: 640px) {
  .page-faq .faq-item__a p {
    font-size: 15.5px;
  }
}

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

.page-faq .faq-item__a a:hover {
  color: var(--lime);
}

/* 分值区间板块的图 */
.page-faq .faq-score__split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

@media (min-width: 1000px) {
  .page-faq .faq-score__split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    gap: 40px;
    align-items: start;
  }
}

.page-faq .faq-score__figure {
  margin: 20px 0 0;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--rule);
  background: rgba(27, 32, 39, .6);
}

@media (min-width: 1000px) {
  .page-faq .faq-score__figure {
    margin: 22px 0 0;
    position: sticky;
    top: 96px;
  }
}

.page-faq .faq-score__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.page-faq .faq-score__figure figcaption {
  padding: 12px 16px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  color: rgba(233, 227, 213, .6);
}

/* ---------- 还是没解决 ---------- */
.page-faq .faq-more {
  margin-top: 56px;
  background:
    radial-gradient(70% 100% at 12% 0%, rgba(194, 112, 63, .22), transparent 62%),
    var(--bone);
  color: var(--ink);
}

.page-faq .faq-more__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  padding: 52px 0 56px;
}

@media (min-width: 900px) {
  .page-faq .faq-more__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 64px;
    align-items: start;
    padding: 68px 0 72px;
  }
}

.page-faq .faq-more__kicker {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(14, 17, 22, .58);
}

.page-faq .faq-more__title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
}

@media (min-width: 640px) {
  .page-faq .faq-more__title {
    font-size: 36px;
  }
}

.page-faq .faq-more__text {
  margin: 0 0 22px;
  max-width: 38em;
  font-size: 15.5px;
  line-height: 1.85;
  color: rgba(14, 17, 22, .76);
}

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

.page-faq .faq-more__list li {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(14, 17, 22, .18);
  background: rgba(14, 17, 22, .05);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: rgba(14, 17, 22, .82);
}

.page-faq .faq-more__panel {
  padding: 24px 22px;
  border-radius: var(--r-md);
  border: 1px solid rgba(14, 17, 22, .14);
  background: rgba(233, 227, 213, .55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
}

.page-faq .faq-more__dl {
  margin: 0 0 20px;
}

.page-faq .faq-more__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(14, 17, 22, .12);
}

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

.page-faq .faq-more__row dt {
  min-width: 72px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: rgba(14, 17, 22, .55);
}

.page-faq .faq-more__row dd {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}

.page-faq .faq-more__row dd a {
  color: #7A2FA8;
  text-decoration: none;
  word-break: break-all;
}

.page-faq .faq-more__row dd a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-faq .faq-more__panel .btn {
  width: 100%;
  justify-content: center;
}

@media (min-width: 640px) {
  .page-faq .faq-more__panel .btn {
    width: auto;
  }
}


<main id="main-content" class="page-faq">

  <div class="shell faq-crumb">
    <nav class="breadcrumb" aria-label="当前位置">
      <a href="/">首页</a>
      <span class="breadcrumb__sep">/</span>
      <a href="/tools/">栏目工具台</a>
      <span class="breadcrumb__sep">/</span>
      <span class="lime">帮助中心</span>
    </nav>
  </div>

  <header class="faq-hero">
    <div class="shell faq-hero__inner">
      <div class="faq-hero__frame" data-reveal>
        <p class="faq-hero__kicker mono">HELP DESK · 68 条常见问题</p>
        <h1 class="faq-hero__title">遇到问题先翻这里，多数两步就能自己解决</h1>
        <p class="lede faq-hero__lede">收藏忽然没了、换了手机想找回存下的页面、换桌记录翻不到、某个栏目怎么搜都不出来、六档分值区间读不明白——777电玩城把这些最容易卡住人的地方按四类归好，答案直说，看完就能动手。</p>
        <ul class="faq-hero__meta">
          <li><span class="faq-dot faq-dot--lime" aria-hidden="true"></span>收藏 · 换桌 · 栏目对照 · 分值规则</li>
          <li><span class="faq-dot faq-dot--cyan" aria-hidden="true"></span>客服在线 10:00–22:00</li>
        </ul>
      </div>
      <figure class="faq-hero__figure">
        <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="霓虹灯管勾勒的大型问号与街机按键特写，紫青光线从斜上方射入暗色台面，边缘带光晕">
      </figure>
    </div>
  </header>

  <section id="faq-top" class="faq-top" aria-labelledby="faq-top-title">
    <div class="shell">
      <div class="chapter">
        <span class="chapter__num mono">01</span>
        <h2 class="chapter__title" id="faq-top-title">先翻这三条</h2>
        <span class="chapter__rule" aria-hidden="true"></span>
      </div>

      <div class="faq-top__grid">
        <article class="faq-quick" style="--qc: var(--magenta)" data-reveal>
          <p class="faq-quick__tag mono">问得最多</p>
          <h3 class="faq-quick__q">收藏突然不见了</h3>
          <p class="faq-quick__a">多半是换了设备、换了浏览器，或者清理过浏览数据。本地存着的收藏不会自己跟到新设备上。翻出之前记下的 <span class="mono lime">8</span> 位收藏码，或者用邮箱验证走一遍，平均两分钟就能拉回来。</p>
          <a class="btn btn--link" href="/tools/">去工具台找回</a>
        </article>

        <article class="faq-quick" style="--qc: var(--clay)" data-reveal>
          <p class="faq-quick__tag mono">时效相关</p>
          <h3 class="faq-quick__q">提示收藏码已经过期</h3>
          <p class="faq-quick__a">收藏码有效期 <span class="mono lime">30</span> 天，过了这个时间旧码就失效。重新生成一串 <span class="mono lime">8</span> 位新码，再用它导一次就行，收藏的内容本身不受影响。习惯长期换设备的话，隔一阵子重新点一次生成更省心。</p>
          <a class="btn btn--link" href="/tools/">重新生成收藏码</a>
        </article>

        <article class="faq-quick" style="--qc: var(--cyan)" data-reveal>
          <p class="faq-quick__tag mono">记录相关</p>
          <h3 class="faq-quick__q">换桌记录怎么翻不到</h3>
          <p class="faq-quick__a">记录中心保留最近 <span class="mono lime">30</span> 次，按时间从近到远排。如果刚清理过浏览器数据，那台设备上的记录会一起消失；换了设备之后，记录也从新设备开始重新累积。</p>
          <a class="btn btn--link" href="/tools/">打开记录中心</a>
        </article>
      </div>
    </div>
  </section>

  <section class="faq-body" aria-labelledby="faq-index-title">
    <div class="shell faq-layout">

      <aside class="faq-index">
        <h2 class="faq-index__title" id="faq-index-title">问题分类</h2>
        <ul class="faq-index__list">
          <li><a class="faq-index__link" style="--cat: var(--moss)" href="#faq-fav">收藏与找回<span class="faq-index__count mono">06</span></a></li>
          <li><a class="faq-index__link" style="--cat: var(--clay)" href="#faq-seat">换桌与记录<span class="faq-index__count mono">03</span></a></li>
          <li><a class="faq-index__link" style="--cat: var(--cyan)" href="#faq-columns">栏目对照<span class="faq-index__count mono">04</span></a></li>
          <li><a class="faq-index__link" style="--cat: var(--violet)" href="#faq-score">分值区间与结算规则<span class="faq-index__count mono">03</span></a></li>
          <li><a class="faq-index__link" style="--cat: var(--magenta)" href="#faq-view">视图与设备<span class="faq-index__count mono">02</span></a></li>
          <li><a class="faq-index__link" style="--cat: var(--lime)" href="#faq-more">还是没解决<span class="faq-index__count mono">→</span></a></li>
        </ul>
        <p class="faq-index__hint">点分类跳到对应问答，答案点标题展开。</p>
      </aside>

      <div class="faq-panel">

        <section id="faq-fav" class="faq-group" aria-labelledby="faq-fav-title">
          <header class="faq-group__head" style="--cat: var(--moss)">
            <h3 class="faq-group__title" id="faq-fav-title">收藏与找回</h3>
            <span class="tag tag--lime mono">6 条</span>
          </header>

          <details class="faq-item" data-reveal>
            <summary class="faq-item__q">
              <span class="faq-item__mark" aria-hidden="true"></span>
              <span class="faq-item__text">收藏夹最多能放多少个页面？</span>
              <span class="faq-item__chev" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>最多 <span class="mono lime">200</span> 个常用页面。到顶之后再点收藏不会顶掉旧条目，需要先去工具台删掉不再看的，或者把旧条目重新打标签整理出位置。标签和排序随时能改，删错了重新加回来也很快。</p>
            </div>
          </details>

          <details class="faq-item" data-reveal>
            <summary class="faq-item__q">
              <span class="faq-item__mark" aria-hidden="true"></span>
              <span class="faq-item__text">收藏怎么按自己的习惯整理？</span>
              <span class="faq-item__chev" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>每条收藏都能挂自定义标签，标签名字由你定，按用途分或者按关注的内容分都行。工具台里可以拖动排序，改完立刻生效，下次打开还是你排好的样子。</p>
            </div>
          </details>

          <details class="faq-item" data-reveal>
            <summary class="faq-item__q">
              <span class="faq-item__mark" aria-hidden="true"></span>
              <span class="faq-item__text">换了手机，之前的收藏还能找回来吗？</span>
              <span class="faq-item__chev" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>可以。8 位收藏码和邮箱验证两条路都支持，平均两分钟内走完。收藏本身和你加的标签会一起恢复，换桌记录不跟着走，会从新设备上重新开始记。操作入口在<a href="/tools/">栏目工具台</a>。</p>
            </div>
          </details>

          <details class="faq-item" data-reveal>
            <summary class="faq-item__q">
              <span class="faq-item__mark" aria-hidden="true"></span>
              <span class="faq-item__text">收藏码在哪里生成，长什么样子？</span>
              <span class="faq-item__chev" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>在工具台的收藏区域点生成，得到一串 <span class="mono lime">8</span> 位字符，字母和数字混合。复制下来存进备忘录或者发给自己都行，换设备的时候填进去就能把收藏拉回来。</p>
            </div>
          </details>

          <details class="faq-item" data-reveal>
            <summary class="faq-item__q">
              <span class="faq-item__mark" aria-hidden="true"></span>
              <span class="faq-item__text">收藏码的有效期是多久？</span>
              <span class="faq-item__chev" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>有效期 <span class="mono lime">30</span> 天，从生成那一刻算起。过期后旧码失效，重新生成一串即可，原来的收藏内容不受影响。经常在两台设备之间来回用的话，隔一段时间重新点一次生成，手里就始终有一张能用的。</p>
            </div>
          </details>

          <details class="faq-item" data-reveal>
            <summary class="faq-item__q">
              <span class="faq-item__mark" aria-hidden="true"></span>
              <span class="faq-item__text">几台设备轮流用，收藏会不会互相打架？</span>
              <span class="faq-item__chev" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>以最后一次导入的那份为准。两台设备各自加过新收藏之后，谁后导入收藏码，谁带来的那份就成为这一台当前的样子。想让内容对齐，导入前先确认一下另一端是不是也要留。</p>
            </div>
          </details>
        </section>

        <section id="faq-seat" class="faq-group" aria-labelledby="faq-seat-title">
          <header class="faq-group__head" style="--cat: var(--clay)">
            <h3 class="faq-group__title" id="faq-seat-title">换桌与记录</h3>
            <span class="tag tag--clay mono">3 条</span>
          </header>

          <details class="faq-item" data-reveal>
            <summary class="faq-item__q">
              <span class="faq-item__mark" aria-hidden="true"></span>
              <span class="faq-item__text">换桌记录保存多少条，在哪里看？</span>
              <span class="faq-item__chev" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>最近的 <span class="mono lime">30</span> 次，最新的排在最前，超出之后最旧的一条让位给新记录。入口在<a href="/tools/">栏目工具台</a>的换桌记录中心。</p>
            </div>
          </details>

          <details class="faq-item" data-reveal>
            <summary class="faq-item__q">
              <span class="faq-item__mark" aria-hidden="true"></span>
              <span class="faq-item__text">记录能按什么条件筛？</span>
              <span class="faq-item__chev" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>两个条件：栏目和时段。选完列表立刻跟着变，不用刷新。想回看某一类内容最近的节奏，先把栏目圈出来最省事；只记得大概在什么时候换的，就把时段缩短一点。</p>
            </div>
          </details>

          <details class="faq-item" data-reveal>
            <summary class="faq-item__q">
              <span class="faq-item__mark" aria-hidden="true"></span>
              <span class="faq-item__text">换桌记录和收藏是一回事吗？</span>
              <span class="faq-item__chev" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>不是。收藏是你主动挑出来、想随时点得到的那批页面；换桌记录是操作过的顺序流水，用来看节奏。记录不会自动进收藏夹，看中哪一条得自己再点一次收藏。</p>
            </div>
          </details>
        </section>

        <section id="faq-columns" class="faq-group" aria-labelledby="faq-columns-title">
          <header class="faq-group__head" style="--cat: var(--cyan)">
            <h3 class="faq-group__title" id="faq-columns-title">栏目对照</h3>
            <span class="tag tag--cyan mono">4 条</span>
          </header>

          <details class="faq-item" data-reveal>
            <summary class="faq-item__q">
              <span class="faq-item__mark" aria-hidden="true"></span>
              <span class="faq-item__text">每条栏目后面的三组标记分别是什么意思？</span>
              <span class="faq-item__chev" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>一组是类别，说明内容归在哪一类里；一组是玩法，说明具体怎么进行；还有一组是更新频率，告诉你这条目多久维护一次。三组独立标注，可以叠起来交叉筛选。</p>
            </div>
          </details>

          <details class="faq-item" data-reveal>
            <summary class="faq-item__q">
              <span class="faq-item__mark" aria-hidden="true"></span>
              <span class="faq-item__text">搜不到某个栏目是怎么回事？</span>
              <span class="faq-item__chev" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>常见三种情况：栏目刚改过名字，旧关键词对不上；这一条目被归到了你没想到的那一组；关键词写得太长反而框不住。先把词缩短、换个说法再试一次，还找不到就去<a href="/press/">更新动态</a>翻最近一轮的修订记录。</p>
            </div>
          </details>

          <details class="faq-item" data-reveal>
            <summary class="faq-item__q">
              <span class="faq-item__mark" aria-hidden="true"></span>
              <span class="faq-item__text">栏目对照多久更新一轮？</span>
              <span class="faq-item__chev" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>每周二和周五各一轮，单轮新增或修订 <span class="mono lime">20–60</span> 条。改动集中在当轮涉及的条目里，不会突然大范围重排，你熟的那几组还是原来的位置。</p>
            </div>
          </details>

          <details class="faq-item" data-reveal>
            <summary class="faq-item__q">
              <span class="faq-item__mark" aria-hidden="true"></span>
              <span class="faq-item__text">发现条目写得不对，能反馈吗？</span>
              <span class="faq-item__chev" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>可以，走<a href="/connect/">联系通道</a>提交。写清栏目名称和你了解到的实际情况，编辑复核之后会在最近一轮对照里体现。同一问题重复提交没必要，收一次就够。</p>
            </div>
          </details>
        </section>

        <section id="faq-score" class="faq-group" aria-labelledby="faq-score-title">
          <header class="faq-group__head" style="--cat: var(--violet)">
            <h3 class="faq-group__title" id="faq-score-title">分值区间与结算规则</h3>
            <span class="tag tag--violet mono">3 条</span>
          </header>

          <div class="faq-score__split">
            <div class="faq-score__qa">
              <details class="faq-item" data-reveal>
                <summary class="faq-item__q">
                  <span class="faq-item__mark" aria-hidden="true"></span>
                  <span class="faq-item__text">六档区间具体怎么划分？</span>
                  <span class="faq-item__chev" aria-hidden="true"></span>
                </summary>
                <div class="faq-item__a">
                  <p>依次是 <span class="mono lime">1–10</span>、<span class="mono lime">11–50</span>、<span class="mono lime">51–200</span>、<span class="mono lime">201–800</span>、<span class="mono lime">801–3000</span>，最后一档是 <span class="mono lime">3000</span> 以上。分值落在哪一档，就照着那一档的说明往下读，越往右档位越高。</p>
                </div>
              </details>

              <details class="faq-item" data-reveal>
                <summary class="faq-item__q">
                  <span class="faq-item__mark" aria-hidden="true"></span>
                  <span class="faq-item__text">分值是怎么累计上去的？</span>
                  <span class="faq-item__chev" aria-hidden="true"></span>
                </summary>
                <div class="faq-item__a">
                  <p>三步：先做分值累计，再判断落到哪一档，最后看结算展示。首页第一块内容就是按这三步讲读法的，配着例子顺一遍基本就通了。</p>
                </div>
              </details>

              <details class="faq-item" data-reveal>
                <summary class="faq-item__q">
                  <span class="faq-item__mark" aria-hidden="true"></span>
                  <span class="faq-item__text">区间图表在哪里能看到？</span>
                  <span class="faq-item__chev" aria-hidden="true"></span>
                </summary>
                <div class="faq-item__a">
                  <p>在结算规则页。2025 年上线的这张图表把六档画成一条刻度示意，最右一档用荧光绿标出来，对着数字一眼就能认出自己在哪一段。</p>
                </div>
              </details>
            </div>

            <figure class="faq-score__figure">
              <img loading="lazy" decoding="async" src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="六段分值区间的刻度示意图，深色底上六档刻度依次排开，最右侧一档以荧光绿高亮并带光晕">
              <figcaption>六档刻度示意：从 1–10 一路排到 3000 以上，越靠右档位越高。</figcaption>
            </figure>
          </div>
        </section>

        <section id="faq-view" class="faq-group" aria-labelledby="faq-view-title">
          <header class="faq-group__head" style="--cat: var(--magenta)">
            <h3 class="faq-group__title" id="faq-view-title">视图与设备</h3>
            <span class="tag tag--magenta mono">2 条</span>
          </header>

          <details class="faq-item" data-reveal>
            <summary class="faq-item__q">
              <span class="faq-item__mark" aria-hidden="true"></span>
              <span class="faq-item__text">手机上用哪种视图比较舒服？</span>
              <span class="faq-item__chev" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>移动端默认标准视图，大多数情况够用。想在一屏里多塞点内容就切紧凑，觉得字挤可以换舒展或者卡片。四种随时切，切换按钮在页头。</p>
            </div>
          </details>

          <details class="faq-item" data-reveal>
            <summary class="faq-item__q">
              <span class="faq-item__mark" aria-hidden="true"></span>
              <span class="faq-item__text">换设备之后视图设置还在吗？</span>
              <span class="faq-item__chev" aria-hidden="true"></span>
            </summary>
            <div class="faq-item__a">
              <p>跟着设备走。密度偏好保存在这台设备本机的浏览器里，换设备后需要重新选一次，页头或者<a href="/usage/">使用说明</a>里都能找到入口。</p>
            </div>
          </details>
        </section>

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

  <section id="faq-more" class="faq-more" aria-labelledby="faq-more-title">
    <div class="shell faq-more__inner">
      <div class="faq-more__copy">
        <p class="faq-more__kicker mono">06 / 客服通道</p>
        <h2 class="faq-more__title" id="faq-more-title">还是没解决，直接找我们</h2>
        <p class="faq-more__text">上面几条对不上你的情况，就发邮件或者打电话过来。服务时间每日 10:00–22:00，节假日无休。为了让您少等一轮，提交时把下面这几样一起带上，客服往往第一次回复就能给到答案。</p>
        <ul class="faq-more__list">
          <li>8 位收藏码</li>
          <li>出问题的栏目名称</li>
          <li>正在用的设备类型</li>
          <li>大概什么时候出现的</li>
        </ul>
      </div>

      <div class="faq-more__panel">
        <dl class="faq-more__dl">
          <div class="faq-more__row">
            <dt>客服邮箱</dt>
            <dd><a href="/connect/">kefu@play-777game.com.cn</a></dd>
          </div>
          <div class="faq-more__row">
            <dt>服务电话</dt>
            <dd><a href="/connect/">400-9883-3132</a></dd>
          </div>
          <div class="faq-more__row">
            <dt>服务时间</dt>
            <dd>每日 10:00–22:00，节假日无休</dd>
          </div>
        </dl>
        <a class="btn btn--primary" href="/connect/">去联系通道</a>
      </div>
    </div>
  </section>

</main>

.page-faq {
  --faq-index-w: 268px;
  --faq-line: rgba(233, 227, 213, .12);
  --faq-line-soft: rgba(233, 227, 213, .07);
  --faq-answer: rgba(233, 227, 213, .82);
  background: var(--ink);
  color: var(--bone);
  overflow-x: clip;
}

.page-faq .faq-crumb {
  padding-top: 26px;
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero {
  position: relative;
  padding-bottom: 40px;
}

.page-faq .faq-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  padding-top: 26px;
}

@media (min-width: 900px) {
  .page-faq .faq-hero__inner {
    grid-template-columns: 1.06fr .94fr;
    align-items: center;
    gap: 46px;
    padding-top: 42px;
    padding-bottom: 16px;
  }
}

.page-faq .faq-hero__frame {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 30px 24px 28px;
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(168, 85, 247, .16), transparent 58%),
    linear-gradient(160deg, rgba(27, 32, 39, .94), rgba(14, 17, 22, .62));
}

@media (min-width: 640px) {
  .page-faq .faq-hero__frame {
    padding: 42px 38px 36px;
  }
}

.page-faq .faq-hero__frame::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px dashed rgba(168, 85, 247, .26);
  border-radius: calc(var(--r-lg) - 6px);
  pointer-events: none;
}

.page-faq .faq-hero__frame::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 9px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--violet), var(--cyan) 48%, var(--lime));
  opacity: .75;
  pointer-events: none;
}

.page-faq .faq-hero__kicker {
  position: relative;
  z-index: 1;
  margin: 0 0 16px;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--cyan);
  text-transform: uppercase;
}

.page-faq .faq-hero__title {
  position: relative;
  z-index: 1;
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.28;
  letter-spacing: -.01em;
  color: var(--bone);
  text-shadow: 0 0 34px rgba(168, 85, 247, .4);
}

@media (min-width: 640px) {
  .page-faq .faq-hero__title {
    font-size: 40px;
  }
}

@media (min-width: 1080px) {
  .page-faq .faq-hero__title {
    font-size: 48px;
  }
}

.page-faq .faq-hero__lede {
  position: relative;
  z-index: 1;
  margin: 0 0 22px;
  max-width: 36em;
  font-size: 15.5px;
  line-height: 1.85;
  color: rgba(233, 227, 213, .86);
}

@media (min-width: 640px) {
  .page-faq .faq-hero__lede {
    font-size: 16.5px;
  }
}

.page-faq .faq-hero__meta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: rgba(233, 227, 213, .68);
}

.page-faq .faq-hero__meta li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.page-faq .faq-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.page-faq .faq-dot--lime {
  background: var(--lime);
  box-shadow: 0 0 10px 1px rgba(182, 255, 59, .8);
}

.page-faq .faq-dot--cyan {
  background: var(--cyan);
  box-shadow: 0 0 10px 1px rgba(34, 211, 238, .75);
}

.page-faq .faq-hero__figure {
  margin: 0;
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--glow-violet);
}

.page-faq .faq-hero__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(14, 17, 22, .1), rgba(14, 17, 22, .55));
  pointer-events: none;
}

.page-faq .faq-hero__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 先翻这三条 ---------- */
.page-faq .faq-top {
  padding: 12px 0 52px;
}

.page-faq .faq-top__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 30px;
}

@media (min-width: 760px) {
  .page-faq .faq-top__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}

.page-faq .faq-quick {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 22px 22px 26px;
  border-radius: var(--r-md);
  border: 1px solid var(--rule);
  background: linear-gradient(170deg, rgba(27, 32, 39, .96), rgba(14, 17, 22, .72));
  overflow: hidden;
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}

.page-faq .faq-quick::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--qc, var(--violet));
  box-shadow: 0 0 20px -1px var(--qc, var(--violet));
}

.page-faq .faq-quick:hover {
  border-color: var(--qc, var(--violet));
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-quick:hover {
    transform: none;
  }
}

.page-faq .faq-quick__tag {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--qc, var(--violet));
}

.page-faq .faq-quick__q {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--bone);
}

.page-faq .faq-quick__a {
  margin: 0;
  flex: 1 1 auto;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--faq-answer);
}

.page-faq .faq-quick .btn {
  align-self: flex-start;
}

/* ---------- 主体两栏 ---------- */
.page-faq .faq-body {
  padding: 46px 0 10px;
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(34, 211, 238, .07), transparent 60%),
    var(--ink);
}

.page-faq .faq-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

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

/* 左侧索引 */
.page-faq .faq-index {
  min-width: 0;
}

.page-faq .faq-index__title {
  margin: 0 0 12px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(233, 227, 213, .55);
}

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

.page-faq .faq-index__list::-webkit-scrollbar {
  display: none;
}

.page-faq .faq-index__list > li {
  flex: none;
}

.page-faq .faq-index__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: rgba(27, 32, 39, .82);
  color: rgba(233, 227, 213, .9);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), color .16s var(--ease), background-color .16s var(--ease);
}

.page-faq .faq-index__link::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex: none;
  background: var(--cat, var(--violet));
  transition: box-shadow .16s var(--ease);
}

.page-faq .faq-index__link:hover,
.page-faq .faq-index__link:focus-visible {
  color: #fff;
  border-color: var(--cat, var(--violet));
  box-shadow: 0 0 0 1px rgba(168, 85, 247, .28), 0 0 22px -8px var(--cat, var(--violet));
  outline: none;
}

.page-faq .faq-index__link:hover::before,
.page-faq .faq-index__link:focus-visible::before {
  box-shadow: 0 0 12px 1px var(--cat, var(--violet));
}

.page-faq .faq-index__count {
  font-size: 11.5px;
  color: rgba(233, 227, 213, .5);
}

.page-faq .faq-index__hint {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(233, 227, 213, .45);
}

@media (min-width: 960px) {
  .page-faq .faq-index {
    position: sticky;
    top: 92px;
    padding: 22px 20px 20px;
    border-radius: var(--r-md);
    border: 1px solid var(--rule);
    background: linear-gradient(180deg, rgba(27, 32, 39, .9), rgba(14, 17, 22, .5));
  }

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

  .page-faq .faq-index__link {
    width: 100%;
    justify-content: flex-start;
    border-radius: var(--r-sm);
    border-color: transparent;
    background: transparent;
    padding: 11px 12px;
  }

  .page-faq .faq-index__count {
    margin-left: auto;
  }
}

/* 问答面板 */
.page-faq .faq-panel {
  min-width: 0;
}

.page-faq .faq-group {
  margin-bottom: 42px;
  scroll-margin-top: 90px;
}

.page-faq .faq-group:last-child {
  margin-bottom: 0;
}

.page-faq .faq-group__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--faq-line);
}

.page-faq .faq-group__head::before {
  content: "";
  width: 22px;
  height: 3px;
  border-radius: 2px;
  flex: none;
  background: var(--cat, var(--moss));
  box-shadow: 0 0 14px -1px var(--cat, var(--moss));
}

.page-faq .faq-group__title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -.01em;
  color: var(--bone);
}

@media (min-width: 640px) {
  .page-faq .faq-group__title {
    font-size: 24px;
  }
}

.page-faq .faq-group__head .tag {
  margin-left: auto;
}

/* 折叠条目 */
.page-faq .faq-item {
  border-bottom: 1px solid var(--faq-line-soft);
  border-radius: var(--r-sm);
  transition: background-color .18s var(--ease), box-shadow .18s var(--ease);
}

.page-faq .faq-item[open] {
  background: linear-gradient(90deg, rgba(34, 211, 238, .07), rgba(168, 85, 247, .05) 58%, transparent);
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .14);
}

.page-faq .faq-item__q {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 17px 10px 17px 6px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.55;
  letter-spacing: -.005em;
  color: rgba(233, 227, 213, .95);
  transition: color .16s var(--ease);
}

@media (min-width: 640px) {
  .page-faq .faq-item__q {
    font-size: 16.5px;
    padding: 19px 12px 19px 8px;
  }
}

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

.page-faq .faq-item__q:hover {
  color: #fff;
}

.page-faq .faq-item__q:focus-visible {
  outline: 1px solid var(--cyan);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.page-faq .faq-item__mark {
  flex: none;
  width: 4px;
  height: 16px;
  border-radius: 2px;
  margin-top: 4px;
  background: var(--rule);
  transition: background-color .18s var(--ease), box-shadow .18s var(--ease), height .18s var(--ease);
}

.page-faq .faq-item[open] .faq-item__mark {
  height: 26px;
  background: var(--lime);
  box-shadow: 0 0 14px 0 rgba(182, 255, 59, .75);
}

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

.page-faq .faq-item__chev {
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 7px;
  margin-left: auto;
  border-right: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
  transform: rotate(45deg);
  transition: transform .2s var(--ease);
}

.page-faq .faq-item[open] .faq-item__chev {
  transform: rotate(-135deg);
}

.page-faq .faq-item__a {
  padding: 0 12px 22px 22px;
}

.page-faq .faq-item__a p {
  margin: 0;
  max-width: 44em;
  font-size: 14.8px;
  line-height: 1.85;
  color: var(--faq-answer);
}

@media (min-width: 640px) {
  .page-faq .faq-item__a p {
    font-size: 15.5px;
  }
}

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

.page-faq .faq-item__a a:hover {
  color: var(--lime);
}

/* 分值区间板块的图 */
.page-faq .faq-score__split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

@media (min-width: 1000px) {
  .page-faq .faq-score__split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    gap: 40px;
    align-items: start;
  }
}

.page-faq .faq-score__figure {
  margin: 20px 0 0;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--rule);
  background: rgba(27, 32, 39, .6);
}

@media (min-width: 1000px) {
  .page-faq .faq-score__figure {
    margin: 22px 0 0;
    position: sticky;
    top: 96px;
  }
}

.page-faq .faq-score__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.page-faq .faq-score__figure figcaption {
  padding: 12px 16px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  color: rgba(233, 227, 213, .6);
}

/* ---------- 还是没解决 ---------- */
.page-faq .faq-more {
  margin-top: 56px;
  background:
    radial-gradient(70% 100% at 12% 0%, rgba(194, 112, 63, .22), transparent 62%),
    var(--bone);
  color: var(--ink);
}

.page-faq .faq-more__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  padding: 52px 0 56px;
}

@media (min-width: 900px) {
  .page-faq .faq-more__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 64px;
    align-items: start;
    padding: 68px 0 72px;
  }
}

.page-faq .faq-more__kicker {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(14, 17, 22, .58);
}

.page-faq .faq-more__title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
}

@media (min-width: 640px) {
  .page-faq .faq-more__title {
    font-size: 36px;
  }
}

.page-faq .faq-more__text {
  margin: 0 0 22px;
  max-width: 38em;
  font-size: 15.5px;
  line-height: 1.85;
  color: rgba(14, 17, 22, .76);
}

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

.page-faq .faq-more__list li {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(14, 17, 22, .18);
  background: rgba(14, 17, 22, .05);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: rgba(14, 17, 22, .82);
}

.page-faq .faq-more__panel {
  padding: 24px 22px;
  border-radius: var(--r-md);
  border: 1px solid rgba(14, 17, 22, .14);
  background: rgba(233, 227, 213, .55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
}

.page-faq .faq-more__dl {
  margin: 0 0 20px;
}

.page-faq .faq-more__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(14, 17, 22, .12);
}

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

.page-faq .faq-more__row dt {
  min-width: 72px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: rgba(14, 17, 22, .55);
}

.page-faq .faq-more__row dd {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}

.page-faq .faq-more__row dd a {
  color: #7A2FA8;
  text-decoration: none;
  word-break: break-all;
}

.page-faq .faq-more__row dd a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-faq .faq-more__panel .btn {
  width: 100%;
  justify-content: center;
}

@media (min-width: 640px) {
  .page-faq .faq-more__panel .btn {
    width: auto;
  }
}