/* ══════════════════════════════════════════════════════════════════════════
   HAIRUNWEI Audio Studio · 设备中心专用样式（2026-10-24）
   ──────────────────────────────────────────────────────────────────────────
   为什么单独一个文件：studio.css / studio-tokens.css 是三页共用的深色体系，
   直接改会影响支持中心与指南页。本文件全部锁 html[data-fs-page="devices"]，
   只在 devices.php 引入。
   ⭐ 回滚：删掉 devices.php 里 studio-devices.css 那一行即可。
   ══════════════════════════════════════════════════════════════════════════ */

html[data-fs-page="devices"] {
  --dv-bg:      #F3F1EB;
  --dv-surface: #FFFFFF;
  --dv-tx:      #22272B;
  --dv-tx-2:    #454B50;
  --dv-tx-3:    #686F75;
  --dv-gold:    #96742F;
  --dv-line:    #E3DFD6;
  --dv-line-2:  #EDEAE3;
  --dv-ok:      #2E7D48;   /* 已连接 */
  --dv-warn:    #96742F;   /* 检测中 */
  --dv-err:     #B4453A;   /* 浏览器不支持 */
  --dv-idle:    #686F75;   /* 未连接 */
  --dv-r:       4px;
  --dv-pad:     clamp(18px, 2.2vw, 26px);
}

html[data-fs-page="devices"] body { background: var(--dv-bg); color: var(--dv-tx-2); }
html[data-fs-page="devices"] main { background: var(--dv-bg); }
html[data-fs-page="devices"] .section,
html[data-fs-page="devices"] .fs-dc-hero,
html[data-fs-page="devices"] .fs-dc-sec {
  background: var(--dv-bg);
  border-top: 0;
}
html[data-fs-page="devices"] .fs-dc-sec + .fs-dc-sec { border-top: 1px solid var(--dv-line-2); }

/* ── 标题区 ───────────────────────────────────────────── */
html[data-fs-page="devices"] .fs-dc-h1 {
  color: var(--dv-tx);
  background: none;
  -webkit-text-fill-color: var(--dv-tx);
  letter-spacing: -.02em;
}
html[data-fs-page="devices"] .fs-dc-sub { color: var(--dv-tx-3); }
html[data-fs-page="devices"] .fs-sechen { color: #7A5A1F; }
html[data-fs-page="devices"] .fs-dc-h2 { color: var(--dv-tx); }

/* ── 状态主卡 ─────────────────────────────────────────── */
html[data-fs-page="devices"] .fs-dc-dev {
  background: var(--dv-surface);
  border: 1px solid var(--dv-line);
  border-radius: var(--dv-r);
  box-shadow: none;
  padding: var(--dv-pad);
  display: block;
}
html[data-fs-page="devices"] .fs-dc-dev-main { display: flex; flex-direction: column; gap: 0; }

html[data-fs-page="devices"] .fs-dc-dev-h {
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: 10px; letter-spacing: .18em;
  color: var(--dv-tx-3);
  margin-bottom: 12px;
}

/* 状态徽章：文字 + 圆点 + 颜色 三重表达 */
html[data-fs-page="devices"] .fs-conn-state {
  display: inline-flex; align-items: center; gap: 7px;
  align-self: flex-start;
  padding: 5px 11px;
  font-size: 12px; line-height: 1;
  border-radius: 999px;
  border: 1px solid currentColor;
  color: var(--dv-idle);
  background: rgba(104,111,117,.07);
  margin-bottom: 14px;
}
html[data-fs-page="devices"] .fs-conn-state.is-checking { color: var(--dv-warn); background: rgba(150,116,47,.08); }
html[data-fs-page="devices"] .fs-conn-state.is-found    { color: var(--dv-ok);   background: rgba(46,125,72,.08); }
html[data-fs-page="devices"] .fs-conn-state.is-unsupported { color: var(--dv-err); background: rgba(180,69,58,.07); }
html[data-fs-page="devices"] .fs-conn-state .fs-status-dot { width: 6px; height: 6px; }

/* 型号 */
html[data-fs-page="devices"] .fs-conn-main,
html[data-fs-page="devices"] [data-fs-kv="model"] {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--dv-tx) !important;
}
html[data-fs-page="devices"] .fs-kv-v.is-muted,
html[data-fs-page="devices"] .fs-conn-main.is-muted { color: var(--dv-tx-3) !important; }
html[data-fs-page="devices"] .fs-conn-minor { color: var(--dv-tx-3); font-size: 13px; margin-top: 4px; }

/* 提示（只保留这一处） */
html[data-fs-page="devices"] .fs-conn-hint {
  margin: 12px 0 0;
  font-size: 13.5px; line-height: 1.75;
  color: var(--dv-tx-2);
  max-width: 62ch;
}

/* KPI 行 */
html[data-fs-page="devices"] .fs-dc-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 20px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--dv-line-2);
}
html[data-fs-page="devices"] .fs-dc-kpis > div {
  padding: 0 18px;
  border-left: 1px solid var(--dv-line-2);
}
html[data-fs-page="devices"] .fs-dc-kpis > div:first-child { padding-left: 0; border-left: 0; }
html[data-fs-page="devices"] .fs-dc-kpis dt {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px; letter-spacing: .06em;
  color: var(--dv-tx-3);
  margin-bottom: 5px;
}
html[data-fs-page="devices"] .fs-dc-kpis dd {
  margin: 0; font-size: 13.5px; color: var(--dv-tx-2);
}
html[data-fs-page="devices"] .fs-dc-kpis dd.is-empty { color: var(--dv-tx-3); }

/* 操作 */
html[data-fs-page="devices"] .fs-dc-dev-actions {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-top: 20px;
}
html[data-fs-page="devices"] .fs-dc-dev-actions .btn { border-radius: 3px; }
html[data-fs-page="devices"] .fs-dc-dev-actions .btn-primary {
  background: #B18A42; border-color: #B18A42; color: var(--dv-tx); font-weight: 600;
}
html[data-fs-page="devices"] .fs-dc-dev-actions .btn-primary:hover { background: #C29A50; border-color: #C29A50; }
html[data-fs-page="devices"] .fs-dc-dev-actions .btn-outline {
  border-color: rgba(34,39,43,.24); color: var(--dv-tx);
}
html[data-fs-page="devices"] .fs-dc-dev-actions .btn-outline:hover {
  border-color: var(--dv-gold); color: #7A5A1F; background: rgba(150,116,47,.05);
}
/* 未连接时：主按钮降级为「描边次要」外观（深色卡上），路由与点击行为不变。
   ⚠ 上一版这里写成白底 + !important，把金色主按钮盖成白底灰字 —— 已纠正。
   ⚠ 权重必须与旧规则同级（:has 会计入特异性），否则压不住。 */
html[data-fs-page="devices"] .fs-dc-dev:has(.fs-conn-state.is-none) .fs-dc-dev-actions .fs-cta,
html[data-fs-page="devices"] .fs-dc-dev:has(.fs-conn-state.is-unsupported) .fs-dc-dev-actions .fs-cta {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.30) !important;
  color: #F5F5F2 !important;
  font-weight: 500;
}
html[data-fs-page="devices"] .fs-dc-dev-actions .fs-cta-hint {
  flex: 1 1 100%;
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--dv-tx-3);
}
html[data-fs-page="devices"] .fs-dc-dev:has(.fs-conn-state.is-found) .fs-dc-dev-actions .fs-cta-hint {
  display: none;   /* 已连接时无需"需先连接设备" */
}

/* ── 音频规格 ─────────────────────────────────────────── */
html[data-fs-page="devices"] .fs-dc-head { margin-bottom: 18px; }
html[data-fs-page="devices"] .fs-dc-head-note { color: var(--dv-tx-3); font-size: 13px; }

html[data-fs-page="devices"] .fs-dc-spec {
  background: var(--dv-surface);
  border: 1px solid var(--dv-line);
  border-radius: var(--dv-r);
  padding: var(--dv-pad);
}
html[data-fs-page="devices"] .fs-dc-spec-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
html[data-fs-page="devices"] .fs-dc-spec-cell {
  padding: 0 20px;
  border-left: 1px solid var(--dv-line-2);
}
html[data-fs-page="devices"] .fs-dc-spec-cell:first-child { padding-left: 0; border-left: 0; }
html[data-fs-page="devices"] .fs-dc-spec-cell dt {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px; letter-spacing: .06em;
  color: var(--dv-tx-3); margin-bottom: 6px;
}
html[data-fs-page="devices"] .fs-dc-spec-cell dd {
  margin: 0;
  font-family: var(--font-mono, monospace);
  font-size: 20px; font-weight: 500; line-height: 1.2;
  color: var(--dv-gold);
}
html[data-fs-page="devices"] .fs-dc-spec-cell dd.is-muted { color: var(--dv-tx-3); font-size: 16px; }

html[data-fs-page="devices"] .fs-dc-spec-raw {
  margin-top: 18px;
  border-top: 1px solid var(--dv-line-2);
  padding-top: 14px;
}
html[data-fs-page="devices"] .fs-dc-spec-raw summary {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--dv-tx-3);
  list-style: none;
}
html[data-fs-page="devices"] .fs-dc-spec-raw summary::-webkit-details-marker { display: none; }
html[data-fs-page="devices"] .fs-dc-spec-raw summary::before { content: "▸ "; }
html[data-fs-page="devices"] .fs-dc-spec-raw[open] summary::before { content: "▾ "; }
html[data-fs-page="devices"] .fs-dc-spec-raw p {
  margin: 10px 0 0;
  font-size: 13px; line-height: 1.8;
  color: var(--dv-tx-2);
}

html[data-fs-page="devices"] .fs-dc-meta {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0; margin: 16px 0 0; padding: 14px 0 0;
  border-top: 1px solid var(--dv-line-2);
}
html[data-fs-page="devices"] .fs-dc-meta > div { padding: 0 20px; border-left: 1px solid var(--dv-line-2); }
html[data-fs-page="devices"] .fs-dc-meta > div:first-child { padding-left: 0; border-left: 0; }
html[data-fs-page="devices"] .fs-dc-meta dt {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px; color: var(--dv-tx-3); margin-bottom: 5px;
}
html[data-fs-page="devices"] .fs-dc-meta dd { margin: 0; font-size: 13.5px; color: var(--dv-tx-2); }

/* ── 能力区 ───────────────────────────────────────────── */
html[data-fs-page="devices"] .fs-dc-caps-hint {
  margin: 0;
  padding: var(--dv-pad);
  background: var(--dv-surface);
  border: 1px dashed var(--dv-line);
  border-radius: var(--dv-r);
  font-size: 13.5px; line-height: 1.8;
  color: var(--dv-tx-3);
  text-align: center;
}
html[data-fs-page="devices"] .fs-dc-caps:has(.fs-cap-group .fs-device-conn-v.is-on) + .fs-dc-caps-hint,
html[data-fs-page="devices"] .fs-dc-caps-hint:has(+ .fs-dc-caps) { }
html[data-fs-page="devices"] .fs-dc-caps:has(.fs-device-conn-v.is-on) { display: block; }

html[data-fs-page="devices"] .fs-cap-group {
  background: var(--dv-surface);
  border: 1px solid var(--dv-line);
  border-radius: var(--dv-r);
  padding: var(--dv-pad);
}
html[data-fs-page="devices"] .fs-device-conn {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--dv-line-2);
}
html[data-fs-page="devices"] .fs-device-conn-k {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px; letter-spacing: .08em;
  color: var(--dv-tx-3);
}
html[data-fs-page="devices"] .fs-device-conn-v {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--dv-idle);
}
html[data-fs-page="devices"] .fs-device-conn-v.is-on { color: var(--dv-ok); }

html[data-fs-page="devices"] .fs-dc-cap-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: 16px;
}
html[data-fs-page="devices"] .fs-dc-cap-col { padding: 0 22px; border-left: 1px solid var(--dv-line-2); }
html[data-fs-page="devices"] .fs-dc-cap-col:first-child { padding-left: 0; border-left: 0; }
html[data-fs-page="devices"] .fs-dc-cap-h {
  margin: 0 0 12px;
  font-size: 13px; font-weight: 600;
  color: var(--dv-tx);
  letter-spacing: .01em;
}
html[data-fs-page="devices"] .fs-dc-cap-list {
  display: flex; flex-direction: column; gap: 12px;
  margin: 0; padding: 0; list-style: none;
}
html[data-fs-page="devices"] .fs-dc-cap { display: flex; flex-direction: column; gap: 4px; }
html[data-fs-page="devices"] .fs-dc-cap-t {
  font-size: 13.5px; font-weight: 600; color: var(--dv-tx);
}
html[data-fs-page="devices"] .fs-dc-cap-d {
  font-size: 12.5px; line-height: 1.7; color: var(--dv-tx-3);
}
html[data-fs-page="devices"] .fs-dc-caps-empty { color: var(--dv-tx-3); font-size: 13px; }

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

/* ── 响应式 ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  html[data-fs-page="devices"] .fs-dc-spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  html[data-fs-page="devices"] .fs-dc-spec-cell:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 860px) {
  html[data-fs-page="devices"] .fs-dc-kpis { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  html[data-fs-page="devices"] .fs-dc-kpis > div { padding: 0; border-left: 0; }
  html[data-fs-page="devices"] .fs-dc-cap-cols { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  html[data-fs-page="devices"] .fs-dc-cap-col { padding: 0; border-left: 0; }
  html[data-fs-page="devices"] .fs-dc-meta { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  html[data-fs-page="devices"] .fs-dc-meta > div { padding: 0; border-left: 0; }
}
@media (max-width: 560px) {
  html[data-fs-page="devices"] .fs-dc-spec-grid { grid-template-columns: minmax(0, 1fr); }
  html[data-fs-page="devices"] .fs-dc-spec-cell { padding: 0; border-left: 0; }
  html[data-fs-page="devices"] .fs-dc-dev-actions .btn { flex: 1 1 auto; text-align: center; }
}

/* ═══ 能力区未连接空态（不能留高度 0 的空容器）═══
   原因：studio.css 把每个 .fs-cap-group 设 display:none，只在
        .fs-cap-group:has(.fs-device-conn-v.is-on) 时显示。
        未连接 → 所有组隐藏 → .fs-dc-caps 高度为 0，只剩外部一行 hint。
   处理：未连接时给 .fs-dc-caps 一个真实的空态面板（虚线框 + 说明），
        连接后（出现 is-on）自动退出空态样式。
   同时隐藏外部那句 hint，避免两处重复说明。 */
html[data-fs-page="devices"] .fs-dc-caps-hint { display: none; }

html[data-fs-page="devices"] .fs-dc-caps:not(:has(.fs-device-conn-v.is-on)) {
  display: block;
  padding: clamp(24px, 3vw, 34px) var(--dv-pad);
  background: var(--dv-surface);
  border: 1px dashed #DDD9D0;
  border-radius: var(--dv-r);
  min-height: 108px;
}
html[data-fs-page="devices"] .fs-dc-caps:not(:has(.fs-device-conn-v.is-on))::before {
  content: "未检测到已连接设备";
  display: block;
  font-size: 14px; font-weight: 600;
  color: var(--dv-tx-2);
  text-align: center;
  margin-bottom: 6px;
}
html[data-fs-page="devices"] .fs-dc-caps:not(:has(.fs-device-conn-v.is-on))::after {
  content: "连接兼容设备后，这里会显示该设备实际支持的 PEQ 能力与处理功能。";
  display: block;
  font-size: 13px; line-height: 1.8;
  color: var(--dv-tx-3);
  text-align: center;
}

/* ═══ 状态徽章文案与 phase 严格对齐 ═══
   问题：studio.js 给 .fs-conn-state 写入的文案只有三档
        （已连接 / 检测中 / 未连接），但 class 有四种 is-<phase>。
        结果 unsupported 时出现「红色徽章 + 未连接」与下方「浏览器不支持检测」并存 —— 自相矛盾。
   修法：不改 JS，把徽章文字交给 CSS 按 phase 生成，保证徽章与状态描述同源同义。
        （圆点是 <i> 元素，不受 font-size:0 影响） */
html[data-fs-page="devices"] .fs-conn-state {
  font-size: 0;
  letter-spacing: 0;
}
html[data-fs-page="devices"] .fs-conn-state::after {
  content: "未连接";
  font-size: 12px;
}
html[data-fs-page="devices"] .fs-conn-state.is-none::after        { content: "未连接"; }
html[data-fs-page="devices"] .fs-conn-state.is-checking::after    { content: "检测中"; }
html[data-fs-page="devices"] .fs-conn-state.is-found::after       { content: "已连接"; }
html[data-fs-page="devices"] .fs-conn-state.is-unsupported::after { content: "浏览器不支持检测"; }

/* ═══ 修两处 ═══ */

/* ① 区块底色：studio-tokens.css 用
      html[data-fs-page] .section:not(.fs-home-hero):not(.fs-dc-hero):not(.fs-sc-hero)
   三个 :not() 把权重抬到 (0,5,1)，我的普通 .section 选择器压不住 →
   「音频规格」区块仍是深色。这里用同权重（后加载）恢复暖白。 */
html[data-fs-page="devices"] .section:not(.fs-home-hero):not(.fs-dc-hero):not(.fs-sc-hero) {
  background: var(--dv-bg);
}
html[data-fs-page="devices"] .fs-dc-hero { background: var(--dv-bg); }

/* ② 徽章：JS 写入的文字必须真正隐藏，只显示 CSS 按 phase 生成的文案
      （前一次 font-size:0 没有生效，说明有更高权重规则在设字号） */
html[data-fs-page="devices"] .fs-conn-state {
  font-size: 0 !important;
  line-height: 0;
}
html[data-fs-page="devices"] .fs-conn-state::after {
  font-size: 12px;
  line-height: 1.2;
}
html[data-fs-page="devices"] .fs-conn-state.is-none::after        { content: "未连接"; }
html[data-fs-page="devices"] .fs-conn-state.is-checking::after    { content: "检测中"; }
html[data-fs-page="devices"] .fs-conn-state.is-found::after       { content: "已连接"; }
html[data-fs-page="devices"] .fs-conn-state.is-unsupported::after { content: "无法检测"; }

/* ═══ 覆盖 studio.css 遗留的浅灰字（实测 #8A9099 / #7C828B 对比度不足）═══ */
html[data-fs-page="devices"] .fs-dc-hero .fs-dc-sub,
html[data-fs-page="devices"] .fs-dc-sub { color: #686F75 !important; }
html[data-fs-page="devices"] .fs-dc-dev .fs-conn-hint { color: #454B50 !important; }
html[data-fs-page="devices"] .fs-dc-head-sub { color: #686F75 !important; }

/* ═══ 底部区块与 powered：原为深色底上的浅字，暖白上不可读 ═══ */
html[data-fs-page="devices"] .fs-open-title { color: #22272B !important; }
html[data-fs-page="devices"] .fs-open-desc { color: #454B50 !important; }
html[data-fs-page="devices"] .fs-open-dot { background: #96742F !important; }
html[data-fs-page="devices"] .fs-powered,
html[data-fs-page="devices"] .fs-powered strong,
html[data-fs-page="devices"] .fs-powered a,
html[data-fs-page="devices"] .fs-powered-sep { color: #686F75 !important; opacity: 1 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   精修 · 问题 A/D（2026-10-24 最后一轮）
   ──────────────────────────────────────────────────────────────────────────
   ① 主卡恢复深色（上一轮误改成白色，丢了视觉焦点）
   ② 撤销"未连接降级"那条 !important 白底 —— 它把金色主按钮盖成白底灰字，
      这正是"按钮文字突然变白/看不见"的直接原因
   ③ 撤销 font-size:0 + ::after 假文案方案：真实状态文字必须对辅助技术可见
   ══════════════════════════════════════════════════════════════════════════ */

/* 撤销假文案方案：恢复 JS 写入的真实文字 */
html[data-fs-page="devices"] .fs-conn-state {
  font-size: 12px !important;
  line-height: 1.2 !important;
}
html[data-fs-page="devices"] .fs-conn-state::after { content: none !important; }

/* 深色主卡 */
html[data-fs-page="devices"] .fs-dc-dev {
  background: #22272B;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--dv-r);
  box-shadow: none;
  padding: var(--dv-pad);
}
html[data-fs-page="devices"] .fs-dc-dev .fs-dc-dev-h { color: #B5BBC0 !important; }

/* 状态徽章：文字 + 圆点 + 颜色；不再用红色暗示"失败" */
html[data-fs-page="devices"] .fs-dc-dev .fs-conn-state {
  color: #D0D4D6 !important;
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.20) !important;
}
html[data-fs-page="devices"] .fs-dc-dev .fs-conn-state.is-checking {
  color: #E0C68B !important; border-color: rgba(224,198,139,.45) !important;
  background: rgba(224,198,139,.10) !important;
}
html[data-fs-page="devices"] .fs-dc-dev .fs-conn-state.is-found {
  color: #7FC79A !important; border-color: rgba(127,199,154,.45) !important;
  background: rgba(127,199,154,.10) !important;
}
html[data-fs-page="devices"] .fs-dc-dev .fs-conn-state.is-unsupported {
  color: #D0D4D6 !important; border-color: rgba(255,255,255,.20) !important;
  background: rgba(255,255,255,.06) !important;
}

/* 深色卡内文字层级 */
html[data-fs-page="devices"] .fs-dc-dev [data-fs-kv="model"] {
  color: #F5F5F2 !important;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.015em;
}
html[data-fs-page="devices"] .fs-dc-dev [data-fs-kv="model"].is-muted { color: #B5BBC0 !important; }
html[data-fs-page="devices"] .fs-dc-dev .fs-conn-minor { color: #B5BBC0 !important; }
html[data-fs-page="devices"] .fs-dc-dev .fs-conn-hint { color: #D0D4D6 !important; max-width: 62ch; }

html[data-fs-page="devices"] .fs-dc-dev .fs-dc-kpis {
  border-top: 1px solid rgba(255,255,255,.12);
}
html[data-fs-page="devices"] .fs-dc-dev .fs-dc-kpis > div { border-left: 1px solid rgba(255,255,255,.12); }
html[data-fs-page="devices"] .fs-dc-dev .fs-dc-kpis dt { color: #B5BBC0 !important; }
html[data-fs-page="devices"] .fs-dc-dev .fs-dc-kpis dd { color: #D0D4D6 !important; }
html[data-fs-page="devices"] .fs-dc-dev .fs-dc-kpis dd.is-empty { color: #B5BBC0 !important; }
html[data-fs-page="devices"] .fs-dc-dev .fs-cta-hint { color: #B5BBC0 !important; }

/* 深色卡内按钮：金色实心 + 深字（对比 6.4:1），次按钮描边 + 浅字 */
html[data-fs-page="devices"] .fs-dc-dev .btn-primary,
html[data-fs-page="devices"] .fs-dc-dev .fs-cta {
  background: #C9A45C !important;
  border: 1px solid #C9A45C !important;
  color: #1C2126 !important;
  font-weight: 600;
}
html[data-fs-page="devices"] .fs-dc-dev .btn-primary:hover,
html[data-fs-page="devices"] .fs-dc-dev .fs-cta:hover {
  background: #D6B978 !important;
  border-color: #D6B978 !important;
  color: #1C2126 !important;
}
html[data-fs-page="devices"] .fs-dc-dev .btn-outline {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.30) !important;
  color: #F5F5F2 !important;
}
html[data-fs-page="devices"] .fs-dc-dev .btn-outline:hover {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.50) !important;
  color: #FFFFFF !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   精修 · 问题 B/C（2026-10-24）
   ──────────────────────────────────────────────────────────────────────────
   B: 音频规格卡的原文、折叠标题、meta 文字统一按浅色背景定色
   C: 减少"方块拼接感" —— 统一边距/边线，去掉重复阴影与套框，
      让「音频规格 / 原始描述 / 连接方式」读作一块面板，而不是三块
   ══════════════════════════════════════════════════════════════════════════ */

/* 型号字号（被 .fs-kv-v 基础样式压住，这里显式指定） */
html[data-fs-page="devices"] .fs-dc-dev .fs-kv-v[data-fs-kv="model"],
html[data-fs-page="devices"] .fs-dc-dev [data-fs-kv="model"] {
  font-size: clamp(22px, 2.4vw, 30px) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -.015em;
  margin-top: 2px;
}

/* —— B: 浅色卡内文字全部按白底定色 —— */
html[data-fs-page="devices"] .fs-dc-spec { background: #FFFFFF; border: 1px solid var(--dv-line); box-shadow: none; }
html[data-fs-page="devices"] .fs-dc-spec .fs-dc-spec-raw summary {
  color: #686F75 !important;
  font-size: 12.5px;
  padding: 2px 0;
}
html[data-fs-page="devices"] .fs-dc-spec .fs-dc-spec-raw summary:hover { color: #454B50 !important; }
html[data-fs-page="devices"] .fs-dc-spec .fs-dc-spec-raw p,
html[data-fs-page="devices"] .fs-dc-spec .fs-dc-spec-raw span {
  color: #454B50 !important;
}
html[data-fs-page="devices"] .fs-dc-spec .fs-dc-meta dt { color: #686F75 !important; }
html[data-fs-page="devices"] .fs-dc-spec .fs-dc-meta dd { color: #454B50 !important; }
html[data-fs-page="devices"] .fs-dc-spec .fs-dc-spec-cell dt { color: #686F75 !important; }
html[data-fs-page="devices"] .fs-dc-spec .fs-dc-spec-cell dd { color: #96742F !important; }
html[data-fs-page="devices"] .fs-dc-spec .fs-dc-spec-cell dd.is-muted { color: #686F75 !important; }

/* —— C: 减少切割感 —— */
/* 1) 所有面板统一圆角/边线/无阴影 */
html[data-fs-page="devices"] .fs-dc-spec,
html[data-fs-page="devices"] .fs-cap-group {
  border-radius: var(--dv-r);
  box-shadow: none;
  border: 1px solid var(--dv-line);
}
/* 2) 区块之间只留一条极淡分隔，不重复画线 */
html[data-fs-page="devices"] .fs-dc-sec { padding-top: clamp(28px, 4vh, 44px); padding-bottom: clamp(28px, 4vh, 44px); }
html[data-fs-page="devices"] .fs-dc-sec + .fs-dc-sec { border-top: 1px solid var(--dv-line-2); }
/* 3) 区块标题与内容之间统一间距（原来各段不一致） */
html[data-fs-page="devices"] .fs-dc-head { margin-bottom: 16px; gap: 6px; }
/* 4) 音频规格卡内的分隔线只留一条（表格与 meta 之间），去掉多余层次 */
html[data-fs-page="devices"] .fs-dc-spec .fs-dc-spec-raw { border-top: 1px solid var(--dv-line-2); margin-top: 16px; padding-top: 12px; }
html[data-fs-page="devices"] .fs-dc-spec .fs-dc-meta { border-top: 1px solid var(--dv-line-2); margin-top: 12px; padding-top: 12px; }
/* 5) 能力标签不再逐个包框，改用点状标记 */
html[data-fs-page="devices"] .fs-dc-cap { gap: 3px; }
html[data-fs-page="devices"] .fs-dc-cap-t { display: inline-flex; align-items: center; gap: 7px; }
html[data-fs-page="devices"] .fs-dc-cap-t::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: #96742F; flex: 0 0 auto;
}
/* 6) 能力面板内不再给每组额外描边 */
html[data-fs-page="devices"] .fs-dc-cap-col { border-left: 1px solid var(--dv-line-2); }
html[data-fs-page="devices"] .fs-dc-cap-col:first-child { border-left: 0; }
/* 7) details 展开区可读性与焦点 */
html[data-fs-page="devices"] .fs-dc-spec-raw summary:focus-visible {
  outline: 2px solid #96742F; outline-offset: 3px; border-radius: 2px;
}


/* ══════════════════════════════════════════════════════════════════════════
   25. 混合方向定稿：暖白展示区 + 石墨黑设备主卡 + 香槟金细节
   ──────────────────────────────────────────────────────────────────────────
   ── 悬停闪烁根因（实测，本轮必须先解决）──
   studio-tokens.css 有一条共享规则：
     html[data-fs-page] .fs-card:hover, html[data-fs-page] .fs-dc-dev:hover {
       background: linear-gradient(180deg, var(--st-surface-2) 0%, #141920 100%) }
   而 .fs-dc-dev 自身带 `transition: background .18s`（studio.css）。
   hover 瞬间背景从「实色」变成「透明 + 深色渐变」——两种不同的绘制层，
   浏览器无法在实色与渐变之间插值，0.18s 内只能跳变重绘 → 肉眼可见闪烁。
   ⚠ 已排除：studio.js 无 mousemove 监听；设备中心不加载 home-fx/card-fx。
   ⚠ 也不改 tokens（它会同时作用于首页与支持中心）。
   做法：设备中心作用域内把 hover 态的背景也钉死为同一实色，并关闭 background 过渡。
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ① 主卡：石墨黑，hover / active / focus 均保持同一实色 ── */
html[data-fs-page="devices"] .fs-dc-dev,
html[data-fs-page="devices"] .fs-dc-dev:hover,
html[data-fs-page="devices"] .fs-dc-dev:focus,
html[data-fs-page="devices"] .fs-dc-dev:focus-within,
html[data-fs-page="devices"] .fs-dc-dev:active {
  background: #22272B !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  box-shadow: 0 10px 30px -22px rgba(34,39,43,.55) !important;
  border-radius: var(--dv-r);
  transition: none !important;
  display: block;
  padding: clamp(20px, 2.6vw, 30px);
}

/* 主卡内部：左信息 / 右操作 */
html[data-fs-page="devices"] .fs-dc-dev .fs-dc-dev-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(20px, 3vw, 36px);
  align-items: start;
}
html[data-fs-page="devices"] .fs-dc-dev .fs-dc-dev-main > * { grid-column: 1; }
html[data-fs-page="devices"] .fs-dc-dev .fs-dc-dev-main > .fs-dc-dev-actions {
  grid-column: 2; grid-row: 1 / span 6;
  align-self: center; margin-top: 0;
}
html[data-fs-page="devices"] .fs-dc-dev .fs-dc-dev-main > .fs-dc-kpis { grid-column: 1 / -1; }

/* ── ② 主卡内文字：只用浅色三档，禁止暗金 / 深灰 ── */
html[data-fs-page="devices"] .fs-dc-dev .fs-dc-dev-h {
  color: #B5BBC0 !important;
  font-size: 10px; letter-spacing: .18em;
  margin-bottom: 10px;
}
html[data-fs-page="devices"] .fs-dc-dev [data-fs-kv="model"],
html[data-fs-page="devices"] .fs-dc-dev .fs-kv-v[data-fs-kv="model"] {
  color: #F5F5F2 !important;
  font-size: clamp(22px, 2.4vw, 30px) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -.015em;
}
html[data-fs-page="devices"] .fs-dc-dev [data-fs-kv="model"].is-muted { color: #B5BBC0 !important; }
html[data-fs-page="devices"] .fs-dc-dev .fs-conn-minor { color: #B5BBC0 !important; }
html[data-fs-page="devices"] .fs-dc-dev .fs-conn-hint {
  color: #D0D4D6 !important; margin: 10px 0 0; max-width: 62ch;
}

/* ── ③ 状态徽章：真实四态，文字 + 圆点 + 颜色三重表达 ── */
html[data-fs-page="devices"] .fs-dc-dev .fs-conn-state {
  color: #B5BBC0 !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  justify-self: start; align-self: start;
  width: auto; max-width: max-content;
  margin-bottom: 8px;
}
html[data-fs-page="devices"] .fs-dc-dev .fs-conn-state.is-checking {
  color: #E0C68B !important;
  background: rgba(224,198,139,.10) !important;
  border-color: rgba(224,198,139,.42) !important;
}
html[data-fs-page="devices"] .fs-dc-dev .fs-conn-state.is-found {
  color: #7FC79A !important;
  background: rgba(127,199,154,.10) !important;
  border-color: rgba(127,199,154,.42) !important;
}
html[data-fs-page="devices"] .fs-dc-dev .fs-conn-state.is-unsupported {
  color: #E8B4A6 !important;
  background: rgba(232,180,166,.09) !important;
  border-color: rgba(232,180,166,.38) !important;
}

/* ── ④ KPI 行：深底浅字 ── */
html[data-fs-page="devices"] .fs-dc-dev .fs-dc-kpis {
  margin: 16px 0 0; padding: 14px 0 0;
  border-top: 1px solid rgba(255,255,255,.12);
}
html[data-fs-page="devices"] .fs-dc-dev .fs-dc-kpis > div { border-left: 1px solid rgba(255,255,255,.12); }
html[data-fs-page="devices"] .fs-dc-dev .fs-dc-kpis dt { color: #B5BBC0 !important; }
html[data-fs-page="devices"] .fs-dc-dev .fs-dc-kpis dd { color: #D0D4D6 !important; }
html[data-fs-page="devices"] .fs-dc-dev .fs-dc-kpis dd.is-empty { color: #B5BBC0 !important; }
html[data-fs-page="devices"] .fs-dc-dev .fs-cta-hint { color: #B5BBC0 !important; text-align: center; }

/* ── ⑤ 主卡按钮：深底上的金实心 + 深字 / 描边 + 浅字 ── */
html[data-fs-page="devices"] .fs-dc-dev .fs-dc-dev-actions {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  margin: 0; min-width: 172px;
}
html[data-fs-page="devices"] .fs-dc-dev .btn-primary,
html[data-fs-page="devices"] .fs-dc-dev .fs-cta,
html[data-fs-page="devices"] .fs-dc-dev:has(.fs-conn-state.is-none) .fs-dc-dev-actions .fs-cta,
html[data-fs-page="devices"] .fs-dc-dev:has(.fs-conn-state.is-unsupported) .fs-dc-dev-actions .fs-cta {
  background: #C9A45C !important;
  border: 1px solid #C9A45C !important;
  color: #1C2126 !important;
  font-weight: 600;
  justify-content: center;
  box-shadow: none !important;
  transform: none !important;
}
html[data-fs-page="devices"] .fs-dc-dev .btn-primary:hover,
html[data-fs-page="devices"] .fs-dc-dev .fs-cta:hover {
  background: #D6B978 !important; border-color: #D6B978 !important;
  color: #1C2126 !important; box-shadow: none !important; transform: none !important;
}
html[data-fs-page="devices"] .fs-dc-dev .btn-outline {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  color: #F5F5F2 !important;
  justify-content: center;
  box-shadow: none !important;
}
html[data-fs-page="devices"] .fs-dc-dev .btn-outline:hover {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.44) !important;
  color: #FFFFFF !important;
}

/* ── ⑥ 音频规格 / 能力面板：浅色，锁定 hover 背景（同一闪烁源） ── */
html[data-fs-page="devices"] .fs-dc-spec,
html[data-fs-page="devices"] .fs-dc-spec:hover,
html[data-fs-page="devices"] .fs-cap-group,
html[data-fs-page="devices"] .fs-cap-group:hover {
  background: #FFFFFF !important;
  background-image: none !important;
  border: 1px solid #E7E5DF !important;
  border-radius: var(--dv-r);
  box-shadow: none !important;
  transition: none !important;
}

/* ── ⑦ 能力区：低矮石墨黑状态条 + 浅色两栏 ── */
html[data-fs-page="devices"] .fs-dc-caps .fs-device-conn {
  background: #22272B;
  border: 1px solid #2B3035;
  border-radius: var(--dv-r) var(--dv-r) 0 0;
  padding: 10px 16px;
  margin: calc(-1 * var(--dv-pad)) calc(-1 * var(--dv-pad)) 0;
  border-bottom: 0;
}
html[data-fs-page="devices"] .fs-dc-caps .fs-device-conn-k { color: #B5BBC0 !important; }
html[data-fs-page="devices"] .fs-dc-caps .fs-device-conn-v { color: #D0D4D6 !important; }
html[data-fs-page="devices"] .fs-dc-caps .fs-device-conn-v.is-on { color: #7FC79A !important; }
html[data-fs-page="devices"] .fs-dc-caps .fs-dc-cap-cols {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}
html[data-fs-page="devices"] .fs-dc-caps .fs-dc-cap-col { padding: 0 24px; border-left: 1px solid #EDEAE3; }
html[data-fs-page="devices"] .fs-dc-caps .fs-dc-cap-col:first-child { padding-left: 0; border-left: 0; }
html[data-fs-page="devices"] .fs-dc-caps .fs-dc-cap-list { gap: 10px; }

/* ── ⑧ 未连接空态：浅色虚线面板（不塌陷） ── */
html[data-fs-page="devices"] .fs-dc-caps:not(:has(.fs-device-conn-v.is-on)) {
  background: #FFFFFF !important;
  border: 1px dashed #DDD9D0 !important;
}

/* ── ⑨ 响应式 ── */
@media (max-width: 860px) {
  html[data-fs-page="devices"] .fs-dc-dev .fs-dc-dev-main { grid-template-columns: minmax(0, 1fr); }
  html[data-fs-page="devices"] .fs-dc-dev .fs-dc-dev-main > .fs-dc-dev-actions {
    grid-column: 1; grid-row: auto; margin-top: 16px; min-width: 0;
  }
  html[data-fs-page="devices"] .fs-dc-caps .fs-dc-cap-cols { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  html[data-fs-page="devices"] .fs-dc-caps .fs-dc-cap-col { padding: 0; border-left: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   四轮 · 黑金识别度校正（2026-10-24）
   ──────────────────────────────────────────────────────────────────────────
   与支持中心同一套逻辑：金色当「识别色」而不是「文字色」。
     · 深色底（#22272B）上可以用 #B18A42（5.2:1），它本身就够亮；
     · 浅色底（#F3F1EB/#FFFFFF）上的小字降到 #7A5A1F（5.62:1）；
     · 「金感」主要由 2px 顶线、分隔线、描边、短标记承担（装饰 3:1 即可）。
   只改配色，不动布局与结构。
   ══════════════════════════════════════════════════════════════════════════ */

html[data-fs-page="devices"] {
  --dv-gold-line: #D8C49B;
  --dv-gold-strong: #B18A42;
}

/* ── ① 主卡内金色识别点（深底上用亮金）── */
html[data-fs-page="devices"] .fs-dc-dev .fs-dc-dev-h,
html[data-fs-page="devices"] .fs-dc-dev .fs-dc-dev-head .fs-sechen {
  color: #B18A42 !important;
  letter-spacing: .20em;
}
html[data-fs-page="devices"] .fs-dc-dev .fs-dc-kpis dt {
  color: #B18A42 !important;         /* 「连接方式 / 识别状态」标签转金 */
}
html[data-fs-page="devices"] .fs-dc-dev .fs-dc-kpis > div {
  border-left-color: rgba(177,138,66,.26) !important;
}
html[data-fs-page="devices"] .fs-dc-dev .fs-dc-kpis {
  border-top-color: rgba(177,138,66,.26) !important;
}
/* 深卡内次按钮：金描边 + 浅金字 */
html[data-fs-page="devices"] .fs-dc-dev .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="devices"] .fs-dc-dev .btn-outline:hover {
  border-color: #C9A45C !important;
  color: #F5E9CB !important;
  background: rgba(177,138,66,.12) !important;
}

/* ── ② 区块标题：左侧金竖条（现在是个灰条）── */
html[data-fs-page="devices"] .fs-dc-head::before,
html[data-fs-page="devices"] .fs-dc-sec .fs-dc-head::before {
  background: #B18A42 !important;
  width: 3px !important;
  border-radius: 2px;
}
html[data-fs-page="devices"] .fs-dc-head .fs-sechen {
  color: #7A5A1F !important;
}
html[data-fs-page="devices"] .fs-dc-head .fs-sechen::before {
  background: #B18A42 !important;
  opacity: .9;
}

/* ── ③ 音频规格卡：顶部 2px 金线 + 分隔线转浅金 ── */
html[data-fs-page="devices"] .fs-dc-spec {
  border-top: 2px solid #B18A42 !important;
}
html[data-fs-page="devices"] .fs-dc-spec .fs-dc-spec-cell {
  border-left-color: #D8C49B !important;
}
html[data-fs-page="devices"] .fs-dc-spec .fs-dc-spec-raw {
  border-top-color: #D8C49B !important;
}
html[data-fs-page="devices"] .fs-dc-spec .fs-dc-meta {
  border-top-color: #D8C49B !important;
}
html[data-fs-page="devices"] .fs-dc-spec .fs-dc-meta > div {
  border-left-color: #D8C49B !important;
}
/* 四格数值：金色加深一档保证 4.5:1（20px 仍属普通字号） */
html[data-fs-page="devices"] .fs-dc-spec .fs-dc-spec-cell dd {
  color: #7A5A1F !important;
}
html[data-fs-page="devices"] .fs-dc-spec .fs-dc-spec-cell dt {
  color: #7A5A1F !important;
  opacity: .82;
}

/* ── ④ 能力面板：顶部金线 + 黑条内金标签 ── */
html[data-fs-page="devices"] .fs-cap-group {
  border-top: 2px solid #B18A42 !important;
}
html[data-fs-page="devices"] .fs-dc-caps .fs-device-conn {
  border-bottom: 1px solid rgba(177,138,66,.30) !important;
}
html[data-fs-page="devices"] .fs-dc-caps .fs-device-conn-k {
  color: #B18A42 !important;
  letter-spacing: .16em;
}
html[data-fs-page="devices"] .fs-dc-caps .fs-dc-cap-t::before {
  background: #B18A42 !important;
}
html[data-fs-page="devices"] .fs-dc-caps .fs-dc-cap-col {
  border-left-color: #D8C49B !important;
}

/* ── ⑤ 未连接空态：虚线转浅金 ── */
html[data-fs-page="devices"] .fs-dc-caps:not(:has(.fs-device-conn-v.is-on)) {
  border-color: #D8C49B !important;
}

/* ── ⑥ 底部「功能持续开放中」：金短条 ── */
html[data-fs-page="devices"] .fs-open-title {
  position: relative;
  padding-left: 12px;
}
html[data-fs-page="devices"] .fs-open-title::before {
  content: "";
  position: absolute; left: 0; top: .3em;
  width: 3px; height: .9em;
  background: #B18A42;
  border-radius: 2px;
}

/* ═══ 修正：规格卡 hover 时金线被旧规则重置 ═══
   冲突源：前几轮写的 `.fs-dc-spec:hover { border: 1px solid #E7E5DF !important }`
   （当时是为了锁住 hover 背景），它把整条 border 重置成 1px 灰，
   于是 2px 金顶线在鼠标移入时消失。
   修法：给 hover 态补同样的金顶线，权重与旧规则同级（:hover 加分）。 */
html[data-fs-page="devices"] .fs-dc-spec:hover,
html[data-fs-page="devices"] .fs-dc-spec:focus-within {
  border-top: 2px solid #B18A42 !important;
  border-left: 1px solid #E7E5DF !important;
  border-right: 1px solid #E7E5DF !important;
  border-bottom: 1px solid #E7E5DF !important;
}
/* 能力面板同理 */
html[data-fs-page="devices"] .fs-cap-group:hover,
html[data-fs-page="devices"] .fs-cap-group:focus-within {
  border-top: 2px solid #B18A42 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   P0 修复（2026-10-24）· 只改 CSS，不动 PHP / studio.js / _data.php
   ══════════════════════════════════════════════════════════════════════════ */

/* ── P0-1 未连接时「开始调音」降为次要 ──
   现象：设备没插，但「开始调音」是最醒目的金色实心按钮，用户以为能直接调。
   做法：未连接 / 浏览器不支持 → 透明底 + 浅描边（深卡内仍是可读的次要操作）；
        已连接 → 保持金色实心。
   ⚠ 只改外观，路由与点击行为不变。 */
html[data-fs-page="devices"] .fs-dc-dev:has(.fs-conn-state.is-none) .fs-dc-dev-actions .fs-cta,
html[data-fs-page="devices"] .fs-dc-dev:has(.fs-conn-state.is-unsupported) .fs-dc-dev-actions .fs-cta {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  color: #F5F5F2 !important;
  font-weight: 500;
}
html[data-fs-page="devices"] .fs-dc-dev:has(.fs-conn-state.is-none) .fs-dc-dev-actions .fs-cta:hover,
html[data-fs-page="devices"] .fs-dc-dev:has(.fs-conn-state.is-unsupported) .fs-dc-dev-actions .fs-cta:hover {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.44) !important;
  color: #FFFFFF !important;
}

/* ── P0-2 型号区补说明（不改 studio.js）──
   现象：型号位置只有一个「—」，读不出是"没插设备"还是"不支持"。
   ⚠ 不隐藏原文本：「—」仍在 DOM 里，屏幕阅读器照常可读；
     这里在它后面追加一句说明，视觉上形成「— 未检测到设备」。 */
html[data-fs-page="devices"] .fs-dc-dev [data-fs-kv="model"].is-muted::after {
  content: "未检测到设备";
  font-size: 0.5em;
  font-weight: 400;
  letter-spacing: 0;
  color: #B5BBC0;
  margin-left: 12px;
  vertical-align: middle;
}

/* ── P0-3 压缩深色卡内留白 ── */
/* CURRENT DEVICE → 状态徽章：原来 head 下 10px + 徽章上下的 margin 叠加成 ~60px */
html[data-fs-page="devices"] .fs-dc-dev .fs-dc-dev-h {
  margin-bottom: 6px !important;
  line-height: 1.2;
}
html[data-fs-page="devices"] .fs-dc-dev .fs-conn-state {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}
/* 状态徽章 → 型号：收紧 */
html[data-fs-page="devices"] .fs-dc-dev [data-fs-kv="model"] { margin-top: 0 !important; }
/* 型号 → 说明：一行之隔，不要再多一段空 */
html[data-fs-page="devices"] .fs-dc-dev .fs-conn-minor { margin-top: 2px !important; }
html[data-fs-page="devices"] .fs-dc-dev .fs-conn-hint { margin-top: 8px !important; }

/* ── P0-2 补充：未连接时「—」不该用型号字重，否则像一根粗横杠 ── */
html[data-fs-page="devices"] .fs-dc-dev [data-fs-kv="model"].is-muted {
  font-size: 20px !important;
  font-weight: 400 !important;
  color: #8A9199 !important;
}
html[data-fs-page="devices"] .fs-dc-dev [data-fs-kv="model"].is-muted::after {
  font-size: 15px;
  color: #B5BBC0;
}

/* ── P1-4 音频规格卡：未连接时给明确空态 ──
   现象：未连接时四格指标被隐藏，卡里只剩「原始能力描述」+「—」，下面一大片空白。
   做法：在隐藏的四格位置上给一句说明（不新增 DOM，不动 JS）。 */
html[data-fs-page="devices"] .fs-dc-spec:has([data-spec-grid][hidden])::before {
  content: "连接设备后，这里显示该设备的实际音频规格（动态范围 / 采样率 / 位深 / DSD）";
  display: block;
  margin: 0 0 16px;
  padding: 18px 16px;
  background: #FBFAF6;
  border: 1px dashed #DDD9D0;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.8;
  color: #686F75;
  text-align: center;
}
/* 空态下把「原始能力描述」的说明也压低一点，避免两段说明抢戏 */
html[data-fs-page="devices"] .fs-dc-spec:has([data-spec-grid][hidden]) .fs-dc-spec-raw { margin-top: 0; padding-top: 0; border-top: 0; }

/* ── P1-4 补充：未连接时「原始能力描述」里只有一个「—」，展开也没内容 → 直接不显示 ── */
html[data-fs-page="devices"] .fs-dc-spec:has([data-spec-grid][hidden]) .fs-dc-spec-raw { display: none !important; }

/* meta 里的「—」补一句，避免只看到破折号 */
html[data-fs-page="devices"] .fs-dc-spec .fs-dc-meta dd {
  font-size: 13.5px;
}
html[data-fs-page="devices"] .fs-dc-spec .fs-dc-meta dd:not(:has(*)):where(:not([class])) { }
html[data-fs-page="devices"] .fs-dc-spec .fs-dc-meta dd { position: relative; }