/* ══════════════════════════════════════════════════════════════════════════
   HAIRUNWEI Audio Studio · 统一视觉体系（2026-10-23）
   ──────────────────────────────────────────────────────────────────────────
   作用域：全部锁在 html[data-fs-page] 下 —— 只影响 /studio/ 的 home / devices /
           support 三个页面（guide 页不在本次范围，但也同样受作用域保护）。
   隔离：调音中心 tuner/index.html 是独立单文件（内联样式、不引用 assets/css/*），
        本文件物理上无法影响它。
   原则：不新增色相，全部取 base.css 既有令牌；只覆盖视觉属性，不改任何布局结构
        （唯一例外是 §5 把 section 头统一为左对齐，属明确要求）。

   ⭐ 加载位置：由三页的 $extraHead 引入，位于 studio.css / ui.css / studio-ui.css
      之后 —— 保证覆盖优先级，无需堆 !important。
   ⭐ 回滚：删掉三页 $extraHead 那一行即可（文件本身留着不生效）。
   ══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   1. 设计变量
   ───────────────────────────────────────────────────────────── */
html[data-fs-page] {
  /* 石墨黑：四层递进，卡片比页面亮 → 产生"浮起"，不是所有块同色 */
  --st-bg-0:      #0A0C0F;   /* 页面底 · 最深层 */
  --st-bg-1:      #0D1013;   /* 区块底 · 次层 */
  --st-bg-2:      #0B0E11;   /* hero 底 */
  --st-surface:   #14181D;   /* 卡片 */
  --st-surface-2: #1A1F25;   /* 卡片悬浮 / 表头 */

  /* 线：金线用于分区与卡片边；弱线用于带内分隔 */
  --st-line:      rgba(201,175,108,.16);
  --st-line-soft: rgba(255,255,255,.06);
  --st-line-hair: rgba(255,255,255,.03);

  /* 金：只三档，不做明度外扩 */
  --st-gold:      #C9AF6C;
  --st-gold-hi:   #E0C98A;
  --st-gold-dim:  #8A7440;

  /* 文字：四级，对比度分别为 ~15:1 / ~10:1 / ~6:1 / ~4.6:1（on --st-bg-0） */
  --st-tx-1:      #F2EFE7;
  --st-tx-2:      #C3C7CE;
  --st-tx-3:      #8A9099;
  --st-tx-4:      #6B7178;

  /* 尺寸 */
  --st-max:       1360px;
  --st-nav-h:     64px;
  --st-radius:    5px;      /* 卡片 */
  --st-radius-s:  3px;      /* 小元素、标签 */
  --st-gap:       clamp(16px, 2vw, 28px);
  --st-gap-lg:    clamp(40px, 6vh, 72px);

  /* 动效：轻、短 */
  --st-ease:      cubic-bezier(.22,.61,.36,1);
  --st-dur:       .18s;
}

/* ─────────────────────────────────────────────────────────────
   2. 背景分层
   ───────────────────────────────────────────────────────────── */
html[data-fs-page] body {
  background: var(--st-bg-0);
  color: var(--st-tx-2);
}

/* 区块底比页面亮一档，形成"层"而不是"一整片黑" */
html[data-fs-page] main,
html[data-fs-page] .section {
  background: transparent;
}
html[data-fs-page] .section:not(.fs-home-hero):not(.fs-dc-hero):not(.fs-sc-hero) {
  background: var(--st-bg-1);
  border-top: 1px solid var(--st-line-hair);
}

/* hero：从略亮到尽黑，做出顶光感（不用发光图，用渐变做出纵深） */
html[data-fs-page] .fs-home-hero,
html[data-fs-page] .fs-dc-hero,
html[data-fs-page] .fs-sc-hero {
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(201,175,108,.055) 0%, transparent 62%),
    linear-gradient(180deg, var(--st-bg-2) 0%, var(--st-bg-0) 72%);
}

/* 低对比度技术纹理：极弱的 1px 网格，只在区块层出现 */
html[data-fs-page] .section:not(.fs-home-hero):not(.fs-dc-hero):not(.fs-sc-hero) {
  position: relative;
}
html[data-fs-page] .section:not(.fs-home-hero):not(.fs-dc-hero):not(.fs-sc-hero)::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(226,232,240,.022) 1px, transparent 1px),
    linear-gradient(0deg,  rgba(226,232,240,.016) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%, 100% 88px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.7) 0%, transparent 78%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.7) 0%, transparent 78%);
}

/* ─────────────────────────────────────────────────────────────
   3. 文字层级
   ───────────────────────────────────────────────────────────── */

/* 主标题：三页统一金属渐变（原来只有首页有，另两页是平色） */
html[data-fs-page] .fs-dc-h1,
html[data-fs-page] .fs-sc-h1 {
  background: linear-gradient(135deg, #F7F5EF 0%, #E2CB8E 52%, #C6A768 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  letter-spacing: -.01em;
}

/* 二级标题：提亮 + 收紧字距，形成清晰层级 */
html[data-fs-page] .section-title,
html[data-fs-page] .fs-home-h2 {
  color: var(--st-tx-1);
  letter-spacing: -.012em;
}

/* 三级标题 / 卡片标题 */
html[data-fs-page] h3,
html[data-fs-page] .fs-sc-devcard-head h2 {
  color: var(--st-tx-1);
  font-weight: 600;
  letter-spacing: -.008em;
}

/* 正文与辅助：把原来偏灰的 #9AA1A9 提到 #C3C7CE，可读性明显提升 */
html[data-fs-page] main p,
html[data-fs-page] main li,
html[data-fs-page] main dd {
  color: var(--st-tx-2);
}
html[data-fs-page] main .fs-home-sub,
html[data-fs-page] main .fs-dc-sub,
html[data-fs-page] main .fs-sc-lead {
  color: var(--st-tx-3);
}

/* 微文字：标签、单位、图注 */
html[data-fs-page] main figcaption,
html[data-fs-page] main dt,
html[data-fs-page] main .fs-hint {
  color: var(--st-tx-4);
}

/* ─────────────────────────────────────────────────────────────
   4. eyebrow 统一
   现状：首页=无边框+蓝点 / 设备中心=纯文字 / 支持中心=金色描边胶囊
   统一为：等宽小字 + 前置短金线（不用蓝点，蓝点是主站的语言，工作室保持冷金）
   ───────────────────────────────────────────────────────────── */
html[data-fs-page] .fs-sechen,
html[data-fs-page] .section-eyebrow,
html[data-fs-page] .fs-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;                    /* 去掉支持中心那个描边胶囊 */
  background: none;
  border-radius: 0;
  font-family: var(--st-mono, ui-monospace, monospace);
  font-size: 11px;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--st-gold);
}
html[data-fs-page] .fs-sechen::before,
html[data-fs-page] .section-eyebrow::before,
html[data-fs-page] .fs-hero-eyebrow::before {
  content: "";
  width: 18px; height: 1px;
  background: var(--st-gold-dim);
  flex: 0 0 auto;
}
/* 首页那个蓝点保留（已在 html 里是 .dot 元素），但与金线不冲突时只留其一 */
html[data-fs-page] .fs-hero-eyebrow .dot { display: none; }

/* ─────────────────────────────────────────────────────────────
   5. section 头：统一左对齐
   现状：首页左 / 设备中心右（"｜设备信息"）/ 支持中心居中
   ───────────────────────────────────────────────────────────── */
html[data-fs-page] .fs-home-head,
html[data-fs-page] .fs-dc-head,
html[data-fs-page] .section-head {
  text-align: left;
}
html[data-fs-page] .fs-home-head > *,
html[data-fs-page] .fs-dc-head > *,
html[data-fs-page] .section-head > * {
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}
/* 设备中心那个右对齐的"｜设备信息"竖线前缀一并去掉 */
html[data-fs-page] .fs-dc-head .section-title::before,
html[data-fs-page] .fs-dc-head .section-title::after {
  content: none;
}

/* ─────────────────────────────────────────────────────────────
   6. 卡片：统一材质
   四类卡片（.fs-card / .fs-dc-dev / .fs-sc-devcard / .fs-home-dev）用同一套表面
   ───────────────────────────────────────────────────────────── */
html[data-fs-page] .fs-card,
html[data-fs-page] .fs-dc-dev,
html[data-fs-page] .fs-sc-devcard {
  background: linear-gradient(180deg, var(--st-surface) 0%, #11151A 100%);
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 18px 44px -24px rgba(0,0,0,.85);
  transition: border-color var(--st-dur) var(--st-ease),
              background var(--st-dur) var(--st-ease);
}
html[data-fs-page] .fs-card:hover,
html[data-fs-page] .fs-dc-dev:hover {
  border-color: rgba(201,175,108,.30);
  background: linear-gradient(180deg, var(--st-surface-2) 0%, #141920 100%);
}

/* 卡片内分隔线统一为弱线，不再用金色（金留给数据与强调） */
html[data-fs-page] .fs-card > * + *,
html[data-fs-page] .fs-sc-devcard-body > * + * {
  border-top-color: var(--st-line-soft);
}

/* 数据值：金，且只用在这一处强调 */
html[data-fs-page] .fs-dc-dev-k,
html[data-fs-page] .fs-sc-devcard-kv dt,
html[data-fs-page] .fs-facts dd b {
  color: var(--st-gold-hi);
}

/* ─────────────────────────────────────────────────────────────
   7. 按钮与标签：统一高度、圆角、状态
   ───────────────────────────────────────────────────────────── */
html[data-fs-page] .btn,
html[data-fs-page] .fs-home-cta .btn {
  border-radius: var(--st-radius-s);
  transition: background var(--st-dur) var(--st-ease),
              border-color var(--st-dur) var(--st-ease),
              color var(--st-dur) var(--st-ease);
}
html[data-fs-page] .btn-primary {
  background: linear-gradient(180deg, #D6BC7C 0%, var(--st-gold) 100%);
  border-color: var(--st-gold);
  color: #14100A;
}
html[data-fs-page] .btn-primary:hover {
  background: linear-gradient(180deg, var(--st-gold-hi) 0%, #D2B973 100%);
  border-color: var(--st-gold-hi);
}
html[data-fs-page] .btn-outline {
  border-color: rgba(201,175,108,.28);
  color: var(--st-tx-2);
  background: transparent;
}
html[data-fs-page] .btn-outline:hover {
  border-color: var(--st-gold);
  color: var(--st-gold-hi);
}

/* ─────────────────────────────────────────────────────────────
   8. 状态点：已连接用弱绿，不抢金
   ───────────────────────────────────────────────────────────── */
html[data-fs-page] .fs-status-dot {
  box-shadow: 0 0 0 3px rgba(255,255,255,.03);
}

/* ─────────────────────────────────────────────────────────────
   9. 响应式：三档断点，杜绝横向溢出
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  html[data-fs-page] { --st-gap: 20px; }
}
@media (max-width: 860px) {
  html[data-fs-page] {
    --st-nav-h: 56px;
    --st-gap: 16px;
    --st-gap-lg: 40px;
  }
  /* 手机上卡片圆角略收，避免"大圆角卡片"的廉价感 */
  html[data-fs-page] .fs-card,
  html[data-fs-page] .fs-dc-dev,
  html[data-fs-page] .fs-sc-devcard { border-radius: 4px; }
}
@media (max-width: 560px) {
  html[data-fs-page] main p,
  html[data-fs-page] main li { font-size: 14px; line-height: 1.85; }
}
/* 任何断点都不许横向溢出：图片与表格强制约束 */
html[data-fs-page] main img,
html[data-fs-page] main svg { max-width: 100%; height: auto; }
html[data-fs-page] main table { max-width: 100%; }

/* ─────────────────────────────────────────────────────────────
   10. 动效克减：尊重系统偏好
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html[data-fs-page] * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   11. section 头对齐修正（补丁）
   上面 §5 用 text-align 只能改文字对齐，管不到 flex 布局：
   · 设备中心 .fs-dc-head 是 flex + justify-content:space-between
     → eyebrow 在左、"设备信息"被推到右端（截图里那个右侧标题）
   · 支持中心 .section-head 同为 flex
   这里统一改成纵向 flex + 左对齐，让 eyebrow 在上、标题在下，
   与首页 .fs-home-head 的结构一致。
   ───────────────────────────────────────────────────────────── */
html[data-fs-page] .fs-dc-head,
html[data-fs-page] .section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
}

/* h2 也纳入统一的标题层级（原来只写了 .section-title） */
html[data-fs-page] .fs-dc-h2 {
  color: var(--st-tx-1);
  letter-spacing: -.01em;
  text-align: left;
}

/* 设备中心那条 3px 金竖线保留（是它自己的识别元素），
   但改成更克制的 2px，且与文字基线对齐更好 */
html[data-fs-page] .fs-dc-h2::before {
  width: 2px;
  background: linear-gradient(180deg, var(--st-gold-dim), rgba(201,175,108,.14));
}

/* ─────────────────────────────────────────────────────────────
   12. 收尾修正（截图复核后）
   ───────────────────────────────────────────────────────────── */

/* ① H1 渐变：135deg 在短标题（4 字）上跨度太大，右侧直接掉到深金、看着发暗。
      改成 100deg 并把终点提亮，让 4 字标题也能吃到完整金。 */
html[data-fs-page] .fs-dc-h1,
html[data-fs-page] .fs-sc-h1 {
  background: linear-gradient(100deg, #F7F5EF 0%, #E4CE93 62%, #CDB078 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ② 「当前设备」原来 28px 级，比同页 H1 只小一档，层级倒置。
      收到与设备中心 .fs-dc-h2 一致的 22px，三级标题归位。 */
html[data-fs-page] .fs-sc-devcard-head h2,
html[data-fs-page] .fs-sc-devcard-head .section-title {
  font-size: 22px;
  line-height: 1.4;
  margin-top: 6px;
  font-weight: 600;
}

/* ③ 卡片内纵向留白收紧：支持中心那张卡片 300px 高只有 4 行信息，太空 */
html[data-fs-page] .fs-sc-devcard-body {
  padding-top: 14px;
  padding-bottom: 14px;
}
html[data-fs-page] .fs-sc-devcard-body > * + * {
  margin-top: 10px;
}
html[data-fs-page] .fs-sc-devcard-kv {
  gap: 8px 20px;
}

/* ─────────────────────────────────────────────────────────────
   13. 两处硬修（实测后）
   ───────────────────────────────────────────────────────────── */

/* ① H1 渐变映射到「文字」而不是「元素盒」
   实测 h1 元素宽 648px，而「支持中心」实际只有约 230px ——
   渐变铺在 648px 上，文字只吃到最左侧一小段，右侧字自然发暗。
   让盒子收缩到文字宽度（fit-content），渐变才铺满四个字。 */
html[data-fs-page] .fs-dc-h1,
html[data-fs-page] .fs-sc-h1 {
  width: fit-content;
  max-width: 100%;
}

/* ② 支持中心卡片里的「当前设备」实测仍是 36px（来自 ui.css 的 main h2 clamp）。
   我的规则权重不够，这里提高选择器层级并显式覆盖 —— 只改一个属性，
   不动该元素的任何其他样式。
   依据：它与设备中心的 .fs-dc-h2（22px）是同级的三级标题，不该比 H1 只小一档。 */
html[data-fs-page] .fs-sc-devcard .fs-sc-devcard-head .section-title,
html[data-fs-page] .fs-sc-devcard .fs-sc-devcard-head h2 {
  font-size: 22px !important;
  line-height: 1.4 !important;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════
   14. 平台首页专用（2026-10-23 阶段 1）
   ─────────────────────────────────────────────────────────────────────
   ① hero 改非对称：文案列收窄、设备面板加宽 → 视觉重心偏右
   ② 新增入口矩阵 .fs-entry：主卡（调音）+ 两张次卡（设备 / 支持）
   全部锁 html[data-fs-page="home"]，不影响设备中心 / 支持中心。
   ⭐ 回滚：删本段 + 还原 index.php（备份 index.before-stage1.php）。
   ══════════════════════════════════════════════════════════════════════ */

/* ① 非对称：1.1fr / 452px（原来 1fr / 400px） */
html[data-fs-page="home"] .fs-home-hero-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 452px);
  gap: clamp(28px, 4vw, 64px);
}

/* ② 入口矩阵 */
html[data-fs-page="home"] .fs-entry {
  padding-top: clamp(40px, 6vh, 72px);
  padding-bottom: clamp(40px, 6vh, 72px);
}

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;
}

/* 主卡：有重量的深色面板 + 右侧声波装饰 + hover 提亮 */
html[data-fs-page="home"] .fs-entry-main {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(22px, 2.6vw, 34px);
  min-height: 208px;
  border: 1px solid rgba(201,175,108,.26);
  border-radius: var(--st-radius);
  background:
    radial-gradient(ellipse 70% 90% at 92% 40%, rgba(201,175,108,.10) 0%, transparent 62%),
    linear-gradient(180deg, #171C22 0%, #10141A 100%);
  text-decoration: none;
  overflow: hidden;
  transition: border-color var(--st-dur) var(--st-ease),
              transform var(--st-dur) var(--st-ease);
}
html[data-fs-page="home"] .fs-entry-main:hover {
  border-color: rgba(201,175,108,.46);
  transform: translateY(-2px);
}
html[data-fs-page="home"] .fs-entry-main:focus-visible {
  outline: 2px solid var(--st-gold);
  outline-offset: 3px;
}

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;
  color: var(--st-gold);
}
html[data-fs-page="home"] .fs-entry-h {
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600; letter-spacing: -.015em;
  color: var(--st-tx-1);
  margin-top: 2px;
}
html[data-fs-page="home"] .fs-entry-h2 {
  font-size: 17px; font-weight: 600; color: var(--st-tx-1);
  margin-top: 2px;
}
html[data-fs-page="home"] .fs-entry-d {
  max-width: 46ch;
  font-size: 13.5px; line-height: 1.8; color: var(--st-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; letter-spacing: .04em;
  color: var(--st-gold-hi);
}
html[data-fs-page="home"] .fs-entry-main:hover .fs-entry-go svg { transform: translateX(3px); }
html[data-fs-page="home"] .fs-entry-go svg { transition: transform var(--st-dur) var(--st-ease); }

/* 声波装饰：纯 CSS 竖线组，低对比度，不抢内容 */
html[data-fs-page="home"] .fs-entry-wave {
  position: absolute; right: 26px; top: 50%; transform: translateY(-50%);
  width: 132px; height: 84px;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(201,175,108,.00) 0%,
      rgba(201,175,108,.30) 12%, rgba(201,175,108,.10) 16%,
      rgba(201,175,108,.55) 26%, rgba(201,175,108,.12) 30%,
      rgba(201,175,108,.34) 40%, rgba(201,175,108,.08) 44%,
      rgba(201,175,108,.62) 54%, rgba(201,175,108,.12) 58%,
      rgba(201,175,108,.28) 68%, rgba(201,175,108,.06) 72%,
      rgba(201,175,108,.44) 82%, rgba(201,175,108,.10) 86%,
      rgba(201,175,108,.00) 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  opacity: .8;
}

/* 次卡：两张等高，弱一档材质 */
html[data-fs-page="home"] .fs-entry-side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
}
html[data-fs-page="home"] .fs-entry-sub {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px clamp(18px, 2vw, 24px);
  border: 1px solid var(--st-line-soft);
  border-radius: var(--st-radius);
  background: linear-gradient(180deg, #12161B 0%, #0E1217 100%);
  text-decoration: none;
  transition: border-color var(--st-dur) var(--st-ease),
              background var(--st-dur) var(--st-ease);
}
html[data-fs-page="home"] .fs-entry-sub:hover {
  border-color: rgba(201,175,108,.30);
  background: linear-gradient(180deg, #161B21 0%, #11161C 100%);
}
html[data-fs-page="home"] .fs-entry-sub:focus-visible {
  outline: 2px solid var(--st-gold);
  outline-offset: 3px;
}
html[data-fs-page="home"] .fs-entry-sub .fs-entry-d { font-size: 12.5px; }

/* 移动端：主次卡全部竖排，主卡不压高度 */
@media (max-width: 860px) {
  html[data-fs-page="home"] .fs-home-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  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-wave { display: none; }  /* 窄屏留白不够，去掉装饰 */
  html[data-fs-page="home"] .fs-entry-side { grid-template-rows: auto auto; }
}

/* ─────────────────────────────────────────────────────────────
   15. 去掉入口主卡的"栅栏"装饰
   原设计用竖条组当声波，实际渲染成 4 根等高竖条，像栅栏 ——
   属"无意义装饰线条"，与"极简精密工业设计"方向相反。
   改为：主卡不加图形装饰，靠金边、字重、留白承担视觉重量。
   ───────────────────────────────────────────────────────────── */
html[data-fs-page="home"] .fs-entry-wave { display: none; }