/* ===== 使用教程页 page-faq ===== */
.page-faq{
  --faq-line: rgba(233,241,236,.16);
  --faq-body: rgba(233,241,236,.76);
  --faq-body-strong: rgba(233,241,236,.87);
  position:relative;
  padding-bottom:clamp(48px,8vw,96px);
  background:
    radial-gradient(85% 44% at 100% 0%, rgba(55,217,196,.10), transparent 62%),
    radial-gradient(70% 38% at 0% 16%, rgba(242,201,76,.07), transparent 64%);
}

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

.page-faq .crumbs{
  margin-top:clamp(16px,2.6vw,26px);
}

/* ---------- 首屏框景 ---------- */
.page-faq .faq-hero{
  padding-top:clamp(14px,2.4vw,22px);
}

.page-faq .faq-hero__frame{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(24px,4.6vw,52px);
  border:1px solid var(--line-gold);
  border-radius:var(--radius-xl);
  background:
    linear-gradient(155deg, rgba(18,70,58,.92) 0%, rgba(11,43,36,.96) 48%, rgba(7,28,24,1) 100%);
  box-shadow:var(--shadow-soft);
}

.page-faq .faq-hero__frame::before{
  content:"";
  position:absolute;
  inset:12px;
  border:1px solid var(--line-soft);
  border-radius:calc(var(--radius-xl) - 10px);
  pointer-events:none;
}

.page-faq .faq-hero__frame::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:16px;
  background:repeating-linear-gradient(90deg, var(--line-gold) 0 1px, transparent 1px 16px);
  opacity:.65;
  pointer-events:none;
}

.page-faq .faq-hero h1{
  margin:10px 0 0;
  max-width:20ch;
  font-size:clamp(1.8rem,4.6vw,3.3rem);
  line-height:1.1;
  letter-spacing:-.02em;
  font-weight:900;
  color:var(--mist);
}

.page-faq .faq-hero .lede{
  margin:clamp(14px,2.4vw,20px) 0 0;
  max-width:58ch;
  font-size:clamp(.97rem,1.5vw,1.05rem);
  line-height:1.78;
  color:var(--faq-body-strong);
}

/* 三步路线条 */
.page-faq .faq-route{
  position:relative;
  list-style:none;
  margin:clamp(24px,4.2vw,38px) 0 0;
  padding:0;
  display:grid;
  gap:12px;
}

.page-faq .faq-route__link{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:14px;
  padding:15px 18px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:rgba(24,76,63,.55);
  color:var(--mist);
  text-decoration:none;
  transition:transform .28s var(--ease), border-color .28s var(--ease), background .28s var(--ease);
}

.page-faq .faq-route__link:hover{
  transform:translateY(-2px);
  border-color:var(--line-gold);
  background:rgba(24,76,63,.82);
}

.page-faq .faq-route__link:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}

.page-faq .faq-route__num{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border:1px solid var(--line-gold);
  border-radius:50%;
  color:var(--gold);
  font-size:.84rem;
  letter-spacing:.06em;
}

.page-faq .faq-route__title{
  font-weight:800;
  font-size:.97rem;
  letter-spacing:.01em;
}

/* ---------- 章节骨架 ---------- */
.page-faq .faq-section{
  padding-top:clamp(44px,7.5vw,84px);
}

.page-faq .faq-section__head{
  max-width:66ch;
}

.page-faq .faq-section__head h2{
  margin:10px 0 0;
  font-size:clamp(1.4rem,2.9vw,2.05rem);
  line-height:1.24;
  letter-spacing:-.012em;
  font-weight:900;
  color:var(--mist);
}

.page-faq .faq-section__head p{
  margin:12px 0 0;
  font-size:.97rem;
  line-height:1.78;
  color:var(--faq-body);
}

.page-faq .faq-section__head a{
  color:var(--neon);
  text-decoration:none;
  border-bottom:1px solid rgba(55,217,196,.35);
}

.page-faq .faq-section__head a:hover{
  color:var(--gold);
  border-bottom-color:var(--line-gold);
}

/* ---------- 三步找到入口 ---------- */
.page-faq .faq-steps{
  display:grid;
  gap:clamp(20px,3.6vw,32px);
  margin-top:clamp(22px,4vw,34px);
}

.page-faq .faq-steps__visual{
  margin:0;
}

.page-faq .faq-steps__visual img{
  width:100%;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  object-fit:cover;
  aspect-ratio:12 / 8;
  background:linear-gradient(140deg, rgba(18,70,58,.9), rgba(7,28,24,.95));
}

.page-faq .faq-steps__visual figcaption{
  margin-top:10px;
  font-size:.78rem;
  letter-spacing:.06em;
  color:rgba(233,241,236,.55);
}

.page-faq .faq-steps__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}

.page-faq .faq-step{
  padding:18px 20px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:linear-gradient(135deg, rgba(24,76,63,.52), rgba(7,28,24,.62));
  scroll-margin-top:96px;
  transition:border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}

.page-faq .faq-step__num{
  font-size:.76rem;
  letter-spacing:.16em;
  color:var(--neon);
}

.page-faq .faq-step h3{
  margin:6px 0 0;
  font-size:1.02rem;
  font-weight:800;
  color:var(--mist);
}

.page-faq .faq-step p{
  margin:8px 0 0;
  font-size:.93rem;
  line-height:1.74;
  color:var(--faq-body);
}

.page-faq .faq-step p a{
  color:var(--gold);
  text-decoration:none;
  border-bottom:1px solid var(--line-gold);
}

.page-faq .faq-step:target{
  border-color:var(--gold);
  background:linear-gradient(135deg, rgba(242,201,76,.15), rgba(7,28,24,.7));
  box-shadow:var(--shadow-gold);
}

/* ---------- 筛选焦点战 ---------- */
.page-faq .faq-filter-grid{
  margin-top:clamp(22px,4vw,34px);
}

.page-faq .faq-filter{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:22px;
  border-radius:var(--radius-lg);
}

.page-faq .faq-filter h3{
  margin:0;
  font-size:1rem;
  font-weight:800;
  color:var(--mist);
}

.page-faq .faq-filter p{
  margin:0;
  font-size:.91rem;
  line-height:1.72;
  color:var(--faq-body);
}

.page-faq .faq-pill{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  padding:6px 13px;
  border-radius:999px;
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.1em;
}

.page-faq .faq-pill--focus{
  color:var(--gold);
  border:1px solid rgba(242,201,76,.42);
  background:rgba(242,201,76,.14);
}

.page-faq .faq-pill--injury{
  color:var(--neon);
  border:1px solid rgba(55,217,196,.42);
  background:rgba(55,217,196,.13);
}

.page-faq .faq-pill--risk{
  color:var(--alert);
  border:1px solid rgba(255,90,60,.45);
  background:rgba(255,90,60,.13);
}

/* ---------- 右侧索引与控球率 ---------- */
.page-faq .faq-index{
  display:grid;
  gap:clamp(20px,3.6vw,36px);
  margin-top:clamp(22px,4vw,34px);
}

.page-faq .faq-index__body h3{
  margin:22px 0 0;
  font-size:1rem;
  font-weight:800;
  color:var(--gold);
  letter-spacing:.01em;
}

.page-faq .faq-index__body h3:first-child{
  margin-top:0;
}

.page-faq .faq-index__body p{
  margin:8px 0 0;
  font-size:.94rem;
  line-height:1.76;
  color:var(--faq-body);
  max-width:62ch;
}

.page-faq .faq-ring{
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:20px;
  padding:18px 20px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:rgba(7,28,24,.58);
}

.page-faq .faq-ring svg{
  flex:0 0 auto;
  width:92px;
  height:92px;
}

.page-faq .faq-ring__legend{
  margin:0;
  font-size:.9rem;
  line-height:1.7;
  color:var(--faq-body-strong);
}

.page-faq .faq-ring__legend .mono{
  color:var(--neon);
  font-size:1rem;
}

.page-faq .faq-ring__cap{
  display:inline-block;
  margin-top:4px;
  font-size:.8rem;
  line-height:1.6;
  color:rgba(233,241,236,.56);
}

.page-faq .faq-index__visual{
  margin:0;
}

.page-faq .faq-index__visual img{
  width:100%;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  object-fit:cover;
  aspect-ratio:8 / 10;
  background:linear-gradient(160deg, rgba(18,70,58,.9), rgba(7,28,24,.95));
}

.page-faq .faq-index__visual figcaption{
  margin-top:10px;
  font-size:.78rem;
  letter-spacing:.06em;
  color:rgba(233,241,236,.55);
}

/* ---------- 红黄牌查询路径 ---------- */
.page-faq .faq-path{
  list-style:none;
  margin:clamp(20px,3.4vw,30px) 0 0;
  padding:0;
  display:grid;
}

.page-faq .faq-path__item{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:16px;
  padding-bottom:24px;
}

.page-faq .faq-path__item::before{
  content:"";
  position:absolute;
  left:17px;
  top:36px;
  bottom:2px;
  width:1px;
  background:linear-gradient(180deg, rgba(242,201,76,.42), rgba(242,201,76,0));
}

.page-faq .faq-path__item:last-child{
  padding-bottom:0;
}

.page-faq .faq-path__item:last-child::before{
  display:none;
}

.page-faq .faq-path__num{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid var(--line-gold);
  border-radius:50%;
  background:rgba(7,28,24,.9);
  color:var(--gold);
  font-size:.78rem;
  letter-spacing:.04em;
}

.page-faq .faq-path__item h3{
  margin:4px 0 0;
  font-size:1rem;
  font-weight:800;
  color:var(--mist);
}

.page-faq .faq-path__item p{
  margin:7px 0 0;
  font-size:.93rem;
  line-height:1.74;
  color:var(--faq-body);
  max-width:64ch;
}

.page-faq .faq-cards{
  display:grid;
  gap:12px;
  margin-top:clamp(20px,3.4vw,30px);
}

.page-faq .faq-card{
  padding:18px 20px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:rgba(7,28,24,.62);
}

.page-faq .faq-card--yellow{
  border-left:4px solid var(--gold-soft);
}

.page-faq .faq-card--red{
  border-left:4px solid var(--alert);
}

.page-faq .faq-card h3{
  margin:0;
  font-size:.98rem;
  font-weight:800;
  color:var(--mist);
}

.page-faq .faq-card p{
  margin:8px 0 0;
  font-size:.91rem;
  line-height:1.72;
  color:var(--faq-body);
}

/* ---------- 常见问题折叠 ---------- */
.page-faq .faq-list{
  display:grid;
  gap:10px;
  margin-top:clamp(22px,4vw,34px);
}

.page-faq .faq-item{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:rgba(24,76,63,.4);
  transition:border-color .28s var(--ease), background .28s var(--ease);
}

.page-faq .faq-item[open]{
  border-color:var(--line-gold);
  background:rgba(24,76,63,.64);
}

.page-faq .faq-item summary{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  list-style:none;
  cursor:pointer;
  font-size:.97rem;
  font-weight:800;
  color:var(--mist);
}

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

.page-faq .faq-item summary::after{
  content:"+";
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:1.1rem;
  line-height:1;
  color:var(--gold);
}

.page-faq .faq-item[open] summary::after{
  content:"−";
}

.page-faq .faq-item summary:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:-2px;
}

.page-faq .faq-item__num{
  flex:0 0 auto;
  font-size:.76rem;
  letter-spacing:.12em;
  color:var(--neon);
}

.page-faq .faq-item__a{
  padding:0 18px 18px 18px;
  font-size:.92rem;
  line-height:1.78;
  color:var(--faq-body);
}

.page-faq .faq-item__a p{
  margin:0;
  max-width:70ch;
}

/* ---------- 联系支持准备 ---------- */
.page-faq .faq-support{
  display:grid;
  gap:clamp(18px,3vw,30px);
  margin-top:clamp(22px,4vw,34px);
  padding:clamp(22px,4vw,38px);
  border:1px solid var(--line-gold);
  border-radius:var(--radius-xl);
  background:
    linear-gradient(150deg, rgba(18,70,58,.88), rgba(7,28,24,.96));
  box-shadow:var(--shadow-soft);
}

.page-faq .faq-prep{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}

.page-faq .faq-prep li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px;
  font-size:.93rem;
  line-height:1.72;
  color:var(--faq-body-strong);
}

.page-faq .faq-prep li::before{
  content:"";
  width:8px;
  height:8px;
  margin-top:9px;
  border-radius:2px;
  background:var(--neon);
}

.page-faq .faq-support__hint{
  margin:18px 0 20px;
  font-size:.9rem;
  line-height:1.72;
  color:rgba(233,241,236,.62);
  max-width:52ch;
}

.page-faq .faq-contact-card{
  padding:22px;
  border-radius:var(--radius-lg);
}

.page-faq .faq-contact-card__label{
  margin:0 0 14px;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.16em;
  color:rgba(26,20,16,.6);
}

.page-faq .faq-contact-card dl{
  margin:0;
  display:grid;
  gap:12px;
}

.page-faq .faq-contact-card dt{
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.12em;
  color:rgba(26,20,16,.62);
}

.page-faq .faq-contact-card dd{
  margin:4px 0 0;
  font-family:var(--font-mono);
  font-size:.9rem;
  line-height:1.6;
  color:var(--brown);
  word-break:break-all;
}

/* ---------- 平板 ---------- */
@media (min-width:680px){
  .page-faq .faq-cards{
    grid-template-columns:1fr 1fr;
  }

  .page-faq .faq-route{
    gap:16px;
  }
}

/* ---------- 桌面栅格 ---------- */
@media (min-width:900px){
  .page-faq .faq-route{
    grid-template-columns:repeat(3,1fr);
  }

  .page-faq .faq-route::before{
    content:"";
    position:absolute;
    left:8%;
    right:8%;
    top:50%;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(242,201,76,.5), transparent);
    z-index:0;
  }

  .page-faq .faq-steps{
    grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
    align-items:start;
  }

  .page-faq .faq-index{
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
    align-items:start;
  }

  .page-faq .faq-support{
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    align-items:center;
  }
}

@media (min-width:1100px){
  .page-faq .faq-steps{
    grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  }
}

/* ---------- 窄屏收敛 ---------- */
@media (max-width:420px){
  .page-faq .faq-hero__frame{
    border-radius:var(--radius-lg);
  }

  .page-faq .faq-hero__frame::before{
    inset:8px;
    border-radius:calc(var(--radius-lg) - 6px);
  }

  .page-faq .faq-ring{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }

  .page-faq .faq-item summary{
    font-size:.92rem;
  }
}

@media (prefers-reduced-motion:reduce){
  .page-faq .faq-route__link,
  .page-faq .faq-step,
  .page-faq .faq-item{
    transition:none;
  }
}