/* ================= 帮助中心 page-faq ================= */
.page-faq{
  --faq-card-bg:linear-gradient(158deg, rgba(8,34,28,.96) 0%, rgba(15,61,51,.94) 54%, rgba(23,89,74,.92) 100%);
  --faq-scene-line:rgba(201,162,39,.42);
  overflow-x:hidden;
}

.page-faq section[id],
.page-faq article[id]{
  scroll-margin-top:96px;
}

/* ---------- 首屏 ---------- */
.page-faq .faq-intro{
  padding-top:clamp(1.6rem,4vw,2.6rem);
  padding-bottom:clamp(1.2rem,3vw,2rem);
}
.page-faq .faq-intro .breadcrumb{
  margin-bottom:1.1rem;
}
.page-faq .faq-intro .display-title{
  margin:.8rem 0 1rem;
  max-width:20ch;
  line-height:1.16;
}
.page-faq .faq-intro .lede{
  max-width:64ch;
  color:var(--ink-soft);
}

/* 场景快捷锚点 */
.page-faq .faq-toc{
  margin-top:clamp(1.4rem,3vw,2rem);
  padding:1rem 1.1rem 1.1rem;
  background:var(--cream);
  border:1px solid var(--line-soft);
  border-left:4px solid var(--emerald-900);
}
.page-faq .faq-toc .toc__title{
  margin:0;
  font-family:var(--font-display);
  font-size:.96rem;
  letter-spacing:.16em;
  color:var(--emerald-900);
}
.page-faq .faq-toc .toc__list{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem .55rem;
  margin:.8rem 0 0;
  padding:0;
  list-style:none;
}
.page-faq .faq-toc .toc__link{
  display:inline-block;
  padding:.38rem .85rem;
  border:1px solid var(--line-gold);
  background:var(--paper);
  color:var(--emerald-900);
  font-size:.9rem;
  text-decoration:none;
  transition:transform var(--t-fast) var(--ease),
             background-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease);
}
.page-faq .faq-toc .toc__link:hover{
  background:var(--emerald-900);
  color:var(--gold-soft);
  border-color:var(--emerald-900);
  transform:translateY(-2px);
}

/* ---------- 四类场景索引 ---------- */
.page-faq .faq-banner{
  margin:1.3rem 0 1.7rem;
}
.page-faq .faq-scene-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1rem;
}
.page-faq .faq-scene{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:1.35rem 1.2rem 1.15rem;
  color:var(--cream);
  background:var(--faq-card-bg);
  border:1px solid var(--faq-scene-line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  transition:transform var(--t-mid) var(--ease),
             border-color var(--t-mid) var(--ease),
             box-shadow var(--t-mid) var(--ease);
}
.page-faq .faq-scene::before{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(231,206,122,.16);
  pointer-events:none;
}
.page-faq .faq-scene::after{
  content:"";
  position:absolute;
  top:-36%;
  right:-22%;
  width:62%;
  aspect-ratio:1 / 1;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(231,206,122,.22), transparent 68%);
  pointer-events:none;
}
.page-faq .faq-scene:hover{
  transform:translateY(-4px);
  border-color:var(--gold-soft);
  box-shadow:0 18px 36px rgba(8,34,28,.24);
}
.page-faq .faq-scene__num{
  position:relative;
  font-family:var(--font-mono);
  font-size:.82rem;
  letter-spacing:.18em;
  color:var(--gold-soft);
}
.page-faq .faq-scene__title{
  position:relative;
  margin:.45rem 0 .4rem;
  font-family:var(--font-display);
  font-size:1.2rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--cream);
}
.page-faq .faq-scene__desc{
  position:relative;
  margin:0 0 .85rem;
  font-size:.89rem;
  line-height:1.7;
  color:rgba(245,239,226,.72);
}
.page-faq .faq-scene__list{
  position:relative;
  margin:auto 0 0;
  padding:0;
  list-style:none;
  border-top:1px solid rgba(231,206,122,.24);
}
.page-faq .faq-scene__list li{
  border-bottom:1px dashed rgba(231,206,122,.18);
}
.page-faq .faq-scene__list li:last-child{
  border-bottom:0;
}
.page-faq .faq-scene__list a{
  position:relative;
  display:block;
  padding:.55rem 1.15rem .55rem .1rem;
  color:rgba(245,239,226,.9);
  font-size:.89rem;
  line-height:1.5;
  text-decoration:none;
  transition:color var(--t-fast) var(--ease),
             padding-left var(--t-fast) var(--ease);
}
.page-faq .faq-scene__list a::after{
  content:"";
  position:absolute;
  right:.15rem;
  top:50%;
  width:.52rem;
  height:.52rem;
  border-top:1px solid var(--gold);
  border-right:1px solid var(--gold);
  transform:translateY(-50%) rotate(45deg);
  opacity:.55;
  transition:opacity var(--t-fast) var(--ease), right var(--t-fast) var(--ease);
}
.page-faq .faq-scene__list a:hover{
  color:var(--gold-soft);
  padding-left:.42rem;
}
.page-faq .faq-scene__list a:hover::after{
  opacity:1;
  right:-.05rem;
}

/* ---------- 登录指引 ---------- */
.page-faq .faq-paths{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1.2rem;
  margin-top:.4rem;
}
.page-faq .faq-path{
  padding:1.35rem 1.25rem 1.15rem;
  background:var(--paper);
  border:1px solid var(--line-soft);
  border-top:3px solid var(--emerald-900);
  border-radius:var(--radius);
}
.page-faq .faq-path__title{
  margin:0 0 .3rem;
  font-family:var(--font-display);
  font-size:1.2rem;
  letter-spacing:.02em;
  color:var(--emerald-900);
}
.page-faq .faq-path__note{
  margin:0 0 1.15rem;
  font-size:.87rem;
  line-height:1.6;
  color:var(--muted);
}
.page-faq .faq-steps{
  margin:0;
  padding:0;
  list-style:none;
}
.page-faq .faq-step{
  position:relative;
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:.8rem;
  padding-bottom:1.1rem;
}
.page-faq .faq-step:last-child{
  padding-bottom:0;
}
.page-faq .faq-step::before{
  content:"";
  position:absolute;
  left:16.5px;
  top:38px;
  bottom:0;
  width:1px;
  background:linear-gradient(180deg, var(--line-gold), rgba(201,162,39,.1));
}
.page-faq .faq-step:last-child::before{
  display:none;
}
.page-faq .faq-step__chip{
  position:relative;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  color:var(--emerald-700);
}
.page-faq .faq-step__chip svg{
  position:absolute;
  inset:0;
  display:block;
}
.page-faq .faq-step__num{
  position:relative;
  font-family:var(--font-mono);
  font-size:.78rem;
  font-weight:700;
  color:var(--emerald-900);
}
.page-faq .faq-step.is-current .faq-step__chip{
  color:var(--gold);
}
.page-faq .faq-step.is-current .faq-step__num{
  color:var(--gold-deep);
}
.page-faq .faq-step__body strong{
  display:block;
  margin-bottom:.2rem;
  font-size:.98rem;
  font-weight:600;
  color:var(--ink);
}
.page-faq .faq-step__body span{
  display:block;
  font-size:.87rem;
  line-height:1.72;
  color:var(--ink-soft);
}
.page-faq .faq-path__warn{
  margin:1.15rem 0 0;
  padding:.65rem .8rem;
  background:rgba(179,46,46,.06);
  border-left:3px solid var(--red);
  font-size:.85rem;
  line-height:1.68;
  color:var(--ink-soft);
}

/* ---------- 道具说明速查 ---------- */
.page-faq .faq-items__layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1.4rem;
  align-items:start;
}
.page-faq .faq-table-wrap{
  overflow-x:auto;
  border:1px solid var(--line-soft);
  background:var(--paper);
  -webkit-overflow-scrolling:touch;
}
.page-faq .faq-table{
  width:100%;
  min-width:560px;
  border-collapse:collapse;
  font-size:.9rem;
}
.page-faq .faq-table thead th{
  padding:.75rem .85rem;
  background:var(--emerald-900);
  color:var(--cream);
  font-weight:600;
  font-size:.88rem;
  letter-spacing:.05em;
  text-align:left;
  white-space:nowrap;
}
.page-faq .faq-table tbody td{
  padding:.78rem .85rem;
  border-bottom:1px solid var(--line-soft);
  vertical-align:top;
  line-height:1.68;
  color:var(--ink-soft);
}
.page-faq .faq-table tbody tr:nth-child(odd){
  background:var(--paper);
}
.page-faq .faq-table tbody tr:nth-child(even){
  background:var(--cream-2);
}
.page-faq .faq-table tbody tr:hover{
  background:rgba(201,162,39,.14);
}
.page-faq .faq-table tbody td:first-child{
  font-weight:700;
  color:var(--emerald-900);
  white-space:nowrap;
}
.page-faq .faq-items__figure{
  margin:0;
}
.page-faq .faq-items__note{
  margin:1.2rem 0 0;
  padding-left:.9rem;
  border-left:2px solid var(--gold);
  font-size:.88rem;
  line-height:1.7;
  color:var(--muted);
}

/* ---------- 设备适配 accordion ---------- */
.page-faq .faq-device-accordion{
  margin-top:.4rem;
  border-top:1px solid var(--line-soft);
}
.page-faq .faq-device-accordion .accordion__item{
  border-bottom:1px solid var(--line-soft);
}
.page-faq .faq-device-accordion .accordion__trigger{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  width:100%;
  padding:1.05rem .2rem;
  background:transparent;
  border:0;
  cursor:pointer;
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:600;
  line-height:1.55;
  text-align:left;
  color:var(--ink);
  transition:color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease);
}
.page-faq .faq-device-accordion .accordion__trigger::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:100%;
  height:2px;
  background:linear-gradient(90deg, var(--gold), var(--gold-soft));
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--t-mid) var(--ease);
}
.page-faq .faq-device-accordion .accordion__trigger:hover{
  color:var(--emerald-700);
  padding-left:.5rem;
}
.page-faq .faq-device-accordion .accordion__trigger:hover::after{
  transform:scaleX(.35);
}
.page-faq .faq-device-accordion .accordion__trigger[aria-expanded="true"]{
  color:var(--emerald-700);
  padding-left:.5rem;
}
.page-faq .faq-device-accordion .accordion__trigger[aria-expanded="true"]::after{
  transform:scaleX(1);
}
.page-faq .faq-device-accordion .accordion__icon{
  flex:0 0 auto;
  transition:transform var(--t-mid) var(--ease);
}
.page-faq .faq-device-accordion .accordion__trigger[aria-expanded="true"] .accordion__icon{
  transform:rotate(180deg);
}
.page-faq .faq-device-accordion .accordion__panel{
  padding:0 1.6rem 1.15rem 2.6rem;
  font-size:.9rem;
  line-height:1.8;
  color:var(--ink-soft);
}
.page-faq .faq-device-accordion .accordion__panel p{
  margin:0 0 .45rem;
}
.page-faq .faq-device-accordion .accordion__panel p:last-child{
  margin-bottom:0;
}

/* ---------- 账号与订阅记录 ---------- */
.page-faq .faq-account__panel{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1rem;
}
.page-faq .faq-account__block{
  padding:1.15rem 1.1rem;
  background:var(--cream);
  border:1px solid var(--line-soft);
  border-left:3px solid var(--gold);
  transition:transform var(--t-fast) var(--ease),
             background-color var(--t-fast) var(--ease),
             border-left-color var(--t-fast) var(--ease);
}
.page-faq .faq-account__block:hover{
  transform:translateY(-3px);
  background:var(--paper);
  border-left-color:var(--emerald-700);
}
.page-faq .faq-account__block h3{
  margin:0 0 .5rem;
  font-family:var(--font-display);
  font-size:1.05rem;
  letter-spacing:.02em;
  color:var(--emerald-900);
}
.page-faq .faq-account__block p{
  margin:0 0 .9rem;
  font-size:.89rem;
  line-height:1.78;
  color:var(--ink-soft);
}
.page-faq .faq-link{
  display:inline-block;
  font-size:.87rem;
  font-weight:600;
  color:var(--emerald-700);
  text-decoration:none;
  border-bottom:1px solid var(--line-gold);
  padding-bottom:1px;
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.page-faq .faq-link:hover{
  color:var(--gold-deep);
  border-color:var(--gold-deep);
}

/* ---------- 还没解决（收束窄带） ---------- */
.page-faq .faq-reach__band{
  display:flex;
  flex-direction:column;
  gap:1.2rem;
  padding:1.4rem 1.3rem;
  background:linear-gradient(120deg, var(--emerald-950) 0%, var(--emerald-900) 58%, var(--emerald-700) 100%);
  border:1px solid var(--line-gold);
  border-radius:var(--radius);
}
.page-faq .faq-reach__title{
  margin:0 0 .45rem;
  font-family:var(--font-display);
  font-size:1.25rem;
  letter-spacing:.02em;
  color:var(--gold-soft);
}
.page-faq .faq-reach__text p{
  margin:0;
  font-size:.9rem;
  line-height:1.75;
  color:rgba(245,239,226,.78);
}
.page-faq .faq-reach__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
}
.page-faq .faq-btn{
  display:inline-block;
  padding:.62rem 1.25rem;
  background:var(--gold);
  color:var(--emerald-950);
  font-size:.9rem;
  font-weight:600;
  text-decoration:none;
  border:1px solid var(--gold);
  border-radius:var(--radius);
  transition:background-color var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease);
}
.page-faq .faq-btn:hover{
  background:var(--gold-soft);
  transform:translateY(-2px);
}
.page-faq .faq-btn--ghost{
  background:transparent;
  color:var(--gold-soft);
  border-color:rgba(231,206,122,.55);
}
.page-faq .faq-btn--ghost:hover{
  background:rgba(231,206,122,.14);
  color:var(--gold-soft);
}
.page-faq .faq-reach__meta{
  margin:.95rem 0 0;
  font-size:.83rem;
  line-height:1.7;
  color:var(--muted);
  word-break:break-word;
}

/* ---------- 响应式 ---------- */
@media (min-width:640px){
  .page-faq .faq-scene-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .page-faq .faq-account__panel{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .page-faq .faq-reach__band{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    padding:1.5rem 1.6rem;
  }
  .page-faq .faq-reach__actions{
    flex:0 0 auto;
  }
}

@media (min-width:900px){
  .page-faq .faq-paths{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .page-faq .faq-items__layout{
    grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
    gap:1.6rem;
  }
  .page-faq .faq-device-accordion .accordion__trigger{
    font-size:1.02rem;
  }
  .page-faq .faq-account__panel{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (min-width:1080px){
  .page-faq .faq-scene-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .page-faq .faq-intro .display-title{
    max-width:24ch;
  }
}

@media (max-width:520px){
  .page-faq .faq-table{
    min-width:500px;
    font-size:.85rem;
  }
  .page-faq .faq-table thead th,
  .page-faq .faq-table tbody td{
    padding:.65rem .6rem;
  }
  .page-faq .faq-device-accordion .accordion__panel{
    padding:0 .6rem 1.1rem 1.6rem;
  }
  .page-faq .faq-intro .display-title{
    max-width:100%;
  }
}
