.page-faq{
  background: var(--cs-ivory);
  color: var(--cs-ink);
  font-family: var(--cs-font-body);
  overflow-x: hidden;
}

.page-faq .cs-breadcrumb{
  padding-top: clamp(14px,3vw,26px);
}

/* ---------- 首屏 ---------- */
.page-faq .faq-open{
  padding-block: clamp(16px,3vw,30px) clamp(40px,6vw,80px);
}
.page-faq .faq-open__grid{
  display: grid;
  gap: clamp(26px,4vw,52px);
  align-items: start;
}
.page-faq .faq-open__main h1{
  font-family: var(--cs-font-display);
  font-size: clamp(30px,5.4vw,58px);
  line-height: 1.16;
  margin: 10px 0 0;
  letter-spacing: .01em;
  color: var(--cs-ink);
}
.page-faq .faq-open__lede{
  margin: 16px 0 0;
  font-size: clamp(15px,1.6vw,17px);
  line-height: 1.85;
  color: var(--cs-ink-70);
  max-width: 62ch;
}

.page-faq .faq-steps{
  list-style: none;
  margin: clamp(24px,4vw,36px) 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.page-faq .faq-step{
  position: relative;
  background: var(--cs-paper);
  border: 1px solid var(--cs-gold-line);
  border-radius: var(--cs-r-md);
  padding: 16px 18px 18px;
  box-shadow: var(--cs-shadow-1);
}
.page-faq .faq-step::before{
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  background: linear-gradient(180deg, var(--cs-red), var(--cs-gold));
  border-radius: 3px;
}
.page-faq .faq-step__no{
  display: inline-block;
  font-size: 13px;
  letter-spacing: .18em;
  color: var(--cs-red);
  margin-bottom: 6px;
}
.page-faq .faq-step__title{
  font-family: var(--cs-font-display);
  font-size: clamp(19px,2.2vw,23px);
  margin: 0 0 6px;
  color: var(--cs-ink);
}
.page-faq .faq-step__text{
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--cs-ink-70);
}

.page-faq .faq-figure{
  margin: clamp(24px,3.5vw,34px) 0 0;
  border: 1px solid var(--cs-gold-line);
  border-radius: var(--cs-r-md);
  overflow: hidden;
  background: var(--cs-paper-2);
}
.page-faq .faq-figure img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-faq .faq-figure .cs-figure__caption{
  padding: 10px 14px;
  font-size: 13px;
  color: var(--cs-ink-45);
  background: var(--cs-paper);
  border-top: 1px solid var(--cs-ink-08);
}
.page-faq .faq-figure--dark{
  border-color: rgba(212,166,74,.42);
  background: rgba(255,255,255,.04);
}
.page-faq .faq-figure--dark .cs-figure__caption{
  background: transparent;
  color: rgba(255,248,238,.68);
  border-top-color: rgba(212,166,74,.28);
}

/* ---------- 右侧目录 ---------- */
.page-faq .faq-index{
  background: var(--cs-paper);
  border: 1px solid var(--cs-ink-14);
  border-radius: var(--cs-r-lg);
  padding: 20px 18px 22px;
  box-shadow: var(--cs-shadow-1);
}
.page-faq .faq-index__title{
  font-family: var(--cs-font-display);
  font-size: 20px;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cs-gold-line);
  color: var(--cs-ink);
}
.page-faq .faq-index__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.page-faq .faq-index__link{
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 6px;
  border-radius: var(--cs-r-sm);
  color: var(--cs-ink-70);
  text-decoration: none;
  font-size: 14.5px;
  transition: background .22s var(--cs-ease), color .22s var(--cs-ease);
}
.page-faq .faq-index__link:hover,
.page-faq .faq-index__link:focus-visible{
  background: var(--cs-paper-2);
  color: var(--cs-red);
}
.page-faq .faq-index__num{
  font-size: 12px;
  color: var(--cs-gold);
  letter-spacing: .1em;
}
.page-faq .faq-index__cta{
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--cs-ink-14);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- 段位主题带 ---------- */
.page-faq .faq-ranks{
  padding-block: clamp(40px,6vw,78px);
  color: var(--cs-ivory);
}
.page-faq .faq-ranks__layout{
  display: grid;
  gap: clamp(22px,3.5vw,40px);
  align-items: start;
}
.page-faq .faq-ranks__head h2,
.page-faq .faq-ranks__head .cs-title{
  color: var(--cs-ivory);
}
.page-faq .faq-ranks__head .cs-lede{
  color: rgba(255,248,238,.74);
  line-height: 1.85;
  max-width: 56ch;
}
.page-faq .faq-ranks .cs-eyebrow{
  color: var(--cs-gold);
}

.page-faq .faq-ranks__chart{
  margin-top: clamp(26px,4vw,42px);
  padding: 18px 14px 16px;
  border: 1px solid rgba(212,166,74,.32);
  border-radius: var(--cs-r-md);
  background: rgba(255,248,238,.04);
}
.page-faq .rank-steps{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px 8px;
}
.page-faq .rank-step{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  height: 120px;
}
.page-faq .rank-step__bar{
  width: 100%;
  height: var(--h, 40%);
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, var(--cs-gold) 0%, var(--cs-red) 100%);
  box-shadow: inset 0 1px 0 rgba(255,248,238,.45);
}
.page-faq .rank-step__name{
  font-size: 12px;
  color: rgba(255,248,238,.88);
  white-space: nowrap;
}
.page-faq .rank-step__hint{
  font-size: 11px;
  color: rgba(255,248,238,.46);
}
.page-faq .rank-step:nth-child(1) .rank-step__bar{ --h: 26%; }
.page-faq .rank-step:nth-child(2) .rank-step__bar{ --h: 34%; }
.page-faq .rank-step:nth-child(3) .rank-step__bar{ --h: 42%; }
.page-faq .rank-step:nth-child(4) .rank-step__bar{ --h: 50%; }
.page-faq .rank-step:nth-child(5) .rank-step__bar{ --h: 58%; }
.page-faq .rank-step:nth-child(6) .rank-step__bar{ --h: 66%; }
.page-faq .rank-step:nth-child(7) .rank-step__bar{ --h: 74%; }
.page-faq .rank-step:nth-child(8) .rank-step__bar{ --h: 84%; }
.page-faq .rank-step:nth-child(9) .rank-step__bar{
  --h: 96%;
  background: linear-gradient(180deg, var(--cs-gold-pale) 0%, var(--cs-gold) 60%, var(--cs-red-deep) 100%);
}

/* ---------- 问答手风琴 ---------- */
.page-faq .faq-qa{
  margin-top: clamp(24px,4vw,40px);
  display: grid;
  gap: 10px;
}
.page-faq .faq-acc{
  background: rgba(255,248,238,.06);
  border: 1px solid rgba(212,166,74,.3);
  border-radius: var(--cs-r-md);
  overflow: hidden;
}
.page-faq .faq-qa--light .faq-acc{
  background: var(--cs-paper);
  border-color: var(--cs-ink-14);
  box-shadow: var(--cs-shadow-1);
}
.page-faq .faq-acc summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 16px;
  transition: background .22s var(--cs-ease);
}
.page-faq .faq-acc summary::-webkit-details-marker{ display: none; }
.page-faq .faq-acc summary::after{
  content: "+";
  flex: none;
  margin-left: auto;
  font-family: var(--cs-font-mono);
  font-size: 17px;
  line-height: 1;
  color: var(--cs-gold);
  transition: transform .24s var(--cs-ease);
}
.page-faq .faq-acc[open] summary::after{
  content: "−";
  transform: rotate(180deg);
}
.page-faq .faq-acc summary:hover,
.page-faq .faq-acc summary:focus-visible{
  background: rgba(212,166,74,.1);
}
.page-faq .faq-acc__q{
  font-family: var(--cs-font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  margin: 0;
  color: var(--cs-ivory);
}
.page-faq .faq-qa--light .faq-acc__q{
  color: var(--cs-ink);
}
.page-faq .faq-acc__a{
  padding: 0 16px 16px;
}
.page-faq .faq-acc__a p{
  margin: 0;
  font-size: 14.5px;
  line-height: 1.85;
  color: rgba(255,248,238,.76);
  border-top: 1px dashed rgba(212,166,74,.28);
  padding-top: 12px;
}
.page-faq .faq-qa--light .faq-acc__a p{
  color: var(--cs-ink-70);
  border-top-color: var(--cs-ink-14);
}

/* ---------- 浏览器与设备 ---------- */
.page-faq .faq-browser{
  padding-block: clamp(40px,6vw,80px);
  background: var(--cs-ivory);
}
.page-faq .faq-browser__head .cs-lede{
  max-width: 66ch;
  line-height: 1.85;
  color: var(--cs-ink-70);
}
.page-faq .compat-grid{
  margin-top: clamp(22px,3.5vw,36px);
  display: grid;
  gap: 12px;
}
.page-faq .compat-card{
  background: var(--cs-paper);
  border: 1px solid var(--cs-ink-14);
  border-radius: var(--cs-r-md);
  padding: 16px 16px 14px;
  box-shadow: var(--cs-shadow-1);
}
.page-faq .compat-card__title{
  font-family: var(--cs-font-mono);
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cs-purple);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--cs-gold-line);
}
.page-faq .compat-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.page-faq .compat-row{
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: var(--cs-ink-70);
}
.page-faq .compat-dot{
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cs-green);
  box-shadow: 0 0 0 3px var(--cs-jade);
}
.page-faq .compat-name{
  font-weight: 600;
  color: var(--cs-ink);
}
.page-faq .compat-note{
  margin-left: auto;
  font-size: 12px;
  color: var(--cs-green);
  white-space: nowrap;
}

/* ---------- 房间人数 ---------- */
.page-faq .faq-rooms{
  padding-block: clamp(40px,6vw,78px);
  background: var(--cs-paper-2);
  border-block: 1px solid var(--cs-gold-line);
}
.page-faq .faq-rooms__head .cs-lede{
  max-width: 68ch;
  line-height: 1.85;
  color: var(--cs-ink-70);
}
.page-faq .room-groups{
  margin-top: clamp(22px,3.5vw,34px);
  display: grid;
  gap: 12px;
}
.page-faq .room-group{
  background: var(--cs-paper);
  border: 1px solid var(--cs-ink-14);
  border-radius: var(--cs-r-md);
  padding: 4px 16px 12px;
  box-shadow: var(--cs-shadow-1);
}
.page-faq .room-group[open]{
  border-color: var(--cs-gold-line);
}
.page-faq .room-group summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
}
.page-faq .room-group summary::-webkit-details-marker{ display: none; }
.page-faq .room-group summary::after{
  content: "+";
  margin-left: auto;
  font-family: var(--cs-font-mono);
  color: var(--cs-red);
  font-size: 16px;
}
.page-faq .room-group[open] summary::after{ content: "−"; }
.page-faq .room-group__title{
  font-family: var(--cs-font-display);
  font-size: 18px;
  margin: 0;
  color: var(--cs-ink);
}
.page-faq .room-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.page-faq .room-row{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 10px;
  border-radius: var(--cs-r-sm);
  background: var(--cs-paper-2);
  font-size: 14px;
}
.page-faq .room-name{
  color: var(--cs-ink);
  font-weight: 600;
}
.page-faq .room-num{
  margin-left: auto;
  font-size: 13px;
  color: var(--cs-ink-70);
}
.page-faq .room-tip{
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--cs-ink-45);
  max-width: 70ch;
  padding-left: 14px;
  border-left: 2px solid var(--cs-gold);
}

/* ---------- 安全 ---------- */
.page-faq .faq-safety{
  padding-block: clamp(40px,6vw,80px);
  background: linear-gradient(180deg, var(--cs-ivory) 0%, var(--cs-jade) 180%);
}
.page-faq .faq-safety__grid{
  display: grid;
  gap: clamp(22px,3.5vw,44px);
  align-items: start;
}
.page-faq .faq-safety__head .cs-lede{
  line-height: 1.85;
  color: var(--cs-ink-70);
  max-width: 48ch;
}
.page-faq .faq-safety__links{
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- 客服 ---------- */
.page-faq .faq-support{
  padding-block: clamp(40px,6vw,78px);
  color: var(--cs-ivory);
}
.page-faq .faq-support__inner{
  display: grid;
  gap: clamp(22px,3.5vw,48px);
  align-items: start;
}
.page-faq .faq-support .cs-title{
  color: var(--cs-ivory);
}
.page-faq .faq-support .cs-lede{
  color: rgba(255,248,238,.8);
  line-height: 1.85;
  max-width: 52ch;
}
.page-faq .faq-support .cs-eyebrow{
  color: var(--cs-gold-pale);
}
.page-faq .faq-support__actions{
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.page-faq .faq-support__list{
  list-style: none;
  margin: 0;
  padding: 18px 18px 16px;
  border: 1px solid rgba(212,166,74,.42);
  border-radius: var(--cs-r-md);
  background: rgba(27,20,22,.24);
  display: grid;
  gap: 12px;
}
.page-faq .faq-support__list li{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(212,166,74,.26);
  font-size: 14px;
  color: var(--cs-ivory);
  word-break: break-word;
}
.page-faq .faq-support__list li:last-child{
  border-bottom: 0;
  padding-bottom: 0;
}
.page-faq .faq-support__label{
  flex: none;
  min-width: 72px;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--cs-gold-pale);
}

/* ---------- 响应式 ---------- */
@media (min-width: 640px){
  .page-faq .faq-steps{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .page-faq .compat-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .page-faq .rank-steps{
    grid-template-columns: repeat(9, minmax(0,1fr));
  }
  .page-faq .rank-step{
    height: 170px;
  }
  .page-faq .room-row{
    flex-wrap: nowrap;
  }
}

@media (min-width: 900px){
  .page-faq .faq-open__grid{
    grid-template-columns: minmax(0,1.6fr) minmax(0,1fr);
  }
  .page-faq .faq-index{
    position: sticky;
    top: 22px;
  }
  .page-faq .faq-ranks__layout{
    grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
    align-items: center;
  }
  .page-faq .faq-ranks__layout .faq-figure{
    margin-top: 0;
  }
  .page-faq .faq-qa{
    grid-template-columns: repeat(2, minmax(0,1fr));
    align-items: start;
  }
  .page-faq .faq-safety__grid{
    grid-template-columns: minmax(0,.9fr) minmax(0,1.35fr);
  }
  .page-faq .faq-safety__grid .faq-qa{
    grid-template-columns: 1fr;
    margin-top: 0;
  }
  .page-faq .faq-support__inner{
    grid-template-columns: minmax(0,1.25fr) minmax(0,.9fr);
  }
  .page-faq .compat-grid{
    grid-template-columns: repeat(4, minmax(0,1fr));
  }
}

@media (min-width: 1100px){
  .page-faq .faq-ranks__chart{
    padding: 22px 22px 20px;
  }
  .page-faq .rank-step{
    height: 200px;
  }
}

@media (prefers-reduced-motion: reduce){
  .page-faq .faq-index__link,
  .page-faq .faq-acc summary,
  .page-faq .faq-acc summary::after{
    transition: none;
  }
  .page-faq .faq-acc[open] summary::after{
    transform: none;
  }
}
<<<PAGE_CSS_END>>>