.page-faq{
  --faq-cut:14px;
  --faq-tone-entry:var(--cyan-400);
  --faq-tone-version:var(--amber-500);
  --faq-tone-display:var(--magenta-500);
  --faq-tone-contact:var(--cyan-200);
}

.page-faq .breadcrumbs{margin-top:calc(var(--head-h) + 14px)}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero{
  position:relative;
  margin-top:14px;
  padding-block:clamp(24px,5vw,54px) clamp(18px,3vw,30px);
  border-bottom:1px solid var(--line-soft);
  background-image:
    repeating-linear-gradient(90deg, rgba(185,201,218,.07) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgba(185,201,218,.05) 0 1px, transparent 1px 72px),
    radial-gradient(120% 90% at 88% -10%, rgba(43,227,210,.16), transparent 62%);
  overflow:hidden;
}

.page-faq .faq-hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(20px,3vw,34px);
  align-items:end;
}

.page-faq .faq-hero__lead h1{
  margin:10px 0 14px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2rem,5vw,3.4rem);
  line-height:1.12;
  letter-spacing:-.01em;
  color:var(--paper-100);
  max-width:16em;
}

.page-faq .faq-hero__intro{
  margin:0;
  max-width:46em;
  color:var(--slate-300);
  font-size:15.5px;
  line-height:1.8;
}

.page-faq .faq-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}

.page-faq .faq-stat{
  position:relative;
  padding:18px 20px 20px;
  border:1px solid var(--line);
  background:linear-gradient(158deg, rgba(19,38,61,.96), rgba(6,16,30,.92));
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--faq-cut)),calc(100% - var(--faq-cut)) 100%,0 100%);
}

.page-faq .faq-stat::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:linear-gradient(180deg,var(--amber-500),var(--cyan-400));
}

.page-faq .faq-stat__num{
  margin:0;
  font-size:clamp(46px,8vw,70px);
  font-weight:700;
  line-height:.86;
  letter-spacing:-.02em;
  color:var(--amber-500);
}

.page-faq .faq-stat__label{
  margin:8px 0 14px;
  font-size:13px;
  color:var(--slate-300);
  line-height:1.6;
}

.page-faq .faq-stat__list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 12px;
  margin:0;
  padding:12px 0 0;
  border-top:1px solid var(--line-soft);
  list-style:none;
  font-size:12.5px;
  color:var(--slate-300);
}

.page-faq .faq-stat__list .mono{
  display:block;
  color:var(--cyan-200);
  font-size:13px;
}

/* ---------- 分类标签 ---------- */
.page-faq .faq-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin:clamp(20px,3vw,30px) 0 0;
  padding:0;
  list-style:none;
}

.page-faq .faq-tab{
  --tab-tone:var(--cyan-400);
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 13px;
  border:1px solid var(--line);
  background:var(--ink-800);
  color:var(--slate-300);
  font-size:13px;
  text-decoration:none;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}

.page-faq .faq-tab .mono{
  font-size:11.5px;
  color:var(--tab-tone);
}

.page-faq .faq-tab__dot{
  width:7px;
  height:7px;
  background:var(--tab-tone);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}

.page-faq .faq-tab:hover,
.page-faq .faq-tab:focus-visible{
  color:var(--paper-100);
  border-color:var(--tab-tone);
  background:var(--ink-700);
}

.page-faq .faq-tab--version{--tab-tone:var(--faq-tone-version)}
.page-faq .faq-tab--display{--tab-tone:var(--faq-tone-display)}
.page-faq .faq-tab--contact{--tab-tone:var(--faq-tone-contact)}

/* ---------- 主体双栏 ---------- */
.page-faq .faq-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(22px,4vw,44px);
  padding-block:clamp(26px,5vw,52px) clamp(40px,6vw,72px);
}

/* ---------- 左侧索引 ---------- */
.page-faq .faq-index{
  padding:16px 16px 18px;
  border:1px solid var(--line);
  background:var(--ink-800);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);
}

.page-faq .faq-index nav{
  display:grid;
  gap:2px;
  margin-top:10px;
}

.page-faq .faq-index__link{
  --tone:var(--cyan-400);
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:baseline;
  gap:10px;
  padding:10px 8px;
  border-left:2px solid transparent;
  color:var(--slate-300);
  font-size:14px;
  text-decoration:none;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}

.page-faq .faq-index__link--entry{--tone:var(--faq-tone-entry)}
.page-faq .faq-index__link--version{--tone:var(--faq-tone-version)}
.page-faq .faq-index__link--display{--tone:var(--faq-tone-display)}
.page-faq .faq-index__link--contact{--tone:var(--faq-tone-contact)}

.page-faq .faq-index__num{
  font-size:11.5px;
  color:var(--tone);
}

.page-faq .faq-index__count{
  font-size:11.5px;
  color:var(--slate-300);
}

.page-faq .faq-index__link:hover,
.page-faq .faq-index__link:focus-visible{
  color:var(--paper-100);
  border-left-color:var(--tone);
  background:var(--tint-cyan);
}

.page-faq .faq-index__note{
  margin:14px 0 0;
  padding-top:12px;
  border-top:1px solid var(--line-soft);
  font-size:12.5px;
  line-height:1.7;
  color:var(--slate-300);
}

/* ---------- 问答分组 ---------- */
.page-faq .faq-group{
  --tone:var(--cyan-400);
  scroll-margin-top:calc(var(--head-h) + 24px);
  margin-bottom:clamp(30px,5vw,54px);
}

.page-faq .faq-group:last-of-type{margin-bottom:clamp(22px,4vw,36px)}

.page-faq #faq-entry{--tone:var(--faq-tone-entry)}
.page-faq #faq-version{--tone:var(--faq-tone-version)}
.page-faq #faq-display{--tone:var(--faq-tone-display)}
.page-faq #faq-contact{--tone:var(--faq-tone-contact)}

.page-faq .faq-group__head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:baseline;
  gap:4px 12px;
  padding-bottom:12px;
  border-bottom:2px solid var(--tone);
}

.page-faq .faq-group__num{
  grid-row:span 2;
  font-size:clamp(20px,3vw,26px);
  font-weight:700;
  line-height:1;
  color:var(--tone);
}

.page-faq .faq-group__head h2{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.3rem,2.6vw,1.9rem);
  letter-spacing:-.01em;
  color:var(--paper-100);
}

.page-faq .faq-group__head p{
  margin:0;
  grid-column:2;
  font-size:13.5px;
  line-height:1.7;
  color:var(--slate-300);
}

/* ---------- 配图 ---------- */
.page-faq .faq-figure{
  margin:16px 0 6px;
  padding:10px;
  border:1px solid var(--line);
  background:var(--ink-800);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
}

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

.page-faq .faq-figure figcaption{
  padding-top:9px;
  font-family:var(--font-mono);
  font-size:12px;
  line-height:1.6;
  color:var(--slate-300);
}

/* ---------- 手风琴 ---------- */
.page-faq .qa{
  border-bottom:1px solid var(--line-soft);
  transition:background var(--dur) var(--ease);
}

.page-faq .qa:first-of-type{border-top:1px solid var(--line-soft)}

.page-faq .qa summary{
  display:flex;
  align-items:baseline;
  gap:11px;
  padding:14px 4px;
  list-style:none;
  cursor:pointer;
  color:var(--paper-100);
  font-size:15px;
  line-height:1.6;
  transition:color var(--dur) var(--ease);
}

.page-faq .qa summary::-webkit-details-marker{display:none}

.page-faq .qa summary::after{
  content:"+";
  margin-left:auto;
  flex:none;
  font-family:var(--font-mono);
  font-size:16px;
  line-height:1;
  color:var(--cyan-400);
  transition:color var(--dur) var(--ease);
}

.page-faq .qa[open] summary::after{
  content:"–";
  color:var(--amber-500);
}

.page-faq .qa[open] summary{color:var(--amber-300)}

.page-faq .qa summary:hover,
.page-faq .qa summary:focus-visible{color:var(--cyan-200)}

.page-faq .qa__num{
  flex:none;
  min-width:22px;
  font-size:11.5px;
  color:var(--slate-300);
  transition:color var(--dur) var(--ease);
}

.page-faq .qa[open] .qa__num{color:var(--amber-500)}

.page-faq .qa__text{min-width:0}

.page-faq .qa__a{
  padding:2px 6px 16px 37px;
  color:var(--slate-300);
  font-size:14.5px;
  line-height:1.8;
}

.page-faq .qa__a p{margin:0 0 8px}
.page-faq .qa__a p:last-child{margin-bottom:0}

.page-faq .qa__a a{
  color:var(--cyan-200);
  text-decoration:none;
  border-bottom:1px solid var(--line-strong);
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}

.page-faq .qa__a a:hover,
.page-faq .qa__a a:focus-visible{
  color:var(--amber-500);
  border-bottom-color:var(--amber-500);
}

/* ---------- 底部联系卡 ---------- */
.page-faq .faq-help{
  display:grid;
  gap:18px;
  padding:clamp(20px,3vw,30px);
  border:1px solid var(--line-strong);
  background:
    linear-gradient(150deg, rgba(19,38,61,.96), rgba(6,16,30,.94)),
    repeating-linear-gradient(135deg, rgba(43,227,210,.08) 0 2px, transparent 2px 14px);
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
}

.page-faq .faq-help__title{
  margin:8px 0 0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.1rem,2.2vw,1.5rem);
  line-height:1.35;
  color:var(--paper-100);
}

.page-faq .faq-help__list{
  display:grid;
  gap:9px;
  margin:0;
  padding:0;
  list-style:none;
  font-size:13.5px;
  color:var(--slate-300);
}

.page-faq .faq-help__list li{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:10px;
}

.page-faq .faq-help__list .mono{
  flex:none;
  min-width:42px;
  font-size:11px;
  letter-spacing:.06em;
  color:var(--amber-500);
}

.page-faq .faq-help__list a{
  color:var(--paper-100);
  text-decoration:none;
  border-bottom:1px solid var(--line-strong);
  word-break:break-all;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}

.page-faq .faq-help__list a:hover,
.page-faq .faq-help__list a:focus-visible{
  color:var(--amber-300);
  border-bottom-color:var(--amber-500);
}

.page-faq .faq-help__links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* ---------- 响应式 ---------- */
@media (min-width:820px){
  .page-faq .faq-hero__grid{
    grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr);
  }
}

@media (min-width:960px){
  .page-faq .faq-layout{
    grid-template-columns:250px minmax(0,1fr);
    align-items:start;
  }
  .page-faq .faq-index{
    position:sticky;
    top:calc(var(--head-h) + 18px);
  }
  .page-faq .faq-help{
    grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
    align-items:center;
  }
  .page-faq .faq-help__links{
    grid-column:1 / -1;
  }
}

@media (max-width:520px){
  .page-faq .qa summary{font-size:14.5px;gap:9px}
  .page-faq .qa__a{padding-left:31px;font-size:14px}
  .page-faq .faq-stat__list{grid-template-columns:minmax(0,1fr)}
  .page-faq .faq-tab{font-size:12.5px;padding:8px 11px}
}

@media (prefers-reduced-motion:reduce){
  .page-faq *,
  .page-faq *::before,
  .page-faq *::after{
    transition-duration:1ms !important;
    animation-duration:1ms !important;
  }
}