html.studio-theme-dark,
html.studio-theme-dark body,
body.studio-theme-dark {
color-scheme: dark;
background: #08090c !important;
color: #e8e8ea !important;
}
body.studio-theme-dark {
--accent: #e8e8ea;
--bg: #08090c;
--bg-base: #08090c;
--card: #111216;
--text-main: #e8e8ea;
}
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: #08090c !important;
border-color: #25262b !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: #8f9aab;
}
html.studio-theme-dark body .nav-item:hover,
body.studio-theme-dark .nav-item:hover {
background: #111216 !important;
color: #e8e8ea !important;
}
html.studio-theme-dark body .nav-item.active,
body.studio-theme-dark .nav-item.active {
background: #d8dee9 !important;
color: #10141d !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: #d8dee9 !important;
}
html.studio-theme-dark body #logo-dot,
body.studio-theme-dark #logo-dot {
background: #d8dee9 !important;
}
html.studio-theme-dark body .nano-monitor,
body.studio-theme-dark .nano-monitor {
background: rgba(17,18,22,.88) !important;
color: #d8dee9;
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(216,222,233,.14) !important;
}
html.studio-theme-dark body .theme-dock-btn,
body.studio-theme-dark .theme-dock-btn {
background: #111216;
border-color: #25262b;
color: #9aa6b8;
}
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: #d8dee9;
border-color: #d8dee9;
color: #10141d;
}
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-\[\#fbfdff\],
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-\[\#fbfdff\] {
background-color: #111216 !important;
border-color: #25262b !important;
color: #e8e8ea !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: #0c0d10 !important;
border-color: #25262b !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: #e8e8ea !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: #657286 !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: #e8e8ea !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: #8f9aab !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-\[\#f1f5f9\],
html.studio-theme-dark body .border-\[\#eef2f7\],
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-\[\#f1f5f9\],
body.studio-theme-dark .border-\[\#eef2f7\] {
border-color: #2a3444 !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: #d8dee9 !important;
color: #10141d !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: #c8d0dc !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(15,20,29,.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: #566174 !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: #e5e9f0 !important;
caret-color: #d8dee9;
}
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: #111722 !important;
border-color: #2a3444 !important;
color: #9aa6b8 !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: #566174 !important;
color: #d8dee9 !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: #d8dee9 !important;
border-color: #d8dee9 !important;
color: #10141d !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: #2a3444 !important;
}
html.studio-theme-dark body .ios-switch input:checked + .ios-slider,
body.studio-theme-dark .ios-switch input:checked + .ios-slider {
background: #d8dee9 !important;
}
html.studio-theme-dark body .ios-slider:before,
body.studio-theme-dark .ios-slider:before {
background: #111722 !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,#0f141d 82%,rgba(15,20,29,0)) !important;
}
html.studio-theme-dark body .canvas-gate,
body.studio-theme-dark .canvas-gate {
background-color: #0f141d !important;
background-image: radial-gradient(rgba(148,163,184,.18) 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: #171d29 !important;
border-color: #2a3444 !important;
color: #e5e9f0 !important;
}
html.studio-theme-dark body .canvas-item:hover,
body.studio-theme-dark .canvas-item:hover {
background: #202838 !important;
}
html.studio-theme-dark body .canvas-item.active,
body.studio-theme-dark .canvas-item.active {
background: #263247 !important;
color: #e5e9f0 !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: #e5e9f0 !important;
}
html.studio-theme-dark body .canvas-card-time,
html.studio-theme-dark body .gate-subtitle,
body.studio-theme-dark .canvas-card-time {
color: #8f9aab !important;
}
body.studio-theme-dark .gate-subtitle {
color: #8f9aab !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: #111722 !important;
border-color: #2a3444 !important;
color: #d8dee9 !important;
}
html.studio-theme-dark body .gate-trash-badge,
body.studio-theme-dark .gate-trash-badge {
background: #d8dee9 !important;
color: #10141d !important;
border-color: #111722 !important;
}
html.studio-theme-dark body .secondary-btn.active,
body.studio-theme-dark .secondary-btn.active {
background: #d8dee9 !important;
border-color: #d8dee9 !important;
color: #10141d !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: #202838 !important;
border: 1px solid #2a3444;
}
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: #d8dee9 !important;
color: #10141d !important;
}
html.studio-theme-dark body .output-resolution,
body.studio-theme-dark .output-resolution {
background: rgba(17,23,34,.86) !important;
color: #d8dee9 !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: #0f141d !important;
background-image: radial-gradient(rgba(148,163,184,.18) 1px, transparent 1px) !important;
}
html.studio-theme-dark body .shell.theme-dark,
body.studio-theme-dark .shell.theme-dark {
--page: #0f141d;
--grid: rgba(148,163,184,.18);
--panel: rgba(17,23,34,.88);
--card: #171d29;
--card-solid: #171d29;
--soft: #111722;
--soft-2: #202838;
--line: rgba(148,163,184,.16);
--line-2: rgba(148,163,184,.22);
--text: #e5e9f0;
--muted: #9aa6b8;
--faint: #78869a;
--shadow: rgba(0,0,0,.2);
--strong: #d8dee9;
--strong-text: #10141d;
}
html.studio-theme-dark body .shell .panel,
body.studio-theme-dark .shell .panel {
background: rgba(17,23,34,.86) !important;
border: 1px solid rgba(148,163,184,.16) !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: #171d29 !important;
border-color: rgba(148,163,184,.16) !important;
box-shadow: 0 16px 42px rgba(0,0,0,.22) !important;
color: #e5e9f0 !important;
}
html.studio-theme-dark body .shell .node-head,
body.studio-theme-dark .shell .node-head {
background: #171d29 !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: #8f9aab !important;
}
html.studio-theme-dark body .shell .node.selected,
body.studio-theme-dark .shell .node.selected {
outline-color: rgba(216,222,233,.72) !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: #111722 !important;
border: 1px solid rgba(148,163,184,.16) !important;
box-shadow: none !important;
color: #9aa6b8 !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: #111722 !important;
border: 1px solid rgba(148,163,184,.16) !important;
box-shadow: none !important;
color: #d8dee9 !important;
}
html.studio-theme-dark body .shell .setting-title,
body.studio-theme-dark .shell .setting-title {
color: #8f9aab !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: #171d29 !important;
border-color: rgba(148,163,184,.16) !important;
color: #e5e9f0 !important;
box-shadow: none !important;
}
html.studio-theme-dark body .shell .gen-step-btn,
body.studio-theme-dark .shell .gen-step-btn {
color: #8f9aab !important;
}
html.studio-theme-dark body .shell .gen-step-btn:hover,
body.studio-theme-dark .shell .gen-step-btn:hover {
background: #202838 !important;
color: #e5e9f0 !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: #171d29 !important;
border-color: #566174 !important;
color: #e5e9f0 !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: #9aa6b8 !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: #d8dee9 !important;
border-color: #d8dee9 !important;
color: #10141d !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: #111722 !important;
border-color: #2a3444 !important;
color: #d8dee9 !important;
}
html.studio-theme-dark body .shell .llm-pane-resizer::before,
body.studio-theme-dark .shell .llm-pane-resizer::before {
background: #475569 !important;
}
html.studio-theme-dark body .shell .llm-bubble.assistant,
body.studio-theme-dark .shell .llm-bubble.assistant {
background: #202838 !important;
border-color: #2a3444 !important;
color: #e5e9f0 !important;
}
html.studio-theme-dark body .shell .llm-bubble.user,
body.studio-theme-dark .shell .llm-bubble.user {
background: #d8dee9 !important;
color: #10141d !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: #0f141d !important;
border-color: rgba(148,163,184,.16) !important;
}
html.studio-theme-dark body .shell .blank-image,
body.studio-theme-dark .shell .blank-image {
color: #8f9aab !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: #151b27 !important;
border-color: rgba(216,222,233,.42) !important;
color: #d8dee9 !important;
}
html.studio-theme-dark body .shell .image-caption,
body.studio-theme-dark .shell .image-caption {
color: #8f9aab !important;
}
html.studio-theme-dark body .shell .input-label,
body.studio-theme-dark .shell .input-label {
background: rgba(15,20,29,.78) !important;
color: #d8dee9 !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: #111722 !important;
border-color: rgba(148,163,184,.16) !important;
color: #c8d0dc !important;
}
html.studio-theme-dark body .shell .input-index,
body.studio-theme-dark .shell .input-index {
background: #d8dee9 !important;
color: #10141d !important;
}
html.studio-theme-dark body .shell .port::after,
body.studio-theme-dark .shell .port::after {
background: #d8dee9 !important;
border-color: #111722 !important;
box-shadow: 0 0 0 1px rgba(148,163,184,.32) !important;
}
html.studio-theme-dark body .shell .drop-overlay,
body.studio-theme-dark .shell .drop-overlay {
background: rgba(15,20,29,.44) !important;
color: #c8d0dc !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: #0f141d;
border: 1px solid rgba(148,163,184,.18);
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: #0f141d;
}
html.studio-theme-dark body .shell .resize-handle,
body.studio-theme-dark .shell .resize-handle {
background: rgba(17,23,34,.86) !important;
border-color: rgba(148,163,184,.18) !important;
color: #8f9aab !important;
}
html.studio-theme-dark body .shell .resize-handle:hover,
body.studio-theme-dark .shell .resize-handle:hover {
background: #171d29 !important;
border-color: rgba(216,222,233,.36) !important;
color: #d8dee9 !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: #e5e9f0 !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: #111722 !important;
border-color: rgba(148,163,184,.16) !important;
color: #e5e9f0 !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: #d8dee9 !important;
color: #10141d !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: #10141d !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: #8f9aab !important;
}
html.studio-theme-dark body .engine-btn:not(.active):hover,
body.studio-theme-dark .engine-btn:not(.active):hover {
background: rgba(216,222,233,.08) !important;
color: #e5e9f0 !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: #171d29 !important;
border-color: rgba(216,222,233,.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: #d8dee9 !important;
color: #10141d !important;
border-color: #d8dee9 !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: #f1f5f9 !important;
color: #0f141d !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: #2a3444 !important;
}
html.studio-theme-dark body input[type=range]::-webkit-slider-thumb,
body.studio-theme-dark input[type=range]::-webkit-slider-thumb {
background: #d8dee9 !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: #111722 !important;
}
html.studio-theme-dark body .bg-black,
body.studio-theme-dark .bg-black {
background-color: #d8dee9 !important;
color: #10141d !important;
}
html.studio-theme-dark body .hover\:text-black:hover,
body.studio-theme-dark .hover\:text-black:hover {
color: #e5e9f0 !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: #08090c !important;
color: #e8e8ea !important;
}
body.studio-theme-dark {
--bg: #08090c;
--bg-base: #08090c;
--page: #08090c;
--card: #111216;
--card-solid: #111216;
--soft: #0c0d10;
--soft-2: #16171b;
--panel: rgba(17,18,22,.92);
--text: #e8e8ea;
--text-main: #e8e8ea;
--accent: #e8e8ea;
--line: #25262b;
--line-2: #32343a;
}
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: #08090c !important;
border-color: #25262b !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-\[\#f8f8f9\],
html.studio-theme-dark body .bg-\[\#fafafa\],
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-\[\#f8f8f9\],
body.studio-theme-dark .bg-\[\#fafafa\] {
background-color: #111216 !important;
border-color: #25262b !important;
color: #e8e8ea !important;
}
html.studio-theme-dark body #lightbox,
body.studio-theme-dark #lightbox {
background: rgba(8,9,12,.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: #e8e8ea !important;
color: #08090c !important;
border-color: #e8e8ea !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: #e8e8ea !important;
}
html.studio-theme-dark body .mode-glider + .mode-btn.active,
body.studio-theme-dark .mode-glider + .mode-btn.active {
color: #08090c !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: #0c0d10 !important;
border-color: #32343a !important;
color: #e8e8ea !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: #25262b !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: #e8e8ea !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: #08090c !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: #0f141d !important;
color: #e5e9f0 !important;
}
body.studio-theme-dark {
--bg: #0f141d;
--bg-base: #0f141d;
--page: #0f141d;
--card: #171d29;
--card-solid: #171d29;
--soft: #111722;
--soft-2: #1d2533;
--panel: rgba(23,29,41,.92);
--text: #e5e9f0;
--text-main: #e5e9f0;
--accent: #e5e9f0;
--line: #2a3444;
--line-2: #334155;
}
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: #0f141d !important;
border-color: #2a3444 !important;
}
html.studio-theme-dark body .stage,
body.studio-theme-dark .stage {
background: #111722 !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-\[\#f8f8f9\],
html.studio-theme-dark body .bg-\[\#fafafa\],
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-\[\#f8f8f9\],
body.studio-theme-dark .bg-\[\#fafafa\] {
background-color: #171d29 !important;
border-color: #2a3444 !important;
color: #e5e9f0 !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: #111722 !important;
border-color: #334155 !important;
color: #e5e9f0 !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: #111722 !important;
border-color: #334155 !important;
color: #e5e9f0 !important;
}
html.studio-theme-dark body #lightbox,
body.studio-theme-dark #lightbox {
background: rgba(15,20,29,.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: #d8dee9 !important;
color: #10141d !important;
border-color: #d8dee9 !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: #8f9aab !important;
}
body.studio-theme-dark .provider-btn {
color: #8f9aab !important;
}
html.studio-theme-dark body .provider-switch button,
body.studio-theme-dark .provider-switch button {
color: #8f9aab !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(216,222,233,.08) !important;
color: #e5e9f0 !important;
}
html.studio-theme-dark body .provider-switch button:hover,
body.studio-theme-dark .provider-switch button:hover {
background: rgba(216,222,233,.08) !important;
color: #e5e9f0 !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: #10141d !important;
}
html.studio-theme-dark body .provider-switch button.active,
body.studio-theme-dark .provider-switch button.active {
background: #d8dee9 !important;
color: #10141d !important;
border-color: #d8dee9 !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: #111722 !important;
border: 1px solid #334155 !important;
box-shadow: none !important;
}
html.studio-theme-dark body .mode-glider,
body.studio-theme-dark .mode-glider {
background: #d8dee9 !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: #2a3444 !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: #8f9aab !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: #e5e9f0 !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: #2a3444 !important;
}
html.studio-theme-dark body input[type=range]::-webkit-slider-thumb,
body.studio-theme-dark input[type=range]::-webkit-slider-thumb {
background: #d8dee9 !important;
border-color: #0f141d !important;
}
html.studio-theme-dark body ::placeholder,
body.studio-theme-dark ::placeholder {
color: #64748b !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: #e5e9f0 !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: #6f7b8f !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: #0f141d !important;
}
html.studio-theme-dark body .topbar,
body.studio-theme-dark .topbar {
background: rgba(15,20,29,.9) !important;
border-bottom-color: #2a3444 !important;
}
html.studio-theme-dark body .composer-wrap,
body.studio-theme-dark .composer-wrap {
background: linear-gradient(to top,#0f141d 82%,rgba(15,20,29,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: #171d29 !important;
border-color: #2a3444 !important;
color: #e5e9f0 !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: #111722 !important;
border-color: #334155 !important;
}
html.studio-theme-dark body #messageInput,
body.studio-theme-dark #messageInput {
background: transparent !important;
border-color: transparent !important;
color: #e5e9f0 !important;
}
html.studio-theme-dark body #messageInput::placeholder,
body.studio-theme-dark #messageInput::placeholder {
color: #64748b !important;
}
html.studio-theme-dark body .title-block h1,
body.studio-theme-dark .title-block h1 {
color: #e5e9f0 !important;
}
html.studio-theme-dark body .title-block p,
body.studio-theme-dark .title-block p {
color: #8f9aab !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: #111722 !important;
border-color: #334155 !important;
color: #d8dee9 !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: #1d2533 !important;
color: #e5e9f0 !important;
}
html.studio-theme-dark body .thread-item.active,
body.studio-theme-dark .thread-item.active {
background: #1d2533 !important;
border-color: #435169 !important;
color: #f1f5f9 !important;
box-shadow: 0 12px 24px rgba(0,0,0,.22) !important;
}
html.studio-theme-dark body .bubble.user,
body.studio-theme-dark .bubble.user {
background: #2f3b52 !important;
color: #f1f5f9 !important;
border: 1px solid #435169 !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: #171d29 !important;
color: #e5e9f0 !important;
border-color: #2a3444 !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: #d8dee9 !important;
}
html.studio-theme-dark body .bubble img.generated,
body.studio-theme-dark .bubble img.generated {
border-color: #334155 !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 blue-gray panels. */
html.studio-theme-dark body .ios-switch .ios-slider,
body.studio-theme-dark .ios-switch .ios-slider {
background: #253044 !important;
border: 1px solid #46556c !important;
box-shadow: inset 0 1px 2px rgba(0,0,0,.28), 0 0 0 1px rgba(216,222,233,.05) !important;
}
html.studio-theme-dark body .ios-switch .ios-slider:before,
body.studio-theme-dark .ios-switch .ios-slider:before {
background: #f8fafc !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: #d8dee9 !important;
border-color: #d8dee9 !important;
box-shadow: 0 0 0 3px rgba(216,222,233,.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: #10141d !important;
box-shadow: 0 2px 7px rgba(16,20,29,.22) !important;
}
html.studio-theme-dark,
html.studio-theme-dark body,
body.studio-theme-dark {
scrollbar-width: none !important;
}
html.studio-theme-dark::-webkit-scrollbar,
html.studio-theme-dark body::-webkit-scrollbar,
body.studio-theme-dark::-webkit-scrollbar,
html.studio-theme-dark *::-webkit-scrollbar,
body.studio-theme-dark *::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
display: none !important;
}
/* Premium clean redesign layer. Keep existing markup and behavior; unify surface, rhythm, and motion. */
:root {
--studio-ink: #15171c;
--studio-muted: #6f7782;
--studio-faint: #a1a8b2;
--studio-page: #f5f6f7;
--studio-surface: rgba(255,255,255,.88);
--studio-surface-solid: #ffffff;
--studio-soft: #eef1f3;
--studio-line: rgba(21,23,28,.10);
--studio-line-strong: rgba(21,23,28,.18);
--studio-accent: #15171c;
--studio-accent-text: #ffffff;
--studio-danger: #b42332;
--studio-radius: 14px;
--studio-radius-sm: 10px;
--studio-shadow: 0 18px 54px rgba(21,23,28,.09);
--studio-shadow-soft: 0 8px 28px rgba(21,23,28,.06);
--studio-ease: cubic-bezier(.2,.8,.2,1);
}
html:not(.studio-theme-dark) body:not(.studio-theme-dark) {
background:
linear-gradient(180deg, rgba(255,255,255,.74), rgba(245,246,247,.94) 28%),
var(--studio-page) !important;
color: var(--studio-ink) !important;
}
body {
letter-spacing: 0 !important;
text-rendering: geometricPrecision;
}
.app-shell {
background:
linear-gradient(90deg, #ffffff 0, #ffffff 80px, var(--studio-page) 80px),
var(--studio-page) !important;
}
.sidebar {
width: 84px !important;
min-width: 84px !important;
background: rgba(255,255,255,.92) !important;
border-right: 1px solid var(--studio-line) !important;
box-shadow: 8px 0 36px rgba(21,23,28,.035);
}
.sidebar:hover {
width: 224px !important;
}
.logo-ring {
width: 38px !important;
height: 38px !important;
border-radius: 14px !important;
border-color: var(--studio-ink) !important;
}
.nav-item {
width: 48px !important;
height: 44px !important;
margin: 7px 0 !important;
border-radius: 12px !important;
color: var(--studio-muted) !important;
transition: width .36s var(--studio-ease), background .2s var(--studio-ease), color .2s var(--studio-ease), transform .2s var(--studio-ease) !important;
}
.sidebar:hover .nav-item {
width: 188px !important;
}
.nav-item:hover {
background: var(--studio-soft) !important;
color: var(--studio-ink) !important;
transform: translateX(2px);
}
.nav-item.active {
background: var(--studio-accent) !important;
color: var(--studio-accent-text) !important;
box-shadow: 0 10px 24px rgba(21,23,28,.18) !important;
}
.stage {
background: var(--studio-page) !important;
}
.nano-monitor {
border-radius: 12px !important;
background: rgba(255,255,255,.76) !important;
border: 1px solid rgba(21,23,28,.09) !important;
box-shadow: var(--studio-shadow-soft) !important;
}
.theme-toggle,
.theme-dock-btn {
border-radius: 12px !important;
background: rgba(255,255,255,.82) !important;
border-color: var(--studio-line) !important;
}
.container-box,
.page {
max-width: 1320px !important;
margin-top: 42px !important;
}
.container-box > header,
.page > header,
.head,
.topbar {
animation: studioRise .42s var(--studio-ease) both;
}
.page-title,
.title,
h1 {
color: var(--studio-ink) !important;
letter-spacing: -.035em !important;
}
.sub,
.label-nano,
.control-label,
.engine-label,
.setting-meta,
.text-gray-400,
.text-slate-400,
.text-gray-500,
.text-slate-500 {
color: var(--studio-muted) !important;
}
.console-card,
.nano-input,
.upload-item,
.result-frame,
.masonry-item,
.work-panel,
.setting-row,
.tool-panel,
.control-panel,
.engine-panel,
.block,
.api-row,
.card,
.panel,
.composer,
.composer-body,
.bubble.assistant,
.history-popover,
.thread-item,
.lightbox-card,
#lightboxCard,
.canvas-item,
.canvas-open,
.gate-panel,
.selection-hub,
.output-preview {
background: var(--studio-surface) !important;
border-color: var(--studio-line) !important;
box-shadow: var(--studio-shadow-soft) !important;
backdrop-filter: blur(18px) saturate(1.05);
}
.console-card,
.result-frame,
.composer,
.history-popover,
.lightbox-card,
#lightboxCard {
border-radius: 18px !important;
}
.nano-input,
.upload-item,
.masonry-item,
.work-panel,
.setting-row,
.tool-panel,
.control-panel,
.engine-panel,
.block,
.api-row,
.card,
.panel,
.composer-body,
.bubble,
.thread-item,
.canvas-item,
.gate-panel,
.selection-hub,
.output-preview {
border-radius: var(--studio-radius) !important;
}
.upload-item:hover,
.masonry-item:hover,
.card:hover,
.thread-item:hover,
.canvas-item:hover,
.console-card:focus-within,
.nano-input:focus,
.select-shell:focus-within,
input:focus,
textarea:focus,
select:focus {
border-color: var(--studio-line-strong) !important;
box-shadow: var(--studio-shadow) !important;
transform: translateY(-2px);
}
input,
textarea,
select,
.modal-field,
.size-select,
.size-custom,
.model-select,
.gate-name-input,
.canvas-card-title-input {
border-color: var(--studio-line) !important;
background: rgba(255,255,255,.86) !important;
color: var(--studio-ink) !important;
border-radius: var(--studio-radius-sm) !important;
}
input::placeholder,
textarea::placeholder {
color: var(--studio-faint) !important;
}
.glass-btn,
.btn:not(.secondary):not(.ghost):not(.danger),
.btn-action-dark,
.send-btn,
.gen-btn,
.comfy-run,
.llm-run,
.primary-btn,
.btn-render,
.bg-black,
.tab.active,
.folder-tab.active,
.model-option.active,
.mode-btn.active,
.mode-switch button.active,
.engine-btn.active,
.resolution-option.active,
.ratio-option.active,
.size-btn.active,
.mini-ratio button.active,
.secondary-btn.active,
.canvas-confirm-btn,
.create-confirm {
background: var(--studio-accent) !important;
border-color: var(--studio-accent) !important;
color: var(--studio-accent-text) !important;
box-shadow: 0 10px 28px rgba(21,23,28,.16) !important;
}
.btn.secondary,
.btn.ghost,
.ghost,
.action-btn,
.icon-btn,
.tab,
.folder-tab,
.secondary-btn,
.add-reference-btn,
.model-option,
.mode-btn,
.mode-switch button,
.engine-btn,
.resolution-option,
.ratio-option,
.size-btn,
.mini-ratio button,
.select,
.theme-toggle {
background: rgba(255,255,255,.80) !important;
border-color: var(--studio-line) !important;
color: var(--studio-muted) !important;
box-shadow: none !important;
}
.btn:hover,
.action-btn:hover,
.icon-btn:hover,
.tab:hover,
.secondary-btn:hover,
.add-reference-btn:hover,
.model-option:hover,
.mode-btn:hover,
.engine-btn:hover,
.resolution-option:hover,
.ratio-option:hover,
.size-btn:hover,
.mini-ratio button:hover {
border-color: var(--studio-line-strong) !important;
color: var(--studio-ink) !important;
transform: translateY(-1px);
}
.btn.danger,
.del:hover,
.icon-btn.del:hover,
.delete-btn:hover {
background: #fff1f2 !important;
border-color: rgba(180,35,50,.24) !important;
color: var(--studio-danger) !important;
}
.bubble.user {
background: var(--studio-accent) !important;
color: var(--studio-accent-text) !important;
box-shadow: 0 12px 32px rgba(21,23,28,.16) !important;
}
.composer-wrap {
background: linear-gradient(to top, var(--studio-page) 78%, rgba(245,246,247,0)) !important;
}
.shell,
.shell .board,
.canvas-gate {
background-color: var(--studio-page) !important;
background-image: radial-gradient(rgba(21,23,28,.12) 1px, transparent 1px) !important;
}
.node {
border-color: var(--studio-line) !important;
border-radius: var(--studio-radius) !important;
box-shadow: var(--studio-shadow-soft) !important;
}
.node:hover,
.node.selected {
box-shadow: var(--studio-shadow) !important;
}
.node-head {
border-radius: var(--studio-radius) var(--studio-radius) 0 0 !important;
}
.gallery-lightbox,
#lightbox {
background: rgba(245,246,247,.82) !important;
backdrop-filter: blur(24px) saturate(1.04);
}
#loginForm {
border-radius: 18px !important;
background: rgba(255,255,255,.08) !important;
border-color: rgba(255,255,255,.18) !important;
box-shadow: 0 30px 90px rgba(0,0,0,.38) !important;
}
html body.login-page,
html:not(.studio-theme-dark) body.login-page,
body.login-page {
background: #000 !important;
color: #fff !important;
}
#loginButton {
border-radius: 12px !important;
letter-spacing: .32em !important;
}
@keyframes studioRise {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: .001ms !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
}
html.studio-theme-dark,
html.studio-theme-dark body,
body.studio-theme-dark {
--studio-ink: #eef2f6;
--studio-muted: #9aa6b4;
--studio-faint: #717d8d;
--studio-page: #090b0f;
--studio-surface: rgba(18,20,25,.88);
--studio-surface-solid: #121419;
--studio-soft: #171a21;
--studio-line: rgba(238,242,246,.11);
--studio-line-strong: rgba(238,242,246,.20);
--studio-accent: #eef2f6;
--studio-accent-text: #101318;
--studio-shadow: 0 18px 54px rgba(0,0,0,.34);
--studio-shadow-soft: 0 8px 28px rgba(0,0,0,.24);
background: var(--studio-page) !important;
color: var(--studio-ink) !important;
}
html.studio-theme-dark body .app-shell,
body.studio-theme-dark .app-shell,
html.studio-theme-dark body .sidebar,
body.studio-theme-dark .sidebar,
html.studio-theme-dark body .stage,
body.studio-theme-dark .stage {
background: var(--studio-page) !important;
border-color: var(--studio-line) !important;
}
html.studio-theme-dark body .composer-wrap,
body.studio-theme-dark .composer-wrap {
background: linear-gradient(to top, var(--studio-page) 78%, rgba(9,11,15,0)) !important;
}
html.studio-theme-dark body .shell,
html.studio-theme-dark body .shell .board,
html.studio-theme-dark body .canvas-gate,
body.studio-theme-dark .shell,
body.studio-theme-dark .shell .board,
body.studio-theme-dark .canvas-gate {
background-color: var(--studio-page) !important;
background-image: radial-gradient(rgba(238,242,246,.12) 1px, transparent 1px) !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: rgba(13,15,20,.84) !important;
color: var(--studio-ink) !important;
border-color: var(--studio-line) !important;
}
html.studio-theme-dark body .btn.secondary,
html.studio-theme-dark body .btn.ghost,
html.studio-theme-dark body .ghost,
html.studio-theme-dark body .action-btn,
html.studio-theme-dark body .icon-btn,
html.studio-theme-dark body .tab,
html.studio-theme-dark body .folder-tab,
html.studio-theme-dark body .secondary-btn,
html.studio-theme-dark body .add-reference-btn,
body.studio-theme-dark .btn.secondary,
body.studio-theme-dark .btn.ghost,
body.studio-theme-dark .ghost,
body.studio-theme-dark .action-btn,
body.studio-theme-dark .icon-btn,
body.studio-theme-dark .tab,
body.studio-theme-dark .folder-tab,
body.studio-theme-dark .secondary-btn,
body.studio-theme-dark .add-reference-btn {
background: rgba(18,20,25,.82) !important;
border-color: var(--studio-line) !important;
color: var(--studio-muted) !important;
}
/* Major workbench redesign layer. */
:root {
--studio-canvas: #f3f4f2;
--studio-nav: #fbfbfa;
--studio-rail: #111316;
--studio-paper: rgba(255,255,255,.76);
--studio-panel: rgba(255,255,255,.92);
--studio-hairline: rgba(16,18,20,.12);
--studio-hairline-2: rgba(16,18,20,.20);
--studio-copy: #111316;
--studio-copy-2: #687078;
--studio-copy-3: #9ba2aa;
--studio-radius-xl: 24px;
--studio-radius-lg: 18px;
--studio-radius-md: 12px;
--studio-ambient-shadow: 0 32px 90px rgba(17,19,22,.12);
--studio-card-shadow: 0 18px 46px rgba(17,19,22,.08);
}
html:not(.studio-theme-dark) body:not(.studio-theme-dark):not(.login-page) {
background:
linear-gradient(135deg, rgba(255,255,255,.96) 0%, rgba(247,247,245,.88) 34%, rgba(232,235,235,.92) 100%),
var(--studio-canvas) !important;
}
.app-shell {
gap: 18px !important;
padding: 18px 18px 18px 0 !important;
background:
linear-gradient(135deg, #ffffff 0%, #f5f6f4 42%, #e9eceb 100%) !important;
}
.sidebar {
width: 248px !important;
min-width: 248px !important;
justify-content: flex-start !important;
align-items: stretch !important;
padding: 28px 18px !important;
background: var(--studio-nav) !important;
border-right: 1px solid var(--studio-hairline) !important;
box-shadow: 18px 0 50px rgba(17,19,22,.05) !important;
}
.sidebar:hover {
width: 248px !important;
}
.sidebar::before {
content: "Infinite Canvas";
display: block;
margin: 0 12px 28px;
color: var(--studio-copy);
font-size: 15px;
line-height: 1;
font-weight: 850;
letter-spacing: -.02em;
}
.sidebar nav {
justify-content: flex-start !important;
align-items: stretch !important;
gap: 4px;
}
.nav-item,
.sidebar:hover .nav-item {
width: 100% !important;
height: 46px !important;
margin: 0 !important;
padding-left: 14px !important;
border-radius: 13px !important;
color: var(--studio-copy-2) !important;
}
.nav-item svg {
width: 18px !important;
height: 18px !important;
}
.nav-text,
.sidebar:hover .nav-text {
opacity: 1 !important;
margin-left: 13px !important;
color: currentColor !important;
font-size: 13px !important;
font-weight: 760 !important;
letter-spacing: -.01em !important;
transition-delay: 0s !important;
}
.nav-item:hover {
background: rgba(17,19,22,.06) !important;
transform: translateX(4px) !important;
}
.nav-item.active {
background: var(--studio-rail) !important;
color: #fff !important;
box-shadow: 0 16px 36px rgba(17,19,22,.20) !important;
}
.theme-dock {
position: static !important;
margin-top: auto !important;
justify-content: flex-start !important;
padding: 12px;
}
.theme-toggle {
width: 44px !important;
height: 44px !important;
border-radius: 13px !important;
}
.stage {
margin: 0 !important;
border: 1px solid rgba(17,19,22,.10) !important;
border-radius: 28px !important;
overflow: hidden !important;
background: rgba(255,255,255,.60) !important;
box-shadow: var(--studio-ambient-shadow) !important;
}
iframe {
border-radius: 28px !important;
}
.nano-monitor {
left: 22px !important;
bottom: 22px !important;
border-radius: 999px !important;
padding: 7px 13px !important;
}
.container-box,
.page {
max-width: none !important;
width: 100% !important;
margin: 0 !important;
padding: 34px 38px 72px !important;
}
.container-box > header,
.page > header,
.head {
max-width: 1460px;
margin-left: auto !important;
margin-right: auto !important;
margin-bottom: 24px !important;
padding: 0 4px !important;
}
.container-box > header h1,
.page-title,
.title,
.title-block h1 {
font-size: clamp(24px, 3vw, 42px) !important;
line-height: .96 !important;
letter-spacing: -.055em !important;
font-weight: 900 !important;
}
.container-box > header p,
.sub,
.title-block p {
margin-top: 8px !important;
max-width: 760px;
color: var(--studio-copy-2) !important;
letter-spacing: .24em !important;
}
.container-box > main.grid,
.page > .layout,
.page > .toolbar + .grid,
.page > .toolbar + section.grid,
.page > #grid {
max-width: 1460px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.container-box > main.grid {
align-items: stretch !important;
gap: 18px !important;
}
.container-box > main.grid > div:first-child,
.container-box > main.grid > section:first-child,
.page > .layout > aside,
.page > .layout > .side {
background: rgba(255,255,255,.78) !important;
border: 1px solid var(--studio-hairline) !important;
border-radius: var(--studio-radius-xl) !important;
padding: 22px !important;
box-shadow: var(--studio-card-shadow) !important;
backdrop-filter: blur(18px) saturate(1.05);
}
.container-box > main.grid > div:first-child > section,
.container-box > main.grid > section:first-child > section {
padding: 0 !important;
}
.result-frame,
#resultBox,
.output-preview {
min-height: min(72vh, 780px) !important;
border-radius: var(--studio-radius-xl) !important;
background:
linear-gradient(180deg, rgba(255,255,255,.88), rgba(246,247,246,.72)),
var(--studio-panel) !important;
border: 1px solid var(--studio-hairline) !important;
box-shadow: var(--studio-ambient-shadow) !important;
}
.upload-item,
.nano-input,
.engine-panel,
.tool-panel,
.control-panel,
.model-pill,
.mode-switch,
.engine-switch,
.reference-grid > *,
.console-card,
.block,
.api-row,
.panel,
.composer,
.composer-body,
.history-popover,
.thread-item,
.prompt-card,
.card,
.canvas-item,
.gate-panel {
border-radius: var(--studio-radius-lg) !important;
border-color: var(--studio-hairline) !important;
}
.nano-input,
textarea.nano-input,
#promptInput,
#prompt,
#messageInput,
.prompt-edit,
.prompt-inline-edit {
background: rgba(255,255,255,.86) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.85) !important;
}
.glass-btn,
.btn-render,
.btn:not(.secondary):not(.ghost):not(.danger),
.send-btn,
.primary-btn {
min-height: 44px;
border-radius: 14px !important;
background: #111316 !important;
color: #fff !important;
letter-spacing: .16em !important;
box-shadow: 0 18px 36px rgba(17,19,22,.22) !important;
}
.glass-btn:hover,
.btn-render:hover,
.btn:not(.secondary):not(.ghost):not(.danger):hover,
.send-btn:hover,
.primary-btn:hover {
background: #000 !important;
transform: translateY(-2px) scale(1.01) !important;
box-shadow: 0 26px 52px rgba(17,19,22,.26) !important;
}
.btn.secondary,
.btn.ghost,
.action-btn,
.icon-btn,
.tab,
.secondary-btn,
.add-reference-btn,
.select,
.model-option,
.mode-btn,
.mode-switch button,
.engine-btn,
.resolution-option,
.ratio-option,
.size-btn,
.mini-ratio button {
min-height: 34px;
border-radius: 999px !important;
background: rgba(255,255,255,.66) !important;
border: 1px solid var(--studio-hairline) !important;
color: var(--studio-copy-2) !important;
}
.model-option.active,
.mode-btn.active,
.mode-switch button.active,
.engine-btn.active,
.resolution-option.active,
.ratio-option.active,
.size-btn.active,
.mini-ratio button.active,
.tab.active {
background: #111316 !important;
color: #fff !important;
border-color: #111316 !important;
}
.masonry-grid {
column-gap: 18px !important;
}
.masonry-item,
.card,
.prompt-card,
.thread-item,
.canvas-item {
transition: transform .28s var(--studio-ease), box-shadow .28s var(--studio-ease), border-color .28s var(--studio-ease), background .28s var(--studio-ease) !important;
}
.masonry-item:hover,
.card:hover,
.prompt-card:hover,
.thread-item:hover,
.canvas-item:hover {
transform: translateY(-6px) !important;
box-shadow: 0 28px 70px rgba(17,19,22,.14) !important;
}
.chat-shell {
background:
radial-gradient(circle at 50% 0%, rgba(255,255,255,.9), transparent 42%),
var(--studio-canvas) !important;
}
.topbar {
height: 78px !important;
background: rgba(255,255,255,.68) !important;
border-bottom: 1px solid var(--studio-hairline) !important;
backdrop-filter: blur(18px) saturate(1.05) !important;
}
.messages {
padding-top: 42px !important;
background-image: linear-gradient(rgba(17,19,22,.035) 1px, transparent 1px) !important;
background-size: 100% 44px !important;
}
.bubble {
border-radius: 18px !important;
box-shadow: var(--studio-card-shadow) !important;
}
.composer-wrap {
padding-bottom: 26px !important;
}
.composer {
border-radius: 24px !important;
box-shadow: 0 24px 72px rgba(17,19,22,.14) !important;
}
.page > .toolbar {
max-width: 1460px !important;
margin: 0 auto 22px !important;
padding: 14px !important;
background: rgba(255,255,255,.72) !important;
border: 1px solid var(--studio-hairline) !important;
border-radius: 22px !important;
box-shadow: var(--studio-card-shadow) !important;
}
.asset-library .grid,
#grid.grid,
.grid {
gap: 18px !important;
}
.thumb {
background: #e7eae9 !important;
}
.shell,
.shell .board,
.canvas-gate {
background-color: #eef0ef !important;
background-image:
linear-gradient(rgba(17,19,22,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(17,19,22,.04) 1px, transparent 1px) !important;
background-size: 42px 42px !important;
}
.shell .panel,
.node {
border-radius: 18px !important;
box-shadow: 0 20px 62px rgba(17,19,22,.13) !important;
}
.toolbar.panel {
border-radius: 18px !important;
}
.toolbar .tool-btn {
border-radius: 12px !important;
}
.login-page {
background: #000 !important;
}
#loginForm {
width: 340px !important;
padding: 38px !important;
border-radius: 22px !important;
background: rgba(12,13,15,.58) !important;
border: 1px solid rgba(255,255,255,.16) !important;
box-shadow: 0 40px 110px rgba(0,0,0,.55) !important;
}
@media (max-width: 920px) {
.app-shell {
padding: 0 !important;
gap: 0 !important;
}
.sidebar {
width: 72px !important;
min-width: 72px !important;
padding: 14px 10px !important;
}
.sidebar::before,
.nav-text {
display: none !important;
}
.stage,
iframe {
border-radius: 0 !important;
}
.container-box,
.page {
padding: 24px 18px 58px !important;
}
.container-box > main.grid > div:first-child,
.container-box > main.grid > section:first-child,
.page > .layout > aside,
.page > .layout > .side {
padding: 16px !important;
}
}
html.studio-theme-dark,
html.studio-theme-dark body,
body.studio-theme-dark {
--studio-canvas: #090b0e;
--studio-nav: #0d0f13;
--studio-rail: #eef2f6;
--studio-paper: rgba(18,20,25,.76);
--studio-panel: rgba(18,20,25,.92);
--studio-hairline: rgba(238,242,246,.12);
--studio-hairline-2: rgba(238,242,246,.22);
--studio-copy: #eef2f6;
--studio-copy-2: #9ba6b5;
--studio-copy-3: #6f7a89;
}
html.studio-theme-dark body .app-shell,
body.studio-theme-dark .app-shell {
background: linear-gradient(135deg, #07080b 0%, #0d1015 52%, #11151b 100%) !important;
}
html.studio-theme-dark body .sidebar,
body.studio-theme-dark .sidebar {
background: var(--studio-nav) !important;
}
html.studio-theme-dark body .stage,
body.studio-theme-dark .stage {
background: rgba(12,14,18,.74) !important;
box-shadow: 0 32px 90px rgba(0,0,0,.38) !important;
}
html.studio-theme-dark body .nav-item.active,
body.studio-theme-dark .nav-item.active,
html.studio-theme-dark body .glass-btn,
body.studio-theme-dark .glass-btn,
html.studio-theme-dark body .btn:not(.secondary):not(.ghost):not(.danger),
body.studio-theme-dark .btn:not(.secondary):not(.ghost):not(.danger),
html.studio-theme-dark body .send-btn,
body.studio-theme-dark .send-btn {
background: #eef2f6 !important;
color: #101318 !important;
border-color: #eef2f6 !important;
}
html.studio-theme-dark body .container-box > main.grid > div:first-child,
html.studio-theme-dark body .container-box > main.grid > section:first-child,
html.studio-theme-dark body .page > .layout > aside,
html.studio-theme-dark body .page > .layout > .side,
body.studio-theme-dark .container-box > main.grid > div:first-child,
body.studio-theme-dark .container-box > main.grid > section:first-child,
body.studio-theme-dark .page > .layout > aside,
body.studio-theme-dark .page > .layout > .side {
background: rgba(18,20,25,.78) !important;
}
html.studio-theme-dark body .result-frame,
body.studio-theme-dark .result-frame,
html.studio-theme-dark body #resultBox,
body.studio-theme-dark #resultBox {
background: linear-gradient(180deg, rgba(18,20,25,.92), rgba(12,14,18,.82)) !important;
}
/* Responsive layout: rail on wide screens, top navigation on tablets, icon bar on phones. */
@media (min-width: 1181px) {
.container-box > main.grid > div:first-child,
.container-box > main.grid > section:first-child {
position: sticky;
top: 34px;
align-self: start;
max-height: calc(100dvh - 68px);
overflow: auto;
}
.container-box > main.grid > div[id*="result"],
#resultColumn {
min-width: 0;
}
}
@media (max-width: 1180px) {
.app-shell {
flex-direction: column !important;
gap: 12px !important;
padding: 12px !important;
min-height: 100dvh !important;
height: 100dvh !important;
}
.sidebar,
.sidebar:hover {
width: 100% !important;
min-width: 0 !important;
height: 78px !important;
min-height: 78px !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
padding: 10px 12px !important;
border-right: 0 !important;
border-bottom: 1px solid var(--studio-hairline) !important;
border-radius: 22px !important;
box-shadow: 0 18px 48px rgba(17,19,22,.08) !important;
overflow: hidden !important;
}
.sidebar::before {
flex: 0 0 auto;
margin: 0 14px 0 6px !important;
white-space: nowrap;
}
.sidebar nav {
flex: 1 1 auto !important;
min-width: 0 !important;
height: 100% !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 6px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
padding: 0 4px !important;
}
.nav-item,
.sidebar:hover .nav-item {
width: auto !important;
min-width: max-content !important;
height: 46px !important;
padding: 0 14px !important;
margin: 0 !important;
}
.nav-text,
.sidebar:hover .nav-text {
display: inline !important;
opacity: 1 !important;
}
.theme-dock {
flex: 0 0 auto !important;
margin: 0 0 0 8px !important;
padding: 0 !important;
}
.stage {
flex: 1 1 auto !important;
min-height: 0 !important;
height: calc(100dvh - 102px) !important;
border-radius: 22px !important;
}
iframe {
border-radius: 22px !important;
}
.nano-monitor {
left: 18px !important;
bottom: 18px !important;
}
.container-box,
.page {
padding: 28px 24px 64px !important;
}
.container-box > header,
.page > header,
.head {
margin-bottom: 20px !important;
}
.container-box > main.grid {
display: grid !important;
grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr) !important;
gap: 16px !important;
}
.container-box > main.grid > div,
.container-box > main.grid > section {
grid-column: auto !important;
}
.result-frame,
#resultBox {
min-height: 520px !important;
}
.page > .layout {
display: grid !important;
grid-template-columns: minmax(220px, .42fr) minmax(0, 1fr) !important;
gap: 14px !important;
}
}
@media (max-width: 820px) {
.app-shell {
gap: 0 !important;
padding: 0 !important;
}
.sidebar,
.sidebar:hover {
height: 64px !important;
min-height: 64px !important;
border-radius: 0 !important;
padding: 8px 10px !important;
position: relative !important;
z-index: 60 !important;
}
.sidebar::before {
display: none !important;
}
.sidebar nav {
gap: 4px !important;
padding: 0 !important;
}
.nav-item,
.sidebar:hover .nav-item {
width: 46px !important;
min-width: 46px !important;
height: 46px !important;
justify-content: center !important;
padding: 0 !important;
}
.nav-text,
.sidebar:hover .nav-text {
display: none !important;
}
.theme-dock {
margin-left: 6px !important;
}
.theme-toggle {
width: 46px !important;
height: 46px !important;
}
.stage,
iframe {
height: calc(100dvh - 64px) !important;
border-radius: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
border-bottom: 0 !important;
}
.nano-monitor {
left: 12px !important;
bottom: 12px !important;
max-width: calc(100vw - 24px);
}
.container-box,
.page {
padding: 20px 14px 48px !important;
}
.container-box > header,
.page > header,
.head {
align-items: flex-start !important;
gap: 14px !important;
margin-bottom: 16px !important;
}
.container-box > header h1,
.page-title,
.title,
.title-block h1 {
font-size: clamp(24px, 9vw, 34px) !important;
line-height: 1 !important;
}
.container-box > header p,
.sub,
.title-block p {
letter-spacing: .12em !important;
line-height: 1.5 !important;
}
.container-box > main.grid,
.page > .layout {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 14px !important;
}
.container-box > main.grid > div,
.container-box > main.grid > section,
.page > .layout > * {
grid-column: 1 / -1 !important;
width: 100% !important;
min-width: 0 !important;
}
.container-box > main.grid > div:first-child,
.container-box > main.grid > section:first-child,
.page > .layout > aside,
.page > .layout > .side {
padding: 16px !important;
border-radius: 18px !important;
}
.result-frame,
#resultBox {
min-height: min(62dvh, 520px) !important;
border-radius: 18px !important;
}
.page > .toolbar {
align-items: stretch !important;
border-radius: 18px !important;
}
.head-actions,
.bulk-actions,
.actions,
.top-actions,
.toolbar,
.tabs {
width: 100%;
align-items: stretch !important;
}
.head-actions .btn,
.bulk-actions .btn,
.actions .btn,
.select {
flex: 1 1 auto;
justify-content: center;
}
.grid,
#grid.grid {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
}
.messages {
padding: 22px 14px 340px !important;
}
.composer-wrap {
padding: 14px !important;
}
.composer {
min-height: 280px !important;
border-radius: 20px !important;
}
}
@media (max-width: 520px) {
.result-frame,
#resultBox {
min-height: 420px !important;
}
.reference-grid,
.size-row,
.size-row.three {
grid-template-columns: 1fr !important;
}
.model-pill,
.engine-switch,
.mode-switch,
.provider-switch {
grid-template-columns: 1fr !important;
border-radius: 18px !important;
}
.model-option,
.engine-btn,
.mode-switch button,
.provider-switch button {
width: 100% !important;
border-radius: 14px !important;
}
.bubble {
max-width: 92% !important;
}
#loginForm {
width: min(340px, calc(100vw - 32px)) !important;
padding: 28px !important;
}
}
/* 2026-06-16 Atelier redesign: stronger product chrome, responsive editor layouts. */
:root {
--atelier-bg: #0b0d10;
--atelier-rail: #11151c;
--atelier-rail-2: #171c24;
--atelier-page: #eef1f4;
--atelier-page-2: #f8f9fa;
--atelier-surface: rgba(255,255,255,.90);
--atelier-solid: #ffffff;
--atelier-ink: #14171d;
--atelier-muted: #66717f;
--atelier-faint: #9aa4b1;
--atelier-line: rgba(20,23,29,.11);
--atelier-line-strong: rgba(20,23,29,.20);
--atelier-blue: #3157ff;
--atelier-radius-xl: 24px;
--atelier-radius-lg: 18px;
--atelier-radius-md: 12px;
--atelier-shadow: 0 22px 70px rgba(13,16,20,.14);
--atelier-soft-shadow: 0 12px 34px rgba(13,16,20,.08);
--atelier-ease: cubic-bezier(.19,1,.22,1);
}
html:not(.studio-theme-dark) body:not(.login-page),
body:not(.login-page) {
background: var(--atelier-page) !important;
color: var(--atelier-ink) !important;
font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif !important;
}
.app-shell {
height: 100dvh !important;
padding: 10px !important;
gap: 10px !important;
background:
radial-gradient(circle at 18% 10%, rgba(49,87,255,.18), transparent 25%),
linear-gradient(135deg, #080a0d 0%, #11161d 54%, #171c23 100%) !important;
}
.sidebar,
.sidebar:hover {
width: 248px !important;
min-width: 248px !important;
height: auto !important;
padding: 16px !important;
align-items: stretch !important;
justify-content: flex-start !important;
background:
linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)),
var(--atelier-rail) !important;
border: 1px solid rgba(255,255,255,.09) !important;
border-radius: 22px !important;
box-shadow: 0 24px 78px rgba(0,0,0,.32) !important;
}
.sidebar::before {
content: "Infinite Canvas";
margin: 0 0 4px !important;
padding: 16px 14px 4px !important;
color: #f6f8fb !important;
font-size: 18px !important;
line-height: 1.05 !important;
font-weight: 850 !important;
letter-spacing: -.045em !important;
}
.sidebar::after {
content: "IMAGE WORKSPACE";
display: block;
order: -1;
margin: 0 14px 6px;
color: rgba(245,247,250,.42);
font-size: 10px;
font-weight: 800;
letter-spacing: .22em;
}
.sidebar nav {
flex: 1 1 auto !important;
justify-content: flex-start !important;
align-items: stretch !important;
gap: 6px !important;
padding-top: 18px !important;
overflow-y: auto !important;
}
.nav-item,
.sidebar:hover .nav-item {
width: 100% !important;
min-width: 0 !important;
height: 46px !important;
margin: 0 !important;
padding: 0 14px !important;
justify-content: flex-start !important;
border-radius: 14px !important;
color: rgba(245,247,250,.64) !important;
background: transparent !important;
transition: background .24s var(--atelier-ease), color .24s var(--atelier-ease), transform .24s var(--atelier-ease), box-shadow .24s var(--atelier-ease) !important;
}
.nav-item svg {
width: 19px !important;
height: 19px !important;
opacity: .92;
}
.nav-text,
.sidebar:hover .nav-text {
display: inline !important;
opacity: 1 !important;
margin-left: 13px !important;
font-size: 13px !important;
font-weight: 760 !important;
letter-spacing: -.01em !important;
}
.nav-item:hover {
color: #fff !important;
background: rgba(255,255,255,.075) !important;
transform: translateX(2px) !important;
}
.nav-item.active {
color: #fff !important;
background:
linear-gradient(135deg, rgba(49,87,255,.94), rgba(74,101,224,.76)) !important;
box-shadow: 0 14px 30px rgba(49,87,255,.24), inset 0 1px 0 rgba(255,255,255,.20) !important;
}
.theme-dock {
position: static !important;
width: auto !important;
justify-content: flex-start !important;
margin-top: 16px !important;
padding: 0 !important;
}
.theme-toggle {
width: 48px !important;
height: 48px !important;
border-radius: 14px !important;
border-color: rgba(255,255,255,.10) !important;
background: rgba(255,255,255,.045) !important;
color: rgba(255,255,255,.70) !important;
}
.stage {
min-width: 0 !important;
border-radius: 24px !important;
border: 1px solid rgba(255,255,255,.10) !important;
background: #e9ecef !important;
box-shadow: 0 28px 100px rgba(0,0,0,.38) !important;
overflow: hidden !important;
}
iframe,
iframe.active {
border-radius: 24px !important;
}
.nano-monitor {
left: 22px !important;
bottom: 22px !important;
padding: 8px 12px !important;
border-radius: 999px !important;
background: rgba(12,14,18,.78) !important;
color: rgba(255,255,255,.88) !important;
border: 1px solid rgba(255,255,255,.10) !important;
box-shadow: 0 16px 40px rgba(0,0,0,.22) !important;
}
.nano-monitor .stat-group {
color: rgba(255,255,255,.88) !important;
}
.container-box,
.page {
width: 100% !important;
max-width: none !important;
min-height: 100dvh !important;
margin: 0 !important;
padding: 30px clamp(20px, 2.8vw, 42px) 76px !important;
background:
linear-gradient(180deg, rgba(255,255,255,.76), rgba(238,241,244,.82)),
var(--atelier-page) !important;
}
.container-box > header,
.page > header,
.head {
width: min(100%, 1520px) !important;
margin: 0 auto 20px !important;
padding: 0 !important;
align-items: flex-end !important;
}
.container-box > header h1,
.page-title,
.title,
.title-block h1 {
color: var(--atelier-ink) !important;
font-size: clamp(28px, 4vw, 52px) !important;
line-height: .92 !important;
letter-spacing: -.065em !important;
font-weight: 900 !important;
}
.container-box > header p,
.sub,
.title-block p {
margin-top: 10px !important;
color: var(--atelier-muted) !important;
font-size: 10px !important;
letter-spacing: .18em !important;
}
.container-box > main.grid {
width: min(100%, 1520px) !important;
margin: 0 auto !important;
display: grid !important;
grid-template-columns: minmax(320px, 410px) minmax(0, 1fr) !important;
gap: 18px !important;
align-items: start !important;
}
.container-box > main.grid > * {
grid-column: auto !important;
min-width: 0 !important;
}
.container-box > main.grid > :first-child,
.page > .layout > aside,
.page > .layout > .side {
position: sticky !important;
top: 28px !important;
max-height: calc(100dvh - 56px) !important;
overflow: auto !important;
padding: 20px !important;
border-radius: var(--atelier-radius-xl) !important;
background:
linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.82)) !important;
border: 1px solid rgba(255,255,255,.72) !important;
box-shadow: var(--atelier-soft-shadow) !important;
backdrop-filter: blur(18px) saturate(1.05) !important;
}
#resultColumn,
.container-box > main.grid > :last-child {
min-width: 0 !important;
}
.result-frame,
#resultBox {
min-height: min(74dvh, 790px) !important;
border-radius: 26px !important;
background:
linear-gradient(180deg, rgba(17,20,25,.92), rgba(29,34,42,.90)),
#171b21 !important;
border: 1px solid rgba(255,255,255,.16) !important;
box-shadow: var(--atelier-shadow) !important;
color: rgba(255,255,255,.82) !important;
}
.result-frame::before,
#resultBox::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
background-size: 36px 36px;
mask-image: linear-gradient(180deg, rgba(0,0,0,.7), transparent 72%);
}
.nano-input,
.upload-item,
.engine-panel,
.tool-panel,
.control-panel,
.console-card,
.block,
.api-row,
.composer,
.composer-body,
.history-popover,
.thread-item,
.prompt-card,
.card,
.panel,
.gate-panel,
.canvas-item,
.work-panel,
.setting-row {
background: var(--atelier-surface) !important;
border: 1px solid var(--atelier-line) !important;
border-radius: var(--atelier-radius-lg) !important;
box-shadow: none !important;
backdrop-filter: blur(14px) saturate(1.04) !important;
}
.upload-item {
background:
linear-gradient(135deg, rgba(255,255,255,.92), rgba(247,248,250,.78)) !important;
border-style: dashed !important;
}
input,
textarea,
select,
.modal-field,
.size-select,
.size-custom,
.model-select,
.gate-name-input,
.canvas-card-title-input {
background: rgba(255,255,255,.78) !important;
border: 1px solid var(--atelier-line) !important;
border-radius: var(--atelier-radius-md) !important;
color: var(--atelier-ink) !important;
}
input::placeholder,
textarea::placeholder {
color: #8a95a3 !important;
opacity: 1 !important;
}
input:focus,
textarea:focus,
select:focus,
.nano-input:focus,
.console-card:focus-within {
border-color: rgba(49,87,255,.48) !important;
box-shadow: 0 0 0 4px rgba(49,87,255,.10) !important;
}
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
outline: 3px solid rgba(49,87,255,.34) !important;
outline-offset: 2px !important;
}
.glass-btn,
.btn-render,
.btn:not(.secondary):not(.ghost):not(.danger),
.send-btn,
.gen-btn,
.primary-btn,
.btn-action-dark {
min-height: 46px !important;
border-radius: var(--atelier-radius-md) !important;
background:
linear-gradient(135deg, #1f3cff, var(--atelier-blue)) !important;
color: #fff !important;
border: 0 !important;
box-shadow: 0 14px 30px rgba(49,87,255,.24) !important;
letter-spacing: .12em !important;
transition: transform .22s var(--atelier-ease), box-shadow .22s var(--atelier-ease), filter .22s var(--atelier-ease) !important;
}
.glass-btn:hover,
.btn-render:hover,
.btn:not(.secondary):not(.ghost):not(.danger):hover,
.send-btn:hover,
.gen-btn:hover,
.primary-btn:hover,
.btn-action-dark:hover {
transform: translateY(-1px) !important;
filter: saturate(1.08) brightness(1.02);
box-shadow: 0 20px 46px rgba(49,87,255,.30) !important;
}
.btn.secondary,
.btn.ghost,
.action-btn,
.icon-btn,
.tab,
.secondary-btn,
.add-reference-btn,
.model-option,
.mode-btn,
.mode-switch button,
.engine-btn,
.resolution-option,
.ratio-option,
.size-btn,
.mini-ratio button,
.select {
border-radius: 999px !important;
background: rgba(255,255,255,.68) !important;
border: 1px solid var(--atelier-line) !important;
color: var(--atelier-muted) !important;
box-shadow: none !important;
}
.model-option.active,
.mode-btn.active,
.mode-switch button.active,
.engine-btn.active,
.resolution-option.active,
.ratio-option.active,
.size-btn.active,
.mini-ratio button.active,
.tab.active,
.folder-tab.active {
background: #151a22 !important;
border-color: #151a22 !important;
color: #fff !important;
box-shadow: 0 8px 20px rgba(13,16,20,.16) !important;
}
.masonry-grid,
#grid.grid,
.grid {
gap: 18px !important;
}
.masonry-item,
.card,
.prompt-card,
.thread-item {
overflow: hidden !important;
transition: transform .28s var(--atelier-ease), box-shadow .28s var(--atelier-ease), border-color .28s var(--atelier-ease) !important;
}
.masonry-item:hover,
.card:hover,
.prompt-card:hover,
.thread-item:hover,
.upload-item:hover {
transform: translateY(-3px) !important;
border-color: var(--atelier-line-strong) !important;
box-shadow: 0 20px 50px rgba(13,16,20,.12) !important;
}
.chat-shell {
background:
linear-gradient(180deg, #f6f7f8, #eceff2) !important;
}
.topbar {
height: 76px !important;
background: rgba(246,247,248,.86) !important;
border-bottom: 1px solid var(--atelier-line) !important;
backdrop-filter: blur(18px) saturate(1.05) !important;
}
.messages {
background:
linear-gradient(rgba(18,20,24,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(18,20,24,.025) 1px, transparent 1px) !important;
background-size: 42px 42px !important;
}
.bubble.user {
background: linear-gradient(135deg, #1f3cff, var(--atelier-blue)) !important;
}
.composer {
border-radius: 26px !important;
box-shadow: 0 24px 80px rgba(13,16,20,.18) !important;
}
.page > .layout {
width: min(100%, 1520px) !important;
margin: 0 auto !important;
display: grid !important;
grid-template-columns: minmax(260px, 340px) minmax(0, 1fr) minmax(300px, .72fr) !important;
gap: 18px !important;
}
.page > .toolbar {
width: min(100%, 1520px) !important;
margin: 0 auto 18px !important;
padding: 14px !important;
border-radius: 24px !important;
background: rgba(255,255,255,.72) !important;
border: 1px solid rgba(255,255,255,.70) !important;
box-shadow: var(--atelier-soft-shadow) !important;
}
.shell,
.shell .board,
.canvas-gate {
background-color: #111419 !important;
background-image:
linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) !important;
background-size: 42px 42px !important;
}
.shell .panel,
.node {
background: rgba(247,248,250,.94) !important;
border: 1px solid rgba(255,255,255,.70) !important;
border-radius: 20px !important;
box-shadow: 0 22px 70px rgba(0,0,0,.24) !important;
}
.toolbar.panel {
background: rgba(18,20,24,.84) !important;
border-color: rgba(255,255,255,.12) !important;
backdrop-filter: blur(20px) !important;
}
.toolbar .tool-btn {
color: rgba(255,255,255,.68) !important;
}
.toolbar .tool-btn:hover,
.toolbar .tool-btn:focus-visible {
background: var(--atelier-blue) !important;
color: #fff !important;
}
.login-page {
background: #050607 !important;
}
#loginForm {
border-radius: 28px !important;
background: rgba(17,20,25,.62) !important;
border: 1px solid rgba(255,255,255,.14) !important;
box-shadow: 0 50px 140px rgba(0,0,0,.58) !important;
}
html.studio-theme-dark,
html.studio-theme-dark body,
body.studio-theme-dark {
--atelier-page: #0e1116;
--atelier-page-2: #151920;
--atelier-surface: rgba(22,26,33,.88);
--atelier-solid: #171b22;
--atelier-ink: #f4f7fa;
--atelier-muted: #9aa5b3;
--atelier-faint: #717d8c;
--atelier-line: rgba(255,255,255,.11);
--atelier-line-strong: rgba(255,255,255,.20);
background: #0e1116 !important;
color: #f4f7fa !important;
}
html.studio-theme-dark body .container-box,
html.studio-theme-dark body .page,
body.studio-theme-dark .container-box,
body.studio-theme-dark .page,
html.studio-theme-dark body .chat-shell,
body.studio-theme-dark .chat-shell {
background: linear-gradient(180deg, #12161d, #0e1116) !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: #7e8998 !important;
}
html.studio-theme-dark body .stage,
body.studio-theme-dark .stage {
background: #10141a !important;
}
html.studio-theme-dark body .container-box > main.grid > :first-child,
html.studio-theme-dark body .page > .layout > aside,
html.studio-theme-dark body .page > .layout > .side,
body.studio-theme-dark .container-box > main.grid > :first-child,
body.studio-theme-dark .page > .layout > aside,
body.studio-theme-dark .page > .layout > .side {
background: rgba(22,26,33,.90) !important;
border-color: rgba(255,255,255,.11) !important;
}
html.studio-theme-dark body .topbar,
body.studio-theme-dark .topbar {
background: rgba(14,17,22,.86) !important;
}
@media (max-width: 1180px) {
.app-shell {
flex-direction: column !important;
padding: 10px !important;
gap: 10px !important;
}
.sidebar,
.sidebar:hover {
width: 100% !important;
min-width: 0 !important;
height: 70px !important;
min-height: 70px !important;
flex-direction: row !important;
align-items: center !important;
padding: 10px 12px !important;
border-radius: 22px !important;
}
.sidebar::before {
flex: 0 0 auto;
margin: 0 16px 0 4px !important;
padding: 0 !important;
font-size: 16px !important;
white-space: nowrap;
}
.sidebar::after {
display: none !important;
}
.sidebar nav {
flex-direction: row !important;
align-items: center !important;
gap: 6px !important;
padding-top: 0 !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scrollbar-width: none !important;
}
.sidebar nav::-webkit-scrollbar {
display: none !important;
}
.nav-item,
.sidebar:hover .nav-item {
width: auto !important;
min-width: max-content !important;
height: 46px !important;
padding: 0 14px !important;
}
.stage,
iframe,
iframe.active {
height: calc(100dvh - 90px) !important;
border-radius: 24px !important;
}
.container-box > main.grid,
.page > .layout {
grid-template-columns: 1fr !important;
}
.container-box > main.grid > :first-child,
.page > .layout > aside,
.page > .layout > .side {
position: relative !important;
top: auto !important;
max-height: none !important;
}
}
@media (max-width: 720px) {
.app-shell {
padding: 0 !important;
gap: 0 !important;
}
.sidebar,
.sidebar:hover {
height: 60px !important;
min-height: 60px !important;
border-radius: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
border-top: 0 !important;
}
.sidebar::before,
.nav-text {
display: none !important;
}
.nav-item,
.sidebar:hover .nav-item {
width: 44px !important;
min-width: 44px !important;
padding: 0 !important;
justify-content: center !important;
border-radius: 14px !important;
}
.nav-item.active {
transform: none !important;
}
.theme-toggle {
width: 44px !important;
height: 44px !important;
}
.stage,
iframe,
iframe.active {
height: calc(100dvh - 60px) !important;
border-radius: 0 !important;
border: 0 !important;
}
.container-box,
.page {
padding: 20px 14px 52px !important;
}
.container-box > header,
.page > header,
.head {
align-items: flex-start !important;
margin-bottom: 16px !important;
}
.container-box > header h1,
.page-title,
.title,
.title-block h1 {
font-size: clamp(28px, 11vw, 40px) !important;
line-height: .94 !important;
}
.container-box > main.grid {
gap: 14px !important;
}
.container-box > main.grid > :first-child,
.page > .layout > aside,
.page > .layout > .side {
padding: 16px !important;
border-radius: 22px !important;
}
.result-frame,
#resultBox {
min-height: 420px !important;
border-radius: 24px !important;
}
.page .layout > .panel {
min-height: auto !important;
}
.page .layout > #side.side {
max-height: 230px !important;
min-height: auto !important;
}
.page .layout > .panel .list {
height: auto !important;
max-height: 430px !important;
}
.page .layout > .detail-panel {
min-height: 420px !important;
}
.nano-monitor {
left: 12px !important;
bottom: 12px !important;
}
}
@media (prefers-reduced-motion: reduce) {
.nav-item,
.glass-btn,
.btn-render,
.send-btn,
.gen-btn,
.primary-btn,
.btn-action-dark,
.masonry-item,
.card,
.prompt-card,
.thread-item,
.upload-item,
iframe {
transform: none !important;
transition-duration: .01ms !important;
}
.spinner-nano {
animation: none !important;
}
}
/* Prompt library keeps a true readable list, not pill buttons. */
.list .prompt-card {
display: block !important;
min-height: 112px !important;
height: auto !important;
padding: 15px 16px !important;
border-radius: 18px !important;
background: rgba(255,255,255,.82) !important;
text-align: left !important;
color: var(--atelier-ink) !important;
box-shadow: none !important;
}
.list .prompt-card.active {
background: #151a22 !important;
border-color: #151a22 !important;
color: #fff !important;
}
.list .prompt-card-title,
.list .prompt-card-desc {
display: -webkit-box !important;
white-space: normal !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
text-decoration: none !important;
}
.list .prompt-card-title {
min-height: 36px;
font-size: 13px !important;
line-height: 1.38 !important;
letter-spacing: 0 !important;
}
.list .prompt-card-desc {
min-height: 34px;
line-height: 1.45 !important;
}
.list .prompt-card.active .prompt-card-title,
.list .prompt-card.active .prompt-card-desc,
.list .prompt-card.active .chip {
color: rgba(255,255,255,.88) !important;
}
.list .prompt-card .chips {
min-height: 24px;
}
.list .prompt-card .chip {
background: rgba(18,20,24,.06) !important;
border: 1px solid rgba(18,20,24,.08);
}
.list .prompt-card.active .chip {
background: rgba(255,255,255,.11) !important;
border-color: rgba(255,255,255,.13);
}
.detail-panel .detail-grid {
grid-template-columns: 1fr !important;
}
.detail-panel .image-frame {
position: relative !important;
top: auto !important;
width: 100% !important;
max-width: 520px !important;
aspect-ratio: 16 / 10 !important;
}
.detail-panel .detail-title {
font-size: clamp(22px, 2.2vw, 34px) !important;
line-height: 1.08 !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
}
/* 2026-06-17 Chat workspace pass: compact workbench layout aligned with the image tools. */
body.chat-page {
height: 100dvh !important;
overflow: hidden !important;
background: #f5f6f8 !important;
color: #15171c !important;
}
body.chat-page .chat-shell {
--chat-width: min(1120px, max(620px, calc(100vw - 340px)));
height: 100dvh !important;
background: #f5f6f8 !important;
}
body.chat-page .topbar {
height: 64px !important;
padding: 0 28px !important;
background: rgba(245,246,248,.92) !important;
border-bottom: 1px solid rgba(21,23,28,.08) !important;
box-shadow: none !important;
backdrop-filter: blur(16px) saturate(1.04) !important;
}
body.chat-page .topbar-inner,
body.chat-page .bubble-row,
body.chat-page .composer {
width: var(--chat-width) !important;
max-width: var(--chat-width) !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.chat-page .title-block {
min-width: 0 !important;
}
body.chat-page .title-block h1 {
color: #15171c !important;
font-size: 15px !important;
line-height: 1.2 !important;
font-weight: 760 !important;
letter-spacing: -.015em !important;
text-transform: none !important;
}
body.chat-page .title-block p {
max-width: min(52vw, 720px) !important;
margin-top: 3px !important;
color: #717b89 !important;
font-size: 11px !important;
line-height: 1.3 !important;
font-weight: 650 !important;
letter-spacing: 0 !important;
text-transform: none !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
body.chat-page .top-actions {
flex: 0 0 auto !important;
}
body.chat-page .messages {
background: #f5f6f8 !important;
background-image: none !important;
padding: 28px 28px 138px !important;
gap: 14px !important;
}
body.chat-page .messages > .m-auto {
color: #778191 !important;
opacity: .34 !important;
}
body.chat-page .bubble {
max-width: min(760px, 76%) !important;
border-radius: 16px !important;
padding: 13px 15px !important;
border: 0 !important;
box-shadow: 0 10px 28px rgba(21,23,28,.08) !important;
}
body.chat-page .bubble.user {
background: #2563eb !important;
color: #fff !important;
border-bottom-right-radius: 6px !important;
}
body.chat-page .bubble.assistant {
background: #fff !important;
color: #15171c !important;
border-bottom-left-radius: 6px !important;
}
body.chat-page .reasoning-box {
border-left: 0 !important;
border-radius: 12px !important;
background: #eef2f7 !important;
}
body.chat-page .composer-wrap {
padding: 0 28px 22px !important;
background: linear-gradient(to top, #f5f6f8 68%, rgba(245,246,248,0)) !important;
}
body.chat-page .composer {
min-height: 0 !important;
padding: 10px !important;
border: 1px solid rgba(21,23,28,.08) !important;
border-radius: 18px !important;
background: rgba(255,255,255,.94) !important;
box-shadow: 0 22px 60px rgba(21,23,28,.12) !important;
backdrop-filter: blur(18px) saturate(1.04) !important;
}
body.chat-page .composer-body {
min-height: 0 !important;
padding: 0 !important;
gap: 8px !important;
border: 0 !important;
border-radius: 12px !important;
background: transparent !important;
box-shadow: none !important;
}
body.chat-page #messageInput {
min-height: 42px !important;
max-height: 118px !important;
padding: 8px 10px !important;
border: 0 !important;
box-shadow: none !important;
color: #15171c !important;
font-size: 14px !important;
line-height: 1.5 !important;
background: transparent !important;
resize: none !important;
}
body.chat-page #messageInput::placeholder {
color: #8b95a4 !important;
}
body.chat-page .composer-inside-foot {
align-items: center !important;
gap: 10px !important;
}
body.chat-page .left-tools,
body.chat-page .inline-controls {
align-items: center !important;
gap: 7px !important;
flex-wrap: wrap !important;
}
body.chat-page .action-btn,
body.chat-page .mode-switch,
body.chat-page .mode-switch button,
body.chat-page .thinking-control,
body.chat-page .thinking-control button,
body.chat-page .model-select,
body.chat-page .mini-ratio,
body.chat-page .mini-ratio button,
body.chat-page .resolution-toggle,
body.chat-page .resolution-option {
height: 34px !important;
border-radius: 10px !important;
box-shadow: none !important;
}
body.chat-page .action-btn,
body.chat-page .model-select,
body.chat-page .mode-switch,
body.chat-page .thinking-control,
body.chat-page .mini-ratio,
body.chat-page .resolution-toggle {
background: #f8fafc !important;
border: 1px solid rgba(21,23,28,.08) !important;
color: #66717f !important;
}
body.chat-page .action-btn,
body.chat-page .action-btn span {
font-size: 11px !important;
font-weight: 720 !important;
letter-spacing: .015em !important;
text-transform: none !important;
}
body.chat-page .mode-switch button,
body.chat-page .thinking-control button,
body.chat-page .mini-ratio button,
body.chat-page .resolution-option {
min-width: 0 !important;
padding: 0 10px !important;
border: 0 !important;
background: transparent !important;
color: #66717f !important;
}
body.chat-page .mode-switch button.active,
body.chat-page .thinking-control button.active,
body.chat-page .mini-ratio button.active,
body.chat-page .resolution-option.active {
background: #fff !important;
color: #15171c !important;
box-shadow: 0 1px 2px rgba(21,23,28,.08) !important;
}
body.chat-page .model-select {
width: 270px !important;
min-width: 240px !important;
max-width: 270px !important;
padding-left: 12px !important;
font-size: 11px !important;
letter-spacing: 0 !important;
}
body.chat-page .send-btn {
width: 42px !important;
height: 42px !important;
border-radius: 12px !important;
background: #2563eb !important;
color: #fff !important;
box-shadow: 0 14px 30px rgba(37,99,235,.24) !important;
}
body.chat-page .history-popover {
top: 46px !important;
border: 0 !important;
border-radius: 16px !important;
box-shadow: 0 24px 60px rgba(21,23,28,.16) !important;
}
body.chat-page .thread-item {
border: 0 !important;
border-radius: 12px !important;
box-shadow: none !important;
}
body.chat-page .ref-strip {
max-width: 100% !important;
}
body.chat-page .ref-chip {
border-radius: 10px !important;
border-color: rgba(21,23,28,.08) !important;
}
/* Keep two-column tool pages from drifting like the old upscale view. */
.container-box > main.grid #resultColumn,
.container-box > main.grid .result-frame {
align-self: start !important;
}
@media (max-width: 900px) {
body.chat-page .chat-shell {
--chat-width: calc(100vw - 28px);
}
body.chat-page .topbar {
height: 60px !important;
padding: 0 14px !important;
}
body.chat-page .topbar-inner {
gap: 10px !important;
}
body.chat-page .action-btn span {
display: none !important;
}
body.chat-page .messages {
padding: 20px 14px 240px !important;
}
body.chat-page .composer-wrap {
padding: 0 14px 16px !important;
}
body.chat-page .composer {
padding: 9px !important;
border-radius: 16px !important;
}
body.chat-page .composer-inside-foot {
align-items: flex-end !important;
}
body.chat-page .inline-controls,
body.chat-page .image-controls {
align-items: stretch !important;
flex-direction: column !important;
width: 100% !important;
}
body.chat-page .model-select {
width: 100% !important;
max-width: none !important;
}
body.chat-page .send-btn {
flex: 0 0 auto !important;
}
body.chat-page .bubble {
max-width: 88% !important;
}
}
html.studio-theme-dark body.chat-page,
body.chat-page.studio-theme-dark {
background: #0e1116 !important;
color: #f4f7fa !important;
}
html.studio-theme-dark body.chat-page .chat-shell,
body.chat-page.studio-theme-dark .chat-shell,
html.studio-theme-dark body.chat-page .messages,
body.chat-page.studio-theme-dark .messages {
background: #0e1116 !important;
background-image: none !important;
}
html.studio-theme-dark body.chat-page .topbar,
body.chat-page.studio-theme-dark .topbar {
background: rgba(14,17,22,.92) !important;
border-bottom-color: rgba(255,255,255,.08) !important;
}
html.studio-theme-dark body.chat-page .title-block h1,
body.chat-page.studio-theme-dark .title-block h1 {
color: #f4f7fa !important;
}
html.studio-theme-dark body.chat-page .composer,
body.chat-page.studio-theme-dark .composer,
html.studio-theme-dark body.chat-page .history-popover,
body.chat-page.studio-theme-dark .history-popover {
background: rgba(22,26,33,.94) !important;
border-color: rgba(255,255,255,.10) !important;
}
html.studio-theme-dark body.chat-page .composer-body,
body.chat-page.studio-theme-dark .composer-body,
html.studio-theme-dark body.chat-page #messageInput,
body.chat-page.studio-theme-dark #messageInput {
background: transparent !important;
color: #f4f7fa !important;
}
html.studio-theme-dark body.chat-page .action-btn,
body.chat-page.studio-theme-dark .action-btn,
html.studio-theme-dark body.chat-page .model-select,
body.chat-page.studio-theme-dark .model-select,
html.studio-theme-dark body.chat-page .mode-switch,
body.chat-page.studio-theme-dark .mode-switch,
html.studio-theme-dark body.chat-page .thinking-control,
body.chat-page.studio-theme-dark .thinking-control,
html.studio-theme-dark body.chat-page .mini-ratio,
body.chat-page.studio-theme-dark .mini-ratio,
html.studio-theme-dark body.chat-page .resolution-toggle,
body.chat-page.studio-theme-dark .resolution-toggle {
background: #151a22 !important;
border-color: rgba(255,255,255,.10) !important;
color: #9aa5b3 !important;
}
.detail-panel .detail-desc,
.detail-panel .prompt-text {
word-break: break-word !important;
overflow-wrap: anywhere !important;
}
@media (max-width: 720px) {
.list .prompt-card {
min-height: 104px !important;
padding: 14px !important;
}
}
/* Responsive structure pass: explicit desktop / tablet / phone layouts. */
@media (min-width: 1280px) {
.app-shell {
grid-template-columns: 280px minmax(0, 1fr);
}
.sidebar,
.sidebar:hover {
width: 280px !important;
min-width: 280px !important;
}
.container-box > main.grid {
grid-template-columns: minmax(340px, 440px) minmax(0, 1fr) !important;
}
.page > .layout {
grid-template-columns: minmax(260px, 340px) minmax(360px, 1fr) minmax(300px, .78fr) !important;
}
}
@media (min-width: 900px) and (max-width: 1279px) {
.app-shell {
flex-direction: column !important;
padding: 10px !important;
gap: 10px !important;
}
.sidebar,
.sidebar:hover {
width: 100% !important;
min-width: 0 !important;
height: 76px !important;
min-height: 76px !important;
flex-direction: row !important;
align-items: center !important;
padding: 10px 12px !important;
border-radius: 22px !important;
}
.sidebar::before {
display: block !important;
flex: 0 0 auto;
margin: 0 16px 0 4px !important;
padding: 0 !important;
font-size: 16px !important;
white-space: nowrap;
}
.sidebar::after {
display: none !important;
}
.sidebar nav {
flex: 1 1 auto !important;
min-width: 0 !important;
flex-direction: row !important;
align-items: center !important;
gap: 6px !important;
padding-top: 0 !important;
overflow-x: auto !important;
overflow-y: hidden !important;
}
.nav-item,
.sidebar:hover .nav-item {
width: auto !important;
min-width: max-content !important;
height: 46px !important;
padding: 0 14px !important;
}
.nav-text,
.sidebar:hover .nav-text {
display: inline !important;
}
.theme-dock {
flex: 0 0 auto !important;
margin: 0 0 0 8px !important;
}
.stage,
iframe,
iframe.active {
height: calc(100dvh - 96px) !important;
border-radius: 24px !important;
}
.container-box,
.page {
padding: 28px 22px 68px !important;
}
.container-box > main.grid {
display: grid !important;
grid-template-columns: minmax(300px, 390px) minmax(0, 1fr) !important;
gap: 16px !important;
}
.container-box > main.grid > * {
grid-column: auto !important;
}
.container-box > main.grid > :first-child {
position: sticky !important;
top: 22px !important;
max-height: calc(100dvh - 44px) !important;
overflow: auto !important;
}
.page > .layout {
display: grid !important;
grid-template-columns: minmax(230px, 300px) minmax(0, 1fr) !important;
gap: 16px !important;
}
.page > .layout > :nth-child(3) {
grid-column: 1 / -1 !important;
}
.result-frame,
#resultBox {
min-height: min(68dvh, 680px) !important;
}
}
@media (min-width: 721px) and (max-width: 899px) {
.app-shell {
flex-direction: column !important;
padding: 8px !important;
gap: 8px !important;
}
.sidebar,
.sidebar:hover {
width: 100% !important;
min-width: 0 !important;
height: 66px !important;
min-height: 66px !important;
flex-direction: row !important;
align-items: center !important;
padding: 8px 10px !important;
border-radius: 18px !important;
}
.sidebar::before,
.sidebar::after {
display: none !important;
}
.sidebar nav {
flex-direction: row !important;
align-items: center !important;
gap: 5px !important;
padding-top: 0 !important;
overflow-x: auto !important;
overflow-y: hidden !important;
}
.nav-item,
.sidebar:hover .nav-item {
width: 48px !important;
min-width: 48px !important;
height: 48px !important;
padding: 0 !important;
justify-content: center !important;
}
.nav-text,
.sidebar:hover .nav-text {
display: none !important;
}
.theme-dock {
margin-left: 6px !important;
}
.stage,
iframe,
iframe.active {
height: calc(100dvh - 82px) !important;
border-radius: 18px !important;
}
.container-box,
.page {
padding: 24px 18px 58px !important;
}
.container-box > main.grid,
.page > .layout {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.container-box > main.grid > :first-child,
.page > .layout > aside,
.page > .layout > .side {
position: relative !important;
top: auto !important;
max-height: none !important;
}
.result-frame,
#resultBox {
min-height: min(62dvh, 560px) !important;
}
}
@media (max-width: 720px) {
.container-box > main.grid,
.page > .layout {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
}
.container-box > main.grid > *,
.page > .layout > * {
grid-column: 1 / -1 !important;
width: 100% !important;
min-width: 0 !important;
}
.head-actions,
.bulk-actions,
.actions,
.top-actions,
.toolbar,
.tabs {
width: 100% !important;
align-items: stretch !important;
}
.head-actions .btn,
.bulk-actions .btn,
.actions .btn,
.select {
flex: 1 1 auto !important;
justify-content: center !important;
}
}
/* 2026-06-17 layout repair: prompt library, rail shadow, chat alignment. */
.sidebar,
.sidebar:hover,
.nav-item,
.nav-item:hover,
.nav-item.active,
.theme-toggle {
box-shadow: none !important;
}
.nav-item.active {
background: linear-gradient(135deg, rgba(49,87,255,.94), rgba(65,88,220,.82)) !important;
}
.container-box > main.grid {
align-items: start !important;
}
.container-box > main.grid > *,
.container-box > main.grid > :first-child,
.container-box > main.grid > :last-child,
.container-box > main.grid #resultColumn,
.container-box > main.grid .result-frame,
#resultBox {
align-self: start !important;
margin-top: 0 !important;
}
body.chat-page .chat-shell {
--chat-width: min(1520px, calc(100vw - 56px));
background:
linear-gradient(180deg, rgba(255,255,255,.78), rgba(238,241,244,.84)),
#f3f5f7 !important;
}
body.chat-page .topbar {
height: 126px !important;
padding: 30px clamp(20px, 2.8vw, 42px) 18px !important;
background: transparent !important;
border-bottom: 1px solid rgba(21,23,28,.08) !important;
backdrop-filter: none !important;
}
body.chat-page .topbar-inner {
width: min(100%, 1520px) !important;
max-width: 1520px !important;
height: auto !important;
align-items: flex-start !important;
margin: 0 auto !important;
}
body.chat-page .title-block h1 {
font-size: clamp(30px, 4vw, 56px) !important;
line-height: .92 !important;
letter-spacing: -.065em !important;
font-weight: 900 !important;
}
body.chat-page .title-block p {
margin-top: 10px !important;
color: #6f7a88 !important;
font-size: 10px !important;
font-weight: 800 !important;
letter-spacing: .18em !important;
text-transform: uppercase !important;
}
body.chat-page .top-actions {
padding-top: 0 !important;
}
body.chat-page .messages {
background: transparent !important;
background-image: none !important;
padding-top: 24px !important;
}
body.prompt-library-page .page {
gap: 16px !important;
}
body.prompt-library-page .head {
margin-bottom: 6px !important;
}
body.prompt-library-page .actions {
align-items: center !important;
gap: 10px !important;
}
body.prompt-library-page .actions .btn,
body.prompt-library-page .detail-actions .btn {
height: 38px !important;
min-height: 38px !important;
border-radius: 12px !important;
padding: 0 14px !important;
box-shadow: none !important;
letter-spacing: .02em !important;
text-transform: none !important;
}
body.prompt-library-page .actions .btn {
min-width: 96px !important;
justify-content: center !important;
}
body.prompt-library-page .btn:not(.secondary):not(.ghost):not(.danger),
body.prompt-library-page .btn:not(.secondary):not(.ghost):not(.danger):hover,
body.prompt-library-page .detail-actions .btn:not(.secondary):not(.ghost):not(.danger),
body.prompt-library-page .actions .btn:not(.secondary):not(.ghost):not(.danger) {
height: 38px !important;
min-height: 38px !important;
border-radius: 12px !important;
box-shadow: none !important;
transform: none !important;
}
body.prompt-library-page .detail-actions .btn {
min-width: 70px !important;
justify-content: center !important;
}
body.prompt-library-page .layout {
grid-template-columns: 280px minmax(420px, .92fr) minmax(440px, 1.08fr) !important;
gap: 16px !important;
align-items: stretch !important;
}
body.prompt-library-page .panel {
min-width: 0 !important;
box-shadow: none !important;
}
body.prompt-library-page .list-head {
height: 58px !important;
padding: 10px 12px !important;
justify-content: center !important;
}
body.prompt-library-page .search {
position: relative !important;
height: 38px !important;
width: 100% !important;
border: 1px solid rgba(20,23,29,.14) !important;
border-radius: 999px !important;
background: rgba(255,255,255,.76) !important;
box-shadow: none !important;
overflow: hidden !important;
}
body.prompt-library-page .search input {
height: 100% !important;
min-height: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
outline: 0 !important;
}
body.prompt-library-page .search:focus-within {
border-color: rgba(49,87,255,.48) !important;
box-shadow: 0 0 0 4px rgba(49,87,255,.10) !important;
}
body.prompt-library-page .list {
height: calc(100% - 58px) !important;
padding: 12px !important;
gap: 10px !important;
}
body.prompt-library-page .prompt-card {
min-height: 118px !important;
padding: 14px 15px !important;
overflow: visible !important;
}
body.prompt-library-page .prompt-card:hover {
transform: none !important;
box-shadow: none !important;
}
body.prompt-library-page .prompt-card-title {
min-height: 0 !important;
font-size: 13px !important;
line-height: 1.35 !important;
}
body.prompt-library-page .prompt-card-desc {
min-height: 0 !important;
margin-top: 8px !important;
line-height: 1.48 !important;
}
body.prompt-library-page .prompt-card .chips {
min-height: 24px !important;
overflow: hidden !important;
}
body.prompt-library-page .detail {
height: 100% !important;
padding: 18px !important;
overflow: auto !important;
}
body.prompt-library-page .detail-stack {
min-height: 100% !important;
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
}
body.prompt-library-page .detail-hero {
display: grid !important;
grid-template-columns: minmax(230px, 42%) minmax(0, 1fr) !important;
gap: 18px !important;
align-items: start !important;
}
body.prompt-library-page .detail-summary {
min-width: 0 !important;
}
body.prompt-library-page .detail-panel .image-frame,
body.prompt-library-page .image-frame {
position: relative !important;
top: auto !important;
width: 100% !important;
max-width: none !important;
aspect-ratio: 16 / 10 !important;
border-radius: 18px !important;
}
body.prompt-library-page .detail-title {
font-size: clamp(24px, 2.2vw, 38px) !important;
line-height: 1.05 !important;
letter-spacing: -.055em !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
}
body.prompt-library-page .detail-desc {
margin-top: 12px !important;
font-size: 14px !important;
line-height: 1.65 !important;
color: var(--atelier-muted, #64748b) !important;
}
body.prompt-library-page .detail-meta-row {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
margin-top: 14px !important;
}
body.prompt-library-page .block {
margin-top: 0 !important;
border-radius: 16px !important;
box-shadow: none !important;
}
body.prompt-library-page .meta-block {
padding: 12px !important;
}
body.prompt-library-page .block-head {
margin-bottom: 10px !important;
font-size: 13px !important;
}
body.prompt-library-page .prompt-block {
padding: 16px !important;
}
body.prompt-library-page .prompt-text {
max-height: min(24dvh, 240px) !important;
overflow: auto !important;
padding-right: 4px !important;
font-size: 14px !important;
line-height: 1.78 !important;
}
body.prompt-library-page .prompt-inline-edit {
min-height: min(24dvh, 240px) !important;
}
body.prompt-library-page .detail-actions {
margin-top: 14px !important;
gap: 8px !important;
}
@media (max-width: 1320px) {
body.prompt-library-page .layout {
grid-template-columns: 260px minmax(0, 1fr) !important;
}
body.prompt-library-page .detail-panel {
grid-column: 1 / -1 !important;
}
}
@media (max-width: 900px) {
body.chat-page .topbar {
height: 88px !important;
padding: 18px 14px 12px !important;
}
body.chat-page .title-block h1 {
font-size: clamp(26px, 8vw, 38px) !important;
}
body.prompt-library-page .detail-hero,
body.prompt-library-page .detail-meta-row {
grid-template-columns: 1fr !important;
}
}
/* 2026-06-17 prompt library detail repair: complete image, smaller title, actions first. */
body.prompt-library-page .layout {
grid-template-columns: 250px minmax(520px, 1fr) minmax(500px, 1fr) !important;
}
body.prompt-library-page .list {
padding: 10px !important;
gap: 9px !important;
}
body.prompt-library-page .prompt-card {
height: auto !important;
min-height: 116px !important;
padding: 13px 14px 15px !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
body.prompt-library-page .prompt-card-title {
font-size: 12.5px !important;
line-height: 1.32 !important;
-webkit-line-clamp: 2 !important;
}
body.prompt-library-page .prompt-card-desc {
margin-top: 7px !important;
font-size: 12px !important;
line-height: 1.42 !important;
-webkit-line-clamp: 2 !important;
}
body.prompt-library-page .prompt-card .chips {
max-height: 26px !important;
min-height: 26px !important;
margin-top: 9px !important;
overflow: hidden !important;
}
body.prompt-library-page .detail-stack {
gap: 12px !important;
}
body.prompt-library-page .detail-main {
display: grid !important;
grid-template-columns: minmax(260px, 48%) minmax(0, 1fr) !important;
gap: 18px !important;
align-items: start !important;
}
body.prompt-library-page .detail-panel .image-frame,
body.prompt-library-page .image-frame {
aspect-ratio: 16 / 9 !important;
background: #111827 !important;
}
body.prompt-library-page .image-frame img {
object-fit: contain !important;
background: #111827 !important;
}
body.prompt-library-page .detail-title {
font-size: clamp(20px, 1.5vw, 28px) !important;
line-height: 1.08 !important;
letter-spacing: -.04em !important;
}
body.prompt-library-page .detail-desc {
margin-top: 10px !important;
font-size: 13px !important;
line-height: 1.55 !important;
}
body.prompt-library-page .detail-summary .detail-actions {
margin-top: 14px !important;
}
body.prompt-library-page .prompt-block {
padding: 14px !important;
}
body.prompt-library-page .prompt-text {
max-height: min(22dvh, 210px) !important;
}
body.prompt-library-page .detail-meta-row {
margin-top: 0 !important;
}
body.prompt-library-page .meta-block {
min-height: 0 !important;
}
@media (max-width: 1500px) {
body.prompt-library-page .layout {
grid-template-columns: 240px minmax(460px, 1fr) minmax(460px, 1fr) !important;
}
body.prompt-library-page .detail-main {
grid-template-columns: minmax(220px, 45%) minmax(0, 1fr) !important;
}
}
@media (max-width: 1320px) {
body.prompt-library-page .layout {
grid-template-columns: 250px minmax(0, 1fr) !important;
}
}
@media (max-width: 900px) {
body.prompt-library-page .detail-main {
grid-template-columns: 1fr !important;
}
}
/* 2026-07-06 Lovart-style continuation: angle, assets and settings. */
body.angle-page .container-box,
body.asset-library-page .page,
body.api-settings-page .page {
width: min(100%, 1500px) !important;
max-width: none !important;
margin: 0 auto !important;
padding: 32px clamp(20px, 3vw, 48px) 72px !important;
}
body.angle-page .container-box > header,
body.asset-library-page .head,
body.api-settings-page .page > header {
min-height: 58px !important;
margin-bottom: 28px !important;
padding-bottom: 18px !important;
border-bottom: 1px solid var(--atelier-line) !important;
}
body.angle-page .container-box > header h1,
body.asset-library-page .page-title,
body.api-settings-page .page-title {
font-size: clamp(28px, 3vw, 42px) !important;
line-height: .92 !important;
letter-spacing: -.065em !important;
}
body.angle-page .container-box > header p,
body.asset-library-page .sub,
body.api-settings-page .sub {
margin-top: 8px !important;
color: var(--atelier-muted) !important;
font-size: 10px !important;
letter-spacing: .18em !important;
}
body.angle-page .container-box > main {
padding: 18px !important;
border: 1px solid var(--atelier-line) !important;
border-radius: var(--atelier-radius-xl) !important;
background: rgba(255,255,255,.78) !important;
box-shadow: var(--atelier-soft-shadow) !important;
}
body.angle-page .container-box > main > .grid {
gap: 18px !important;
}
body.angle-page .upload-item,
body.angle-page #three-container,
body.angle-page .nano-input {
border-color: var(--atelier-line) !important;
border-radius: 16px !important;
background: var(--atelier-solid) !important;
}
body.angle-page .glass-btn {
border-radius: 12px !important;
background: linear-gradient(135deg, #1f3cff, var(--atelier-blue)) !important;
box-shadow: 0 12px 26px rgba(49,87,255,.20) !important;
}
body.asset-library-page .head {
flex-direction: row !important;
align-items: flex-end !important;
}
body.asset-library-page .head-actions {
flex-wrap: nowrap !important;
}
body.asset-library-page .toolbar {
position: sticky !important;
top: 12px !important;
z-index: 20 !important;
gap: 14px !important;
margin-bottom: 20px !important;
padding: 10px !important;
border: 1px solid var(--atelier-line) !important;
border-radius: 16px !important;
background: rgba(255,255,255,.86) !important;
box-shadow: 0 10px 30px rgba(13,16,20,.07) !important;
backdrop-filter: blur(18px) !important;
}
body.asset-library-page .tabs {
flex: 1 1 420px !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
scrollbar-width: none !important;
}
body.asset-library-page .tabs::-webkit-scrollbar {
display: none !important;
}
body.asset-library-page .tab,
body.asset-library-page .folder-tab,
body.asset-library-page .select,
body.asset-library-page .btn {
border-radius: 10px !important;
}
body.asset-library-page .btn:not(.danger),
body.api-settings-page .btn:not(.ghost) {
background: linear-gradient(135deg, #1f3cff, var(--atelier-blue)) !important;
box-shadow: 0 8px 20px rgba(49,87,255,.16) !important;
}
body.asset-library-page .grid {
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
gap: 14px !important;
}
body.asset-library-page .card {
border-color: var(--atelier-line) !important;
border-radius: 16px !important;
box-shadow: none !important;
}
body.asset-library-page .card:hover {
transform: translateY(-2px) !important;
border-color: var(--atelier-line-strong) !important;
box-shadow: var(--atelier-soft-shadow) !important;
}
body.asset-library-page .check,
body.asset-library-page .icon-btn,
body.api-settings-page .icon-btn {
border-radius: 9px !important;
}
body.api-settings-page .layout {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
align-items: start !important;
gap: 14px !important;
}
body.api-settings-page .block {
padding: 18px !important;
border-color: var(--atelier-line) !important;
border-radius: 16px !important;
box-shadow: none !important;
}
body.api-settings-page .block:nth-child(3) {
grid-column: 1 / -1 !important;
}
body.api-settings-page .block-head {
min-height: 34px !important;
margin-bottom: 14px !important;
}
body.api-settings-page .block-title {
letter-spacing: .04em !important;
text-transform: none !important;
}
body.api-settings-page label {
gap: 6px !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
body.api-settings-page input,
body.api-settings-page select,
body.api-settings-page .api-row {
border-color: var(--atelier-line) !important;
border-radius: 10px !important;
background: var(--atelier-page-2) !important;
}
body.api-settings-page input:focus,
body.api-settings-page select:focus {
border-color: var(--atelier-blue) !important;
box-shadow: 0 0 0 3px rgba(49,87,255,.12) !important;
}
body.api-settings-page .actions {
position: sticky !important;
bottom: 16px !important;
z-index: 20 !important;
width: fit-content !important;
margin: 18px 0 0 auto !important;
padding: 8px !important;
border: 1px solid var(--atelier-line) !important;
border-radius: 14px !important;
background: rgba(255,255,255,.88) !important;
box-shadow: var(--atelier-soft-shadow) !important;
backdrop-filter: blur(18px) !important;
}
body.api-settings-page .btn {
border-radius: 9px !important;
}
body.studio-theme-dark.angle-page .container-box > main,
body.studio-theme-dark.asset-library-page .toolbar,
body.studio-theme-dark.api-settings-page .actions {
background: rgba(22,26,33,.88) !important;
}
@media (max-width: 900px) {
body.asset-library-page .head {
align-items: flex-start !important;
}
body.asset-library-page .toolbar,
body.api-settings-page .layout {
grid-template-columns: 1fr !important;
}
body.asset-library-page .toolbar {
align-items: stretch !important;
}
body.asset-library-page .bulk-actions {
overflow-x: auto !important;
flex-wrap: nowrap !important;
}
}
@media (max-width: 640px) {
body.asset-library-page .head {
flex-direction: column !important;
}
body.asset-library-page .head-actions,
body.asset-library-page .head-actions .btn {
width: 100% !important;
}
body.asset-library-page .head-actions .btn {
justify-content: center !important;
}
body.asset-library-page .grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body.api-settings-page .actions {
width: 100% !important;
overflow-x: auto !important;
}
}
/* LMM chat workspace: match the Lovart-style canvas language. */
body.chat-page {
--content-width: 1240px !important;
background:
radial-gradient(circle at 50% -20%, rgba(49,87,255,.08), transparent 34%),
var(--atelier-page) !important;
}
body.chat-page .chat-shell {
padding: 14px !important;
}
body.chat-page .topbar {
height: 68px !important;
padding: 0 18px !important;
border: 1px solid var(--atelier-line) !important;
border-radius: 16px !important;
background: rgba(255,255,255,.84) !important;
box-shadow: 0 10px 30px rgba(13,16,20,.06) !important;
}
body.chat-page .title-block h1 {
font-size: 18px !important;
letter-spacing: -.035em !important;
text-transform: none !important;
}
body.chat-page .title-block p {
margin-top: 2px !important;
color: var(--atelier-muted) !important;
}
body.chat-page .action-btn,
body.chat-page .model-select,
body.chat-page .mode-switch,
body.chat-page .provider-switch,
body.chat-page .mini-ratio,
body.chat-page .resolution-toggle,
body.chat-page .thinking-control {
border-color: var(--atelier-line) !important;
border-radius: 10px !important;
}
body.chat-page .messages {
padding: 30px 30px 232px !important;
gap: 14px !important;
}
body.chat-page .bubble {
border-radius: 16px !important;
box-shadow: none !important;
}
body.chat-page .bubble.user {
border-bottom-right-radius: 5px !important;
background: #161b24 !important;
}
body.chat-page .bubble.assistant {
border-color: var(--atelier-line) !important;
border-bottom-left-radius: 5px !important;
}
body.chat-page .composer-wrap {
padding: 18px 30px 28px !important;
background: linear-gradient(to top, var(--atelier-page) 72%, transparent) !important;
}
body.chat-page .composer {
min-height: 166px !important;
padding: 8px !important;
border-color: var(--atelier-line) !important;
border-radius: 18px !important;
background: rgba(255,255,255,.90) !important;
box-shadow: 0 22px 60px rgba(13,16,20,.13) !important;
backdrop-filter: blur(20px) !important;
}
body.chat-page .composer-body {
min-height: 148px !important;
padding: 14px !important;
border-color: transparent !important;
border-radius: 12px !important;
background: transparent !important;
}
body.chat-page .send-btn {
width: 42px !important;
height: 42px !important;
border-radius: 10px !important;
background: linear-gradient(135deg, #1f3cff, var(--atelier-blue)) !important;
box-shadow: 0 10px 24px rgba(49,87,255,.24) !important;
}
body.chat-page .history-popover {
border-color: var(--atelier-line) !important;
border-radius: 16px !important;
}
body.studio-theme-dark.chat-page .topbar,
body.studio-theme-dark.chat-page .composer {
background: rgba(22,26,33,.90) !important;
}
@media (max-width: 900px) {
body.chat-page .chat-shell {
padding: 8px !important;
}
body.chat-page .messages {
padding: 22px 10px 340px !important;
}
body.chat-page .composer-wrap {
padding: 12px 10px 16px !important;
}
}
/* Keep the global status monitor from stretching over canvas bottom controls. */
.nano-monitor,
html.studio-theme-dark body .nano-monitor,
body.studio-theme-dark .nano-monitor,
.nano-monitor.is-busy {
left: auto !important;
right: 18px !important;
bottom: 18px !important;
width: auto !important;
max-width: calc(100vw - 36px) !important;
height: 40px !important;
padding: 6px 12px !important;
gap: 8px !important;
color: #343432 !important;
background: color-mix(in srgb, rgb(245, 245, 245) 90%, transparent) !important;
border: 0 !important;
border-radius: 14px !important;
box-shadow: none !important;
pointer-events: none !important;
backdrop-filter: blur(16px) !important;
}
.nano-monitor .stat-group,
.nano-monitor.is-busy .stat-group {
color: #343432 !important;
font-size: 11px !important;
}
.nano-monitor .divider,
.nano-monitor.is-busy .divider {
background: #dededb !important;
}