/* ==========================================================================
   DESIGNAI 统一视觉系统  v2.0
   --------------------------------------------------------------------------
   目标：让工作台里的三个能力页（AI 图像生成 / 详情页复刻 / 模型配置中心）
        共用同一套视觉语言。参考：insta360.com/cn/product/insta360-x6

   引入方式：由工作台外壳（workbench）在 index.html 里 <link> 引入一次。
             三页已合并进同一个 document，不再由 nginx 逐页注入。

   作用域：选择器一律写成 `html .pane-<name> ...`。
           · 容器 .pane-home / .pane-replica / .pane-settings 由外壳渲染，
             各包住一个能力页，扮演「那一页的 <html>/<body>」；
           · 保留打头的 `html ` 是为了让本文件的特异性比各页打包 CSS 高一级
             （原写法为 `html.dai-home .x`，同为 0,2,1），这样加载顺序不影响结果；
           · 三页打包 CSS 已由 workbench/scope-selectors.js 加过同样的容器前缀，
             所以本文件与它们在同一层级上对话，不会再互相污染。

   背景：三页样式体系不同（首页 Tailwind + Bauhaus 三原色 + 硬阴影；
        复刻页手写 CSS + 变量 + 柔和蓝；配置中心手写 CSS + --st-* 令牌）。
        本文件是唯一的统一层。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · 令牌
   -------------------------------------------------------------------------- */
:root {
  --dai-brand:        #0052D1;
  --dai-brand-600:    #0046B4;
  --dai-brand-tint:   #E8F0FE;
  --dai-ink:          #1D1D1F;
  /* #76767F 在浅灰面 #F5F5F7 上仅 4.13，未达 AA；加深至 4.64 */
  --dai-ink-muted:    #6E6E77;
  --dai-ink-faint:    #A1A1A6;
  --dai-hairline:     #E4E4E7;
  --dai-surface:      #F5F5F7;
  --dai-surface-2:    #ECECEF;
  --dai-deep:         #101014;
  --dai-deep-elev:    #1C1C1F;
  --dai-success:      #0E9F6E;
  --dai-warning:      #F59E0B;
  --dai-danger:       #E5484D;

  --dai-font: "Outfit", "Inter Tight", -apple-system, BlinkMacSystemFont,
              "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;

  --dai-l1: 0 1px 2px rgba(16,16,20,.06), 0 1px 1px rgba(16,16,20,.04);
  --dai-l2: 0 8px 24px rgba(16,16,20,.08), 0 2px 6px rgba(16,16,20,.04);
  --dai-l3: 0 24px 60px rgba(16,16,20,.14), 0 8px 20px rgba(16,16,20,.06);

  /* 顶部品牌条高度。沿用导航时代的数值与变量名：配置中心与复刻页里
     还有多处 calc(100vh - var(--dai-nav-h)) 的高度算式，保持同一个值
     就不用逐处去改（语义从「导航条高」变成「顶部品牌条高」）。 */
  --dai-nav-h: 60px;
  /* 左侧导航栏宽度。新增，仅本文件与外壳使用。 */
  --dai-side-w: 220px;
}

/* 页面底色与基础排版：容器就是「这一页的 body」。
   首页 / 配置中心用浅灰面，复刻页与卫浴复刻页保持纯白（工具感）。 */
html .pane-home,
html .pane-settings {
  background: #F5F5F7;
  font-family: var(--dai-font);
  color: var(--dai-ink);
  -webkit-font-smoothing: antialiased;
}
html .pane-replica,
html .pane-bathroom {
  background: #FFFFFF;
  font-family: var(--dai-font);
  color: var(--dai-ink);
  -webkit-font-smoothing: antialiased;
}

/* 统一文本选中态 */
html .pane-home ::selection,
html .pane-settings ::selection { background: var(--dai-brand-tint); color: var(--dai-brand-600); }

/* --------------------------------------------------------------------------
   2 · 全局导航（唯一的导航）
   由工作台外壳渲染：顶部一条品牌条 <header class="site-brandbar">，
   左侧一条竖排导航 <nav class="site-sidenav">，链接带 .nav-link。
   三个能力页都不再自带导航（合并前是首页 nginx 注入、复刻页与配置中心
   各渲染一份，三处实现容易漂移）。

   v3 变更：三个 tab 从顶部横排改为左侧竖排。
     · 理由：横向长标签会挤；竖排能稳定放进「图标 + 文字」，且天然给未来的
       第四个入口留位置。
     · 高宽都走变量：--dai-nav-h 是品牌条高（沿用旧名，见令牌区注释），
       --dai-side-w 是侧栏宽。
   -------------------------------------------------------------------------- */
.site-brandbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--dai-nav-h);
  padding: 0 20px;
  background: var(--dai-deep);
  color: #fff;
  font-family: var(--dai-font);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-brandbar .brand {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
}

/* 侧栏：与内容区同高，内部可滚动（入口变多时不挤内容） */
.site-sidenav {
  flex: none;
  width: var(--dai-side-w);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 12px;
  background: var(--dai-deep);
  border-right: 1px solid rgba(255,255,255,.08);
  font-family: var(--dai-font);
  overflow-y: auto;
}

/* 裸 <a> 与 .nav-link 统一成同一种条目（外壳用 .nav-link，兼容裸 <a>）。
   侧栏是深色底，所以文字用半透明白，激活态给品牌蓝实底。 */
.site-sidenav a,
.site-sidenav .nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  height: 42px;
  padding: 0 12px;
  border-radius: 10px;
  background: transparent;
  color: rgba(255,255,255,.70);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.site-sidenav a:hover,
.site-sidenav .nav-link:hover {
  background: rgba(255,255,255,.10);
  color: #fff;
}
.site-sidenav a.active,
.site-sidenav .nav-link.active {
  background: var(--dai-brand);
  color: #fff;
}

/* 图标：统一 20px、不参与 flex 收缩，颜色跟随 currentColor */
.site-sidenav .nav-icon {
  flex: none;
  width: 20px;
  height: 20px;
  display: block;
}
.site-sidenav .nav-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   3 · 首页（Tailwind + Bauhaus → 统一语言）
   思路：把三原色收敛为「品牌蓝 + 中性」；硬偏移阴影换柔和 elevation；
        粗边框收细；直角补圆角。
   -------------------------------------------------------------------------- */

/* 3.1 文字色 */
html .pane-home .text-bauhaus-fg      { color: var(--dai-ink); }
html .pane-home .text-bauhaus-yellow  { color: var(--dai-brand); }
html .pane-home .text-gray-400        { color: var(--dai-ink-muted); }
html .pane-home .text-gray-500        { color: var(--dai-ink-muted); }
html .pane-home .text-gray-600        { color: var(--dai-ink-muted); }
html .pane-home .text-gray-700        { color: #3F3F46; }
/* 副文案原来一律改成中灰，但选中态卡片底色是品牌蓝，浅字必须留在深底上 */
html .pane-home .text-white\/70       { color: var(--dai-ink-muted); }
html .pane-home .text-white\/75       { color: rgba(255,255,255,.78); }

/* 3.2 背景色：三原色收敛 */
html .pane-home .bg-bauhaus-bg        { background-color: var(--dai-surface); }
html .pane-home .bg-bauhaus-muted     { background-color: var(--dai-surface-2); }
html .pane-home .bg-bauhaus-fg        { background-color: var(--dai-deep); }
html .pane-home .bg-bauhaus-blue      { background-color: var(--dai-brand); }
html .pane-home .bg-bauhaus-blue\/10  { background-color: rgba(0,82,209,.05); }
html .pane-home .bg-bauhaus-red       { background-color: var(--dai-brand); }
html .pane-home .bg-bauhaus-yellow    { background-color: var(--dai-brand-tint); }
html .pane-home .bg-bauhaus-yellow\/20{ background-color: rgba(0,82,209,.06); }

/* 3.3 结构条（原为红/蓝实心 header，现统一为白色浅分隔）
   判据：带 border-b-4 的是「区块标题条」，与按钮/徽标区分开 */
html .pane-home .bg-bauhaus-blue.border-b-4,
html .pane-home .bg-bauhaus-red.border-b-4 {
  background-color: #fff;
  border-bottom: 1px solid var(--dai-hairline);
  color: var(--dai-ink);
}
/* 错误提示条保留红色语义（判据：唯一带 px-4 的红底块） */
html .pane-home .bg-bauhaus-red.px-4 {
  background-color: var(--dai-danger);
  color: #fff;
}

/* 3.4 边框：粗框收细 */
html .pane-home .border,
html .pane-home .border-2,
html .pane-home .border-4,
html .pane-home .border-b-2,
html .pane-home .border-t-2,
html .pane-home .border-l-2,
html .pane-home .border-r-2   { border-width: 1px; }
html .pane-home .border-b-4    { border-bottom-width: 0; }
html .pane-home .border-bauhaus-fg,
html .pane-home .border-b-bauhaus-fg { border-color: var(--dai-hairline); }
html .pane-home .border-white  { border-color: var(--dai-hairline); }
/* 虚线区（参考图上传位）保持 2px 虚线，读作可投放区 */
html .pane-home .border-dashed {
  border-width: 2px;
  border-color: #D4D4D8;
  border-radius: 14px;
}

/* 3.5 阴影：硬偏移 → 柔和 elevation。只改 --tw-shadow，
       保留 Tailwind 的复合 box-shadow，这样 ring-* 选中态仍然生效 */
html .pane-home .shadow-hard,
html .pane-home .shadow-hard-sm { --tw-shadow: var(--dai-l1); }
html .pane-home .shadow-hard-lg { --tw-shadow: var(--dai-l2); }
/* 选中环改品牌蓝半透明 */
html .pane-home .ring-bauhaus-red { --tw-ring-color: rgba(0,82,209,.28); }

/* 3.6 圆角：按强调层级给 */
html .pane-home .shadow-hard-lg { border-radius: 20px; }
html .pane-home .shadow-hard    { border-radius: 14px; }
html .pane-home .shadow-hard-sm { border-radius: 12px; }
/* 分段控件 / KEY 输入组：内部有分隔线，裁掉溢出角 */
html .pane-home .flex.shadow-hard-sm { overflow: hidden; }

/* 3.7 交互反馈：位移式点按 → 轻微缩放 */
html .pane-home .btn-press:active {
  transform: scale(.975);
  box-shadow: none;
}

/* 3.8 装饰：点阵网格与网格化圆点过重，去掉/减淡 */
html .pane-home .dot-grid { background-image: none; }

/* 3.10 清除 Bauhaus 遗留几何装饰（旋转方块 / 大圆）——非功能性，
       全局统一留白节奏后不再需要 */
html .pane-home .bg-bauhaus-blue\/10,
html .pane-home .bg-bauhaus-yellow\/20 { display: none; }

/* 3.11 品牌标记 ●■▲：原为三原色，重配色后会花成「蓝圆 + 浅蓝方 + 浅灰空三角」，
       统一为单色品牌蓝，读作一个完整标识。
       :not(.btn-press) 排除同样带 bg-bauhaus-yellow + border-2 的按钮 */
html .pane-home .bg-bauhaus-yellow.border-2:not(.btn-press) {
  background-color: var(--dai-brand);
  border-color: transparent;
}
/* 顶部「设置」按钮（唯一带 .shadow-hard 的黄底按钮）：实心品牌蓝 + 白字。
   默认 text-bauhaus-fg 会把深色字压在蓝底上，对比度只有 2.51 */
html .pane-home .bg-bauhaus-yellow.border-2.btn-press.shadow-hard {
  background-color: var(--dai-brand);
  color: #fff;
  border-color: transparent;
}
/* 小徽标（STD / VIP / FLARE / 2.5）：直角过于 Bauhaus，收 6px 圆角 */
html .pane-home .bg-bauhaus-yellow.border { border-radius: 6px; }

html .pane-home .bg-bauhaus-blue.border-b-4 .bg-bauhaus-red { border-color: transparent; }
/* 三角形由 border-bottom 构成，内嵌白色三角造成「空心」，实心化 */
html .pane-home .border-b-bauhaus-fg { border-bottom-color: var(--dai-brand); }
html .pane-home .border-b-bauhaus-fg .border-b-white { display: none; }

/* 3.12 悬停态：原站一律转黄/转红，不改的话白色卡片一悬停就变黄 */
html .pane-home .hover\:bg-bauhaus-red:hover        { background-color: var(--dai-danger); }
html .pane-home .hover\:bg-bauhaus-red\/90:hover    { background-color: var(--dai-brand-600); }
html .pane-home .hover\:bg-bauhaus-yellow:hover     { background-color: var(--dai-brand-tint); }
html .pane-home .hover\:bg-bauhaus-yellow\/80:hover { background-color: #DCE8FB; }
html .pane-home .hover\:bg-bauhaus-yellow\/90:hover { background-color: var(--dai-brand-600); }
html .pane-home .hover\:bg-bauhaus-muted:hover      { background-color: var(--dai-surface-2); }
html .pane-home .hover\:text-bauhaus-red:hover      { color: var(--dai-brand); }
html .pane-home .hover\:text-bauhaus-fg:hover       { color: var(--dai-ink); }

/* app 头左右留白对齐复刻页 */
html .pane-home .bg-bauhaus-blue.border-b-4 > div { padding-left: 32px; padding-right: 32px; }

/* 3.9 遮罩与滚动条 */
html .pane-home .lightbox-backdrop {
  background: rgba(16,16,20,.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
html .pane-home ::-webkit-scrollbar-track { background: var(--dai-surface); }
html .pane-home ::-webkit-scrollbar-thumb {
  background: #D4D4D8;
  border: 2px solid var(--dai-surface);
  border-radius: 999px;
}
html .pane-home ::-webkit-scrollbar-thumb:hover { background: var(--dai-ink-faint); }

/* --------------------------------------------------------------------------
   4 · 复刻页 / 卫浴复刻页（手写 CSS + 变量 → 统一语言）
   该页几乎全部由 CSS 变量驱动。变量原本定义在它的 :root 上，合并后归到
   容器上（.pane-replica）；这里直接覆盖同一元素即可整体换肤 ——
   注意必须是容器本身，挂到更外层会被容器自身的定义盖住。

   卫浴复刻页（.pane-bathroom）是复刻页的完整副本，两页视觉一致，
   因此这里用**并列选择器**共用同一组规则：主题层只有一份实现，
   改一处两页同步，不会各自漂移。
   -------------------------------------------------------------------------- */
html .pane-replica,
html .pane-bathroom {
  --bg:         #FFFFFF;
  --surface:    #FFFFFF;
  --panel:      #F5F5F7;
  --panel-2:    #ECECEF;

  --ink:        #1D1D1F;
  --ink-soft:   #6E6E77;
  --ink-faint:  #82828B;

  --edge:       #E4E4E7;
  --edge-soft:  #F0F0F2;

  --primary:    #0052D1;
  --primary-600:#0046B4;
  --primary-50: #E8F0FE;

  --secondary:  #0E9F6E;
  --secondary-50:#E7F7F1;
  --accent:     #F59E0B;
  --accent-50:  #FFF7E6;

  --ok:         #0E9F6E;
  --err:        #E5484D;
  --err-bg:     #FEF0F0;
  --err-edge:   #FBD5D6;

  /* 圆形体系对齐首页 */
  --radius:     20px;
  --radius-lg:  20px;
  --radius-md:  14px;
  --radius-sm:  10px;

  --font: var(--dai-font);
  --maxw: 1120px;
}

/* 顶部 app 头：分隔线由 2px 收细为 hairline。
   `top` 归零而不是 var(--dai-nav-h)：v3 起滚动条落在 .site-content 上
   （品牌条与侧栏在滚动区之外、始终可见），sticky 的基准是这个滚动容器，
   再减一次品牌条高度会在顶部留出一道空白。 */
html .pane-replica .app-header,
html .pane-bathroom .app-header {
  top: 0;
  padding: 14px 32px;
  border-bottom: 1px solid var(--edge);
}
html .pane-replica .app-main,
html .pane-bathroom .app-main   { padding: 28px 32px 56px; }
html .pane-replica .brand-logo,
html .pane-bathroom .brand-logo { border-radius: 12px; }
/* 未激活步骤序号原为 ink-faint，在 #F5F5F7 上只有 2.36，提为 ink-soft（4.64） */
html .pane-replica .stepper-dot,
html .pane-bathroom .stepper-dot{ border-radius: 10px; color: var(--ink-soft); }
/* 步骤说明属功能性文案，一并提到 ink-soft；dropzone 示例保持三级灰 */
html .pane-replica .stepper-desc,
html .pane-bathroom .stepper-desc{ color: var(--ink-soft); }
html .pane-replica .stepper,
html .pane-bathroom .stepper    { padding: 24px 32px 10px; }
html .pane-replica .app-footer,
html .pane-bathroom .app-footer {
  background: var(--dai-deep);
  color: rgba(255,255,255,.55);
}

/* 装饰性光斑：原为蓝/琥珀/绿多色，收敛为单色品牌蓝 */
html .pane-replica .sky i:nth-child(1),
html .pane-bathroom .sky i:nth-child(1) { background: rgba(0,82,209,.055); }
html .pane-replica .sky i:nth-child(2),
html .pane-bathroom .sky i:nth-child(2) { background: rgba(0,82,209,.040); }
html .pane-replica .sky i:nth-child(3),
html .pane-bathroom .sky i:nth-child(3) { background: rgba(0,82,209,.032); }
html .pane-replica .sky i:nth-child(4),
html .pane-bathroom .sky i:nth-child(4) { background: rgba(0,82,209,.026); }
html .pane-replica .sky:after,
html .pane-bathroom .sky:after          { border-color: rgba(0,82,209,.07); }