/* ==========================================================================
   premium.css — 「C · 节点本体现代化」覆盖层
   --------------------------------------------------------------------------
   方向：对照 ComfyUI Nodes 2.0 / React Flow 的节点范式
   主题：双主题同权（浅色 / 深色同等打磨）

   设计原则
     · 细描边分层：1px 极低对比描边 + 表面明暗差，不用粗线和硬投影
     · 柔和投影：小范围双层柔光，废除 4px 4px 0 硬投影
     · 无衬线：标题一律 Inter 系统栈，废除衬线 + 全大写宽字距
     · 节点：10px 圆角 + 左侧 3px 类型色带 + 1px 描边 + 柔和投影
     · 端口：9px 空心圆环；连线：2px 贝塞尔
     · 选中：1px 主色描边 + 6px 柔光圈（不改背景色）
     · 性能红线：绝不对画布节点用 backdrop-filter（随节点数线性掉帧）

   加载位置：必须在 agent-dock.css 之后（13 个页面的最后一层样式表）。
   全部规则带 !important，用来压制 design.css（复古海报语言，同样全 !important）。
   回退方式：删掉各页面里本文件的 <link> 即可，其余文件零改动。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计令牌 --pm-*
   -------------------------------------------------------------------------- */

/* —— 浅色：冷调中性灰 + 单一蓝强调 —— */
:root {
    /* 表面层级：靠明暗差分层，不靠描边 */
    --pm-bg: #F7F8FA;
    --pm-surface: #FFFFFF;
    --pm-surface-2: #EFF2F6;
    --pm-surface-3: #E4E9EF;
    --pm-canvas: #F4F6F9;

    /* 描边 */
    --pm-line: #E1E5EA;
    --pm-line-strong: #CBD3DC;

    /* 文字 */
    --pm-ink: #14181D;
    --pm-ink-soft: #6C7681;
    --pm-ink-faint: #98A1AC;

    /* 强调 */
    --pm-accent: #2563EB;
    --pm-accent-hover: #1D4ED8;
    --pm-accent-soft: rgba(37, 99, 235, .16);
    --pm-accent-tint: rgba(37, 99, 235, .09);
    --pm-accent-contrast: #FFFFFF;

    /* 语义色 */
    --pm-ok: #10B981;
    --pm-warn: #F59E0B;
    --pm-danger: #EF4444;
    --pm-info: #0EA5E9;

    /* 圆角：壳层 6/8，节点 10，浮层 14 */
    --pm-r-sm: 6px;
    --pm-r: 8px;
    --pm-r-md: 10px;
    --pm-r-lg: 14px;

    /* 投影：全部柔和，无硬边 */
    --pm-sh-xs: 0 1px 2px rgba(16, 24, 40, .06);
    --pm-sh-sm: 0 1px 2px rgba(16, 24, 40, .05), 0 2px 6px rgba(16, 24, 40, .05);
    --pm-sh: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 18px rgba(16, 24, 40, .07);
    --pm-sh-lg: 0 12px 36px rgba(16, 24, 40, .13);

    /* 字体 */
    --pm-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
    --pm-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Consolas, "Courier New", monospace;

    /* 连线 */
    --pm-wire: rgba(80, 100, 130, .34);
    --pm-wire-active: #2563EB;

    /* 节点类型色（画布节点左侧色带） */
    --pm-n-prompt: #7C6CF6;
    --pm-n-image: #22B8CF;
    --pm-n-video: #F59E0B;
    --pm-n-output: #10B981;
    --pm-n-group: #8B929C;
    --pm-n-llm: #6366F1;
    --pm-n-comfy: #EC4899;
    --pm-n-ltx: #EF4444;
    --pm-n-rh: #F97316;
    --pm-n-minimax: #8B5CF6;
    --pm-n-mj: #06B6D4;
    --pm-n-msgen: #14B8A6;
    --pm-n-loop: #A855F7;
    --pm-n-promptgroup: #A78BFA;
    --pm-n-generator: #2563EB;
}

/* —— 深色：层级表面（不是纯黑）+ 蓝强调 —— */
html.studio-theme-dark,
html.theme-dark,
body.studio-theme-dark,
body.theme-dark {
    --pm-bg: #0D0F12;
    --pm-surface: #14171B;
    --pm-surface-2: #1A1E24;
    --pm-surface-3: #212730;
    --pm-canvas: #0A0B0D;

    --pm-line: #242930;
    --pm-line-strong: #333B45;

    --pm-ink: #E8EAED;
    --pm-ink-soft: #8B929C;
    --pm-ink-faint: #666E78;

    --pm-accent: #3B82F6;
    --pm-accent-hover: #60A5FA;
    --pm-accent-soft: rgba(59, 130, 246, .22);
    --pm-accent-tint: rgba(59, 130, 246, .13);
    --pm-accent-contrast: #FFFFFF;

    --pm-ok: #34D399;
    --pm-warn: #FBBF24;
    --pm-danger: #F87171;
    --pm-info: #38BDF8;

    --pm-sh-xs: 0 1px 2px rgba(0, 0, 0, .5);
    --pm-sh-sm: 0 2px 7px rgba(0, 0, 0, .5);
    --pm-sh: 0 2px 8px rgba(0, 0, 0, .5), 0 10px 30px rgba(0, 0, 0, .35);
    --pm-sh-lg: 0 14px 44px rgba(0, 0, 0, .62);

    --pm-wire: rgba(120, 155, 205, .45);
    --pm-wire-active: #60A5FA;
}

/* --------------------------------------------------------------------------
   2. 把 design.css 的整条令牌链接到 --pm-*
   --------------------------------------------------------------------------
   design.css 的全部规则都由 --dv-* 驱动（--dv-* 被引用数百次），
   而 API 设置页的 --api-* 也已被它重映射到 --dv-*。
   所以：重定向这一张表 = 一次性换掉全站配色 / 投影 / 字体。

   注意：gpt-chat / index / canvas 等页面把复古主题块写在内联 <style> 里，而且
   位置在本文件之后，同特异性时会反过来压过本文件。所以选择器刻意叠加成
   :root:root / html:root:root body 这类写法，把特异性抬到 (0,2,0)~(0,4,2)，
   稳压它们全部；但仍低于内联 style="--x:…"（(1,0,0)），
   因此组件级的局部令牌覆盖（如某节点单独换 --text）不会被破坏。
   -------------------------------------------------------------------------- */
:root:root,
html:root:root body,
html:root:root.theme-dark,
html:root:root.studio-theme-dark,
html:root:root body.theme-dark,
html:root:root body.studio-theme-dark,
html:root:root body .shell.theme-dark,
html:root:root body .shell.studio-theme-dark {
    --dv-bg: var(--pm-bg);
    --dv-paper: var(--pm-bg);
    --dv-card: var(--pm-surface);
    --dv-card-2: var(--pm-surface-2);
    --dv-ink: var(--pm-ink);
    --dv-ink-soft: var(--pm-ink-soft);
    --dv-stroke: var(--pm-line);
    --dv-stroke-soft: var(--pm-line);
    --dv-accent: var(--pm-accent);
    --dv-accent-hover: var(--pm-accent-hover);
    --dv-accent-2: var(--pm-info);
    --dv-accent-contrast: var(--pm-accent-contrast);
    --dv-gold: var(--pm-warn);
    --dv-scroll: var(--pm-line-strong);

    /* 三档投影全部换成柔和光（design.css 里 硬投影 = 值 + 0 var(--dv-shadow-c) 的形态） */
    --dv-shadow-c: transparent;
    --dv-shadow: var(--pm-sh);
    --dv-shadow-sm: var(--pm-sh-sm);
    --dv-shadow-lg: var(--pm-sh-lg);

    /* 标题字体：衬线 → 无衬线 */
    --dv-heading-font: var(--pm-font);
}

/* —— index.html 内联的整套局部布局令牌 ——
   index.html 自带一组 --sidebar-bg / --stage-bg / --border / --stage-border /
   --author-name / --social-icon / --scrollbar / --divider / --nav-hover-bg，
   浅色偏暖灰（#e7e2da / #d6d0c6 / #826a5c）、深色偏暖棕（#221d18 / #3a2e22 /
   #c9b391 / rgba(255,143,0,.16)），是页面残留暖色的最后一处来源，统一接入 --pm-*。 */
:root:root,
html:root:root body,
html:root:root.theme-dark,
html:root:root.studio-theme-dark,
html:root:root body.theme-dark,
html:root:root body.studio-theme-dark,
html:root:root body .shell.theme-dark,
html:root:root body .shell.studio-theme-dark {
    --sidebar-bg: var(--pm-surface);
    --stage-bg: var(--pm-bg);
    --border: var(--pm-line);
    --stage-border: var(--pm-line);
    --author-name: var(--pm-ink);
    --social-icon: var(--pm-ink-soft);
    --scrollbar: var(--pm-line-strong);
    --scrollbar-hover: var(--pm-ink-faint);
    --divider: var(--pm-line);
    --monitor-bg: var(--pm-surface-2);
    --monitor-border: var(--pm-line);
    --nav-hover-bg: var(--pm-surface-2);
}

/* —— agent-dock.css 的 --ad-* 令牌：同样接入 --pm-* ——
   AI 右侧栏自带一套独立的米黄 / 暗红令牌，不改它本体，只在这里重定向，
   于是侧栏与全站同频。注意两个"一名两用"的令牌：
     · --ad-stroke  既是描边、又是"用户气泡"的底色
     · --ad-paper   既是表面、又是"强调色上的文字"
   这里一律按"描边 / 表面"语义取值；它们的"文字"用法在下文 §12 逐条覆盖。 */
:root:root,
html:root:root body,
html:root:root.theme-dark,
html:root:root.studio-theme-dark,
html:root:root body.theme-dark,
html:root:root body.studio-theme-dark,
html:root:root body .shell.theme-dark,
html:root:root body .shell.studio-theme-dark {
    --ad-stroke: var(--pm-line-strong);
    --ad-stroke-soft: var(--pm-line);
    --ad-paper: var(--pm-surface);
    --ad-card: var(--pm-surface-2);
    --ad-ink: var(--pm-ink);
    --ad-accent: var(--pm-accent);
    --ad-shadow: transparent;   /* 废除 2px 2px 0 硬投影 */
}

/* —— 第三套令牌族：canvas.css / smart-canvas.css / canvas-list.css /
   asset-manager.css / api-settings.css 共用的通用调色板 ——
   它们的深色值仍残留复古暖色（--text:#2a241e 深棕、--line-2:#a08455 棕、
   --strong:#ff8f00 琥珀或 #e8edf5、--accent:#c084fc 紫），这里一并收编。
   （下面把整套通用调色板都显式声明，连 design.css 兼容块已覆盖的那几个也写上——
     因为 gpt-chat / canvas / index 等页面的内联主题块会以"更靠后"的位置反压兼容块。） */
:root:root,
html:root:root body,
html:root:root.theme-dark,
html:root:root.studio-theme-dark,
html:root:root body.theme-dark,
html:root:root body.studio-theme-dark,
html:root:root body .shell.theme-dark,
html:root:root body .shell.studio-theme-dark {
    /* 表面 */
    --page: var(--pm-bg);
    --bg: var(--pm-bg);
    --bg-base: var(--pm-bg);
    --panel: var(--pm-surface);
    --panel-solid: var(--pm-surface);
    --card: var(--pm-surface);
    --card-solid: var(--pm-surface);
    --soft: var(--pm-surface-2);
    --soft-2: var(--pm-surface-3);
    /* 描边 */
    --line: var(--pm-line);
    --line-2: var(--pm-line-strong);
    --line-strong: var(--pm-line-strong);
    /* 文字 */
    --text: var(--pm-ink);
    --text-main: var(--pm-ink);
    --muted: var(--pm-ink-soft);
    --faint: var(--pm-ink-faint);
    /* 强调 */
    --strong: var(--pm-accent);
    --strong-text: var(--pm-accent-contrast);
    --accent: var(--pm-accent);
    --accent-soft: var(--pm-accent-soft);
    --accent-line: var(--pm-accent-soft);
    /* 语义 */
    --danger: var(--pm-danger);
    --ok: var(--pm-ok);
    --success: var(--pm-ok);
}

/* —— 根底色 / 根文字：theme.css 开头用 !important 把深色页面压成
   暖棕底 #1b1816 + 奶油字 #e9e2d6（"整站发暖"的源头）。同特异性、本文件更靠后，
   直接压回 --pm-bg / --pm-ink。 —— */
html.studio-theme-dark,
html.studio-theme-dark body,
body.studio-theme-dark,
html.theme-dark,
html.theme-dark body,
body.theme-dark {
    background: var(--pm-bg) !important;
    color: var(--pm-ink) !important;
}

/* —— gpt-chat 的 --chat-* 家族（design.css 用 !important 压过复古暖色，
   所以这里也带 !important + 更高特异性） —— */
:root:root,
html:root:root body,
html:root:root.theme-dark,
html:root:root.studio-theme-dark,
html:root:root body.theme-dark,
html:root:root body.studio-theme-dark {
    --chat-bg: var(--pm-bg) !important;
    --chat-panel: var(--pm-surface) !important;
    --chat-panel-2: var(--pm-surface-2) !important;
    --chat-soft: var(--pm-surface-2) !important;
    --chat-line: var(--pm-line) !important;
    --chat-line-2: var(--pm-line-strong) !important;
    --chat-text: var(--pm-ink) !important;
    --chat-muted: var(--pm-ink-soft) !important;
    --chat-faint: var(--pm-ink-faint) !important;
    --chat-strong: var(--pm-accent) !important;
    --chat-strong-text: var(--pm-accent-contrast) !important;
    --chat-strong-hover: var(--pm-accent-hover) !important;
    --chat-active-bg: var(--pm-accent-soft) !important;
    --chat-active-text: var(--pm-ink) !important;
    --chat-active-border: var(--pm-line-strong) !important;
    --chat-user-bg: var(--pm-accent) !important;
    --chat-user-text: var(--pm-accent-contrast) !important;
}

/* ==== BEGIN AUTO-GENERATED: 复古色收编 ==== */
/* 由 tools/gen-accent-overrides.py 生成：把散落在 theme.css / canvas.css /
   canvas-list.css / asset-manager.css / api-settings.css / index.html /
   gpt-chat.html 等处的复古色字面量（琥珀 #ff8f00、紫罗兰 #9d4edd、
   奶油 #e9e2d6、棕褐 #c9b391、暖棕底 #221d18 等）统一收编到 --pm-*。
   与节点 / 端口 / 连线 / AI 侧栏 / 品牌标相关的选择器已排除。 */

html:root:root.studio-theme-dark #rotate-h, html:root:root.studio-theme-dark #rotate-v, html:root:root.studio-theme-dark #distance {
    background: var(--pm-surface-2) !important;
}

html:root:root.studio-theme-dark #rotate-h::-webkit-slider-thumb, html:root:root.studio-theme-dark #rotate-v::-webkit-slider-thumb, html:root:root.studio-theme-dark #distance::-webkit-slider-thumb {
    background: var(--pm-accent) !important;
}

html:root:root.studio-theme-dark #rotate-h::-moz-range-thumb, html:root:root.studio-theme-dark #rotate-v::-moz-range-thumb, html:root:root.studio-theme-dark #distance::-moz-range-thumb {
    background: var(--pm-accent) !important;
}

html:root:root .engine-btn {
    color: var(--pm-ink-faint) !important;
}

html:root:root .thread-list::-webkit-scrollbar-thumb, html:root:root .messages::-webkit-scrollbar-thumb, html:root:root .ref-strip::-webkit-scrollbar-thumb {
    background: var(--pm-surface-2) !important;
}

html:root:root.studio-theme-dark body .topbar, html:root:root body.studio-theme-dark .topbar, html:root:root.theme-dark body .topbar, html:root:root body.theme-dark .topbar {
    background: var(--pm-bg) !important;
}

html:root:root.studio-theme-dark body .composer-wrap, html:root:root body.studio-theme-dark .composer-wrap, html:root:root.theme-dark body .composer-wrap, html:root:root body.theme-dark .composer-wrap {
    background: linear-gradient(to top,var(--chat-bg) 82%,var(--pm-bg)) !important;
}

html:root:root.studio-theme-dark body .image-preview-close, html:root:root body.studio-theme-dark .image-preview-close, html:root:root.theme-dark body .image-preview-close, html:root:root body.theme-dark .image-preview-close {
    background: var(--pm-surface) !important;
}

html:root:root.studio-theme-dark body .model-picker-button, html:root:root.studio-theme-dark body .upload-btn, html:root:root body.studio-theme-dark .model-picker-button, html:root:root body.studio-theme-dark .upload-btn, html:root:root.theme-dark body .model-picker-button, html:root:root.theme-dark body .upload-btn, html:root:root body.theme-dark .model-picker-button, html:root:root body.theme-dark .upload-btn {
    background: var(--pm-surface) !important;
}

html:root:root.studio-theme-dark body .thread-delete:hover, html:root:root body.studio-theme-dark .thread-delete:hover, html:root:root.theme-dark body .thread-delete:hover, html:root:root body.theme-dark .thread-delete:hover {
    background: var(--pm-surface-2) !important;
}

html:root:root.studio-theme-dark body .thread-item.active + .thread-delete:hover, html:root:root body.studio-theme-dark .thread-item.active + .thread-delete:hover, html:root:root.theme-dark body .thread-item.active + .thread-delete:hover, html:root:root body.theme-dark .thread-item.active + .thread-delete:hover {
    background: var(--pm-surface-2) !important;
}

html:root:root .nav-item.active {
    color: var(--pm-ink) !important;
}

html:root:root.theme-dark .nav-item.active, html:root:root body.theme-dark .nav-item.active {
    background: var(--pm-accent) !important;
    color: var(--pm-accent-contrast) !important;
}

html:root:root .nano-monitor.is-busy {
    background: var(--pm-accent) !important;
    color: var(--pm-ink) !important;
}

html:root:root .nano-monitor.is-busy .stat-group {
    color: var(--pm-ink) !important;
}

html:root:root .spinner-nano {
    border-top-color: var(--pm-line) !important;
}

html:root:root .update-source-check {
    color: var(--pm-ink) !important;
}

html:root:root .update-source-badge {
    background: var(--pm-accent) !important;
}

html:root:root .update-source-badge.ok {
    color: var(--pm-ink) !important;
}

html:root:root .update-source-badge.bad {
    color: var(--pm-ink) !important;
}

html:root:root .cloud-status {
    color: var(--pm-ink-faint) !important;
}

html:root:root .model-option {
    color: var(--pm-ink-faint) !important;
}

html:root:root .mode-badge {
    color: var(--pm-accent-contrast) !important;
}

html:root:root body.studio-theme-dark .api-link-btn, html:root:root.studio-theme-dark body .api-link-btn {
    background: var(--pm-surface-2) !important;
    border-color: var(--pm-accent-soft) !important;
    color: var(--pm-ink) !important;
}

html:root:root body.studio-theme-dark .api-link-btn:hover, html:root:root.studio-theme-dark body .api-link-btn:hover {
    background: var(--pm-surface) !important;
    border-color: var(--pm-line) !important;
    color: var(--pm-ink) !important;
}

html:root:root body.studio-theme-dark .field-frame:focus-within {
    border-color: var(--pm-line) !important;
}

html:root:root body.studio-theme-dark .key-btn:hover {
    border-color: var(--pm-line) !important;
}

html:root:root body.studio-theme-dark .action-btn.save-btn, html:root:root.studio-theme-dark body .action-btn.save-btn {
    background: var(--pm-surface) !important;
    border-color: var(--pm-line) !important;
}

html:root:root body.studio-theme-dark .action-btn.save-btn:hover, html:root:root.studio-theme-dark body .action-btn.save-btn:hover {
    background: var(--pm-surface) !important;
    border-color: var(--pm-line) !important;
}

html:root:root body.studio-theme-dark .api-page-save-btn, html:root:root.studio-theme-dark body .api-page-save-btn, html:root:root body.theme-dark .api-page-save-btn {
    background: var(--pm-surface-2) !important;
    border-color: var(--pm-line) !important;
}

html:root:root body.studio-theme-dark .api-page-save-btn:hover, html:root:root.studio-theme-dark body .api-page-save-btn:hover, html:root:root body.theme-dark .api-page-save-btn:hover {
    background: var(--pm-surface) !important;
    border-color: var(--pm-line) !important;
}

html:root:root body.studio-theme-dark .api-page-delete-btn:hover, html:root:root.studio-theme-dark body .api-page-delete-btn:hover, html:root:root body.theme-dark .api-page-delete-btn:hover {
    color: var(--pm-ink) !important;
}

html:root:root body.studio-theme-dark .picker-checkbox.checked {
    background: var(--pm-surface) !important;
    border-color: var(--pm-line) !important;
}

html:root:root body.studio-theme-dark .picker-other-tag.cat-chat {
    background: var(--pm-accent-soft) !important;
    color: var(--pm-accent) !important;
}

html:root:root body.studio-theme-dark .picker-summary, html:root:root.studio-theme-dark body .picker-summary {
    background: var(--pm-surface-2) !important;
    border-top-color: var(--pm-line) !important;
    color: var(--pm-ink-soft) !important;
}

html:root:root body.studio-theme-dark .picker-summary-title, html:root:root.studio-theme-dark body .picker-summary-title {
    color: var(--pm-ink) !important;
}

html:root:root body.studio-theme-dark .picker-sum-chip, html:root:root.studio-theme-dark body .picker-sum-chip {
    background: var(--pm-surface-2) !important;
    color: var(--pm-accent-contrast) !important;
}

html:root:root body.studio-theme-dark .picker-sum-chip-empty, html:root:root.studio-theme-dark body .picker-sum-chip-empty {
    background: var(--pm-surface-2) !important;
    color: var(--pm-accent-contrast) !important;
}

html:root:root body.studio-theme-dark .rh-preview-random-btn {
    background: var(--pm-surface) !important;
    border-color: var(--pm-line) !important;
}

html:root:root body.studio-theme-dark .rh-editor-check.checked {
    background: var(--pm-surface) !important;
    border-color: var(--pm-line) !important;
}

html:root:root body.studio-theme-dark .rh-editor-random.active {
    background: var(--pm-surface) !important;
    border-color: var(--pm-line) !important;
}

html:root:root body.studio-theme-dark .rh-editor-gnode.cat-audio rect {
    stroke: var(--pm-accent) !important;
}

html:root:root body.studio-theme-dark .action-btn.primary-btn, html:root:root.studio-theme-dark body .action-btn.primary-btn {
    background: var(--pm-accent-soft) !important;
    border-color: var(--pm-accent-soft) !important;
}

html:root:root body.studio-theme-dark .action-btn.primary-btn:hover, html:root:root.studio-theme-dark body .action-btn.primary-btn:hover {
    color: var(--pm-accent-contrast) !important;
}

html:root:root body.studio-theme-dark .provider-card.active::before, html:root:root.studio-theme-dark body .provider-card.active::before {
    background: var(--pm-surface-2) !important;
}

html:root:root body.studio-theme-dark .provider-card.active .provider-mark, html:root:root.studio-theme-dark body .provider-card.active .provider-mark, html:root:root body.studio-theme-dark .provider-card.active .provider-protocol-pill, html:root:root.studio-theme-dark body .provider-card.active .provider-protocol-pill {
    color: var(--pm-ink) !important;
}

html:root:root body.studio-theme-dark .add-btn:hover, html:root:root body.studio-theme-dark .api-link-btn:hover, html:root:root.studio-theme-dark body .add-btn:hover, html:root:root.studio-theme-dark body .api-link-btn:hover {
    color: var(--pm-ink) !important;
}

html:root:root body.studio-theme-dark .add-btn, html:root:root.studio-theme-dark body .add-btn {
    color: var(--pm-ink) !important;
}

html:root:root body.studio-theme-dark .recommend-badge, html:root:root body.studio-theme-dark .recommend-tag, html:root:root body.studio-theme-dark .recommend-register, html:root:root.studio-theme-dark body .recommend-badge, html:root:root.studio-theme-dark body .recommend-tag, html:root:root.studio-theme-dark body .recommend-register {
    color: var(--pm-ink-soft) !important;
}

html:root:root body.studio-theme-dark .recommend-fill, html:root:root.studio-theme-dark body .recommend-fill {
    background: var(--pm-surface-2) !important;
    color: var(--pm-ink) !important;
}

html:root:root body.studio-theme-dark .recommend-step, html:root:root.studio-theme-dark body .recommend-step {
    background: var(--pm-surface-2) !important;
    color: var(--pm-ink) !important;
}

html:root:root body.studio-theme-dark .recommend-fill .recommend-step, html:root:root.studio-theme-dark body .recommend-fill .recommend-step {
    background: var(--pm-surface) !important;
    color: var(--pm-ink) !important;
}

html:root:root body.studio-theme-dark .recommend-register, html:root:root body.studio-theme-dark .recommend-fill, html:root:root.studio-theme-dark body .recommend-register, html:root:root.studio-theme-dark body .recommend-fill {
    background: var(--pm-surface-2) !important;
    color: var(--pm-ink) !important;
}

html:root:root body.studio-theme-dark .recommend-actions a:hover, html:root:root body.studio-theme-dark .recommend-actions button:hover, html:root:root.studio-theme-dark body .recommend-actions a:hover, html:root:root.studio-theme-dark body .recommend-actions button:hover {
    background: var(--pm-surface-2) !important;
    color: var(--pm-accent-contrast) !important;
}

html:root:root body.studio-theme-dark .action-btn.primary-btn, html:root:root body.studio-theme-dark .api-link-btn, html:root:root body.studio-theme-dark .action-btn.save-btn, html:root:root body.studio-theme-dark .recommend-register, html:root:root body.studio-theme-dark .recommend-fill, html:root:root.studio-theme-dark body .action-btn.primary-btn, html:root:root.studio-theme-dark body .api-link-btn, html:root:root.studio-theme-dark body .action-btn.save-btn, html:root:root.studio-theme-dark body .recommend-register, html:root:root.studio-theme-dark body .recommend-fill {
    color: var(--pm-ink) !important;
}

html:root:root body.studio-theme-dark .action-btn.primary-btn:hover, html:root:root body.studio-theme-dark .api-link-btn:hover, html:root:root body.studio-theme-dark .action-btn.save-btn:hover, html:root:root body.studio-theme-dark .recommend-register:hover, html:root:root body.studio-theme-dark .recommend-fill:hover, html:root:root.studio-theme-dark body .action-btn.primary-btn:hover, html:root:root.studio-theme-dark body .api-link-btn:hover, html:root:root.studio-theme-dark body .action-btn.save-btn:hover, html:root:root.studio-theme-dark body .recommend-register:hover, html:root:root.studio-theme-dark body .recommend-fill:hover {
    color: var(--pm-accent-contrast) !important;
}

html:root:root body.studio-theme-dark .api-link-btn, html:root:root body.studio-theme-dark .action-btn.primary-btn, html:root:root body.studio-theme-dark .action-btn.save-btn, html:root:root body.studio-theme-dark .recommend-register, html:root:root body.studio-theme-dark .recommend-fill, html:root:root.studio-theme-dark body .api-link-btn, html:root:root.studio-theme-dark body .action-btn.primary-btn, html:root:root.studio-theme-dark body .action-btn.save-btn, html:root:root.studio-theme-dark body .recommend-register, html:root:root.studio-theme-dark body .recommend-fill {
    color: var(--pm-ink) !important;
}

html:root:root body.studio-theme-dark .api-link-btn:hover, html:root:root body.studio-theme-dark .action-btn.primary-btn:hover, html:root:root body.studio-theme-dark .action-btn.save-btn:hover, html:root:root body.studio-theme-dark .recommend-register:hover, html:root:root body.studio-theme-dark .recommend-fill:hover, html:root:root.studio-theme-dark body .api-link-btn:hover, html:root:root.studio-theme-dark body .action-btn.primary-btn:hover, html:root:root.studio-theme-dark body .action-btn.save-btn:hover, html:root:root.studio-theme-dark body .recommend-register:hover, html:root:root.studio-theme-dark body .recommend-fill:hover {
    color: var(--pm-accent-contrast) !important;
}

html:root:root body:not(.studio-theme-dark) .api-link-btn, html:root:root body:not(.studio-theme-dark) .action-btn.primary-btn, html:root:root body:not(.studio-theme-dark) .action-btn.save-btn, html:root:root body:not(.studio-theme-dark) .recommend-register, html:root:root body:not(.studio-theme-dark) .recommend-fill, html:root:root:not(.studio-theme-dark) body:not(.theme-dark) .api-link-btn, html:root:root:not(.studio-theme-dark) body:not(.theme-dark) .action-btn.primary-btn, html:root:root:not(.studio-theme-dark) body:not(.theme-dark) .action-btn.save-btn, html:root:root:not(.studio-theme-dark) body:not(.theme-dark) .recommend-register, html:root:root:not(.studio-theme-dark) body:not(.theme-dark) .recommend-fill {
    color: var(--pm-ink) !important;
}

html:root:root body.studio-theme-dark .recommend-cap-icons span, html:root:root.studio-theme-dark body .recommend-cap-icons span {
    background: var(--pm-accent-soft) !important;
}

html:root:root body.studio-theme-dark .onboarding-step-label, html:root:root.studio-theme-dark body .onboarding-step-label {
    background: var(--pm-accent-soft) !important;
}

html:root:root body.studio-theme-dark .onboarding-badge, html:root:root.studio-theme-dark body .onboarding-badge {
    background: var(--pm-accent-soft) !important;
}

html:root:root body.studio-theme-dark .onboarding-key-btn:hover, html:root:root body.studio-theme-dark .onboarding-fill-btn:hover, html:root:root body.studio-theme-dark .onboarding-save-btn:hover, html:root:root body.studio-theme-dark .onboarding-default-btn:hover, html:root:root.studio-theme-dark body .onboarding-key-btn:hover, html:root:root.studio-theme-dark body .onboarding-fill-btn:hover, html:root:root.studio-theme-dark body .onboarding-save-btn:hover, html:root:root.studio-theme-dark body .onboarding-default-btn:hover {
    color: var(--pm-ink) !important;
}

html:root:root body:not(.studio-theme-dark) .provider-onboarding-card, html:root:root:not(.studio-theme-dark) body:not(.theme-dark) .provider-onboarding-card {
    background: var(--pm-surface) !important;
}

html:root:root body:not(.studio-theme-dark) .onboarding-title, html:root:root:not(.studio-theme-dark) body:not(.theme-dark) .onboarding-title, html:root:root body:not(.studio-theme-dark) .onboarding-step-title, html:root:root:not(.studio-theme-dark) body:not(.theme-dark) .onboarding-step-title, html:root:root body:not(.studio-theme-dark) .recommend-name, html:root:root:not(.studio-theme-dark) body:not(.theme-dark) .recommend-name {
    color: var(--pm-ink) !important;
}

html:root:root body:not(.studio-theme-dark) .onboarding-rh-source-group, html:root:root:not(.studio-theme-dark) body:not(.theme-dark) .onboarding-rh-source-group, html:root:root body:not(.studio-theme-dark) .recommend-platform-info, html:root:root:not(.studio-theme-dark) body:not(.theme-dark) .recommend-platform-info {
    background: var(--pm-surface) !important;
}

html:root:root body:not(.studio-theme-dark) .onboarding-key-field input, html:root:root:not(.studio-theme-dark) body:not(.theme-dark) .onboarding-key-field input {
    background: var(--pm-surface) !important;
}

html:root:root body:not(.studio-theme-dark) .onboarding-key-field input:focus, html:root:root:not(.studio-theme-dark) body:not(.theme-dark) .onboarding-key-field input:focus {
    box-shadow: 0 0 0 3px var(--pm-accent-soft) !important;
}

html:root:root body:not(.studio-theme-dark) .onboarding-key-btn, html:root:root body:not(.studio-theme-dark) .onboarding-save-btn, html:root:root body:not(.studio-theme-dark) .recommend-guide-key-btn, html:root:root:not(.studio-theme-dark) body:not(.theme-dark) .onboarding-key-btn, html:root:root:not(.studio-theme-dark) body:not(.theme-dark) .onboarding-save-btn, html:root:root:not(.studio-theme-dark) body:not(.theme-dark) .recommend-guide-key-btn {
    background: var(--pm-surface) !important;
}

html:root:root body:not(.studio-theme-dark) .onboarding-badge, html:root:root body:not(.studio-theme-dark) .recommend-cap-icons span, html:root:root body:not(.studio-theme-dark) .recommend-tag, html:root:root:not(.studio-theme-dark) body:not(.theme-dark) .onboarding-badge, html:root:root:not(.studio-theme-dark) body:not(.theme-dark) .recommend-cap-icons span, html:root:root:not(.studio-theme-dark) body:not(.theme-dark) .recommend-tag {
    color: var(--pm-accent) !important;
}

html:root:root body:not(.studio-theme-dark) .recommend-badge, html:root:root:not(.studio-theme-dark) body:not(.theme-dark) .recommend-badge {
    background: var(--pm-surface) !important;
}

html:root:root body:not(.studio-theme-dark) .onboarding-rh-row-field, html:root:root body:not(.studio-theme-dark) .onboarding-rh-source-group, html:root:root:not(.studio-theme-dark) body:not(.theme-dark) .onboarding-rh-row-field, html:root:root:not(.studio-theme-dark) body:not(.theme-dark) .onboarding-rh-source-group, html:root:root body:not(.studio-theme-dark) .recommend-guide-save, html:root:root:not(.studio-theme-dark) body:not(.theme-dark) .recommend-guide-save {
    background: var(--pm-surface) !important;
}

html:root:root .provider-onboarding-card .onboarding-save-btn, html:root:root .recommend-inline-card .onboarding-save-btn, html:root:root .recommend-inline-card .recommend-guide-save-btn, html:root:root body:not(.studio-theme-dark) .provider-onboarding-card .onboarding-save-btn, html:root:root body:not(.studio-theme-dark) .recommend-inline-card .onboarding-save-btn, html:root:root body:not(.studio-theme-dark) .recommend-inline-card .recommend-guide-save-btn, html:root:root:not(.studio-theme-dark) body:not(.theme-dark) .provider-onboarding-card .onboarding-save-btn, html:root:root:not(.studio-theme-dark) body:not(.theme-dark) .recommend-inline-card .onboarding-save-btn, html:root:root:not(.studio-theme-dark) body:not(.theme-dark) .recommend-inline-card .recommend-guide-save-btn, html:root:root body.studio-theme-dark .provider-onboarding-card .onboarding-save-btn, html:root:root body.studio-theme-dark .recommend-inline-card .onboarding-save-btn, html:root:root body.studio-theme-dark .recommend-inline-card .recommend-guide-save-btn, html:root:root.studio-theme-dark body .provider-onboarding-card .onboarding-save-btn, html:root:root.studio-theme-dark body .recommend-inline-card .onboarding-save-btn, html:root:root.studio-theme-dark body .recommend-inline-card .recommend-guide-save-btn {
    color: var(--pm-ink) !important;
}

html:root:root .provider-onboarding-card .onboarding-save-btn:hover, html:root:root .recommend-inline-card .onboarding-save-btn:hover, html:root:root .recommend-inline-card .recommend-guide-save-btn:hover, html:root:root body:not(.studio-theme-dark) .provider-onboarding-card .onboarding-save-btn:hover, html:root:root body:not(.studio-theme-dark) .recommend-inline-card .onboarding-save-btn:hover, html:root:root body:not(.studio-theme-dark) .recommend-inline-card .recommend-guide-save-btn:hover, html:root:root:not(.studio-theme-dark) body:not(.theme-dark) .provider-onboarding-card .onboarding-save-btn:hover, html:root:root:not(.studio-theme-dark) body:not(.theme-dark) .recommend-inline-card .onboarding-save-btn:hover, html:root:root:not(.studio-theme-dark) body:not(.theme-dark) .recommend-inline-card .recommend-guide-save-btn:hover, html:root:root body.studio-theme-dark .provider-onboarding-card .onboarding-save-btn:hover, html:root:root body.studio-theme-dark .recommend-inline-card .onboarding-save-btn:hover, html:root:root body.studio-theme-dark .recommend-inline-card .recommend-guide-save-btn:hover, html:root:root.studio-theme-dark body .provider-onboarding-card .onboarding-save-btn:hover, html:root:root.studio-theme-dark body .recommend-inline-card .onboarding-save-btn:hover, html:root:root.studio-theme-dark body .recommend-inline-card .recommend-guide-save-btn:hover {
    color: var(--pm-ink) !important;
}

html:root:root body.studio-theme-dark .provider-onboarding-card .onboarding-save-btn, html:root:root body.studio-theme-dark .recommend-inline-card .onboarding-save-btn, html:root:root body.studio-theme-dark .recommend-inline-card .recommend-guide-save-btn, html:root:root.studio-theme-dark body .provider-onboarding-card .onboarding-save-btn, html:root:root.studio-theme-dark body .recommend-inline-card .onboarding-save-btn, html:root:root.studio-theme-dark body .recommend-inline-card .recommend-guide-save-btn {
    color: var(--pm-accent-contrast) !important;
}

html:root:root body.studio-theme-dark .provider-onboarding-card .onboarding-save-btn:hover, html:root:root body.studio-theme-dark .recommend-inline-card .onboarding-save-btn:hover, html:root:root body.studio-theme-dark .recommend-inline-card .recommend-guide-save-btn:hover, html:root:root.studio-theme-dark body .provider-onboarding-card .onboarding-save-btn:hover, html:root:root.studio-theme-dark body .recommend-inline-card .onboarding-save-btn:hover, html:root:root.studio-theme-dark body .recommend-inline-card .recommend-guide-save-btn:hover {
    color: var(--pm-accent-contrast) !important;
}

html:root:root body:not(.studio-theme-dark) .runninghub-config-block, html:root:root:not(.studio-theme-dark) body:not(.theme-dark) .runninghub-config-block {
    background: var(--pm-surface) !important;
}

html:root:root body:not(.studio-theme-dark) .rh-paste-row, html:root:root:not(.studio-theme-dark) body:not(.theme-dark) .rh-paste-row {
    background: var(--pm-surface) !important;
}

html:root:root body:not(.studio-theme-dark) .rh-group-count, html:root:root:not(.studio-theme-dark) body:not(.theme-dark) .rh-group-count {
    background: var(--pm-surface) !important;
}

html:root:root body:not(.studio-theme-dark) .rh-config-card, html:root:root:not(.studio-theme-dark) body:not(.theme-dark) .rh-config-card, html:root:root body:not(.studio-theme-dark) .rh-empty, html:root:root:not(.studio-theme-dark) body:not(.theme-dark) .rh-empty {
    background: var(--pm-surface) !important;
}

html:root:root body:not(.studio-theme-dark) .rh-card-title-field input, html:root:root:not(.studio-theme-dark) body:not(.theme-dark) .rh-card-title-field input {
    background: var(--pm-surface) !important;
}

html:root:root body.studio-theme-dark .api-link-btn, html:root:root body.studio-theme-dark .api-link-btn:hover, html:root:root body.studio-theme-dark.show-recommend-mode .api-link-btn, html:root:root.studio-theme-dark body .api-link-btn, html:root:root.studio-theme-dark body .api-link-btn:hover, html:root:root.studio-theme-dark body.show-recommend-mode .api-link-btn {
    background: var(--pm-surface-2) !important;
    border-color: var(--pm-line) !important;
    color: var(--pm-accent-contrast) !important;
}

html:root:root body.studio-theme-dark .api-link-btn:hover, html:root:root body.studio-theme-dark.show-recommend-mode .api-link-btn:hover, html:root:root.studio-theme-dark body .api-link-btn:hover, html:root:root.studio-theme-dark body.show-recommend-mode .api-link-btn:hover {
    background: var(--pm-surface) !important;
    border-color: var(--pm-line) !important;
}

html:root:root .theme-dark .ws-paste-btn {
    background: var(--pm-accent) !important;
    border-color: var(--pm-accent-soft) !important;
    box-shadow: 0 10px 24px var(--pm-accent-soft) !important;
}

html:root:root .theme-dark .ws-paste-btn:hover {
    background: var(--pm-accent-hover) !important;
}

html:root:root .theme-dark .ws-project-row.active, html:root:root .theme-dark .ws-primary-btn {
    background: var(--pm-accent) !important;
    color: var(--pm-accent-contrast) !important;
}

html:root:root .theme-dark .ws-project-row.active .ws-project-name, html:root:root .theme-dark .ws-project-row.active .ws-project-icon, html:root:root .theme-dark .ws-project-row.active .ws-project-count {
    color: var(--pm-accent-contrast) !important;
}

html:root:root .theme-dark .ws-project-row.active .ws-proj-act:hover {
    color: var(--pm-accent-contrast) !important;
}

html:root:root .theme-dark .ws-mini-btn.primary {
    background: var(--pm-accent) !important;
    color: var(--pm-accent-contrast) !important;
    border-color: var(--pm-accent) !important;
}

html:root:root .theme-dark .ws-create-confirm {
    background: var(--pm-accent) !important;
    color: var(--pm-accent-contrast) !important;
}

html:root:root .theme-dark .ws-create-toggle-btn.active {
    background: var(--pm-accent) !important;
    color: var(--pm-accent-contrast) !important;
}

html:root:root.theme-dark .canvas-meta-pop, html:root:root body.theme-dark .canvas-meta-pop, html:root:root.studio-theme-dark .canvas-meta-pop, html:root:root body.studio-theme-dark .canvas-meta-pop {
    background: var(--pm-surface) !important;
    color: var(--pm-ink) !important;
}

html:root:root.theme-dark .canvas-meta-label, html:root:root body.theme-dark .canvas-meta-label, html:root:root.studio-theme-dark .canvas-meta-label, html:root:root body.studio-theme-dark .canvas-meta-label {
    color: var(--pm-ink-soft) !important;
}

html:root:root.theme-dark .canvas-owner-input, html:root:root body.theme-dark .canvas-owner-input, html:root:root.studio-theme-dark .canvas-owner-input, html:root:root body.studio-theme-dark .canvas-owner-input {
    color: var(--pm-ink) !important;
}

html:root:root.theme-dark .canvas-owner-input:focus, html:root:root body.theme-dark .canvas-owner-input:focus, html:root:root.studio-theme-dark .canvas-owner-input:focus, html:root:root body.studio-theme-dark .canvas-owner-input:focus {
    background: var(--pm-surface) !important;
    border-color: var(--pm-line-strong) !important;
}

html:root:root.theme-dark .canvas-color-swatch.cc-none, html:root:root body.theme-dark .canvas-color-swatch.cc-none, html:root:root.studio-theme-dark .canvas-color-swatch.cc-none, html:root:root body.studio-theme-dark .canvas-color-swatch.cc-none, html:root:root.theme-dark .canvas-meta-pop .emoji-option, html:root:root body.theme-dark .canvas-meta-pop .emoji-option, html:root:root.studio-theme-dark .canvas-meta-pop .emoji-option, html:root:root body.studio-theme-dark .canvas-meta-pop .emoji-option {
    color: var(--pm-ink-soft) !important;
}

html:root:root.theme-dark .canvas-meta-pop .emoji-option:hover, html:root:root body.theme-dark .canvas-meta-pop .emoji-option:hover, html:root:root.studio-theme-dark .canvas-meta-pop .emoji-option:hover, html:root:root body.studio-theme-dark .canvas-meta-pop .emoji-option:hover {
    color: var(--pm-ink) !important;
    border-color: var(--pm-line-strong) !important;
}

html:root:root .theme-dark .loop-counter-token-btn {
    background: var(--pm-surface-2) !important;
    color: var(--pm-accent-contrast) !important;
    border-color: var(--pm-line) !important;
}

html:root:root .theme-dark .loop-token-chip {
    background: var(--pm-surface-2) !important;
    color: var(--pm-accent-contrast) !important;
}

html:root:root .theme-dark .rh-prompt-field textarea, html:root:root body.theme-dark .rh-prompt-field textarea, html:root:root.theme-dark .rh-prompt-field textarea, html:root:root.studio-theme-dark .rh-prompt-field textarea, html:root:root body.studio-theme-dark .rh-prompt-field textarea, html:root:root .studio-theme-dark .rh-prompt-field textarea {
    background: var(--pm-surface) !important;
    color: var(--pm-ink) !important;
}

html:root:root .theme-dark .image-edit-tools input[type="range"]::-webkit-slider-thumb {
    background: var(--pm-surface-2) !important;
}

html:root:root .theme-dark .image-edit-tools input[type="range"]::-moz-range-thumb {
    background: var(--pm-surface-2) !important;
}

html:root:root .theme-dark .grid-gap-value {
    background: var(--pm-surface-2) !important;
    color: var(--pm-accent-contrast) !important;
}

html:root:root .theme-dark .grid-preset-btn {
    color: var(--pm-ink-soft) !important;
}

html:root:root .theme-dark .grid-preset-btn:hover {
    background: var(--pm-accent) !important;
    border-color: var(--pm-accent) !important;
    color: var(--pm-accent-contrast) !important;
}

html:root:root .theme-dark .crop-ratio-btn {
    color: var(--pm-ink-soft) !important;
}

html:root:root .theme-dark .crop-ratio-btn:hover, html:root:root .theme-dark .crop-ratio-btn.active {
    background: var(--pm-accent) !important;
    border-color: var(--pm-accent) !important;
    color: var(--pm-accent-contrast) !important;
}

html:root:root .theme-dark .image-edit-mode button.active {
    background: var(--pm-accent) !important;
    color: var(--pm-accent-contrast) !important;
}

html:root:root .theme-dark .output-resolution, html:root:root .theme-dark .preview-icon-btn {
    color: var(--pm-ink-soft) !important;
}

html:root:root .theme-dark .preview-icon-btn:hover {
    background: var(--pm-surface-2) !important;
    color: var(--pm-accent-contrast) !important;
}

html:root:root .theme-dark .output-spinner {
    border-top-color: var(--pm-line-strong) !important;
}

html:root:root .theme-dark .image-edit-btn.primary {
    background: var(--pm-accent) !important;
    color: var(--pm-accent-contrast) !important;
}

html:root:root .theme-dark .gen-btn, html:root:root .theme-dark .llm-run, html:root:root .theme-dark .primary-btn, html:root:root .theme-dark .model-btn.primary {
    background: var(--pm-accent) !important;
    color: var(--pm-accent-contrast) !important;
}

html:root:root .theme-dark .comfy-random-btn.active, html:root:root.theme-dark .comfy-random-btn.active, html:root:root body.theme-dark .comfy-random-btn.active, html:root:root.studio-theme-dark .comfy-random-btn.active, html:root:root body.studio-theme-dark .comfy-random-btn.active, html:root:root .studio-theme-dark .comfy-random-btn.active {
    background: var(--pm-surface-2) !important;
    color: var(--pm-accent-contrast) !important;
}

html:root:root .theme-dark .model-btn.secondary {
    color: var(--pm-ink-soft) !important;
}

html:root:root .theme-dark .model-btn.secondary:hover {
    border-color: var(--pm-line-strong) !important;
}

html:root:root .theme-dark .api-key-link:hover {
    background: var(--pm-accent-hover) !important;
    border-color: var(--pm-accent) !important;
}

html:root:root .theme-dark .select-lite option {
    background: var(--pm-surface) !important;
    color: var(--pm-ink) !important;
}

html:root:root .theme-dark .select-lite:has(option:checked:disabled) {
    color: var(--pm-ink-soft) !important;
}

html:root:root .theme-dark .gate-trash-badge {
    background: var(--pm-accent) !important;
    color: var(--pm-accent-contrast) !important;
}

html:root:root .theme-dark .secondary-btn.active, html:root:root .theme-dark .create-confirm {
    background: var(--pm-accent) !important;
    color: var(--pm-accent-contrast) !important;
    border-color: var(--pm-accent) !important;
}

html:root:root .theme-dark .canvas-item.active {
    background: var(--pm-accent) !important;
    border-color: var(--pm-accent) !important;
}

html:root:root .theme-dark .canvas-item.active .canvas-card-title, html:root:root .theme-dark .canvas-item.active .canvas-card-time {
    color: var(--pm-accent-contrast) !important;
}

html:root:root .theme-dark .canvas-item.active .canvas-card-meta, html:root:root .theme-dark .canvas-item.active .canvas-preview-mark, html:root:root .theme-dark .canvas-item.active .canvas-card-edit, html:root:root .theme-dark .canvas-item.active .canvas-delete {
    color: var(--pm-accent-contrast) !important;
}

html:root:root .canvas-item .canvas-preview-mark.icon-has-color:hover, html:root:root .canvas-item.active .canvas-preview-mark.icon-has-color:hover, html:root:root .theme-dark .canvas-item .canvas-preview-mark.icon-has-color:hover, html:root:root .theme-dark .canvas-item.active .canvas-preview-mark.icon-has-color:hover {
    background: color-mix(in srgb, var(--cc) 88%, var(--pm-surface)) !important;
}

html:root:root body.studio-theme-dark .gnode.cat-loader    rect {
    stroke: var(--pm-accent) !important;
}

html:root:root body.studio-theme-dark .input-row.is-active {
    border-color: var(--pm-line) !important;
}

html:root:root body.studio-theme-dark .check-toggle.checked {
    background: var(--pm-surface) !important;
    border-color: var(--pm-line) !important;
}

html:root:root body.studio-theme-dark .opt-type-tag.is-num {
    background: var(--pm-accent-soft) !important;
    color: var(--pm-accent) !important;
}

html:root:root body.studio-theme-dark .random-btn.active {
    background: var(--pm-surface) !important;
    border-color: var(--pm-line) !important;
}

html:root:root body.studio-theme-dark .pfield-bool-track.on {
    background: var(--pm-surface) !important;
}

html:root:root body.studio-theme-dark .pfield-bool-thumb {
    background: var(--pm-bg) !important;
}

html:root:root body.studio-theme-dark .pfield-bool-track:not(.on) .pfield-bool-thumb {
    background: var(--pm-surface) !important;
}

html:root:root.studio-theme-dark body, html:root:root body.studio-theme-dark {
    background-image: repeating-linear-gradient(0deg, var(--pm-accent-soft) 0 1px, transparent 1px 4px),
        radial-gradient(var(--pm-accent-soft) 1px, transparent 1.4px) !important;
}

/* ★ 2026-09-14：.world 是随 zoom 缩放的一层，删掉它的点阵，只保留 #board 的静态点 */
html:root:root.studio-theme-dark body .world, html:root:root body.studio-theme-dark .world, html:root:root .theme-dark .world {
    background-image: none !important;
    background-color: transparent !important;
}

html:root:root.studio-theme-dark body .composer-wrap, html:root:root body.studio-theme-dark .composer-wrap {
    background: linear-gradient(to top,var(--pm-bg) 82%,var(--pm-bg)) !important;
}

html:root:root .theme-dark .loop-smart-prompt-index {
    background: var(--pm-surface-2) !important;
    color: var(--pm-accent-contrast) !important;
}

html:root:root .theme-dark .loop-smart-text:focus {
    border-color: var(--pm-accent) !important;
    box-shadow: 0 0 0 2px var(--pm-accent-soft) !important;
}

html:root:root .theme-dark .loop-smart-icon-btn {
    color: var(--pm-ink-soft) !important;
}

html:root:root .theme-dark .loop-smart-icon-btn:disabled:hover {
    color: var(--pm-ink-soft) !important;
}

html:root:root .theme-dark .loop-smart-add-prompt {
    color: var(--pm-ink-soft) !important;
}

html:root:root .theme-dark .loop-smart-add-prompt:hover {
    background: var(--pm-surface-2) !important;
    border-color: var(--pm-line) !important;
    color: var(--pm-accent-contrast) !important;
}

html:root:root .theme-dark .loop-smart-counter-token {
    background: var(--pm-surface-2) !important;
    color: var(--pm-accent-contrast) !important;
    border-color: var(--pm-line) !important;
}

html:root:root .theme-dark .loop-smart-token-chip {
    background: var(--pm-surface-2) !important;
    color: var(--pm-accent-contrast) !important;
}

html:root:root .theme-dark .image-wrap .mini-x, html:root:root .theme-dark .thumb-item .mini-x {
    color: var(--pm-ink-soft) !important;
}

html:root:root .theme-dark .smart-video-play {
    color: var(--pm-accent-contrast) !important;
}

html:root:root .theme-dark .input-thumb-audio {
    background: linear-gradient(160deg, var(--pm-accent-soft), rgba(15,23,42,.92)) !important;
    border-color: var(--pm-accent-soft) !important;
}

html:root:root .theme-dark .image-resolution-badge {
    color: var(--pm-ink-soft) !important;
}

html:root:root .theme-dark .input-thumb-label {
    color: var(--pm-ink) !important;
}

html:root:root .theme-dark .prompt-preset-panel-head button {
    color: var(--pm-ink-soft) !important;
}

html:root:root .theme-dark .preview-nav-btn:hover {
    background: var(--pm-surface-2) !important;
    color: var(--pm-accent-contrast) !important;
    border-color: var(--pm-line) !important;
}

html:root:root.studio-theme-dark, html:root:root.studio-theme-dark body, html:root:root body.studio-theme-dark {
    background: var(--pm-bg) !important;
    color: var(--pm-ink) !important;
}

html:root:root.studio-theme-dark body .app-shell, html:root:root.studio-theme-dark body .sidebar, html:root:root.studio-theme-dark body .stage, html:root:root body.studio-theme-dark .app-shell, html:root:root body.studio-theme-dark .sidebar, html:root:root body.studio-theme-dark .stage {
    background: var(--pm-bg) !important;
    border-color: var(--pm-line) !important;
}

html:root:root.studio-theme-dark body .nav-item, html:root:root body.studio-theme-dark .nav-item {
    color: var(--pm-ink-soft) !important;
}

html:root:root.studio-theme-dark body .nav-item:hover, html:root:root body.studio-theme-dark .nav-item:hover {
    background: var(--pm-surface) !important;
    color: var(--pm-ink) !important;
}

html:root:root.studio-theme-dark body .nav-item.active, html:root:root body.studio-theme-dark .nav-item.active {
    background: var(--pm-accent) !important;
    color: var(--pm-accent-contrast) !important;
}

html:root:root.studio-theme-dark body #logo-dot, html:root:root body.studio-theme-dark #logo-dot {
    background: var(--pm-accent) !important;
}

html:root:root.studio-theme-dark body .nano-monitor, html:root:root body.studio-theme-dark .nano-monitor {
    background: var(--pm-surface) !important;
    color: var(--pm-accent) !important;
}

html:root:root.studio-theme-dark body .divider, html:root:root body.studio-theme-dark .divider {
    background: var(--pm-accent-soft) !important;
}

html:root:root.studio-theme-dark body .theme-dock-btn, html:root:root body.studio-theme-dark .theme-dock-btn {
    background: var(--pm-surface) !important;
    border-color: var(--pm-line) !important;
    color: var(--pm-ink-soft) !important;
}

html:root:root.studio-theme-dark body .theme-dock-btn:hover, html:root:root.studio-theme-dark body .theme-dock-btn.active, html:root:root body.studio-theme-dark .theme-dock-btn:hover, html:root:root body.studio-theme-dark .theme-dock-btn.active {
    background: var(--pm-accent) !important;
    border-color: var(--pm-accent) !important;
    color: var(--pm-accent-contrast) !important;
}

html:root:root.studio-theme-dark body .console-card, html:root:root.studio-theme-dark body .nano-input, html:root:root.studio-theme-dark body .upload-item, html:root:root.studio-theme-dark body .result-frame, html:root:root.studio-theme-dark body .masonry-item, html:root:root.studio-theme-dark body .work-panel, html:root:root.studio-theme-dark body .setting-row, html:root:root.studio-theme-dark body .tool-panel, html:root:root.studio-theme-dark body .control-panel, html:root:root.studio-theme-dark body .topbar, html:root:root.studio-theme-dark body .composer, html:root:root.studio-theme-dark body .composer-body, html:root:root.studio-theme-dark body .bubble.assistant, html:root:root.studio-theme-dark body .history-popover, html:root:root.studio-theme-dark body .thread-item, html:root:root.studio-theme-dark body .lightbox-card, html:root:root.studio-theme-dark body #lightboxCard, html:root:root.studio-theme-dark body .bg-white, html:root:root.studio-theme-dark body .bg-gray-50, html:root:root.studio-theme-dark body .bg-slate-50, html:root:root.studio-theme-dark body .bg-gray-50\/50, html:root:root.studio-theme-dark body .bg-white\/90, html:root:root.studio-theme-dark body .bg-\[\#221d18\], html:root:root body.studio-theme-dark .console-card, html:root:root body.studio-theme-dark .nano-input, html:root:root body.studio-theme-dark .upload-item, html:root:root body.studio-theme-dark .result-frame, html:root:root body.studio-theme-dark .masonry-item, html:root:root body.studio-theme-dark .work-panel, html:root:root body.studio-theme-dark .setting-row, html:root:root body.studio-theme-dark .tool-panel, html:root:root body.studio-theme-dark .control-panel, html:root:root body.studio-theme-dark .topbar, html:root:root body.studio-theme-dark .composer, html:root:root body.studio-theme-dark .composer-body, html:root:root body.studio-theme-dark .bubble.assistant, html:root:root body.studio-theme-dark .history-popover, html:root:root body.studio-theme-dark .thread-item, html:root:root body.studio-theme-dark .lightbox-card, html:root:root body.studio-theme-dark #lightboxCard, html:root:root body.studio-theme-dark .bg-white, html:root:root body.studio-theme-dark .bg-gray-50, html:root:root body.studio-theme-dark .bg-slate-50, html:root:root body.studio-theme-dark .bg-gray-50\/50, html:root:root body.studio-theme-dark .bg-white\/90, html:root:root body.studio-theme-dark .bg-\[\#221d18\] {
    background-color: var(--pm-surface) !important;
    border-color: var(--pm-line) !important;
    color: var(--pm-ink) !important;
}

html:root:root.studio-theme-dark body .bg-gray-100, html:root:root.studio-theme-dark body .bg-slate-100, html:root:root.studio-theme-dark body .select-shell, html:root:root.studio-theme-dark body .model-pill, html:root:root.studio-theme-dark body .ratio-grid, html:root:root.studio-theme-dark body .resolution-toggle, html:root:root.studio-theme-dark body .mode-switch, html:root:root.studio-theme-dark body .mini-ratio, html:root:root body.studio-theme-dark .bg-gray-100, html:root:root body.studio-theme-dark .bg-slate-100, html:root:root body.studio-theme-dark .select-shell, html:root:root body.studio-theme-dark .model-pill, html:root:root body.studio-theme-dark .ratio-grid, html:root:root body.studio-theme-dark .resolution-toggle, html:root:root body.studio-theme-dark .mode-switch, html:root:root body.studio-theme-dark .mini-ratio {
    background-color: var(--pm-bg) !important;
    border-color: var(--pm-line) !important;
}

html:root:root.studio-theme-dark body input, html:root:root.studio-theme-dark body textarea, html:root:root.studio-theme-dark body select, html:root:root body.studio-theme-dark input, html:root:root body.studio-theme-dark textarea, html:root:root body.studio-theme-dark select {
    color: var(--pm-ink) !important;
    background-color: var(--pm-bg) !important;
    border-color: var(--pm-line) !important;
}

html:root:root.studio-theme-dark body input::placeholder, html:root:root.studio-theme-dark body textarea::placeholder, html:root:root body.studio-theme-dark input::placeholder, html:root:root body.studio-theme-dark textarea::placeholder {
    color: var(--pm-ink-faint) !important;
}

html:root:root.studio-theme-dark body .text-black, html:root:root.studio-theme-dark body .text-gray-700, html:root:root.studio-theme-dark body .text-slate-700, html:root:root.studio-theme-dark body .setting-title, html:root:root.studio-theme-dark body h1, html:root:root.studio-theme-dark body h2, html:root:root.studio-theme-dark body h3, html:root:root body.studio-theme-dark .text-black, html:root:root body.studio-theme-dark .text-gray-700, html:root:root body.studio-theme-dark .text-slate-700, html:root:root body.studio-theme-dark .setting-title, html:root:root body.studio-theme-dark h1, html:root:root body.studio-theme-dark h2, html:root:root body.studio-theme-dark h3 {
    color: var(--pm-ink) !important;
}

html:root:root.studio-theme-dark body .text-gray-300, html:root:root.studio-theme-dark body .text-gray-400, html:root:root.studio-theme-dark body .text-gray-500, html:root:root.studio-theme-dark body .text-slate-400, html:root:root.studio-theme-dark body .text-slate-500, html:root:root.studio-theme-dark body .setting-meta, html:root:root.studio-theme-dark body .label-nano, html:root:root body.studio-theme-dark .text-gray-300, html:root:root body.studio-theme-dark .text-gray-400, html:root:root body.studio-theme-dark .text-gray-500, html:root:root body.studio-theme-dark .text-slate-400, html:root:root body.studio-theme-dark .text-slate-500, html:root:root body.studio-theme-dark .setting-meta, html:root:root body.studio-theme-dark .label-nano {
    color: var(--pm-ink-soft) !important;
}

html:root:root.studio-theme-dark body .border-gray-100, html:root:root.studio-theme-dark body .border-gray-200, html:root:root.studio-theme-dark body .border-gray-300, html:root:root.studio-theme-dark body .border-slate-100, html:root:root.studio-theme-dark body .border-slate-200, html:root:root.studio-theme-dark body .border-black, html:root:root.studio-theme-dark body .border-white, html:root:root.studio-theme-dark body .border-\[\#f5ead6\], html:root:root.studio-theme-dark body .border-\[\#52402a\], html:root:root body.studio-theme-dark .border-gray-100, html:root:root body.studio-theme-dark .border-gray-200, html:root:root body.studio-theme-dark .border-gray-300, html:root:root body.studio-theme-dark .border-slate-100, html:root:root body.studio-theme-dark .border-slate-200, html:root:root body.studio-theme-dark .border-black, html:root:root body.studio-theme-dark .border-white, html:root:root body.studio-theme-dark .border-\[\#f5ead6\], html:root:root body.studio-theme-dark .border-\[\#52402a\] {
    border-color: var(--pm-line) !important;
}

html:root:root.studio-theme-dark body .glass-btn, html:root:root.studio-theme-dark body .btn-action-dark, html:root:root.studio-theme-dark body .send-btn, html:root:root.studio-theme-dark body .gen-btn, html:root:root.studio-theme-dark body .comfy-run, html:root:root.studio-theme-dark body .llm-run, html:root:root.studio-theme-dark body .primary-btn, html:root:root.studio-theme-dark body .bg-black, html:root:root body.studio-theme-dark .glass-btn, html:root:root body.studio-theme-dark .btn-action-dark, html:root:root body.studio-theme-dark .send-btn, html:root:root body.studio-theme-dark .gen-btn, html:root:root body.studio-theme-dark .comfy-run, html:root:root body.studio-theme-dark .llm-run, html:root:root body.studio-theme-dark .primary-btn, html:root:root body.studio-theme-dark .bg-black {
    background-color: var(--pm-accent) !important;
    color: var(--pm-accent-contrast) !important;
}

html:root:root.studio-theme-dark body .gallery-lightbox, html:root:root.studio-theme-dark body #lightbox, html:root:root body.studio-theme-dark .gallery-lightbox, html:root:root body.studio-theme-dark #lightbox {
    background: var(--pm-bg) !important;
}

html:root:root.studio-theme-dark body .masonry-item:hover, html:root:root.studio-theme-dark body .console-card:focus-within, html:root:root.studio-theme-dark body .select-shell:focus-within, html:root:root body.studio-theme-dark .masonry-item:hover, html:root:root body.studio-theme-dark .console-card:focus-within, html:root:root body.studio-theme-dark .select-shell:focus-within {
    border-color: var(--pm-line-strong) !important;
}

html:root:root.studio-theme-dark body .console-card textarea, html:root:root.studio-theme-dark body #prompt, html:root:root.studio-theme-dark body #promptInput, html:root:root body.studio-theme-dark .console-card textarea, html:root:root body.studio-theme-dark #prompt, html:root:root body.studio-theme-dark #promptInput {
    color: var(--pm-ink) !important;
    caret-color: var(--pm-accent) !important;
}

html:root:root.studio-theme-dark body .size-btn, html:root:root.studio-theme-dark body .model-option, html:root:root.studio-theme-dark body .ratio-option, html:root:root.studio-theme-dark body .resolution-option, html:root:root.studio-theme-dark body .mini-ratio button, html:root:root.studio-theme-dark body .mode-switch button, html:root:root body.studio-theme-dark .size-btn, html:root:root body.studio-theme-dark .model-option, html:root:root body.studio-theme-dark .ratio-option, html:root:root body.studio-theme-dark .resolution-option, html:root:root body.studio-theme-dark .mini-ratio button, html:root:root body.studio-theme-dark .mode-switch button {
    background: var(--pm-surface-2) !important;
    border-color: var(--pm-line) !important;
    color: var(--pm-ink-soft) !important;
}

html:root:root.studio-theme-dark body .size-btn:hover, html:root:root.studio-theme-dark body .model-option:hover, html:root:root.studio-theme-dark body .ratio-option:hover, html:root:root.studio-theme-dark body .resolution-option:hover, html:root:root body.studio-theme-dark .size-btn:hover, html:root:root body.studio-theme-dark .model-option:hover, html:root:root body.studio-theme-dark .ratio-option:hover, html:root:root body.studio-theme-dark .resolution-option:hover {
    border-color: var(--pm-line-strong) !important;
    color: var(--pm-accent) !important;
}

html:root:root.studio-theme-dark body .size-btn.active, html:root:root.studio-theme-dark body .model-option.active, html:root:root.studio-theme-dark body .ratio-option.active, html:root:root.studio-theme-dark body .resolution-option.active, html:root:root.studio-theme-dark body .mini-ratio button.active, html:root:root.studio-theme-dark body .mode-switch button.active, html:root:root body.studio-theme-dark .size-btn.active, html:root:root body.studio-theme-dark .model-option.active, html:root:root body.studio-theme-dark .ratio-option.active, html:root:root body.studio-theme-dark .resolution-option.active, html:root:root body.studio-theme-dark .mini-ratio button.active, html:root:root body.studio-theme-dark .mode-switch button.active {
    background: var(--pm-accent) !important;
    border-color: var(--pm-accent) !important;
    color: var(--pm-accent-contrast) !important;
}

html:root:root.studio-theme-dark body .ios-slider, html:root:root body.studio-theme-dark .ios-slider {
    background: var(--pm-surface-2) !important;
}

html:root:root.studio-theme-dark body .ios-switch input:checked + .ios-slider, html:root:root body.studio-theme-dark .ios-switch input:checked + .ios-slider {
    background: var(--pm-accent) !important;
    border-color: var(--pm-accent) !important;
    box-shadow: 0 0 0 3px var(--pm-accent-soft) !important;
}

html:root:root.studio-theme-dark body .ios-slider:before, html:root:root body.studio-theme-dark .ios-slider:before {
    background: var(--pm-surface-2) !important;
}

html:root:root.studio-theme-dark body .canvas-gate, html:root:root body.studio-theme-dark .canvas-gate {
    background-color: var(--pm-bg) !important;
    background-image: radial-gradient(var(--pm-surface-2) 1px, transparent 1px) !important;
}

html:root:root.studio-theme-dark body .gate-panel, html:root:root.studio-theme-dark body .canvas-item, html:root:root.studio-theme-dark body .canvas-open, html:root:root body.studio-theme-dark .gate-panel, html:root:root body.studio-theme-dark .canvas-item, html:root:root body.studio-theme-dark .canvas-open {
    background: var(--pm-surface) !important;
    border-color: var(--pm-line) !important;
    color: var(--pm-ink) !important;
}

html:root:root.studio-theme-dark body .canvas-item:hover, html:root:root body.studio-theme-dark .canvas-item:hover {
    background: var(--pm-surface-2) !important;
}

html:root:root.studio-theme-dark body .canvas-item.active, html:root:root body.studio-theme-dark .canvas-item.active {
    color: var(--pm-ink) !important;
}

html:root:root.studio-theme-dark body .canvas-card-title, html:root:root.studio-theme-dark body .gate-title, html:root:root.studio-theme-dark body .gate-name-input, html:root:root body.studio-theme-dark .canvas-card-title, html:root:root body.studio-theme-dark .gate-title, html:root:root body.studio-theme-dark .gate-name-input {
    color: var(--pm-ink) !important;
}

html:root:root.studio-theme-dark body .canvas-card-time, html:root:root.studio-theme-dark body .gate-subtitle, html:root:root body.studio-theme-dark .canvas-card-time {
    color: var(--pm-ink-soft) !important;
}

html:root:root body.studio-theme-dark .gate-subtitle {
    color: var(--pm-ink-soft) !important;
}

html:root:root.studio-theme-dark body .canvas-preview-mark, html:root:root.studio-theme-dark body .canvas-delete, html:root:root.studio-theme-dark body .secondary-btn, html:root:root.studio-theme-dark body .gate-back, html:root:root.studio-theme-dark body .gate-trash-entry, html:root:root.studio-theme-dark body .create-cancel, html:root:root.studio-theme-dark body .gate-create-row, html:root:root.studio-theme-dark body .gate-actions, html:root:root.studio-theme-dark body .trash-note, html:root:root.studio-theme-dark body .emoji-picker, html:root:root.studio-theme-dark body .create-menu, html:root:root.studio-theme-dark body .selection-hub, html:root:root.studio-theme-dark body .output-preview, html:root:root body.studio-theme-dark .canvas-preview-mark, html:root:root body.studio-theme-dark .canvas-delete, html:root:root body.studio-theme-dark .secondary-btn, html:root:root body.studio-theme-dark .gate-back, html:root:root body.studio-theme-dark .gate-trash-entry, html:root:root body.studio-theme-dark .create-cancel, html:root:root body.studio-theme-dark .gate-create-row, html:root:root body.studio-theme-dark .gate-actions, html:root:root body.studio-theme-dark .trash-note, html:root:root body.studio-theme-dark .emoji-picker, html:root:root body.studio-theme-dark .create-menu, html:root:root body.studio-theme-dark .selection-hub, html:root:root body.studio-theme-dark .output-preview {
    background: var(--pm-surface-2) !important;
    border-color: var(--pm-line) !important;
    color: var(--pm-accent) !important;
}

html:root:root.studio-theme-dark body .gate-trash-badge, html:root:root body.studio-theme-dark .gate-trash-badge {
    background: var(--pm-accent) !important;
    color: var(--pm-accent-contrast) !important;
}

html:root:root.studio-theme-dark body .secondary-btn.active, html:root:root body.studio-theme-dark .secondary-btn.active {
    background: var(--pm-accent) !important;
    border-color: var(--pm-accent) !important;
    color: var(--pm-accent-contrast) !important;
}

html:root:root.studio-theme-dark body .canvas-delete-box, html:root:root body.studio-theme-dark .canvas-delete-box {
    background: var(--pm-surface-2) !important;
    border: 1px solid var(--pm-line) !important;
}

html:root:root.studio-theme-dark body .canvas-confirm-btn, html:root:root.studio-theme-dark body .create-confirm, html:root:root body.studio-theme-dark .canvas-confirm-btn, html:root:root body.studio-theme-dark .create-confirm {
    background: var(--pm-accent) !important;
    color: var(--pm-accent-contrast) !important;
}

html:root:root.studio-theme-dark body .output-resolution, html:root:root body.studio-theme-dark .output-resolution {
    background: var(--pm-surface) !important;
    color: var(--pm-accent) !important;
}

html:root:root.studio-theme-dark body .shell, html:root:root.studio-theme-dark body .shell .board, html:root:root body.studio-theme-dark .shell, html:root:root body.studio-theme-dark .shell .board {
    background-color: var(--pm-bg) !important;
    background-image: radial-gradient(var(--pm-surface-2) 1px, transparent 1px) !important;
}

html:root:root.studio-theme-dark body .shell .panel, html:root:root body.studio-theme-dark .shell .panel {
    background: var(--pm-surface) !important;
    border: 1px solid var(--pm-line-strong) !important;
}

html:root:root.studio-theme-dark body .shell .tool-btn, html:root:root.studio-theme-dark body .shell .select-lite, html:root:root.studio-theme-dark body .shell .gen-count-row, html:root:root.studio-theme-dark body .shell .seg, html:root:root.studio-theme-dark body .shell .llm-mode, html:root:root.studio-theme-dark body .shell .mode-tabs, html:root:root body.studio-theme-dark .shell .tool-btn, html:root:root body.studio-theme-dark .shell .select-lite, html:root:root body.studio-theme-dark .shell .gen-count-row, html:root:root body.studio-theme-dark .shell .seg, html:root:root body.studio-theme-dark .shell .llm-mode, html:root:root body.studio-theme-dark .shell .mode-tabs {
    background: var(--pm-surface-2) !important;
    border: 1px solid var(--pm-line-strong) !important;
    color: var(--pm-ink-soft) !important;
}

html:root:root.studio-theme-dark body .shell .gen-settings, html:root:root.studio-theme-dark body .shell .setting-row, html:root:root.studio-theme-dark body .shell .comfy-settings, html:root:root body.studio-theme-dark .shell .gen-settings, html:root:root body.studio-theme-dark .shell .setting-row, html:root:root body.studio-theme-dark .shell .comfy-settings {
    background: var(--pm-surface-2) !important;
    border: 1px solid var(--pm-line-strong) !important;
    color: var(--pm-accent) !important;
}

html:root:root.studio-theme-dark body .shell .setting-title, html:root:root body.studio-theme-dark .shell .setting-title {
    color: var(--pm-ink-soft) !important;
}

html:root:root.studio-theme-dark body .shell .setting-input, html:root:root.studio-theme-dark body .shell .setting-check, html:root:root.studio-theme-dark body .shell .gen-count-input, html:root:root body.studio-theme-dark .shell .setting-input, html:root:root body.studio-theme-dark .shell .setting-check, html:root:root body.studio-theme-dark .shell .gen-count-input {
    background: var(--pm-surface) !important;
    border-color: var(--pm-line-strong) !important;
    color: var(--pm-ink) !important;
}

html:root:root.studio-theme-dark body .shell .gen-step-btn, html:root:root body.studio-theme-dark .shell .gen-step-btn {
    color: var(--pm-ink-soft) !important;
}

html:root:root.studio-theme-dark body .shell .gen-step-btn:hover, html:root:root body.studio-theme-dark .shell .gen-step-btn:hover {
    background: var(--pm-surface-2) !important;
    color: var(--pm-ink) !important;
}

html:root:root.studio-theme-dark body .shell .tool-btn:hover, html:root:root.studio-theme-dark body .shell .select-lite:hover, html:root:root body.studio-theme-dark .shell .tool-btn:hover, html:root:root body.studio-theme-dark .shell .select-lite:hover {
    background: var(--pm-surface) !important;
    border-color: var(--pm-line-strong) !important;
    color: var(--pm-ink) !important;
}

html:root:root.studio-theme-dark body .shell .llm-mode button, html:root:root.studio-theme-dark body .shell .seg button, html:root:root.studio-theme-dark body .shell .mode-tabs button, html:root:root body.studio-theme-dark .shell .llm-mode button, html:root:root body.studio-theme-dark .shell .seg button, html:root:root body.studio-theme-dark .shell .mode-tabs button {
    color: var(--pm-ink-soft) !important;
}

html:root:root.studio-theme-dark body .shell .llm-mode button.active, html:root:root.studio-theme-dark body .shell .seg button.active, html:root:root.studio-theme-dark body .shell .mode-tabs button.active, html:root:root body.studio-theme-dark .shell .llm-mode button.active, html:root:root body.studio-theme-dark .shell .seg button.active, html:root:root body.studio-theme-dark .shell .mode-tabs button.active {
    background: var(--pm-accent) !important;
    border-color: var(--pm-accent) !important;
    color: var(--pm-accent-contrast) !important;
}

html:root:root.studio-theme-dark body .shell .llm-system, html:root:root.studio-theme-dark body .shell .llm-chat-input, html:root:root.studio-theme-dark body .shell .llm-chat-log, html:root:root.studio-theme-dark body .shell .llm-output, html:root:root.studio-theme-dark body .shell .llm-chat-pane, html:root:root body.studio-theme-dark .shell .llm-system, html:root:root body.studio-theme-dark .shell .llm-chat-input, html:root:root body.studio-theme-dark .shell .llm-chat-log, html:root:root body.studio-theme-dark .shell .llm-output, html:root:root body.studio-theme-dark .shell .llm-chat-pane {
    background: var(--pm-surface-2) !important;
    border-color: var(--pm-line) !important;
    color: var(--pm-accent) !important;
}

html:root:root.studio-theme-dark body .shell .llm-pane-resizer::before, html:root:root body.studio-theme-dark .shell .llm-pane-resizer::before {
    background: var(--pm-surface-2) !important;
}

html:root:root.studio-theme-dark body .shell .llm-bubble.assistant, html:root:root body.studio-theme-dark .shell .llm-bubble.assistant {
    background: var(--pm-surface-2) !important;
    border-color: var(--pm-line) !important;
    color: var(--pm-ink) !important;
}

html:root:root.studio-theme-dark body .shell .llm-bubble.user, html:root:root body.studio-theme-dark .shell .llm-bubble.user {
    background: var(--pm-accent) !important;
    color: var(--pm-accent-contrast) !important;
}

html:root:root.studio-theme-dark body .shell .blank-image, html:root:root body.studio-theme-dark .shell .blank-image {
    color: var(--pm-ink-soft) !important;
}

html:root:root.studio-theme-dark body .shell .blank-image:hover, html:root:root.studio-theme-dark body .shell .blank-image.drag-over, html:root:root body.studio-theme-dark .shell .blank-image:hover, html:root:root body.studio-theme-dark .shell .blank-image.drag-over {
    border-color: var(--pm-accent-soft) !important;
    color: var(--pm-accent) !important;
}

html:root:root.studio-theme-dark body .shell .image-caption, html:root:root body.studio-theme-dark .shell .image-caption {
    color: var(--pm-ink-soft) !important;
}

html:root:root.studio-theme-dark body .shell .input-label, html:root:root body.studio-theme-dark .shell .input-label {
    background: var(--pm-bg) !important;
    color: var(--pm-accent) !important;
}

html:root:root.studio-theme-dark body .shell .prompt-list .bg-slate-50, html:root:root.studio-theme-dark body .shell .prompt-list .border-slate-100, html:root:root body.studio-theme-dark .shell .prompt-list .bg-slate-50, html:root:root body.studio-theme-dark .shell .prompt-list .border-slate-100 {
    background: var(--pm-surface-2) !important;
    border-color: var(--pm-line-strong) !important;
}

html:root:root.studio-theme-dark body .shell .input-index, html:root:root body.studio-theme-dark .shell .input-index {
    background: var(--pm-accent) !important;
    color: var(--pm-accent-contrast) !important;
}

html:root:root.studio-theme-dark body .shell .drop-overlay, html:root:root body.studio-theme-dark .shell .drop-overlay {
    background: var(--pm-bg) !important;
}

html:root:root.studio-theme-dark body .output-drag-preview, html:root:root body.studio-theme-dark .output-drag-preview, html:root:root .output-drag-preview {
    background: var(--pm-bg) !important;
    border: 1px solid var(--pm-line-strong) !important;
}

html:root:root .output-drag-preview img {
    background: var(--pm-bg) !important;
}

html:root:root.studio-theme-dark body .shell .resize-handle, html:root:root body.studio-theme-dark .shell .resize-handle {
    background: var(--pm-surface) !important;
    border-color: var(--pm-line-strong) !important;
    color: var(--pm-ink-soft) !important;
}

html:root:root.studio-theme-dark body .shell .resize-handle:hover, html:root:root body.studio-theme-dark .shell .resize-handle:hover {
    background: var(--pm-surface) !important;
    border-color: var(--pm-accent-soft) !important;
    color: var(--pm-accent) !important;
}

html:root:root.studio-theme-dark body .layout-container, html:root:root body.studio-theme-dark .layout-container, html:root:root.studio-theme-dark body .container-box, html:root:root body.studio-theme-dark .container-box {
    color: var(--pm-ink) !important;
}

html:root:root.studio-theme-dark body .mode-switcher, html:root:root.studio-theme-dark body .engine-panel, html:root:root.studio-theme-dark body .engine-switch, html:root:root.studio-theme-dark body .ios-slider, html:root:root.studio-theme-dark body .result-frame, html:root:root.studio-theme-dark body .gallery-lightbox, html:root:root.studio-theme-dark body #lightbox, html:root:root.studio-theme-dark body #compareContainer, html:root:root.studio-theme-dark body #compareContainerKlein, html:root:root.studio-theme-dark body #lightboxImg, html:root:root body.studio-theme-dark .mode-switcher, html:root:root body.studio-theme-dark .engine-panel, html:root:root body.studio-theme-dark .engine-switch, html:root:root body.studio-theme-dark .ios-slider, html:root:root body.studio-theme-dark .result-frame, html:root:root body.studio-theme-dark .gallery-lightbox, html:root:root body.studio-theme-dark #lightbox, html:root:root body.studio-theme-dark #compareContainer, html:root:root body.studio-theme-dark #compareContainerKlein, html:root:root body.studio-theme-dark #lightboxImg {
    background-color: var(--pm-surface-2) !important;
    border-color: var(--pm-line-strong) !important;
    color: var(--pm-ink) !important;
}

html:root:root.studio-theme-dark body .mode-glider, html:root:root.studio-theme-dark body .engine-btn.active, html:root:root.studio-theme-dark body .ios-slider:before, html:root:root body.studio-theme-dark .mode-glider, html:root:root body.studio-theme-dark .engine-btn.active, html:root:root body.studio-theme-dark .ios-slider:before {
    background: var(--pm-accent) !important;
    color: var(--pm-accent-contrast) !important;
}

html:root:root.studio-theme-dark body .mode-btn.active, html:root:root.studio-theme-dark body .engine-btn.active, html:root:root body.studio-theme-dark .mode-btn.active, html:root:root body.studio-theme-dark .engine-btn.active {
    color: var(--pm-accent-contrast) !important;
}

html:root:root.studio-theme-dark body .mode-btn, html:root:root.studio-theme-dark body .engine-btn, html:root:root.studio-theme-dark body .cloud-status, html:root:root body.studio-theme-dark .mode-btn, html:root:root body.studio-theme-dark .engine-btn, html:root:root body.studio-theme-dark .cloud-status {
    color: var(--pm-ink-soft) !important;
}

html:root:root.studio-theme-dark body .engine-btn:not(.active):hover, html:root:root body.studio-theme-dark .engine-btn:not(.active):hover {
    background: var(--pm-accent-soft) !important;
    color: var(--pm-ink) !important;
}

html:root:root.studio-theme-dark body .upload-item:hover, html:root:root.studio-theme-dark body .upload-item.drag-over, html:root:root body.studio-theme-dark .upload-item:hover, html:root:root body.studio-theme-dark .upload-item.drag-over {
    background: var(--pm-surface) !important;
    border-color: var(--pm-accent-soft) !important;
}

html:root:root.studio-theme-dark body .glass-btn, html:root:root.studio-theme-dark body .btn-render, html:root:root.studio-theme-dark body #downloadBtn, html:root:root.studio-theme-dark body #lightboxDownload, html:root:root body.studio-theme-dark .glass-btn, html:root:root body.studio-theme-dark .btn-render, html:root:root body.studio-theme-dark #downloadBtn, html:root:root body.studio-theme-dark #lightboxDownload {
    background: var(--pm-accent) !important;
    color: var(--pm-accent-contrast) !important;
    border-color: var(--pm-accent) !important;
}

html:root:root.studio-theme-dark body input[type=range]::-webkit-slider-runnable-track, html:root:root body.studio-theme-dark input[type=range]::-webkit-slider-runnable-track {
    background: var(--pm-surface-2) !important;
}

html:root:root.studio-theme-dark body input[type=range]::-webkit-slider-thumb, html:root:root body.studio-theme-dark input[type=range]::-webkit-slider-thumb {
    background: var(--pm-accent) !important;
}

html:root:root.studio-theme-dark body .masonry-item img, html:root:root.studio-theme-dark body .result-frame img, html:root:root body.studio-theme-dark .masonry-item img, html:root:root body.studio-theme-dark .result-frame img {
    background-color: var(--pm-surface-2) !important;
}

html:root:root.studio-theme-dark body .bg-black, html:root:root body.studio-theme-dark .bg-black {
    background-color: var(--pm-accent) !important;
    color: var(--pm-accent-contrast) !important;
}

html:root:root.studio-theme-dark body .hover\:text-black:hover, html:root:root body.studio-theme-dark .hover\:text-black:hover {
    color: var(--pm-ink) !important;
}

html:root:root.studio-theme-dark body .app-shell, html:root:root.studio-theme-dark body .sidebar, html:root:root.studio-theme-dark body .stage, html:root:root.studio-theme-dark body .shell, html:root:root body.studio-theme-dark .app-shell, html:root:root body.studio-theme-dark .sidebar, html:root:root body.studio-theme-dark .stage, html:root:root body.studio-theme-dark .shell {
    background: var(--pm-bg) !important;
    border-color: var(--pm-line) !important;
}

html:root:root.studio-theme-dark body .console-card, html:root:root.studio-theme-dark body .nano-input, html:root:root.studio-theme-dark body .upload-item, html:root:root.studio-theme-dark body .result-frame, html:root:root.studio-theme-dark body .masonry-item, html:root:root.studio-theme-dark body .engine-panel, html:root:root.studio-theme-dark body .engine-switch, html:root:root.studio-theme-dark body .mode-switcher, html:root:root.studio-theme-dark body .setting-row, html:root:root.studio-theme-dark body .provider-switch, html:root:root.studio-theme-dark body .ios-slider, html:root:root.studio-theme-dark body #compareContainer, html:root:root.studio-theme-dark body #lightboxImg, html:root:root.studio-theme-dark body #lightbox .bg-white, html:root:root.studio-theme-dark body .bg-white, html:root:root.studio-theme-dark body .bg-white\/90, html:root:root.studio-theme-dark body .bg-white\/95, html:root:root.studio-theme-dark body .bg-gray-50, html:root:root.studio-theme-dark body .bg-gray-50\/50, html:root:root.studio-theme-dark body .bg-gray-100, html:root:root.studio-theme-dark body .bg-gray-200, html:root:root.studio-theme-dark body .bg-\[\#221d18\], html:root:root.studio-theme-dark body .bg-\[\#221d18\], html:root:root body.studio-theme-dark .console-card, html:root:root body.studio-theme-dark .nano-input, html:root:root body.studio-theme-dark .upload-item, html:root:root body.studio-theme-dark .result-frame, html:root:root body.studio-theme-dark .masonry-item, html:root:root body.studio-theme-dark .engine-panel, html:root:root body.studio-theme-dark .engine-switch, html:root:root body.studio-theme-dark .mode-switcher, html:root:root body.studio-theme-dark .setting-row, html:root:root body.studio-theme-dark .provider-switch, html:root:root body.studio-theme-dark .ios-slider, html:root:root body.studio-theme-dark #compareContainer, html:root:root body.studio-theme-dark #lightboxImg, html:root:root body.studio-theme-dark #lightbox .bg-white, html:root:root body.studio-theme-dark .bg-white, html:root:root body.studio-theme-dark .bg-white\/90, html:root:root body.studio-theme-dark .bg-white\/95, html:root:root body.studio-theme-dark .bg-gray-50, html:root:root body.studio-theme-dark .bg-gray-50\/50, html:root:root body.studio-theme-dark .bg-gray-100, html:root:root body.studio-theme-dark .bg-gray-200, html:root:root body.studio-theme-dark .bg-\[\#221d18\], html:root:root body.studio-theme-dark .bg-\[\#221d18\] {
    background-color: var(--pm-surface) !important;
    border-color: var(--pm-line) !important;
    color: var(--pm-ink) !important;
}

html:root:root.studio-theme-dark body #lightbox, html:root:root body.studio-theme-dark #lightbox {
    background: var(--pm-bg) !important;
}

html:root:root.studio-theme-dark body .glass-btn, html:root:root.studio-theme-dark body .btn-render, html:root:root.studio-theme-dark body .mode-glider, html:root:root.studio-theme-dark body .engine-btn.active, html:root:root.studio-theme-dark body .ios-switch input:checked + .ios-slider, html:root:root.studio-theme-dark body #cloud-progress-bar, html:root:root body.studio-theme-dark .glass-btn, html:root:root body.studio-theme-dark .btn-render, html:root:root body.studio-theme-dark .mode-glider, html:root:root body.studio-theme-dark .engine-btn.active, html:root:root body.studio-theme-dark .ios-switch input:checked + .ios-slider, html:root:root body.studio-theme-dark #cloud-progress-bar {
    background: var(--pm-surface-2) !important;
    color: var(--pm-ink) !important;
    border-color: var(--pm-line) !important;
}

html:root:root.studio-theme-dark body .mode-btn.active, html:root:root.studio-theme-dark body .engine-btn.active, html:root:root.studio-theme-dark body .text-black, html:root:root body.studio-theme-dark .mode-btn.active, html:root:root body.studio-theme-dark .engine-btn.active, html:root:root body.studio-theme-dark .text-black {
    color: var(--pm-ink) !important;
}

html:root:root.studio-theme-dark body .mode-glider + .mode-btn.active, html:root:root body.studio-theme-dark .mode-glider + .mode-btn.active {
    color: var(--pm-ink) !important;
}

html:root:root.studio-theme-dark body .border-gray-100, html:root:root.studio-theme-dark body .border-gray-200, html:root:root.studio-theme-dark body .border-gray-200\/50, html:root:root.studio-theme-dark body .border-black, html:root:root body.studio-theme-dark .border-gray-100, html:root:root body.studio-theme-dark .border-gray-200, html:root:root body.studio-theme-dark .border-gray-200\/50, html:root:root body.studio-theme-dark .border-black {
    border-color: var(--pm-line) !important;
}

html:root:root.studio-theme-dark body h1, html:root:root.studio-theme-dark body h2, html:root:root.studio-theme-dark body h3, html:root:root.studio-theme-dark body label, html:root:root body.studio-theme-dark h1, html:root:root body.studio-theme-dark h2, html:root:root body.studio-theme-dark h3, html:root:root body.studio-theme-dark label {
    color: var(--pm-ink) !important;
}

html:root:root.studio-theme-dark body .mode-switcher .mode-btn.active, html:root:root.studio-theme-dark body .engine-switch .engine-btn.active, html:root:root body.studio-theme-dark .mode-switcher .mode-btn.active, html:root:root body.studio-theme-dark .engine-switch .engine-btn.active {
    color: var(--pm-ink) !important;
}

html:root:root.studio-theme-dark body .stage, html:root:root body.studio-theme-dark .stage {
    background: var(--pm-surface-2) !important;
}

html:root:root.studio-theme-dark body .console-card, html:root:root.studio-theme-dark body .nano-input, html:root:root.studio-theme-dark body .upload-item, html:root:root.studio-theme-dark body .result-frame, html:root:root.studio-theme-dark body .masonry-item, html:root:root.studio-theme-dark body .engine-panel, html:root:root.studio-theme-dark body .tool-panel, html:root:root.studio-theme-dark body .control-panel, html:root:root.studio-theme-dark body .engine-switch, html:root:root.studio-theme-dark body .mode-switcher, html:root:root.studio-theme-dark body .setting-row, html:root:root.studio-theme-dark body .ios-slider, html:root:root.studio-theme-dark body #compareContainer, html:root:root.studio-theme-dark body #lightboxImg, html:root:root.studio-theme-dark body #lightbox .bg-white, html:root:root.studio-theme-dark body .bg-white, html:root:root.studio-theme-dark body .bg-white\/90, html:root:root.studio-theme-dark body .bg-white\/95, html:root:root.studio-theme-dark body .bg-gray-50, html:root:root.studio-theme-dark body .bg-gray-50\/50, html:root:root.studio-theme-dark body .bg-gray-100, html:root:root.studio-theme-dark body .bg-gray-200, html:root:root.studio-theme-dark body .bg-\[\#221d18\], html:root:root.studio-theme-dark body .bg-\[\#221d18\], html:root:root body.studio-theme-dark .console-card, html:root:root body.studio-theme-dark .nano-input, html:root:root body.studio-theme-dark .upload-item, html:root:root body.studio-theme-dark .result-frame, html:root:root body.studio-theme-dark .masonry-item, html:root:root body.studio-theme-dark .engine-panel, html:root:root body.studio-theme-dark .tool-panel, html:root:root body.studio-theme-dark .control-panel, html:root:root body.studio-theme-dark .engine-switch, html:root:root body.studio-theme-dark .mode-switcher, html:root:root body.studio-theme-dark .setting-row, html:root:root body.studio-theme-dark .ios-slider, html:root:root body.studio-theme-dark #compareContainer, html:root:root body.studio-theme-dark #lightboxImg, html:root:root body.studio-theme-dark #lightbox .bg-white, html:root:root body.studio-theme-dark .bg-white, html:root:root body.studio-theme-dark .bg-white\/90, html:root:root body.studio-theme-dark .bg-white\/95, html:root:root body.studio-theme-dark .bg-gray-50, html:root:root body.studio-theme-dark .bg-gray-50\/50, html:root:root body.studio-theme-dark .bg-gray-100, html:root:root body.studio-theme-dark .bg-gray-200, html:root:root body.studio-theme-dark .bg-\[\#221d18\], html:root:root body.studio-theme-dark .bg-\[\#221d18\] {
    background-color: var(--pm-surface) !important;
    border-color: var(--pm-line) !important;
    color: var(--pm-ink) !important;
}

html:root:root.studio-theme-dark body .model-pill, html:root:root.studio-theme-dark body .ratio-grid, html:root:root.studio-theme-dark body .resolution-toggle, html:root:root.studio-theme-dark body .select-shell, html:root:root.studio-theme-dark body .mode-switch, html:root:root.studio-theme-dark body .mini-ratio, html:root:root.studio-theme-dark body input, html:root:root.studio-theme-dark body textarea, html:root:root.studio-theme-dark body select, html:root:root body.studio-theme-dark .model-pill, html:root:root body.studio-theme-dark .ratio-grid, html:root:root body.studio-theme-dark .resolution-toggle, html:root:root body.studio-theme-dark .select-shell, html:root:root body.studio-theme-dark .mode-switch, html:root:root body.studio-theme-dark .mini-ratio, html:root:root body.studio-theme-dark input, html:root:root body.studio-theme-dark textarea, html:root:root body.studio-theme-dark select {
    background-color: var(--pm-surface-2) !important;
    border-color: var(--pm-line) !important;
    color: var(--pm-ink) !important;
}

html:root:root.studio-theme-dark body .size-select, html:root:root.studio-theme-dark body .size-custom, html:root:root body.studio-theme-dark .size-select, html:root:root body.studio-theme-dark .size-custom {
    background-color: var(--pm-surface-2) !important;
    border-color: var(--pm-line) !important;
    color: var(--pm-ink) !important;
}

html:root:root.studio-theme-dark body .glass-btn, html:root:root.studio-theme-dark body .btn-render, html:root:root.studio-theme-dark body .mode-glider, html:root:root.studio-theme-dark body .engine-btn.active, html:root:root.studio-theme-dark body .model-option.active, html:root:root.studio-theme-dark body .ratio-option.active, html:root:root.studio-theme-dark body .resolution-option.active, html:root:root.studio-theme-dark body .provider-btn.active, html:root:root.studio-theme-dark body .ios-switch input:checked + .ios-slider, html:root:root.studio-theme-dark body #cloud-progress-bar, html:root:root.studio-theme-dark body #downloadBtn, html:root:root.studio-theme-dark body #lightboxDownload, html:root:root.studio-theme-dark body .bg-black, html:root:root body.studio-theme-dark .glass-btn, html:root:root body.studio-theme-dark .btn-render, html:root:root body.studio-theme-dark .mode-glider, html:root:root body.studio-theme-dark .engine-btn.active, html:root:root body.studio-theme-dark .model-option.active, html:root:root body.studio-theme-dark .ratio-option.active, html:root:root body.studio-theme-dark .resolution-option.active, html:root:root body.studio-theme-dark .provider-btn.active, html:root:root body.studio-theme-dark .ios-switch input:checked + .ios-slider, html:root:root body.studio-theme-dark #cloud-progress-bar, html:root:root body.studio-theme-dark #downloadBtn, html:root:root body.studio-theme-dark #lightboxDownload, html:root:root body.studio-theme-dark .bg-black {
    background: var(--pm-accent) !important;
    color: var(--pm-accent-contrast) !important;
    border-color: var(--pm-accent) !important;
}

html:root:root.studio-theme-dark body .mode-btn, html:root:root.studio-theme-dark body .engine-btn, html:root:root.studio-theme-dark body .model-option, html:root:root.studio-theme-dark body .ratio-option, html:root:root.studio-theme-dark body .resolution-option, html:root:root.studio-theme-dark body .provider-btn, html:root:root body.studio-theme-dark .mode-btn, html:root:root body.studio-theme-dark .engine-btn, html:root:root body.studio-theme-dark .model-option, html:root:root body.studio-theme-dark .ratio-option, html:root:root body.studio-theme-dark .resolution-option {
    color: var(--pm-ink-soft) !important;
}

html:root:root body.studio-theme-dark .provider-btn {
    color: var(--pm-ink-soft) !important;
}

html:root:root.studio-theme-dark body .provider-switch button, html:root:root body.studio-theme-dark .provider-switch button {
    color: var(--pm-ink-soft) !important;
}

html:root:root.studio-theme-dark body .mode-btn:hover, html:root:root.studio-theme-dark body .engine-btn:hover, html:root:root.studio-theme-dark body .model-option:hover, html:root:root.studio-theme-dark body .ratio-option:hover, html:root:root.studio-theme-dark body .resolution-option:hover, html:root:root.studio-theme-dark body .provider-btn:hover, html:root:root body.studio-theme-dark .mode-btn:hover, html:root:root body.studio-theme-dark .engine-btn:hover, html:root:root body.studio-theme-dark .model-option:hover, html:root:root body.studio-theme-dark .ratio-option:hover, html:root:root body.studio-theme-dark .resolution-option:hover, html:root:root body.studio-theme-dark .provider-btn:hover {
    background: var(--pm-accent-soft) !important;
    color: var(--pm-ink) !important;
}

html:root:root.studio-theme-dark body .provider-switch button:hover, html:root:root body.studio-theme-dark .provider-switch button:hover {
    background: var(--pm-accent-soft) !important;
    color: var(--pm-ink) !important;
}

html:root:root.studio-theme-dark body .mode-btn.active, html:root:root.studio-theme-dark body .engine-btn.active, html:root:root.studio-theme-dark body .model-option.active, html:root:root.studio-theme-dark body .ratio-option.active, html:root:root.studio-theme-dark body .resolution-option.active, html:root:root.studio-theme-dark body .provider-btn.active, html:root:root.studio-theme-dark body .mode-switcher .mode-btn.active, html:root:root.studio-theme-dark body .engine-switch .engine-btn.active, html:root:root body.studio-theme-dark .mode-btn.active, html:root:root body.studio-theme-dark .engine-btn.active, html:root:root body.studio-theme-dark .model-option.active, html:root:root body.studio-theme-dark .ratio-option.active, html:root:root body.studio-theme-dark .resolution-option.active, html:root:root body.studio-theme-dark .provider-btn.active, html:root:root body.studio-theme-dark .mode-switcher .mode-btn.active, html:root:root body.studio-theme-dark .engine-switch .engine-btn.active {
    color: var(--pm-accent-contrast) !important;
}

html:root:root.studio-theme-dark body .provider-switch button.active, html:root:root body.studio-theme-dark .provider-switch button.active {
    background: var(--pm-accent) !important;
    color: var(--pm-accent-contrast) !important;
    border-color: var(--pm-accent) !important;
}

html:root:root.studio-theme-dark body .mode-switcher, html:root:root body.studio-theme-dark .mode-switcher, html:root:root.studio-theme-dark body .provider-switch, html:root:root body.studio-theme-dark .provider-switch, html:root:root.studio-theme-dark body .engine-switch, html:root:root body.studio-theme-dark .engine-switch {
    background: var(--pm-surface-2) !important;
    border: 1px solid var(--pm-line) !important;
}

html:root:root.studio-theme-dark body .mode-glider, html:root:root body.studio-theme-dark .mode-glider {
    background: var(--pm-accent) !important;
}

html:root:root.studio-theme-dark body .text-gray-300, html:root:root.studio-theme-dark body .text-gray-400, html:root:root.studio-theme-dark body .text-gray-500, html:root:root.studio-theme-dark body .text-gray-600, html:root:root.studio-theme-dark body .text-gray-700, html:root:root.studio-theme-dark body .text-gray-800, html:root:root body.studio-theme-dark .text-gray-300, html:root:root body.studio-theme-dark .text-gray-400, html:root:root body.studio-theme-dark .text-gray-500, html:root:root body.studio-theme-dark .text-gray-600, html:root:root body.studio-theme-dark .text-gray-700, html:root:root body.studio-theme-dark .text-gray-800 {
    color: var(--pm-ink-soft) !important;
}

html:root:root.studio-theme-dark body ::placeholder, html:root:root body.studio-theme-dark ::placeholder {
    color: var(--pm-ink-faint) !important;
}

html:root:root.studio-theme-dark body #prompt, html:root:root body.studio-theme-dark #prompt {
    color: var(--pm-ink) !important;
}

html:root:root.studio-theme-dark body #prompt::placeholder, html:root:root body.studio-theme-dark #prompt::placeholder {
    color: var(--pm-ink-faint) !important;
}

html:root:root.studio-theme-dark body .chat-shell, html:root:root body.studio-theme-dark .chat-shell, html:root:root.studio-theme-dark body .messages, html:root:root body.studio-theme-dark .messages {
    background: var(--pm-bg) !important;
}

html:root:root.studio-theme-dark body .topbar, html:root:root body.studio-theme-dark .topbar {
    background: var(--pm-bg) !important;
    border-bottom-color: var(--pm-line) !important;
}

html:root:root.studio-theme-dark body .composer, html:root:root body.studio-theme-dark .composer, html:root:root.studio-theme-dark body .history-popover, html:root:root body.studio-theme-dark .history-popover {
    background: var(--pm-surface) !important;
    border-color: var(--pm-line) !important;
    color: var(--pm-ink) !important;
}

html:root:root.studio-theme-dark body .composer-body, html:root:root body.studio-theme-dark .composer-body {
    background: var(--pm-surface-2) !important;
    border-color: var(--pm-line) !important;
}

html:root:root.studio-theme-dark body #messageInput, html:root:root body.studio-theme-dark #messageInput {
    color: var(--pm-ink) !important;
}

html:root:root.studio-theme-dark body #messageInput::placeholder, html:root:root body.studio-theme-dark #messageInput::placeholder {
    color: var(--pm-ink-faint) !important;
}

html:root:root.studio-theme-dark body .title-block h1, html:root:root body.studio-theme-dark .title-block h1 {
    color: var(--pm-ink) !important;
}

html:root:root.studio-theme-dark body .title-block p, html:root:root body.studio-theme-dark .title-block p {
    color: var(--pm-ink-soft) !important;
}

html:root:root.studio-theme-dark body .action-btn, html:root:root body.studio-theme-dark .action-btn, html:root:root.studio-theme-dark body .thread-item, html:root:root body.studio-theme-dark .thread-item {
    background: var(--pm-surface-2) !important;
    border-color: var(--pm-line) !important;
    color: var(--pm-accent) !important;
}

html:root:root.studio-theme-dark body .action-btn:hover, html:root:root body.studio-theme-dark .action-btn:hover, html:root:root.studio-theme-dark body .thread-item:hover, html:root:root body.studio-theme-dark .thread-item:hover {
    background: var(--pm-surface-2) !important;
    color: var(--pm-ink) !important;
}

html:root:root.studio-theme-dark body .bubble.user, html:root:root body.studio-theme-dark .bubble.user {
    background: var(--pm-accent) !important;
    color: var(--pm-accent-contrast) !important;
}

html:root:root.studio-theme-dark body .bubble.assistant, html:root:root body.studio-theme-dark .bubble.assistant {
    background: var(--pm-surface) !important;
    color: var(--pm-ink) !important;
    border-color: var(--pm-line) !important;
}

html:root:root.studio-theme-dark body .bubble.assistant.streaming::after, html:root:root body.studio-theme-dark .bubble.assistant.streaming::after {
    background: var(--pm-accent) !important;
}

html:root:root.studio-theme-dark body .bubble img.generated, html:root:root body.studio-theme-dark .bubble img.generated {
    border-color: var(--pm-line) !important;
}

html:root:root.studio-theme-dark body .ios-switch .ios-slider, html:root:root body.studio-theme-dark .ios-switch .ios-slider {
    background: var(--pm-surface-2) !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px var(--pm-accent-soft) !important;
}

html:root:root.studio-theme-dark body .shell .comfy-random-btn.active, html:root:root body.studio-theme-dark .shell .comfy-random-btn.active {
    color: var(--pm-accent-contrast) !important;
}

/* ==== END AUTO-GENERATED ==== */
/* --------------------------------------------------------------------------
   3. 排版：去衬线 / 去全大写宽字距 / 降字重
   -------------------------------------------------------------------------- */

/* 标题：衬线 + 紧字距 → Inter + 正常字距 + 500 字重 */
body h1,
body h2,
body h3,
body h4,
body .gate-title,
body .picker-title,
body .create-card-title,
body .canvas-card-title{
    font-family: var(--pm-font) !important;
    font-weight: 500 !important;
    letter-spacing: -.005em !important;
}

/* 小标签：全大写 + 宽字距 → 正常case + 微字距（这一条是"海报感"最大的来源） */
body .label-nano,
body .setting-meta,
body .nav-label,
body .label,
body .api-key-label,
body .title-block h1,
body .title-block p{
    text-transform: none !important;
    letter-spacing: .005em !important;
    font-weight: 500 !important;
}

/* 导航文字：700 粗体 + 字距 → 500 + 无字距 */
body .nav-text,
body .side-pill-text {
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

/* --------------------------------------------------------------------------
   4. 通用几何：圆角与描边收口
   -------------------------------------------------------------------------- */

/* 描述性文本统一走无衬线，杜绝局部残留衬线 */
body .gate-sub,
body .setting-desc,
body .create-card-desc{
    font-family: var(--pm-font) !important;
}

/* 描边宽度：design.css 硬编码了 46 处 2px，这里把最显眼的几类压回 1px */
body #lightboxCard,
body .create-card,
body .canvas-card,
body .mini-ratio,
body .provider-switch,
body .mode-glider{
    border-width: 1px !important;
}

/* --------------------------------------------------------------------------
   5. 节点系统 · 公共部分（两套画布共用的视觉语言）
   -------------------------------------------------------------------------- */

/* 性能红线：节点绝不用毛玻璃（backdrop-filter 随节点数线性掉帧） */
body .node,
body .image-node,
body .node-head,
body .node-body,
body .smart-node-floating-menu,
body .floating-node-actions {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* 节点头部：次级表面 + 1px 细线，废除 2px 粗描边与衬线标题 */
body .node-head {
    background-color: var(--pm-surface-2) !important;
    border-bottom: 1px solid var(--pm-line) !important;
    color: var(--pm-ink) !important;
}

body .node-title {
    font-family: var(--pm-font) !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: .01em !important;
    color: var(--pm-ink) !important;
}

body .node-hint {
    color: var(--pm-ink-faint) !important;
    font-size: 10.5px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body .node-body {
    color: var(--pm-ink) !important;
}

/* 节点内字段标签 / 值 */
body .nd-k {
    color: var(--pm-ink-faint) !important;
    text-transform: none !important;
    letter-spacing: .02em !important;
}

/* 缩放手柄：方角墨点 → 圆角小方块 */
body .node-resize-handle {
    border-color: var(--pm-line-strong) !important;
    background-color: var(--pm-surface) !important;
    border-radius: 3px !important;
    box-shadow: var(--pm-sh-xs) !important;
}
body .node-resize-handle:hover {
    background-color: var(--pm-accent) !important;
    border-color: var(--pm-accent) !important;
}

/* 节点内图片 / 缩略图 */
body .node-img,
body .image-wrap > img,
body .thumb-item {
    border-radius: var(--pm-r-sm) !important;
}

/* 节点浮动操作条 / 工具条 */
body .floating-node-actions,
body .node-actions,
body .smart-node-floating-menu {
    background-color: var(--pm-surface) !important;
    border: 1px solid var(--pm-line) !important;
    border-radius: var(--pm-r-md) !important;
    box-shadow: var(--pm-sh-lg) !important;
    color: var(--pm-ink) !important;
}
body .node-actions button {
    border-radius: var(--pm-r-sm) !important;
    color: var(--pm-ink-soft) !important;
}
body .node-actions button:hover {
    background-color: var(--pm-surface-2) !important;
    color: var(--pm-ink) !important;
}

/* 运行状态徽章 */
body .node-run-status {
    border-radius: 999px !important;
    font-size: 10.5px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* 小地图 */
body .minimap-viewport {
    border-radius: var(--pm-r-sm) !important;
    border-color: var(--pm-accent) !important;
}
body .minimap-arrange-btn {
    border-radius: var(--pm-r) !important;
    border: 1px solid var(--pm-line) !important;
    background-color: var(--pm-surface) !important;
    color: var(--pm-ink-soft) !important;
    box-shadow: var(--pm-sh-sm) !important;
}

/* --------------------------------------------------------------------------
   6. 节点系统 · 无限画布（legacy：canvas.html，容器 #nodes）
   --------------------------------------------------------------------------
   #nodes 作为特异性锚点：design.css 用了 :not() 链（特异性 0,4,1），
   用 id 选择器（1,x,x）稳定压过它。
   -------------------------------------------------------------------------- */

/* 节点卡：10px 圆角 + 1px 细描边 + 柔和投影
   ★ 2026-09-15 第 14 批 Item 1：去掉「左侧 3px 类型色带 + 30px 色晕」两层 inset 渐变。
     用户要求节点卡片不再出现左侧彩色渐变，卡面恢复纯色。 */
#nodes .node {
    border: 1px solid var(--pm-line) !important;
    border-radius: var(--pm-r-md) !important;
    background-color: var(--pm-surface) !important;
    color: var(--pm-ink) !important;
    box-shadow: var(--pm-sh-sm) !important;
}
/* .node 的 ::before 才是真正的卡面（z-index:-1，盖在 .node 背景之上） */
#nodes .node::before {
    border-radius: var(--pm-r-md) !important;
    background-color: var(--pm-surface) !important;
}

#nodes .node:hover {
    border-color: var(--pm-line-strong) !important;
}

/* 选中：1px 主色描边 + 6px 柔光圈，不动背景 */
#nodes .node.selected {
    border-color: var(--pm-accent) !important;
    box-shadow:
        0 0 0 1px var(--pm-accent),
        0 0 0 6px var(--pm-accent-soft),
        var(--pm-sh) !important;
}

/* 节点头部对齐 10px 圆角 */
#nodes .node .node-head {
    height: 34px !important;
    flex: 0 0 34px !important;
    border-radius: calc(var(--pm-r-md) - 1px) calc(var(--pm-r-md) - 1px) 0 0 !important;
    padding: 0 10px !important;
}
#nodes .node .node-body {
    padding: 11px !important;
}

/* —— 类型色带：节点类型直接就是类名（canvas.js: `node ${type}-node`） —— */
#nodes .prompt-node        { --pm-node-c: var(--pm-n-prompt); }
#nodes .promptGroup-node   { --pm-node-c: var(--pm-n-promptgroup); }
#nodes .image-node         { --pm-node-c: var(--pm-n-image); }
#nodes .video-node         { --pm-node-c: var(--pm-n-video); }
#nodes .generator-node     { --pm-node-c: var(--pm-n-generator); }
#nodes .output-node        { --pm-node-c: var(--pm-n-output); }
#nodes .llm-node           { --pm-node-c: var(--pm-n-llm); }
#nodes .comfy-node         { --pm-node-c: var(--pm-n-comfy); }
#nodes .ltxDirector-node   { --pm-node-c: var(--pm-n-ltx); }
#nodes .rh-node            { --pm-node-c: var(--pm-n-rh); }
#nodes .minimax-node       { --pm-node-c: var(--pm-n-minimax); }
#nodes .midjourney-node    { --pm-node-c: var(--pm-n-mj); }
#nodes .msgen-node         { --pm-node-c: var(--pm-n-msgen); }
#nodes .loop-node          { --pm-node-c: var(--pm-n-loop); }
#nodes .group-node         { --pm-node-c: var(--pm-n-group); }

/* 端口：44px 命中区保留，可见圆点改为 9px 空心圆环 */
#nodes .port {
    width: 40px !important;
    height: 40px !important;
}
#nodes .port::after {
    left: calc(50% - 5px) !important;
    top: calc(50% - 5px) !important;
    width: 10px !important;
    height: 10px !important;
    border: 1.5px solid var(--pm-node-c, var(--pm-accent)) !important;
    background-color: var(--pm-surface) !important;
    box-shadow: none !important;
    transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease !important;
}
#nodes .port:hover::after {
    transform: scale(1.18) !important;
    background-color: var(--pm-node-c, var(--pm-accent)) !important;
    box-shadow: 0 0 0 4px var(--pm-accent-soft) !important;
}
/* 圆点中心压在节点左右边缘上 */
#nodes .port.in  { left: -20px !important; }
#nodes .port.out { right: -20px !important; }

/* --------------------------------------------------------------------------
   7. 节点系统 · 智能画布（smart-canvas.html，容器 #world）
   -------------------------------------------------------------------------- */

#world .image-node {
    border: 1px solid var(--pm-line) !important;
    border-radius: var(--pm-r-md) !important;
    background-color: var(--pm-surface) !important;
    color: var(--pm-ink) !important;
    /* ★ 第 14 批 Item 1：同样去掉左侧类型色带 / 色晕两层 inset 渐变，卡面保持纯色。 */
    box-shadow: var(--pm-sh-sm) !important;
}
#world .image-node:hover {
    border-color: var(--pm-line-strong) !important;
}
#world .image-node.selected,
#world .image-node.drop-target {
    border-color: var(--pm-accent) !important;
    box-shadow:
        0 0 0 1px var(--pm-accent),
        0 0 0 6px var(--pm-accent-soft),
        var(--pm-sh) !important;
}
#world .image-node.dragging {
    box-shadow:
        0 0 0 1px var(--pm-accent),
        0 0 0 6px var(--pm-accent-soft),
        var(--pm-sh-lg) !important;
}

/* 空节点 / 上传节点：虚线占位框 → 现代细虚线 */
#world .image-node.empty-node {
    border: 1px dashed var(--pm-line-strong) !important;
    border-radius: var(--pm-r-md) !important;
    background-color: var(--pm-surface-2) !important;
    color: var(--pm-ink-soft) !important;
    box-shadow: none !important;
}
#world .image-node.empty-node:hover,
#world .image-node.empty-node.selected {
    border-color: var(--pm-accent) !important;
    color: var(--pm-ink) !important;
}

/* 分组框：大范围虚线框，保持"容器"语义 */
#world .image-node.group-node,
#world .image-node.history-group-node,
#world .image-node.smart-group-node {
    border: 1px dashed var(--pm-line-strong) !important;
    border-radius: var(--pm-r-lg) !important;
    box-shadow: none !important;
}
#world .image-node.group-node.selected,
#world .image-node.smart-group-node.selected {
    border-color: var(--pm-accent) !important;
    border-style: solid !important;
}

/* 节点头部（仅空节点会显示）：对齐 10px 圆角 */
#world .node-head {
    height: 32px !important;
    border-radius: calc(var(--pm-r-md) - 1px) calc(var(--pm-r-md) - 1px) 0 0 !important;
    padding: 0 10px !important;
}

/* —— 类型色带（smart-canvas.js 里的修饰类） —— */
#world .prompt-smart-node   { --pm-node-c: var(--pm-n-prompt); }
#world .loop-smart-node     { --pm-node-c: var(--pm-n-loop); }
#world .minimax-smart-node  { --pm-node-c: var(--pm-n-minimax); }
#world .smart-group-node    { --pm-node-c: var(--pm-n-group); }
#world .group-node          { --pm-node-c: var(--pm-n-group); }
#world .image-node:not(.prompt-smart-node):not(.loop-smart-node):not(.minimax-smart-node):not(.group-node):not(.smart-group-node) {
    --pm-node-c: var(--pm-n-image);
}

/* 端口：opacity 0 → 悬停/选中才出现（保留原交互），外观换 9px 空心圆环 */
#world .node-port {
    width: 10px !important;
    height: 10px !important;
    border: 1.5px solid var(--pm-line-strong) !important;
    background-color: var(--pm-surface) !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    opacity: 0 !important;
    transition: opacity .15s ease, background-color .15s ease, transform .15s ease, box-shadow .15s ease !important;
}
#world .image-node:hover .node-port,
#world .image-node.selected .node-port,
#world .image-node.port-hover .node-port {
    opacity: 1 !important;
}
#world .node-port:hover,
#world .node-port.is-active {
    background-color: var(--pm-accent) !important;
    border-color: var(--pm-accent) !important;
    transform: translateY(-50%) scale(1.2) !important;
    box-shadow: 0 0 0 4px var(--pm-accent-soft) !important;
}

/* --------------------------------------------------------------------------
   8. 连线
   -------------------------------------------------------------------------- */

/* legacy：canvas.js 的 pathEl() 生成的 path.link（其余 link temp / link-hit 不动） */
body path.link {
    stroke: var(--pm-wire) !important;
    stroke-width: 2 !important;
    fill: none !important;
}
body path.link.temp {
    stroke: var(--pm-wire-active) !important;
    stroke-dasharray: 5 5 !important;
}

/* smart：conn-line 的 stroke / stroke-width 是 SVG 呈现属性，CSS 可覆盖 */
body .conn-line {
    stroke: var(--pm-wire) !important;
    stroke-width: 2 !important;
    fill: none !important;
}
body .conn-line.conn-selected {
    stroke: var(--pm-wire-active) !important;
    stroke-width: 2.4 !important;
}
body .conn-line.conn-pending {
    stroke: var(--pm-wire) !important;
    stroke-dasharray: 5 5 !important;
}
body .conn-line.conn-history {
    stroke: var(--pm-line-strong) !important;
}
body .conn-line.conn-cascade {
    stroke: var(--pm-info) !important;
}
body .conn-line.conn-cascade-done {
    stroke: var(--pm-ok) !important;
}
body .conn-line.conn-cascade-wait,
body .conn-line.conn-cascade-active {
    stroke: var(--pm-warn) !important;
    stroke-dasharray: 6 4 !important;
}
body circle.conn-end {
    fill: var(--pm-wire) !important;
}
body path.port-drag-temp {
    stroke: var(--pm-wire-active) !important;
    stroke-width: 2 !important;
}

/* --------------------------------------------------------------------------
   9. 画布底：极淡点阵（对标 React Flow / ComfyUI Nodes 2.0）
   --------------------------------------------------------------------------
   设计令牌映射已经换掉了点阵的颜色（design.css 用 --dv-* 着色），
   这里只把点阵尺寸统一到 20px。
   ★ 2026-09-14：只给 #nodes 设尺寸；#world 已无点阵（那是会随 zoom 缩放的一层，
   用户要求只保留 #board 上不随缩放变化的那层）。
   -------------------------------------------------------------------------- */
body #nodes {
    background-size: 20px 20px !important;
    background-position: 0 0 !important;
}

/* --------------------------------------------------------------------------
   10. 画布外壳控件 / 弹层
   -------------------------------------------------------------------------- */
body .node-port-menu-grid,
body .smart-node-input-thumbs,
body .prompt-node-upstream {
    border-radius: var(--pm-r-sm) !important;
}
body .node-port-menu-grid {
    border: 1px solid var(--pm-line) !important;
    background-color: var(--pm-surface) !important;
    box-shadow: var(--pm-sh-lg) !important;
}

/* --------------------------------------------------------------------------
   11. 滚动条 / 焦点环
   -------------------------------------------------------------------------- */
body ::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
}
body ::-webkit-scrollbar-thumb {
    background-color: var(--pm-line-strong) !important;
    border-radius: 999px !important;
    border: 3px solid transparent !important;
    background-clip: padding-box !important;
}
body ::-webkit-scrollbar-thumb:hover {
    background-color: var(--pm-ink-faint) !important;
}
body ::-webkit-scrollbar-track {
    background-color: transparent !important;
}
body :focus-visible {
    outline: 2px solid var(--pm-accent) !important;
    outline-offset: 2px !important;
}

/* --------------------------------------------------------------------------
   12. AI 侧栏（agent-dock）：从「复古海报」并入同一套语言
   --------------------------------------------------------------------------
   令牌已在上文重定向（--ad-* → --pm-*），这里只处理令牌管不到的部分：
     a. 复古几何：2px 粗描边、2px 2px 0 硬投影、hover 位移
     b. "一名两用"令牌的文字用法（强调色上的 --ad-paper、用户气泡的 --ad-stroke）
     c. agent-dock.css 里的硬编码色（#3d2c14 / #000 / #d40014）
     d. 衬线标题与全大写标签
   -------------------------------------------------------------------------- */

/* 12.1 侧栏本体：2px 硬边 + 硬投影 → 1px 细线 + 左侧柔和投影 */
body #adDock {
    background: var(--pm-surface) !important;
    border-left: 1px solid var(--pm-line) !important;
    box-shadow: -10px 0 30px rgba(16, 24, 40, .10) !important;
    color: var(--pm-ink) !important;
    font-family: var(--pm-font) !important;
}
body.studio-theme-dark #adDock,
body.theme-dark #adDock,
html.studio-theme-dark #adDock,
html.theme-dark #adDock {
    box-shadow: -10px 0 34px rgba(0, 0, 0, .58) !important;
}
body #adDock.ad-collapsed {
    box-shadow: -6px 0 18px rgba(16, 24, 40, .08) !important;
}

/* 12.2 复古"粗线"是海报感的主要来源：整栏描边统一收成 1px
   （只改宽度，不碰颜色 / 样式；未设 border-style 的元素天然不受影响） */
body #adDock,
body #adDock * {
    border-width: 1px !important;
}

/* 12.3 排版：去衬线 / 去全大写 / 降字重 */
body #adDock .ad-head-title,
body #adDock .ad-rail-label,
body .logo-ring.logo-square .logo-text {
    font-family: var(--pm-font) !important;
    font-weight: 600 !important;
    letter-spacing: -.005em !important;
}
body #adDock .ad-head-title { font-size: 14px !important; }
body #adDock button,
body #adDock select {
    font-weight: 500 !important;
}
body #adDock .ad-tag {
    text-transform: none !important;
    letter-spacing: .02em !important;
    font-weight: 600 !important;
    color: var(--pm-ink-soft) !important;
}

/* 12.4 拖宽把手：26px 方块 → 左侧细长提手 */
body #adDock .ad-resize-grip {
    top: 14px !important;
    left: -7px !important;
    width: 12px !important;
    height: 34px !important;
    border-width: 0 !important;
    border-radius: 6px !important;
    background: var(--pm-line-strong) !important;
    color: transparent !important;
    font-size: 0 !important;
    box-shadow: none !important;
    transition: background-color .15s ease !important;
}
body #adDock .ad-resize-grip:hover,
body #adDock.ad-dragging .ad-resize-grip {
    background: var(--pm-accent) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* 12.5 头部左内缩：让开新的窄提手 */
body #adDock .ad-head { padding: 10px 12px 10px 18px !important; }

/* 12.6 交互控件：统一"扁平 + 细线 + 柔和 hover"，废除位移式按压 */
body #adDock .ad-collapse,
body #adDock .ad-cv-btn,
body #adDock .ad-btn,
body #adDock .ad-picker-tabs button,
body #adDock .ad-skill-toggle,
body #adDock .ad-skill-del,
body #adDock .ad-canvas-toggle,
body #adDock .ad-undo-round,
body #adDock .ad-models select,
body #adDock .ad-skill-name,
body #adDock .ad-input,
body #adDock .ad-skill-text {
    border-radius: var(--pm-r-sm) !important;
    background: var(--pm-surface) !important;
    border-color: var(--pm-line) !important;
    color: var(--pm-ink) !important;
    box-shadow: none !important;
    transition: background-color .15s ease, border-color .15s ease,
                color .15s ease, box-shadow .15s ease !important;
}
body #adDock .ad-input,
body #adDock .ad-skill-text { border-radius: var(--pm-r) !important; }

body #adDock .ad-collapse:hover,
body #adDock .ad-cv-btn:hover,
body #adDock .ad-btn:hover,
body #adDock .ad-picker-tabs button:hover,
body #adDock .ad-skill-toggle:hover,
body #adDock .ad-canvas-toggle:hover {
    transform: none !important;
    background: var(--pm-surface-2) !important;
    border-color: var(--pm-line-strong) !important;
}
body #adDock .ad-collapse:active,
body #adDock .ad-cv-btn:active,
body #adDock .ad-btn:active {
    transform: none !important;
    background: var(--pm-surface-3) !important;
}
body #adDock .ad-undo-round {
    border-style: solid !important;
    border-color: var(--pm-line-strong) !important;
    color: var(--pm-ink-soft) !important;
}

/* 12.7 焦点：3px 外发光环，替代 2px outline */
body #adDock .ad-input:focus,
body #adDock .ad-skill-text:focus,
body #adDock .ad-models select:focus,
body #adDock .ad-skill-name:focus {
    outline: none !important;
    border-color: var(--pm-accent) !important;
    box-shadow: 0 0 0 3px var(--pm-accent-soft) !important;
}

/* 12.8 强调填充件：主色实心 + 高对比文字（替代"米黄纸上的暗红块"） */
body #adDock .ad-btn.ad-send,
body #adDock .ad-canvas-toggle:has(input:checked),
body #adDock .ad-undo-round:hover,
body #adDock .ad-picker-tabs button.ad-on,
body #adDock .ad-skill-card.ad-on .ad-skill-toggle {
    background: var(--pm-accent) !important;
    border-color: var(--pm-accent) !important;
    color: var(--pm-accent-contrast) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
body #adDock .ad-btn.ad-send:hover,
body #adDock .ad-canvas-toggle:has(input:checked):hover,
body #adDock .ad-picker-tabs button.ad-on:hover,
body #adDock .ad-skill-card.ad-on .ad-skill-toggle:hover {
    background: var(--pm-accent-hover) !important;
    border-color: var(--pm-accent-hover) !important;
}

/* 12.9 消息气泡：硬投影 → 无 / 柔光；用户气泡 = 主色实心 */
body #adDock .ad-msg {
    border-radius: var(--pm-r-md) !important;
    background: var(--pm-surface-2) !important;
    border-color: var(--pm-line) !important;
    padding: 9px 12px !important;
    box-shadow: none !important;
    transition: background-color .15s ease, border-color .15s ease !important;
}
body #adDock .ad-msg.ad-assistant {
    background: var(--pm-surface) !important;
    box-shadow: var(--pm-sh-xs) !important;
}
body #adDock .ad-msg.ad-user,
html.studio-theme-dark #adDock .ad-msg.ad-user,
body.studio-theme-dark #adDock .ad-msg.ad-user {
    background: var(--pm-accent) !important;
    border-color: var(--pm-accent) !important;
    color: var(--pm-accent-contrast) !important;
}
body #adDock .ad-msg.ad-error {
    border-color: var(--pm-danger) !important;
    color: var(--pm-danger) !important;
    background: var(--pm-surface) !important;
}

/* 12.10 引用芯片 / 资产卡 / 技能卡 */
body #adDock .ad-chip,
body #adDock .ad-picker-grid button {
    border-radius: var(--pm-r) !important;
    background: var(--pm-surface-2) !important;
    border-color: var(--pm-line) !important;
    box-shadow: none !important;
}
body #adDock .ad-skill-card {
    border-radius: var(--pm-r-md) !important;
    background: var(--pm-surface) !important;
    border-color: var(--pm-line) !important;
    box-shadow: var(--pm-sh-xs) !important;
}
body #adDock .ad-skill-card.ad-on { border-color: var(--pm-accent) !important; }
body #adDock .ad-chip img,
body #adDock .ad-chip video { background: var(--pm-surface-3) !important; }
body #adDock .ad-chip-icon { background: var(--pm-surface-2) !important; }
body #adDock .ad-chip i { color: var(--pm-ink-faint) !important; }
body #adDock .ad-chip i:hover { color: var(--pm-danger) !important; }
body #adDock .ad-skill-del {
    border-color: var(--pm-line) !important;
    color: var(--pm-ink-soft) !important;
}
body #adDock .ad-skill-del:hover {
    border-color: var(--pm-danger) !important;
    color: var(--pm-danger) !important;
}

/* 12.11 弹层 / 灯箱 */
body #adDock .ad-picker,
body #adDock .ad-skills { background: var(--pm-surface) !important; }
body #adDock .ad-lightbox { background: rgba(8, 10, 14, .78) !important; }
body #adDock .ad-lightbox img {
    border-color: var(--pm-line) !important;
    box-shadow: var(--pm-sh-lg) !important;
}

/* 12.12 顶栏品牌标：黑底 + 暗红描边 + 衬线字 → 主色实心圆角标 */
/* ★ 2026-09-17 品牌调整：logo 胶囊改为「浅色模式=白底黑字 / 深色模式=黑底白字」。
   ⚠️ 「月」字图标是 <img>，不受文字色影响，颜色保持不变。 */
body .logo-ring.logo-square {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, .12) !important;
    border-width: 1px !important;
    box-shadow: none !important;
}
body .logo-ring.logo-square .logo-text { color: #111111 !important; }

/* 深色模式：黑底白字 */
body.studio-theme-dark .logo-ring.logo-square,
html.studio-theme-dark body .logo-ring.logo-square,
body.theme-dark .logo-ring.logo-square,
html.theme-dark body .logo-ring.logo-square {
    background: #000000 !important;
    border-color: rgba(255, 255, 255, .18) !important;
}
body.studio-theme-dark .logo-ring.logo-square .logo-text,
html.studio-theme-dark body .logo-ring.logo-square .logo-text,
body.theme-dark .logo-ring.logo-square .logo-text,
html.theme-dark body .logo-ring.logo-square .logo-text { color: #ffffff !important; }

/* ============================================================
   第 6 批（⑨）：深色模式下「最底层页面背景」统一为纯黑 #000
   —— 只覆盖底板（html / body / 外壳 .app-shell），
      卡片 / 面板 / 顶栏 / .stage 圆角工作区仍用原有微蓝层级色。
   ★ 用 html:root:root 提高优先级：本文件里已有
     `html:root:root.studio-theme-dark body .app-shell {...}` 这类高优先规则，
     普通选择器压不住。
   ============================================================ */
html:root:root.studio-theme-dark, html:root:root.theme-dark,
html:root:root body.studio-theme-dark, html:root:root body.theme-dark {
    background-color: #000 !important;
}
html:root:root.studio-theme-dark body .app-shell,
html:root:root.theme-dark body .app-shell,
html:root:root body.studio-theme-dark .app-shell,
html:root:root body.theme-dark .app-shell {
    background: #000 !important;
}