/* ===== FAQ 页面作用域 ===== */
.page-faq{
  --faq-cyan:#00bcd4;
  --faq-green:#00e676;
  position:relative;
}
.page-faq #faq-account,
.page-faq #faq-features,
.page-faq #faq-updates,
.page-faq #faq-security,
.page-faq #faq-contact{
  --faq-accent:var(--accent-blue);
  --faq-accent-glow:rgba(0,240,255,.28);
  --faq-accent-hover:rgba(0,240,255,.08);
}
.page-faq #faq-features{
  --faq-accent:var(--accent-purple);
  --faq-accent-glow:rgba(181,55,242,.28);
  --faq-accent-hover:rgba(181,55,242,.08);
}
.page-faq #faq-updates{
  --faq-accent:var(--faq-green);
  --faq-accent-glow:rgba(0,230,118,.28);
  --faq-accent-hover:rgba(0,230,118,.08);
}
.page-faq #faq-security{
  --faq-accent:var(--faq-cyan);
  --faq-accent-glow:rgba(0,188,212,.28);
  --faq-accent-hover:rgba(0,188,212,.08);
}
.page-faq #faq-contact{
  --faq-accent:var(--accent-gold);
  --faq-accent-glow:rgba(255,215,0,.28);
  --faq-accent-hover:rgba(255,215,0,.08);
}

/* 面包屑 */
.page-faq .faq-breadcrumb-shell{
  padding-top:12px;
}
.page-faq .breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--text-muted);
}
.page-faq .breadcrumb a{
  color:var(--text-muted);
  text-decoration:none;
  transition:color .2s;
}
.page-faq .breadcrumb a:hover{
  color:var(--accent-blue);
}
.page-faq .breadcrumb-current{
  color:var(--text-primary);
  font-weight:600;
}

/* Hero */
.page-faq .faq-hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 18%,rgba(181,55,242,.16),transparent 38%),
    radial-gradient(circle at 8% 82%,rgba(0,240,255,.12),transparent 42%),
    var(--bg-main);
}
.page-faq .faq-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(115deg,transparent 0 22px,rgba(0,240,255,.03) 22px 23px);
  pointer-events:none;
}
.page-faq .faq-hero-inner{
  position:relative;
  z-index:1;
  display:grid;
  gap:36px;
  align-items:center;
  padding:44px 16px 56px;
}
.page-faq .faq-hero-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:18px;
}
.page-faq .faq-hero h1{
  font-family:var(--font-display);
  font-size:clamp(28px,5.5vw,44px);
  line-height:1.15;
  color:var(--text-primary);
  margin:0 0 16px;
  letter-spacing:.01em;
}
.page-faq .faq-hero-lead{
  font-size:16px;
  line-height:1.75;
  color:var(--text-muted);
  max-width:680px;
  margin:0 0 24px;
}
.page-faq .faq-search{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--bg-surface);
  border:1px solid var(--border-color);
  border-radius:999px;
  padding:6px 8px 6px 18px;
  box-shadow:0 10px 34px rgba(0,0,0,.28);
  transition:border-color .25s,box-shadow .25s;
  max-width:600px;
}
.page-faq .faq-search:focus-within{
  border-color:var(--accent-blue);
  box-shadow:0 0 0 3px rgba(0,240,255,.14),0 0 28px rgba(0,240,255,.12);
}
.page-faq .faq-search svg{
  flex:0 0 auto;
  color:var(--accent-blue);
}
.page-faq .faq-search input{
  flex:1;
  min-width:0;
  background:transparent;
  border:none;
  outline:none;
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:14px;
  padding:10px 0;
}
.page-faq .faq-search input::placeholder{
  color:rgba(136,149,167,.7);
}
.page-faq .faq-search-hint{
  flex:0 0 auto;
  font-size:11px;
  color:var(--text-muted);
  background:var(--bg-elev);
  border:1px solid var(--border-color);
  border-radius:999px;
  padding:5px 12px;
  white-space:nowrap;
  display:none;
}
.page-faq .faq-hot-tags{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:18px;
}
.page-faq .faq-hot-label{
  font-size:12px;
  font-weight:600;
  color:var(--text-muted);
  margin-right:2px;
}
.page-faq .faq-chip{
  display:inline-flex;
  align-items:center;
  font-size:12px;
  font-weight:600;
  text-decoration:none;
  border-radius:999px;
  padding:5px 12px;
  border:1px solid var(--border-color);
  background:var(--bg-surface);
  color:var(--text-primary);
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
.page-faq .faq-chip:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,.3);
}
.page-faq .chip-blue:hover{border-color:var(--accent-blue);color:var(--accent-blue);}
.page-faq .chip-purple:hover{border-color:var(--accent-purple);color:var(--accent-purple);}
.page-faq .chip-green:hover{border-color:var(--faq-green);color:var(--faq-green);}
.page-faq .chip-cyan:hover{border-color:var(--faq-cyan);color:var(--faq-cyan);}

.page-faq .faq-hero-media{
  display:flex;
  justify-content:center;
}
.page-faq .faq-hero-image{
  position:relative;
  width:200px;
  height:200px;
}
.page-faq .faq-hero-ring{
  position:absolute;
  inset:-26px;
  border-radius:50%;
  border:1px dashed rgba(0,240,255,.42);
}
.page-faq .faq-hero-ring::after{
  content:"";
  position:absolute;
  inset:12px;
  border-radius:50%;
  border:1px solid rgba(181,55,242,.36);
}
.page-faq .faq-hero-image img{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  max-width:200px;
  object-fit:cover;
  border-radius:18px;
  border:1px solid var(--border-color);
  background:var(--bg-surface);
}

/* 统计 */
.page-faq .faq-stats{
  border-top:1px solid var(--border-color);
  border-bottom:1px solid var(--border-color);
  background:var(--bg-surface);
}
.page-faq .faq-stats-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  padding:28px 16px;
}
.page-faq .faq-stat-card{
  text-align:center;
  padding:20px 12px;
  background:var(--bg-main);
  border:1px solid var(--border-color);
  border-radius:var(--radius-md);
}
.page-faq .faq-stat-card .data-num{
  display:block;
  font-family:var(--font-mono);
  font-size:26px;
  font-weight:700;
  color:var(--accent-gold);
  line-height:1.2;
}
.page-faq .faq-stat-label{
  display:block;
  margin-top:6px;
  font-size:12px;
  color:var(--text-muted);
}

/* 目录 */
.page-faq .faq-catalog-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  padding:40px 16px;
}
.page-faq .faq-catalog-card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:18px;
  background:var(--bg-surface);
  border:1px solid var(--border-color);
  border-radius:var(--radius-md);
  text-decoration:none;
  transition:transform .25s,border-color .25s,box-shadow .25s;
}
.page-faq .faq-catalog-card:hover{
  transform:translateY(-4px);
  border-color:currentColor;
  box-shadow:0 14px 36px rgba(0,0,0,.3);
}
.page-faq .faq-card-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.page-faq .faq-card-topline svg{
  color:inherit;
}
.page-faq .faq-catalog-card strong{
  font-family:var(--font-display);
  font-size:16px;
  color:var(--text-primary);
  display:block;
}
.page-faq .faq-catalog-sub{
  display:block;
  margin-top:6px;
  font-size:12px;
  color:var(--text-muted);
}
.page-faq .faq-cat-account{color:var(--accent-blue);}
.page-faq .faq-cat-features{color:var(--accent-purple);}
.page-faq .faq-cat-updates{color:var(--faq-green);}
.page-faq .faq-cat-security{color:var(--faq-cyan);}
.page-faq .faq-cat-contact{color:var(--accent-gold);}

/* FAQ 分组 */
.page-faq .faq-section{
  position:relative;
  margin-top:32px;
  padding:30px 16px;
  background:
    linear-gradient(180deg,var(--bg-elev),var(--bg-surface));
  border:1px solid var(--border-color);
  border-left:3px solid var(--faq-accent);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.page-faq .faq-section::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:3px;
  background:linear-gradient(90deg,var(--faq-accent),transparent 62%);
  opacity:.55;
}
.page-faq .faq-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:22px;
}
.page-faq .faq-section-kicker{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.16em;
  font-weight:600;
}
.page-faq .faq-section-titles h2{
  font-family:var(--font-display);
  font-size:26px;
  line-height:1.2;
  color:var(--text-primary);
  margin:6px 0 8px;
}
.page-faq .faq-section-titles p{
  font-size:14px;
  color:var(--text-muted);
  margin:0;
}
.page-faq .kicker-account{color:var(--accent-blue);}
.page-faq .kicker-features{color:var(--accent-purple);}
.page-faq .kicker-updates{color:var(--faq-green);}
.page-faq .kicker-security{color:var(--faq-cyan);}
.page-faq .kicker-contact{color:var(--accent-gold);}
.page-faq .faq-section-aside{
  display:none;
}
.page-faq .faq-section-num{
  font-family:var(--font-mono);
  font-size:52px;
  font-weight:900;
  line-height:1;
  color:var(--faq-accent);
  opacity:.22;
  user-select:none;
}

/* 手风琴 */
.page-faq .faq-accordion{
  display:grid;
  gap:12px;
}
.page-faq .faq-item{
  background:var(--bg-main);
  border:1px solid var(--border-color);
  border-radius:var(--radius-md);
  overflow:hidden;
  transition:border-color .25s,box-shadow .25s;
}
.page-faq .faq-item[open]{
  border-color:var(--faq-accent);
  box-shadow:0 0 0 1px var(--faq-accent-glow),0 16px 38px rgba(0,0,0,.3);
}
.page-faq .faq-item summary{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding:18px 18px;
  list-style:none;
  cursor:pointer;
  font-weight:600;
  font-size:15px;
  color:var(--text-primary);
  transition:background .2s;
}
.page-faq .faq-item summary::-webkit-details-marker{
  display:none;
}
.page-faq .faq-item summary:hover{
  background:var(--faq-accent-hover);
}
.page-faq .faq-item summary:focus-visible{
  outline:2px solid var(--faq-accent);
  outline-offset:-2px;
}
.page-faq .faq-item summary::after{
  content:"+";
  flex:0 0 auto;
  width:26px;
  height:26px;
  border-radius:50%;
  border:1px solid var(--border-color);
  display:grid;
  place-items:center;
  font-family:var(--font-mono);
  font-size:14px;
  color:var(--text-muted);
  transition:transform .25s,border-color .2s,color .2s;
  margin-left:auto;
}
.page-faq .faq-item[open] summary::after{
  content:"−";
  transform:rotate(180deg);
  border-color:var(--faq-accent);
  color:var(--faq-accent);
}
.page-faq .faq-q-mark{
  flex:0 0 auto;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  color:var(--faq-accent);
  background:var(--faq-accent-hover);
  border:1px solid var(--faq-accent-glow);
  border-radius:4px;
  padding:3px 6px;
}
.page-faq .faq-item-title{
  flex:1;
  min-width:0;
}
.page-faq .faq-hot-badge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:rgba(255,215,0,.12);
  color:var(--accent-gold);
  border:1px solid rgba(255,215,0,.35);
  border-radius:999px;
  padding:3px 9px;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
  margin-left:auto;
}
.page-faq .faq-hot-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent-gold);
  box-shadow:0 0 8px rgba(255,215,0,.85);
  animation:faqPulse 1.6s ease-in-out infinite;
}
@keyframes faqPulse{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:.45;transform:scale(.72);}
}
.page-faq .faq-item[open] summary{
  border-bottom:1px solid var(--border-color);
}
.page-faq .faq-answer{
  padding:16px 18px 20px;
  animation:faqAnswerIn .3s ease;
}
@keyframes faqAnswerIn{
  from{opacity:0;transform:translateY(-6px);}
  to{opacity:1;transform:translateY(0);}
}
.page-faq .faq-answer p{
  margin:0;
  font-size:14px;
  line-height:1.8;
  color:var(--text-primary);
}

/* 使用指南 */
.page-faq .faq-guide{
  margin-top:48px;
  padding:36px 0;
  background:
    linear-gradient(120deg,rgba(0,240,255,.10),transparent 55%),
    var(--bg-elev);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.page-faq .faq-guide-grid{
  display:grid;
  gap:28px;
  align-items:center;
  padding:0 16px;
}
.page-faq .faq-guide-media{
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid var(--border-color);
  background:var(--bg-main);
  max-width:320px;
}
.page-faq .faq-guide-media img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}
.page-faq .faq-guide-steps h2{
  font-family:var(--font-display);
  font-size:26px;
  color:var(--text-primary);
  margin:14px 0 6px;
}
.page-faq .faq-guide-steps ol{
  list-style:none;
  margin:22px 0 0;
  padding:0;
}
.page-faq .faq-guide-steps li{
  display:flex;
  gap:16px;
  padding:16px 0;
  border-bottom:1px solid var(--border-color);
  align-items:flex-start;
}
.page-faq .faq-guide-steps li:last-child{
  border-bottom:0;
}
.page-faq .faq-guide-step-index{
  flex:0 0 auto;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  color:var(--accent-blue);
  background:rgba(0,240,255,.08);
  border:1px solid rgba(0,240,255,.25);
  border-radius:4px;
  padding:4px 7px;
  white-space:nowrap;
}
.page-faq .faq-guide-steps li strong{
  display:block;
  font-size:15px;
  color:var(--text-primary);
  margin-bottom:4px;
}
.page-faq .faq-guide-steps li p{
  margin:0;
  font-size:13px;
  line-height:1.7;
  color:var(--text-muted);
}

/* 底部联系 CTA */
.page-faq .faq-contact-cta{
  position:relative;
  margin-top:48px;
  margin-bottom:56px;
  padding:40px 24px;
  background:
    radial-gradient(circle at 85% 20%,rgba(181,55,242,.14),transparent 42%),
    var(--bg-surface);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  overflow:hidden;
  text-align:center;
}
.page-faq .faq-cta-glow{
  position:absolute;
  top:-40px;
  left:50%;
  transform:translateX(-50%);
  width:300px;
  height:80px;
  background:var(--accent-purple);
  filter:blur(72px);
  opacity:.16;
  pointer-events:none;
}
.page-faq .faq-contact-cta h2{
  font-family:var(--font-display);
  font-size:26px;
  color:var(--text-primary);
  margin:0 0 10px;
}
.page-faq .faq-contact-cta > p{
  font-size:14px;
  color:var(--text-muted);
  margin:0 0 24px;
}
.page-faq .faq-contact-channels{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin-bottom:26px;
}
.page-faq .faq-contact-channel{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:190px;
  padding:14px 18px;
  background:var(--bg-main);
  border:1px solid var(--border-color);
  border-radius:var(--radius-md);
  font-size:14px;
  color:var(--text-primary);
}
.page-faq .faq-contact-channel strong{
  font-size:12px;
  font-weight:600;
  color:var(--text-muted);
}
.page-faq .faq-cta-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}

/* 响应式增强 */
@media (min-width:560px){
  .page-faq .faq-stats-grid{
    grid-template-columns:repeat(4,1fr);
  }
  .page-faq .faq-hero-media{
    justify-content:flex-end;
  }
  .page-faq .faq-search-hint{
    display:inline-block;
  }
}

@media (min-width:768px){
  .page-faq .faq-catalog-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .page-faq .faq-section{
    padding:38px 28px;
  }
  .page-faq .faq-section-aside{
    display:block;
  }
  .page-faq .faq-guide-media{
    max-width:none;
  }
}

@media (min-width:1024px){
  .page-faq .faq-hero-inner{
    grid-template-columns:1.4fr .6fr;
    padding:64px 0 80px;
  }
  .page-faq .faq-hero h1{
    font-size:44px;
  }
  .page-faq .faq-catalog-grid{
    grid-template-columns:repeat(5,1fr);
    padding:48px 0;
  }
  .page-faq .faq-catalog-card{
    padding:22px 18px;
  }
  .page-faq .faq-guide-grid{
    grid-template-columns:.85fr 1.5fr;
    padding:0 24px;
  }
  .page-faq .faq-guide{
    padding:48px 0;
  }
  .page-faq .faq-guide-steps li{
    gap:22px;
  }
}

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