.page-faq {
  --faq-hair: rgba(245, 241, 232, 0.14);
  --faq-tint: rgba(20, 82, 62, 0.32);
  background: var(--ink);
  color: var(--paper);
  overflow-x: clip;
}

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

.page-faq .media__img {
  width: 100%;
  object-fit: cover;
}

/* ---------- 标题区 ---------- */
.page-faq .faq-head {
  padding-block: var(--sp-4) var(--sp-6);
}

.page-faq .faq-head__inner {
  display: grid;
  gap: var(--sp-4);
}

.page-faq .faq-head__title {
  margin: var(--sp-2) 0 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 6vw, 60px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 20ch;
}

.page-faq .faq-head__lede {
  margin: var(--sp-3) 0 0;
  max-width: 60ch;
  font-size: var(--fs-16);
  line-height: 1.75;
  color: var(--paper-64);
}

.page-faq .faq-head__meta {
  margin: 0;
  padding-left: var(--sp-2);
  border-left: 3px solid var(--amber);
  font-size: var(--fs-12);
  line-height: 2;
  letter-spacing: 0.12em;
  color: var(--amber);
}

/* ---------- 三块入口卡 ---------- */
.page-faq .faq-doors-section {
  padding-block: 0 var(--sp-6);
}

.page-faq .faq-doors {
  display: grid;
  gap: var(--sp-2);
}

.page-faq .faq-door {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3) var(--sp-4);
  border: 2px solid var(--ink-mid);
  border-radius: var(--radius);
  background: var(--faq-tint);
  color: var(--paper);
  text-decoration: none;
  transition: transform 220ms var(--ease), border-color 220ms var(--ease), background-color 220ms var(--ease);
}

.page-faq .faq-door:hover,
.page-faq .faq-door:focus-visible {
  transform: translateY(-4px);
  border-color: var(--cyan);
  background: rgba(0, 229, 255, 0.06);
}

.page-faq .faq-door__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-faq .faq-door__title {
  font-size: var(--fs-22);
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: -0.01em;
}

.page-faq .faq-door__desc {
  margin-top: auto;
  font-size: var(--fs-14);
  line-height: 1.7;
  color: var(--paper-64);
}

/* 入口卡：箭头指向式 */
.page-faq .faq-door--entry {
  padding-right: var(--sp-6);
  border-right: 0;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%);
}

.page-faq .faq-door__arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-28);
  line-height: 1;
  color: var(--cyan);
  transition: transform 220ms var(--ease);
}

.page-faq .faq-door--entry:hover .faq-door__arrow,
.page-faq .faq-door--entry:focus-visible .faq-door__arrow {
  transform: translate(4px, -50%);
}

/* 版本卡：读数式 */
.page-faq .faq-door--version {
  border-color: var(--amber);
  background: linear-gradient(165deg, rgba(255, 179, 0, 0.12), rgba(20, 82, 62, 0.34));
}

.page-faq .faq-door--version:hover,
.page-faq .faq-door--version:focus-visible {
  border-color: var(--amber-light);
  background: linear-gradient(165deg, rgba(255, 179, 0, 0.2), rgba(20, 82, 62, 0.4));
}

.page-faq .faq-door__readout {
  font-family: var(--font-mono);
  font-size: clamp(28px, 5vw, 38px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.03em;
  color: var(--amber);
}

.page-faq .faq-door__scale {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 18px;
}

.page-faq .faq-door__scale i {
  display: block;
  width: 2px;
  height: 8px;
  background: var(--amber-light);
  opacity: 0.55;
}

.page-faq .faq-door__scale i:nth-child(2),
.page-faq .faq-door__scale i:nth-child(5) {
  height: 12px;
}

.page-faq .faq-door__scale i:nth-child(3) {
  height: 18px;
  opacity: 0.9;
}

/* 记录卡：日期条式 */
.page-faq .faq-door--record {
  border-color: var(--cyan-24);
}

.page-faq .faq-door__range {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  letter-spacing: 0.06em;
  color: var(--cyan-mist);
}

.page-faq .faq-door__bar {
  position: relative;
  display: block;
  height: 6px;
  border-radius: var(--radius-pill);
  background: rgba(245, 241, 232, 0.16);
  overflow: hidden;
}

.page-faq .faq-door__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--amber-light));
}

/* ---------- 步骤流程 ---------- */
.page-faq .faq-steps {
  padding-block: var(--sp-7);
  border-top: 1px solid var(--faq-hair);
}

.page-faq .faq-steps__inner {
  display: grid;
  gap: var(--sp-5);
}

.page-faq .faq-h2 {
  margin: var(--sp-2) 0 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 4.2vw, 42px);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: -0.02em;
  max-width: 22ch;
}

.page-faq .faq-steps__lede {
  margin: var(--sp-3) 0 0;
  max-width: 56ch;
  font-size: var(--fs-16);
  line-height: 1.75;
  color: var(--paper-64);
}

.page-faq .faq-flow {
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
}

.page-faq .faq-flow__item {
  position: relative;
  padding: 0 0 var(--sp-5) 72px;
  outline: none;
}

.page-faq .faq-flow__item:last-child {
  padding-bottom: 0;
}

.page-faq .faq-flow__item::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 48px;
  bottom: 2px;
  width: 2px;
  background: linear-gradient(180deg, var(--cyan), rgba(0, 229, 255, 0.06));
}

.page-faq .faq-flow__item:last-child::before {
  display: none;
}

.page-faq .faq-flow__num {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--cyan);
  border-radius: var(--radius);
  background: var(--ink-deep);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  font-weight: 700;
  transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}

.page-faq .faq-flow__item:hover .faq-flow__num,
.page-faq .faq-flow__item:focus .faq-flow__num,
.page-faq .faq-flow__item:focus-within .faq-flow__num {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--ink-deep);
}

.page-faq .faq-flow__title {
  margin: 4px 0 var(--sp-1);
  font-size: var(--fs-18);
  font-weight: 800;
  line-height: 1.42;
}

.page-faq .faq-flow__text {
  margin: 0;
  font-size: var(--fs-16);
  line-height: 1.75;
  color: var(--paper-64);
}

.page-faq .faq-steps__aside {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.page-faq .faq-media {
  border-radius: var(--radius);
  overflow: hidden;
}

.page-faq .faq-steps__aside .media__caption {
  margin: 0;
  font-size: var(--fs-12);
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* ---------- 问答分组 ---------- */
.page-faq .faq-group {
  padding-block: var(--sp-6);
  border-top: 1px solid var(--faq-hair);
}

.page-faq .faq-group__inner {
  display: grid;
  gap: var(--sp-4);
}

.page-faq .faq-group__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
}

.page-faq .faq-group__index {
  font-family: var(--font-mono);
  font-size: var(--fs-36);
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--amber);
}

.page-faq .faq-group__title {
  margin: 0;
  font-size: var(--fs-28);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.page-faq .faq-group__note {
  margin: 0;
  font-size: var(--fs-14);
  line-height: 1.75;
  color: var(--muted);
}

.page-faq .faq-group__link {
  font-size: var(--fs-14);
  color: var(--cyan);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--cyan-24);
  transition: border-color 200ms var(--ease);
}

.page-faq .faq-group__link:hover,
.page-faq .faq-group__link:focus-visible {
  border-bottom-color: var(--cyan);
}

.page-faq .faq-group__media {
  margin-bottom: var(--sp-4);
}

.page-faq .faq-group__media .media {
  border-radius: var(--radius);
  overflow: hidden;
}

.page-faq .faq-group__media .media__caption {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-12);
  line-height: 1.7;
  color: var(--muted);
}

/* ---------- 折叠问答 ---------- */
.page-faq .faq-item {
  margin-bottom: 12px;
  border: 2px solid var(--ink-mid);
  border-radius: var(--radius);
  background: rgba(20, 82, 62, 0.28);
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease);
}

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

.page-faq .faq-item:hover {
  border-color: var(--cyan-24);
}

.page-faq .faq-item[open] {
  border-color: var(--cyan);
  background: rgba(0, 229, 255, 0.05);
}

.page-faq .faq-item__q {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 18px 56px 18px 20px;
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: 1.55;
  color: var(--paper);
  transition: color 200ms var(--ease);
}

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

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

.page-faq .faq-item__q::after {
  content: "+";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: var(--fs-22);
  line-height: 1;
  color: var(--amber);
  transition: color 200ms var(--ease);
}

.page-faq .faq-item[open] .faq-item__q::after {
  content: "−";
  color: var(--cyan);
}

.page-faq .faq-item__a {
  padding: 0 20px 20px;
  font-size: var(--fs-16);
  line-height: 1.78;
  color: var(--paper-64);
}

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

.page-faq .faq-item[open] .faq-item__a {
  animation: faq-answer-drop 200ms var(--ease) both;
}

@keyframes faq-answer-drop {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- 邮件咨询 ---------- */
.page-faq .faq-help {
  padding-block: var(--sp-7);
  border-top: 3px solid var(--cyan);
  background: linear-gradient(180deg, rgba(6, 42, 32, 0.9), var(--ink-deep));
}

.page-faq .faq-help__inner {
  display: grid;
  gap: var(--sp-4);
}

.page-faq .faq-help__lede {
  margin: var(--sp-3) 0 0;
  max-width: 52ch;
  font-size: var(--fs-16);
  line-height: 1.75;
  color: var(--paper-64);
}

.page-faq .faq-help__list {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  border-top: 1px solid var(--faq-hair);
}

.page-faq .faq-help__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px var(--sp-2);
  padding: 12px 0;
  border-bottom: 1px solid var(--faq-hair);
}

.page-faq .faq-help__k {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.1em;
  color: var(--amber);
}

.page-faq .faq-help__v {
  font-size: var(--fs-14);
  line-height: 1.7;
  color: var(--paper-64);
}

.page-faq .faq-help__note {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-14);
  line-height: 1.75;
  color: var(--muted);
}

.page-faq .faq-help__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.page-faq .faq-help__card {
  padding: var(--sp-3);
  border: 2px solid var(--amber);
  border-radius: var(--radius);
  background: var(--ink);
  box-shadow: var(--shadow-hard);
}

.page-faq .faq-help__label {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-12);
  letter-spacing: 0.14em;
  color: var(--muted);
}

.page-faq .faq-help__email {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-16);
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--cyan);
  word-break: break-all;
}

.page-faq .faq-help__phone {
  margin: 0 0 var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--fs-18);
  letter-spacing: 0.04em;
  color: var(--amber-light);
}

.page-faq .faq-help__time {
  margin: 0;
  font-size: var(--fs-12);
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* ---------- 响应式 ---------- */
@media (min-width: 720px) {
  .page-faq .faq-help__list li {
    flex-wrap: nowrap;
  }

  .page-faq .faq-help__k {
    width: 130px;
  }
}

@media (min-width: 900px) {
  .page-faq .faq-head {
    padding-block: var(--sp-5) var(--sp-7);
  }

  .page-faq .faq-head__inner {
    grid-template-columns: minmax(0, 1fr) 196px;
    align-items: end;
    gap: var(--sp-6);
  }

  .page-faq .faq-head__meta {
    text-align: left;
    padding-left: var(--sp-3);
  }

  .page-faq .faq-doors {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-3);
    align-items: stretch;
  }

  .page-faq .faq-steps__inner {
    grid-template-columns: minmax(0, 1.42fr) minmax(0, 0.58fr);
    gap: var(--sp-6);
    align-items: start;
  }

  .page-faq .faq-group {
    padding-block: var(--sp-7);
  }

  .page-faq .faq-group__inner {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: start;
  }

  .page-faq .faq-help__inner {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    gap: var(--sp-6);
    align-items: start;
  }
}

@media (min-width: 1180px) {
  .page-faq .faq-flow__item {
    padding-left: 88px;
  }

  .page-faq .faq-flow__item::before {
    left: 25px;
    top: 54px;
  }

  .page-faq .faq-flow__num {
    width: 52px;
    height: 52px;
    font-size: var(--fs-16);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-door,
  .page-faq .faq-door__arrow,
  .page-faq .faq-flow__num,
  .page-faq .faq-item,
  .page-faq .faq-item__q,
  .page-faq .faq-item__q::after,
  .page-faq .faq-group__link {
    transition: none;
  }

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

  .page-faq .faq-door--entry:hover .faq-door__arrow,
  .page-faq .faq-door--entry:focus-visible .faq-door__arrow {
    transform: translateY(-50%);
  }

  .page-faq .faq-item[open] .faq-item__a {
    animation: none;
  }
}


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

  <div class="container">
    <nav class="breadcrumb" aria-label="面包屑">
      <ol class="breadcrumb__list">
        <li class="breadcrumb__item"><a class="breadcrumb__link" href="/">首页</a></li>
        <li class="breadcrumb__item"><span class="breadcrumb__current">帮助中心</span></li>
      </ol>
    </nav>
  </div>

  <header class="page-head faq-head">
    <div class="container faq-head__inner">
      <div class="faq-head__copy">
        <p class="eyebrow">帮助中心</p>
        <h1 class="page-head__title">入口进不去、版本看不到、记录翻不出来，这里都有答案</h1>
        <p class="page-head__lede">在艾弗森游艺，绝大多数问题不用等回复就能自己解决。我们把用户最常问的登录入口、版本号与使用记录问题收进 68 条问答，每一条只讲你要做的那几步动作，点开就能照着操作。</p>
      </div>
      <p class="faq-head__meta mono">68 条问答<br>三组高频问题<br>工作日 9:00–18:00 人工答复</p>
    </div>
  </header>

  <section class="section section--tight faq-doors-section" aria-labelledby="doors-title">
    <div class="container">
      <h2 id="doors-title" class="sr-only">三类高频问题的入口</h2>
      <div class="faq-doors">

        <a class="faq-door faq-door--entry" href="#group-entry" data-reveal>
          <span class="faq-door__tag">01 / 登录入口</span>
          <span class="faq-door__title">正式版从哪里进去</span>
          <span class="faq-door__desc">导航里找不到按钮、换了设备地址变了、同事发来的链接打不开</span>
          <span class="faq-door__arrow" aria-hidden="true">→</span>
        </a>

        <a class="faq-door faq-door--version" href="#group-version" data-reveal>
          <span class="faq-door__tag">02 / 版本号</span>
          <span class="faq-door__readout">BB 4.2.7</span>
          <span class="faq-door__scale" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i></span>
          <span class="faq-door__desc">当前读数在哪看、三段数字各代表什么、多久更新一次</span>
        </a>

        <a class="faq-door faq-door--record" href="#group-record" data-reveal>
          <span class="faq-door__tag">03 / 使用记录</span>
          <span class="faq-door__range">起始日期 —— 结束日期</span>
          <span class="faq-door__bar" aria-hidden="true"></span>
          <span class="faq-door__desc">按日期翻查最近 90 天的登录时间、设备类型与版本号</span>
        </a>

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

  <section class="section faq-steps" id="steps" aria-labelledby="steps-title">
    <div class="container faq-steps__inner">
      <div class="faq-steps__main">
        <p class="eyebrow">操作步骤</p>
        <h2 id="steps-title" class="faq-h2">查BB娱乐平台使用记录，四步拿到结果</h2>
        <p class="faq-steps__lede">多数人打开帮助中心，都是为了翻某一天的登录情况。下面这条路走一遍就能看到，不用发邮件，也不用等回复。</p>

        <ol class="faq-flow">
          <li class="faq-flow__item" tabindex="0">
            <span class="faq-flow__num mono">01</span>
            <h3 class="faq-flow__title">先打开记录区</h3>
            <p class="faq-flow__text">在页面右侧找到记录区，登录状态下打开即加载。如果还没登录，会先带你到正式版入口，登录完再回到这里。</p>
          </li>
          <li class="faq-flow__item" tabindex="0">
            <span class="faq-flow__num mono">02</span>
            <h3 class="faq-flow__title">选起始日期与结束日期</h3>
            <p class="faq-flow__text">只查一天，就把两天写成同一天；查一段时间，就先填开始再填结束。日期区间选好后下方立刻刷新。</p>
          </li>
          <li class="faq-flow__item" tabindex="0">
            <span class="faq-flow__num mono">03</span>
            <h3 class="faq-flow__title">确认设备类型</h3>
            <p class="faq-flow__text">同一账号可能在电脑、平板、手机上都登过。先按设备类型对一遍，能快速判断哪条记录是你当时用的那台。</p>
          </li>
          <li class="faq-flow__item" tabindex="0">
            <span class="faq-flow__num mono">04</span>
            <h3 class="faq-flow__title">读取三项字段</h3>
            <p class="faq-flow__text">每条记录依次是登录时间、设备类型、所用版本号。日期区间最远到 90 天前，更早的记录发邮件到官方邮箱说明即可。</p>
          </li>
        </ol>
      </div>

      <aside class="faq-steps__aside">
        <figure class="media media--tall faq-media">
          <img class="media__img" src="{zhanqunpic:h:750w:1000}" width="1000" height="750" alt="记录区界面示意，起始日期与结束日期并排选择，下方三条记录依次显示登录时间、设备类型与所用版本号" loading="lazy" decoding="async">
        </figure>
        <p class="media__caption">区间选好、设备确认，三项字段在同一屏读完。</p>
      </aside>
    </div>
  </section>

  <section class="section faq-group" id="group-entry" aria-labelledby="group-entry-title">
    <div class="container faq-group__inner">
      <aside class="faq-group__aside">
        <span class="faq-group__index mono" aria-hidden="true">A</span>
        <h2 id="group-entry-title" class="faq-group__title">登录入口</h2>
        <p class="faq-group__note">入口在哪儿、换设备后怎么走、链接打不开先查什么。</p>
        <a class="faq-group__link" href="/solutions/">查看平台方案</a>
      </aside>

      <div class="faq-group__main">
        <details class="faq-item">
          <summary class="faq-item__q">正式版入口在页面的哪个位置？</summary>
          <div class="faq-item__a"><p>电脑端在右上角固定着一枚「进入正式版」按钮，向下滚动也不会收起；手机端收在菜单第一行。第一次来，直接点它就进正式版登录页。</p></div>
        </details>

        <details class="faq-item">
          <summary class="faq-item__q">导航里没看到「进入正式版」怎么办？</summary>
          <div class="faq-item__a"><p>先确认页面已经完全加载；如果浏览器缩放调得比较大，按钮会被挤到下一行。把窗口拉宽，或把缩放恢复成 100%，按钮就会回到右上角。</p></div>
        </details>

        <details class="faq-item">
          <summary class="faq-item__q">换成手机或另一台电脑，入口还一样吗？</summary>
          <div class="faq-item__a"><p>一样。同一个域名、同一个按钮位置，登录状态跟着账号走。在新设备上登录一次，之后打开就是已登录状态，不必每次重新找入口。</p></div>
        </details>

        <details class="faq-item">
          <summary class="faq-item__q">从搜索结果点进来，怎么确认进的是正规入口？</summary>
          <div class="faq-item__a"><p>看三处即可：地址栏是 mvp-aifusen.com.cn；页脚有备案信息与客服邮箱；登录页右下角能看到版本号。三处对得上，就是正式版。</p></div>
        </details>

        <details class="faq-item">
          <summary class="faq-item__q">页面能打开，但一直停在加载状态，先做什么？</summary>
          <div class="faq-item__a"><p>先刷新一次；还不行就换一种网络，比如从移动数据切到无线。标准登录页首屏平均加载 1.4 秒，超过十几秒没有变化，通常是本地网络的问题。</p></div>
        </details>

        <details class="faq-item">
          <summary class="faq-item__q">把链接发给同事，对方却打不开是什么原因？</summary>
          <div class="faq-item__a"><p>最常见是链接在聊天软件里被截断，或者复制时少了结尾。让对方直接输入域名，再从首页点「进入正式版」，最稳妥。</p></div>
        </details>

        <details class="faq-item">
          <summary class="faq-item__q">小屏手机上按钮被挡住，怎么找到入口？</summary>
          <div class="faq-item__a"><p>先把手机从横屏转回竖屏，或下拉刷新一次。屏幕特别窄时，按钮会收进菜单里，点右上角的菜单图标就能看到。</p></div>
        </details>
      </div>
    </div>
  </section>

  <section class="section faq-group" id="group-version" aria-labelledby="group-version-title">
    <div class="container faq-group__inner">
      <aside class="faq-group__aside">
        <span class="faq-group__index mono" aria-hidden="true">B</span>
        <h2 id="group-version-title" class="faq-group__title">版本号</h2>
        <p class="faq-group__note">读数在哪看、三段数字怎么读、不是最新版时怎么处理。</p>
        <a class="faq-group__link" href="/instructions/">查看使用说明</a>
      </aside>

      <div class="faq-group__main">
        <div class="faq-group__media">
          <figure class="media media--wide">
            <img class="media__img" src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="电脑端登录页右下角版本号位置的放大标注示意，电光青指示线指向 BB 4.2.7 读数" loading="lazy" decoding="async">
          </figure>
          <p class="media__caption">登录页右下角的读数，与方案页仪表盘显示同一个值。</p>
        </div>

        <details class="faq-item">
          <summary class="faq-item__q">当前 BB 版本号在哪看？</summary>
          <div class="faq-item__a"><p>两个位置最直接：登录页右下角，以及平台方案页的仪表盘卡片。两处都不需要额外操作，页面加载完就能读到。</p></div>
        </details>

        <details class="faq-item">
          <summary class="faq-item__q">BB 4.2.7 这三段数字分别代表什么？</summary>
          <div class="faq-item__a"><p>第一段是主版本，第二段是次版本，第三段是构建号。主版本变化意味着界面或功能有较大调整；构建号变化通常只是做了修正，用起来没有区别。</p></div>
        </details>

        <details class="faq-item">
          <summary class="faq-item__q">平台多久更新一次，版本号会不会变？</summary>
          <div class="faq-item__a"><p>每两周发布一次功能更新，每月一次大版本，累计已完成 142 次版本迭代。构建号会随每次更新变动，次版本号按月递进。</p></div>
        </details>

        <details class="faq-item">
          <summary class="faq-item__q">看到的不是最新版怎么办？</summary>
          <div class="faq-item__a"><p>先退出登录再重新进入，页面会拉取最新的版本信息。如果读数没变，清理一次浏览器缓存，或者用另一台设备对照一下。</p></div>
        </details>

        <details class="faq-item">
          <summary class="faq-item__q">电脑、平板、手机上的版本号为什么可能不同？</summary>
          <div class="faq-item__a"><p>多端同步模块会让版本号与登录状态保持一致，但同步需要一次页面刷新。刚在电脑上更新完，手机端下次打开时才会跟上。</p></div>
        </details>

        <details class="faq-item">
          <summary class="faq-item__q">登录页和平台方案页显示的版本号一致吗？</summary>
          <div class="faq-item__a"><p>一致，两处读的是同一个当前版本。若出现差异，多半是一侧页面还停在缓存里，刷新即可拉齐。</p></div>
        </details>

        <details class="faq-item">
          <summary class="faq-item__q">版本更新之后需要重新登录吗？</summary>
          <div class="faq-item__a"><p>大多数更新不需要。只有涉及安全策略的更新才会要求重新验证身份，届时登录页会给出提示。更新上线后 48 小时内，九成活跃用户已完成同步。</p></div>
        </details>
      </div>
    </div>
  </section>

  <section class="section faq-group" id="group-record" aria-labelledby="group-record-title">
    <div class="container faq-group__inner">
      <aside class="faq-group__aside">
        <span class="faq-group__index mono" aria-hidden="true">C</span>
        <h2 id="group-record-title" class="faq-group__title">使用记录</h2>
        <p class="faq-group__note">能查多远、字段怎么读、翻出来是空的先看哪一条。</p>
        <a class="faq-group__link" href="/data-protection/">查看数据保护说明</a>
      </aside>

      <div class="faq-group__main">
        <details class="faq-item">
          <summary class="faq-item__q">按日期查BB娱乐平台使用记录，结果为空是什么原因？</summary>
          <div class="faq-item__a"><p>常见三种情况：选的区间早于 90 天；这段时间确实没有登录过；或者当时用的是另一个账号。先把区间缩到单日再试，基本能定位。</p></div>
        </details>

        <details class="faq-item">
          <summary class="faq-item__q">一条记录里都有哪些字段？</summary>
          <div class="faq-item__a"><p>三项：登录时间、设备类型、所用版本号。三项并排显示，登录时间精确到分钟，设备类型按登录时浏览器上报的信息归类。</p></div>
        </details>

        <details class="faq-item">
          <summary class="faq-item__q">记录里的设备类型写着别的设备，怎么理解？</summary>
          <div class="faq-item__a"><p>同一账号先后在手机和电脑上登录，就会各记一条、设备类型不同。按登录时间排序，最后一条就是最近一次。</p></div>
        </details>

        <details class="faq-item">
          <summary class="faq-item__q">能查多久以前的记录？</summary>
          <div class="faq-item__a"><p>记录区覆盖最近 90 天。更早的记录不在记录区展示，需要按邮件说明把注册手机号与日期区间写清，发到官方邮箱。</p></div>
        </details>

        <details class="faq-item">
          <summary class="faq-item__q">同一天有多条记录，哪一条是当次登录？</summary>
          <div class="faq-item__a"><p>记录按登录时间顺序排列，看时间段和版本号就能对上。多台设备同时在线时，每条登录都会单独记一行。</p></div>
        </details>

        <details class="faq-item">
          <summary class="faq-item__q">记录能不能导出？</summary>
          <div class="faq-item__a"><p>记录区支持逐条查看和按日期筛选。需要整理一整段时间的材料时，写明注册手机号与查询日期区间发到官方邮箱即可。</p></div>
        </details>

        <details class="faq-item">
          <summary class="faq-item__q">超过 90 天的记录怎么拿到？</summary>
          <div class="faq-item__a"><p>发邮件到官方邮箱，正文里写清注册手机号和需要的日期区间。工作日 9:00–18:00 内会得到答复。</p></div>
        </details>
      </div>
    </div>
  </section>

  <section class="section faq-help" id="email-help" aria-labelledby="email-help-title">
    <div class="container faq-help__inner">
      <div class="faq-help__copy">
        <p class="eyebrow">还没解决</p>
        <h2 id="email-help-title" class="faq-h2">把情况写进邮件，一次就能办成</h2>
        <p class="faq-help__lede">问题落到具体账号上时，邮件是最快的方式。开头就把三件事写清，来回沟通的次数会少很多。</p>
        <ul class="faq-help__list">
          <li><span class="faq-help__k mono">注册手机号</span><span class="faq-help__v">用来定位是哪个账号</span></li>
          <li><span class="faq-help__k mono">查询日期区间</span><span class="faq-help__v">从哪天到哪天，越具体越好</span></li>
          <li><span class="faq-help__k mono">出问题的设备</span><span class="faq-help__v">电脑、平板还是手机，以及具体现象</span></li>
        </ul>
        <p class="faq-help__note">工作日 9:00–18:00 内回复。涉及记录查询的邮件当天确认收到，需要跨天处理的会在回复中说明下一步。</p>
        <div class="faq-help__actions">
          <a class="btn btn--primary" href="/inquiry/">前往咨询通道</a>
          <a class="btn btn--ghost" href="/instructions/">查看使用说明</a>
        </div>
      </div>

      <div class="faq-help__card">
        <p class="faq-help__label">官方唯一对外联络渠道</p>
        <p class="faq-help__email mono">support@mvp-aifusen.com.cn</p>
        <p class="faq-help__phone mono">400-9698-3173</p>
        <p class="faq-help__time">工作日 9:00–18:00</p>
      </div>
    </div>
  </section>

</main>

.page-faq {
  --faq-hair: rgba(245, 241, 232, 0.14);
  --faq-tint: rgba(20, 82, 62, 0.32);
  background: var(--ink);
  color: var(--paper);
  overflow-x: clip;
}

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

.page-faq .media__img {
  width: 100%;
  object-fit: cover;
}

/* ---------- 标题区 ---------- */
.page-faq .faq-head {
  padding-block: var(--sp-4) var(--sp-6);
}

.page-faq .faq-head__inner {
  display: grid;
  gap: var(--sp-4);
}

.page-faq .faq-head__title {
  margin: var(--sp-2) 0 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 6vw, 60px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 20ch;
}

.page-faq .faq-head__lede {
  margin: var(--sp-3) 0 0;
  max-width: 60ch;
  font-size: var(--fs-16);
  line-height: 1.75;
  color: var(--paper-64);
}

.page-faq .faq-head__meta {
  margin: 0;
  padding-left: var(--sp-2);
  border-left: 3px solid var(--amber);
  font-size: var(--fs-12);
  line-height: 2;
  letter-spacing: 0.12em;
  color: var(--amber);
}

/* ---------- 三块入口卡 ---------- */
.page-faq .faq-doors-section {
  padding-block: 0 var(--sp-6);
}

.page-faq .faq-doors {
  display: grid;
  gap: var(--sp-2);
}

.page-faq .faq-door {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3) var(--sp-4);
  border: 2px solid var(--ink-mid);
  border-radius: var(--radius);
  background: var(--faq-tint);
  color: var(--paper);
  text-decoration: none;
  transition: transform 220ms var(--ease), border-color 220ms var(--ease), background-color 220ms var(--ease);
}

.page-faq .faq-door:hover,
.page-faq .faq-door:focus-visible {
  transform: translateY(-4px);
  border-color: var(--cyan);
  background: rgba(0, 229, 255, 0.06);
}

.page-faq .faq-door__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-faq .faq-door__title {
  font-size: var(--fs-22);
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: -0.01em;
}

.page-faq .faq-door__desc {
  margin-top: auto;
  font-size: var(--fs-14);
  line-height: 1.7;
  color: var(--paper-64);
}

/* 入口卡：箭头指向式 */
.page-faq .faq-door--entry {
  padding-right: var(--sp-6);
  border-right: 0;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%);
}

.page-faq .faq-door__arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-28);
  line-height: 1;
  color: var(--cyan);
  transition: transform 220ms var(--ease);
}

.page-faq .faq-door--entry:hover .faq-door__arrow,
.page-faq .faq-door--entry:focus-visible .faq-door__arrow {
  transform: translate(4px, -50%);
}

/* 版本卡：读数式 */
.page-faq .faq-door--version {
  border-color: var(--amber);
  background: linear-gradient(165deg, rgba(255, 179, 0, 0.12), rgba(20, 82, 62, 0.34));
}

.page-faq .faq-door--version:hover,
.page-faq .faq-door--version:focus-visible {
  border-color: var(--amber-light);
  background: linear-gradient(165deg, rgba(255, 179, 0, 0.2), rgba(20, 82, 62, 0.4));
}

.page-faq .faq-door__readout {
  font-family: var(--font-mono);
  font-size: clamp(28px, 5vw, 38px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.03em;
  color: var(--amber);
}

.page-faq .faq-door__scale {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 18px;
}

.page-faq .faq-door__scale i {
  display: block;
  width: 2px;
  height: 8px;
  background: var(--amber-light);
  opacity: 0.55;
}

.page-faq .faq-door__scale i:nth-child(2),
.page-faq .faq-door__scale i:nth-child(5) {
  height: 12px;
}

.page-faq .faq-door__scale i:nth-child(3) {
  height: 18px;
  opacity: 0.9;
}

/* 记录卡：日期条式 */
.page-faq .faq-door--record {
  border-color: var(--cyan-24);
}

.page-faq .faq-door__range {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  letter-spacing: 0.06em;
  color: var(--cyan-mist);
}

.page-faq .faq-door__bar {
  position: relative;
  display: block;
  height: 6px;
  border-radius: var(--radius-pill);
  background: rgba(245, 241, 232, 0.16);
  overflow: hidden;
}

.page-faq .faq-door__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--amber-light));
}

/* ---------- 步骤流程 ---------- */
.page-faq .faq-steps {
  padding-block: var(--sp-7);
  border-top: 1px solid var(--faq-hair);
}

.page-faq .faq-steps__inner {
  display: grid;
  gap: var(--sp-5);
}

.page-faq .faq-h2 {
  margin: var(--sp-2) 0 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 4.2vw, 42px);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: -0.02em;
  max-width: 22ch;
}

.page-faq .faq-steps__lede {
  margin: var(--sp-3) 0 0;
  max-width: 56ch;
  font-size: var(--fs-16);
  line-height: 1.75;
  color: var(--paper-64);
}

.page-faq .faq-flow {
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
}

.page-faq .faq-flow__item {
  position: relative;
  padding: 0 0 var(--sp-5) 72px;
  outline: none;
}

.page-faq .faq-flow__item:last-child {
  padding-bottom: 0;
}

.page-faq .faq-flow__item::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 48px;
  bottom: 2px;
  width: 2px;
  background: linear-gradient(180deg, var(--cyan), rgba(0, 229, 255, 0.06));
}

.page-faq .faq-flow__item:last-child::before {
  display: none;
}

.page-faq .faq-flow__num {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--cyan);
  border-radius: var(--radius);
  background: var(--ink-deep);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  font-weight: 700;
  transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}

.page-faq .faq-flow__item:hover .faq-flow__num,
.page-faq .faq-flow__item:focus .faq-flow__num,
.page-faq .faq-flow__item:focus-within .faq-flow__num {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--ink-deep);
}

.page-faq .faq-flow__title {
  margin: 4px 0 var(--sp-1);
  font-size: var(--fs-18);
  font-weight: 800;
  line-height: 1.42;
}

.page-faq .faq-flow__text {
  margin: 0;
  font-size: var(--fs-16);
  line-height: 1.75;
  color: var(--paper-64);
}

.page-faq .faq-steps__aside {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.page-faq .faq-media {
  border-radius: var(--radius);
  overflow: hidden;
}

.page-faq .faq-steps__aside .media__caption {
  margin: 0;
  font-size: var(--fs-12);
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* ---------- 问答分组 ---------- */
.page-faq .faq-group {
  padding-block: var(--sp-6);
  border-top: 1px solid var(--faq-hair);
}

.page-faq .faq-group__inner {
  display: grid;
  gap: var(--sp-4);
}

.page-faq .faq-group__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
}

.page-faq .faq-group__index {
  font-family: var(--font-mono);
  font-size: var(--fs-36);
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--amber);
}

.page-faq .faq-group__title {
  margin: 0;
  font-size: var(--fs-28);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.page-faq .faq-group__note {
  margin: 0;
  font-size: var(--fs-14);
  line-height: 1.75;
  color: var(--muted);
}

.page-faq .faq-group__link {
  font-size: var(--fs-14);
  color: var(--cyan);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--cyan-24);
  transition: border-color 200ms var(--ease);
}

.page-faq .faq-group__link:hover,
.page-faq .faq-group__link:focus-visible {
  border-bottom-color: var(--cyan);
}

.page-faq .faq-group__media {
  margin-bottom: var(--sp-4);
}

.page-faq .faq-group__media .media {
  border-radius: var(--radius);
  overflow: hidden;
}

.page-faq .faq-group__media .media__caption {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-12);
  line-height: 1.7;
  color: var(--muted);
}

/* ---------- 折叠问答 ---------- */
.page-faq .faq-item {
  margin-bottom: 12px;
  border: 2px solid var(--ink-mid);
  border-radius: var(--radius);
  background: rgba(20, 82, 62, 0.28);
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease);
}

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

.page-faq .faq-item:hover {
  border-color: var(--cyan-24);
}

.page-faq .faq-item[open] {
  border-color: var(--cyan);
  background: rgba(0, 229, 255, 0.05);
}

.page-faq .faq-item__q {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 18px 56px 18px 20px;
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: 1.55;
  color: var(--paper);
  transition: color 200ms var(--ease);
}

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

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

.page-faq .faq-item__q::after {
  content: "+";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: var(--fs-22);
  line-height: 1;
  color: var(--amber);
  transition: color 200ms var(--ease);
}

.page-faq .faq-item[open] .faq-item__q::after {
  content: "−";
  color: var(--cyan);
}

.page-faq .faq-item__a {
  padding: 0 20px 20px;
  font-size: var(--fs-16);
  line-height: 1.78;
  color: var(--paper-64);
}

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

.page-faq .faq-item[open] .faq-item__a {
  animation: faq-answer-drop 200ms var(--ease) both;
}

@keyframes faq-answer-drop {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- 邮件咨询 ---------- */
.page-faq .faq-help {
  padding-block: var(--sp-7);
  border-top: 3px solid var(--cyan);
  background: linear-gradient(180deg, rgba(6, 42, 32, 0.9), var(--ink-deep));
}

.page-faq .faq-help__inner {
  display: grid;
  gap: var(--sp-4);
}

.page-faq .faq-help__lede {
  margin: var(--sp-3) 0 0;
  max-width: 52ch;
  font-size: var(--fs-16);
  line-height: 1.75;
  color: var(--paper-64);
}

.page-faq .faq-help__list {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  border-top: 1px solid var(--faq-hair);
}

.page-faq .faq-help__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px var(--sp-2);
  padding: 12px 0;
  border-bottom: 1px solid var(--faq-hair);
}

.page-faq .faq-help__k {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.1em;
  color: var(--amber);
}

.page-faq .faq-help__v {
  font-size: var(--fs-14);
  line-height: 1.7;
  color: var(--paper-64);
}

.page-faq .faq-help__note {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-14);
  line-height: 1.75;
  color: var(--muted);
}

.page-faq .faq-help__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.page-faq .faq-help__card {
  padding: var(--sp-3);
  border: 2px solid var(--amber);
  border-radius: var(--radius);
  background: var(--ink);
  box-shadow: var(--shadow-hard);
}

.page-faq .faq-help__label {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-12);
  letter-spacing: 0.14em;
  color: var(--muted);
}

.page-faq .faq-help__email {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-16);
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--cyan);
  word-break: break-all;
}

.page-faq .faq-help__phone {
  margin: 0 0 var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--fs-18);
  letter-spacing: 0.04em;
  color: var(--amber-light);
}

.page-faq .faq-help__time {
  margin: 0;
  font-size: var(--fs-12);
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* ---------- 响应式 ---------- */
@media (min-width: 720px) {
  .page-faq .faq-help__list li {
    flex-wrap: nowrap;
  }

  .page-faq .faq-help__k {
    width: 130px;
  }
}

@media (min-width: 900px) {
  .page-faq .faq-head {
    padding-block: var(--sp-5) var(--sp-7);
  }

  .page-faq .faq-head__inner {
    grid-template-columns: minmax(0, 1fr) 196px;
    align-items: end;
    gap: var(--sp-6);
  }

  .page-faq .faq-head__meta {
    text-align: left;
    padding-left: var(--sp-3);
  }

  .page-faq .faq-doors {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-3);
    align-items: stretch;
  }

  .page-faq .faq-steps__inner {
    grid-template-columns: minmax(0, 1.42fr) minmax(0, 0.58fr);
    gap: var(--sp-6);
    align-items: start;
  }

  .page-faq .faq-group {
    padding-block: var(--sp-7);
  }

  .page-faq .faq-group__inner {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: start;
  }

  .page-faq .faq-help__inner {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    gap: var(--sp-6);
    align-items: start;
  }
}

@media (min-width: 1180px) {
  .page-faq .faq-flow__item {
    padding-left: 88px;
  }

  .page-faq .faq-flow__item::before {
    left: 25px;
    top: 54px;
  }

  .page-faq .faq-flow__num {
    width: 52px;
    height: 52px;
    font-size: var(--fs-16);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-door,
  .page-faq .faq-door__arrow,
  .page-faq .faq-flow__num,
  .page-faq .faq-item,
  .page-faq .faq-item__q,
  .page-faq .faq-item__q::after,
  .page-faq .faq-group__link {
    transition: none;
  }

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

  .page-faq .faq-door--entry:hover .faq-door__arrow,
  .page-faq .faq-door--entry:focus-visible .faq-door__arrow {
    transform: translateY(-50%);
  }

  .page-faq .faq-item[open] .faq-item__a {
    animation: none;
  }
}