/* ══════════════════════════════════════════════════════════════════════════
   HAIRUNWEI Audio Studio · 支持中心专用样式（2026-10-24）
   ──────────────────────────────────────────────────────────────────────────
   方向：暖白内容区 + 石墨黑当前设备卡 + 香槟金细节。
   为什么单独一个文件：studio.css / studio-tokens.css 是三页共享的深色体系，
   直接改会同时影响首页与设备中心。本文件全部锁 html[data-fs-page="support"]，
   只在 support.php 引入。

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

html[data-fs-page="support"] {
  --sp-bg:      #F3F1EB;
  --sp-surface: #FFFFFF;
  --sp-tx:      #22272B;
  --sp-tx-2:    #454B50;
  --sp-tx-3:    #686F75;
  --sp-gold:    #96742F;
  --sp-gold-hi: #B18A42;
  --sp-line:    #E7E5DF;
  --sp-line-2:  #EDEAE3;
  --sp-dark:    #22272B;
  --sp-dark-2:  #2B3035;
  --sp-dark-tx:   #F5F5F2;
  --sp-dark-tx-2: #D0D4D6;
  --sp-dark-tx-3: #B5BBC0;
  --sp-r: 5px;
  --sp-pad: clamp(18px, 2.2vw, 26px);
}

/* ─────────────────────────────────────────────────────────────
   1. 页面与区块：暖白底
   ⚠ 冲突源：studio-tokens.css 的
     html[data-fs-page] .section:not(.fs-home-hero):not(.fs-dc-hero):not(.fs-sc-hero)
   三个 :not() 把权重抬到 (0,5,1)，实测把 support 的 section 压成 rgb(13,16,19)。
   这里用同权重（后加载）恢复暖白 —— 不使用 !important。
   ───────────────────────────────────────────────────────────── */
html[data-fs-page="support"] body { background: var(--sp-bg); color: var(--sp-tx-2); }
html[data-fs-page="support"] main { background: var(--sp-bg); }

html[data-fs-page="support"] .section:not(.fs-home-hero):not(.fs-dc-hero):not(.fs-sc-hero) {
  background: var(--sp-bg);
}
html[data-fs-page="support"] .fs-sc-hero { background: var(--sp-bg); }

/* 区块之间只留一条极淡分隔 */
html[data-fs-page="support"] .section + .section { border-top: 1px solid var(--sp-line-2); }

/* ─────────────────────────────────────────────────────────────
   2. 标题区
   ⚠ 冲突源：studio-tokens.css 给 .fs-sc-h1 设了
     color: transparent + background: linear-gradient(...)
   （用 background-clip:text 做渐变字）。暖白底上会变成「浅底浅金字」，
   实测 computed color 为 rgba(0,0,0,0)。这里改回实色并取消渐变。
   ───────────────────────────────────────────────────────────── */
html[data-fs-page="support"] .fs-sc-h1 {
  color: var(--sp-tx) !important;
  -webkit-text-fill-color: var(--sp-tx) !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  letter-spacing: -.02em;
}
html[data-fs-page="support"] .fs-sc-lead,
html[data-fs-page="support"] .fs-sc-hero-copy p { color: var(--sp-tx-2) !important; }
html[data-fs-page="support"] .section-eyebrow,
html[data-fs-page="support"] .fs-sechen { color: var(--sp-gold) !important; }

/* 首屏波形：纯装饰，降权，不抢内容 */
html[data-fs-page="support"] .fs-sc-hero-visual { opacity: .28; }

/* ─────────────────────────────────────────────────────────────
   3. 当前设备卡：石墨黑（全页唯一深色块，与设备中心呼应）
   ───────────────────────────────────────────────────────────── */
html[data-fs-page="support"] .fs-sc-devcard {
  background: var(--sp-dark);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--sp-r);
  box-shadow: none;
  padding: var(--sp-pad);
  transition: none;
}
/* 深色卡内文字三档 */
html[data-fs-page="support"] .fs-sc-devcard .fs-sc-devcard-head .section-title,
html[data-fs-page="support"] .fs-sc-devcard h2 { color: var(--sp-dark-tx) !important; }
html[data-fs-page="support"] .fs-sc-devcard .fs-sc-devcard-kvitem dt { color: var(--sp-dark-tx-3) !important; }
html[data-fs-page="support"] .fs-sc-devcard [data-fs-kv="model"],
html[data-fs-page="support"] .fs-sc-devcard [data-fs-kv="audio"] {
  color: var(--sp-dark-tx-2) !important;
}
html[data-fs-page="support"] .fs-sc-devcard [data-fs-kv="model"].is-muted,
html[data-fs-page="support"] .fs-sc-devcard [data-fs-kv="audio"].is-muted { color: var(--sp-dark-tx-3) !important; }
html[data-fs-page="support"] .fs-sc-devcard .fs-conn-hint { color: var(--sp-dark-tx-2) !important; }
html[data-fs-page="support"] .fs-sc-devcard .fs-sc-status-note { color: var(--sp-dark-tx-3) !important; }

/* 状态徽章：文字 + 圆点 + 颜色 */
html[data-fs-page="support"] .fs-sc-devcard .fs-conn-state {
  color: var(--sp-dark-tx-3) !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
}
html[data-fs-page="support"] .fs-sc-devcard .fs-conn-state.is-checking {
  color: #E0C68B !important; border-color: rgba(224,198,139,.42) !important;
  background: rgba(224,198,139,.10) !important;
}
html[data-fs-page="support"] .fs-sc-devcard .fs-conn-state.is-found {
  color: #7FC79A !important; border-color: rgba(127,199,154,.42) !important;
  background: rgba(127,199,154,.10) !important;
}
html[data-fs-page="support"] .fs-sc-devcard .fs-conn-state.is-unsupported {
  color: #E8B4A6 !important; border-color: rgba(232,180,166,.38) !important;
  background: rgba(232,180,166,.09) !important;
}

/* 卡内按钮 */
html[data-fs-page="support"] .fs-sc-devcard .btn-outline {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  color: var(--sp-dark-tx) !important;
}
html[data-fs-page="support"] .fs-sc-devcard .btn-outline:hover {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.44) !important;
  color: #FFFFFF !important;
}

/* 重复提示去重：unsupported 时 .fs-conn-hint 与 .fs-sc-status-note 文案相同
   （两条都由 studio.js 写入，实测完全一致）→ 只保留主提示，
   note 仅在 none 状态显示它的授权引导，避免两行同义句。 */
html[data-fs-page="support"] .fs-sc-status:has(.fs-conn-state.is-unsupported) .fs-sc-status-note {
  display: none;
}
html[data-fs-page="support"] .fs-sc-status:has(.fs-conn-state.is-found) .fs-sc-status-note {
  display: none;
}
html[data-fs-page="support"] .fs-sc-status:has(.fs-conn-state.is-checking) .fs-sc-status-note {
  display: none;
}

/* ─────────────────────────────────────────────────────────────
   4. 快速支持：三张白卡
   ⚠ 原 hover 带 translateY(-3px) + 新增阴影（studio.css），
     三卡并排时单独上浮会跳动。这里锁定位移，只留边框变化。
   ───────────────────────────────────────────────────────────── */
html[data-fs-page="support"] .fs-sc-qcard {
  background: var(--sp-surface) !important;
  background-image: none !important;
  border: 1px solid var(--sp-line) !important;
  border-radius: var(--sp-r);
  box-shadow: none;
  padding: clamp(18px, 2vw, 24px);
  transition: border-color .16s ease;
}
html[data-fs-page="support"] .fs-sc-qcard:hover,
html[data-fs-page="support"] .fs-sc-qcard:focus-visible {
  transform: none !important;
  box-shadow: none !important;
  border-color: rgba(150,116,47,.45) !important;
  background: var(--sp-surface) !important;
}
html[data-fs-page="support"] .fs-sc-qcard-no {
  color: var(--sp-gold) !important;
  font-family: var(--font-mono, monospace);
}
html[data-fs-page="support"] .fs-sc-qcard-title { color: var(--sp-tx) !important; }
html[data-fs-page="support"] .fs-sc-qcard-d { color: var(--sp-tx-3) !important; }

/* ─────────────────────────────────────────────────────────────
   5. FAQ：整合到一个白容器，行间细线，不再每条套框
   ───────────────────────────────────────────────────────────── */
html[data-fs-page="support"] .fs-sc-faq {
  background: var(--sp-surface);
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-r);
  padding: 0 var(--sp-pad);
  gap: 0;
  display: block;
}
html[data-fs-page="support"] .fs-sc-faq-col { display: block; }
html[data-fs-page="support"] .fs-sc-faq-item {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--sp-line-2) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: none !important;
}
html[data-fs-page="support"] .fs-sc-faq-col:first-child .fs-sc-faq-item:first-child { border-top: 0 !important; }
html[data-fs-page="support"] .fs-sc-faq-q {
  padding: 16px 0;
  color: var(--sp-tx) !important;
  cursor: pointer;
}
html[data-fs-page="support"] .fs-sc-faq-t { color: var(--sp-tx) !important; }
html[data-fs-page="support"] .fs-sc-faq-no { color: var(--sp-gold) !important; }
html[data-fs-page="support"] .fs-sc-faq-item[open] .fs-sc-faq-q { color: var(--sp-tx) !important; }
/* 展开反馈：只用极轻底色，不换深色、不反转文字 */
html[data-fs-page="support"] .fs-sc-faq-item[open] { background: #FBFAF6 !important; }
html[data-fs-page="support"] .fs-sc-faq-a {
  color: var(--sp-tx-2) !important;
  padding: 0 0 16px;
  line-height: 1.85;
}
html[data-fs-page="support"] .fs-sc-faq-item:hover .fs-sc-faq-q { color: var(--sp-tx) !important; }
html[data-fs-page="support"] .fs-sc-faq-q:focus-visible {
  outline: 2px solid var(--sp-gold);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ─────────────────────────────────────────────────────────────
   6. App 下载：单一白容器，左文右码
   ───────────────────────────────────────────────────────────── */
html[data-fs-page="support"] .fs-sc-app {
  background: var(--sp-surface) !important;
  background-image: none !important;
  border: 1px solid var(--sp-line) !important;
  border-radius: var(--sp-r);
  box-shadow: none;
  padding: var(--sp-pad);
}
html[data-fs-page="support"] .fs-sc-app-t { color: var(--sp-tx) !important; }
html[data-fs-page="support"] .fs-sc-app-d { color: var(--sp-tx-2) !important; }
html[data-fs-page="support"] .fs-sc-app .btn-outline {
  border-color: rgba(34,39,43,.22) !important;
  color: var(--sp-tx) !important;
}
html[data-fs-page="support"] .fs-sc-app .btn-outline:hover {
  border-color: var(--sp-gold) !important;
  color: var(--sp-gold) !important;
  background: rgba(150,116,47,.05) !important;
}
html[data-fs-page="support"] .fs-sc-app-qr {
  background: #FFFFFF;
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-r);
  padding: 10px;
}
html[data-fs-page="support"] .fs-sc-app-qrn { color: var(--sp-tx-3) !important; }

/* ─────────────────────────────────────────────────────────────
   7. 仍然需要帮助：淡暖金块
   ───────────────────────────────────────────────────────────── */
html[data-fs-page="support"] .fs-sc-help {
  background: rgba(150,116,47,.045);
  border: 1px solid rgba(150,116,47,.16);
  border-radius: var(--sp-r);
  padding: var(--sp-pad);
}
html[data-fs-page="support"] .fs-sc-help-t { color: var(--sp-tx) !important; }
html[data-fs-page="support"] .fs-sc-help p { color: var(--sp-tx-2) !important; }
html[data-fs-page="support"] .fs-sc-help a { color: var(--sp-gold) !important; }
html[data-fs-page="support"] .fs-sc-help a:hover { color: #7A5A1F !important; }

/* ─────────────────────────────────────────────────────────────
   8. 其余文字兜底（深色体系遗留的浅灰在暖白上不可读）
   ───────────────────────────────────────────────────────────── */
html[data-fs-page="support"] main h2,
html[data-fs-page="support"] main h3,
html[data-fs-page="support"] .section-title { color: var(--sp-tx) !important; }
html[data-fs-page="support"] main p { color: var(--sp-tx-2); }
html[data-fs-page="support"] .fs-powered,
html[data-fs-page="support"] .fs-powered strong,
html[data-fs-page="support"] .fs-powered-sep,
html[data-fs-page="support"] .fs-open-title,
html[data-fs-page="support"] .fs-open-desc { color: var(--sp-tx-3) !important; }
html[data-fs-page="support"] .fs-open-title { color: var(--sp-tx) !important; }

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

/* ─────────────────────────────────────────────────────────────
   9. 响应式
   ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  html[data-fs-page="support"] .fs-sc-faq { padding: 0 16px; }
  html[data-fs-page="support"] .fs-sc-qcard { padding: 16px 18px; }
  html[data-fs-page="support"] .fs-sc-app { padding: 18px; }
}
@media (max-width: 560px) {
  html[data-fs-page="support"] .fs-sc-faq-q { padding: 14px 0; }
  html[data-fs-page="support"] .fs-sc-devcard { padding: 16px; }
}

/* ═══ 修正：H2 也是「透明文字 + 渐变背景」═══
   实测 .fs-sc-h2「常见问题」等标题：color 已是 #22272B，
   但 -webkit-text-fill-color 仍是 transparent，且 background-image 是浅色渐变
   → 视觉上依旧是「浅底浅金字」。必须同时清掉 fill 与渐变。 */
html[data-fs-page="support"] main h2,
html[data-fs-page="support"] .section-title,
html[data-fs-page="support"] .fs-sc-h2 {
  color: #22272B !important;
  -webkit-text-fill-color: #22272B !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}
/* 面板内标题（App / 帮助）保持同级深色 */
html[data-fs-page="support"] .fs-sc-app-t,
html[data-fs-page="support"] .fs-sc-help-t,
html[data-fs-page="support"] .fs-sc-devcard h2 {
  color: #22272B !important;
  -webkit-text-fill-color: #22272B !important;
  background: none !important;
}

/* 卡片边线略加深（#E7E5DF 在暖白上过淡，几乎看不出卡片） */
html[data-fs-page="support"] .fs-sc-qcard,
html[data-fs-page="support"] .fs-sc-app,
html[data-fs-page="support"] .fs-sc-faq {
  border-color: #E0DCD2 !important;
}

/* 设备卡内部收紧：去掉「音频能力」与按钮之间的大段空白 */
html[data-fs-page="support"] .fs-sc-devcard-kv { margin: 14px 0 0 !important; }
html[data-fs-page="support"] .fs-sc-devcard-kvitem dd { margin: 4px 0 0 !important; }
html[data-fs-page="support"] .fs-sc-devcard .fs-conn-hint { margin: 10px 0 0 !important; }
html[data-fs-page="support"] .fs-sc-status-note { margin: 6px 0 0 !important; }
html[data-fs-page="support"] .fs-sc-devcard-actions { margin-top: 16px !important; }

/* ═══ 修正：深色卡内的 h2 必须是浅色 ═══
   上一条把 .fs-sc-devcard h2 设成 #22272B，结果「当前设备」在石墨黑卡上完全看不见。
   深卡内标题一律 #F5F5F2。 */
html[data-fs-page="support"] .fs-sc-devcard h2,
html[data-fs-page="support"] .fs-sc-devcard .fs-sc-devcard-head h2,
html[data-fs-page="support"] .fs-sc-devcard .section-title {
  color: #F5F5F2 !important;
  -webkit-text-fill-color: #F5F5F2 !important;
  background: none !important;
}

/* 收紧设备卡内部空白（CURRENT DEVICE 到状态徽章之间约 80px 空档） */
html[data-fs-page="support"] .fs-sc-devcard-head { margin-bottom: 10px !important; padding-bottom: 10px !important; }
html[data-fs-page="support"] .fs-sc-devcard-head .section-title,
html[data-fs-page="support"] .fs-sc-devcard-head h2 { margin: 0 !important; }
html[data-fs-page="support"] .fs-sc-devcard-body { padding-top: 0 !important; }
html[data-fs-page="support"] .fs-sc-devcard-top { margin-bottom: 10px !important; gap: 8px !important; }

/* ═══ 对比度收口（实测 37 处 <4.5:1）═══
   主因：品牌金 #96742F 在 #F3F1EB 上只有 3.84:1，而它被用在了
   11px 的 eyebrow / 序号 / 标签上 —— 小字必须至少 4.5:1。
   处理：文字类金色统一降到 #7A5A1F（5.62:1）；#96742F 只保留给
   大字号数值与装饰边线。 */
html[data-fs-page="support"] .section-eyebrow,
html[data-fs-page="support"] .fs-sechen,
html[data-fs-page="support"] .fs-sc-qcard-no,
html[data-fs-page="support"] .fs-sc-faq-no,
html[data-fs-page="support"] .fs-sc-devcard .fs-sc-devcard-h,
html[data-fs-page="support"] .fs-sc-devcard .fs-sc-devcard-head .fs-sechen {
  color: #7A5A1F !important;
}

/* 卡片描述与标签 */
html[data-fs-page="support"] .fs-sc-qcard-desc,
html[data-fs-page="support"] .fs-sc-qcard-d { color: #5F666C !important; }
html[data-fs-page="support"] .fs-sc-qcard-tag {
  color: #454B50 !important;
  background: #F4F2EC !important;
  border: 1px solid #E3DFD6 !important;
  border-radius: 3px;
}
html[data-fs-page="support"] .fs-sc-qcard-title { color: #22272B !important; }

/* 深卡内的 eyebrow 用浅色（深底上 #7A5A1F 会太暗） */
html[data-fs-page="support"] .fs-sc-devcard .fs-sechen,
html[data-fs-page="support"] .fs-sc-devcard .section-eyebrow {
  color: #B5BBC0 !important;
}

/* 其他残留浅灰 */
html[data-fs-page="support"] .fs-sc-faq .fs-sc-faq-d,
html[data-fs-page="support"] .fs-sc-app .fs-sc-app-d,
html[data-fs-page="support"] .fs-sc-help .fs-sc-help-d { color: #5F666C !important; }
html[data-fs-page="support"] .fs-sc-qr-note,
html[data-fs-page="support"] .fs-sc-app-qrn { color: #686F75 !important; }

/* ═══ 对比度收口 2：暖白区所有正文统一 #454B50，箭头用深金 ═══
   （深卡内的 p 单独保持 #D0D4D6，见下条） */
html[data-fs-page="support"] main p,
html[data-fs-page="support"] main li,
html[data-fs-page="support"] main dd,
html[data-fs-page="support"] main dt { color: #454B50; }
html[data-fs-page="support"] .fs-sc-qcard-arrow { color: #7A5A1F !important; }
html[data-fs-page="support"] .fs-sc-app-note,
html[data-fs-page="support"] .fs-sc-app ul { color: #454B50 !important; }

/* 深卡内文字必须回到浅色（覆盖上一条 main p） */
html[data-fs-page="support"] .fs-sc-devcard p,
html[data-fs-page="support"] .fs-sc-devcard li,
html[data-fs-page="support"] .fs-sc-devcard dd,
html[data-fs-page="support"] .fs-sc-devcard dt { color: #D0D4D6 !important; }
html[data-fs-page="support"] .fs-sc-devcard .fs-conn-hint { color: #D0D4D6 !important; }
html[data-fs-page="support"] .fs-sc-devcard .fs-sc-status-note { color: #B5BBC0 !important; }

/* ═══ 对比度收口 3（最后两条，覆盖前面的金色与小字规则）═══ */
/* ① 深卡内 eyebrow 必须是浅色：前一条 #7A5A1F 写在后面会压住 #B5BBC0，
      这里用更高权重（.fs-sc-devcard .fs-sc-devcard-head 双类）收口。 */
html[data-fs-page="support"] .fs-sc-devcard .fs-sc-devcard-head .fs-sechen,
html[data-fs-page="support"] .fs-sc-devcard .fs-sc-devcard-head .section-eyebrow {
  color: #B5BBC0 !important;
  -webkit-text-fill-color: #B5BBC0 !important;
}

/* ② 暖白区段落/列表全量兜底（studio.css 里这些元素继承了深色体系的浅灰） */
html[data-fs-page="support"] main .container p,
html[data-fs-page="support"] main .container li,
html[data-fs-page="support"] main .container dd,
html[data-fs-page="support"] main .container dt,
html[data-fs-page="support"] main .section p,
html[data-fs-page="support"] main .section li {
  color: #454B50 !important;
}
/* 深卡覆盖回来 */
html[data-fs-page="support"] .fs-sc-devcard p,
html[data-fs-page="support"] .fs-sc-devcard li,
html[data-fs-page="support"] .fs-sc-devcard dd,
html[data-fs-page="support"] .fs-sc-devcard dt { color: #D0D4D6 !important; }
/* 辅助说明稍浅一档，仍 ≥4.5:1 */
html[data-fs-page="support"] .fs-sc-app p,
html[data-fs-page="support"] .fs-sc-help p { color: #454B50 !important; }

/* ═══ 最后一处：暖白区描边按钮文字（实测 3.67:1）═══
   原为金色文字压浅底。改为深色文字 + 金边，保持"次要操作"观感。 */
html[data-fs-page="support"] main .btn-outline,
html[data-fs-page="support"] main .btn-outline span {
  color: #22272B !important;
}
html[data-fs-page="support"] main .btn-outline:hover,
html[data-fs-page="support"] main .btn-outline:hover span {
  color: #7A5A1F !important;
}
/* 深卡内按钮回到浅色 */
html[data-fs-page="support"] .fs-sc-devcard .btn-outline,
html[data-fs-page="support"] .fs-sc-devcard .btn-outline span {
  color: #F5F5F2 !important;
}

/* ═══ 设备卡内留白压缩（实测 CURRENT DEVICE 到状态徽章间约 50-80px）═══
   空白来自 .fs-sc-devcard-head 的 padding/margin 与 .fs-sc-devcard-body 的 padding-top。 */
html[data-fs-page="support"] .fs-sc-devcard .fs-sc-devcard-head {
  padding: 0 0 12px !important;
  margin: 0 0 12px !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}
html[data-fs-page="support"] .fs-sc-devcard .fs-sc-devcard-head .fs-sechen,
html[data-fs-page="support"] .fs-sc-devcard .fs-sc-devcard-head .section-eyebrow {
  display: block;
  margin: 0 0 4px !important;
  line-height: 1.2;
}
html[data-fs-page="support"] .fs-sc-devcard .fs-sc-devcard-head h2,
html[data-fs-page="support"] .fs-sc-devcard .fs-sc-devcard-head .section-title {
  margin: 0 !important; line-height: 1.3;
}
html[data-fs-page="support"] .fs-sc-devcard .fs-sc-devcard-body { padding: 0 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   二轮精修（2026-10-24）· 波形 / 三卡 / 设备卡 / FAQ / 下载 / 帮助
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ① Hero 装饰：精密音频波形线 ── */
html[data-fs-page="support"] .fs-sc-hero-visual {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  opacity: 1;                    /* 上一版整体降到 .28，这里改为逐笔控制透明度 */
  pointer-events: none;
}
html[data-fs-page="support"] .fs-sc-wave {
  width: 100%;
  max-width: 520px;
  height: auto;                  /* 等比缩放，不拉伸 */
  overflow: visible;
}
html[data-fs-page="support"] .fs-sc-wave-path {
  stroke: #B18A42;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .62;
  vector-effect: non-scaling-stroke;   /* 缩放时线宽不变，保持"精密"感 */
}
html[data-fs-page="support"] .fs-sc-wave-trace {
  stroke: #B18A42;
  stroke-width: 1.1;
  stroke-linecap: square;
  stroke-linejoin: miter;
  opacity: .34;                  /* 走线比主曲线再弱一档 */
  vector-effect: non-scaling-stroke;
}
html[data-fs-page="support"] .fs-sc-wave-dot {
  fill: #B18A42;
  opacity: .55;
}

/* ── ② 快速支持：三列等宽、等高、按钮贴底 ── */
html[data-fs-page="support"] .fs-sc-quick {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
  width: 100%;
}
html[data-fs-page="support"] .fs-sc-qcard {
  display: flex;
  flex-direction: column;
  min-height: 168px;            /* 统一高度，内容少也不塌 */
  height: 100%;
}
html[data-fs-page="support"] .fs-sc-qcard-tag {
  margin-top: auto;             /* 标签/按钮统一贴底 */
}

/* ── ③ 当前设备卡：减少重复横线 ── */
/* 只保留 head 下一条分隔线；kv 区与 hint 之间不再画线 */
html[data-fs-page="support"] .fs-sc-devcard .fs-sc-devcard-kv { border-top: 0 !important; }
html[data-fs-page="support"] .fs-sc-devcard .fs-sc-devcard-kvitem { border-bottom: 0 !important; }
html[data-fs-page="support"] .fs-sc-devcard .fs-conn-hint { border-top: 0 !important; }
html[data-fs-page="support"] .fs-sc-devcard hr { display: none !important; }

/* ── ④ FAQ：加号视觉状态 ── */
html[data-fs-page="support"] .fs-sc-faq-q { display: flex; align-items: center; gap: 12px; }
html[data-fs-page="support"] .fs-sc-faq-ic {
  position: relative;
  width: 14px; height: 14px;
  margin-left: auto;
  flex: 0 0 auto;
}
html[data-fs-page="support"] .fs-sc-faq-ic::before,
html[data-fs-page="support"] .fs-sc-faq-ic::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: #686F75;
  transition: transform .18s ease, background .18s ease;
}
html[data-fs-page="support"] .fs-sc-faq-ic::before {      /* 横线 */
  width: 12px; height: 1px; transform: translate(-50%, -50%);
}
html[data-fs-page="support"] .fs-sc-faq-ic::after {       /* 竖线 */
  width: 1px; height: 12px; transform: translate(-50%, -50%);
}
html[data-fs-page="support"] .fs-sc-faq-item[open] .fs-sc-faq-ic::after {
  transform: translate(-50%, -50%) rotate(90deg);         /* 展开 → 竖线收平变减号 */
  background: #96742F;
}
html[data-fs-page="support"] .fs-sc-faq-item[open] .fs-sc-faq-ic::before { background: #96742F; }

/* ── ⑤ 下载卡：减轻二维码外框阴影 ── */
html[data-fs-page="support"] .fs-sc-app-qr {
  box-shadow: none !important;
  border: 1px solid #E7E5DF !important;
  background: #FFFFFF !important;
}
html[data-fs-page="support"] .fs-sc-app-qr img { box-shadow: none !important; }
html[data-fs-page="support"] .fs-sc-app { box-shadow: none !important; }

/* ── ⑥ 底部帮助区：加强层次（不加渐变） ── */
html[data-fs-page="support"] .fs-sc-help {
  background: #FAF8F3 !important;
  border: 1px solid #E7E5DF !important;
}
html[data-fs-page="support"] .fs-sc-help-t { font-size: clamp(18px, 1.6vw, 21px); }
html[data-fs-page="support"] .fs-sc-help .btn,
html[data-fs-page="support"] .fs-sc-help a.btn {
  background: #B18A42 !important;
  border: 1px solid #B18A42 !important;
  color: #22272B !important;
  font-weight: 600;
}
html[data-fs-page="support"] .fs-sc-help .btn:hover,
html[data-fs-page="support"] .fs-sc-help a.btn:hover {
  background: #C29A50 !important;
  border-color: #C29A50 !important;
  color: #1B1F23 !important;
}

/* ── ⑦ 响应式 ── */
@media (max-width: 900px) {
  html[data-fs-page="support"] .fs-sc-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-fs-page="support"] .fs-sc-qcard { min-height: 0; }
  html[data-fs-page="support"] .fs-sc-hero-visual { max-width: 320px; }
}
@media (max-width: 560px) {
  html[data-fs-page="support"] .fs-sc-quick { grid-template-columns: minmax(0, 1fr); }
  html[data-fs-page="support"] .fs-sc-hero-visual { display: none; }   /* 手机端隐藏，避免遮挡标题 */
}

/* ═══ 修正：三卡等高（320px 下出现 168/193/193 不齐）═══
   原因：只给了 min-height，内容多的卡仍会撑高。改用 grid-auto-rows:1fr，
   同一行内所有卡片强制等高；min-height 只作下限。 */
html[data-fs-page="support"] .fs-sc-quick {
  grid-auto-rows: 1fr;
  align-items: stretch;
}
html[data-fs-page="support"] .fs-sc-qcard { height: 100%; }

/* ═══ 修正：FAQ 加号展开态（上一版未生效）═══
   原规则只作用于 ::after 的 transform，但伪元素基线 translate 与 rotate
   写在同一 transform 里时被前一条覆盖。改为分别声明并提高权重。 */
html[data-fs-page="support"] .fs-sc-faq-item[open] > .fs-sc-faq-q .fs-sc-faq-ic::after {
  transform: translate(-50%, -50%) rotate(90deg) !important;
  background: #96742F !important;
}
html[data-fs-page="support"] .fs-sc-faq-item[open] > .fs-sc-faq-q .fs-sc-faq-ic::before {
  background: #96742F !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   三轮 · 黑金识别度校正（2026-10-24）
   ──────────────────────────────────────────────────────────────────────────
   问题：上一版暖白占比过高，金色只剩小字与细描边，品牌识别度掉了。
   原则：金色是「识别色」，不是「文字色」——
        · 需要 4.5:1 的文字仍用深金 #7A5A1F 或更深的正文色；
        · 「金感」由**色块、细线、描边、短标记**承担（这些是装饰，3:1 即可）。
   这样既不会满屏金字，也不会只有白灰。
   ══════════════════════════════════════════════════════════════════════════ */

html[data-fs-page="support"] {
  --sp-gold-line: #D8C49B;   /* 低饱和浅金：分隔线 */
  --sp-gold-strong: #B18A42; /* 香槟金：主强调 */
}

/* ── ① Hero 波形：提高到可见强度 ── */
html[data-fs-page="support"] .fs-sc-wave-path {
  stroke: #C9A45C;          /* 比 #B18A42 更亮一档 */
  stroke-width: 1.6;
  opacity: .95;
}
html[data-fs-page="support"] .fs-sc-wave-trace {
  stroke: #B18A42;
  stroke-width: 1.2;
  opacity: .62;
}
html[data-fs-page="support"] .fs-sc-wave-dot {
  fill: #D8C49B;
  opacity: .95;
}

/* ── ② 当前设备深色面板：金色点缀，绿色状态语义保留 ── */
html[data-fs-page="support"] .fs-sc-devcard .fs-sc-devcard-head .fs-sechen,
html[data-fs-page="support"] .fs-sc-devcard .fs-sc-devcard-head .section-eyebrow {
  color: #B18A42 !important;          /* 深底上 5.2:1，金色可读 */
  -webkit-text-fill-color: #B18A42 !important;
  letter-spacing: .20em;
}
html[data-fs-page="support"] .fs-sc-devcard .fs-sc-devcard-head {
  border-bottom: 1px solid rgba(177,138,66,.30) !important;
}
html[data-fs-page="support"] .fs-sc-devcard .fs-sc-devcard-kvitem dt {
  color: #B18A42 !important;          /* 「音频能力」等小标签转金 */
}
html[data-fs-page="support"] .fs-sc-devcard .btn,
html[data-fs-page="support"] .fs-sc-devcard .btn-outline {
  border: 1px solid rgba(177,138,66,.55) !important;
  color: #E8D6AE !important;          /* 浅金文字，深底可读 */
  background: rgba(177,138,66,.06) !important;
}
html[data-fs-page="support"] .fs-sc-devcard .btn:hover,
html[data-fs-page="support"] .fs-sc-devcard .btn-outline:hover {
  border-color: #C9A45C !important;
  color: #F5E9CB !important;
  background: rgba(177,138,66,.12) !important;
}
/* 状态色保持语义：绿=已连接，金=检测中，灰=未连接，暖红=不支持 */
html[data-fs-page="support"] .fs-sc-devcard .fs-conn-state.is-found {
  color: #7FC79A !important; border-color: rgba(127,199,154,.42) !important;
  background: rgba(127,199,154,.10) !important;
}

/* ── ③ 快速支持三卡：顶部金色细线 + 金编号 + 金按钮描边（默认态即见）── */
html[data-fs-page="support"] .fs-sc-qcard {
  border-top: 2px solid #B18A42 !important;
  border-left: 1px solid #E0DCD2 !important;
  border-right: 1px solid #E0DCD2 !important;
  border-bottom: 1px solid #E0DCD2 !important;
}
html[data-fs-page="support"] .fs-sc-qcard:hover {
  border-top-color: #C9A45C !important;
  border-left-color: rgba(177,138,66,.42) !important;
  border-right-color: rgba(177,138,66,.42) !important;
  border-bottom-color: rgba(177,138,66,.42) !important;
}
html[data-fs-page="support"] .fs-sc-qcard-no {
  display: inline-block;
  color: #7A5A1F !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .10em;
  padding-bottom: 6px;
  border-bottom: 1px solid #D8C49B;
  margin-bottom: 6px;
}
html[data-fs-page="support"] .fs-sc-qcard-arrow { color: #96742F !important; }
html[data-fs-page="support"] .fs-sc-qcard .btn,
html[data-fs-page="support"] .fs-sc-qcard .btn-outline {
  border: 1px solid rgba(177,138,66,.62) !important;
  color: #22272B !important;
  background: rgba(177,138,66,.05) !important;
}
html[data-fs-page="support"] .fs-sc-qcard:hover .btn,
html[data-fs-page="support"] .fs-sc-qcard:hover .btn-outline {
  border-color: #B18A42 !important;
  background: rgba(177,138,66,.10) !important;
  color: #1B1F23 !important;
}

/* ── ④ FAQ：浅金分隔线 + 深金编号 + 展开窄金条 ── */
html[data-fs-page="support"] .fs-sc-faq {
  border-top: 2px solid #B18A42 !important;
}
html[data-fs-page="support"] .fs-sc-faq-item {
  border-top: 1px solid #D8C49B !important;
}
html[data-fs-page="support"] .fs-sc-faq-no {
  color: #7A5A1F !important;
  font-weight: 600;
  letter-spacing: .06em;
}
html[data-fs-page="support"] .fs-sc-faq-item[open] {
  background: #FBFAF6 !important;
  box-shadow: inset 3px 0 0 #B18A42;      /* 展开时左侧窄金条，强化层级 */
}
html[data-fs-page="support"] .fs-sc-faq-item[open] .fs-sc-faq-no { color: #96742F !important; }

/* ── ⑤ 下载区：香槟金描边按钮（二维码不动） ── */
html[data-fs-page="support"] .fs-sc-app { border-top: 2px solid #B18A42 !important; }
html[data-fs-page="support"] .fs-sc-app .btn,
html[data-fs-page="support"] .fs-sc-app .btn-outline {
  border: 1px solid #B18A42 !important;
  color: #96742F !important;
  background: rgba(177,138,66,.05) !important;
  font-weight: 600;
}
html[data-fs-page="support"] .fs-sc-app .btn:hover,
html[data-fs-page="support"] .fs-sc-app .btn-outline:hover {
  background: rgba(177,138,66,.12) !important;
  border-color: #C9A45C !important;
  color: #7A5A1F !important;
}
html[data-fs-page="support"] .fs-sc-app-qr { border-color: #D8C49B !important; }

/* ── ⑥ 底部帮助区：金边框 + 金短线 + 金按钮 ── */
html[data-fs-page="support"] .fs-sc-help {
  border: 1px solid rgba(177,138,66,.34) !important;
  background: #FBF8F1 !important;
}
html[data-fs-page="support"] .fs-sc-help-t {
  position: relative;
  padding-left: 14px;
}
html[data-fs-page="support"] .fs-sc-help-t::before {
  content: "";
  position: absolute; left: 0; top: .28em;
  width: 3px; height: 1em;
  background: #B18A42;
  border-radius: 2px;
}
html[data-fs-page="support"] .fs-sc-help .btn,
html[data-fs-page="support"] .fs-sc-help a.btn {
  background: #B18A42 !important;
  border: 1px solid #B18A42 !important;
  color: #22272B !important;
  font-weight: 600;
}
html[data-fs-page="support"] .fs-sc-help .btn:hover,
html[data-fs-page="support"] .fs-sc-help a.btn:hover {
  background: #C29A50 !important;
  border-color: #C29A50 !important;
  color: #1B1F23 !important;
}

/* ── ⑦ 区块 eyebrow 统一为金色（浅底用深金保可读）── */
html[data-fs-page="support"] section > .container > .section-eyebrow,
html[data-fs-page="support"] .fs-sc-hero .section-eyebrow {
  color: #7A5A1F !important;
}
html[data-fs-page="support"] .fs-sc-hero .section-eyebrow::before,
html[data-fs-page="support"] .section-eyebrow::before {
  background: #B18A42;
  opacity: .9;
}

/* ═══ 金色文字对比度收口（实测 4 处 4.14~4.34:1）═══
   #96742F 在暖瓷白上只有 3.84~4.34，达不到 4.5。
   这两类都是小字（14/16px），按规范降到 #7A5A1F（5.62:1）——
   视觉仍是同一支金，只是深半档；金色块/描边/线条不受影响。 */
html[data-fs-page="support"] .fs-sc-qcard-arrow { color: #7A5A1F !important; }
html[data-fs-page="support"] .fs-sc-app .btn,
html[data-fs-page="support"] .fs-sc-app .btn-outline { color: #7A5A1F !important; }
html[data-fs-page="support"] .fs-sc-app .btn:hover,
html[data-fs-page="support"] .fs-sc-app .btn-outline:hover { color: #6B4E18 !important; }
/* FAQ 展开态编号同样收口 */
html[data-fs-page="support"] .fs-sc-faq-item[open] .fs-sc-faq-no { color: #7A5A1F !important; }

/* ══════════════════════════════════════════════════════════════════════════
   P0 修复同步到支持中心（2026-10-24）· 只改 CSS，不动 PHP / JS
   ══════════════════════════════════════════════════════════════════════════ */

/* P0-2 型号区补说明（「—」保留在 DOM，屏幕阅读器可读） */
html[data-fs-page="support"] .fs-sc-devcard [data-fs-kv="model"].is-muted::after {
  content: "未检测到设备";
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  color: #B5BBC0;
  margin-left: 12px;
  vertical-align: middle;
}
html[data-fs-page="support"] .fs-sc-devcard [data-fs-kv="model"].is-muted {
  font-size: 20px !important;
  font-weight: 400 !important;
  color: #8A9199 !important;
}

/* P0-3 压缩深色卡内留白：当前设备 → 状态徽章 */
html[data-fs-page="support"] .fs-sc-devcard .fs-sc-devcard-head {
  padding: 0 0 8px !important;
  margin: 0 0 10px !important;
}
html[data-fs-page="support"] .fs-sc-devcard .fs-sc-devcard-top {
  margin-bottom: 8px !important;
  gap: 8px !important;
}
html[data-fs-page="support"] .fs-sc-devcard .fs-conn-state { margin-bottom: 0 !important; }

/* 音频能力只有一个「—」时补说明 */
html[data-fs-page="support"] .fs-sc-devcard [data-fs-kv="audio"].is-muted::after {
  content: "未检测到设备";
  font-size: 12.5px;
  color: #B5BBC0;
  margin-left: 8px;
}

/* ── P0-3 补充：音频能力 → 提示之间仍有一段空 ── */
html[data-fs-page="support"] .fs-sc-devcard .fs-sc-devcard-kv { margin: 12px 0 0 !important; }
html[data-fs-page="support"] .fs-sc-devcard .fs-sc-devcard-kvitem dd { margin: 2px 0 0 !important; }
html[data-fs-page="support"] .fs-sc-devcard .fs-conn-hint { margin: 10px 0 0 !important; }
html[data-fs-page="support"] .fs-sc-devcard .fs-sc-devcard-actions { margin-top: 14px !important; }