/* ============================================================
   知识库 / FAQ 页样式
   ============================================================ */

.faq-layout{
  display:grid;
  grid-template-columns:262px 1fr;
  gap:40px;
  align-items:start;
  margin-top:8px;
}
@media(max-width:900px){
  .faq-layout{grid-template-columns:1fr;gap:26px}
  .faq-toc{position:static !important;max-height:none !important}
}

/* ── 左侧目录 ── */
.faq-toc{
  position:sticky;top:82px;
  max-height:calc(100vh - 110px);
  overflow-y:auto;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px 18px 20px;
}
.toc-title{
  font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--fg-faint);margin-bottom:14px;
}
.toc-group{margin-bottom:20px}
.toc-group:last-child{margin-bottom:0}
.toc-group h3{
  font-size:12.5px;color:var(--acc);margin:0 0 9px;font-weight:600;
}
.toc-group ul{list-style:none;margin:0;padding:0}
.toc-group li{margin-bottom:2px}
.toc-link{
  display:block;padding:6px 9px;border-radius:7px;
  font-size:13px;color:var(--fg-dim);line-height:1.5;
  transition:background .12s,color .12s;
}
.toc-link:hover{background:rgba(255,255,255,.06);color:var(--fg)}
.toc-link.active{background:var(--acc-dim);color:#cfe6ff}

/* ── 右侧问答 ── */
.faq-main{min-width:0}

.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  margin-bottom:20px;min-height:26px;
  font-size:12.5px;color:var(--fg-faint);
}
.crumbs .crumb{
  cursor:pointer;padding:3px 8px;border-radius:6px;
  background:rgba(255,255,255,.05);color:var(--fg-dim);
  border:1px solid transparent;max-width:280px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:background .12s,color .12s;
}
.crumbs .crumb:hover{background:rgba(255,255,255,.1);color:var(--fg)}
.crumbs .crumb.cur{background:var(--acc-dim);color:#cfe6ff;cursor:default}
.crumbs .sep{opacity:.4}

/* ── 问答条目 ── */
.qa-item{
  border:1px solid var(--line);
  border-radius:var(--radius);
  margin-bottom:12px;
  background:var(--bg-soft);
  overflow:hidden;
  transition:border-color .15s;
}
.qa-item.open{border-color:var(--line-strong)}
.qa-item.hidden{display:none}

.qa-q{margin:0;font-size:16px;font-weight:560;line-height:1.5}
.qbtn{
  all:unset;display:block;width:100%;cursor:pointer;
  padding:18px 20px;font:inherit;font-size:16px;font-weight:560;
  color:var(--fg);line-height:1.5;position:relative;padding-right:48px;
}
.qbtn:hover{background:rgba(255,255,255,.03)}
.qbtn::after{
  content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
  color:var(--fg-faint);font-size:19px;font-weight:400;
  transition:transform .18s,color .18s;
}
.qa-item.open .qbtn::after{content:"−";color:var(--acc)}

.qa-body{
  max-height:0;overflow:hidden;
  transition:max-height .26s ease;
}
.qa-item.open .qa-body{max-height:2400px}

.qa-a{
  padding:0 20px 4px;font-size:14.5px;line-height:1.78;color:var(--fg-dim);
}
.qa-a b{color:var(--fg);font-weight:600}

.qa-rel,.qa-links{padding:14px 20px 0}
.qa-rel{padding-top:18px}

/* 只有「当前展开」的那一条才显示相关问题与延伸 ——
   避免折叠条目里残留不可见的按钮干扰点击与无障碍树 */
.qa-item:not(.open) .qa-rel,
.qa-item:not(.open) .qa-links{display:none}
.rel-label{
  font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-faint);margin-bottom:9px;
}
.qa-rel ul,.qa-links ul{list-style:none;margin:0;padding:0}
.qa-rel li,.qa-links li{margin-bottom:6px}

.qlink{
  all:unset;cursor:pointer;display:inline-block;
  padding:7px 12px;border-radius:8px;font-size:13.5px;
  background:rgba(78,161,255,.10);color:#a8cfff;line-height:1.5;
  border:1px solid rgba(78,161,255,.2);
  transition:background .12s,border-color .12s;
}
.qlink:hover{background:rgba(78,161,255,.2);border-color:rgba(78,161,255,.4)}
.qlink::before{content:"→ ";opacity:.6}

.qa-links a{
  display:inline-block;padding:7px 12px;border-radius:8px;font-size:13.5px;
  background:rgba(255,255,255,.05);color:var(--fg-dim);
  border:1px solid var(--line);line-height:1.5;transition:background .12s;
}
.qa-links a:hover{background:rgba(255,255,255,.1);color:var(--fg)}

/* 条目底部留白 */
.qa-item.open .qa-body{padding-bottom:20px}

/* 高亮定位（从目录点击时闪烁一下） */
@keyframes qflash{
  0%,100%{background:transparent}
  35%{background:rgba(78,161,255,.10)}
}
.qa-item.flash{animation:qflash .9s ease}