/* ══════════════════════════════════════════════════════════════════════════
   HAIRUNWEI Audio Studio · 首页样式（2026-10-23 重写版）
   ──────────────────────────────────────────────────────────────────────────
   为什么重写：上一版是 13 次增量追加（44KB），同一元素被多段规则反复覆盖，
   导致边线出现三套颜色（rgba(34,39,43,.14) / 金色 .12~.26 / 灰实线 #5B6167）、
   圆角 5 与 8 混用、部分卡片带大阴影、区块底色白/灰/黑交替。
   本版一次性按「令牌 → 区块 → 排版 → 组件 → 状态 → 响应式」组织，无重复规则。

   作用域：全部锁 html[data-fs-page="home"]，只在 studio/index.php 引入。
   隔离：调音中心 tuner/ 不引用任何 assets/css/*；设备中心 / 支持中心不加载本文件。

   ⭐ 回滚：删掉 studio/index.php 里 studio-home.css 那一行；
      或还原 backups/pre-upload-20261023/studio-home.css.before-consolidate。
   ══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   1. 令牌
   ───────────────────────────────────────────────────────────── */
html[data-fs-page="home"] {
  /* 浅色区 */
  --hm-bg:        #F3F1EB;   /* 页面底 */
  --hm-bg-soft:   #F7F5F0;   /* hero 顶 */
  --hm-surface:   #FFFFFF;   /* 卡片 */
  --hm-tx:        #22272B;   /* 主标题 */
  --hm-tx-2:      #454B50;   /* 正文 */
  --hm-tx-3:      #5F666C;   /* 辅助（三种浅底均 ≥4.5:1） */
  --hm-tx-4:      #767D83;   /* 弱辅助，仅次级信息 */
  --hm-gold:      #96742F;   /* 品牌强调：数值 / 大标题 / 边线 */
  --hm-gold-text: #7A5A1F;   /* 小字号金：11px 级别必须这档才过 4.5:1 */
  --hm-line:      rgba(34,39,43,.07);   /* 卡片边线（极淡暖灰） */
  --hm-line-2:    rgba(34,39,43,.10);   /* 分隔线 */
  --hm-dark-line: rgba(255,255,255,.10);

  /* 深色工作台 */
  --hm-dark:      #22272B;
  --hm-dark-2:    #2B3035;
  --hm-dark-tx:   #F5F5F2;
  --hm-dark-tx-2: #D0D4D6;
  --hm-dark-tx-3: #B5BBC0;
  --hm-dark-gold: #D6B978;

  /* 统一几何：只两档 —— 卡片 4px / 控件 3px */
  --hm-r:   4px;
  --hm-r-s: 3px;
  --hm-pad: clamp(20px, 2.2vw, 28px);
}

/* ─────────────────────────────────────────────────────────────
   2. 页面与区块：底色连续，不再白/灰/黑交替
   实测旧版：hero 浅 → .fs-entry 深 rgb(13,16,19) → 4 段 #E7E5DF。
   浅色页中间插一条黑带，是"切成方块"的第一个原因。
   ───────────────────────────────────────────────────────────── */
html[data-fs-page="home"] body { background: var(--hm-bg); color: var(--hm-tx-2); }
html[data-fs-page="home"] main { background: var(--hm-bg); }

html[data-fs-page="home"] .section,
html[data-fs-page="home"] .fs-entry,
html[data-fs-page="home"] .fs-home-sec {
  background: var(--hm-bg);
  border-top: 0;
}
html[data-fs-page="home"] .fs-home-sec + .fs-home-sec { border-top: 1px solid var(--hm-line); }
html[data-fs-page="home"] .fs-home-sec { position: relative; }
html[data-fs-page="home"] .fs-home-sec::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .5;                       /* 只作用于纹理由，不影响文字 */
  background-image:
    linear-gradient(90deg, rgba(34,39,43,.035) 1px, transparent 1px),
    linear-gradient(0deg,  rgba(34,39,43,.024) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%, 100% 88px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.55) 0%, transparent 72%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.55) 0%, transparent 72%);
}
html[data-fs-page="home"] .fs-home-sec > .container { position: relative; z-index: 1; }

/* ─────────────────────────────────────────────────────────────
   3. 排版
   ───────────────────────────────────────────────────────────── */
html[data-fs-page="home"] main h1,
html[data-fs-page="home"] main h2,
html[data-fs-page="home"] main h3 { color: var(--hm-tx); letter-spacing: -.012em; }
html[data-fs-page="home"] main p,
html[data-fs-page="home"] main li { color: var(--hm-tx-2); }

html[data-fs-page="home"] .fs-h1 {
  font-size: clamp(30px, 3.5vw, 50px);
  line-height: 1.2;
  letter-spacing: -.02em;
}
html[data-fs-page="home"] .fs-h1 .l1 { color: var(--hm-tx); }
html[data-fs-page="home"] .fs-h1 .l2 { color: var(--hm-gold); }

html[data-fs-page="home"] .fs-hero-en {
  margin-top: 16px;
  font-family: var(--st-mono, ui-monospace, monospace);
  font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--hm-tx-3);
}
html[data-fs-page="home"] .fs-hero-desc {
  margin-top: 20px; max-width: 44ch;
  font-size: 15px; line-height: 1.85; color: var(--hm-tx-2);
}

html[data-fs-page="home"] .fs-hero-eyebrow,
html[data-fs-page="home"] .fs-sechen {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--st-mono, ui-monospace, monospace);
  font-size: 11px; line-height: 1; letter-spacing: .16em; text-transform: uppercase;
  color: var(--hm-gold-text);
}
html[data-fs-page="home"] .fs-hero-eyebrow::before,
html[data-fs-page="home"] .fs-sechen::before {
  content: ""; width: 18px; height: 1px;
  background: var(--hm-gold); opacity: .7; flex: 0 0 auto;
}
html[data-fs-page="home"] .fs-hero-eyebrow .dot { display: none; }

html[data-fs-page="home"] .fs-home-head {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  text-align: left;
}
html[data-fs-page="home"] .fs-home-head > * { margin-left: 0; margin-right: auto; }
html[data-fs-page="home"] .fs-home-h2 { color: var(--hm-tx); font-weight: 600; }
html[data-fs-page="home"] .fs-home-head-sub { color: var(--hm-tx-3); }

/* ─────────────────────────────────────────────────────────────
   4. 链接 / 按钮 / 状态
   ───────────────────────────────────────────────────────────── */
html[data-fs-page="home"] a { color: var(--hm-tx-2); }
html[data-fs-page="home"] a:hover { color: var(--hm-gold-text); }

html[data-fs-page="home"] .btn { border-radius: var(--hm-r-s); }
html[data-fs-page="home"] .btn-primary,
html[data-fs-page="home"] .fs-home-cta .btn-primary {
  background: #B18A42; border-color: #B18A42;
  color: var(--hm-tx);                 /* 深字压金底 4.73:1；白字仅 3.19:1 */
  font-weight: 600;
}
html[data-fs-page="home"] .btn-primary:hover,
html[data-fs-page="home"] .fs-home-cta .btn-primary:hover {
  background: #C29A50; border-color: #C29A50; color: #1B1F23;
}
html[data-fs-page="home"] .btn-outline,
html[data-fs-page="home"] .fs-home-cta .btn-outline {
  border-color: rgba(34,39,43,.24); color: var(--hm-tx); background: transparent;
}
html[data-fs-page="home"] .btn-outline:hover,
html[data-fs-page="home"] .fs-home-cta .btn-outline:hover {
  border-color: var(--hm-gold); color: var(--hm-gold-text); background: rgba(150,116,47,.05);
}
html[data-fs-page="home"] a:focus-visible,
html[data-fs-page="home"] button:focus-visible {
  outline: 2px solid var(--hm-gold); outline-offset: 3px;
}
html[data-fs-page="home"] .fs-home-dev a:focus-visible,
html[data-fs-page="home"] .fs-home-dev button:focus-visible,
html[data-fs-page="home"] .fs-eq-presets button:focus-visible {
  outline: 2px solid var(--hm-dark-gold); outline-offset: 3px;
}

/* ─────────────────────────────────────────────────────────────
   5. 卡片：一套材质（白 / 极淡边 / 4px / 无阴影）
   旧版：边线三套色、圆角 5 与 8 混用、部分大阴影、
        .fs-home-cap-col 用 #5B6167 实灰边 → 生硬切割。
   ───────────────────────────────────────────────────────────── */
html[data-fs-page="home"] .fs-card {
  background: var(--hm-surface);
  border: 1px solid var(--hm-line);
  border-radius: var(--hm-r);
  box-shadow: none;
  transition: border-color .18s ease;
}
html[data-fs-page="home"] .fs-card:hover { border-color: rgba(150,116,47,.28); }


html[data-fs-page="home"] .fs-card-title { color: var(--hm-tx); }
html[data-fs-page="home"] .fs-card-desc  { color: var(--hm-tx-2); }
html[data-fs-page="home"] .fs-card-tag   { color: var(--hm-tx-3); }
html[data-fs-page="home"] .fs-card-no,
html[data-fs-page="home"] .fs-card-more  { color: var(--hm-gold-text); }

/* ─────────────────────────────────────────────────────────────
   6. 首屏
   ───────────────────────────────────────────────────────────── */
html[data-fs-page="home"] .fs-home-hero {
  position: relative;
  background:
    radial-gradient(ellipse 70% 50% at 78% 22%, rgba(177,138,66,.07) 0%, transparent 62%),
    linear-gradient(180deg, var(--hm-bg-soft) 0%, var(--hm-bg) 62%);
  border-bottom: 1px solid var(--hm-line);
  padding-top: clamp(28px, 4.6vh, 56px);
  padding-bottom: clamp(36px, 6vh, 72px);
}
html[data-fs-page="home"] .fs-home-hero::before,
html[data-fs-page="home"] .fs-home-hero::after { display: none; }

html[data-fs-page="home"] .fs-home-hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.16fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
  opacity: 1;
}
html[data-fs-page="home"] .fs-home-cta { margin-top: 28px; }

html[data-fs-page="home"] .fs-facts {
  display: grid; grid-template-columns: repeat(4, auto);
  gap: 0; justify-content: start;
  margin: clamp(26px, 3.6vh, 38px) 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--hm-line-2);
}
html[data-fs-page="home"] .fs-facts > div {
  padding: 0 clamp(14px, 1.8vw, 26px) 0;
  margin-right: clamp(14px, 1.8vw, 26px);
  border-right: 1px solid var(--hm-line);
}
html[data-fs-page="home"] .fs-facts > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
html[data-fs-page="home"] .fs-facts dt {
  font-family: var(--st-mono, ui-monospace, monospace);
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--hm-tx-3); margin-bottom: 6px; white-space: nowrap;
}
html[data-fs-page="home"] .fs-facts dd {
  margin: 0; display: flex; align-items: baseline; gap: 4px;
  font-size: 13px; color: var(--hm-tx-2);
}
html[data-fs-page="home"] .fs-facts dd b {
  font-family: var(--st-mono, ui-monospace, monospace);
  font-size: 24px; font-weight: 500; line-height: 1;
  color: var(--hm-gold); letter-spacing: -.01em;
}
html[data-fs-page="home"] .fs-facts dd em { font-style: normal; font-size: 12px; color: var(--hm-tx-3); }
html[data-fs-page="home"] .fs-facts-note {
  margin: 10px 0 0; min-height: 14px;
  font-family: var(--st-mono, ui-monospace, monospace);
  font-size: 10.5px; letter-spacing: .04em; color: var(--hm-tx-3);
}

/* ─────────────────────────────────────────────────────────────
   7. 深色工作台（首屏焦点）：内部只用发丝线分区，不套多层框
   ───────────────────────────────────────────────────────────── */
html[data-fs-page="home"] .fs-home-dev {
  background: var(--hm-dark);
  border: 1px solid rgba(34,39,43,.35);
  border-radius: var(--hm-r);
  box-shadow: none;
  overflow: hidden;
  color: var(--hm-dark-tx-2);
}
html[data-fs-page="home"] .fs-home-dev-h {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0; padding: 10px 16px;
  border-bottom: 1px solid var(--hm-dark-line);
  font-family: var(--st-mono, ui-monospace, monospace);
  font-size: 10px; letter-spacing: .18em; color: var(--hm-dark-tx-3);
}
html[data-fs-page="home"] .fs-home-dev > .fs-dev-curve {
  margin: 0; border: 0; border-bottom: 1px solid var(--hm-dark-line);
  border-radius: 0; background: #1A1F24;
}
html[data-fs-page="home"] .fs-home-dev > .fs-dev-curve img {
  display: block; width: 100%; height: 122px;
  object-fit: cover; object-position: center 6%;
  filter: none; opacity: 1;
}
html[data-fs-page="home"] .fs-home-dev-panel { padding: 12px 16px 14px; }
html[data-fs-page="home"] .fs-conn-state { font-size: 11px; color: var(--hm-dark-tx-3); }
html[data-fs-page="home"] .fs-home-dev-panel .fs-conn-main { font-size: 15px; margin-top: 3px; color: var(--hm-dark-tx); }
html[data-fs-page="home"] .fs-home-dev-panel .fs-conn-minor { color: var(--hm-dark-tx-3); }
html[data-fs-page="home"] .fs-home-dev-meta { margin: 8px 0 0; }
html[data-fs-page="home"] .fs-home-dev-meta dt { font-size: 11.5px; color: var(--hm-dark-tx-3); }
html[data-fs-page="home"] .fs-home-dev-meta dd { font-size: 11.5px; color: var(--hm-dark-tx-2); }
html[data-fs-page="home"] .fs-home-dev-panel .fs-conn-hint {
  font-size: 11.5px; line-height: 1.6; margin-top: 6px; color: var(--hm-dark-tx-3);
}
html[data-fs-page="home"] .fs-home-dev-tip { display: none; }
html[data-fs-page="home"] .fs-home-dev-actions { margin-top: 9px; }
html[data-fs-page="home"] .fs-home-dev-actions .btn { padding: 5px 11px; font-size: 11.5px; }
html[data-fs-page="home"] .fs-home-dev-actions .btn:not(.btn-outline) {
  background: var(--hm-dark-gold); border-color: var(--hm-dark-gold); color: #1C2126;
}
html[data-fs-page="home"] .fs-home-dev-actions .btn-outline {
  border-color: rgba(255,255,255,.26); color: var(--hm-dark-tx);
}

/* ─────────────────────────────────────────────────────────────
   8. EQ 演示区
   ───────────────────────────────────────────────────────────── */
html[data-fs-page="home"] .fs-eq {
  background: #1C2126;
  border-top: 1px solid var(--hm-dark-line);
  padding: 10px 16px 12px;
}
html[data-fs-page="home"] .fs-eq-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 5px;
}
html[data-fs-page="home"] .fs-eq-title {
  font-family: var(--st-mono, ui-monospace, monospace);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--hm-dark-tx-3);
}
html[data-fs-page="home"] .fs-eq-badge {
  font-size: 10px; padding: 2px 7px; border-radius: 2px;
  color: var(--hm-dark-gold);
  background: rgba(214,185,120,.10);
  border: 1px solid rgba(214,185,120,.34);
}
html[data-fs-page="home"] .fs-eq-canvas { display: block; width: 100%; height: auto; }
html[data-fs-page="home"] .fs-eq-presets { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
html[data-fs-page="home"] .fs-eq-presets button {
  appearance: none; padding: 4px 10px; font-size: 11px; line-height: 1.3;
  color: var(--hm-dark-tx-2);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--hm-r-s);
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
html[data-fs-page="home"] .fs-eq-presets button:hover {
  color: var(--hm-dark-tx); border-color: var(--hm-dark-gold);
}
html[data-fs-page="home"] .fs-eq-presets button[aria-pressed="true"] {
  background: var(--hm-dark-gold); border-color: var(--hm-dark-gold);
  color: #1C2126; font-weight: 700;
}
html[data-fs-page="home"] .fs-eq-readout {
  display: flex; gap: 14px; margin-top: 6px; min-height: 14px;
  font-family: var(--st-mono, ui-monospace, monospace);
  font-size: 10.5px; letter-spacing: .03em; color: var(--hm-dark-tx-3);
}
html[data-fs-page="home"] .fs-eq-readout b { color: var(--hm-dark-gold); font-weight: 500; }

/* ─────────────────────────────────────────────────────────────
   9. 入口矩阵：主卡深，两张次卡合并为一块
   旧版两张次卡各自成框（1px 边 + 白底 + 圆角）+ 16px 缝 = 三个方块。
   ───────────────────────────────────────────────────────────── */
html[data-fs-page="home"] .fs-entry {
  padding-top: clamp(32px, 5vh, 56px);
  padding-bottom: clamp(32px, 5vh, 56px);
}
html[data-fs-page="home"] .fs-entry-grid {
  display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  gap: 16px; align-items: stretch;
}
html[data-fs-page="home"] .fs-entry-main {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: var(--hm-pad); min-height: 208px;
  background: var(--hm-dark);
  border: 1px solid rgba(34,39,43,.35);
  border-radius: var(--hm-r);
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}
html[data-fs-page="home"] .fs-entry-main:hover {
  border-color: var(--hm-dark-gold); transform: translateY(-2px);
}
html[data-fs-page="home"] .fs-entry-k {
  font-family: var(--st-mono, ui-monospace, monospace);
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
}
html[data-fs-page="home"] .fs-entry-h { font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; color: var(--hm-tx); }
html[data-fs-page="home"] .fs-entry-h2 { font-size: 17px; font-weight: 600; color: var(--hm-tx); }
html[data-fs-page="home"] .fs-entry-d { max-width: 46ch; font-size: 13.5px; line-height: 1.8; color: var(--hm-tx-3); }
html[data-fs-page="home"] .fs-entry-go {
  margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--hm-gold-text);
}
html[data-fs-page="home"] .fs-entry-main .fs-entry-k { color: var(--hm-dark-gold); }
html[data-fs-page="home"] .fs-entry-main .fs-entry-h { color: var(--hm-dark-tx); }
html[data-fs-page="home"] .fs-entry-main .fs-entry-d { color: var(--hm-dark-tx-3); }
html[data-fs-page="home"] .fs-entry-main .fs-entry-go { color: var(--hm-dark-gold); }
html[data-fs-page="home"] .fs-entry-go svg { transition: transform .18s ease; }
html[data-fs-page="home"] .fs-entry-main:hover .fs-entry-go svg { transform: translateX(3px); }

html[data-fs-page="home"] .fs-entry-side {
  display: grid; grid-template-rows: 1fr 1fr; gap: 0;
  background: var(--hm-surface);
  border: 1px solid var(--hm-line);
  border-radius: var(--hm-r);
  overflow: hidden;
}
html[data-fs-page="home"] .fs-entry-sub {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 22px;
  background: transparent;
  border: 0; border-radius: 0;
  text-decoration: none;
  transition: background .18s ease;
}
html[data-fs-page="home"] .fs-entry-sub + .fs-entry-sub { border-top: 1px solid var(--hm-line); }
html[data-fs-page="home"] .fs-entry-sub:hover { background: #FBFAF6; }

/* ─────────────────────────────────────────────────────────────
   10. 其它区块
   ───────────────────────────────────────────────────────────── */
html[data-fs-page="home"] .fs-home-flow-item { border: 0; background: transparent; }
html[data-fs-page="home"] .fs-home-flow-no { color: var(--hm-gold-text); }
html[data-fs-page="home"] .fs-home-flow-t { color: var(--hm-tx); }
html[data-fs-page="home"] .fs-home-flow-d { color: var(--hm-tx-3); }

/* 音频能力：左列坐在区块底上，右列（当前设备）是唯一卡片 */
html[data-fs-page="home"] .fs-home-cap-col { background: transparent; border: 0; border-radius: 0; padding: 0; }
html[data-fs-page="home"] .fs-home-cap-col + .fs-home-cap-col {
  background: var(--hm-surface);
  border: 1px solid var(--hm-line);
  border-radius: var(--hm-r);
  padding: var(--hm-pad);
}
html[data-fs-page="home"] .fs-home-cap-h { color: var(--hm-tx); }
html[data-fs-page="home"] .fs-home-cap-t { color: var(--hm-tx); }
html[data-fs-page="home"] .fs-home-cap-d,
html[data-fs-page="home"] .fs-home-cap-k,
html[data-fs-page="home"] .fs-home-cap-wait,
html[data-fs-page="home"] .fs-home-cap-note,
html[data-fs-page="home"] .fs-eq-cap { color: var(--hm-tx-3); }
html[data-fs-page="home"] .fs-home-cap-v { color: var(--hm-tx); }

html[data-fs-page="home"] .fs-home-env {
  background: var(--hm-dark);
  border: 1px solid rgba(34,39,43,.35);
  border-radius: var(--hm-r);
  box-shadow: none;
}
html[data-fs-page="home"] .fs-home-env-cell { border-color: var(--hm-dark-line); }
html[data-fs-page="home"] .fs-home-env-k { color: var(--hm-dark-gold); letter-spacing: .14em; }
html[data-fs-page="home"] .fs-home-env-v { color: var(--hm-dark-tx); }
html[data-fs-page="home"] .fs-env-state { color: var(--hm-dark-tx-3); opacity: 1; }
html[data-fs-page="home"] .fs-env-state.is-warn { color: #E0C68B; }

/* 提示条：去掉金边金底，改左侧 2px 金线（不再形成第四个方块） */
html[data-fs-page="home"] .fs-home-tip {
  background: rgba(150,116,47,.045);
  border: 0;
  border-left: 2px solid var(--hm-gold);
  border-radius: 0 var(--hm-r) var(--hm-r) 0;
  padding: 14px 18px;
}
html[data-fs-page="home"] .fs-home-tip-h { color: var(--hm-gold-text); }
html[data-fs-page="home"] .fs-home-tip li,
html[data-fs-page="home"] .fs-home-tip li span { color: var(--hm-tx-2); }

html[data-fs-page="home"] .fs-home-foot { border-top: 1px solid var(--hm-line); }
html[data-fs-page="home"] .fs-home-foot-brand { color: var(--hm-gold-text); }
html[data-fs-page="home"] .fs-home-foot-tag,
html[data-fs-page="home"] .fs-home-foot p,
html[data-fs-page="home"] .fs-home-foot span,
html[data-fs-page="home"] .fs-home-foot strong { color: var(--hm-tx-3); }
html[data-fs-page="home"] .fs-home-foot a { color: var(--hm-tx-2); }
html[data-fs-page="home"] .fs-home-foot a:hover { color: var(--hm-gold-text); }

html[data-fs-page="home"] .fs-powered,
html[data-fs-page="home"] .fs-powered strong,
html[data-fs-page="home"] .fs-powered a,
html[data-fs-page="home"] .fs-powered-sep { color: var(--hm-tx-3); }

/* ─────────────────────────────────────────────────────────────
   11. facts 空态：收起四个「—」，只留一行说明
   ───────────────────────────────────────────────────────────── */
html[data-fs-page="home"] .fs-facts[data-empty] > div { display: none; }
html[data-fs-page="home"] .fs-facts[data-empty] {
  display: block; margin-top: 26px; padding-top: 0;
  border-top: 1px solid var(--hm-line-2);
}
html[data-fs-page="home"] .fs-facts[data-empty] + .fs-facts-note {
  display: flex; align-items: center; gap: 8px;
  margin-top: 0; padding-top: 14px;
  font-size: 12px; color: var(--hm-tx-2);
}
html[data-fs-page="home"] .fs-facts[data-empty] + .fs-facts-note::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  border: 1px solid var(--hm-gold); flex: 0 0 auto;
}

/* ─────────────────────────────────────────────────────────────
   12. 必须的源级覆盖（4 条，全部来自旧深色体系，逐条注明来源）
   这些规则在原文件带 !important，不覆盖无法生效；清理旧规则后可整段删除。
   ───────────────────────────────────────────────────────────── */
/* ① studio.css：.fs-features > .fs-card{background:none!important} → 卡片无底 */
html[data-fs-page="home"] .fs-features > .fs-card { background: transparent !important; }
/* ② studio.css：.fs-home-hero{background:…linear-gradient(#0A0A0B…)!important} */
html[data-fs-page="home"] .fs-home-hero {
  background:
    radial-gradient(ellipse 70% 50% at 78% 22%, rgba(177,138,66,.07) 0%, transparent 62%),
    linear-gradient(180deg, var(--hm-bg-soft) 0%, var(--hm-bg) 62%) !important;
}
/* ③ studio-ui.css：.fs-home-hero-grid{opacity:.55} → 整块 hero 发灰 */
html[data-fs-page="home"] .fs-home-hero-grid { opacity: 1 !important; }
/* ④ studio-ui.css：.fs-home-hero-copy h1{color:#FAF6EC!important} / p{#9AA1A9!important} */
html[data-fs-page="home"] .fs-home-hero-copy h1 { color: var(--hm-tx) !important; }
html[data-fs-page="home"] .fs-home-hero-copy .fs-h1 .l1 { color: var(--hm-tx) !important; -webkit-text-fill-color: var(--hm-tx) !important; }
html[data-fs-page="home"] .fs-home-hero-copy .fs-h1 .l2 { color: var(--hm-gold) !important; -webkit-text-fill-color: var(--hm-gold) !important; }
html[data-fs-page="home"] .fs-home-hero-copy p { color: var(--hm-tx-2) !important; }
html[data-fs-page="home"] .fs-home-hero-copy .fs-hero-en { color: var(--hm-tx-3) !important; }
html[data-fs-page="home"] .fs-home-hero-copy .fs-hero-eyebrow { color: var(--hm-gold-text) !important; }

/* ─────────────────────────────────────────────────────────────
   13. 响应式
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  html[data-fs-page="home"] .fs-home-hero-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
}
@media (max-width: 860px) {
  html[data-fs-page="home"] .fs-home-hero-grid { grid-template-columns: minmax(0,1fr); gap: 28px; }
  html[data-fs-page="home"] .fs-h1 { font-size: clamp(26px, 8vw, 36px); }
  html[data-fs-page="home"] .fs-hero-desc { font-size: 14px; max-width: none; }
  html[data-fs-page="home"] .fs-facts { grid-template-columns: 1fr 1fr; gap: 14px 0; }
  html[data-fs-page="home"] .fs-facts > div:nth-child(2n) { border-right: 0; margin-right: 0; }
  html[data-fs-page="home"] .fs-facts dd b { font-size: 20px; }
  html[data-fs-page="home"] .fs-entry-grid { grid-template-columns: minmax(0,1fr); }
  html[data-fs-page="home"] .fs-entry-main { min-height: 0; }
  html[data-fs-page="home"] .fs-entry-side { grid-template-rows: auto auto; }
  /* 手机上三列功能卡改上下排列：竖线改横线 */
  html[data-fs-page="home"] .fs-features > .fs-card { padding: 0; }
  html[data-fs-page="home"] .fs-features > .fs-card + .fs-card {
    border-left: 0; border-top: 1px solid var(--hm-line);
    padding-top: 18px; margin-top: 18px;
  }
  html[data-fs-page="home"] .fs-home-dev > .fs-dev-curve img { height: 140px; }
  html[data-fs-page="home"] .fs-home-dev-panel { padding: 10px 14px 12px; }
  html[data-fs-page="home"] .fs-entry-sub { padding: 16px 18px; }
}
@media (max-width: 560px) {
  html[data-fs-page="home"] .fs-hero-en { font-size: 10.5px; letter-spacing: .1em; line-height: 1.7; }
  html[data-fs-page="home"] main p,
  html[data-fs-page="home"] main li { font-size: 14px; line-height: 1.85; }
  html[data-fs-page="home"] .fs-facts dd b { font-size: 19px; }
}

/* ─────────────────────────────────────────────────────────────
   14. 动效克减
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html[data-fs-page="home"] * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ═══ 追加修正：区块底色被 studio-tokens.css 压回深色 ═══
   根因：tokens 里有一条
     html[data-fs-page] .section:not(.fs-home-hero):not(.fs-dc-hero):not(.fs-sc-hero){
       background: var(--st-bg-1) }        ← #0D1013 深色令牌
   三个 :not() 让权重升到 (0,5,1)，普通 `.section` 选择器压不住，
   于是浅色页的区块底全被换成深色，深字落在深底上 → 实测 1.16~1.27:1。
   这里用「同权重 + 后加载」恢复浅色底，不使用 !important。 */
html[data-fs-page="home"] .section:not(.fs-home-hero):not(.fs-dc-hero):not(.fs-sc-hero) {
  background: var(--hm-bg);
  border-top: 1px solid var(--hm-line);
}
html[data-fs-page="home"] .section:not(.fs-home-hero):not(.fs-dc-hero):not(.fs-sc-hero):first-of-type {
  border-top: 0;
}

/* ═══ 追加修正 2：作用域过宽 + 两条源级 !important ═══ */

/* ① 通用链接色曾写成 html[data-fs-page="home"] a —— 把页脚（深色 v3foot）的链接
      也改成了 #454B50，实测 2.28:1。收窄到 main 内，页脚恢复 ui.css 原色。 */
html[data-fs-page="home"] main a { color: var(--hm-tx-2); }
html[data-fs-page="home"] main a:hover { color: var(--hm-gold-text); }
html[data-fs-page="home"] footer a,
html[data-fs-page="home"] .v3foot-nav a { color: inherit; }   /* 交还给页脚自身样式 */
html[data-fs-page="home"] .v3foot-nav a { color: #9AA1A9; }
html[data-fs-page="home"] .v3foot-nav a:hover { color: #C9AF6C; }

/* ② 卡片"更多"链接里的箭头 span 未继承颜色，单独指定 */
html[data-fs-page="home"] .fs-card-more,
html[data-fs-page="home"] .fs-card-more * { color: var(--hm-gold-text); }

/* ③ 源级 !important：studio.css 里这两条把浅金直接写死，
      在浅底上只有 1.56~1.63:1。不改源文件的前提下只能就地覆盖。 */
html[data-fs-page="home"] .fs-home-flow-no { color: var(--hm-gold-text) !important; }
html[data-fs-page="home"] .fs-eq-cap { color: var(--hm-tx-3) !important; }

/* ══════════════════════════════════════════════════════════════════════
   追加修正 3 · 按源规则的完整层级对齐（根因收口）
   ─────────────────────────────────────────────────────────────────────
   为什么前两轮没生效：studio.css 里这些元素用的是
     html[data-fs-page="home"] .fs-features > .fs-card .fs-card-desc { color: rgba(232,227,216,.62) }
   这类「4 层级」选择器；我只写到 2~3 层级，即使后加载也输在权重上。
   本段按同样的层级链书写，不需要靠 !important 堆砌（仅在源规则本身带
   !important 的 3 处保留）。
   ══════════════════════════════════════════════════════════════════════ */

/* 一、三张功能卡内部 */
html[data-fs-page="home"] .fs-features > .fs-card .fs-card-no { color: var(--hm-gold-text); }
html[data-fs-page="home"] .fs-features > .fs-card .fs-card-title { color: var(--hm-tx); }
html[data-fs-page="home"] .fs-features > .fs-card .fs-card-desc { color: var(--hm-tx-2); }
html[data-fs-page="home"] .fs-features > .fs-card .fs-card-tag { color: var(--hm-tx-3); }
html[data-fs-page="home"] .fs-features > .fs-card .fs-card-more,
html[data-fs-page="home"] .fs-features > .fs-card .fs-card-foot .fs-card-more span { color: var(--hm-gold-text); }

/* 二、五步流程 */
html[data-fs-page="home"] .fs-home-flow .fs-home-flow-item .fs-home-flow-no { color: var(--hm-gold-text) !important; }
html[data-fs-page="home"] .fs-home-flow .fs-home-flow-item .fs-home-flow-t { color: var(--hm-tx); }
html[data-fs-page="home"] .fs-home-flow .fs-home-flow-item .fs-home-flow-d { color: var(--hm-tx-3); }

/* 三、音频能力图注（源规则带 !important，只能同权重覆盖） */
html[data-fs-page="home"] .fs-home-cap .fs-eq-cap { color: var(--hm-tx-3) !important; }

/* ═══ 追加修正 4 · 最后 3 处 ═══ */
/* ① 导航 logo：SVG 用 currentColor，我改的 body 文字色渗到深色导航上（1.59:1）。
      恢复导航自身的浅金属色，不动导航结构。 */
html[data-fs-page="home"] .fs-nav,
html[data-fs-page="home"] .fs-nav-brand { color: #E8E3D8; }
html[data-fs-page="home"] .fs-nav-brand:hover { color: #C9AF6C; }

/* ② 入口次卡的小标签没有显式颜色，继承了链接正文色（2.14:1） */
html[data-fs-page="home"] .fs-entry-sub .fs-entry-k { color: var(--hm-gold-text); }
html[data-fs-page="home"] .fs-entry-sub .fs-entry-h2 { color: var(--hm-tx); }


/* ══════════════════════════════════════════════════════════════════════════
   15. 核心功能 + 音频能力 · 定点修复（2026-10-24）
   ──────────────────────────────────────────────────────────────────────────
   ── 根因 1：预览图压住右栏文字 ──
   .fs-features 是 grid，子项默认 min-width:auto。图片固有宽度 1400px 会把
   1.22fr 那一列撑到超过网格轨道，figure 溢出到第 2 列，盖住 "01 声音调校"。
   同时没有比例约束，窄视口下两列比例失控。
   修复：给所有 grid 子项 min-width:0；显式 56% / 1fr 两列；图 width/max-width
        100% + height:auto；figure 自身 overflow:hidden 兜底。

   ── 根因 2：能力摘要/标签是浅米色，几乎看不见 ──
   studio.js 在连接命中后会把数值元素的 className 整段重写成
   'fs-kv-v[ is-muted]'（见 studio.css:1426 的注释），原来的 fs-home-cap-v
   被抹掉，于是命中全局 .fs-kv-v{color:var(--text-1)} —— 那是深色体系的
   #E8E3D8 米白，落在白卡上就是"看不见"。
   修复：样式挂到「不会被重写」的父级链上（.fs-home-cap-row .fs-kv-v），
        不再依赖会被抹掉的类名。

   ── 根因 3：卡片边框过重 ──
   源规则给 .fs-home-cap-col 用了实灰边 #5B6167。改为低对比暖灰 #DDD9D0。
   ══════════════════════════════════════════════════════════════════════════ */

/* ═══ 一、核心功能：真两列 56% / 44%，互不侵入 ═══ */
html[data-fs-page="home"] .fs-features {
  display: grid;
  grid-template-columns: 56% minmax(0, 1fr);   /* 56% + 32px 间距 + 剩余 */
  grid-template-rows: repeat(3, auto);
  column-gap: 32px;
  row-gap: 22px;
  align-items: start;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
/* 关键：grid 子项默认 min-width:auto 会让图片撑破轨道 */
html[data-fs-page="home"] .fs-features > * { min-width: 0; }

html[data-fs-page="home"] .fs-features > .fs-shot {
  grid-column: 1; grid-row: 1 / span 3;
  margin: 0;
  min-width: 0; max-width: 100%;
  display: flex; flex-direction: column;
  overflow: hidden;                 /* 兜底：任何情况下都不越出本列 */
  border: 1px solid rgba(34,39,43,.10);
  border-radius: var(--hm-r);
  background: #0B0B0D;
  box-shadow: none;
}
html[data-fs-page="home"] .fs-features > .fs-shot img {
  display: block;
  width: 100%; max-width: 100%; height: auto;
  min-width: 0;
  object-fit: contain;              /* 不裁掉界面内容 */
  filter: none;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
/* 图注：深底上的浅字（在 .fs-shot 内，属于深色区域） */
html[data-fs-page="home"] .fs-features > .fs-shot .fs-shot-t { color: #F2EFE7; }
html[data-fs-page="home"] .fs-features > .fs-shot .fs-shot-s { color: #B5BBC0; }

/* 右侧三条：一张白卡一张，统一材质，不再层层套框 */
html[data-fs-page="home"] .fs-features > article {
  grid-column: 2;
  min-width: 0;
  background: var(--hm-surface);
  border: 1px solid #E3DFD6;         /* 低对比暖灰，避免硬切割 */
  border-radius: var(--hm-r);
  padding: 20px 22px;
  box-shadow: none;
}
html[data-fs-page="home"] .fs-features > article:nth-of-type(1) { grid-row: 1; }
html[data-fs-page="home"] .fs-features > article:nth-of-type(2) { grid-row: 2; }
html[data-fs-page="home"] .fs-features > article:nth-of-type(3) { grid-row: 3; }

/* 卡内层级：标题 / 说明 / 标签 / 操作 */
html[data-fs-page="home"] .fs-features > article .fs-card-title { color: var(--hm-tx); }
html[data-fs-page="home"] .fs-features > article .fs-card-desc { color: var(--hm-tx-2); }
html[data-fs-page="home"] .fs-features > article .fs-card-tag {
  color: #5F666C;
  background: #F2EFE8;              /* 低对比暖灰底 + 深字，不用浅金压白底 */
  border: 1px solid #E3DFD6;
  border-radius: 3px;
}
html[data-fs-page="home"] .fs-features > article .fs-card-no { color: var(--hm-gold-text); }
html[data-fs-page="home"] .fs-features > article .fs-card-more,
html[data-fs-page="home"] .fs-features > article .fs-card-more span { color: var(--hm-gold-text); }
html[data-fs-page="home"] .fs-features > article .fs-card-more:hover { color: #5E4415; }

/* ═══ 二、音频能力：白卡柔边 + 文字按白底定色 ═══ */
html[data-fs-page="home"] .fs-home-cap-dev {
  background: #FFFFFF;
  border: 1px solid #DDD9D0;        /* 低对比暖灰，替换原来的 #5B6167 硬边 */
  border-radius: var(--hm-r);
  padding: var(--hm-pad);
  box-shadow: none;
}
html[data-fs-page="home"] .fs-home-cap-dev .fs-home-cap-h { color: var(--hm-tx); }

/* 关键修复：连接后 className 被 studio.js 重写为 .fs-kv-v，
   所以用父级 .fs-home-cap-row 限定，命中不会被抹掉的链 */
html[data-fs-page="home"] .fs-home-cap-row { gap: 6px; }
html[data-fs-page="home"] .fs-home-cap-row .fs-kv-v,
html[data-fs-page="home"] .fs-home-cap-row .fs-kv-v.is-muted,
html[data-fs-page="home"] .fs-home-cap-row .fs-home-cap-v {
  color: var(--hm-tx);
  font-family: inherit;             /* 不用等宽字体铺长句，中文更好读 */
  font-size: 13.5px;
  line-height: 1.8;
  letter-spacing: 0;
  margin-top: 4px;
  word-break: break-word;
}
html[data-fs-page="home"] .fs-home-cap-row .fs-kv-v.is-muted { color: #686F75; }

/* 次级标题「能力摘要 / 能力标签」 */
html[data-fs-page="home"] .fs-home-cap-dev .fs-home-cap-k {
  color: #686F75;
  font-size: 11.5px;
  letter-spacing: .02em;
}
html[data-fs-page="home"] .fs-home-cap-dev .fs-home-cap-wait { color: #454B50; }
html[data-fs-page="home"] .fs-home-cap-dev .fs-home-cap-note { color: #686F75; font-size: 12px; line-height: 1.7; }

/* 顶部金色曲线：只作装饰，降权到 .3，并且不吃布局 */
html[data-fs-page="home"] .fs-home-cap-grid { position: relative; }
html[data-fs-page="home"] .fs-home-cap-curve,
html[data-fs-page="home"] .fs-home-cap-wave {
  opacity: .3;
  pointer-events: none;
}
html[data-fs-page="home"] .fs-eq-cap { color: #686F75; font-size: 10.5px; }

/* 左侧平台能力：保持原结构，仅确保文字层级 */
html[data-fs-page="home"] .fs-home-cap-col .fs-home-cap-t { color: var(--hm-tx); }
html[data-fs-page="home"] .fs-home-cap-col .fs-home-cap-d { color: #686F75; }

/* ═══ 三、响应式：手机上下排列，禁止横向溢出 ═══ */
@media (max-width: 900px) {
  html[data-fs-page="home"] .fs-features {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    row-gap: 18px;
  }
  html[data-fs-page="home"] .fs-features > .fs-shot {
    grid-column: 1; grid-row: 1;
  }
  html[data-fs-page="home"] .fs-features > article:nth-of-type(1) { grid-column: 1; grid-row: 2; }
  html[data-fs-page="home"] .fs-features > article:nth-of-type(2) { grid-column: 1; grid-row: 3; }
  html[data-fs-page="home"] .fs-features > article:nth-of-type(3) { grid-column: 1; grid-row: 4; }
  html[data-fs-page="home"] .fs-features > article { padding: 16px 18px; }
}

/* ═══ 16. 音频能力卡：用「复合选择器」一次写对 ═══
   上一版写成两条同权重规则，后一条 .fs-home-cap-col{border:0;background:transparent}
   把 .fs-home-cap-dev 的白底和柔边全部推翻（border-width 变 0，颜色残留 #454B50）。
   改用 .fs-home-cap-col.fs-home-cap-dev（0,3,1）一次命中，不再依赖顺序。 */
html[data-fs-page="home"] .fs-home-cap-col {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}
html[data-fs-page="home"] .fs-home-cap-col.fs-home-cap-dev {
  background: #FFFFFF !important;
  border: 1px solid #DDD9D0 !important;
  border-radius: var(--hm-r) !important;
  padding: var(--hm-pad) !important;
  box-shadow: none !important;
}

/* ═══ 17. 核心功能：消除右列空洞 ═══
   根因：.fs-shot 用 grid-row: 1 / span 3 跨三行，figure 高约 900px，
   三行被平均分配 → 每行 ~300px，而卡片只占 ~110px，于是三条之间出现大空白。
   修复：不改变 DOM，让三张卡片 stretch 填满各自行高，内部纵向排布，
        标题在上、操作链接贴底 —— 空白消失，且三条高度一致。 */
html[data-fs-page="home"] .fs-features {
  align-items: stretch;
  grid-template-rows: repeat(3, minmax(0, 1fr));
}
html[data-fs-page="home"] .fs-features > article {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
}
html[data-fs-page="home"] .fs-features > article .fs-card-foot,
html[data-fs-page="home"] .fs-features > article .fs-card-more {
  margin-top: auto;              /* 操作链接贴底，卡内不再留空 */
}


/* ═══ 19. 核心功能三卡白底（必须 !important）═══
   源规则：studio.css `html[data-fs-page="home"] .fs-features > .fs-card{background:none!important}`
   （深色版为了让图片自己撑起来）。浅色版需要卡片有面，故精确覆盖这一条。 */
html[data-fs-page="home"] .fs-features > .fs-card {
  background: var(--hm-surface) !important;
}
html[data-fs-page="home"] .fs-features > .fs-card:hover {
  background: var(--hm-surface) !important;
  border-color: rgba(150,116,47,.32);
}

/* ══════════════════════════════════════════════════════════════════════════
   20. 核心功能右侧：改成一整块「行式」列表（2026-10-24，按用户给的格式）
   ──────────────────────────────────────────────────────────────────────────
   旧形态：三个独立白卡竖排，各自带边框、各自占一行、行间大片空白。
   新形态：一个白容器，内部三行，行间只用 1px 发丝线分隔；
          每行 = 序号 + 标题（左） / 操作链接（右上） / 说明（左） / 标签（左下）。
   注意：article 带 .fs-card 类，§19 给过 `background:#FFFFFF!important`，
        这里用同权重（0,3,1）+ !important 改回透明，让容器承担底色。
   ══════════════════════════════════════════════════════════════════════════ */

html[data-fs-page="home"] .fs-features {
  display: grid;
  grid-template-columns: 56% minmax(0, 1fr);
  column-gap: 32px;
  row-gap: 0;
  align-items: start;
  background: transparent;
  border: 0;
  padding: 0;
}

/* 左：预览图，自然高度，不跨行 */
html[data-fs-page="home"] .fs-features > .fs-shot {
  grid-column: 1; grid-row: 1;
  min-width: 0; max-width: 100%;
  align-self: start;
  margin: 0;
  overflow: hidden;
}

/* 右：一整块容器 */
html[data-fs-page="home"] .fs-feature-cards {
  grid-column: 2; grid-row: 1;
  min-width: 0;
  display: grid;
  background: var(--hm-surface);
  border: 1px solid #E3DFD6;
  border-radius: var(--hm-r);
  overflow: hidden;
}

/* 每一行 */
html[data-fs-page="home"] .fs-feature-cards > .fs-card {
  background: transparent !important;     /* 让容器承担白底，行不再各自成块 */
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "no   title more"
    "desc desc  desc"
    "tags tags  tags";
  column-gap: 10px;
  row-gap: 8px;
  align-items: baseline;
  transition: background .16s ease;
}
html[data-fs-page="home"] .fs-feature-cards > .fs-card + .fs-card {
  border-top: 1px solid #EDEAE3 !important;   /* 行间唯一的线 */
}
html[data-fs-page="home"] .fs-feature-cards > .fs-card:hover { background: #FBFAF6 !important; }

html[data-fs-page="home"] .fs-feature-cards .fs-card-no {
  grid-area: no;
  font-family: var(--st-mono, ui-monospace, monospace);
  font-size: 11px; letter-spacing: .08em;
  color: var(--hm-gold);
  align-self: baseline;
}
html[data-fs-page="home"] .fs-feature-cards .fs-card-title {
  grid-area: title;
  margin: 0 !important;
  font-size: 17px; font-weight: 600; line-height: 1.35;
  color: var(--hm-tx);
}
html[data-fs-page="home"] .fs-feature-cards .fs-card-sub { display: none !important; }
html[data-fs-page="home"] .fs-feature-cards .fs-card-desc {
  grid-area: desc;
  margin: 0 !important;
  font-size: 13px; line-height: 1.7;
  color: var(--hm-tx-2);
  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
}
html[data-fs-page="home"] .fs-feature-cards .fs-card-tags {
  grid-area: tags;
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 2px 0 0 !important; padding: 0 !important;
  list-style: none;
}
html[data-fs-page="home"] .fs-feature-cards .fs-card-tag {
  padding: 3px 8px;
  font-size: 11px; line-height: 1.4;
  color: #5F666C;
  background: #F4F2EC;
  border: 1px solid #E3DFD6;
  border-radius: 3px;
}
html[data-fs-page="home"] .fs-feature-cards .fs-card-foot {
  grid-area: more;
  justify-self: end;
  align-self: start;
  margin: 0 !important;
}
html[data-fs-page="home"] .fs-feature-cards .fs-card-more,
html[data-fs-page="home"] .fs-feature-cards .fs-card-more span {
  color: var(--hm-gold-text) !important;
  font-size: 12.5px;
  white-space: nowrap;
}
html[data-fs-page="home"] .fs-feature-cards .fs-card-more:hover { color: #5E4415 !important; }

/* 手机：图在上、列表在下，行内不再三列 */
@media (max-width: 900px) {
  html[data-fs-page="home"] .fs-features {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 18px;
  }
  html[data-fs-page="home"] .fs-features > .fs-shot { grid-column: 1; grid-row: 1; }
  html[data-fs-page="home"] .fs-feature-cards { grid-column: 1; grid-row: 2; }
  html[data-fs-page="home"] .fs-feature-cards > .fs-card {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "no   title"
      "desc desc"
      "tags tags"
      "more more";
    row-gap: 6px;
  }
  html[data-fs-page="home"] .fs-feature-cards .fs-card-foot { justify-self: start; margin-top: 4px !important; }
}

/* ═══ 21. 首行（is-primary）标签与链接：源规则给它单独的浅金样式 ═══
   实测：第一行标签「多段 EQ / 参数调整 / 耳机校准」几乎看不见，
   因为 studio.css 有 `.fs-card.is-primary .fs-card-tag` 这类更高权重规则。
   这里按同层级覆盖，统一成暖灰底 + 深字。 */
html[data-fs-page="home"] .fs-feature-cards > .fs-card.is-primary .fs-card-tag {
  color: #5F666C !important;
  background: #F4F2EC !important;
  border: 1px solid #E3DFD6 !important;
}
html[data-fs-page="home"] .fs-feature-cards > .fs-card.is-primary .fs-card-more,
html[data-fs-page="home"] .fs-feature-cards > .fs-card.is-primary .fs-card-more span {
  color: var(--hm-gold-text) !important;
}
html[data-fs-page="home"] .fs-feature-cards > .fs-card.is-primary .fs-card-title { color: var(--hm-tx) !important; }
html[data-fs-page="home"] .fs-feature-cards > .fs-card.is-primary .fs-card-desc { color: var(--hm-tx-2) !important; }

/* ═══ 22. 序号颜色达标 ═══
   实测：「01」1.7:1（is-primary 有浅金覆盖）、「02/03」4.34:1（差 0.16 未到 4.5）。
   统一到小字金 #7A5A1F（白底 6.34:1），并覆盖 is-primary 变体。 */
html[data-fs-page="home"] .fs-feature-cards .fs-card-no,
html[data-fs-page="home"] .fs-feature-cards > .fs-card.is-primary .fs-card-no {
  color: var(--hm-gold-text) !important;
  font-size: 11px;
  letter-spacing: .08em;
}

/* ══════════════════════════════════════════════════════════════════════
   23. 右侧卡组与左图等高（消除下方空档）
   ─────────────────────────────────────────────────────────────────────
   实测：左图（含图注）约 615px，右侧三行合计 530px，差 ~130px 全空在下方。
   处理：两列 stretch 等高；卡组 height:100%、三行各 1fr 均分；
        每行内容在该行内垂直居中，避免行被拉高后内容顶在上面显得空。
   ══════════════════════════════════════════════════════════════════════ */
html[data-fs-page="home"] .fs-features {
  align-items: stretch;                 /* 两列同高 */
}
html[data-fs-page="home"] .fs-features > .fs-shot {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
html[data-fs-page="home"] .fs-features > .fs-shot img {
  flex: 1 1 auto;
  min-height: 0;
  object-fit: contain;                  /* 只拉伸容器，不裁内容 */
}
html[data-fs-page="home"] .fs-feature-cards {
  height: 100%;
  grid-template-rows: repeat(3, minmax(0, 1fr));
}
html[data-fs-page="home"] .fs-feature-cards > .fs-card {
  align-content: center;                /* 行被拉高后内容居中，不顶着上边 */
  padding-top: 14px;
  padding-bottom: 14px;
}

/* 手机端恢复自然高度，不强行等高 */
@media (max-width: 900px) {
  html[data-fs-page="home"] .fs-features { align-items: start; }
  html[data-fs-page="home"] .fs-features > .fs-shot { align-self: start; }
  html[data-fs-page="home"] .fs-features > .fs-shot img { flex: 0 0 auto; }
  html[data-fs-page="home"] .fs-feature-cards {
    height: auto;
    grid-template-rows: auto;
  }
  html[data-fs-page="home"] .fs-feature-cards > .fs-card { align-content: start; }
}

/* ══════════════════════════════════════════════════════════════════════
   24. 修高度循环依赖（§23 引入的 bug）
   ─────────────────────────────────────────────────────────────────────
   症状：核心功能区下方出现整屏空白，右侧卡组塌成一小块。
   原因：§23 给 .fs-feature-cards 写了 height:100%，而它的参照物是 grid 行高，
        行高又由两列内容决定 —— 形成循环依赖，浏览器结算出异常高度。
   修法：删掉 height:100%。grid 的 align-items:stretch 本来就是
        「子项拉伸到行高」，不需要显式 height；行高由左图内容自然决定。
   ══════════════════════════════════════════════════════════════════════ */
html[data-fs-page="home"] .fs-feature-cards {
  height: auto;
}
html[data-fs-page="home"] .fs-features {
  grid-auto-rows: auto;
}

/* ══════════════════════════════════════════════════════════════════════
   25. 彻底修掉高度循环（§23/§24 的根因）
   ─────────────────────────────────────────────────────────────────────
   实测：.fs-features 高度 1876px = 3 × 625px。可见内容只有 625px，
        多出来的 1251px 就是"下面空这么长"的来源。
   原因：.fs-feature-cards 同时有
         · grid-template-rows: repeat(3, 1fr)   ← 三行按 1fr 分
         · 被父级 align-items:stretch 拉高
         「1fr 参照容器高、容器高又被 stretch 参照行高」→ 循环，每轮放大，
         最终变成「每行 = 左图高度 625」→ 卡组 1875。
   修法：卡组改为 flex 纵向，行用 flex:1 均分 ——
        容器高度由 stretch 一次性确定，flex 子项按比例分配，不存在循环。
   ══════════════════════════════════════════════════════════════════════ */
html[data-fs-page="home"] .fs-feature-cards {
  display: flex;
  flex-direction: column;
  grid-template-rows: none;      /* 取消 1fr 行定义 */
  height: auto;
}
html[data-fs-page="home"] .fs-feature-cards > .fs-card {
  flex: 1 1 0;
  min-height: 0;
}
@media (max-width: 900px) {
  html[data-fs-page="home"] .fs-feature-cards > .fs-card { flex: 0 0 auto; }
}

/* ══════════════════════════════════════════════════════════════════════
   26. 真凶：.fs-features 还留着 repeat(3, 1fr) 的三行定义
   ─────────────────────────────────────────────────────────────────────
   1876px = 625 × 3。卡片早已移进 .fs-feature-cards 包裹层，
   但 §17 给 .fs-features 写的 `grid-template-rows: repeat(3, minmax(0,1fr))`
   还在：第 1 行放图 + 卡组（625），第 2、3 行空着也各分 625 → 多出 1250px。
   这就是"下面空这么长"的最终来源。改为单行 auto。
   ══════════════════════════════════════════════════════════════════════ */
html[data-fs-page="home"] .fs-features {
  grid-template-rows: auto;
  grid-auto-rows: auto;
  row-gap: 0;
  padding-bottom: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   首页「音频能力」右侧卡片：白 → 石墨黑 + 金色（2026-10-24）
   ──────────────────────────────────────────────────────────────────────────
   用户要求与首屏深色工作区、设备中心保持同一套黑金语言。
   只改配色：布局、DOM、data-fs-* 钩子、studio.js 写入逻辑一律不动。
   ⚠ 值元素（能力摘要 / 能力标签的内容）会被 studio.js 整段重写 className
     成 `.fs-kv-v[ is-muted]`，所以样式必须挂在父级 `.fs-home-cap-row` 上，
     不能依赖 `.fs-home-cap-v` 这类会被抹掉的类名（设备中心踩过这个坑）。
   ══════════════════════════════════════════════════════════════════════════ */

html[data-fs-page="home"] .fs-home-cap-dev {
  background: #22272B !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-top: 2px solid #C9A45C !important;   /* 金色识别线 */
  border-radius: var(--hm-r);
  box-shadow: none !important;
  transition: none !important;
}

/* 标题 */
html[data-fs-page="home"] .fs-home-cap-dev .fs-home-cap-h {
  color: #F5F5F2 !important;
}
/* 小标签「能力摘要 / 能力标签」→ 香槟金（深底 5.2:1） */
html[data-fs-page="home"] .fs-home-cap-dev .fs-home-cap-k {
  color: #B18A42 !important;
  letter-spacing: .06em;
}
/* 值：父级链定位，绕开 className 被重写的问题 */
html[data-fs-page="home"] .fs-home-cap-dev .fs-home-cap-row .fs-kv-v,
html[data-fs-page="home"] .fs-home-cap-dev .fs-home-cap-row .fs-home-cap-v {
  color: #D0D4D6 !important;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.8;
}
html[data-fs-page="home"] .fs-home-cap-dev .fs-home-cap-row .fs-kv-v.is-muted {
  color: #B5BBC0 !important;
}
/* 未连接提示 / 底部说明 */
html[data-fs-page="home"] .fs-home-cap-dev .fs-home-cap-wait { color: #B5BBC0 !important; }
html[data-fs-page="home"] .fs-home-cap-dev .fs-home-cap-note { color: #B5BBC0 !important; }

/* 内部分隔线与行距（深底上用低透明金线，不用灰线） */
html[data-fs-page="home"] .fs-home-cap-dev .fs-home-cap-rows {
  border-top: 1px solid rgba(177,138,66,.24);
  padding-top: 14px;
  margin-top: 14px;
}
html[data-fs-page="home"] .fs-home-cap-dev .fs-home-cap-row + .fs-home-cap-row {
  margin-top: 12px;
}

/* ═══ 修：背景没生效 ═══
   冲突源：本文件早前写的
     html[data-fs-page="home"] .fs-home-cap-col + .fs-home-cap-col { background:#FFFFFF }
   相邻兄弟选择器权重 (0,3,1)，高于 `.fs-home-cap-dev` (0,2,1)。
   该元素同时带两个类，用复合选择器一次命中。 */
html[data-fs-page="home"] .fs-home-cap-col.fs-home-cap-dev {
  background: #22272B !important;
  background-image: none !important;
  border-top: 2px solid #C9A45C !important;
  border-left: 1px solid rgba(255,255,255,.09) !important;
  border-right: 1px solid rgba(255,255,255,.09) !important;
  border-bottom: 1px solid rgba(255,255,255,.09) !important;
}

/* ═══ 未连接态：黑卡内不留大片空白 ═══
   实测：未连接时「等待连接设备」在上、底部说明在下，中间约 150px 空白，
   深色块里空着比白卡更显突兀。
   处理：给它一个金色状态点 + 合理的上下留白，让空态本身有"待机"的语义。 */
html[data-fs-page="home"] .fs-home-cap-dev .fs-home-cap-wait {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 6px 0 0;
  padding: 26px 0;
  font-size: 15px;
  color: #D0D4D6 !important;
}
html[data-fs-page="home"] .fs-home-cap-dev .fs-home-cap-wait::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1px solid #C9A45C;
  background: rgba(201,164,92,.22);
  flex: 0 0 auto;
}
/* 底部说明贴底，把剩余空间收到它上面，而不是堆在中间 */
html[data-fs-page="home"] .fs-home-cap-dev {
  display: flex;
  flex-direction: column;
}
html[data-fs-page="home"] .fs-home-cap-dev .fs-home-cap-note { margin-top: auto; padding-top: 18px; }
html[data-fs-page="home"] .fs-home-cap-dev .fs-home-cap-rows { margin-bottom: 18px; }

/* ═══ 修：伪元素圆点被拉成竖条 ═══
   原因：.fs-home-cap-wait 的 display:flex 被更高权重规则覆盖，
   伪元素退化成块级元素，高度被撑开。改用 border-left 金线，不依赖 flex。 */
html[data-fs-page="home"] .fs-home-cap-dev .fs-home-cap-wait::before { display: none !important; }
html[data-fs-page="home"] .fs-home-cap-dev .fs-home-cap-wait {
  display: block !important;
  border-left: 2px solid rgba(201,164,92,.55);
  padding: 14px 0 14px 14px !important;
  margin: 6px 0 0 !important;
  font-size: 15px;
  color: #D0D4D6 !important;
}