html.studio-theme-dark,
html.studio-theme-dark body,
body.studio-theme-dark {
    color-scheme: dark;
    background: #0e0e10 !important;
    color: #f2efe8 !important;
}

html,
body {
    overscroll-behavior: auto;
}

* {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(186, 177, 158, .66) transparent !important;
}

*::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
    background: transparent !important;
}

*::-webkit-scrollbar-track {
    background: transparent !important;
}

*::-webkit-scrollbar-thumb {
    min-height: 36px;
    background-color: rgba(186, 177, 158, .66) !important;
    border: 3px solid transparent !important;
    border-right-width: 3px !important;
    background-clip: padding-box !important;
    border-radius: 999px !important;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: rgba(150, 142, 124, .86) !important;
}

*::-webkit-scrollbar-corner {
    background: transparent !important;
}

body.studio-theme-dark {
    --accent: #d4b57a;
    --bg: #0e0e10;
    --bg-base: #0e0e10;
    --card: #1a1a1e;
    --text-main: #f2efe8;
}

html.studio-theme-dark body .app-shell,
html.studio-theme-dark body .sidebar,
html.studio-theme-dark body .stage,
body.studio-theme-dark .app-shell,
body.studio-theme-dark .sidebar,
body.studio-theme-dark .stage {
    background: #0e0e10 !important;
    border-color: #2c2c33 !important;
}

html.studio-theme-dark body .stage,
body.studio-theme-dark .stage {
    box-shadow: inset 0 0 42px rgba(255,255,255,.015);
}

html.studio-theme-dark body .nav-item,
body.studio-theme-dark .nav-item {
    color: #8f897b;
}

html.studio-theme-dark body .nav-item:hover,
body.studio-theme-dark .nav-item:hover {
    background: #1a1a1e !important;
    color: #f2efe8 !important;
}

html.studio-theme-dark body .nav-item.active,
body.studio-theme-dark .nav-item.active {
    background: #d4b57a !important;
    color: #0b0b0d !important;
    box-shadow: 0 12px 24px rgba(0,0,0,.28);
}

html.studio-theme-dark body .logo-ring,
body.studio-theme-dark .logo-ring {
    border-color: #d4b57a !important;
}

html.studio-theme-dark body #logo-dot,
body.studio-theme-dark #logo-dot {
    background: #d4b57a !important;
}

html.studio-theme-dark body .nano-monitor,
body.studio-theme-dark .nano-monitor {
    background: rgba(17,18,22,.88) !important;
    color: #d4b57a;
    border-color: rgba(255,255,255,.10) !important;
    box-shadow: 0 12px 34px rgba(0,0,0,.24);
}

html.studio-theme-dark body .divider,
body.studio-theme-dark .divider {
    background: rgba(220,214,200,.14) !important;
}

html.studio-theme-dark body .theme-dock-btn,
body.studio-theme-dark .theme-dock-btn {
    background: #1a1a1e;
    border-color: #2c2c33;
    color: #9a9484;
}

html.studio-theme-dark body .theme-dock-btn:hover,
html.studio-theme-dark body .theme-dock-btn.active,
body.studio-theme-dark .theme-dock-btn:hover,
body.studio-theme-dark .theme-dock-btn.active {
    background: #d4b57a;
    border-color: #d4b57a;
    color: #0b0b0d;
}

html.studio-theme-dark body .console-card,
html.studio-theme-dark body .nano-input,
html.studio-theme-dark body .upload-item,
html.studio-theme-dark body .result-frame,
html.studio-theme-dark body .masonry-item,
html.studio-theme-dark body .work-panel,
html.studio-theme-dark body .setting-row,
html.studio-theme-dark body .tool-panel,
html.studio-theme-dark body .control-panel,
html.studio-theme-dark body .topbar,
html.studio-theme-dark body .composer,
html.studio-theme-dark body .composer-body,
html.studio-theme-dark body .bubble.assistant,
html.studio-theme-dark body .history-popover,
html.studio-theme-dark body .thread-item,
html.studio-theme-dark body .lightbox-card,
html.studio-theme-dark body #lightboxCard,
html.studio-theme-dark body .bg-white,
html.studio-theme-dark body .bg-gray-50,
html.studio-theme-dark body .bg-slate-50,
html.studio-theme-dark body .bg-gray-50\/50,
html.studio-theme-dark body .bg-white\/90,
html.studio-theme-dark body .bg-\[\#fbfaf7\],
body.studio-theme-dark .console-card,
body.studio-theme-dark .nano-input,
body.studio-theme-dark .upload-item,
body.studio-theme-dark .result-frame,
body.studio-theme-dark .masonry-item,
body.studio-theme-dark .work-panel,
body.studio-theme-dark .setting-row,
body.studio-theme-dark .tool-panel,
body.studio-theme-dark .control-panel,
body.studio-theme-dark .topbar,
body.studio-theme-dark .composer,
body.studio-theme-dark .composer-body,
body.studio-theme-dark .bubble.assistant,
body.studio-theme-dark .history-popover,
body.studio-theme-dark .thread-item,
body.studio-theme-dark .lightbox-card,
body.studio-theme-dark #lightboxCard,
body.studio-theme-dark .bg-white,
body.studio-theme-dark .bg-gray-50,
body.studio-theme-dark .bg-slate-50,
body.studio-theme-dark .bg-gray-50\/50,
body.studio-theme-dark .bg-white\/90,
body.studio-theme-dark .bg-\[\#fbfaf7\] {
    background-color: #1a1a1e !important;
    border-color: #2c2c33 !important;
    color: #f2efe8 !important;
}

html.studio-theme-dark body .bg-gray-100,
html.studio-theme-dark body .bg-slate-100,
html.studio-theme-dark body .select-shell,
html.studio-theme-dark body .model-pill,
html.studio-theme-dark body .ratio-grid,
html.studio-theme-dark body .resolution-toggle,
html.studio-theme-dark body .mode-switch,
html.studio-theme-dark body .mini-ratio,
body.studio-theme-dark .bg-gray-100,
body.studio-theme-dark .bg-slate-100,
body.studio-theme-dark .select-shell,
body.studio-theme-dark .model-pill,
body.studio-theme-dark .ratio-grid,
body.studio-theme-dark .resolution-toggle,
body.studio-theme-dark .mode-switch,
body.studio-theme-dark .mini-ratio {
    background-color: #0a0a0c !important;
    border-color: #2c2c33 !important;
}

html.studio-theme-dark body input,
html.studio-theme-dark body textarea,
html.studio-theme-dark body select,
body.studio-theme-dark input,
body.studio-theme-dark textarea,
body.studio-theme-dark select {
    color: #f2efe8 !important;
}

html.studio-theme-dark body input::placeholder,
html.studio-theme-dark body textarea::placeholder,
body.studio-theme-dark input::placeholder,
body.studio-theme-dark textarea::placeholder {
    color: #6e6a5f !important;
}

html.studio-theme-dark body .text-black,
html.studio-theme-dark body .text-gray-700,
html.studio-theme-dark body .text-slate-700,
html.studio-theme-dark body .setting-title,
html.studio-theme-dark body h1,
html.studio-theme-dark body h2,
html.studio-theme-dark body h3,
body.studio-theme-dark .text-black,
body.studio-theme-dark .text-gray-700,
body.studio-theme-dark .text-slate-700,
body.studio-theme-dark .setting-title,
body.studio-theme-dark h1,
body.studio-theme-dark h2,
body.studio-theme-dark h3 {
    color: #f2efe8 !important;
}

html.studio-theme-dark body .text-gray-300,
html.studio-theme-dark body .text-gray-400,
html.studio-theme-dark body .text-gray-500,
html.studio-theme-dark body .text-slate-400,
html.studio-theme-dark body .text-slate-500,
html.studio-theme-dark body .setting-meta,
html.studio-theme-dark body .label-nano,
body.studio-theme-dark .text-gray-300,
body.studio-theme-dark .text-gray-400,
body.studio-theme-dark .text-gray-500,
body.studio-theme-dark .text-slate-400,
body.studio-theme-dark .text-slate-500,
body.studio-theme-dark .setting-meta,
body.studio-theme-dark .label-nano {
    color: #8f897b !important;
}

html.studio-theme-dark body .border-gray-100,
html.studio-theme-dark body .border-gray-200,
html.studio-theme-dark body .border-gray-300,
html.studio-theme-dark body .border-slate-100,
html.studio-theme-dark body .border-slate-200,
html.studio-theme-dark body .border-black,
html.studio-theme-dark body .border-white,
html.studio-theme-dark body .border-\[\#f0efeb\],
html.studio-theme-dark body .border-\[\#eceae3\],
body.studio-theme-dark .border-gray-100,
body.studio-theme-dark .border-gray-200,
body.studio-theme-dark .border-gray-300,
body.studio-theme-dark .border-slate-100,
body.studio-theme-dark .border-slate-200,
body.studio-theme-dark .border-black,
body.studio-theme-dark .border-white,
body.studio-theme-dark .border-\[\#f0efeb\],
body.studio-theme-dark .border-\[\#eceae3\] {
    border-color: #2e2e36 !important;
}

html.studio-theme-dark body .glass-btn,
html.studio-theme-dark body .btn-action-dark,
html.studio-theme-dark body .send-btn,
html.studio-theme-dark body .gen-btn,
html.studio-theme-dark body .comfy-run,
html.studio-theme-dark body .llm-run,
html.studio-theme-dark body .primary-btn,
html.studio-theme-dark body .bg-black,
body.studio-theme-dark .glass-btn,
body.studio-theme-dark .btn-action-dark,
body.studio-theme-dark .send-btn,
body.studio-theme-dark .gen-btn,
body.studio-theme-dark .comfy-run,
body.studio-theme-dark .llm-run,
body.studio-theme-dark .primary-btn,
body.studio-theme-dark .bg-black {
    background-color: #d4b57a !important;
    color: #0b0b0d !important;
}

html.studio-theme-dark body .glass-btn:hover,
html.studio-theme-dark body .btn-action-dark:hover,
html.studio-theme-dark body .bg-black:hover,
body.studio-theme-dark .glass-btn:hover,
body.studio-theme-dark .btn-action-dark:hover,
body.studio-theme-dark .bg-black:hover {
    background-color: #c9c2b2 !important;
}

html.studio-theme-dark body .gallery-lightbox,
html.studio-theme-dark body #lightbox,
body.studio-theme-dark .gallery-lightbox,
body.studio-theme-dark #lightbox {
    background: rgba(10,10,12,.78) !important;
    backdrop-filter: blur(22px) saturate(1.05);
}

html.studio-theme-dark body .masonry-item:hover,
html.studio-theme-dark body .console-card:focus-within,
html.studio-theme-dark body .select-shell:focus-within,
body.studio-theme-dark .masonry-item:hover,
body.studio-theme-dark .console-card:focus-within,
body.studio-theme-dark .select-shell:focus-within {
    border-color: #5c584e !important;
    box-shadow: 0 20px 44px rgba(0,0,0,.28) !important;
}

html.studio-theme-dark body .console-card textarea,
html.studio-theme-dark body #prompt,
html.studio-theme-dark body #promptInput,
body.studio-theme-dark .console-card textarea,
body.studio-theme-dark #prompt,
body.studio-theme-dark #promptInput {
    color: #e9e5da !important;
    caret-color: #d4b57a;
}

html.studio-theme-dark body .size-btn,
html.studio-theme-dark body .model-option,
html.studio-theme-dark body .ratio-option,
html.studio-theme-dark body .resolution-option,
html.studio-theme-dark body .mini-ratio button,
html.studio-theme-dark body .mode-switch button,
body.studio-theme-dark .size-btn,
body.studio-theme-dark .model-option,
body.studio-theme-dark .ratio-option,
body.studio-theme-dark .resolution-option,
body.studio-theme-dark .mini-ratio button,
body.studio-theme-dark .mode-switch button {
    background: #141419 !important;
    border-color: #2e2e36 !important;
    color: #9a9484 !important;
}

html.studio-theme-dark body .size-btn:hover,
html.studio-theme-dark body .model-option:hover,
html.studio-theme-dark body .ratio-option:hover,
html.studio-theme-dark body .resolution-option:hover,
body.studio-theme-dark .size-btn:hover,
body.studio-theme-dark .model-option:hover,
body.studio-theme-dark .ratio-option:hover,
body.studio-theme-dark .resolution-option:hover {
    border-color: #5c584e !important;
    color: #d4b57a !important;
}

html.studio-theme-dark body .size-btn.active,
html.studio-theme-dark body .model-option.active,
html.studio-theme-dark body .ratio-option.active,
html.studio-theme-dark body .resolution-option.active,
html.studio-theme-dark body .mini-ratio button.active,
html.studio-theme-dark body .mode-switch button.active,
body.studio-theme-dark .size-btn.active,
body.studio-theme-dark .model-option.active,
body.studio-theme-dark .ratio-option.active,
body.studio-theme-dark .resolution-option.active,
body.studio-theme-dark .mini-ratio button.active,
body.studio-theme-dark .mode-switch button.active {
    background: #d4b57a !important;
    border-color: #d4b57a !important;
    color: #0b0b0d !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.2) !important;
}

html.studio-theme-dark body .ios-slider,
body.studio-theme-dark .ios-slider {
    background: #2e2e36 !important;
}

html.studio-theme-dark body .ios-switch input:checked + .ios-slider,
body.studio-theme-dark .ios-switch input:checked + .ios-slider {
    background: #d4b57a !important;
}

html.studio-theme-dark body .ios-slider:before,
body.studio-theme-dark .ios-slider:before {
    background: #141419 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.38) !important;
}

html.studio-theme-dark body .composer-wrap,
body.studio-theme-dark .composer-wrap {
    background: linear-gradient(to top,#101013 82%,rgba(10,10,12,0)) !important;
}

html.studio-theme-dark body .canvas-gate,
body.studio-theme-dark .canvas-gate {
    background-color: #101013 !important;
    background-image: radial-gradient(rgba(212,181,122,.11) 1px, transparent 1px) !important;
}

html.studio-theme-dark body .gate-panel,
html.studio-theme-dark body .canvas-item,
html.studio-theme-dark body .canvas-open,
body.studio-theme-dark .gate-panel,
body.studio-theme-dark .canvas-item,
body.studio-theme-dark .canvas-open {
    background: #1b1b21 !important;
    border-color: #2e2e36 !important;
    color: #e9e5da !important;
}

html.studio-theme-dark body .canvas-item:hover,
body.studio-theme-dark .canvas-item:hover {
    background: #26262d !important;
}

html.studio-theme-dark body .canvas-item.active,
body.studio-theme-dark .canvas-item.active {
    background: #263247 !important;
    color: #e9e5da !important;
}

html.studio-theme-dark body .canvas-card-title,
html.studio-theme-dark body .gate-title,
html.studio-theme-dark body .gate-name-input,
body.studio-theme-dark .canvas-card-title,
body.studio-theme-dark .gate-title,
body.studio-theme-dark .gate-name-input {
    color: #e9e5da !important;
}

html.studio-theme-dark body .canvas-card-time,
html.studio-theme-dark body .gate-subtitle,
body.studio-theme-dark .canvas-card-time {
    color: #8f897b !important;
}

body.studio-theme-dark .gate-subtitle {
    color: #8f897b !important;
}

html.studio-theme-dark body .canvas-preview-mark,
html.studio-theme-dark body .canvas-delete,
html.studio-theme-dark body .secondary-btn,
html.studio-theme-dark body .gate-back,
html.studio-theme-dark body .gate-trash-entry,
html.studio-theme-dark body .create-cancel,
html.studio-theme-dark body .gate-create-row,
html.studio-theme-dark body .gate-actions,
html.studio-theme-dark body .trash-note,
html.studio-theme-dark body .emoji-picker,
html.studio-theme-dark body .create-menu,
html.studio-theme-dark body .selection-hub,
html.studio-theme-dark body .output-preview,
body.studio-theme-dark .canvas-preview-mark,
body.studio-theme-dark .canvas-delete,
body.studio-theme-dark .secondary-btn,
body.studio-theme-dark .gate-back,
body.studio-theme-dark .gate-trash-entry,
body.studio-theme-dark .create-cancel,
body.studio-theme-dark .gate-create-row,
body.studio-theme-dark .gate-actions,
body.studio-theme-dark .trash-note,
body.studio-theme-dark .emoji-picker,
body.studio-theme-dark .create-menu,
body.studio-theme-dark .selection-hub,
body.studio-theme-dark .output-preview {
    background: #141419 !important;
    border-color: #2e2e36 !important;
    color: #d4b57a !important;
}

html.studio-theme-dark body .gate-trash-badge,
body.studio-theme-dark .gate-trash-badge {
    background: #d4b57a !important;
    color: #0b0b0d !important;
    border-color: #141419 !important;
}

html.studio-theme-dark body .secondary-btn.active,
body.studio-theme-dark .secondary-btn.active {
    background: #d4b57a !important;
    border-color: #d4b57a !important;
    color: #0b0b0d !important;
}

html.studio-theme-dark body .canvas-delete:hover,
html.studio-theme-dark body .create-cancel:hover,
body.studio-theme-dark .canvas-delete:hover,
body.studio-theme-dark .create-cancel:hover {
    background: rgba(248,113,113,.14) !important;
    border-color: rgba(248,113,113,.32) !important;
    color: #fca5a5 !important;
}

html.studio-theme-dark body .canvas-restore:hover,
body.studio-theme-dark .canvas-restore:hover {
    background: rgba(16,185,129,.14) !important;
    border-color: rgba(16,185,129,.32) !important;
    color: #6ee7b7 !important;
}

html.studio-theme-dark body .canvas-delete-box,
body.studio-theme-dark .canvas-delete-box {
    background: #26262d !important;
    border: 1px solid #2e2e36;
}

html.studio-theme-dark body .canvas-confirm-btn,
html.studio-theme-dark body .create-confirm,
body.studio-theme-dark .canvas-confirm-btn,
body.studio-theme-dark .create-confirm {
    background: #d4b57a !important;
    color: #0b0b0d !important;
}

html.studio-theme-dark body .output-resolution,
body.studio-theme-dark .output-resolution {
    background: rgba(10,10,12,.86) !important;
    color: #d4b57a !important;
}

html.studio-theme-dark body .shell .topbar,
body.studio-theme-dark .shell .topbar {
    background: transparent !important;
    border-color: transparent !important;
    backdrop-filter: none !important;
}

html.studio-theme-dark body .shell,
html.studio-theme-dark body .shell .board,
body.studio-theme-dark .shell,
body.studio-theme-dark .shell .board {
    background-color: #101013 !important;
    background-image: radial-gradient(rgba(212,181,122,.11) 1px, transparent 1px) !important;
}

html.studio-theme-dark body .shell.theme-dark,
body.studio-theme-dark .shell.theme-dark {
    --page: #101013;
    --grid: rgba(212,181,122,.11);
    --panel: rgba(10,10,12,.88);
    --card: #1b1b21;
    --card-solid: #1b1b21;
    --soft: #141419;
    --soft-2: #26262d;
    --line: rgba(212,181,122,.10);
    --line-2: rgba(148,163,184,.22);
    --text: #e9e5da;
    --muted: #9a9484;
    --faint: #6f6a5e;
    --shadow: rgba(0,0,0,.2);
    --strong: #d4b57a;
    --strong-text: #0b0b0d;
}

html.studio-theme-dark body .shell .panel,
body.studio-theme-dark .shell .panel {
    background: rgba(10,10,12,.86) !important;
    border: 1px solid rgba(212,181,122,.10) !important;
    box-shadow: 0 14px 36px rgba(0,0,0,.18) !important;
}

html.studio-theme-dark body .shell .node,
body.studio-theme-dark .shell .node {
    background: #1b1b21 !important;
    border-color: rgba(212,181,122,.10) !important;
    box-shadow: 0 16px 42px rgba(0,0,0,.22) !important;
    color: #e9e5da !important;
}

html.studio-theme-dark body .shell .node-head,
body.studio-theme-dark .shell .node-head {
    background: #1b1b21 !important;
    border-bottom-color: rgba(148,163,184,.14) !important;
}

html.studio-theme-dark body .shell .node-title,
body.studio-theme-dark .shell .node-title {
    color: #8f897b !important;
}

html.studio-theme-dark body .shell .node.selected,
body.studio-theme-dark .shell .node.selected {
    outline-color: rgba(212,181,122,.85) !important;
}

html.studio-theme-dark body .shell .toolbar,
body.studio-theme-dark .shell .toolbar {
    gap: 8px;
}

html.studio-theme-dark body .shell .tool-btn,
html.studio-theme-dark body .shell .select-lite,
html.studio-theme-dark body .shell .gen-count-row,
html.studio-theme-dark body .shell .seg,
html.studio-theme-dark body .shell .llm-mode,
html.studio-theme-dark body .shell .mode-tabs,
body.studio-theme-dark .shell .tool-btn,
body.studio-theme-dark .shell .select-lite,
body.studio-theme-dark .shell .gen-count-row,
body.studio-theme-dark .shell .seg,
body.studio-theme-dark .shell .llm-mode,
body.studio-theme-dark .shell .mode-tabs {
    background: #141419 !important;
    border: 1px solid rgba(212,181,122,.10) !important;
    box-shadow: none !important;
    color: #9a9484 !important;
}

html.studio-theme-dark body .shell .gen-settings,
html.studio-theme-dark body .shell .setting-row,
html.studio-theme-dark body .shell .comfy-settings,
body.studio-theme-dark .shell .gen-settings,
body.studio-theme-dark .shell .setting-row,
body.studio-theme-dark .shell .comfy-settings {
    background: #141419 !important;
    border: 1px solid rgba(212,181,122,.10) !important;
    box-shadow: none !important;
    color: #d4b57a !important;
}

html.studio-theme-dark body .shell .setting-title,
body.studio-theme-dark .shell .setting-title {
    color: #8f897b !important;
}

html.studio-theme-dark body .shell .setting-input,
html.studio-theme-dark body .shell .setting-check,
html.studio-theme-dark body .shell .gen-count-input,
body.studio-theme-dark .shell .setting-input,
body.studio-theme-dark .shell .setting-check,
body.studio-theme-dark .shell .gen-count-input {
    background: #1b1b21 !important;
    border-color: rgba(212,181,122,.10) !important;
    color: #e9e5da !important;
    box-shadow: none !important;
}

html.studio-theme-dark body .shell .gen-step-btn,
body.studio-theme-dark .shell .gen-step-btn {
    color: #8f897b !important;
}

html.studio-theme-dark body .shell .gen-step-btn:hover,
body.studio-theme-dark .shell .gen-step-btn:hover {
    background: #26262d !important;
    color: #e9e5da !important;
}

html.studio-theme-dark body .shell .tool-btn:hover,
html.studio-theme-dark body .shell .select-lite:hover,
body.studio-theme-dark .shell .tool-btn:hover,
body.studio-theme-dark .shell .select-lite:hover {
    background: #1b1b21 !important;
    border-color: #5c584e !important;
    color: #e9e5da !important;
}

html.studio-theme-dark body .shell .llm-mode button,
html.studio-theme-dark body .shell .seg button,
html.studio-theme-dark body .shell .mode-tabs button,
body.studio-theme-dark .shell .llm-mode button,
body.studio-theme-dark .shell .seg button,
body.studio-theme-dark .shell .mode-tabs button {
    background: transparent !important;
    border-color: transparent !important;
    color: #9a9484 !important;
    box-shadow: none !important;
}

html.studio-theme-dark body .shell .llm-mode button.active,
html.studio-theme-dark body .shell .seg button.active,
html.studio-theme-dark body .shell .mode-tabs button.active,
body.studio-theme-dark .shell .llm-mode button.active,
body.studio-theme-dark .shell .seg button.active,
body.studio-theme-dark .shell .mode-tabs button.active {
    background: #d4b57a !important;
    border-color: #d4b57a !important;
    color: #0b0b0d !important;
}

html.studio-theme-dark body .shell .llm-system,
html.studio-theme-dark body .shell .llm-chat-input,
html.studio-theme-dark body .shell .llm-chat-log,
html.studio-theme-dark body .shell .llm-output,
html.studio-theme-dark body .shell .llm-chat-pane,
body.studio-theme-dark .shell .llm-system,
body.studio-theme-dark .shell .llm-chat-input,
body.studio-theme-dark .shell .llm-chat-log,
body.studio-theme-dark .shell .llm-output,
body.studio-theme-dark .shell .llm-chat-pane {
    background: #141419 !important;
    border-color: #2e2e36 !important;
    color: #d4b57a !important;
}

html.studio-theme-dark body .shell .llm-pane-resizer::before,
body.studio-theme-dark .shell .llm-pane-resizer::before {
    background: #4a4740 !important;
}

html.studio-theme-dark body .shell .llm-bubble.assistant,
body.studio-theme-dark .shell .llm-bubble.assistant {
    background: #26262d !important;
    border-color: #2e2e36 !important;
    color: #e9e5da !important;
}

html.studio-theme-dark body .shell .llm-bubble.user,
body.studio-theme-dark .shell .llm-bubble.user {
    background: #d4b57a !important;
    color: #0b0b0d !important;
}

html.studio-theme-dark body .shell .image-node img,
html.studio-theme-dark body .shell .output-grid img,
html.studio-theme-dark body .shell .output-preview img,
html.studio-theme-dark body .shell .blank-image,
html.studio-theme-dark body .shell .input-item,
html.studio-theme-dark body .shell .prompt-node textarea,
html.studio-theme-dark body .shell .llm-system,
html.studio-theme-dark body .shell .llm-chat-input,
html.studio-theme-dark body .shell .model-input,
body.studio-theme-dark .shell .image-node img,
body.studio-theme-dark .shell .output-grid img,
body.studio-theme-dark .shell .output-preview img,
body.studio-theme-dark .shell .blank-image,
body.studio-theme-dark .shell .input-item,
body.studio-theme-dark .shell .prompt-node textarea,
body.studio-theme-dark .shell .llm-system,
body.studio-theme-dark .shell .llm-chat-input,
body.studio-theme-dark .shell .model-input {
    background: #101013 !important;
    border-color: rgba(212,181,122,.10) !important;
}

html.studio-theme-dark body .shell .blank-image,
body.studio-theme-dark .shell .blank-image {
    color: #8f897b !important;
    border-style: dashed !important;
}

html.studio-theme-dark body .shell .blank-image:hover,
html.studio-theme-dark body .shell .blank-image.drag-over,
body.studio-theme-dark .shell .blank-image:hover,
body.studio-theme-dark .shell .blank-image.drag-over {
    background: #202024 !important;
    border-color: rgba(212,181,122,.42) !important;
    color: #d4b57a !important;
}

html.studio-theme-dark body .shell .image-caption,
body.studio-theme-dark .shell .image-caption {
    color: #8f897b !important;
}

html.studio-theme-dark body .shell .input-label,
body.studio-theme-dark .shell .input-label {
    background: rgba(10,10,12,.78) !important;
    color: #d4b57a !important;
}

html.studio-theme-dark body .shell .prompt-list .bg-slate-50,
html.studio-theme-dark body .shell .prompt-list .border-slate-100,
body.studio-theme-dark .shell .prompt-list .bg-slate-50,
body.studio-theme-dark .shell .prompt-list .border-slate-100 {
    background: #141419 !important;
    border-color: rgba(212,181,122,.10) !important;
    color: #c9c2b2 !important;
}

html.studio-theme-dark body .shell .input-index,
body.studio-theme-dark .shell .input-index {
    background: #d4b57a !important;
    color: #0b0b0d !important;
}

html.studio-theme-dark body .shell .port::after,
body.studio-theme-dark .shell .port::after {
    background: #d4b57a !important;
    border-color: #141419 !important;
    box-shadow: 0 0 0 1px rgba(212,181,122,.35) !important;
}

html.studio-theme-dark body .shell .drop-overlay,
body.studio-theme-dark .shell .drop-overlay {
    background: rgba(10,10,12,.44) !important;
    color: #c9c2b2 !important;
    backdrop-filter: blur(2px) !important;
}

html.studio-theme-dark body .output-drag-preview,
body.studio-theme-dark .output-drag-preview,
.output-drag-preview {
    position: fixed;
    left: -10000px;
    top: -10000px;
    width: 150px;
    height: 150px;
    padding: 8px;
    border-radius: 18px;
    background: #101013;
    border: 1px solid rgba(212,181,122,.11);
    box-shadow: 0 16px 40px rgba(0,0,0,.28);
    pointer-events: none;
    z-index: -1;
}

.output-drag-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 12px;
    background: #101013;
}

html.studio-theme-dark body .shell .resize-handle,
body.studio-theme-dark .shell .resize-handle {
    background: rgba(10,10,12,.86) !important;
    border-color: rgba(212,181,122,.11) !important;
    color: #8f897b !important;
}

html.studio-theme-dark body .shell .resize-handle:hover,
body.studio-theme-dark .shell .resize-handle:hover {
    background: #1b1b21 !important;
    border-color: rgba(220,214,200,.36) !important;
    color: #d4b57a !important;
}

/* Standalone studio pages: zimage / enhance / klein / angle */
html.studio-theme-dark body .layout-container,
body.studio-theme-dark .layout-container,
html.studio-theme-dark body .container-box,
body.studio-theme-dark .container-box {
    color: #e9e5da !important;
}

html.studio-theme-dark body .mode-switcher,
html.studio-theme-dark body .engine-panel,
html.studio-theme-dark body .engine-switch,
html.studio-theme-dark body .ios-slider,
html.studio-theme-dark body .result-frame,
html.studio-theme-dark body .gallery-lightbox,
html.studio-theme-dark body #lightbox,
html.studio-theme-dark body #compareContainer,
html.studio-theme-dark body #compareContainerKlein,
html.studio-theme-dark body #lightboxImg,
body.studio-theme-dark .mode-switcher,
body.studio-theme-dark .engine-panel,
body.studio-theme-dark .engine-switch,
body.studio-theme-dark .ios-slider,
body.studio-theme-dark .result-frame,
body.studio-theme-dark .gallery-lightbox,
body.studio-theme-dark #lightbox,
body.studio-theme-dark #compareContainer,
body.studio-theme-dark #compareContainerKlein,
body.studio-theme-dark #lightboxImg {
    background-color: #141419 !important;
    border-color: rgba(212,181,122,.10) !important;
    color: #e9e5da !important;
}

html.studio-theme-dark body .mode-glider,
html.studio-theme-dark body .engine-btn.active,
html.studio-theme-dark body .ios-slider:before,
body.studio-theme-dark .mode-glider,
body.studio-theme-dark .engine-btn.active,
body.studio-theme-dark .ios-slider:before {
    background: #d4b57a !important;
    color: #0b0b0d !important;
}

html.studio-theme-dark body .mode-btn.active,
html.studio-theme-dark body .engine-btn.active,
body.studio-theme-dark .mode-btn.active,
body.studio-theme-dark .engine-btn.active {
    color: #0b0b0d !important;
}

html.studio-theme-dark body .mode-btn,
html.studio-theme-dark body .engine-btn,
html.studio-theme-dark body .cloud-status,
body.studio-theme-dark .mode-btn,
body.studio-theme-dark .engine-btn,
body.studio-theme-dark .cloud-status {
    color: #8f897b !important;
}

html.studio-theme-dark body .engine-btn:not(.active):hover,
body.studio-theme-dark .engine-btn:not(.active):hover {
    background: rgba(220,214,200,.08) !important;
    color: #e9e5da !important;
}

html.studio-theme-dark body .upload-item:hover,
html.studio-theme-dark body .upload-item.drag-over,
body.studio-theme-dark .upload-item:hover,
body.studio-theme-dark .upload-item.drag-over {
    background: #1b1b21 !important;
    border-color: rgba(220,214,200,.42) !important;
}

html.studio-theme-dark body .glass-btn,
html.studio-theme-dark body .btn-render,
html.studio-theme-dark body #downloadBtn,
html.studio-theme-dark body #lightboxDownload,
body.studio-theme-dark .glass-btn,
body.studio-theme-dark .btn-render,
body.studio-theme-dark #downloadBtn,
body.studio-theme-dark #lightboxDownload {
    background: #d4b57a !important;
    color: #0b0b0d !important;
    border-color: #d4b57a !important;
}

html.studio-theme-dark body .glass-btn:hover,
html.studio-theme-dark body .btn-render:hover,
body.studio-theme-dark .glass-btn:hover,
body.studio-theme-dark .btn-render:hover {
    background: #f0efeb !important;
    color: #101013 !important;
}

html.studio-theme-dark body input[type=range]::-webkit-slider-runnable-track,
body.studio-theme-dark input[type=range]::-webkit-slider-runnable-track {
    background: #2e2e36 !important;
}

html.studio-theme-dark body input[type=range]::-webkit-slider-thumb,
body.studio-theme-dark input[type=range]::-webkit-slider-thumb {
    background: #d4b57a !important;
}

html.studio-theme-dark body .masonry-item img,
html.studio-theme-dark body .result-frame img,
body.studio-theme-dark .masonry-item img,
body.studio-theme-dark .result-frame img {
    background-color: #141419 !important;
}

html.studio-theme-dark body .bg-black,
body.studio-theme-dark .bg-black {
    background-color: #d4b57a !important;
    color: #0b0b0d !important;
}

html.studio-theme-dark body .hover\:text-black:hover,
body.studio-theme-dark .hover\:text-black:hover {
    color: #e9e5da !important;
}

/* Final neutral dark pass: remove blue-tinted surfaces from tool pages. */
html.studio-theme-dark,
html.studio-theme-dark body,
body.studio-theme-dark {
    background: #0e0e10 !important;
    color: #f2efe8 !important;
}

body.studio-theme-dark {
    --bg: #0e0e10;
    --bg-base: #0e0e10;
    --page: #0e0e10;
    --card: #1a1a1e;
    --card-solid: #1a1a1e;
    --soft: #0a0a0c;
    --soft-2: #16171b;
    --panel: rgba(14,14,17,.92);
    --text: #f2efe8;
    --text-main: #f2efe8;
    --accent: #d4b57a;
    --line: #2c2c33;
    --line-2: #323238;
}

html.studio-theme-dark body .app-shell,
html.studio-theme-dark body .sidebar,
html.studio-theme-dark body .stage,
html.studio-theme-dark body .shell,
body.studio-theme-dark .app-shell,
body.studio-theme-dark .sidebar,
body.studio-theme-dark .stage,
body.studio-theme-dark .shell {
    background: #0e0e10 !important;
    border-color: #2c2c33 !important;
}

html.studio-theme-dark body .console-card,
html.studio-theme-dark body .nano-input,
html.studio-theme-dark body .upload-item,
html.studio-theme-dark body .result-frame,
html.studio-theme-dark body .masonry-item,
html.studio-theme-dark body .engine-panel,
html.studio-theme-dark body .engine-switch,
html.studio-theme-dark body .mode-switcher,
html.studio-theme-dark body .setting-row,
html.studio-theme-dark body .provider-switch,
html.studio-theme-dark body .ios-slider,
html.studio-theme-dark body #compareContainer,
html.studio-theme-dark body #lightboxImg,
html.studio-theme-dark body #lightbox .bg-white,
html.studio-theme-dark body .bg-white,
html.studio-theme-dark body .bg-white\/90,
html.studio-theme-dark body .bg-white\/95,
html.studio-theme-dark body .bg-gray-50,
html.studio-theme-dark body .bg-gray-50\/50,
html.studio-theme-dark body .bg-gray-100,
html.studio-theme-dark body .bg-gray-200,
html.studio-theme-dark body .bg-\[\#f4f3f0\],
html.studio-theme-dark body .bg-\[\#f4f3f0\],
body.studio-theme-dark .console-card,
body.studio-theme-dark .nano-input,
body.studio-theme-dark .upload-item,
body.studio-theme-dark .result-frame,
body.studio-theme-dark .masonry-item,
body.studio-theme-dark .engine-panel,
body.studio-theme-dark .engine-switch,
body.studio-theme-dark .mode-switcher,
body.studio-theme-dark .setting-row,
body.studio-theme-dark .provider-switch,
body.studio-theme-dark .ios-slider,
body.studio-theme-dark #compareContainer,
body.studio-theme-dark #lightboxImg,
body.studio-theme-dark #lightbox .bg-white,
body.studio-theme-dark .bg-white,
body.studio-theme-dark .bg-white\/90,
body.studio-theme-dark .bg-white\/95,
body.studio-theme-dark .bg-gray-50,
body.studio-theme-dark .bg-gray-50\/50,
body.studio-theme-dark .bg-gray-100,
body.studio-theme-dark .bg-gray-200,
body.studio-theme-dark .bg-\[\#f4f3f0\],
body.studio-theme-dark .bg-\[\#f4f3f0\] {
    background-color: #1a1a1e !important;
    border-color: #2c2c33 !important;
    color: #f2efe8 !important;
}

html.studio-theme-dark body #lightbox,
body.studio-theme-dark #lightbox {
    background: rgba(8,8,10,.96) !important;
}

html.studio-theme-dark body .glass-btn,
html.studio-theme-dark body .btn-render,
html.studio-theme-dark body .mode-glider,
html.studio-theme-dark body .engine-btn.active,
html.studio-theme-dark body .ios-switch input:checked + .ios-slider,
html.studio-theme-dark body #cloud-progress-bar,
body.studio-theme-dark .glass-btn,
body.studio-theme-dark .btn-render,
body.studio-theme-dark .mode-glider,
body.studio-theme-dark .engine-btn.active,
body.studio-theme-dark .ios-switch input:checked + .ios-slider,
body.studio-theme-dark #cloud-progress-bar {
    background: #f2efe8 !important;
    color: #0e0e10 !important;
    border-color: #f2efe8 !important;
}

html.studio-theme-dark body .mode-btn.active,
html.studio-theme-dark body .engine-btn.active,
html.studio-theme-dark body .text-black,
body.studio-theme-dark .mode-btn.active,
body.studio-theme-dark .engine-btn.active,
body.studio-theme-dark .text-black {
    color: #f2efe8 !important;
}

html.studio-theme-dark body .mode-glider + .mode-btn.active,
body.studio-theme-dark .mode-glider + .mode-btn.active {
    color: #0e0e10 !important;
}

html.studio-theme-dark body input,
html.studio-theme-dark body textarea,
html.studio-theme-dark body select,
body.studio-theme-dark input,
body.studio-theme-dark textarea,
body.studio-theme-dark select {
    background-color: #0a0a0c !important;
    border-color: #323238 !important;
    color: #f2efe8 !important;
}

html.studio-theme-dark body .border-gray-100,
html.studio-theme-dark body .border-gray-200,
html.studio-theme-dark body .border-gray-200\/50,
html.studio-theme-dark body .border-black,
body.studio-theme-dark .border-gray-100,
body.studio-theme-dark .border-gray-200,
body.studio-theme-dark .border-gray-200\/50,
body.studio-theme-dark .border-black {
    border-color: #2c2c33 !important;
}

html.studio-theme-dark body .text-gray-300,
html.studio-theme-dark body .text-gray-400,
html.studio-theme-dark body .text-gray-500,
html.studio-theme-dark body .text-gray-600,
html.studio-theme-dark body .text-gray-700,
html.studio-theme-dark body .text-gray-800,
body.studio-theme-dark .text-gray-300,
body.studio-theme-dark .text-gray-400,
body.studio-theme-dark .text-gray-500,
body.studio-theme-dark .text-gray-600,
body.studio-theme-dark .text-gray-700,
body.studio-theme-dark .text-gray-800 {
    color: #a7a7ad !important;
}

html.studio-theme-dark body h1,
html.studio-theme-dark body h2,
html.studio-theme-dark body h3,
html.studio-theme-dark body label,
body.studio-theme-dark h1,
body.studio-theme-dark h2,
body.studio-theme-dark h3,
body.studio-theme-dark label {
    color: #f2efe8 !important;
}

html.studio-theme-dark body .mode-switcher .mode-btn.active,
html.studio-theme-dark body .engine-switch .engine-btn.active,
body.studio-theme-dark .mode-switcher .mode-btn.active,
body.studio-theme-dark .engine-switch .engine-btn.active {
    color: #0e0e10 !important;
}

/* Online-generation dark pass: soft blue-gray instead of heavy black. */
html.studio-theme-dark,
html.studio-theme-dark body,
body.studio-theme-dark {
    background: #101013 !important;
    color: #e9e5da !important;
}

body.studio-theme-dark {
    --bg: #101013;
    --bg-base: #101013;
    --page: #101013;
    --card: #1b1b21;
    --card-solid: #1b1b21;
    --soft: #141419;
    --soft-2: #222228;
    --panel: rgba(12,12,15,.92);
    --text: #e9e5da;
    --text-main: #e9e5da;
    --accent: #d4b57a;
    --line: #2e2e36;
    --line-2: #3a3a42;
}

html.studio-theme-dark body .app-shell,
html.studio-theme-dark body .sidebar,
html.studio-theme-dark body .stage,
html.studio-theme-dark body .shell,
body.studio-theme-dark .app-shell,
body.studio-theme-dark .sidebar,
body.studio-theme-dark .stage,
body.studio-theme-dark .shell {
    background: #101013 !important;
    border-color: #2e2e36 !important;
}

html.studio-theme-dark body .stage,
body.studio-theme-dark .stage {
    background: #141419 !important;
}

html.studio-theme-dark body .console-card,
html.studio-theme-dark body .nano-input,
html.studio-theme-dark body .upload-item,
html.studio-theme-dark body .result-frame,
html.studio-theme-dark body .masonry-item,
html.studio-theme-dark body .engine-panel,
html.studio-theme-dark body .tool-panel,
html.studio-theme-dark body .control-panel,
html.studio-theme-dark body .engine-switch,
html.studio-theme-dark body .mode-switcher,
html.studio-theme-dark body .setting-row,
html.studio-theme-dark body .ios-slider,
html.studio-theme-dark body #compareContainer,
html.studio-theme-dark body #lightboxImg,
html.studio-theme-dark body #lightbox .bg-white,
html.studio-theme-dark body .bg-white,
html.studio-theme-dark body .bg-white\/90,
html.studio-theme-dark body .bg-white\/95,
html.studio-theme-dark body .bg-gray-50,
html.studio-theme-dark body .bg-gray-50\/50,
html.studio-theme-dark body .bg-gray-100,
html.studio-theme-dark body .bg-gray-200,
html.studio-theme-dark body .bg-\[\#f4f3f0\],
html.studio-theme-dark body .bg-\[\#f4f3f0\],
body.studio-theme-dark .console-card,
body.studio-theme-dark .nano-input,
body.studio-theme-dark .upload-item,
body.studio-theme-dark .result-frame,
body.studio-theme-dark .masonry-item,
body.studio-theme-dark .engine-panel,
body.studio-theme-dark .tool-panel,
body.studio-theme-dark .control-panel,
body.studio-theme-dark .engine-switch,
body.studio-theme-dark .mode-switcher,
body.studio-theme-dark .setting-row,
body.studio-theme-dark .ios-slider,
body.studio-theme-dark #compareContainer,
body.studio-theme-dark #lightboxImg,
body.studio-theme-dark #lightbox .bg-white,
body.studio-theme-dark .bg-white,
body.studio-theme-dark .bg-white\/90,
body.studio-theme-dark .bg-white\/95,
body.studio-theme-dark .bg-gray-50,
body.studio-theme-dark .bg-gray-50\/50,
body.studio-theme-dark .bg-gray-100,
body.studio-theme-dark .bg-gray-200,
body.studio-theme-dark .bg-\[\#f4f3f0\],
body.studio-theme-dark .bg-\[\#f4f3f0\] {
    background-color: #1b1b21 !important;
    border-color: #2e2e36 !important;
    color: #e9e5da !important;
}

html.studio-theme-dark body .model-pill,
html.studio-theme-dark body .ratio-grid,
html.studio-theme-dark body .resolution-toggle,
html.studio-theme-dark body .select-shell,
html.studio-theme-dark body .mode-switch,
html.studio-theme-dark body .mini-ratio,
html.studio-theme-dark body input,
html.studio-theme-dark body textarea,
html.studio-theme-dark body select,
body.studio-theme-dark .model-pill,
body.studio-theme-dark .ratio-grid,
body.studio-theme-dark .resolution-toggle,
body.studio-theme-dark .select-shell,
body.studio-theme-dark .mode-switch,
body.studio-theme-dark .mini-ratio,
body.studio-theme-dark input,
body.studio-theme-dark textarea,
body.studio-theme-dark select {
    background-color: #141419 !important;
    border-color: #3a3a42 !important;
    color: #e9e5da !important;
}

html.studio-theme-dark body .size-select,
html.studio-theme-dark body .size-custom,
body.studio-theme-dark .size-select,
body.studio-theme-dark .size-custom {
    background-color: #141419 !important;
    border-color: #3a3a42 !important;
    color: #e9e5da !important;
}

html.studio-theme-dark body #lightbox,
body.studio-theme-dark #lightbox {
    background: rgba(10,10,12,.9) !important;
}

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

html.studio-theme-dark body .mode-btn,
html.studio-theme-dark body .engine-btn,
html.studio-theme-dark body .model-option,
html.studio-theme-dark body .ratio-option,
html.studio-theme-dark body .resolution-option,
html.studio-theme-dark body .provider-btn,
body.studio-theme-dark .mode-btn,
body.studio-theme-dark .engine-btn,
body.studio-theme-dark .model-option,
body.studio-theme-dark .ratio-option,
body.studio-theme-dark .resolution-option {
    color: #8f897b !important;
}

body.studio-theme-dark .provider-btn {
    color: #8f897b !important;
}

html.studio-theme-dark body .provider-switch button,
body.studio-theme-dark .provider-switch button {
    color: #8f897b !important;
}

html.studio-theme-dark body .mode-btn:hover,
html.studio-theme-dark body .engine-btn:hover,
html.studio-theme-dark body .model-option:hover,
html.studio-theme-dark body .ratio-option:hover,
html.studio-theme-dark body .resolution-option:hover,
html.studio-theme-dark body .provider-btn:hover,
body.studio-theme-dark .mode-btn:hover,
body.studio-theme-dark .engine-btn:hover,
body.studio-theme-dark .model-option:hover,
body.studio-theme-dark .ratio-option:hover,
body.studio-theme-dark .resolution-option:hover,
body.studio-theme-dark .provider-btn:hover {
    background: rgba(220,214,200,.08) !important;
    color: #e9e5da !important;
}

html.studio-theme-dark body .provider-switch button:hover,
body.studio-theme-dark .provider-switch button:hover {
    background: rgba(220,214,200,.08) !important;
    color: #e9e5da !important;
}

html.studio-theme-dark body .mode-btn.active,
html.studio-theme-dark body .engine-btn.active,
html.studio-theme-dark body .model-option.active,
html.studio-theme-dark body .ratio-option.active,
html.studio-theme-dark body .resolution-option.active,
html.studio-theme-dark body .provider-btn.active,
html.studio-theme-dark body .mode-switcher .mode-btn.active,
html.studio-theme-dark body .engine-switch .engine-btn.active,
body.studio-theme-dark .mode-btn.active,
body.studio-theme-dark .engine-btn.active,
body.studio-theme-dark .model-option.active,
body.studio-theme-dark .ratio-option.active,
body.studio-theme-dark .resolution-option.active,
body.studio-theme-dark .provider-btn.active,
body.studio-theme-dark .mode-switcher .mode-btn.active,
body.studio-theme-dark .engine-switch .engine-btn.active {
    color: #0b0b0d !important;
}

html.studio-theme-dark body .provider-switch button.active,
body.studio-theme-dark .provider-switch button.active {
    background: #d4b57a !important;
    color: #0b0b0d !important;
    border-color: #d4b57a !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
}

html.studio-theme-dark body .mode-switcher,
body.studio-theme-dark .mode-switcher,
html.studio-theme-dark body .provider-switch,
body.studio-theme-dark .provider-switch,
html.studio-theme-dark body .engine-switch,
body.studio-theme-dark .engine-switch {
    background: #141419 !important;
    border: 1px solid #3a3a42 !important;
    box-shadow: none !important;
}

html.studio-theme-dark body .mode-glider,
body.studio-theme-dark .mode-glider {
    background: #d4b57a !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
}

html.studio-theme-dark body .mode-btn,
body.studio-theme-dark .mode-btn,
html.studio-theme-dark body .engine-btn,
body.studio-theme-dark .engine-btn,
html.studio-theme-dark body .provider-btn,
body.studio-theme-dark .provider-btn {
    border-radius: 999px !important;
    letter-spacing: .02em !important;
}

html.studio-theme-dark body .provider-switch button,
body.studio-theme-dark .provider-switch button {
    border-radius: 999px !important;
    min-height: 30px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .02em !important;
}

html.studio-theme-dark body .border-gray-100,
html.studio-theme-dark body .border-gray-200,
html.studio-theme-dark body .border-gray-200\/50,
html.studio-theme-dark body .border-black,
body.studio-theme-dark .border-gray-100,
body.studio-theme-dark .border-gray-200,
body.studio-theme-dark .border-gray-200\/50,
body.studio-theme-dark .border-black {
    border-color: #2e2e36 !important;
}

html.studio-theme-dark body .text-gray-300,
html.studio-theme-dark body .text-gray-400,
html.studio-theme-dark body .text-gray-500,
html.studio-theme-dark body .text-gray-600,
html.studio-theme-dark body .text-gray-700,
html.studio-theme-dark body .text-gray-800,
body.studio-theme-dark .text-gray-300,
body.studio-theme-dark .text-gray-400,
body.studio-theme-dark .text-gray-500,
body.studio-theme-dark .text-gray-600,
body.studio-theme-dark .text-gray-700,
body.studio-theme-dark .text-gray-800 {
    color: #8f897b !important;
}

html.studio-theme-dark body h1,
html.studio-theme-dark body h2,
html.studio-theme-dark body h3,
html.studio-theme-dark body label,
body.studio-theme-dark h1,
body.studio-theme-dark h2,
body.studio-theme-dark h3,
body.studio-theme-dark label {
    color: #e9e5da !important;
}

html.studio-theme-dark body input[type=range]::-webkit-slider-runnable-track,
body.studio-theme-dark input[type=range]::-webkit-slider-runnable-track {
    background: #2e2e36 !important;
}

html.studio-theme-dark body input[type=range]::-webkit-slider-thumb,
body.studio-theme-dark input[type=range]::-webkit-slider-thumb {
    background: #d4b57a !important;
    border-color: #101013 !important;
}

html.studio-theme-dark body ::placeholder,
body.studio-theme-dark ::placeholder {
    color: #6e6a5f !important;
}

/* Z-image console polish: keep the prompt field open and make ModelScope readable. */
html.studio-theme-dark body #prompt,
body.studio-theme-dark #prompt {
    background: transparent !important;
    border-color: transparent !important;
    color: #e9e5da !important;
}

html.studio-theme-dark body .console-card > .bg-gray-50\/50,
body.studio-theme-dark .console-card > .bg-gray-50\/50 {
    background: transparent !important;
}

html.studio-theme-dark body #prompt::placeholder,
body.studio-theme-dark #prompt::placeholder {
    color: #6e6a5f !important;
}

/* GPT chat dark polish: avoid harsh black bars around text areas. */
html.studio-theme-dark body .chat-shell,
body.studio-theme-dark .chat-shell,
html.studio-theme-dark body .messages,
body.studio-theme-dark .messages {
    background: #101013 !important;
}

html.studio-theme-dark body .topbar,
body.studio-theme-dark .topbar {
    background: rgba(10,10,12,.9) !important;
    border-bottom-color: #2e2e36 !important;
}

html.studio-theme-dark body .composer-wrap,
body.studio-theme-dark .composer-wrap {
    background: linear-gradient(to top,#101013 82%,rgba(10,10,12,0)) !important;
}

html.studio-theme-dark body .composer,
body.studio-theme-dark .composer,
html.studio-theme-dark body .history-popover,
body.studio-theme-dark .history-popover {
    background: #1b1b21 !important;
    border-color: #2e2e36 !important;
    color: #e9e5da !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.24) !important;
}

html.studio-theme-dark body .composer-body,
body.studio-theme-dark .composer-body {
    background: #141419 !important;
    border-color: #3a3a42 !important;
}

html.studio-theme-dark body #messageInput,
body.studio-theme-dark #messageInput {
    background: transparent !important;
    border-color: transparent !important;
    color: #e9e5da !important;
}

html.studio-theme-dark body #messageInput::placeholder,
body.studio-theme-dark #messageInput::placeholder {
    color: #6e6a5f !important;
}

html.studio-theme-dark body .title-block h1,
body.studio-theme-dark .title-block h1 {
    color: #e9e5da !important;
}

html.studio-theme-dark body .title-block p,
body.studio-theme-dark .title-block p {
    color: #8f897b !important;
}

html.studio-theme-dark body .action-btn,
body.studio-theme-dark .action-btn,
html.studio-theme-dark body .thread-item,
body.studio-theme-dark .thread-item {
    background: #141419 !important;
    border-color: #3a3a42 !important;
    color: #d4b57a !important;
}

html.studio-theme-dark body .action-btn:hover,
body.studio-theme-dark .action-btn:hover,
html.studio-theme-dark body .thread-item:hover,
body.studio-theme-dark .thread-item:hover {
    background: #222228 !important;
    color: #e9e5da !important;
}

html.studio-theme-dark body .bubble.user,
body.studio-theme-dark .bubble.user {
    background: #26262d !important;
    color: #f0efeb !important;
    border: 1px solid #45454e !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;
}

html.studio-theme-dark body .bubble.assistant,
body.studio-theme-dark .bubble.assistant {
    background: #1b1b21 !important;
    color: #e9e5da !important;
    border-color: #2e2e36 !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.14) !important;
}

html.studio-theme-dark body .bubble.assistant.streaming::after,
body.studio-theme-dark .bubble.assistant.streaming::after {
    background: #d4b57a !important;
}

html.studio-theme-dark body .bubble img.generated,
body.studio-theme-dark .bubble img.generated {
    border-color: #3a3a42 !important;
}

/* Dark-card clipping: keep inner fills from poking through rounded top corners. */
html.studio-theme-dark body .console-card,
html.studio-theme-dark body .nano-input,
html.studio-theme-dark body .upload-item,
html.studio-theme-dark body .result-frame,
html.studio-theme-dark body .masonry-item,
html.studio-theme-dark body .engine-panel,
html.studio-theme-dark body .tool-panel,
html.studio-theme-dark body .control-panel,
html.studio-theme-dark body .composer,
html.studio-theme-dark body .history-popover,
html.studio-theme-dark body .model-panel,
html.studio-theme-dark body .gate-panel,
body.studio-theme-dark .console-card,
body.studio-theme-dark .nano-input,
body.studio-theme-dark .upload-item,
body.studio-theme-dark .result-frame,
body.studio-theme-dark .masonry-item,
body.studio-theme-dark .engine-panel,
body.studio-theme-dark .tool-panel,
body.studio-theme-dark .control-panel,
body.studio-theme-dark .composer,
body.studio-theme-dark .history-popover,
body.studio-theme-dark .model-panel,
body.studio-theme-dark .gate-panel {
    overflow: hidden !important;
    background-clip: padding-box !important;
}

html.studio-theme-dark body .shell .node,
body.studio-theme-dark .shell .node {
    background-clip: padding-box !important;
}

html.studio-theme-dark body .shell .node-head,
body.studio-theme-dark .shell .node-head {
    border-radius: 21px 21px 0 0 !important;
    overflow: hidden !important;
    background-clip: padding-box !important;
}

/* Switch contrast: keep iOS toggles visible on warm dark panels. */
html.studio-theme-dark body .ios-switch .ios-slider,
body.studio-theme-dark .ios-switch .ios-slider {
    background: #202024 !important;
    border: 1px solid #45454e !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.28), 0 0 0 1px rgba(220,214,200,.05) !important;
}

html.studio-theme-dark body .ios-switch .ios-slider:before,
body.studio-theme-dark .ios-switch .ios-slider:before {
    background: #f5f4f1 !important;
    box-shadow: 0 3px 9px rgba(0,0,0,.32) !important;
}

html.studio-theme-dark body .ios-switch input:checked + .ios-slider,
body.studio-theme-dark .ios-switch input:checked + .ios-slider {
    background: #d4b57a !important;
    border-color: #d4b57a !important;
    box-shadow: 0 0 0 3px rgba(220,214,200,.12) !important;
}

html.studio-theme-dark body .ios-switch input:checked + .ios-slider:before,
body.studio-theme-dark .ios-switch input:checked + .ios-slider:before {
    background: #0b0b0d !important;
    box-shadow: 0 2px 7px rgba(16,20,29,.22) !important;
}

html.studio-theme-dark body .shell .comfy-random-btn.active,
body.studio-theme-dark .shell .comfy-random-btn.active {
    background: #f5f4f1 !important;
    background-color: #f5f4f1 !important;
    color: #131318 !important;
    border-color: #f5f4f1 !important;
}

html.studio-theme-dark body .shell .comfy-random-btn.active svg,
body.studio-theme-dark .shell .comfy-random-btn.active svg {
    fill: none !important;
    stroke: #131318 !important;
}

/* ============================================================
   agentB 视觉皮肤层 + 动效体系（2026.09.01）
   只覆盖视觉值（颜色/圆角/阴影/字体/过渡），不改布局语义。
   ============================================================ */
:root {
    --font-ui:"Inter","PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;
    --font-display:"Space Grotesk","Inter","PingFang SC","Microsoft YaHei",sans-serif;
    --r-sm:3px; --r-md:6px; --r-lg:10px; --r-pill:999px;
    --shadow-1:0 1px 2px rgba(12,10,6,.05), 0 3px 10px rgba(12,10,6,.07);
    --shadow-2:0 4px 12px rgba(12,10,6,.09), 0 14px 34px rgba(12,10,6,.14);
    --motion-fast:.2s; --motion-base:.3s; --motion-slow:.45s;
    --ease-out:cubic-bezier(.19,1,.22,1);
    --accent:#8f6f2e; --accent-soft:#f3eddd; --accent-line:#d9c9a0;
    /* 惊蛰生态色：新芽绿 / 桃花粉 / 春泥褐。铁律：只作状态与强调，不作正文色；
       新增 token 一律走 var()，不新增 !important（金色 pass 保持不变）。 */
    --sprout:#35855a; --sprout-soft:rgba(53,133,90,.12);
    --peach:#c96a84; --peach-soft:rgba(201,106,132,.12);
    --soil:#7d6a55; --soil-soft:rgba(125,106,85,.14);
}
body.studio-theme-dark {
    --accent:#d4b57a; --accent-soft:rgba(212,181,122,.12); --accent-line:rgba(212,181,122,.30);
    --sprout:#8fce8f; --sprout-soft:rgba(143,206,143,.14);
    --peach:#e8a0b4; --peach-soft:rgba(232,160,180,.14);
    --soil:#a08b72; --soil-soft:rgba(160,139,114,.16);
}

/* 主题切换时底色柔和过渡 */
body { transition:background-color var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out); }

/* 字体层级：大标题用 Space Grotesk display，正文 UI 栈 */
body { font-family:var(--font-ui); }
.ws-board-name, .ws-side-title, .current-canvas-title, .page-head .title,
.ws-board-empty-text, .log-title, .asset-manager-title, .image-edit-title,
.workflow-transfer-title, .error-title, .agent-head strong, .ws-trash-head-title {
    font-family:var(--font-display);
    letter-spacing:.01em;
}

/* === 按钮体系 === */
/* primary：hover 提亮 ~5%，active 缩放 0.97 */
body .ws-primary-btn, body .action-btn.primary-btn, body .ws-mini-btn.primary,
body .error-btn.primary, body .image-edit-btn.primary, body .workflow-transfer-btn.primary,
body .ws-mini-btn:not(.primary).ws-confirm-btn {
    border-radius:var(--r-sm);
    transition:background var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
}
body .ws-primary-btn:hover, body .action-btn.primary-btn:hover,
body .error-btn.primary:hover, body .image-edit-btn.primary:hover,
body .workflow-transfer-btn.primary:hover {
    background:color-mix(in srgb, var(--strong, #d8b878) 94%, #fff);
    box-shadow:var(--shadow-2);
}
body .ws-primary-btn:active, body .action-btn.primary-btn:active,
body .error-btn.primary:active, body .image-edit-btn.primary:active,
body .workflow-transfer-btn.primary:active,
body .ws-icon-btn:active, body .tool-btn:active, body .preview-icon-btn:active,
body .ws-mini-btn:active, body .canvas-asset-icon-btn:active,
body .action-btn:active, body .ws-paste-btn:active, body .error-btn:active,
body .image-edit-btn:active, body .workflow-transfer-btn:active,
body .ws-side-add:active, body .menu-btn:active, body .canvas-asset-toggle:active {
    transform:scale(.97);
}
/* ghost / 图标按钮 */
body .ws-icon-btn, body .tool-btn, body .preview-icon-btn, body .ws-mini-btn,
body .canvas-asset-icon-btn, body .action-btn:not(.primary-btn),
body .ws-side-add, body .error-btn, body .image-edit-btn.secondary,
body .workflow-transfer-btn.secondary {
    border-radius:var(--r-sm);
    transition:background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
}
body .ws-icon-btn:hover, body .tool-btn:hover, body .preview-icon-btn:hover,
body .ws-mini-btn:hover, body .canvas-asset-icon-btn:hover,
body .action-btn:not(.primary-btn):hover, body .ws-side-add:hover {
    background:var(--soft-2, #e8e7e3);
    box-shadow:var(--shadow-1);
}

/* === 卡片：hover 抬升 2px + 阴影 === */
body .canvas-item, body .provider-card, body .field-frame, body .workflow-transfer-card,
body .ws-trash-panel, body .canvas-asset-panel, body .workflow-transfer-panel {
    border-radius:var(--r-md);
}
body .canvas-item:hover { transform:translateY(-2px); box-shadow:var(--shadow-1); }
body .provider-card { transition:box-shadow var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out); }
body .provider-card:hover { box-shadow:var(--shadow-1); transform:translateY(-1px); }

/* === 表单输入 / 下拉：统一圆角 + 松绿 focus ring === */
body select:focus-visible, body input:focus-visible, body textarea:focus-visible {
    outline:2px solid var(--accent);
    outline-offset:1px;
}
body select, body input[type="text"], body input[type="number"], body input[type="password"] {
    border-radius:var(--r-sm);
}

/* === 状态徽标 / pill === */
body .ws-trash-badge, body .ws-board-count { background:var(--accent-soft); color:var(--accent); }

/* ============================================================
   动效层（全部 0.15-0.35s，不阻塞交互）
   ============================================================ */

/* 1) 首屏/面板进入：淡入 + 轻微上移（由 motion.js 添加类驱动） */
.motion-enter { opacity:0; transform:translateY(10px); }
.motion-enter.motion-in {
    opacity:1; transform:none;
    transition:opacity var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out);
}

/* 2) 列表交错淡入（stagger 40ms，由 motion.js 标注 --stagger-i） */
@keyframes motion-item-in {
    from { opacity:0; transform:translateY(6px); }
    to   { opacity:1; transform:none; }
}
.motion-item { animation:motion-item-in .28s var(--ease-out) both; animation-delay:calc(var(--stagger-i, 0) * 40ms); }

/* 3) toast / 状态徽标弹入 */
@keyframes motion-pop-in {
    from { opacity:0; transform:translateY(6px) scale(.98); }
    to   { opacity:1; transform:none; }
}
.motion-pop { animation:motion-pop-in .26s var(--ease-out) both; }

/* 4) 模态/抽屉浮层基础过渡兜底（不动 agent- 前缀区域） */
.log-modal, .asset-manager-modal, .error-modal, .image-edit-modal, .output-lightbox {
    transition:opacity var(--motion-base) var(--ease-out);
}

/* 5) 尊重系统减弱动效设置 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
    .motion-enter { opacity:1; transform:none; }
}

/* ============================================================
   6) 移动端基础响应式（<768px）：导航折叠、抽屉全宽、工具栏换行
   ============================================================ */
@media (max-width: 767px) {
    /* 列表页：侧栏折叠为上部区域，顶栏可换行 */
    .workspace { flex-direction:column; }
    .ws-sidebar { flex:0 0 auto; width:100%; max-height:42vh; border-right:0; border-bottom:1px solid var(--line); }
    .ws-topbar { flex-wrap:wrap; gap:8px; }
    .ws-topbar-right { flex-wrap:wrap; }
    .ws-board-name { max-width:56vw; }

    /* 画布页：顶部浮岛工具栏可换行 */
    .topbar { left:12px; right:12px; top:12px; flex-wrap:wrap; }
    .canvas-nav { max-width:calc(100vw - 24px); }
    .toolbar .toolbar-items { flex-wrap:wrap; }

    /* 抽屉/侧面板全宽 */
    html .agent-drawer { width:100vw; max-width:100vw; }
    html .canvas-asset-panel { width:min(100vw, 100%); max-width:100vw; }
    html .workflow-transfer-panel { width:min(100vw, 100%); max-width:100vw; }

    /* 弹层留出安全边距 */
    .log-panel, .asset-manager-panel, .error-panel, .image-edit-panel { max-width:calc(100vw - 24px); }
}