/*
 * TWork Web 公共样式 — 通过 @twork/dsh-brand host 半注入 index HTML。
 * 消费 DSH 设计平台 token（--dsw-*），不重复造轮子，只补缺口。
 *
 * 职责：
 *   1. TWork 品牌色映射到 DSH alias token（让 DSH 组件染上 TWork 色）
 *   2. 弹窗 / 浮层 / 卡片公共排版规范（统一字号、圆角、间距）
 *   3. 全局滚动条风格
 *   4. 响应式布局兜底
 */

/* =============================================================================
   1. TWORK BRAND → DSH TOKEN BRIDGE
   把桌面版品牌色（--tw-brand-*）映射到 DSH alias 层，让 DSH 组件自动跟随
============================================================================= */

/* 主色映射：DSH 的 brand-primary 用 TWork 红/用户自定义色 */
:root {
  --dsw-alias-brand-primary-new-colorprimary-new-color: var(--twork-brand, #DB3C14);
}

[data-ds-dark-theme] {
  --dsw-alias-brand-primary-new-colorprimary-new-color: var(--twork-brand-dark, #F46A45);
}

/* =============================================================================
   2. TWORK COMMON DESIGN TOKENS
   弹窗/浮层/卡片公共变量，所有组件统一消费
============================================================================= */
:root {
  /* 圆角层级：与 DSH Modal 24px 对齐 */
  --twork-radius-xl: 24px;    /* 弹窗（同 DSH .dialog） */
  --twork-radius-lg: 16px;    /* 大面板 / 卡片 */
  --twork-radius-md: 12px;    /* 中面板 / 输入区 */
  --twork-radius-sm: 8px;     /* 小按钮 / 标签 */
  --twork-radius-xs: 4px;     /* 微型元素 */

  /* 字号：直接引用 DSH font token，不另起炉灶 */
  --twork-font-display: var(--dsw-font-xl-24);    /* 24/32 600 */
  --twork-font-heading: var(--dsw-font-l-20);     /* 20/28 500 */
  --twork-font-title: var(--dsw-font-m-18);       /* 16/28 500 */
  --twork-font-body: var(--dsw-font-base-16);     /* 16/24 400 — 用户消息/正文 */
  --twork-font-body-strong: var(--dsw-font-base-strong-16); /* 16/24 500 */
  --twork-font-ui: var(--dsw-font-s-14);          /* 14/22 400 — 组件正文 */
  --twork-font-ui-strong: var(--dsw-font-s-strong-14); /* 14/22 500 */
  --twork-font-caption: var(--dsw-font-xs-13);    /* 13/20 400 */
  --twork-font-small: var(--dsw-font-xxs-12);     /* 12/18 400 */
  --twork-font-tiny: var(--dsw-font-xxxs-11);     /* 11/14 400 */

  /* 颜色语义：直接引用 DSH alias */
  --twork-color-text-primary: var(--dsw-alias-label-primary);
  --twork-color-text-secondary: var(--dsw-alias-label-secondary);
  --twork-color-text-tertiary: var(--dsw-alias-label-tertiary);
  --twork-color-text-caption: var(--dsw-alias-label-caption);
  --twork-color-bg-base: var(--dsw-alias-bg-base);
  --twork-color-bg-layer1: var(--dsw-alias-bg-layer-1);
  --twork-color-bg-layer2: var(--dsw-alias-bg-layer-2);
  --twork-color-bg-layer3: var(--dsw-alias-bg-layer-3);
  --twork-color-bg-overlay: var(--dsw-alias-bg-overlay);
  --twork-color-border-l1: var(--dsw-alias-border-l1);
  --twork-color-border-l2: var(--dsw-alias-border-l2);
  --twork-color-border-l3: var(--dsw-alias-border-l3);

  /* 阴影：引用 DSH 层级 */
  --twork-shadow-lv1: var(--dsw-shadow-lv1, 0 1px 2px rgba(0,0,0,0.06));
  --twork-shadow-lv2: var(--dsw-shadow-lv2, 0 4px 12px rgba(0,0,0,0.08));
  --twork-shadow-lv3: var(--dsw-shadow-lv3, 0 8px 24px rgba(0,0,0,0.12));

  /* 间距基准 */
  --twork-space-xs: 4px;
  --twork-space-sm: 8px;
  --twork-space-md: 12px;
  --twork-space-lg: 16px;
  --twork-space-xl: 24px;

  /* 品牌色之上的前景色（primary 按钮文字；明暗主题下品牌橙均配白字，
     与桌面版 antd primary 按钮一致。DSH 无等价 token，故在此定义。） */
  --twork-on-brand: #fff;
}

/* =============================================================================
   2b. DESKTOP SEMANTIC TOKEN BRIDGE — 桌面版语义变量 → DSW alias

   @twork/workbench-ui 是桌面版与 Web 版共享包，按桌面版变量名消费
   --surface-* / --text-* / --border-* / --tw-bg-* / --tw-status-*。
   这些名字只由 packages/ui/src/styles/index.css 与 apps/electron App.css 提供，
   DSH Web 环境零定义 → 无 fallback 的声明整体失效（实测 484 处），
   有 fallback 的落硬编码色（明暗主题双错）。此处补齐缺口。

   必须挂 body 而非 :root：DSW token 全部定义在 body 上（ui-theme
   design-platform.css:4/:156、gradient-shadow-text.css:1/:54、scrollbar.css:17），
   :root(html) 取不到 body 的变量，var() 会在 html 上求值失败。
   挂 body 后，body[data-ds-dark-theme] 覆盖 alias 时本层自动跟随，无需暗色块。

   值全部引用 DSW alias，零硬编码颜色。层级对照桌面版
   （base #fff/#1A1B1E ⊳ sidebar #F7F7F7/#141518 ⊳ card #fff/#1A1B1E）保持一致。

   刻意不桥接的两类：
   1. --bg-primary / --bg-secondary / --text-placeholder / --surface-card-hover /
      --tw-brand-amber —— 桌面版同样未定义，两端一致走各自 fallback；
      单侧桥接反而制造 Web 与桌面偏差。如需修复应在 packages/ui 侧统一补。
   2. --tw-brand-* / --tw-text-link / --border-focus / --tw-status-info /
      --tw-accent-unread —— host 半已用桌面版同一个 color-engine 投影
      （index.js:97-98 brandToCSSVars），此处重复定义会覆盖用户主题色。
============================================================================= */
body {
  /* -- 表面层：sidebar 跟随 DSH 侧栏填充 token；该 token 的亮色值已由 2c 反向
        覆盖为桌面版同值，故此处自动与 DSH 左栏、老桌面版三者一致 -- */
  --surface-base:    var(--dsw-alias-bg-base);
  --surface-sidebar: var(--dsw-specific-sidebar-fill);
  --surface-card:    var(--dsw-alias-bg-layer-1);
  --surface-input:   var(--dsw-specific-input-major);
  /* tertiary 借位 interactive-bg-hover-solid：亮 bluish-75(241,243,245) ≈ 桌面
     #F2F2F2，且深于 2c 覆盖后的 sidebar #F7F7F7(247) → 层级可辨；暗
     bluish-800(53,54,56) 明显亮于 sidebar 的 bluish-900(27,27,28) → 层级可辨。
     不选 bg-layer-2/3（亮色三层全 #fff，层级消失），也不选 bg-overlay
     （暗色 bluish-700(97,102,107) 过亮，层级翻车）。 */
  --tw-bg-tertiary:  var(--dsw-alias-interactive-bg-hover-solid);

  /* -- 文字层：对齐 DSH label 三级 -- */
  --text-primary:      var(--dsw-alias-label-primary);
  --text-secondary:    var(--dsw-alias-label-secondary);
  --text-tertiary:     var(--dsw-alias-label-tertiary);
  --tw-text-primary:   var(--dsw-alias-label-primary);
  --tw-text-secondary: var(--dsw-alias-label-secondary);
  --tw-text-tertiary:  var(--dsw-alias-label-tertiary);

  /* -- 边框层：桌面 #000 8% / #fff 10% ≈ border-l2 -- */
  --border-default: var(--dsw-alias-border-l2);

  /* -- 状态色 -- */
  --tw-status-success: var(--dsw-alias-state-success-primary);
  --tw-status-warning: var(--dsw-alias-state-warn-primary);
  --tw-status-error:   var(--dsw-alias-state-error-primary);

  /* -- 滚动条（与第 3 节 ::-webkit-scrollbar-thumb 同源 token） -- */
  --tw-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l1);
}

/* =============================================================================
   2c. TWORK SURFACE → DSW SIDEBAR FILL（反向覆盖：TWork 值 → DSW token）

   2b 的方向是 DSW alias → 桌面版语义变量；本节相反，把 DSH 左侧栏填充色改成
   老桌面版同值，让两端左栏观感一致（apps/electron Sidebar.css:12 →
   packages/ui/src/styles/index.css:237 --tw-bg-secondary: #F7F7F7）。

   选择器必须落在 body 且比 vendor 更特异：
   - vendor 在 body（design-platform.css:242）与 body[data-ds-dark-theme]（:335）
     两处声明 --dsw-specific-sidebar-fill；
   - 写 :root 无效——body 自身声明永远压过从 html 继承的值（第 1 节的品牌映射
     正因写在 :root 而整体失效）；
   - 故用 html body(0,0,2) 压 vendor 亮色 body(0,0,1)，
     不依赖本表与 vendor 样式表的注入先后。

   只覆盖亮色，暗色刻意交回 vendor，靠特异性自动达成：vendor 暗色
   body[data-ds-dark-theme] 是 (0,1,1)，b 位高于本节 html body 的 (0,0,2)，
   暗色由 vendor 获胜 → 保留 bluish-900(27,27,28)。
   不照搬桌面暗值 #141518(20,21,24) 的原因：两端约定相反——桌面版暗色 sidebar
   比 base #1A1B1E(26,27,30) 更暗，而 DSH 暗色 base 是 bluish-950(21,21,23)，
   照搬会让 sidebar 与 base 差 ≤1，左栏与主区分界消失。暗色也要对齐的话必须连
   --dsw-alias-bg-base 一起改，而它被会话区/代码块/工具行大量消费
   （ConversationRoot.module.css:7、CodeBlock.module.css:28、ToolRow.module.css:180），
   属独立决策，未擅自扩大。也不在此重复声明 vendor 暗值：那样会把 vendor 的暗色
   值冻结在今日版本，vendor 升级后反而失同步。

   亮色层级未被破坏：base #fff(255) ⊳ sidebar #F7F7F7(247) ⊳ hover
   bluish-75(241,243,245) ⊳ active bluish-100(235,238,242) 仍单调加深，
   与桌面版 base #fff ⊳ sidebar #F7F7F7 的关系一致。
   代价仅基准面色相由 bluish 转中性，这正是对齐桌面版的目的。

   2b 的 --surface-sidebar 指向本 token，故任务工作台内的侧栏类底色同步追平。
   下面这个字面量是 TWork 表面色规约的链头值（packages/ui 同为字面量定义），
   下游一律引用 --twork-surface-sidebar，不散写颜色。
============================================================================= */
html body {
  /* 桌面版同源值：packages/ui/src/styles/index.css:237 */
  --twork-surface-sidebar: #F7F7F7;
  --dsw-specific-sidebar-fill: var(--twork-surface-sidebar);
}

/* =============================================================================
   3. GLOBAL SCROLLBAR — 统一滚动条风格（补充 DSH scrollbar.css）
============================================================================= */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--dsw-alias-scrollbar-bg-l1, rgba(0, 0, 0, 0.15));
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--dsw-alias-scrollbar-hover-l1, rgba(0, 0, 0, 0.25));
}

/* =============================================================================
   4. RESPONSIVE — Web 端响应式兜底
   DSH AppFrame 用 CSS Grid + inline width，这里补 media query 兜底
============================================================================= */

/* 窄屏 (< 768px)：侧栏收窄 */
@media (max-width: 768px) {
  :root {
    --dsh-sidebar-inline-padding: 8px;
  }
}

/* 手机 (< 600px)：侧栏紧凑 */
@media (max-width: 600px) {
  :root {
    --dsh-sidebar-inline-padding: 6px;
  }
}

/* =============================================================================
   5. FOCUS RING — 全局焦点环（DSH 未统一定义）
============================================================================= */
:focus-visible {
  outline: 2px solid var(--dsw-alias-brand-primary-new-colorprimary-new-color, #DB3C14);
  outline-offset: 2px;
  border-radius: var(--twork-radius-xs);
}

/* =============================================================================
   6. SELECTION — 文本选中色
============================================================================= */
::selection {
  background: color-mix(
    in srgb,
    var(--dsw-alias-brand-primary-new-colorprimary-new-color, #DB3C14) 20%,
    transparent
  );
}

/* =============================================================================
   7. BOOT PAGE — 禁掉 DSH 上游 boot-page 的 loading 态（品牌净身）
   上游 BootPage（vendor/dsh .../web/src/boot-page.ts）硬渲染进 #root：
   HARNESS wordmark + [data-dsh-boot-spinner] + "Loading plugins…"，
   与 TWork splash 叠成两层字。vendor/dsh 零修改，只能在插件层禁。
   只禁 loading 态（:has spinner 命中）；fail() 后 render() 会
   replaceChildren 摘掉 spinner，:has 不再命中 → 失败报告自动恢复显示，
   与 client.tsx 的 splash 退役逻辑（检测 Failed to load plugins 透出）自洽。
============================================================================= */
[data-dsh-boot]:has([data-dsh-boot-spinner]) {
  display: none !important;
}

/* =============================================================================
   8. POPUP CHROME — 弹窗/浮层公共层（twui-* 类库）
   规格 1:1 对齐 DSH 原生：
   - ui-primitives Modal（遮罩/卡片/关闭键/Escape）
   - ui-settings-general SettingsRoot（双栏面板/导航轨/54px 头部）
   所有 @twork 插件弹窗必须消费本层类，禁止自造遮罩与面板壳。
   规范文档：.twork/output/twork-web-ui-spec.md
============================================================================= */

/* -- 遮罩：bg-mask-1（亮 0.24 / 暗 0.5 自动）+ 2px 模糊 -- */
.twui-mask {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  background: var(--dsw-alias-bg-mask-1);
  backdrop-filter: var(--dsw-mask-blur);
  -webkit-backdrop-filter: var(--dsw-mask-blur);
}

/* -- 面板壳：r24 + shadow-lv3 + bg-layer-2 + inverted 边框（同原生面板） -- */
.twui-panel {
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0; overflow: hidden;
  border: 1px solid var(--dsw-alias-border-inverted);
  border-radius: var(--twork-radius-xl);
  background: var(--dsw-alias-bg-layer-2);
  box-shadow: var(--dsw-shadow-lv3);
  color: var(--dsw-alias-label-primary);
  font-size: 14px; line-height: 22px;
  /* 抬升面滚动条跟随 l2 高程（ui-theme scrollbar.css 重绑定契约） */
  --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);
  --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2);
}
/* 小弹窗（单列表单/确认框） */
.twui-panel--dialog {
  width: min(480px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
}
/* 大面板（双栏：导航轨 + 内容区，如「更多」） */
.twui-panel--wide {
  width: min(1160px, calc(100vw - 48px));
  height: min(760px, calc(100vh - 48px));
}

/* -- 头部：h54，标题左、动作与关闭键右 -- */
.twui-header {
  flex: none; display: flex; align-items: center; gap: 8px;
  height: 54px; padding: 0 14px 0 20px; box-sizing: border-box;
}
.twui-title {
  font-size: 16px; line-height: 24px; font-weight: 500;
  color: var(--dsw-alias-label-primary);
}
/* 标题旁小徽标（如「内测」） */
.twui-pill {
  padding: 1px 8px; border-radius: 999px;
  font-size: 12px; line-height: 18px;
  background: var(--dsw-alias-bg-overlay);
  color: var(--dsw-alias-label-secondary);
}
.twui-header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.twui-close {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; margin-left: auto;
  border: none; border-radius: 28px; background: transparent; cursor: pointer;
  color: var(--dsw-alias-label-primary);
}
.twui-close:hover { background: var(--dsw-alias-interactive-bg-hover); }

/* -- 双栏布局：导航轨 + 内容列（对齐 SettingsRoot：188px 轨 / 40px cell） -- */
.twui-columns { display: flex; flex: 1; min-height: 0; }
.twui-nav {
  flex: none; width: 188px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 4px;
  padding: 4px 12px 16px; overflow-y: auto;
}
.twui-nav-group {
  padding: 10px 12px 4px;
  font-size: 12px; line-height: 18px;
  color: var(--dsw-alias-label-tertiary);
}
.twui-nav-cell {
  display: flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 12px; box-sizing: border-box;
  border: none; border-radius: 12px; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 14px; line-height: 22px; font-weight: 400;
  color: var(--dsw-alias-label-primary); text-align: left;
}
.twui-nav-cell:hover { background: var(--dsw-specific-sidebar-nav-item-hover); }
.twui-nav-cell.active { background: var(--dsw-specific-sidebar-nav-item-active); }

/* -- 内容列 -- */
.twui-content {
  flex: 1; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
.twui-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 24px 24px; }
/* 内页自带排版时清零内边距（如跨插件嵌入页） */
.twui-body--flush { padding: 0; }
.twui-footer {
  flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 12px 24px; border-top: 1px solid var(--dsw-alias-border-l1);
}

/* -- 按钮：32px / r8 / 14px；primary = 品牌色 -- */
.twui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 14px; box-sizing: border-box;
  border: 1px solid var(--dsw-alias-border-l2); border-radius: 8px;
  background: var(--dsw-alias-bg-layer-1);
  font-family: inherit; font-size: 14px; line-height: 22px; font-weight: 400;
  color: var(--dsw-alias-label-primary); cursor: pointer; white-space: nowrap;
}
.twui-btn:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover); }
.twui-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.twui-btn--primary {
  border-color: transparent;
  background: var(--dsw-alias-brand-primary-new-colorprimary-new-color);
  color: var(--twork-on-brand);
}
.twui-btn--primary:hover:not(:disabled) {
  opacity: 0.9;
  background: var(--dsw-alias-brand-primary-new-colorprimary-new-color);
}
.twui-btn--sm { height: 28px; padding: 0 10px; font-size: 13px; line-height: 20px; }
.twui-btn--danger:hover:not(:disabled) {
  background: var(--dsw-alias-interactive-bg-hover-danger);
  color: var(--dsw-alias-state-error-primary);
}

/* -- 输入：32px / r8 / 14px，聚焦品牌色描边 -- */
.twui-input, .twui-select {
  height: 32px; padding: 0 12px; box-sizing: border-box;
  border: 1px solid var(--dsw-alias-border-l2); border-radius: 8px;
  background: var(--dsw-alias-bg-layer-1); color: var(--dsw-alias-label-primary);
  font-family: inherit; font-size: 14px; line-height: 22px; outline: none;
}
.twui-input:focus, .twui-select:focus {
  border-color: var(--dsw-alias-brand-primary-new-colorprimary-new-color);
}
.twui-input::placeholder { color: var(--dsw-alias-label-caption); }

/* -- 标签/徽章：20px / 12px，统一中性灰（语义靠文字表达，不用彩色） -- */
.twui-tag {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 8px; border-radius: 4px;
  font-size: 12px; line-height: 18px; white-space: nowrap;
  background: var(--dsw-alias-bg-overlay); color: var(--dsw-alias-label-secondary);
}

/* -- 次级文字（页描述/卡片描述/底栏统计） -- */
.twui-desc { font-size: 13px; line-height: 20px; color: var(--dsw-alias-label-tertiary); }
.twui-foot {
  padding: 10px 0 0; margin-top: 12px;
  border-top: 1px solid var(--dsw-alias-border-l1);
  text-align: center;
  font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-tertiary);
}

/* -- 内页页头：中性线性图标 + 标题/描述 + 右侧动作 -- */
.twui-page-head { display: flex; align-items: center; gap: 10px; padding: 4px 0 14px; }
.twui-page-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  background: var(--dsw-alias-bg-overlay);
  color: var(--dsw-alias-label-secondary);
}
.twui-page-tt { flex: 1; min-width: 0; }
.twui-page-title {
  font-size: 14px; line-height: 22px; font-weight: 500;
  color: var(--dsw-alias-label-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.twui-page-desc {
  margin-top: 1px;
  font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-tertiary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.twui-page-actions { display: flex; align-items: center; gap: 8px; }

/* -- 工具行（搜索/导入导出等并排控件） -- */
.twui-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }

/* -- 图标按钮（表格行/卡片角的编辑、删除等） -- */
.twui-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; flex-shrink: 0;
  border: 1px solid var(--dsw-alias-border-l2); border-radius: 6px;
  background: transparent; cursor: pointer;
  color: var(--dsw-alias-label-secondary);
}
.twui-icon-btn:hover:not(:disabled) {
  background: var(--dsw-alias-interactive-bg-hover);
  color: var(--dsw-alias-label-primary);
}
.twui-icon-btn--danger:hover:not(:disabled) {
  background: var(--dsw-alias-interactive-bg-hover-danger);
  color: var(--dsw-alias-state-error-primary);
  border-color: transparent;
}
.twui-icon-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* -- 表格：容器 + 行基座；列布局（grid-template-columns）由消费方定义 -- */
.twui-table {
  display: flex; flex-direction: column;
  border: 1px solid var(--dsw-alias-border-l1); border-radius: 12px;
  overflow: hidden;
}
.twui-tr {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; min-height: 44px; box-sizing: border-box;
  border-bottom: 1px solid var(--dsw-alias-border-l1);
  font-size: 14px; line-height: 22px;
}
.twui-tr:last-child { border-bottom: none; }
.twui-tr--head {
  min-height: 38px;
  background: var(--dsw-alias-bg-overlay);
  color: var(--dsw-alias-label-secondary); font-weight: 500;
}
.twui-cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* -- 卡片网格（技能/专家/MCP 预设卡片） -- */
.twui-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.twui-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px; border-radius: 16px;
  border: 1px solid var(--dsw-alias-border-l1);
  background: var(--dsw-alias-bg-layer-1);
}
.twui-card-title {
  font-size: 14px; line-height: 22px; font-weight: 500;
  color: var(--dsw-alias-label-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.twui-card-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.twui-card-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  background: var(--dsw-alias-bg-overlay);
  color: var(--dsw-alias-label-secondary);
}
.twui-card-name {
  font-size: 14px; line-height: 22px; font-weight: 500;
  color: var(--dsw-alias-label-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.twui-card-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.twui-card-desc {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px; line-height: 20px; color: var(--dsw-alias-label-tertiary);
}
.twui-card-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.twui-card-foot .grow, .twui-card .grow { flex: 1; min-width: 0; }

/* -- 开关（表格/卡片的启用切换） -- */
.twui-switch {
  position: relative; width: 30px; height: 18px; flex-shrink: 0;
  border: none; border-radius: 9px; padding: 0; cursor: pointer;
  background: var(--dsw-alias-border-l3);
  transition: background 0.15s;
}
.twui-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--dsw-alias-bg-layer-1);
  box-shadow: var(--dsw-shadow-lv1);
  transition: left 0.15s;
}
.twui-switch.on { background: var(--dsw-alias-brand-primary-new-colorprimary-new-color); }
.twui-switch.on::after { left: 14px; }
.twui-switch:disabled { opacity: 0.5; cursor: not-allowed; }

/* -- 过滤 Tabs（页内一级切换：技能市场/本地已安装…） -- */
.twui-tabs {
  display: flex; gap: 20px; margin-bottom: 16px;
  border-bottom: 1px solid var(--dsw-alias-border-l1);
}
.twui-tabs button {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 2px; border: none; border-bottom: 2px solid transparent;
  background: transparent; cursor: pointer;
  font-family: inherit; font-size: 14px; line-height: 22px; font-weight: 400;
  color: var(--dsw-alias-label-secondary);
}
.twui-tabs button:hover { color: var(--dsw-alias-label-primary); }
.twui-tabs button.active {
  color: var(--dsw-alias-brand-primary-new-colorprimary-new-color);
  border-bottom-color: var(--dsw-alias-brand-primary-new-colorprimary-new-color);
}
.twui-tabs b {
  min-width: 18px; padding: 0 6px; border-radius: 999px; text-align: center;
  font-size: 12px; line-height: 18px; font-weight: 500;
  background: var(--dsw-alias-bg-overlay); color: var(--dsw-alias-label-secondary);
}
.twui-tabs b.hot {
  background: color-mix(in srgb, var(--dsw-alias-brand-primary-new-colorprimary-new-color) 12%, transparent);
  color: var(--dsw-alias-brand-primary-new-colorprimary-new-color);
}
.twui-tabs b.good {
  background: color-mix(in srgb, var(--dsw-alias-state-success-primary) 12%, transparent);
  color: var(--dsw-alias-state-success-primary);
}

/* -- 段控件（本地配置/云端配置 等页内二级切换） -- */
.twui-seg-row { display: flex; align-items: center; gap: 10px; padding: 0 0 12px; flex-shrink: 0; }
.twui-seg {
  display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px;
  background: var(--dsw-alias-bg-overlay);
}
.twui-seg button {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 14px; border: none; border-radius: 6px;
  background: transparent; cursor: pointer;
  font-family: inherit; font-size: 13px; line-height: 20px;
  color: var(--dsw-alias-label-secondary);
}
.twui-seg button.active {
  background: var(--dsw-alias-bg-layer-1);
  color: var(--dsw-alias-label-primary);
  box-shadow: var(--dsw-shadow-lv1);
}

/* -- 搜索行 -- */
.twui-search-row { padding: 0 0 12px; }
.twui-search-row .twui-input { width: 100%; }

/* -- 空态 -- */
.twui-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 32px 16px; text-align: center;
  color: var(--dsw-alias-label-tertiary);
  font-size: 13px; line-height: 20px;
}

/* -- 表单行（标签 + 控件，MCP/模型编辑共用） -- */
.twui-form {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 12px 14px; margin: 0 0 12px;
  border: 1px dashed var(--dsw-alias-border-l2); border-radius: 12px;
}
.twui-form label {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; line-height: 20px; color: var(--dsw-alias-label-secondary);
}
.twui-form .twui-input, .twui-form .twui-select { height: 30px; font-size: 13px; }

/* -- 子弹窗：内页表单弹窗（「更多」弹窗内的新增/编辑浮层） --
   遮罩复用 .twui-mask（fixed 全屏，z-index 1200；DOM 晚于外层遮罩出现，
   同层叠序天然压在其上），面板壳复用 .twui-panel--dialog，
   页头/底栏复用 .twui-header / .twui-footer（对齐桌面版 antd Modal 观感）。 */
.twui-dialog-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 4px 20px 16px;
}

/* 纵排表单变体（子弹窗内）：标签上、控件下、整宽，替代页内横排虚线框 */
.twui-form--col {
  flex-direction: column; align-items: stretch; gap: 12px;
  padding: 0; margin: 0; border: none;
}
.twui-form--col label { flex-direction: column; align-items: stretch; gap: 4px; }
/* 标签内的标题行（标签文字 + 帮助链接）保持横排 */
.twui-form--col .tw-flabel { display: flex; align-items: center; gap: 4px; }
.twui-form--col .twui-input, .twui-form--col .twui-select { width: 100%; }

/* 多行输入（子弹窗内 JSON/正文文本域）：与 .twui-input 同皮肤，高度自适应 */
.twui-textarea {
  width: 100%; min-height: 56px; padding: 6px 12px; box-sizing: border-box;
  border: 1px solid var(--dsw-alias-border-l2); border-radius: 8px;
  background: var(--dsw-alias-bg-layer-1); color: var(--dsw-alias-label-primary);
  font-family: inherit; font-size: 13px; line-height: 20px; outline: none; resize: vertical;
}
.twui-textarea:focus { border-color: var(--dsw-alias-brand-primary-new-colorprimary-new-color); }
.twui-textarea::placeholder { color: var(--dsw-alias-label-caption); }

/* 技能多选块（专家/智能体生产面表单的关联技能勾选） */
.tw-sk-pick {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px;
  max-height: 168px; overflow-y: auto;
  padding: 8px 10px; box-sizing: border-box;
  border: 1px solid var(--dsw-alias-border-l1); border-radius: 8px;
}
.tw-sk-pick-row {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 13px; line-height: 20px; color: var(--dsw-alias-label-secondary);
}
.tw-sk-pick-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-sk-pick-row input { flex: none; accent-color: var(--dsw-alias-brand-primary-new-colorprimary-new-color); }
