/*! studio-ui.css —— 由 scripts/build-css-bundles.py 自动拼接生成，请勿手改。
 *  拼接顺序（2026-10-18 P1-A）：
 *   1) studio-v3.css  sha256:b990d6fdbf0e827c
 *  回滚：改 header 的 link 列表即可，源文件全部保留。
 */

/* ==== 源文件：studio-v3.css ==== */
/* ============================================================================
   studio-v3.css —— 音频工作室对齐主站视觉（2026-10-17）
   ----------------------------------------------------------------------------
   工作室原本自带一套 fs-* 组件与独立导航。本轮让它并入主站外壳后，这里只做三件事：
     ① 把自带导航改成主站导航下面的「二级栏」（品牌区隐藏，避免两遍 logo）
     ② 区块节奏与卡片质感对齐首页（发丝线 / 小圆角 / 大留白）
     ③ 首屏压一层与首页一致的暗场
   字体层级已经由 inner-v3.css 统一接管（main h1/h2 那几条），此处不重复。
   回滚：删掉 header-v3.php 里 studio-v3.css 那一行即可。
   ========================================================================== */

/* ---------- ① 工作室独立导航条（方案 A · 2026-10-21） ----------
   主站导航在 /studio 下整体不渲染（header-v3.php 由 STUDIO_SOLO_NAV 控制），
   本栏成为唯一导航：品牌 + 4 项 + 返回官网。高度 64px，与主站同一套令牌。 */
:root{--header-h:64px}

/* 主站 header 是被「撑开 body 上边距」的方式让位给固定导航的；
   工作室不再渲染主站导航，这里把那段让位抵消，导航条才能贴顶。 */
body{margin-top:0!important;padding-top:0!important}

.fs-nav{
  /* 2026-10-21：改 fixed —— 主站靠给 body 让位来避开固定导航，
     工作室不再渲染主站导航，用文档流定位会多出 64px 空隙，fixed 直接绕开。 */
  position:fixed!important;top:0!important;left:0!important;right:0!important;
  margin-top:0!important;transform:none!important;z-index:80;
  background:rgba(10,10,12,.94);
  backdrop-filter:blur(16px) saturate(1.1);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
  border-bottom:1px solid var(--line-d);
  padding:0!important;
}
.fs-nav .fs-nav-inner{
  display:flex!important;flex-direction:row!important;align-items:center;
  justify-content:flex-start!important;
  gap:clamp(20px,3vw,40px);
  height:64px;max-width:1360px;margin:0 auto;
  padding:0 clamp(16px,4vw,52px)!important;
}

/* 品牌：沿用主站金色 logo（渐变 id 用 -gold，页脚那份是 hrw-swoosh，不冲突） */
.fs-nav .fs-nav-brand{
  display:flex!important;align-items:center;gap:12px;
  text-decoration:none;flex:0 0 auto;
}
.fs-nav .fs-nav-brand svg{display:block;width:96px;height:32px;flex:0 0 auto}
.fs-nav .fs-nav-brand-sub{
  font-family:var(--font-mono,ui-monospace,monospace);
  font-size:10px!important;letter-spacing:.22em!important;color:#C9AF6C!important;
  text-transform:uppercase;border:0!important;padding:0!important;
  padding-left:12px!important;border-left:1px solid rgba(201,175,108,.35)!important;
  line-height:1.2;
}

/* 主导航项 */
.fs-nav .fs-nav-menu{
  display:flex!important;align-items:center;gap:clamp(18px,2.2vw,30px)!important;
  margin-left:auto!important;
}
.fs-nav .fs-nav-item{
  position:relative;font-size:13.5px!important;color:#9AA1A9!important;
  padding:8px 0!important;border:0!important;background:none!important;
  letter-spacing:.04em;text-decoration:none;
  transition:color .22s cubic-bezier(.22,.61,.36,1);
}
.fs-nav .fs-nav-item:hover{color:#F2F1EE!important}
.fs-nav .fs-nav-item.active{color:#C9AF6C!important}
.fs-nav .fs-nav-item.active::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:#C9AF6C;
}

/* 右侧动作区 */
.fs-nav .fs-nav-actions{display:flex;align-items:center;gap:14px;flex:0 0 auto;margin-left:0}

/* 固定导航需要给内容让出高度 */
main{padding-top:64px!important}
@media (max-width:860px){ main{padding-top:56px!important} }
.fs-nav .fs-nav-back{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;color:#9AA1A9;text-decoration:none;letter-spacing:.02em;
  padding:7px 12px;border:1px solid var(--line-d);border-radius:var(--r-md,6px);
  transition:color .22s,border-color .22s,background .22s;
}
.fs-nav .fs-nav-back:hover{color:#C9AF6C;border-color:rgba(201,175,108,.45);background:rgba(201,175,108,.06)}
.fs-nav .fs-nav-back span{font-size:11px;line-height:1}

/* 移动端：勾选框驱动，不依赖 JS */
.fs-nav .fs-nav-check{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.fs-nav .fs-nav-burger{
  display:none;width:38px;height:38px;border:1px solid var(--line-d);border-radius:var(--r-md,6px);
  cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px;
}
.fs-nav .fs-nav-burger i{display:block;width:14px;height:1px;background:#C9AF6C;transition:transform .2s}

@media (max-width:860px){
  .fs-nav .fs-nav-inner{height:56px;gap:14px}
  .fs-nav .fs-nav-brand svg{height:28px;width:84px;flex:0 0 auto}
  .fs-nav .fs-nav-brand-sub{display:none}
  .fs-nav .fs-nav-back{padding:6px 10px;font-size:12px}
  .fs-nav .fs-nav-burger{display:flex}
  .fs-nav .fs-nav-menu{
    display:none!important;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0!important;
    background:#0C0C0E!important;border-bottom:1px solid var(--line-d);
    box-shadow:0 18px 40px rgba(0,0,0,.55);
    padding:6px 0 10px;
  }
  .fs-nav .fs-nav-check:checked ~ .fs-nav-menu{display:flex!important}
  .fs-nav .fs-nav-item{padding:12px clamp(16px,4vw,52px)!important;font-size:14px!important}
  .fs-nav .fs-nav-item.active::after{left:clamp(16px,4vw,52px);right:auto;width:18px;bottom:8px}
}

/* ---------- ② 区块节奏 ---------- */
.fs-home-sec{padding-top:clamp(56px,8vh,104px)!important;padding-bottom:clamp(56px,8vh,104px)!important}
.fs-home-sec + .fs-home-sec{border-top:1px solid var(--line-d)}
.fs-home-head{margin-bottom:clamp(28px,4vh,44px)!important;text-align:left!important}
.fs-home-head > *{margin-left:0!important;margin-right:auto!important}

/* 卡片：与首页同一套发丝边 + 8px 圆角 */
.fs-card,.fs-home-cap-col,.fs-home-dev-panel{
  border-radius:8px!important;
  border-color:var(--line-d)!important;
  transition:border-color .3s cubic-bezier(.22,.61,.36,1),transform .3s cubic-bezier(.22,.61,.36,1);
}
.fs-card:hover{border-color:rgba(201,175,108,.34)!important;transform:translateY(-2px)}
.fs-card.is-primary{border-color:rgba(201,175,108,.42)!important}

/* ---------- ③ 首屏 ---------- */
.fs-home-hero{
  background:
    radial-gradient(ellipse 70% 60% at 74% 12%,rgba(201,175,108,.10),transparent 62%),
    linear-gradient(180deg,#0A0A0B 0%,#0B0D10 70%,#0D0C0A 100%)!important;
  padding-top:clamp(48px,7vh,88px)!important;
  padding-bottom:clamp(44px,6vh,72px)!important;
  border-bottom:1px solid var(--line-d);
}
.fs-home-hero-grid{opacity:.55}

/* ---------- ④ 按钮与状态色 ---------- */
.fs-cta,.fs-home-cta .btn{border-radius:4px!important;letter-spacing:.02em}

/* ---------- ⑤ 移动端 ----------
   2026-10-21：原此处有 760/520 两段下沉规则（含「<520px 隐藏品牌」「高度 46px」），
   那套是为旧「二级栏」设计的；方案 A 改成独立导航条后，移动端规则统一收敛到 ① 的 860px 断点，
   这里不再重复，避免把 logo 和品牌一起藏掉。 */

/* 首屏标题与正文色对齐主站 */
.fs-home-hero-copy h1{color:#FAF6EC!important}
.fs-home-hero-copy p{color:#9AA1A9!important}

/* ══════════════════════════════════════════════════════════════════════
   2026-10-23 · 工作室首页「变小 / 变暗」修复（局部修，不改结构）
   ─────────────────────────────────────────────────────────────────────
   用户反馈：从主站点进音频工作室，感觉页面"变小了、颜色也暗了很多"。
   实测根因（1440 视口）：
     · 主站 .shell 容器 1360px，内容左边界 x=100
     · 工作室 .container 容器 1200px，内容左边界 x=172   → 窄 160px、缩进多 72px
     冲突来源：studio.css:1200 写 --container:1400px，但 studio.css:3038 又写
               html[data-fs-page="home"]{--container:1200px}，后者赢 → 1400 形同废纸
     · H1 被 studio.css 硬写 color:#FAF6EC（平色），而主站 hero 是金属渐变字 → 显闷
     · hero 固定 656px 高，内容只到 ~500px → 底部 150px 空白
     · 空状态卡片里塞了一张 70px 高的界面截图，像残图
   本段全部规则锁在工作室页作用域内（html[data-fs-page]），不影响主站与其他页面。
   ⭐ 回滚：删掉本段即可（原文备份见 backups/pre-upload-20261023/）。
   ══════════════════════════════════════════════════════════════════════ */

/* ① 容器宽度与主站对齐 —— 解决「变小」
   指南页 guide 保持 1200（既有设计要求），只放宽 home / devices / support。 */
html[data-fs-page="home"],
html[data-fs-page="devices"],
html[data-fs-page="support"]{ --container: 1360px; }

/* ② H1 换成金属渐变 —— 解决「暗」
   覆盖 studio.css 的 color:#FAF6EC!important；用 -webkit-text-fill-color 让渐变色生效。 */
.fs-home-hero-copy h1{
  background:linear-gradient(135deg,#F7F5EF 0%,#E2CB8E 46%,#C0A063 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent!important;
}

/* ③ 正文提亮一档，副标题保留层级差
   原来正文 #9AA1A9、品牌行也 #9AA1A9，两行糊在一起。 */
.fs-home-hero-copy .fs-home-sub{ color:#C5C9CF!important; }
.fs-home-hero-copy .fs-home-brand{ color:#E0C98A!important; letter-spacing:.04em; }

/* ④ 首屏占满一屏 —— 解决「底部 150px 空白」
   用 svh 而不是 vh：移动端浏览器地址栏收起时不会跳。 */
.fs-home-hero{
  min-height:calc(100svh - 64px);
  display:flex;
  align-items:center;
}
@media (max-width:860px){
  .fs-home-hero{
    min-height:0;
    align-items:flex-start;
    padding-top:clamp(24px,5vh,44px);
    padding-bottom:clamp(24px,5vh,44px);
  }
}

/* ⑤ 手机端 H1 字号 —— 原来 57.6px 在 390 宽下断成「专业音频设备调 / 音与管理平台」
   字号下调 + wbr 断点（HTML 里已插 <wbr>），让断行落在词与词之间。 */
@media (max-width:560px){
  .fs-home-hero-copy h1{
    font-size:clamp(26px,7vw,34px);
    line-height:1.34;
    /* 关键：中文默认任何字之间都能断行，所以 <wbr> 只是"优先"断点，浏览器仍会断在
       「专业音频设备调 / 音与管理平台」把"调音"劈开。keep-all 禁止 CJK 字间断行后，
       断行点只剩 HTML 里那个 <wbr> —— 于是稳定断成「专业音频设备 / 调音与管理平台」。 */
    word-break:keep-all;
  }
  /* 手机端事实行：三条竖排，去掉分隔竖线（横排时末尾那条会悬空） */
  html[data-fs-page="home"] .fs-hero-facts{
    display:block;
    margin-top:24px;
    padding-top:4px;
  }
  html[data-fs-page="home"] .fs-hero-facts li{
    display:flex;
    padding:10px 0 0;
    margin:0;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.05);
  }
  html[data-fs-page="home"] .fs-hero-facts li:last-child{ border-bottom:0; }
  html[data-fs-page="home"] .fs-hero-facts b{ font-size:17px; }
}

/* ⑥ 空状态卡片里的界面截图 —— 从「像残图」改成「有意的曲线预览」
   不删的原因：它是「我们真有界面」的证据；但原高 70px、无边框，像没加载完。 */
.fs-home-dev-panel .fs-dev-curve{
  margin-top:14px;
  border:1px solid var(--line-d, rgba(201,175,108,.18));
  border-radius:4px;
  overflow:hidden;
  background:#07080A;
}
.fs-home-dev-panel .fs-dev-curve img{
  display:block;
  width:100%;
  height:92px;
  object-fit:cover;
  object-position:center 46%;
  opacity:.9;
}

/* ⑦ 首屏高度：必须用与 studio.css 同权重的选择器才能覆盖
   （studio.css 里三条 html[data-fs-page="home"] .fs-home-hero 分别写 78vh / 72vh / 66vh，
     最后一条 66vh 在 900 高视口下 = 594px，是"底部空白"的直接原因） */
html[data-fs-page="home"] .fs-home-hero{
  /* 留 12% 露头：底部露出下一屏的标题，读者才知道页面还在继续。
     满 100svh 时下方是纯黑，观感像"页面到此为止"，也是"空"的另一半原因。 */
  min-height:calc(88svh - 64px);
  align-items:center;
}
@media (max-width:860px){
  html[data-fs-page="home"] .fs-home-hero{
    min-height:0;
    align-items:flex-start;
    padding-top:clamp(24px,5vh,44px);
    padding-bottom:clamp(28px,6vh,48px);
  }
}

/* ⑧ 真凶在这：studio.css:3054 有一条
        html[data-fs-page="home"] main .container{ max-width:1200px !important }
      它用 !important 直接盖掉了 --container 变量，所以上面 ① 改变量不生效。
      而 ui.css:394 的意图本来就是 1360（main .container{max-width:1360px}）——
      说明 1200 是历史遗留的临时收窄，与主站不一致。
      这里用同权重 + !important + 后加载，把它恢复成 1360。 */
html[data-fs-page="home"] main .container,
html[data-fs-page="devices"] main .container,
html[data-fs-page="support"] main .container{
  max-width:1360px!important;
}