.page-faq{
  --color-bg:#0B0E14;
  --color-bg-alt:#101B2D;
  --color-gold:#D4AF37;
  --color-amber:#FFB347;
  --color-cyan:#00D4FF;
  --color-text:#F5F7FA;
  --color-muted:#7A8BA6;
  --glass:rgba(255,255,255,0.08);
  --line:rgba(245,247,250,0.1);
  --font-display:"Noto Sans SC","Microsoft YaHei",sans-serif;
  --font-editorial:"Noto Serif SC","Source Han Serif SC",serif;
  --font-body:"Source Han Sans SC","Noto Sans SC",sans-serif;
  --radius-lg:18px;
  --radius-md:10px;
  --shadow:0 10px 30px rgba(0,0,0,0.22);
  position:relative;
  background:
    linear-gradient(rgba(0,212,255,0.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,212,255,0.03) 1px,transparent 1px);
  background-size:48px 48px;
  color:var(--color-text);
  font-family:var(--font-body);
  line-height:1.6;
  overflow-x:hidden;
}
.page-faq .faq-hero{
  position:relative;
  overflow:hidden;
  padding:48px 0 40px;
  border-bottom:1px solid var(--line);
  background:radial-gradient(ellipse at 80% 20%,rgba(0,212,255,0.08) 0%,transparent 50%);
}
.page-faq .faq-hero-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:36px;
  flex-wrap:wrap;
}
.page-faq .faq-hero-kicker{
  font-family:var(--font-display);
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--color-gold);
  border:1px solid rgba(212,175,55,0.25);
  border-radius:999px;
  padding:6px 16px;
}
.page-faq .faq-hero-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  align-items:center;
}
.page-faq .faq-hero-title{
  font-family:var(--font-display);
  font-size:clamp(2.4rem,7vw,4rem);
  font-weight:900;
  letter-spacing:-0.02em;
  line-height:1.05;
  margin:0 0 16px;
}
.page-faq .faq-hero-sub{
  display:block;
  color:var(--color-gold);
  font-family:var(--font-editorial);
  font-weight:400;
  font-size:0.5em;
  letter-spacing:0;
  margin-top:8px;
}
.page-faq .lead{
  font-family:var(--font-editorial);
  font-size:1.05rem;
  color:var(--color-muted);
  max-width:640px;
  margin:0;
}
.page-faq .metric-group{
  display:flex;
  flex-wrap:wrap;
  gap:12px 32px;
  margin-top:28px;
}
.page-faq .metric{
  flex:1 1 140px;
  max-width:180px;
  border-left:2px solid var(--color-gold);
  padding-left:16px;
}
.page-faq .metric-value{
  display:block;
  font-family:var(--font-display);
  font-size:1.75rem;
  font-weight:900;
  color:var(--color-text);
  line-height:1.1;
}
.page-faq .metric-label{
  display:block;
  margin-top:6px;
  font-size:0.8125rem;
  color:var(--color-muted);
}
.page-faq .faq-hero-visual{
  display:none;
  align-items:center;
  justify-content:flex-end;
}
.page-faq .faq-orbit-svg{
  width:240px;
  height:240px;
  overflow:visible;
}
.page-faq .faq-hero-caption{
  text-align:center;
  margin-top:-12px;
  font-size:0.75rem;
  letter-spacing:0.2em;
  color:var(--color-muted);
}
.page-faq .breadcrumb{
  margin:0;
}
.page-faq .breadcrumb ol{
  display:flex;
  align-items:center;
  gap:10px;
  list-style:none;
  margin:0;
  padding:0;
}
.page-faq .breadcrumb li{
  font-size:0.875rem;
  color:var(--color-muted);
}
.page-faq .breadcrumb a{
  color:var(--color-muted);
  text-decoration:none;
  transition:color .25s ease;
}
.page-faq .breadcrumb a:hover{
  color:var(--color-gold);
}
.page-faq .breadcrumb li[aria-current="page"]{
  color:var(--color-text);
}
.page-faq .breadcrumb li+li::before{
  content:"→";
  margin-right:10px;
  color:rgba(122,139,166,0.5);
}
.page-faq .faq-layout{
  padding:40px 0 72px;
}
.page-faq .faq-layout-inner{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
}
.page-faq .faq-toc-inner{
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:linear-gradient(135deg,rgba(16,27,45,0.85),rgba(11,14,20,0.6));
  padding:18px 16px;
}
.page-faq .faq-toc-label{
  font-family:var(--font-display);
  font-size:0.75rem;
  letter-spacing:0.16em;
  color:var(--color-gold);
  margin:0 0 12px;
  text-transform:uppercase;
}
.page-faq .faq-toc-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.page-faq .faq-toc-list li{
  margin:0;
}
.page-faq .faq-toc-list a{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--color-muted);
  text-decoration:none;
  font-size:0.875rem;
  transition:border-color .25s ease,color .25s ease,background .25s ease;
}
.page-faq .faq-toc-list a span{
  font-family:var(--font-display);
  font-size:0.6875rem;
  color:var(--color-gold);
  opacity:0.75;
}
.page-faq .faq-toc-list a:hover{
  border-color:rgba(212,175,55,0.45);
  background:rgba(212,175,55,0.06);
  color:var(--color-text);
}
.page-faq .faq-toc-meta{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--line);
  color:var(--color-muted);
  font-size:0.8125rem;
}
.page-faq .faq-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--color-cyan);
  box-shadow:0 0 0 0 rgba(0,212,255,0.5);
  display:inline-block;
  flex:none;
}
.page-faq .faq-dot--large{
  width:14px;
  height:14px;
  background:var(--color-gold);
  box-shadow:0 0 12px rgba(212,175,55,0.5);
}
.page-faq .faq-content{
  display:grid;
  gap:64px;
}
.page-faq .faq-section{
  scroll-margin-top:120px;
}
.page-faq .section-head{
  display:grid;
  gap:6px;
  margin-bottom:24px;
}
.page-faq .section-index{
  font-family:var(--font-display);
  font-size:0.75rem;
  letter-spacing:0.16em;
  color:var(--color-gold);
  text-transform:uppercase;
  padding-left:12px;
  border-left:2px solid var(--color-gold);
}
.page-faq .section-title{
  font-family:var(--font-editorial);
  font-size:clamp(1.6rem,3vw,2.4rem);
  color:var(--color-text);
  line-height:1.2;
  margin:0;
}
.page-faq .section-desc{
  color:var(--color-muted);
  font-size:0.95rem;
  max-width:680px;
  margin:0;
}
.page-faq .faq-search-wrap{
  background:rgba(16,27,45,0.5);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:24px;
  box-shadow:var(--shadow);
}
.page-faq .faq-search-box{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--color-bg);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:10px 12px;
  transition:border-color .3s ease,box-shadow .3s ease;
}
.page-faq .faq-search-box:focus-within{
  border-color:var(--color-gold);
  box-shadow:0 0 0 3px rgba(212,175,55,0.15);
}
.page-faq .faq-search-box svg{
  width:20px;
  height:20px;
  color:var(--color-muted);
  flex:none;
}
.page-faq .faq-search-box input{
  flex:1;
  min-width:0;
  background:transparent;
  border:none;
  outline:none;
  color:var(--color-text);
  font-family:var(--font-body);
  font-size:1rem;
}
.page-faq .faq-search-box input::placeholder{
  color:var(--color-muted);
  opacity:0.8;
}
.page-faq .faq-search-btn{
  background:linear-gradient(135deg,var(--color-gold),var(--color-amber));
  border:none;
  color:#0B0E14;
  font-family:var(--font-display);
  font-weight:700;
  font-size:0.875rem;
  padding:9px 18px;
  border-radius:8px;
  cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease;
}
.page-faq .faq-search-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(212,175,55,0.3);
}
.page-faq .faq-search-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-top:16px;
}
.page-faq .faq-search-hint{
  color:var(--color-muted);
  font-size:0.8125rem;
}
.page-faq .faq-search-tags .tag{
  background:rgba(0,212,255,0.08);
  border:1px solid rgba(0,212,255,0.2);
  color:var(--color-cyan);
  border-radius:999px;
  padding:5px 12px;
  font-size:0.8125rem;
  text-decoration:none;
  transition:background .25s ease;
}
.page-faq .faq-search-tags .tag:hover{
  background:rgba(0,212,255,0.15);
}
.page-faq .faq-category-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
  align-items:start;
}
.page-faq .faq-category-aside{
  display:grid;
  gap:14px;
}
.page-faq .faq-category-aside img{
  width:100%;
  height:auto;
  border-radius:var(--radius-md);
  border:1px solid var(--line);
  aspect-ratio:1/1;
  object-fit:cover;
}
.page-faq .faq-category-note{
  font-size:0.8125rem;
  color:var(--color-muted);
  border-left:2px solid var(--color-gold);
  padding-left:12px;
  margin:0;
}
.page-faq .faq-tabs{
  position:relative;
}
.page-faq .faq-tab-input{
  position:absolute;
  width:1px;
  height:1px;
  clip:rect(0 0 0 0);
  overflow:hidden;
  opacity:0;
}
.page-faq .faq-tabs-head{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  border-bottom:1px solid var(--line);
  margin-bottom:20px;
}
.page-faq .faq-tabs-head label{
  padding:10px 16px;
  font-family:var(--font-display);
  font-size:0.9rem;
  font-weight:700;
  color:var(--color-muted);
  cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color .25s ease,border-color .25s ease;
}
.page-faq .faq-tabs-head label:hover{
  color:var(--color-text);
}
.page-faq .faq-tab-input#tab-usage:checked~.faq-tabs-head label[for="tab-usage"],
.page-faq .faq-tab-input#tab-access:checked~.faq-tabs-head label[for="tab-access"],
.page-faq .faq-tab-input#tab-account:checked~.faq-tabs-head label[for="tab-account"],
.page-faq .faq-tab-input#tab-nav:checked~.faq-tabs-head label[for="tab-nav"]{
  color:var(--color-gold);
  border-bottom-color:var(--color-gold);
}
.page-faq .faq-tab-input#tab-usage:focus-visible~.faq-tabs-head label[for="tab-usage"],
.page-faq .faq-tab-input#tab-access:focus-visible~.faq-tabs-head label[for="tab-access"],
.page-faq .faq-tab-input#tab-account:focus-visible~.faq-tabs-head label[for="tab-account"],
.page-faq .faq-tab-input#tab-nav:focus-visible~.faq-tabs-head label[for="tab-nav"]{
  outline:2px solid var(--color-gold);
  outline-offset:-2px;
}
.page-faq .faq-tab-panel{
  display:none;
}
.page-faq .faq-tab-input#tab-usage:checked~.faq-tab-panel#panel-usage,
.page-faq .faq-tab-input#tab-access:checked~.faq-tab-panel#panel-access,
.page-faq .faq-tab-input#tab-account:checked~.faq-tab-panel#panel-account,
.page-faq .faq-tab-input#tab-nav:checked~.faq-tab-panel#panel-nav{
  display:block;
  animation:faqPanelIn .25s ease;
}
@keyframes faqPanelIn{
  from{opacity:0;transform:translateY(-4px);}
  to{opacity:1;transform:translateY(0);}
}
.page-faq .index-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.page-faq .index-item{
  margin:0;
}
.page-faq .index-link{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:rgba(255,255,255,0.02);
  color:var(--color-text);
  text-decoration:none;
  transition:transform .2s ease,border-color .25s ease,background .25s ease;
}
.page-faq .index-link:hover{
  border-color:rgba(212,175,55,0.35);
  background:rgba(212,175,55,0.05);
  transform:translateX(4px);
}
.page-faq .index-num{
  font-family:var(--font-display);
  font-size:0.6875rem;
  font-weight:700;
  letter-spacing:0.1em;
  color:var(--color-gold);
  min-width:34px;
}
.page-faq .index-title{
  flex:1;
  font-size:0.9375rem;
  line-height:1.5;
}
.page-faq .index-arrow{
  color:var(--color-cyan);
  opacity:0;
  transform:translateX(-6px);
  transition:opacity .2s ease,transform .2s ease;
}
.page-faq .index-link:hover .index-arrow{
  opacity:1;
  transform:translateX(0);
}
.page-faq .faq-live-strip{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:18px 22px;
  border-radius:var(--radius-lg);
  background:linear-gradient(90deg,rgba(16,27,45,0.85),rgba(11,14,20,0.4));
  border:1px solid rgba(0,212,255,0.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.03);
}
.page-faq .faq-live-copy{
  display:flex;
  align-items:center;
  gap:12px;
}
.page-faq .faq-live-copy strong{
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:0.95rem;
  color:var(--color-text);
}
.page-faq .faq-live-copy span:last-child{
  color:var(--color-muted);
  font-size:0.85rem;
}
.page-faq .faq-live-link{
  color:var(--color-cyan);
  text-decoration:none;
  font-size:0.9rem;
  font-weight:600;
  white-space:nowrap;
  transition:color .25s ease;
}
.page-faq .faq-live-link:hover{
  color:var(--color-gold);
}
.page-faq .faq-accordion-list{
  display:grid;
  gap:12px;
}
.page-faq .faq-accordion{
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:rgba(16,27,45,0.45);
  transition:border-color .25s ease,background .25s ease;
  scroll-margin-top:140px;
}
.page-faq .faq-accordion[open]{
  border-color:rgba(212,175,55,0.3);
  background:rgba(16,27,45,0.7);
}
.page-faq .faq-accordion:target{
  border-color:var(--color-gold);
  box-shadow:0 0 0 3px rgba(212,175,55,0.12);
}
.page-faq .faq-accordion summary{
  list-style:none;
  cursor:pointer;
  padding:18px 20px;
  display:flex;
  align-items:flex-start;
  gap:14px;
  font-family:var(--font-display);
  font-size:0.9375rem;
  font-weight:700;
  color:var(--color-text);
  transition:color .25s ease;
}
.page-faq .faq-accordion summary::-webkit-details-marker{
  display:none;
}
.page-faq .faq-accordion summary:hover{
  color:var(--color-gold);
}
.page-faq .faq-q-num{
  font-family:var(--font-display);
  font-size:0.75rem;
  font-weight:700;
  color:var(--color-gold);
  opacity:0.7;
  min-width:28px;
}
.page-faq .faq-accordion summary::after{
  content:"+";
  margin-left:auto;
  font-size:1.25rem;
  font-weight:400;
  color:var(--color-gold);
  transition:transform .25s ease;
  line-height:0.9;
}
.page-faq .faq-accordion[open] summary::after{
  transform:rotate(45deg);
}
.page-faq .faq-answer{
  padding:0 20px 18px 62px;
  color:var(--color-muted);
  font-size:0.9375rem;
  line-height:1.7;
}
.page-faq .faq-answer p{
  margin:0 0 8px;
}
.page-faq .faq-answer p:last-child{
  margin-bottom:0;
}
.page-faq .faq-contact-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
}
.page-faq .faq-contact-visual{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--line);
  min-height:220px;
}
.page-faq .faq-contact-visual img{
  width:100%;
  height:100%;
  min-height:220px;
  object-fit:cover;
  display:block;
}
.page-faq .faq-contact-overlay{
  position:absolute;
  left:14px;
  bottom:14px;
  background:rgba(11,14,20,0.82);
  border:1px solid rgba(245,247,250,0.12);
  border-radius:999px;
  padding:8px 16px;
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--color-text);
  font-size:0.8125rem;
}
.page-faq .faq-cta-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--color-cyan);
  box-shadow:0 0 10px rgba(0,212,255,0.6);
  flex:none;
}
.page-faq .faq-contact-info{
  display:grid;
  gap:16px;
  padding:26px 22px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg,rgba(16,27,45,0.6),rgba(11,14,20,0.25));
  align-content:center;
}
.page-faq .faq-contact-item{
  display:flex;
  gap:16px;
  align-items:baseline;
  border-bottom:1px solid var(--line);
  padding-bottom:12px;
}
.page-faq .faq-contact-label{
  font-family:var(--font-display);
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0.1em;
  color:var(--color-gold);
  min-width:64px;
}
.page-faq .faq-contact-item a{
  color:var(--color-text);
  text-decoration:none;
  transition:color .25s ease;
}
.page-faq .faq-contact-item a:hover{
  color:var(--color-amber);
}
.page-faq .faq-contact-item span:last-child{
  color:var(--color-text);
}
.page-faq .faq-contact-note{
  margin:0;
  font-size:0.85rem;
  color:var(--color-muted);
  line-height:1.6;
}
.page-faq .btn-primary{
  display:inline-block;
  background:linear-gradient(135deg,var(--color-gold),var(--color-amber));
  color:#0B0E14;
  font-family:var(--font-display);
  font-weight:700;
  font-size:0.875rem;
  text-decoration:none;
  padding:12px 26px;
  border-radius:999px;
  box-shadow:0 6px 18px rgba(212,175,55,0.25);
  transition:transform .2s ease,box-shadow .2s ease;
  justify-self:start;
}
.page-faq .btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(212,175,55,0.35);
}
@media (min-width:768px){
  .page-faq .faq-hero{
    padding:72px 0 56px;
  }
  .page-faq .faq-hero-layout{
    grid-template-columns:minmax(0,1fr) 280px;
  }
  .page-faq .faq-hero-visual{
    display:flex;
  }
  .page-faq .faq-contact-grid{
    grid-template-columns:minmax(260px,1fr) minmax(280px,1fr);
    align-items:stretch;
  }
}
@media (min-width:1024px){
  .page-faq .faq-layout-inner{
    grid-template-columns:240px minmax(0,1fr);
    gap:48px;
    align-items:start;
  }
  .page-faq .faq-toc{
    position:sticky;
    top:24px;
  }
  .page-faq .faq-toc-list{
    flex-direction:column;
  }
  .page-faq .faq-toc-list a{
    border-radius:var(--radius-md);
  }
  .page-faq .faq-category-layout{
    grid-template-columns:minmax(0,1fr) 220px;
    gap:40px;
  }
  .page-faq .faq-content{
    gap:80px;
  }
}
</css>