/* ===== 知识中心 / page-faq ===== */
.page-faq{
  --faq-ink-soft:#C6D6E4;
  --faq-panel:rgba(16,46,74,.68);
  --faq-panel-deep:rgba(5,15,25,.52);
}

/* --- 首屏 --- */
.page-faq .faq-hero{
  position:relative;
  overflow:hidden;
  background:var(--c-navy-deep);
  border-bottom:1px solid var(--c-line);
}
.page-faq .faq-hero-visual{position:absolute;inset:0;}
.page-faq .faq-hero-visual img{
  width:100%;height:100%;
  object-fit:cover;object-position:center 38%;
  opacity:.4;
}
.page-faq .faq-hero-visual::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(90% 72% at 10% 0%,rgba(31,227,208,.22),transparent 62%),
    linear-gradient(180deg,rgba(8,25,43,.5) 0%,rgba(8,25,43,.86) 58%,var(--c-navy) 100%);
}
.page-faq .faq-hero-inner{
  position:relative;
  padding:clamp(2.25rem,7vw,4.5rem) 0 clamp(1.75rem,5vw,3rem);
}
.page-faq .faq-hero h1{
  font-family:var(--f-sans);
  font-weight:900;
  font-size:clamp(2.1rem,7vw,4.1rem);
  line-height:1.03;
  letter-spacing:-.022em;
  color:var(--c-paper);
  margin:.6rem 0 1rem;
}
.page-faq .faq-hero .lede{
  max-width:48ch;
  color:var(--faq-ink-soft);
  font-size:clamp(1rem,2.2vw,1.0625rem);
  line-height:1.78;
}
.page-faq .hero-stats{
  list-style:none;
  margin:clamp(1.5rem,4vw,2.25rem) 0 0;
  padding:clamp(1rem,3vw,1.4rem) 0 0;
  border-top:1px solid var(--c-line-soft);
  display:flex;flex-wrap:wrap;
  gap:1.1rem 2.6rem;
}
.page-faq .hero-stats li{display:flex;flex-direction:column;gap:.25rem;}
.page-faq .hero-stat-num{
  font-family:var(--f-mono);
  font-size:clamp(1.35rem,3.6vw,1.75rem);
  line-height:1;
  color:var(--c-cyan);
  letter-spacing:-.02em;
}
.page-faq .hero-stat-label{
  font-size:var(--fs-12);
  color:var(--c-steel);
  letter-spacing:.04em;
}

/* --- 分类标签 --- */
.page-faq .faq-tabs{
  list-style:none;
  margin:0;
  padding:1.05rem 0;
  display:flex;
  gap:.5rem;
  overflow-x:auto;
  border-bottom:1px solid var(--c-line);
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.page-faq .faq-tabs::-webkit-scrollbar{display:none;}
.page-faq .faq-tab{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.6rem 1rem;
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  background:rgba(5,15,25,.4);
  color:var(--c-steel);
  font-size:var(--fs-14);
  text-decoration:none;
  white-space:nowrap;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.page-faq .faq-tab:hover,
.page-faq .faq-tab:focus-visible{
  color:var(--c-paper);
  border-color:var(--c-cyan-soft);
  background:rgba(31,227,208,.08);
}
.page-faq .faq-tab-num{
  font-family:var(--f-mono);
  font-size:var(--fs-12);
  color:var(--c-cyan);
}

/* --- 分组 --- */
.page-faq .faq-group{
  padding-top:clamp(2.25rem,5.5vw,3.75rem);
  padding-bottom:clamp(1.5rem,4vw,2.5rem);
  scroll-margin-top:1.5rem;
}
.page-faq .group-head{
  margin-bottom:clamp(1.25rem,3vw,1.75rem);
  padding-bottom:1.15rem;
  border-bottom:1px solid var(--c-line-soft);
}
.page-faq .group-title{
  font-size:clamp(1.4rem,3.6vw,2.15rem);
  font-weight:900;
  letter-spacing:-.015em;
  line-height:1.16;
  color:var(--c-paper);
  margin:.5rem 0 .6rem;
}
.page-faq .group-intro{
  max-width:54ch;
  color:var(--faq-ink-soft);
  font-size:var(--fs-16);
  line-height:1.78;
}

/* --- 规则分组的两栏 --- */
.page-faq .rules-layout{display:grid;gap:1.75rem;}
.page-faq .group-aside .media-frame{margin:0;}
.page-faq .group-aside .media-caption{
  color:var(--c-steel);
  font-size:var(--fs-12);
  line-height:1.7;
}
@media (min-width:1000px){
  .page-faq .rules-layout{
    grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
    align-items:start;
    gap:2.5rem;
  }
}

/* --- 折叠问答 --- */
.page-faq .qa{
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  background:linear-gradient(180deg,var(--faq-panel),var(--faq-panel-deep));
  box-shadow:var(--shadow-card);
  transition:border-color var(--dur) var(--ease);
}
.page-faq .qa + .qa{margin-top:.7rem;}
.page-faq .qa:hover{border-color:rgba(143,243,232,.42);}
.page-faq .qa summary{
  display:flex;
  align-items:flex-start;
  gap:.85rem;
  padding:1.05rem 1.2rem;
  cursor:pointer;
  list-style:none;
  font-weight:700;
  font-size:var(--fs-16);
  line-height:1.5;
  color:var(--c-paper);
}
.page-faq .qa summary::-webkit-details-marker{display:none;}
.page-faq .qa summary::after{
  content:"";
  flex:0 0 auto;
  width:9px;height:9px;
  margin-left:auto;
  margin-top:.42rem;
  border-right:2px solid var(--c-cyan);
  border-bottom:2px solid var(--c-cyan);
  transform:rotate(45deg);
  transition:transform var(--dur) var(--ease);
}
.page-faq .qa[open] summary{color:var(--c-cyan-soft);}
.page-faq .qa[open] summary::after{transform:rotate(-135deg);}
.page-faq .qa-body{
  padding:0 1.2rem 1.25rem;
  animation:faq-drop var(--dur) var(--ease);
  min-width:0;
}
.page-faq .qa-body p{
  color:var(--faq-ink-soft);
  font-size:var(--fs-16);
  line-height:1.78;
  margin:0 0 .8rem;
  max-width:58ch;
}
.page-faq .qa-body p:last-child{margin-bottom:0;}
.page-faq .qa-more{
  margin-top:1rem !important;
  padding-top:.85rem;
  border-top:1px dashed var(--c-line-soft);
  font-size:var(--fs-14) !important;
}
.page-faq .qa-more a{
  color:var(--c-cyan);
  text-decoration:none;
  border-bottom:1px solid rgba(31,227,208,.35);
  transition:border-color var(--dur) var(--ease);
}
.page-faq .qa-more a:hover{border-bottom-color:var(--c-cyan);}

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

/* --- 同分排序图示 --- */
.page-faq .rank-flow{
  width:100%;
  height:auto;
  margin:.9rem 0 1.1rem;
  display:block;
}
.page-faq .rf-node rect{
  fill:rgba(5,15,25,.55);
  stroke:var(--c-line);
  stroke-width:1;
}
.page-faq .rf-text text{
  font-family:var(--f-sans);
  font-size:15px;
  fill:var(--c-paper);
  text-anchor:middle;
}
.page-faq .rf-text text:first-child{fill:var(--c-cyan);}

/* --- 字段表 --- */
.page-faq .field-grid{
  display:grid;
  gap:.5rem;
  margin:1rem 0 1.15rem;
  grid-template-columns:1fr;
}
.page-faq .field-item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.1rem .7rem;
  padding:.7rem .85rem;
  border:1px solid var(--c-line-soft);
  background:rgba(5,15,25,.45);
  min-width:0;
}
.page-faq .field-code{
  grid-row:1 / span 2;
  align-self:start;
  font-family:var(--f-mono);
  font-size:var(--fs-14);
  color:var(--c-cyan);
  letter-spacing:-.01em;
}
.page-faq .field-name{
  font-size:var(--fs-14);
  font-weight:700;
  color:var(--c-paper);
  line-height:1.4;
}
.page-faq .field-desc{
  font-size:var(--fs-12);
  color:var(--c-steel);
  line-height:1.6;
  overflow-wrap:anywhere;
}
@media (min-width:640px){
  .page-faq .field-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (min-width:1040px){
  .page-faq .field-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* --- 字段名词浮层 --- */
.page-faq .field-term{
  position:relative;
  color:var(--c-cyan-soft);
  border-bottom:1px dashed rgba(143,243,232,.55);
  cursor:help;
}
.page-faq .field-term::after{
  content:attr(data-tip);
  position:absolute;
  left:0;
  top:calc(100% + 8px);
  z-index:6;
  width:max-content;
  max-width:min(300px,78vw);
  padding:.5rem .7rem;
  background:var(--c-navy-deep);
  border:1px solid var(--c-line);
  box-shadow:var(--shadow-pop);
  color:var(--c-paper);
  font-family:var(--f-sans);
  font-size:var(--fs-12);
  font-weight:400;
  line-height:1.6;
  opacity:0;
  visibility:hidden;
  transform:translateY(-4px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
}
.page-faq .field-term:hover::after,
.page-faq .field-term:focus::after{
  opacity:1;
  visibility:visible;
  transform:none;
}

/* --- 底部行动带 --- */
.page-faq .faq-cta{
  margin-top:clamp(1.5rem,4vw,2.5rem);
  padding:clamp(1.75rem,4.5vw,2.75rem) 0;
  border-top:1px solid var(--c-line);
  border-bottom:1px solid var(--c-line);
  background:linear-gradient(100deg,rgba(16,46,74,.9),rgba(8,25,43,.92));
}
.page-faq .faq-cta-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1.4rem;
}
.page-faq .faq-cta h2{
  font-size:clamp(1.3rem,3vw,1.75rem);
  font-weight:900;
  letter-spacing:-.01em;
  color:var(--c-paper);
  margin:.4rem 0 .5rem;
}
.page-faq .faq-cta p{
  color:var(--faq-ink-soft);
  font-size:var(--fs-14);
  line-height:1.72;
  max-width:56ch;
  overflow-wrap:anywhere;
}

/* --- 窄屏与动效 --- */
@media (max-width:520px){
  .page-faq .qa summary{padding:.95rem 1rem;font-size:var(--fs-14);}
  .page-faq .qa-body{padding:0 1rem 1.05rem;}
  .page-faq .qa-body p{font-size:var(--fs-14);}
  .page-faq .hero-stats{gap:.9rem 1.8rem;}
}
@media (prefers-reduced-motion:reduce){
  .page-faq .qa-body{animation:none;}
  .page-faq .qa,
  .page-faq .qa summary::after,
  .page-faq .faq-tab,
  .page-faq .field-term::after{transition:none;}
}
</main>