.page-faq{
  --faq-rail:268px;
  --faq-gap:clamp(20px,3vw,42px);
  background:var(--ink-900);
  color:var(--silver);
  overflow-x:clip;
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero{
  position:relative;
  padding-block:clamp(20px,3.4vw,44px) clamp(24px,4vw,52px);
  overflow:hidden;
}
.page-faq .faq-hero::before{
  content:"";
  position:absolute;
  top:-22%;
  right:-26%;
  width:min(760px,92vw);
  aspect-ratio:1;
  background:
    repeating-linear-gradient(115deg,rgba(184,255,61,.08) 0 1px,transparent 1px 28px),
    linear-gradient(158deg,var(--ink-700),var(--ink-800) 52%,var(--ink-900));
  border:1px solid var(--line-soft);
  transform:rotate(-12deg);
  pointer-events:none;
  z-index:0;
}
.page-faq .hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  gap:clamp(22px,4vw,40px);
  align-items:center;
}
.page-faq .hero-copy .display{
  margin:14px 0 16px;
  color:var(--fog);
  line-height:1.02;
}
.page-faq .hero-copy .lede{
  max-width:56ch;
  color:var(--silver);
}
.page-faq .hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:22px;
}
.page-faq .hero-visual{
  position:relative;
}
.page-faq .hero-visual .vertical-note{
  display:block;
  margin-bottom:12px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--steel);
}
.page-faq .hero-visual .media{
  border:2px solid var(--line);
  box-shadow:var(--shadow-hard);
  background:var(--ink-800);
  overflow:hidden;
}
.page-faq .hero-visual img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}

/* ---------- 状态条 ---------- */
.page-faq .status-strip{
  position:relative;
  z-index:1;
  margin-top:clamp(26px,4vw,46px);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:2px solid var(--line);
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg,rgba(13,42,33,.55),rgba(6,19,15,0));
}
.page-faq .status-strip .status-cell{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:14px 12px 16px;
  border-left:1px solid var(--line-soft);
}
.page-faq .status-strip .status-cell:nth-child(odd){
  border-left:0;
}
.page-faq .status-strip .status-key{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--steel);
}
.page-faq .status-strip .status-value{
  font-size:14.5px;
  color:var(--fog);
  font-weight:600;
}

/* ---------- 主体两栏 ---------- */
.page-faq .kb-grid{
  display:grid;
  gap:var(--faq-gap);
  padding-bottom:clamp(36px,6vw,76px);
}
.page-faq .rail-panel{
  background:var(--ink-800);
  border:2px solid var(--line);
  padding:18px 16px 20px;
  box-shadow:var(--shadow-hard);
}
.page-faq .rail-title{
  margin:0;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.16em;
  color:var(--lime);
  text-transform:uppercase;
}
.page-faq .kb-rail .filter-bar{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:14px;
}
.page-faq .kb-rail .filter-chip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  padding:9px 12px;
  border:1px solid var(--line-soft);
  background:transparent;
  color:var(--silver);
  font-family:var(--font-body);
  font-size:14px;
  text-align:left;
  cursor:pointer;
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.page-faq .kb-rail .filter-chip:hover{
  border-color:var(--lime);
  color:var(--fog);
}
.page-faq .kb-rail .filter-chip:focus-visible{
  outline:2px solid var(--lime);
  outline-offset:2px;
}
.page-faq .kb-rail .filter-chip.is-active{
  background:var(--lime);
  border-color:var(--lime);
  color:var(--ink-900);
  font-weight:700;
}
.page-faq .kb-rail .filter-count{
  font-family:var(--font-mono);
  font-size:12px;
  opacity:.75;
}
.page-faq .rail-note{
  display:flex;
  gap:8px;
  align-items:flex-start;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--line-soft);
  font-size:13px;
  line-height:1.7;
  color:var(--steel);
}
.page-faq .rail-note .status-dot{
  margin-top:6px;
  flex:none;
}
.page-faq .rail-links{
  display:flex;
  flex-direction:column;
  gap:9px;
  margin-top:16px;
}
.page-faq .rail-link{
  font-size:13.5px;
  color:var(--silver);
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:1px;
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.page-faq .rail-link:hover{
  color:var(--lime);
  border-bottom-color:var(--lime);
}

/* ---------- 问答流 ---------- */
.page-faq .kb-main{
  min-width:0;
}
.page-faq .qa-section{
  padding-block:clamp(20px,3vw,30px);
  border-top:1px solid var(--line);
}
.page-faq .qa-section:first-child{
  border-top:0;
  padding-top:0;
}
.page-faq .sec-title{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin:0 0 6px;
  font-size:clamp(21px,2.6vw,29px);
  line-height:1.24;
  color:var(--fog);
  letter-spacing:-.01em;
}
.page-faq .sec-num{
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:500;
  letter-spacing:.08em;
  color:var(--lime);
  flex:none;
}
.page-faq .sec-intro{
  margin:0 0 10px 30px;
  font-size:14px;
  color:var(--steel);
  line-height:1.7;
}
.page-faq .qa-list{
  margin-left:0;
}
.page-faq .qa-item{
  border-top:1px solid var(--line-soft);
}
.page-faq .qa-item:first-child{
  border-top:1px solid var(--line-soft);
}
.page-faq .qa-q{
  display:flex;
  align-items:baseline;
  gap:12px;
  padding:16px 0;
  list-style:none;
  cursor:pointer;
  transition:color .18s var(--ease);
}
.page-faq .qa-q::-webkit-details-marker{
  display:none;
}
.page-faq .qa-q::after{
  content:"+";
  margin-left:auto;
  flex:none;
  font-family:var(--font-mono);
  font-size:18px;
  line-height:1;
  color:var(--lime);
}
.page-faq .qa-item[open] .qa-q::after{
  content:"−";
}
.page-faq .qa-q:hover .qa-question{
  color:var(--lime);
}
.page-faq .qa-q:focus-visible{
  outline:2px solid var(--lime);
  outline-offset:3px;
}
.page-faq .qa-num{
  flex:none;
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--steel);
  padding-top:2px;
}
.page-faq .qa-question{
  margin:0;
  font-size:clamp(15px,1.7vw,17px);
  font-weight:600;
  line-height:1.5;
  color:var(--fog);
  font-family:var(--font-body);
  transition:color .18s var(--ease);
}
.page-faq .qa-a{
  padding:0 0 20px 40px;
}
.page-faq .qa-a p{
  margin:0 0 10px;
  font-size:15px;
  line-height:1.8;
  color:var(--silver);
}
.page-faq .qa-a p:last-child{
  margin-bottom:0;
}
.page-faq .qa-section > .note{
  margin:14px 0 0 30px;
  color:var(--steel);
}

/* ---------- 客服带状区 ---------- */
.page-faq .support-band{
  margin-top:clamp(28px,4vw,48px);
  display:grid;
  gap:0;
  border:2px solid var(--line);
  background:var(--ink-800);
  box-shadow:var(--shadow-hard);
  overflow:hidden;
}
.page-faq .support-copy{
  padding:clamp(22px,3.4vw,36px);
}
.page-faq .support-copy .h2{
  margin:12px 0 12px;
  color:var(--fog);
}
.page-faq .support-copy > p{
  margin:0 0 18px;
  font-size:15px;
  line-height:1.8;
  color:var(--silver);
  max-width:46ch;
}
.page-faq .support-list{
  list-style:none;
  margin:0 0 16px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0;
}
.page-faq .support-list li{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 12px;
  padding:12px 0;
  border-top:1px solid var(--line-soft);
  font-size:14.5px;
}
.page-faq .support-list li:first-child{
  border-top:2px solid var(--line);
}
.page-faq .support-key{
  flex:none;
  min-width:44px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.1em;
  color:var(--steel);
}
.page-faq .support-list a{
  color:var(--fog);
  text-decoration:none;
  border-bottom:1px solid var(--moss);
  word-break:break-all;
}
.page-faq .support-list a:hover{
  color:var(--lime);
  border-bottom-color:var(--lime);
}
.page-faq .support-value{
  color:var(--silver);
  line-height:1.7;
}
.page-faq .support-copy .note{
  margin:0;
  color:var(--steel);
}
.page-faq .support-figure{
  margin:0;
  border-top:2px solid var(--line);
  background:var(--ink-900);
}
.page-faq .support-figure img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}

/* ---------- 响应式 ---------- */
@media (min-width:640px){
  .page-faq .status-strip{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .page-faq .status-strip .status-cell:nth-child(odd){
    border-left:1px solid var(--line-soft);
  }
  .page-faq .status-strip .status-cell:first-child{
    border-left:0;
  }
}

@media (max-width:959px){
  .page-faq .kb-rail .filter-bar{
    flex-direction:row;
    overflow-x:auto;
    padding-bottom:6px;
    scrollbar-width:thin;
  }
  .page-faq .kb-rail .filter-chip{
    width:auto;
    flex:none;
    white-space:nowrap;
    border-radius:var(--radius-pill);
    padding:8px 14px;
  }
}

@media (min-width:900px){
  .page-faq .hero-grid{
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  }
  .page-faq .hero-visual .vertical-note{
    writing-mode:vertical-rl;
    position:absolute;
    top:0;
    right:-6px;
    margin:0;
    letter-spacing:.24em;
  }
  .page-faq .hero-visual .media{
    margin-right:26px;
  }
}

@media (min-width:960px){
  .page-faq .kb-grid{
    grid-template-columns:var(--faq-rail) minmax(0,1fr);
    align-items:start;
  }
  .page-faq .kb-rail{
    position:sticky;
    top:96px;
  }
  .page-faq .support-band{
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    align-items:stretch;
  }
  .page-faq .support-figure{
    border-top:0;
    border-left:2px solid var(--line);
    height:100%;
  }
  .page-faq .support-figure img{
    height:100%;
  }
}

@media (prefers-reduced-motion:reduce){
  .page-faq .qa-q,
  .page-faq .qa-question,
  .page-faq .rail-link,
  .page-faq .kb-rail .filter-chip{
    transition:none;
  }
}
<<<END>>>