/* ══════════════════════════════════════════════════════════════════════════
   HAIRUNWER Audio Studio · 调音说明页（guide）专属样式（2026-10-24）
   ──────────────────────────────────────────────────────────────────────────
   与本轮 support / devices 统一：暖瓷白 + 石墨黑 + 香槟金识别点。
   为什么单独一个文件：原样式全在共享的 studio.css 的 guide 段（深色 #08080A），
   直接改会牵连其它页。本文件锁 html[data-fs-page="guide"]，只在 guide.php 引入。

   ⭐ 回滚：删掉 guide.php 里 studio-guide.css 那一行即可。
   ══════════════════════════════════════════════════════════════════════════ */

html[data-fs-page="guide"] {
  --gd-bg:      #F3F1EB;
  --gd-surface: #FFFFFF;
  --gd-tx:      #22272B;
  --gd-tx-2:    #454B50;
  --gd-tx-3:    #686F75;
  --gd-gold:    #7A5A1F;   /* 浅底小字金（5.62:1） */
  --gd-gold-hi: #B18A42;   /* 香槟金：识别色/描边/线条 */
  --gd-gold-line: #D8C49B; /* 浅金分隔线 */
  --gd-line:    #E7E5DF;
  --gd-line-2:  #EDEAE3;
  --gd-dark:    #22272B;
  --gd-r: 5px;
  --gd-pad: clamp(18px, 2.2vw, 26px);
}

/* ── 1. 页面底色与基础文字 ── */
html[data-fs-page="guide"] body { background: var(--gd-bg) !important; color: var(--gd-tx-2) !important; }
html[data-fs-page="guide"] main { background: var(--gd-bg) !important; }
html[data-fs-page="guide"] .section {
  background: var(--gd-bg) !important;
  border-top: 1px solid var(--gd-line-2);
}
html[data-fs-page="guide"] .fs-gd-hero { background: var(--gd-bg) !important; border-top: 0; }

html[data-fs-page="guide"] .fs-gd-h1,
html[data-fs-page="guide"] .fs-gd-h2 {
  color: var(--gd-tx) !important;
  -webkit-text-fill-color: var(--gd-tx) !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}
html[data-fs-page="guide"] .fs-gd-sub,
html[data-fs-page="guide"] .fs-gd-lead,
html[data-fs-page="guide"] .fs-gd-head-sub,
html[data-fs-page="guide"] main p { color: var(--gd-tx-2) !important; }
html[data-fs-page="guide"] main li { color: var(--gd-tx-2) !important; }

/* eyebrow / 章节标记 → 深金 + 金短线 */
html[data-fs-page="guide"] .section-eyebrow,
html[data-fs-page="guide"] .fs-sechen {
  color: var(--gd-gold) !important;
}
html[data-fs-page="guide"] .section-eyebrow::before,
html[data-fs-page="guide"] .fs-sechen::before {
  background: var(--gd-gold-hi) !important;
  opacity: .9;
}

/* ── 2. 返回链接 ── */
html[data-fs-page="guide"] .fs-gd-back {
  color: var(--gd-tx-3) !important;
  border: 1px solid var(--gd-line) !important;
  background: #FFFFFF !important;
  border-radius: var(--gd-r);
}
html[data-fs-page="guide"] .fs-gd-back:hover {
  color: var(--gd-gold) !important;
  border-color: rgba(177,138,66,.55) !important;
}

/* ── 3. 首屏 ── */
html[data-fs-page="guide"] .fs-gd-hero-visual { opacity: .95; }
html[data-fs-page="guide"] .fs-gd-hero-note { color: var(--gd-tx-3) !important; }
html[data-fs-page="guide"] .fs-gd-hero-list li { color: var(--gd-tx-2) !important; }
html[data-fs-page="guide"] .fs-gd-hero-list li::before { background: var(--gd-gold-hi) !important; }

/* 主按钮：金实心 + 深字 */
html[data-fs-page="guide"] .btn-primary,
html[data-fs-page="guide"] .fs-gd-hero-actions .btn-primary {
  background: #B18A42 !important;
  border: 1px solid #B18A42 !important;
  color: #22272B !important;
  font-weight: 600;
}
html[data-fs-page="guide"] .btn-primary:hover {
  background: #C29A50 !important;
  border-color: #C29A50 !important;
  color: #1B1F23 !important;
}
/* 次按钮：金描边 + 深金文字 */
html[data-fs-page="guide"] .btn-outline,
html[data-fs-page="guide"] .fs-gd-hero-actions .btn-outline {
  background: #FFFFFF !important;
  border: 1px solid rgba(177,138,66,.62) !important;
  color: var(--gd-gold) !important;
  font-weight: 600;
}
html[data-fs-page="guide"] .btn-outline:hover {
  background: rgba(177,138,66,.08) !important;
  border-color: var(--gd-gold-hi) !important;
  color: #6B4E18 !important;
}

/* ── 4. 卡片类：统一白底 + 顶部金线 ── */
html[data-fs-page="guide"] .fs-gd-startcard,
html[data-fs-page="guide"] .fs-gd-action,
html[data-fs-page="guide"] .fs-gd-acc-item,
html[data-fs-page="guide"] .fs-gd-callout,
html[data-fs-page="guide"] .fs-gd-warnbox {
  background: var(--gd-surface) !important;
  background-image: none !important;
  border: 1px solid var(--gd-line) !important;
  border-radius: var(--gd-r) !important;
  box-shadow: none !important;
}
html[data-fs-page="guide"] .fs-gd-startcard {
  border-top: 2px solid var(--gd-gold-hi) !important;
  padding: var(--gd-pad);
}
html[data-fs-page="guide"] .fs-gd-action {
  border-top: 2px solid var(--gd-gold-hi) !important;
}
html[data-fs-page="guide"] .fs-gd-acc-item {
  border-top: 1px solid var(--gd-gold-line) !important;
}
html[data-fs-page="guide"] .fs-gd-acc-item:first-child { border-top: 2px solid var(--gd-gold-hi) !important; }

/* 卡片内文字 */
html[data-fs-page="guide"] .fs-gd-startcard-t,
html[data-fs-page="guide"] .fs-gd-action-t,
html[data-fs-page="guide"] .fs-gd-callout-t,
html[data-fs-page="guide"] .fs-gd-warnbox-t,
html[data-fs-page="guide"] .fs-gd-acc-t { color: var(--gd-tx) !important; }
html[data-fs-page="guide"] .fs-gd-startcard-l li,
html[data-fs-page="guide"] .fs-gd-action-d,
html[data-fs-page="guide"] .fs-gd-callout-p,
html[data-fs-page="guide"] .fs-gd-acc-body,
html[data-fs-page="guide"] .fs-gd-warnbox-list li { color: var(--gd-tx-2) !important; }

/* 序号 / 图标 → 金色 */
html[data-fs-page="guide"] .fs-gd-startcard-no {
  color: var(--gd-gold) !important;
  font-family: var(--font-mono, monospace);
  font-weight: 600;
}
html[data-fs-page="guide"] .fs-gd-startcard-ico { color: var(--gd-gold-hi) !important; }

/* ── 5. 时间轴（标准流程）── */
html[data-fs-page="guide"] .fs-gd-timeline::before { background: var(--gd-gold-line) !important; }
html[data-fs-page="guide"] .fs-gd-tl-dot {
  background: var(--gd-bg) !important;
  border: 2px solid var(--gd-gold-hi) !important;
}
html[data-fs-page="guide"] .fs-gd-tl-t { color: var(--gd-tx) !important; }
html[data-fs-page="guide"] .fs-gd-tl-d { color: var(--gd-tx-2) !important; }

/* ── 6. Tab（调音模式）── */
html[data-fs-page="guide"] .fs-gd-tabbar {
  background: #FFFFFF !important;
  border: 1px solid var(--gd-line) !important;
  border-radius: var(--gd-r) !important;
}
html[data-fs-page="guide"] .fs-gd-tab,
html[data-fs-page="guide"] .fs-gd-tab-t,
html[data-fs-page="guide"] .fs-gd-tab-s { color: var(--gd-tx-2) !important; }
html[data-fs-page="guide"] .fs-gd-tabinput:checked + .fs-gd-tabbar .fs-gd-tab,
html[data-fs-page="guide"] .fs-gd-tabinput:checked ~ .fs-gd-tabbar .fs-gd-tab {
  color: var(--gd-tx) !important;
}
/* 选中项：金色下边线 */
html[data-fs-page="guide"] .fs-gd-tabs {
  border-bottom: 1px solid var(--gd-line) !important;
}

/* ── 7. 表格 ── */
html[data-fs-page="guide"] .fs-gd-tablewrap {
  background: #FFFFFF !important;
  border: 1px solid var(--gd-line) !important;
  border-top: 2px solid var(--gd-gold-hi) !important;
  border-radius: var(--gd-r) !important;
  box-shadow: none !important;
}
html[data-fs-page="guide"] .fs-gd-table { color: var(--gd-tx-2) !important; }
html[data-fs-page="guide"] .fs-gd-table th {
  color: var(--gd-gold) !important;
  background: #FBFAF6 !important;
  border-bottom: 1px solid var(--gd-gold-line) !important;
}
html[data-fs-page="guide"] .fs-gd-table td {
  color: var(--gd-tx-2) !important;
  border-top: 1px solid var(--gd-line-2) !important;
}

/* ── 8. 折叠（参数参考 / 注意事项）── */
html[data-fs-page="guide"] .fs-gd-acc-sum { color: var(--gd-tx) !important; }
html[data-fs-page="guide"] .fs-gd-acc-ico { color: var(--gd-gold) !important; }
html[data-fs-page="guide"] .fs-gd-acc-item[open] {
  background: #FBFAF6 !important;
  box-shadow: inset 3px 0 0 var(--gd-gold-hi);
}

/* ── 9. callout 键值 ── */
html[data-fs-page="guide"] .fs-gd-callout-k { color: var(--gd-gold) !important; }
html[data-fs-page="guide"] .fs-gd-callout-v { color: var(--gd-tx) !important; }
html[data-fs-page="guide"] .fs-gd-bandchips span,
html[data-fs-page="guide"] .fs-gd-bandchips li {
  color: var(--gd-tx-2) !important;
  background: #F4F2EC !important;
  border: 1px solid var(--gd-line) !important;
  border-radius: 3px;
}

/* ── 10. 警示块：保留暖色语义，不用红块 ── */
html[data-fs-page="guide"] .fs-gd-warnbox {
  border-left: 3px solid var(--gd-gold-hi) !important;
  background: #FBF8F1 !important;
}
html[data-fs-page="guide"] .fs-gd-warnbox-ico { color: var(--gd-gold-hi) !important; }

/* ── 11. 底部导航 ── */
html[data-fs-page="guide"] .fs-gd-endnav {
  background: #FFFFFF !important;
  border: 1px solid var(--gd-line) !important;
  border-radius: var(--gd-r) !important;
}
html[data-fs-page="guide"] .fs-gd-endbtn {
  color: var(--gd-gold) !important;
  border: 1px solid rgba(177,138,66,.55) !important;
  border-radius: var(--gd-r);
  background: transparent !important;
}
html[data-fs-page="guide"] .fs-gd-endbtn:hover {
  background: rgba(177,138,66,.08) !important;
  border-color: var(--gd-gold-hi) !important;
}
html[data-fs-page="guide"] .fs-gd-foot-line { background: var(--gd-gold-line) !important; }

/* ── 12. 焦点可见 ── */
html[data-fs-page="guide"] a:focus-visible,
html[data-fs-page="guide"] button:focus-visible,
html[data-fs-page="guide"] summary:focus-visible {
  outline: 2px solid var(--gd-gold-hi);
  outline-offset: 3px;
}

/* ── 13. 响应式 ── */
@media (max-width: 900px) {
  html[data-fs-page="guide"] .fs-gd-startcard { padding: 16px 18px; }
}

/* ═══ 修正 1：加粗字在暖白上不可见 ═══
   <strong>无需安装客户端</strong> 继承了深色版的浅色，落白底几乎消失。 */
html[data-fs-page="guide"] main strong,
html[data-fs-page="guide"] main b,
html[data-fs-page="guide"] .fs-gd-lead strong,
html[data-fs-page="guide"] .fs-gd-hero-copy strong {
  color: #22272B !important;
  font-weight: 600;
}

/* ═══ 修正 2：Hero 装饰里的光晕与白网格在浅底上显脏 ═══
   原 SVG 用 <ellipse fill="url(#gdGlow)"> 做深底光晕，
   用 stroke="rgba(255,255,255,.06)" 画网格 —— 浅底上分别变成一块米斑和脏线。
   光晕直接去掉；网格改成浅金色发丝线，保留"技术感"但不抢内容。 */
html[data-fs-page="guide"] .fs-gd-hero-visual svg ellipse,
html[data-fs-page="guide"] .fs-gd-hero-visual svg [fill^="url("] { display: none !important; }
html[data-fs-page="guide"] .fs-gd-hero-visual svg g[stroke^="rgba(255,255,255"],
html[data-fs-page="guide"] .fs-gd-hero-visual svg g[stroke^="rgba(255, 255, 255"] {
  stroke: #D8C49B !important;
  opacity: .55;
}
/* 波形端点：深色填充在浅底上太重，改成白底金边 */
html[data-fs-page="guide"] .fs-gd-hero-visual svg circle {
  fill: #FFFFFF !important;
  stroke: #B18A42 !important;
  stroke-width: 2 !important;
}
/* 小设备图标：保留深色块（对比锚点），只把描边转金 */
html[data-fs-page="guide"] .fs-gd-hero-visual svg rect {
  fill: #22272B !important;
  stroke: rgba(177,138,66,.55) !important;
}

/* ═══ 修正 3：章节标题左侧竖条（原为灰色）═══ */
html[data-fs-page="guide"] .fs-gd-head {
  position: relative;
  padding-left: 14px;
}
html[data-fs-page="guide"] .fs-gd-head::before {
  content: "";
  position: absolute; left: 0; top: .35em;
  width: 3px; height: 1.1em;
  background: #B18A42;
  border-radius: 2px;
}
html[data-fs-page="guide"] .fs-gd-head-sub { color: #686F75 !important; }

/* ═══ 对比度收口（实测 20 处）═══
   两类：① 时间轴序号（浅金圆底 + 浅字）② 预设卡片（深色卡片上的浅字） */

/* ① 时间轴序号：白底金环 + 深金数字 */
html[data-fs-page="guide"] .fs-gd-tl-dot {
  background: #FFFFFF !important;
  border: 2px solid #B18A42 !important;
  color: #7A5A1F !important;
  font-weight: 600;
}

/* ② 预设卡片：白底 + 深字，曲线保留金色 */
html[data-fs-page="guide"] .fs-gd-preset {
  background: #FFFFFF !important;
  background-image: none !important;
  border: 1px solid #E7E5DF !important;
  border-top: 2px solid #B18A42 !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  transform: none !important;
  transition: border-color .16s ease;
}
html[data-fs-page="guide"] .fs-gd-preset:hover {
  transform: none !important;
  border-color: rgba(177,138,66,.55) !important;
  border-top-color: #C9A45C !important;
}
html[data-fs-page="guide"] .fs-gd-preset-t { color: #22272B !important; }
html[data-fs-page="guide"] .fs-gd-preset-d { color: #454B50 !important; }

/* ③ 其余兜底：暖白区所有小字 */
html[data-fs-page="guide"] .fs-gd-callout-k,
html[data-fs-page="guide"] .fs-gd-callout-v,
html[data-fs-page="guide"] .fs-gd-tl-t,
html[data-fs-page="guide"] .fs-gd-tl-d,
html[data-fs-page="guide"] .fs-gd-acc-body p,
html[data-fs-page="guide"] .fs-gd-acc-body li { color: #454B50 !important; }
html[data-fs-page="guide"] .fs-gd-callout-k { color: #7A5A1F !important; }

/* ═══ 最后两处 ═══ */
html[data-fs-page="guide"] .fs-gd-warnbox-ico { color: #7A5A1F !important; }
html[data-fs-page="guide"] .fs-powered,
html[data-fs-page="guide"] .fs-powered strong,
html[data-fs-page="guide"] .fs-powered-sep,
html[data-fs-page="guide"] .fs-powered a { color: #686F75 !important; opacity: 1 !important; }
/* 警示图标「!」：仍被源规则压住（实测 2.97:1），用最深金 + 提权收口 */
html[data-fs-page="guide"] .fs-gd-warnbox .fs-gd-warnbox-ico,
html[data-fs-page="guide"] .fs-gd-warnbox-head .fs-gd-warnbox-ico,
html[data-fs-page="guide"] .fs-gd-warnbox-ico { color: #5E4415 !important; }
/* 图标底色是浅金块，需更深一档才能到 4.5 */
html[data-fs-page="guide"] .fs-gd-warnbox-ico { color: #3F2E0C !important; }

/* ── P2-6 警示图标对比度：实测 4.25:1（要求 4.5）──
   前两次尝试未生效，说明该元素有更高权重或不是纯文本。
   这次同时压 color / -webkit-text-fill-color，并给足权重。 */
html[data-fs-page="guide"] .fs-gd-warnbox .fs-gd-warnbox-head .fs-gd-warnbox-ico,
html[data-fs-page="guide"] .fs-gd-warnbox .fs-gd-warnbox-head span.fs-gd-warnbox-ico,
html[data-fs-page="guide"] .fs-gd-warnbox-ico[class] {
  color: #3F2E0C !important;
  -webkit-text-fill-color: #3F2E0C !important;
  text-shadow: none !important;
}