/* ==========================================================================
   DESIGNAI 统一视觉系统  v3.0
   --------------------------------------------------------------------------
   目标：让工作台里的八个能力页共用同一套视觉语言。
        原则一句话：**界面退到产品背后** —— 图片与表格是主角，控件只保留
        能解释状态所必需的部分。

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

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

   v3.0 相对 v2.0 的变化：
     ① 令牌重写：一个动作蓝 + 完整灰阶 + 三组语义色，字号收成六级；
     ② 导航从「顶部品牌条 + 左侧栏」收成**单条左侧栏**，品牌进栏内并分组；
     ③ 新增页面标题条（.dai-pagehead），替掉各页各写一版的品牌式页头；
     ④ 新增全局组件层（弹层 / 大图 / 状态胶囊 / 焦点环），
        这三个东西原本在三个 tab 里各有一套实现。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · 令牌
   -------------------------------------------------------------------------- */
:root {
  /* ── Notion 风格令牌（v4 · 2026-11-03） ────────────────────────────────
   * 低饱和暖灰 + 白底 + 单一强调蓝。取值对齐 Notion 桌面端：
   *   文字 37352F / 次级 787774 / 弱化 9B9A97；侧栏 F7F7F5；
   *   强调色 = 深灰 37352F（v4.1 由蓝改灰）；语义色同样无色化（灰阶深浅区分，v4.2）。
   * 圆角收敛到 4/6/8/10，阴影几乎归零（弹层靠 1px 环 + 轻投影）。
   * ---------------------------------------------------------------------- */

  /* 动作色：全站唯一强调色 = 深灰（Notion 黑按钮色系）。
     --dai-onbrand：强调色填充上的文字色 —— 亮色模式深灰底配白字；
     暗色模式按钮翻成浅灰底，字必须跟着翻深，否则白字在浅灰上不可读。 */
  --dai-brand:        #37352F;
  --dai-brand-600:    #191919;
  --dai-brand-tint:   #F1F1EF;
  --dai-onbrand:      #FFFFFF;

  /* 墨与灰阶：Notion 的暖黑，不是冷灰 */
  --dai-ink:          #37352F;
  --dai-ink-muted:    #787774;   /* 4.6:1，正文级安全 */
  --dai-ink-faint:    #9B9A97;   /* 仅装饰 / 占位，不作正文 */
  --dai-ink-soft:     #4B4A45;

  /* 面：白底为主，浅灰背景块区分区域（Notion 的 callout / 面板做法） */
  --dai-surface:      #F7F7F5;
  --dai-surface-2:    #EFEFEE;
  --dai-pearl:        #FBFBFA;
  --dai-canvas:       #FFFFFF;

  /* 交互态填充：Notion 侧栏 / 菜单项的 hover 与选中就是两级透明黑 */
  --dai-hover:        rgba(55, 53, 47, 0.055);
  --dai-active:       rgba(55, 53, 47, 0.09);

  /* 描边：弱化分割线，浅色背景块负责分区 */
  --dai-hairline:     #E9E9E7;
  --dai-hairline-soft:#F1F1EF;

  /* 深色面（页脚 / 遮罩内文字）——Notion 深色模式的那组灰 */
  --dai-deep:         #2F3437;
  --dai-deep-elev:    #383E42;
  --dai-deep-line:    #454B4F;

  /* 语义色：v4.2 全部并入无色系（黑白灰），层次靠灰阶深浅区分 ——
     danger 最近黑、success 居中、warning 最浅；底色块统一用浅灰面。
     用户明确要求全站无彩色。 */
  --dai-success:      #37352F;
  --dai-success-tint: #F1F1EF;
  --dai-warning:      #6F6E69;
  --dai-warning-tint: #F4F4F2;
  --dai-danger:       #191919;
  --dai-danger-tint:  #EFEFEE;

  /* 字体：简洁无衬线，系统栈（国内不引外部字体） */
  --dai-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --dai-font-num: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas,
    monospace;

  /* 字阶：40 / 28 / 21 / 17 / 14 / 12（v3 体系不变） */
  --dai-t1: 40px;  --dai-t1-lh: 1.20;
  --dai-t2: 28px;  --dai-t2-lh: 1.28;
  --dai-t3: 21px;  --dai-t3-lh: 1.33;
  --dai-t4: 17px;  --dai-t4-lh: 1.53;
  --dai-t5: 14px;  --dai-t5-lh: 1.43;
  --dai-t6: 12px;  --dai-t6-lh: 1.50;

  /* 间距：4 基数（v3 体系不变） */
  --dai-s1: 8px;
  --dai-s2: 12px;
  --dai-s3: 16px;
  --dai-s4: 24px;
  --dai-s5: 32px;
  --dai-s6: 48px;
  --dai-s7: 80px;

  /* 圆角：克制。控件 4 / 输入 6 / 卡片 8 / 弹层 10 */
  --dai-r-xs: 4px;
  --dai-r-sm: 6px;
  --dai-r-md: 8px;
  --dai-r-lg: 10px;
  --dai-r-pill: 999px;

  /* 阴影：几乎无。卡片无影，弹层靠 1px 环 + 一层轻投影（Notion 菜单的做法） */
  --dai-l1: 0 1px 2px rgba(15, 15, 15, 0.04);
  --dai-l2: 0 0 0 1px rgba(15, 15, 15, 0.05), 0 3px 6px rgba(15, 15, 15, 0.07),
    0 9px 24px rgba(15, 15, 15, 0.09);
  --dai-l3: 0 0 0 1px rgba(15, 15, 15, 0.05), 0 9px 36px rgba(15, 15, 15, 0.18);

  /* 焦点环：2px 强调色（深灰） */
  --dai-focus: 0 0 0 2px rgba(55, 53, 47, 0.4);

  /* 布局尺寸（v3 体系不变） */
  --dai-nav-h: 0px;
  --dai-side-w: 240px;
  /* 侧栏底色：亮色 = 内容面同款浅灰；深色模式翻成 Notion 的 #202020 */
  --dai-side-bg: #F7F7F5;
  --dai-home-head-h: 104px;
}

/* ── 深色模式 ────────────────────────────────────────────────────────────
 * 入口有三条优先级：html[data-theme="dark"] 显式指定 >
 * prefers-color-scheme 跟随系统（由 index.html 的预置脚本落到 data-theme）。
 * 只翻令牌值，组件规则零改动 —— v3 起所有组件都只认变量，这一层才养得起。
 * ---------------------------------------------------------------------- */
html[data-theme="dark"] {
  --dai-brand:        #EDEDEB;   /* 深色上强调色翻浅灰：深灰按钮在暗底上会消失 */
  --dai-brand-600:    #FFFFFF;   /* hover 提亮 */
  --dai-brand-tint:   #2E2E2E;
  --dai-onbrand:      #191919;

  --dai-ink:          #D4D4D4;
  --dai-ink-muted:    #9B9B9B;
  --dai-ink-faint:    #6F6F6F;
  --dai-ink-soft:     #C3C3C3;

  /* 页面 #191919，卡片/面板 #202020，再提一层 #2A2A2A —— Notion 深色的三级 */
  --dai-surface:      #191919;
  --dai-surface-2:    #2A2A2A;
  --dai-pearl:        #1B1B1B;
  --dai-canvas:       #202020;

  --dai-hover:        rgba(255, 255, 255, 0.07);
  --dai-active:       rgba(255, 255, 255, 0.11);

  --dai-hairline:     #373737;
  --dai-hairline-soft:#2C2C2C;

  --dai-deep:         #101010;
  --dai-deep-elev:    #1A1A1A;
  --dai-deep-line:    #2E2E2E;

  --dai-success:      #D4D4D4;
  --dai-success-tint: #2E2E2E;
  --dai-warning:      #9B9B9B;
  --dai-warning-tint: #2E2E2E;
  --dai-danger:       #FFFFFF;
  --dai-danger-tint:  #2E2E2E;

  --dai-l1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --dai-l2: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 3px 6px rgba(0, 0, 0, 0.3),
    0 9px 24px rgba(0, 0, 0, 0.4);
  --dai-l3: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 9px 36px rgba(0, 0, 0, 0.55);

  --dai-focus: 0 0 0 2px rgba(255, 255, 255, 0.4);

  --dai-side-bg: #202020;
}

/* 页面底色与基础排版：容器就是「这一页的 body」。
   能力页统一用浅灰面（画布），复刻类页面保持纯白（工具感、贴图更准）。 */
html .pane-home,
html .pane-settings {
  background: var(--dai-surface);
  font-family: var(--dai-font);
  color: var(--dai-ink);
  -webkit-font-smoothing: antialiased;
}
html .pane-replica,
html .pane-bathroom {
  background: var(--dai-canvas);
  font-family: var(--dai-font);
  color: var(--dai-ink);
  -webkit-font-smoothing: antialiased;
}

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

/* --------------------------------------------------------------------------
   2 · 壳层：单条左侧导航
   --------------------------------------------------------------------------
   v3.0 把「顶部品牌条 + 左侧栏」收成一条：品牌进栏顶、导航分组、
   账号固定栏底。少一条横贯全屏的深色条，内容区多出 60px 高度，
   纵向视觉重心也从「两条边」收成「一条边」。

   v4（Notion 化）：深色栏翻成 **Notion 浅灰栏**（#F7F7F5 / 深色模式 #202020）。
   激活态跟着 Notion 的做法：**两级透明黑填充**，不再画左侧 2px 蓝条 ——
   浅灰栏上铺饱和蓝块会把注意力抢到导航上，而用户 90% 的时间在内容区。
   -------------------------------------------------------------------------- */
.site-sidenav {
  flex: none;
  width: var(--dai-side-w);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 20px 14px 12px;
  background: var(--dai-side-bg);
  border-right: 1px solid var(--dai-hairline);
  font-family: var(--dai-font);
  overflow-y: auto;
}

/* 品牌：标记 + 名称 + 一句副标。它是导航的起点，不是一条横条。 */
.site-sidenav .nav-brand {
  display: flex;
  align-items: center;
  /* 8 + 22 + 8 = 38，加上栏左留白 14，品牌名的左沿正好落在 52 ——
     与导航项文字的左沿同一条线（图标 18 + 间距 10 + 24 = 52）。 */
  gap: 8px;
  padding: 2px 8px 20px;
}
.site-sidenav .nav-brand-mark {
  flex: none;
  width: 22px;
  height: 22px;
  display: block;
}
.site-sidenav .nav-brand-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--dai-ink);
  line-height: 1.3;
}
.site-sidenav .nav-brand-sub {
  margin-top: 1px;
  font-size: 10.5px;
  color: var(--dai-ink-faint);
  line-height: 1.3;
}

/* 分组标签：10px 半透明，只做定位用，不参与阅读 */
.site-sidenav .nav-group {
  padding: 16px 10px 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .09em;
  color: var(--dai-ink-faint);
  line-height: 1;
}
/* 第一个分组紧贴品牌，不要再多出一段空白 */
.site-sidenav .nav-brand + .nav-group { padding-top: 2px; }

/* 裸 <a> 与 .nav-link 统一成同一种条目（外壳用 .nav-link，兼容裸 <a>） */
.site-sidenav a,
.site-sidenav .nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 10px;
  border-radius: var(--dai-r-xs);
  background: transparent;
  color: var(--dai-ink-soft);
  text-decoration: none;
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
  transition: background .16s ease, color .16s ease;
}
/* hover 与选中：两级透明黑填充（--dai-hover / --dai-active），
   深浅色模式各自翻自己的值，这条规则不用动。 */
.site-sidenav a:hover,
.site-sidenav .nav-link:hover {
  background: var(--dai-hover);
  color: var(--dai-ink);
}
.site-sidenav a.active,
.site-sidenav .nav-link.active {
  background: var(--dai-active);
  color: var(--dai-ink);
  font-weight: 500;
}

/* 键盘焦点：只在 :focus-visible 时给环，鼠标点击不出现 */
.site-sidenav a:focus-visible,
.site-sidenav .nav-link:focus-visible {
  outline: none;
  box-shadow: var(--dai-focus);
}

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

/* 主题切换（v4 新增）：与导航条目同一套度量，视觉上是导航的一部分，
   位置上贴着账号区 —— 它是设置级动作，不是能力页。 */
.site-sidenav .nav-theme {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  margin-top: 8px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--dai-r-xs);
  background: transparent;
  color: var(--dai-ink-soft);
  font-family: inherit;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.site-sidenav .nav-theme:hover {
  background: var(--dai-hover);
  color: var(--dai-ink);
}
.site-sidenav .nav-theme:focus-visible {
  outline: none;
  box-shadow: var(--dai-focus);
}
.site-sidenav .nav-theme-icon {
  flex: none;
  width: 18px;
  height: 18px;
  display: block;
}

/* 品牌 mark：浅灰栏上描边用发丝线的深化色，方块用强调蓝；
   深色模式两条各翻各的值。 */
.site-sidenav .nav-brand-mark .mk-frame {
  stroke: color-mix(in srgb, var(--dai-ink) 38%, transparent);
}
.site-sidenav .nav-brand-mark .mk-dot {
  fill: var(--dai-brand);
}

/* --------------------------------------------------------------------------
   3 · 页面标题条
   --------------------------------------------------------------------------
   每个能力页顶部都需要同一件事：这一页叫什么、一句话说明它产出什么、
   右侧放当前状态。以前三页各写一版（首页是品牌横幅、复刻页是 logo 块、
   配置中心是 st-header），既重复又互相不像。

   宽度与页面主内容的容器（max-w-7xl + px-4/6）对齐，由调用方给 class，
   这里只管排版。
   -------------------------------------------------------------------------- */
html .pane-home .dai-pagehead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--dai-s4);
  padding-top: 26px;
  /* 下留白交给页面主内容的 py-8 —— 页头自己再垫一段，两段会叠成 48px 的洞 */
  padding-bottom: 0;
}
html .pane-home .dai-pagehead__title {
  font-size: var(--dai-t2);
  line-height: var(--dai-t2-lh);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--dai-ink);
}
html .pane-home .dai-pagehead__sub {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--dai-ink-muted);
}
html .pane-home .dai-pagehead__side {
  display: flex;
  align-items: center;
  gap: var(--dai-s2);
  flex: none;
}

/* 状态胶囊：一个点 + 一句话。点是颜色，字是原因 —— 不靠颜色单独承载语义。 */
html .pane-home .dai-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--dai-hairline);
  border-radius: var(--dai-r-pill);
  background: var(--dai-canvas);
  font-size: 12px;
  line-height: 1;
  color: var(--dai-ink-soft);
  white-space: nowrap;
}
html .pane-home .dai-pill__dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: var(--dai-r-pill);
  background: var(--dai-ink-faint);
}
html .pane-home .dai-pill.is-ok   .dai-pill__dot { background: var(--dai-success); }
html .pane-home .dai-pill.is-warn .dai-pill__dot { background: var(--dai-warning); }
html .pane-home .dai-pill.is-bad  .dai-pill__dot { background: var(--dai-danger); }
html .pane-home .dai-pill__hint {
  font-size: 12px;
  color: var(--dai-ink-muted);
}

/* 3.4 提示条：一屏最多出现一条。语义靠左侧底色块，不靠整块大色底 —— 整块铺色
   会和结果图抢注意力，而它多数时候只是一句「你还没配 Key」。 */
html .pane-home .dai-notice {
  padding: 12px 14px;
  border: 1px solid var(--dai-hairline);
  border-radius: var(--dai-r-md);
  background: var(--dai-canvas);
}
html .pane-home .dai-notice__title {
  display: block;
  margin-bottom: 3px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
}
html .pane-home .dai-notice__text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--dai-ink-soft);
}
html .pane-home .dai-notice.is-warn {
  background: var(--dai-warning-tint);
  border-color: color-mix(in srgb, var(--dai-warning) 32%, transparent);
}
html .pane-home .dai-notice.is-warn .dai-notice__title { color: var(--dai-warning); }
html .pane-home .dai-notice.is-error {
  background: var(--dai-danger-tint);
  border-color: #F6D3D6;
}
html .pane-home .dai-notice.is-error .dai-notice__title,
html .pane-home .dai-notice.is-error .dai-notice__text { color: var(--dai-danger); }
html .pane-home .dai-notice.is-ok {
  background: var(--dai-success-tint);
  border-color: #CFE8D9;
}
html .pane-home .dai-notice.is-ok .dai-notice__text { color: var(--dai-success); }

/* --------------------------------------------------------------------------
   3.5 · 首页两块主体：生图控制台 + 结果墙
   --------------------------------------------------------------------------
   控制台是「头部固定 + 中间独立滚动 + 主按钮常驻」的三段式。
   改这个结构的理由很具体：整页一起滚的时候，参数一多「生成图片」就被滚出
   视口，用户改完参数得先往回滚才能点 —— 这是这一页最贵的体验缺口。

   结果墙的重点是「破坏性动作离开主操作区」，以及「批量动作只在真有选中时
   出现」，不再用一个常驻的禁用按钮去暗示它存在。
   -------------------------------------------------------------------------- */

/* 3.5.0 左列：整列钉在一屏内，面板吃剩余高度
   只给面板写 max-height 不够 —— 上面还有一条「生图不可用」提示时，
   两段高度相加会超过视口，主按钮照样被顶出去。让列做约束方，面板做弹性方。 */
html .pane-home .dai-col {
  display: flex;
  flex-direction: column;
  gap: var(--dai-s3);
}
@media (min-width: 1024px) {
  html .pane-home .dai-col {
    position: sticky;
    top: 24px;
    /* 页头高 + 上下各 24 的呼吸位，全部从可用高度里扣掉 */
    max-height: calc(100vh - var(--dai-home-head-h) - 48px);
  }
  html .pane-home .dai-col .dai-gen {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }
  html .pane-home .dai-col > .dai-notice { flex: none; }
}

/* 3.5.1 控制台 */
html .pane-home .dai-gen {
  display: flex;
  flex-direction: column;
  /* 窄屏（左列不再 sticky）时的兜底：整块不超过一屏，中间那段自己滚 */
  max-height: calc(100vh - var(--dai-home-head-h));
  background: var(--dai-canvas);
  border: 1px solid var(--dai-hairline);
  border-radius: var(--dai-r-lg);
  overflow: hidden;
}
html .pane-home .dai-gen__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: var(--dai-s3);
}
html .pane-home .dai-gen__foot {
  flex: none;
  padding: 12px 20px;
  border-top: 1px solid var(--dai-hairline);
  background: var(--dai-canvas);
}

/* 3.5.2 字段三件套：标签 / 控件 / 说明 */
html .pane-home .dai-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--dai-ink-muted);
  margin-bottom: 6px;
}
html .pane-home .dai-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--dai-s2);
}
html .pane-home .dai-label-row .dai-label { margin-bottom: 6px; }
html .pane-home .dai-label__side {
  font-size: 11px;
  color: var(--dai-ink-faint);
}
html .pane-home .dai-hint {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.55;
  color: var(--dai-ink-faint);
}
html .pane-home .dai-field {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--dai-hairline);
  border-radius: var(--dai-r-sm);
  background: var(--dai-canvas);
  color: var(--dai-ink);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.3;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
html .pane-home .dai-field:hover { border-color: #CFCFD4; }
html .pane-home .dai-field:focus {
  outline: none;
  border-color: var(--dai-brand);
  box-shadow: var(--dai-focus);
}
/* 多行输入：左上对齐、可拖动高度，右内边距不需要让位给箭头 */
html .pane-home .dai-field--area {
  height: auto;
  min-height: 88px;
  padding: 10px 12px;
  line-height: 1.55;
  resize: vertical;
  cursor: text;
}
html .pane-home .dai-field--area:focus { border-color: var(--dai-brand); }
html .pane-home .dai-select { position: relative; }
html .pane-home .dai-chev {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--dai-ink-faint);
  pointer-events: none;
}

/* 3.5.3 分段控件：选中用「白色滑块」，不用蓝色填充 —— 蓝色留给主按钮 */
html .pane-home .dai-seg {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--dai-r-pill);
  background: var(--dai-surface);
}
html .pane-home .dai-seg__item {
  flex: 1 1 0;
  height: 34px;
  border: 0;
  border-radius: var(--dai-r-pill);
  background: transparent;
  color: var(--dai-ink-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
html .pane-home .dai-seg__item:hover:not(.is-on):not(.is-off) { color: var(--dai-ink); }
html .pane-home .dai-seg__item.is-on {
  background: var(--dai-canvas);
  color: var(--dai-ink);
  font-weight: 500;
  box-shadow: var(--dai-l1);
}
html .pane-home .dai-seg__item.is-off {
  color: var(--dai-ink-faint);
  cursor: not-allowed;
}
html .pane-home .dai-seg__item:focus-visible {
  outline: none;
  box-shadow: var(--dai-focus);
}

/* 3.5.4 参考图投放区 */
html .pane-home .dai-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 12px;
  border: 1.5px dashed #D4D4D8;
  border-radius: var(--dai-r-md);
  background: var(--dai-pearl);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
html .pane-home .dai-drop:hover { border-color: #B9B9C0; }
html .pane-home .dai-drop.is-over {
  border-color: var(--dai-brand);
  background: var(--dai-brand-tint);
}
html .pane-home .dai-drop__plus {
  font-size: 18px;
  line-height: 1;
  color: var(--dai-ink-faint);
}
html .pane-home .dai-drop__title {
  margin: 0;
  font-size: 13px;
  color: var(--dai-ink-soft);
}
html .pane-home .dai-drop__meta {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--dai-ink-faint);
  text-align: center;
}
html .pane-home .dai-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
html .pane-home .dai-thumb {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: var(--dai-r-xs);
  overflow: visible;
}
html .pane-home .dai-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--dai-r-xs);
  border: 1px solid var(--dai-hairline);
}
html .pane-home .dai-thumb__x {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--dai-hairline);
  border-radius: var(--dai-r-pill);
  background: var(--dai-canvas);
  color: var(--dai-ink-muted);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
html .pane-home .dai-thumb__x:hover {
  border-color: var(--dai-danger);
  color: var(--dai-danger);
}

/* 3.5.5 文字按钮：主色 / 迷你 / 静默（静默是破坏性动作的落点） */
html .pane-home .dai-link {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--dai-brand);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
}
html .pane-home .dai-link:hover { color: var(--dai-brand-600); }
html .pane-home .dai-link.is-mini { font-size: 11px; font-weight: 400; }
html .pane-home .dai-link.is-quiet { color: var(--dai-ink-muted); font-weight: 400; }
html .pane-home .dai-link.is-quiet:hover { color: var(--dai-danger); }
html .pane-home .dai-link:focus-visible {
  outline: none;
  box-shadow: var(--dai-focus);
  border-radius: 4px;
}

/* 3.5.6 主按钮 */
html .pane-home .dai-primary {
  display: block;
  width: 100%;
  height: 46px;
  border: 0;
  border-radius: var(--dai-r-pill);
  background: var(--dai-brand);
  color: var(--dai-onbrand, #fff);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .15s ease;
}
html .pane-home .dai-primary:hover:not(:disabled) { background: var(--dai-brand-600); }
html .pane-home .dai-primary:active:not(:disabled) { transform: scale(.99); }
html .pane-home .dai-primary:disabled {
  background: var(--dai-surface-2);
  color: var(--dai-ink-faint);
  cursor: not-allowed;
}
html .pane-home .dai-primary:focus-visible { outline: none; box-shadow: var(--dai-focus); }

/* 3.5.7 结果墙 */
html .pane-home .dai-wall {
  background: var(--dai-canvas);
  border: 1px solid var(--dai-hairline);
  border-radius: var(--dai-r-lg);
}
html .pane-home .dai-wall__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dai-s4);
  padding: 14px 20px;
  border-bottom: 1px solid var(--dai-hairline);
}
html .pane-home .dai-wall__titlegroup {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
html .pane-home .dai-wall__title {
  margin: 0;
  font-size: var(--dai-t3);
  line-height: 1.3;
  font-weight: 600;
  color: var(--dai-ink);
  white-space: nowrap;
}
html .pane-home .dai-wall__meta {
  font-size: 12px;
  color: var(--dai-ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html .pane-home .dai-wall__tools {
  display: flex;
  align-items: center;
  gap: var(--dai-s3);
  flex: none;
}

/* 3.5.8 网格与卡片 */
html .pane-home .dai-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: var(--dai-s3);
  padding: 16px 20px 20px;
}
html .pane-home .dai-tile {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--dai-hairline);
  border-radius: var(--dai-r-md);
  background: var(--dai-canvas);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
html .pane-home .dai-tile:hover { border-color: #D3D3D8; }
html .pane-home .dai-tile.is-sel {
  border-color: var(--dai-brand);
  box-shadow: 0 0 0 1px var(--dai-brand);
}
html .pane-home .dai-tile__img {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--dai-surface);
  cursor: zoom-in;
}
html .pane-home .dai-tile__img.is-failed { cursor: default; }
html .pane-home .dai-tile__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
html .pane-home .dai-tile__dead {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0 10px;
  text-align: center;
}
html .pane-home .dai-tile__dead-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--dai-ink-soft);
}
html .pane-home .dai-tile__dead-meta {
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--dai-ink-faint);
}
/* 勾选框：未选中是半透明圆环，选中才是实底 —— 图片本身不该被控件压住 */
html .pane-home .dai-check {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: var(--dai-r-pill);
  background: rgba(16,16,20,.32);
  color: transparent;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: background .15s ease, border-color .15s ease;
}
html .pane-home .dai-check:hover { background: rgba(16,16,20,.5); }
html .pane-home .dai-check.is-on {
  background: var(--dai-brand);
  border-color: var(--dai-brand);
  color: var(--dai-onbrand, #fff);
}
html .pane-home .dai-check:disabled { opacity: .35; cursor: default; }
html .pane-home .dai-tile__dl {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: rgba(255,255,255,.92);
  color: var(--dai-ink);
  cursor: pointer;
}
html .pane-home .dai-tile__dl:hover { background: var(--dai-canvas); }
html .pane-home .dai-tile__dl:disabled { opacity: .35; cursor: default; }
html .pane-home .dai-tile__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 10px 10px;
}
html .pane-home .dai-tile__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
html .pane-home .dai-badge {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--dai-surface);
  color: var(--dai-ink-muted);
  font-size: 10px;
  letter-spacing: .04em;
  white-space: nowrap;
}
html .pane-home .dai-tile__ratio,
html .pane-home .dai-tile__time {
  font-size: 10.5px;
  color: var(--dai-ink-faint);
  white-space: nowrap;
}
html .pane-home .dai-tile__prompt {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--dai-ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
html .pane-home .dai-tile__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 1px;
}
html .pane-home .dai-tile__acts {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 3.5.9 空态 */
html .pane-home .dai-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 72px 16px;
}
html .pane-home .dai-empty__box {
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  border: 1.5px dashed #D4D4D8;
  border-radius: var(--dai-r-sm);
}
html .pane-home .dai-empty__title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--dai-ink-soft);
}
html .pane-home .dai-empty__meta {
  margin: 0;
  font-size: 12px;
  color: var(--dai-ink-faint);
}

/* 3.5.10 浮动批量条：勾了图才出现，贴在视口底部 */
html .pane-home .dai-batch {
  position: sticky;
  bottom: 20px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  width: fit-content;
  margin: 0 auto 16px;
  padding: 8px 8px 8px 20px;
  border-radius: var(--dai-r-pill);
  background: var(--dai-deep);
  box-shadow: var(--dai-l3);
}
html .pane-home .dai-batch__count {
  font-size: 13px;
  color: #fff;
  white-space: nowrap;
}
html .pane-home .dai-batch__cancel {
  border: 0;
  padding: 0;
  background: transparent;
  color: rgba(255,255,255,.62);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
html .pane-home .dai-batch__cancel:hover { color: #fff; }
html .pane-home .dai-batch__go {
  height: 32px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--dai-r-pill);
  background: #fff;
  color: var(--dai-ink);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
html .pane-home .dai-batch__go:disabled { opacity: .55; cursor: default; }

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

/* 4.1 文字色 */
html .pane-home .text-bauhaus-fg      { color: var(--dai-ink); }

/* 4.x 彩色 Tailwind 语义类 → 灰阶令牌（v4.2 无色化）。
   image-agent 的 JSX 用到了 amber/emerald/red 系工具类，
   编译产物里是写死的彩色值；这里按语义接管，深浅色各自取值。 */
html .pane-home .bg-amber-50            { background-color: var(--dai-warning-tint); }
html .pane-home .bg-amber-600           { background-color: var(--dai-warning); }
html .pane-home .bg-emerald-50          { background-color: var(--dai-success-tint); }
html .pane-home .bg-emerald-600         { background-color: var(--dai-success); }
html .pane-home .bg-red-50              { background-color: var(--dai-danger-tint); }
html .pane-home .bg-gray-500            { background-color: var(--dai-ink-muted); }
html .pane-home .border-amber-400       { border-color: var(--dai-warning); }
html .pane-home .border-amber-600       { border-color: var(--dai-warning); }
html .pane-home .border-amber-700       { border-color: var(--dai-warning); }
html .pane-home .border-emerald-300     { border-color: var(--dai-success); }
html .pane-home .border-emerald-700     { border-color: var(--dai-success); }
html .pane-home .border-red-300         { border-color: var(--dai-danger); }
html .pane-home .border-red-600         { border-color: var(--dai-danger); }
html .pane-home .text-amber-700         { color: var(--dai-warning); }
html .pane-home .text-amber-800         { color: var(--dai-warning); }
html .pane-home .text-amber-900         { color: var(--dai-warning); }
html .pane-home .text-emerald-700       { color: var(--dai-success); }
html .pane-home .text-emerald-800       { color: var(--dai-success); }
html .pane-home .text-red-700           { color: var(--dai-danger); }
html .pane-home .text-red-900           { color: var(--dai-danger); }
html .pane-home .text-bauhaus-blue      { color: var(--dai-brand); }
html .pane-home .text-bauhaus-red       { color: var(--dai-danger); }
html .pane-home .border-bauhaus-blue    { border-color: var(--dai-brand); }
html .pane-home .border-bauhaus-red     { border-color: var(--dai-danger); }
html .pane-home .hover\:bg-amber-100:hover   { background-color: var(--dai-warning-tint); }
html .pane-home .hover\:bg-amber-700:hover   { background-color: var(--dai-warning); }
html .pane-home .hover\:bg-emerald-700:hover { background-color: var(--dai-success); }
html .pane-home .hover\:border-amber-700:hover { border-color: var(--dai-warning); }
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); }

/* 4.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(55,53,47,.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(55,53,47,.06); }

/* 4.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: var(--dai-canvas);
  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;
}

/* 4.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: var(--dai-r-md);
}

/* 4.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(55,53,47,.28); }

/* 4.6 圆角：按强调层级给 */
html .pane-home .shadow-hard-lg { border-radius: var(--dai-r-lg); }
html .pane-home .shadow-hard    { border-radius: var(--dai-r-md); }
html .pane-home .shadow-hard-sm { border-radius: var(--dai-r-sm); }
/* 分段控件 / KEY 输入组：内部有分隔线，裁掉溢出角 */
html .pane-home .flex.shadow-hard-sm { overflow: hidden; }

/* 4.7 交互反馈：位移式点按 → 轻微缩放 */
html .pane-home .btn-press:active {
  transform: scale(.975);
  box-shadow: none;
}
/* 键盘焦点统一环，鼠标点击不出现 */
html .pane-home button:focus-visible,
html .pane-home a:focus-visible,
html .pane-home input:focus-visible,
html .pane-home select:focus-visible,
html .pane-home textarea:focus-visible {
  outline: none;
  box-shadow: var(--dai-focus);
}

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

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

/* 4.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;
}
/* 实心蓝底按钮上的深色字：改白字（对比度 2.51 → 4.6） */
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; }

/* 4.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: var(--dai-brand-tint); }
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); }

/* 4.9 滚动条 */
html .pane-home ::-webkit-scrollbar-track { background: transparent; }
html .pane-home ::-webkit-scrollbar-thumb {
  background: var(--dai-hairline);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: var(--dai-r-pill);
}
html .pane-home ::-webkit-scrollbar-thumb:hover { background: var(--dai-ink-faint); }

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

   卫浴复刻页（.pane-bathroom）是复刻页的完整副本，两页视觉一致，
   因此这里用**并列选择器**共用同一组规则：主题层只有一份实现，
   改一处两页同步，不会各自漂移。
   -------------------------------------------------------------------------- */
html .pane-replica,
html .pane-bathroom {
  /* v4：不再抄一份色值，直接指向 --dai 令牌 —— 深色模式与全局换肤自动跟随，
     两页与其它六个 tab 从此只可能同频漂移，不可能分叉。 */
  --bg:         var(--dai-canvas);
  --surface:    var(--dai-canvas);
  --panel:      var(--dai-surface);
  --panel-2:    var(--dai-surface-2);

  --ink:        var(--dai-ink);
  --ink-soft:   var(--dai-ink-muted);
  --ink-faint:  var(--dai-ink-faint);

  --edge:       var(--dai-hairline);
  --edge-soft:  var(--dai-hairline-soft);

  --primary:    var(--dai-brand);
  --primary-600:var(--dai-brand-600);
  --primary-50: var(--dai-brand-tint);

  --secondary:  var(--dai-success);
  --secondary-50:var(--dai-success-tint);
  --accent:     var(--dai-warning);
  --accent-50:  var(--dai-warning-tint);

  --ok:         var(--dai-success);
  --err:        var(--dai-danger);
  --err-bg:     var(--dai-danger-tint);
  --err-edge:   color-mix(in srgb, var(--dai-danger) 30%, transparent);

  /* 圆形体系对齐令牌轴 */
  --radius:     var(--dai-r-lg);
  --radius-lg:  var(--dai-r-lg);
  --radius-md:  var(--dai-r-md);
  --radius-sm:  var(--dai-r-xs);

  --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: var(--dai-r-sm); }
/* 未激活步骤序号原为 ink-faint，在 #F5F5F7 上只有 2.36，提为 ink-soft（4.64） */
html .pane-replica .stepper-dot,
html .pane-bathroom .stepper-dot{ border-radius: var(--dai-r-sm); 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(55,53,47,.055); }
html .pane-replica .sky i:nth-child(2),
html .pane-bathroom .sky i:nth-child(2) { background: rgba(55,53,47,.040); }
html .pane-replica .sky i:nth-child(3),
html .pane-bathroom .sky i:nth-child(3) { background: rgba(55,53,47,.032); }
html .pane-replica .sky i:nth-child(4),
html .pane-bathroom .sky i:nth-child(4) { background: rgba(55,53,47,.026); }
html .pane-replica .sky:after,
html .pane-bathroom .sky:after          { border-color: rgba(55,53,47,.07); }

/* 5.1 第三步「拆解与文案」· 主从视图
   --------------------------------------------------------------------------
   原来是十张上下堆叠的长卡：每张都带完整表单，想看第 8 片得滚过半屏，
   改两片文案要在两个位置来回滚，也说不清「哪几片还没定稿」。
   现在左列只承担「定位 + 状态」，右列只展开当前一片。

   两页（详情页复刻 / 卫浴复刻页）共用同一个组件，所以样式也只写一份，
   用并列选择器挂到两个容器上 —— 与上面 5· 的做法一致，不会各自漂移。 */
html .pane-replica .dai-split,
html .pane-bathroom .dai-split {
  display: flex;
  gap: 16px;
  align-items: stretch;
  /* 一屏内看完：列表与详情各自滚动，页面本身不再被十张卡撑长 */
  height: clamp(440px, calc(100vh - 320px), 720px);
}

/* 待拆解阶段右列只有一个「要不要」的判断，不需要一屏高度；
   固定高度会在图下面留一大块空白，这里让它按内容收。 */
html .pane-replica .dai-split.is-pre,
html .pane-bathroom .dai-split.is-pre {
  height: auto;
  min-height: 340px;
}

/* —— 左：切片列表（只做定位，不做编辑） —— */
html .pane-replica .dai-split__list,
html .pane-bathroom .dai-split__list {
  flex: none;
  width: 296px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
}
html .pane-replica .dai-split__list-head,
html .pane-bathroom .dai-split__list-head {
  flex: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--edge);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ink-soft);
}
html .pane-replica .dai-split__list-count,
html .pane-bathroom .dai-split__list-count {
  font-weight: 400;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
html .pane-replica .dai-split__rows,
html .pane-bathroom .dai-split__rows {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* 行是按钮：整行可点，键盘也能到；选中态用「白底 + 左侧动作蓝」表示，
   不用蓝底填充 —— 蓝色在这一页只留给主操作。 */
html .pane-replica .dai-split__row,
html .pane-bathroom .dai-split__row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--dai-r-sm);
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .14s ease;
}
html .pane-replica .dai-split__row:hover,
html .pane-bathroom .dai-split__row:hover { background: var(--panel-2); }
html .pane-replica .dai-split__row.is-active,
html .pane-bathroom .dai-split__row.is-active {
  background: #fff;
  box-shadow: inset 2px 0 0 var(--primary), 0 0 0 1px var(--edge);
}
html .pane-replica .dai-split__idx,
html .pane-bathroom .dai-split__idx {
  flex: none;
  width: 16px;
  font-size: 10px;
  line-height: 1;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
html .pane-replica .dai-split__thumb,
html .pane-bathroom .dai-split__thumb {
  flex: none;
  width: 40px;
  height: 40px;
  object-fit: cover;
  border: 1px solid var(--edge);
  border-radius: var(--dai-r-xs);
  background: #fff;
}
html .pane-replica .dai-split__meta,
html .pane-bathroom .dai-split__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
html .pane-replica .dai-split__title,
html .pane-bathroom .dai-split__title {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html .pane-replica .dai-split__state,
html .pane-bathroom .dai-split__state {
  font-size: 11px;
  line-height: 1.3;
  color: var(--ink-faint);
}
html .pane-replica .dai-split__state.is-ok,
html .pane-bathroom .dai-split__state.is-ok { color: var(--ok); }
html .pane-replica .dai-split__state.is-todo,
html .pane-bathroom .dai-split__state.is-todo { color: var(--accent); }
html .pane-replica .dai-split__state.is-bad,
html .pane-bathroom .dai-split__state.is-bad { color: var(--err); }
html .pane-replica .dai-split__state.is-busy,
html .pane-bathroom .dai-split__state.is-busy { color: var(--primary); }

/* —— 右：当前切片的详情（唯一一处正在编辑的表单） —— */
html .pane-replica .dai-split__detail,
html .pane-bathroom .dai-split__detail {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 20px 20px;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: #fff;
}
html .pane-replica .dai-split__detail-head,
html .pane-bathroom .dai-split__detail-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--edge-soft);
}
html .pane-replica .dai-split__detail-title,
html .pane-bathroom .dai-split__detail-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
html .pane-replica .dai-split__detail-sub,
html .pane-bathroom .dai-split__detail-sub {
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-faint);
}
html .pane-replica .dai-split__badge,
html .pane-bathroom .dai-split__badge {
  padding: 2px 9px;
  border-radius: var(--dai-r-pill);
  font-size: 11px;
  line-height: 1.5;
  white-space: nowrap;
}
html .pane-replica .dai-split__badge.is-ok,
html .pane-bathroom .dai-split__badge.is-ok {
  background: var(--secondary-50);
  color: var(--ok);
}
html .pane-replica .dai-split__badge.is-todo,
html .pane-bathroom .dai-split__badge.is-todo {
  background: var(--accent-50);
  color: var(--accent);
}
html .pane-replica .dai-split__detail-acts,
html .pane-bathroom .dai-split__detail-acts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

/* 图与文案并排：左边是这块画面对应的原图，右边是它要写的字。
   两者对着看，才判断得出「这句话配这张图对不对」。 */
html .pane-replica .dai-split__pair,
html .pane-bathroom .dai-split__pair {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
html .pane-replica .dai-split__preview,
html .pane-bathroom .dai-split__preview {
  flex: none;
  width: 240px;
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid var(--edge);
  border-radius: var(--dai-r-sm);
  background: #fff;
}
html .pane-replica .dai-split__preview img,
html .pane-bathroom .dai-split__preview img {
  display: block;
  width: 100%;
  height: auto;
}
html .pane-replica .dai-split__copycol,
html .pane-bathroom .dai-split__copycol {
  flex: 1 1 auto;
  min-width: 0;
}
html .pane-replica .dai-split__precheck,
html .pane-bathroom .dai-split__precheck {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
/* 待拆解阶段图只用来判「这块要不要」，不必占满；给窄一点，
   右边的说明与两个按钮才不会被留白顶到角落去。 */
html .pane-replica .dai-split__preview.is-precheck,
html .pane-bathroom .dai-split__preview.is-precheck {
  width: 200px;
  max-height: 264px;
}
html .pane-replica .dai-split__precheck-text,
html .pane-bathroom .dai-split__precheck-text {
  flex: 1 1 auto;
  min-width: 0;
}
html .pane-replica .dai-split__precheck-acts,
html .pane-bathroom .dai-split__precheck-acts {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

/* 补充卖点是整批共用的，不属于任何一片；收起来，避免它夹在列表和详情之间打断视线 */
html .pane-replica .an-supplement > summary,
html .pane-bathroom .an-supplement > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  list-style: none;
}
html .pane-replica .an-supplement > summary::-webkit-details-marker,
html .pane-bathroom .an-supplement > summary::-webkit-details-marker { display: none; }
html .pane-replica .an-supplement > summary::before,
html .pane-bathroom .an-supplement > summary::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid currentColor;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  transition: transform .15s ease;
}
html .pane-replica .an-supplement[open] > summary::before,
html .pane-bathroom .an-supplement[open] > summary::before { transform: rotate(90deg); }
html .pane-replica .an-supplement__dot,
html .pane-bathroom .an-supplement__dot {
  padding: 1px 8px;
  border-radius: var(--dai-r-pill);
  background: var(--primary-50);
  color: var(--primary);
  font-size: 10px;
  font-weight: 500;
}
html .pane-replica .an-supplement .textarea,
html .pane-bathroom .an-supplement .textarea { margin-top: 10px; }

/* 窄屏：主从改成上下，列表限高、详情不再内部滚动（外层页面滚） */
@media (max-width: 900px) {
  html .pane-replica .dai-split,
  html .pane-bathroom .dai-split {
    flex-direction: column;
    height: auto;
  }
  html .pane-replica .dai-split__list,
  html .pane-bathroom .dai-split__list { width: auto; }
  html .pane-replica .dai-split__rows,
  html .pane-bathroom .dai-split__rows { max-height: 214px; }
  html .pane-replica .dai-split__detail,
  html .pane-bathroom .dai-split__detail { overflow: visible; }
  html .pane-replica .dai-split__pair,
  html .pane-bathroom .dai-split__pair,
  html .pane-replica .dai-split__precheck,
  html .pane-bathroom .dai-split__precheck { flex-direction: column; }
  html .pane-replica .dai-split__preview,
  html .pane-bathroom .dai-split__preview { width: 100%; max-height: 300px; }
}

/* --------------------------------------------------------------------------
   6 · 配置中心
   令牌同源：把它的 --st-* 指到全局令牌上，两套变量从此只有一个真源。
   （它自带一份 --st-* 定义，特异性在本文件之下，所以这里能压住。）
   -------------------------------------------------------------------------- */
html .pane-settings {
  --st-font: var(--dai-font);
  --st-primary: var(--dai-brand);
  --st-primary-600: var(--dai-brand-600);
  --st-primary-50: var(--dai-brand-tint);
}

/* --------------------------------------------------------------------------
   7 · 全局组件层
   --------------------------------------------------------------------------
   下面这些东西都**必须挂在容器外**（弹层用 Portal 挂到 body），
   所以不能带 .pane-* 前缀。命名一律 dai- 前缀，避免与页面类名相撞。

   7.1 「存入资产」弹层　　7.2 大图查看　　7.3 轻提示
   -------------------------------------------------------------------------- */

/* 7.1 弹层：一层白面 + 发丝线 + 中层投影。
   取代原先写在组件里的内联样式 —— 那份样式是 homepage 时代留下的，
   与对话页的浅色圆角体系不一致，同一个动作在两处长得不一样。 */
.dai-save-wrap {
  position: relative;
  display: inline-flex;
}
.dai-pop {
  position: fixed;
  z-index: 4000; /* 高于弹窗遮罩(1300)与抽屉(1200) */
  box-sizing: border-box;
  width: 208px;
  padding: 6px;
  border: 1px solid var(--dai-hairline);
  border-radius: var(--dai-r-sm);
  background: var(--dai-canvas);
  box-shadow: var(--dai-l3);
  font-family: var(--dai-font);
  font-size: 12.5px;
  color: var(--dai-ink);
  text-align: left;
  overflow-y: auto;
}
.dai-pop__hint {
  display: block;
  margin: 2px 8px 6px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--dai-ink-faint);
}
.dai-pop__item {
  display: block;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: var(--dai-r-xs);
  background: transparent;
  color: var(--dai-ink);
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}
.dai-pop__item:hover { background: var(--dai-surface); }
.dai-pop__item:focus-visible {
  outline: none;
  background: var(--dai-surface);
  box-shadow: var(--dai-focus);
}
.dai-pop__new {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--dai-hairline-soft);
}
.dai-pop__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid var(--dai-hairline);
  border-radius: 6px;
  background: var(--dai-canvas);
  color: var(--dai-ink);
  font-family: inherit;
  font-size: 12px;
}
.dai-pop__input:focus { outline: none; border-color: var(--dai-brand); }
.dai-pop__ok {
  flex: none;
  padding: 5px 10px;
  border: 1px solid var(--dai-brand);
  border-radius: 6px;
  background: var(--dai-brand);
  color: var(--dai-onbrand, #fff);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
.dai-pop__ok:disabled { opacity: .5; cursor: default; }

/* 7.2 大图：白卡 + 深遮罩，不再用 4px 粗框包一张图。
   三个 tab 里的「点开看大图」从此是同一个东西。 */
.dai-lb {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.dai-lb__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16,16,20,.74);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.dai-lb__card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1080px;
  max-height: calc(100vh - 64px);
  border-radius: var(--dai-r-lg);
  background: var(--dai-canvas);
  box-shadow: var(--dai-l3);
  overflow: hidden;
  font-family: var(--dai-font);
}
.dai-lb__bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px 10px 18px;
  border-bottom: 1px solid var(--dai-hairline);
}
.dai-lb__meta {
  min-width: 0;
  font-size: 12px;
  color: var(--dai-ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dai-lb__acts {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dai-lb__btn {
  height: 30px;
  padding: 0 14px;
  border: 1px solid var(--dai-hairline);
  border-radius: var(--dai-r-pill);
  background: var(--dai-canvas);
  color: var(--dai-brand);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.dai-lb__btn:hover { border-color: color-mix(in srgb, var(--dai-ink) 18%, var(--dai-hairline)); }
.dai-lb__btn--primary {
  border-color: var(--dai-brand);
  background: var(--dai-brand);
  color: var(--dai-onbrand, #fff);
}
.dai-lb__btn--primary:hover { border-color: var(--dai-brand-600); background: var(--dai-brand-600); }
.dai-lb__btn:focus-visible { outline: none; box-shadow: var(--dai-focus); }
.dai-lb__stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--dai-surface);
  overflow: auto;
}
.dai-lb__img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 220px);
  border-radius: var(--dai-r-md);
}
.dai-lb__foot {
  flex: none;
  padding: 14px 18px;
  border-top: 1px solid var(--dai-hairline);
  font-size: 13px;
  line-height: 1.5;
  color: var(--dai-ink-soft);
}

/* 7.3 轻提示：深底白字，贴在触发点旁边，不占布局 */
.dai-toast {
  position: fixed;
  z-index: 4001;
  padding: 5px 9px;
  border-radius: 6px;
  background: rgba(16,16,20,.88);
  color: #fff;
  font-family: var(--dai-font);
  font-size: 11px;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
}