/* 绘流 AI production core stylesheet. Ordered sources follow. */

/* entry:styles.part1.css sha256:7c4c3220e45ec18b9d3d16d2dd10256909b9c9ca7db6f88f75e2debb87d61176 */

:root {
--bg: #f4f5f7;
--panel: #ffffff;
--text: #101828;
--muted: #667085;
--border: #e3e8f1;
--accent: #2f6db7;
--accent-strong: #255a9c;
--media-drop-accent: var(--accent);
--blue: #2563a7;
--danger: #b42318;
--warning: #a15c07;
--ok: #13795b;
--accent-text: var(--accent-strong);
--danger-text: var(--danger);
--warning-text: var(--warning);
--ok-text: #116e53;
--member-gold: #d09a24;
--member-gold-strong: #c98f1e;
--member-gold-soft: #e0b04a;
--member-gold-tint: #fdf3e2;
--member-surface: linear-gradient(180deg, var(--member-gold-tint), color-mix(in srgb, var(--member-gold) 16%, var(--member-gold-tint)));
--member-surface-hover: linear-gradient(180deg, color-mix(in srgb, var(--member-gold) 10%, var(--member-gold-tint)), color-mix(in srgb, var(--member-gold) 26%, var(--member-gold-tint)));
--member-surface-line: color-mix(in srgb, var(--member-gold) 45%, transparent);
--member-surface-ink: var(--member-gold-strong);
--shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 12px 30px rgba(16, 24, 40, 0.05);
--ease-ui: cubic-bezier(0.22, 0.82, 0.22, 1);
--motion-fast: 140ms;
--motion-base: 220ms;
--motion-slow: 360ms;
--ui-density: 0.8;
--font-ui: var(--scale-font-body);
--font-label: var(--scale-font-label);
--font-title: var(--scale-font-title);
--font-section-title: var(--scale-font-section);
--sidebar-expanded: 168px;
--sidebar-collapsed: 55px;
--sidebar: var(--sidebar-expanded);
--shell-padding: 10px;
--shell-gap: 12px;
--layout-padding: 10px;
--layout-gap: 12px;
--layout-column-gap: var(--layout-gap);
--layout-row-gap: var(--layout-gap);
--panel-padding: var(--scale-panel-padding);
--tab-height: var(--scale-toolbar-height);
--tab-padding-y: 7px;
--tab-padding-x: 10px;
--control-height: var(--scale-control-height);
--control-padding-y: 7px;
--control-padding-x: 9px;
--button-height: var(--scale-button-height);
--button-padding-y: 7px;
--button-padding-x: 10px;
--form-gap: var(--scale-gap);
--section-gap: var(--scale-gap);
--nav-item-height: 46px;
--nav-item-padding: 10px;
--nav-icon-size: 30px;
--motion-premium-in: cubic-bezier(0.16, 1, 0.3, 1);
--motion-premium-out: cubic-bezier(0.7, 0, 0.84, 0);
--motion-premium-press: cubic-bezier(0.34, 1.56, 0.64, 1);
--motion-premium-fast: 120ms;
--motion-premium-base: 220ms;
--motion-premium-slow: 340ms;
--muted-2: #98a2b3;
--border-soft: #e7ebf1;
--surface: #ffffff;
--surface-2: #f8fafc;
--surface-3: #f1f5f9;
--control-surface: var(--surface);
--control-border: #d5dce6;
--control-text: var(--text);
--control-disabled-surface: #f4f6f9;
--control-disabled-border: #dce2eb;
--control-disabled-text: #788496;
--topbar-bg: #ffffff;
--mobile-topbar-bg: rgba(255, 255, 255, 0.96);
--mobile-topbar-border: var(--border);
--mobile-topbar-shadow: 0 10px 22px rgba(15, 23, 42, 0.07);
--advanced-bg: #f8fbfd;
--advanced-open-bg: #ffffff;
--advanced-border: #dce6ef;
--advanced-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
--advanced-summary-bg: #ffffff;
--advanced-summary-open-bg: #f9fafc;
--advanced-summary-color: #344054;
--advanced-summary-hover-bg: #f3f8fd;
--advanced-summary-hover-color: #255a9c;
--advanced-summary-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
--advanced-arrow: #64748b;
--mobile-chat-surface: #ffffff;
--mobile-chat-surface-2: #fbfcfe;
--mobile-chat-border: #dce6ef;
--mobile-chat-sidebar-bg: #f8fbfa;
--mobile-chat-sidebar-shadow: 0 22px 50px rgba(15, 23, 42, 0.22);
--z-sidebar-drawer: 1300;   
--z-float-toolbar: 3000;    
--z-tool-mask: 6000;        
--z-account: 9000;          
--z-overlay: 10000;         
--z-agent-shell: 11000;     
--z-modal: 12000;           
--z-modal-pick: 12100;      
--z-modal-priority: 13000;  
--z-modal-confirm: 15000;   
--z-select-mask: 16000;     
--z-drag-ghost: 99999;      
--z-toast: 999999;          
--accent-soft: #eaf2fb;
--blue-soft: #eef5ff;
--danger-soft: #fff3f1;
--danger-border: #f1c5be;
--ok-soft: #e9f6f1;
--ok-border: #bfe3d6;
--warning-soft: #fdf4e7;
--warning-border: #f0d9b0;
--info: #2563a7;
--info-soft: #eef5ff;
--border-strong: #d3dce9;
--accent-2: #6d5ef0;
--accent-2-strong: #574bd4;
--accent-2-soft: #ecebfd;
--highlight: #f2922f;
--highlight-strong: #d97a18;
--highlight-soft: #fdf1e2;
--brand-gradient: linear-gradient(135deg, #2f6db7 0%, #4f63dd 52%, #7a59e0 100%);
--brand-gradient-strong: linear-gradient(135deg, #285f9f 0%, #4554c8 52%, #6a46cf 100%);
--brand-gradient-soft: linear-gradient(135deg, #eaf2fb 0%, #edeffe 58%, #f3ecfd 100%);
--brand-glow: 0 10px 26px rgba(79, 99, 221, 0.24);
--brand-glow-strong: 0 16px 34px rgba(79, 99, 221, 0.3);
--panel-fs-title: 15.5px;
--panel-fs-body: 13.5px;
--panel-fs-label: 12px;
--panel-fs-note: 11.5px;
--panel-h-control: 38px;
--panel-h-action: 34px;
--panel-h-pill: 25px;
--studio-canvas-surface-light: #f4f7fa;
--studio-canvas-grid-light: rgba(184, 197, 214, 0.42);
--studio-canvas-grid-image-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M0 .5H28M.5 0V28' fill='none' stroke='%23b8c5d6' stroke-opacity='.42' stroke-width='1'/%3E%3C/svg%3E");
--studio-canvas-surface-dark: #121316;
--studio-canvas-grid-dark: rgba(255, 255, 255, 0.08);
--studio-canvas-grid-image-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M0 .5H28M.5 0V28' fill='none' stroke='%23ffffff' stroke-opacity='.08' stroke-width='1'/%3E%3C/svg%3E");
--canvas-selection-frame-color: rgba(47, 109, 183, 0.92);
--canvas-selection-frame-fill: rgba(47, 109, 183, 0.035);
--canvas-selection-frame-inset: rgba(255, 255, 255, 0.62);
--canvas-selection-subtract-frame-color: rgba(217, 45, 32, 0.92);
--canvas-selection-subtract-frame-fill: rgba(217, 45, 32, 0.055);
--canvas-selection-frame-radius: 14px;
--canvas-selection-frame-line-width: 1.5px;
--canvas-selection-frame-dash-on: 7;
--canvas-selection-frame-dash-off: 5;
--radius-xs: 6px;
--radius-sm: 8px;
--radius-md: 10px;
--radius-lg: 14px;
--shadow-soft: 0 1px 2px rgba(38, 52, 92, 0.05), 0 8px 18px -6px rgba(38, 52, 92, 0.12);
--shadow-popover: 0 4px 10px rgba(38, 52, 92, 0.08), 0 28px 56px -14px rgba(38, 52, 92, 0.24);
--shadow-card: 0 1px 2px rgba(38, 52, 92, 0.05), 0 6px 14px -5px rgba(38, 52, 92, 0.1);
--focus-ring: 0 0 0 3px rgba(47, 109, 183, 0.16);
--studio-command-surface: var(--surface);
--studio-command-border: color-mix(in srgb, var(--border-strong) 72%, transparent);
--studio-command-divider: color-mix(in srgb, var(--border-strong) 48%, transparent);
--studio-command-shadow: var(--shadow-soft);
--studio-command-hover: var(--surface-3);
--studio-command-active: color-mix(in srgb, var(--media-drop-accent) 14%, var(--surface));
--studio-command-accent: var(--media-drop-accent);
--studio-command-on-accent: #ffffff;
--studio-command-ink: var(--muted);
--studio-command-radius: var(--radius-lg);
--studio-command-control-radius: var(--radius-md);
--studio-command-control-size: 32px;
--sidebar-motion: 0ms;
--sidebar-nav-row-height: 53px;
--sidebar-icon-size: 32px;
--app-zoom: 1;
--scale-font-body: 12.5px;
--scale-font-label: 11.5px;
--scale-font-caption: 10.5px;
--scale-font-title: 16px;
--scale-font-section: 15px;
--scale-control-height: 33px;
--scale-button-height: 33px;
--scale-toolbar-height: 34px;
--scale-row-height: 38px;
--scale-panel-padding: 13px;
--scale-card-padding: 11px;
--scale-gap: 9px;
--scale-radius-panel: 12px;
--scale-radius-control: 9px;
--generation-progress-height: 3px;
--generation-progress-radius: 3px;
--generation-progress-track: rgba(100, 116, 139, 0.2);
--generation-progress-fill: linear-gradient(90deg, #0ea5e9, #6366f1);
--generation-progress-transition: width 0.9s cubic-bezier(0.22, 0.8, 0.28, 1);
--generation-progress-indeterminate-size: 42%;
--generation-progress-indeterminate-duration: 1.25s;
}
:where(.site-generation-progress) {
position: relative;
height: var(--generation-progress-height);
overflow: hidden;
border-radius: var(--generation-progress-radius);
background: var(--generation-progress-track);
}
:where(.site-generation-progress-fill) {
display: block;
width: 0;
height: 100%;
border-radius: inherit;
background: var(--generation-progress-fill);
transition: var(--generation-progress-transition);
}
@keyframes site-generation-progress-indeterminate {
from { transform: translateX(-100%); }
to { transform: translateX(240%); }
}
:where(
.site-generation-progress-fill.indet,
.site-generation-progress-fill.is-indeterminate,
.site-generation-progress.is-indeterminate > .site-generation-progress-fill
) {
position: absolute;
top: 0;
left: 0;
width: var(--generation-progress-indeterminate-size) !important;
animation: site-generation-progress-indeterminate var(--generation-progress-indeterminate-duration) ease-in-out infinite;
}
:where(.site-generation-progress-label[hidden], .site-generation-progress-label:empty) {
display: none !important;
}
@media (prefers-reduced-motion: reduce) {
:where(.site-generation-progress-fill) {
transition: none;
}
:where(
.site-generation-progress-fill.indet,
.site-generation-progress-fill.is-indeterminate,
.site-generation-progress.is-indeterminate > .site-generation-progress-fill
) {
transform: none;
opacity: 0.7;
animation: none;
}
}
::selection {
background: rgba(47, 109, 183, 0.18);
color: inherit;
}
* {
scrollbar-width: thin;
scrollbar-color: rgba(100, 116, 139, 0.42) transparent;
}
*::-webkit-scrollbar {
width: 9px;
height: 9px;
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
background: rgba(100, 116, 139, 0.36);
border-radius: 999px;
border: 2px solid transparent;
background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
background: rgba(83, 90, 104, 0.58);
border: 2px solid transparent;
background-clip: padding-box;
}
*::-webkit-scrollbar-corner {
background: transparent;
}
body.theme-dark * {
scrollbar-color: rgba(148, 163, 184, 0.34) transparent;
}
body.theme-dark *::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, 0.3);
border: 2px solid transparent;
background-clip: padding-box;
}
body.theme-dark *::-webkit-scrollbar-thumb:hover {
background: rgba(148, 163, 184, 0.5);
border: 2px solid transparent;
background-clip: padding-box;
}
body:not(.auth-required) *:not([data-ui-glass]) {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
body:not(.auth-required) :is(.job-row, .task-list-row, .task-row, .case-row) {
content-visibility: auto;
contain-intrinsic-size: auto 44px;
}
body:not(.auth-required) .favorite-case-card {
content-visibility: auto;
contain-intrinsic-size: auto 188px;
}
body:not(.auth-required) .text-chat-message {
content-visibility: auto;
contain-intrinsic-size: auto 72px;
}
body:not(.auth-required) .text-chat-history-item {
content-visibility: auto;
contain-intrinsic-size: auto 76px;
}
body:not(.auth-required) .hl-grid > .hl-card {
content-visibility: auto;
contain-intrinsic-size: auto 280px;
}
@keyframes hui-fade-up {
from {
opacity: 0;
transform: translate3d(0, 8px, 0) scale(0.992);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}
@media (hover: hover) and (pointer: fine) {
body:not(.auth-required) .module-tab .ui-icon {
transition: color var(--motion-premium-base) var(--motion-premium-in), background-color var(--motion-premium-base) var(--motion-premium-in), border-color var(--motion-premium-base) var(--motion-premium-in);
}
}
@keyframes hui-scale-in {
from {
opacity: 0;
transform: translate3d(0, 10px, 0) scale(0.975);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}
@keyframes hui-sheet-in {
from {
opacity: 0;
transform: translate3d(0, 14px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes hui-backdrop-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes hui-toast-in {
from {
opacity: 0;
transform: translate3d(0, 10px, 0) scale(0.98);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}
@keyframes hui-menu-in {
from {
opacity: 0;
transform: translate3d(0, 6px, 0) scale(0.985);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}
@keyframes hui-theme-toggle-icon {
0% {
opacity: 1;
filter: brightness(1) saturate(1) drop-shadow(0 0 0 rgba(47, 109, 183, 0));
transform: translate3d(0, 0, 0) scale(1);
}
30% {
opacity: 0.7;
filter: brightness(1.22) saturate(1.18) drop-shadow(0 0 8px rgba(47, 109, 183, 0.22));
transform: translate3d(0, 1px, 0) scale(0.78);
}
64% {
opacity: 1;
filter: brightness(1.12) saturate(1.12) drop-shadow(0 0 12px rgba(47, 109, 183, 0.24));
transform: translate3d(0, -1px, 0) scale(1.1);
}
82% {
opacity: 1;
filter: brightness(1.05) saturate(1.06) drop-shadow(0 0 6px rgba(47, 109, 183, 0.14));
transform: translate3d(0, 0, 0) scale(0.98);
}
100% {
opacity: 1;
filter: brightness(1) saturate(1) drop-shadow(0 0 0 rgba(47, 109, 183, 0));
transform: translate3d(0, 0, 0) scale(1);
}
}
@keyframes hui-theme-toggle-surface {
0% {
filter: brightness(1) saturate(1);
transform: translate3d(0, 0, 0) scale(1);
}
34% {
filter: brightness(1.04) saturate(1.1);
transform: translate3d(0, 0, 0) scale(0.985);
}
64% {
filter: brightness(1.06) saturate(1.14);
transform: translate3d(0, 0, 0) scale(1.018);
}
84% {
filter: brightness(1.02) saturate(1.06);
transform: translate3d(0, 0, 0) scale(0.997);
}
100% {
filter: brightness(1) saturate(1);
transform: translate3d(0, 0, 0) scale(1);
}
}
body.theme-switching {
user-select: none;
}
::view-transition-group(root) {
animation: none;
}
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
backface-visibility: hidden;
mix-blend-mode: normal;
}
body:not(.auth-required) #themeToggleBtn.is-theme-switching {
animation: hui-theme-toggle-surface 774ms cubic-bezier(0.22, 1, 0.36, 1) both;
will-change: filter, transform;
}
body:not(.auth-required) #themeToggleBtn:is(:hover, :active) {
transform: none;
}
body:not(.auth-required) #themeToggleBtn.is-theme-switching .ui-icon {
animation: hui-theme-toggle-icon 774ms cubic-bezier(0.22, 1, 0.36, 1) both;
transform-origin: center;
will-change: opacity, filter, transform;
transition:
color 180ms cubic-bezier(0.16, 1, 0.3, 1),
background-color 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
body:not(.auth-required) :is(
button:not([data-ui-compact-control]),
.primary,
.secondary,
.danger,
.icon-button,
.module-tab,
.tool-mode-tab,
.tab,
.button-link,
.account-action,
.modal-close,
.canvas-dock-button,
.thumb-preview
) {
transition:
box-shadow var(--motion-premium-fast) var(--motion-premium-in),
border-color var(--motion-premium-fast) var(--motion-premium-in),
background-color var(--motion-premium-fast) var(--motion-premium-in),
color var(--motion-premium-fast) var(--motion-premium-in),
opacity var(--motion-premium-fast) var(--motion-premium-in);
}
body:not(.auth-required) :is(
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea,
select,
.advanced,
.text-chat-shell,
.text-chat-composer,
.canvas-ai-composer,
.workflow-project-card,
.canvas-project-card,
.favorite-case-card,
.case-row,
.task-list-row,
.task-row,
.job-select,
.case-select,
.settings-provider-card,
.gateway-card,
.model-route-card
) {
transition:
border-color var(--motion-premium-base) var(--motion-premium-in),
box-shadow var(--motion-premium-fast) var(--motion-premium-in),
background-color var(--motion-premium-base) var(--motion-premium-in),
opacity var(--motion-premium-base) var(--motion-premium-in);
}
body:not(.auth-required) :is(
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea,
select,
button:not([data-ui-compact-control]):not(.ob-rail-step),
[role="button"],
.module-tab,
.tool-mode-tab,
.account-action,
.thumb-preview
):focus-visible {
outline: 0;
border-color: color-mix(in srgb, var(--accent) 72%, #ffffff);
box-shadow:
0 0 0 3px rgba(47, 109, 183, 0.16),
0 8px 22px rgba(15, 23, 42, 0.08);
transition: box-shadow 0.1s ease-out, border-color 0.1s ease-out;
}
body:not(.auth-required) :is(button, .primary, .secondary, .danger, .icon-button, .module-tab, .tool-mode-tab):not([data-ui-compact-control])[disabled],
body:not(.auth-required) :is(button, .primary, .secondary, .danger, .icon-button, .module-tab, .tool-mode-tab):not([data-ui-compact-control])[aria-disabled="true"] {
transform: none;
filter: saturate(0.92);
}
@media (hover: hover) and (pointer: fine) {
body:not(.auth-required) :is(
.advanced,
.workflow-project-card,
.canvas-project-card,
.favorite-case-card,
.case-row,
.task-list-row,
.task-row,
.job-select,
.case-select,
.settings-provider-card,
.gateway-card,
.model-route-card
):hover {
border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.1);
}
}
body:not(.auth-required) .module-tab.active .ui-icon,
body:not(.auth-required) .tool-mode-tab.active .ui-icon {
transform: none;
transition: color var(--motion-premium-base) var(--motion-premium-in), background-color var(--motion-premium-base) var(--motion-premium-in), border-color var(--motion-premium-base) var(--motion-premium-in);
}
body:not(.auth-required) :is(
.favorite-case-card,
.case-row,
.task-list-row,
.task-row,
.job-select,
.case-select,
.workflow-project-card,
.canvas-project-card,
.settings-provider-card,
.gateway-card,
.model-route-card,
.thumb,
.text-chat-history-item,
.text-chat-message
) {
animation: hui-fade-up var(--motion-premium-base) var(--motion-premium-in) both;
}
body:not(.auth-required) .modal-mask:not([hidden]) {
animation: hui-backdrop-in 160ms ease-out both;
}
body:not(.auth-required) .modal-mask:not([hidden]) .modal-panel {
animation: hui-scale-in var(--motion-premium-base) var(--motion-premium-in) both;
transform-origin: center center;
}
body:not(.auth-required) :is(.account-usage-modal, .canvas-image-crop-mask, .canvas-image-edit-mask, .canvas-video-edit-mask, .panorama-preview-mask):not([hidden]) .modal-panel {
animation-name: hui-sheet-in;
}
body:not(.auth-required) .context-menu:not([hidden]),
body:not(.auth-required) > .graphdialog:not([hidden]),
body:not(.auth-required) > .litegraph.graphdialog:not([hidden]) {
animation: hui-menu-in var(--motion-premium-base) var(--motion-premium-in) both;
transform-origin: top left;
}
body:not(.auth-required) .toast:not([hidden]) {
animation: hui-toast-in var(--motion-premium-base) var(--motion-premium-in) both;
}
body:not(.auth-required) :is(details.advanced, .settings-advanced-direct) > summary {
transition:
border-color var(--motion-premium-base) var(--motion-premium-in),
background-color var(--motion-premium-base) var(--motion-premium-in),
box-shadow var(--motion-premium-fast) var(--motion-premium-in);
}
body:not(.auth-required) :is(details.advanced, .settings-advanced-direct)[open] > summary {
border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
box-shadow: inset 0 -1px 0 rgba(47, 109, 183, 0.12);
}
body:not(.auth-required) .text-chat-shell.text-history-open .text-chat-sidebar,
body:not(.auth-required) .text-chat-history-backdrop:not([hidden]) {
animation: hui-sheet-in var(--motion-premium-base) var(--motion-premium-in) both;
}
body:not(.auth-required) :is(.workflow-node, .infinite-card, .workflow-media-overlay-thumb, .workflow-lite-canvas, .workflow-stage-wrap, .infinite-canvas-stage, .infinite-canvas-content) {
animation: none;
}
@media (max-width: 820px) {
body:not(.auth-required) .modal-mask:not([hidden]) .modal-panel {
animation-name: hui-sheet-in;
animation-duration: 200ms;
}
body:not(.auth-required) :is(.favorite-case-card, .case-row, .task-list-row, .task-row, .workflow-project-card, .thumb, .text-chat-history-item, .text-chat-message) {
animation-duration: 180ms;
}
}
@media (prefers-reduced-motion: reduce) {
body:not(.auth-required) *,
body:not(.auth-required) *::before,
body:not(.auth-required) *::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 1ms !important;
}
}
@media (max-width: 820px) {
body:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] .settings-section-title,
body:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] .gateway-card-head,
body:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] .gateway-category-head {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
align-items: start !important;
gap: 4px !important;
padding: 0 2px !important;
text-align: left !important;
}
body:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] :is(
.settings-section-title strong,
.gateway-card-head strong,
.gateway-category-head strong,
.gateway-category-card strong,
.model-route-head strong
) {
font-size: 13px !important;
line-height: 1.18 !important;
font-weight: 820 !important;
letter-spacing: 0 !important;
}
body:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] :is(
.settings-section-title span,
.gateway-card-head span,
.gateway-category-head span,
.gateway-category-card span,
.model-route-head span,
.settings-provider-help
) {
margin-top: 0 !important;
color: var(--muted) !important;
font-size: 10px !important;
line-height: 1.28 !important;
text-align: left !important;
}
body:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] .settings-advanced-direct {
width: 100% !important;
max-width: 100% !important;
}
body:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] .settings-advanced-direct > summary {
min-height: 29px !important;
padding: 0 10px !important;
border-radius: 11px !important;
font-size: 10.5px !important;
line-height: 1 !important;
}
body:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] :is(.gateway-card, .settings-provider-card, .gateway-key-manager, .gateway-category-card) {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
padding: 10px !important;
border-radius: 14px !important;
gap: 8px !important;
}
body:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] :is(.gateway-actions, .model-route-toolbar, .model-route-actions) {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 6px !important;
width: 100% !important;
}
body:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] .gateway-actions select {
grid-column: 1 / -1 !important;
}
body:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] :is(.gateway-actions button, .model-route-toolbar button, .model-route-actions button) {
min-width: 0 !important;
width: 100% !important;
min-height: 29px !important;
height: 29px !important;
padding: 0 7px !important;
border-radius: 10px !important;
font-size: 10.5px !important;
}
}
* {
box-sizing: border-box;
}
html {
scrollbar-gutter: stable;
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family:
Inter, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
font-size: var(--font-ui);
min-height: 100vh;
}
body.sidebar-collapsed {
--sidebar: var(--sidebar-collapsed);
}
button,
input,
select,
textarea {
font: inherit;
}
button {
white-space: nowrap;
}
.topbar {
position: fixed;
inset: 0 auto 0 0;
z-index: 10;
width: var(--sidebar);
height: 100vh;
padding: 18px;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 18px;
background: var(--topbar-bg);
border-right: 1px solid var(--border);
box-shadow: 10px 0 28px rgba(26, 32, 44, 0.05);
overflow-x: hidden;
overflow-y: auto;
}
h1,
h2,
p {
margin: 0;
}
h1 {
font-size: var(--font-title);
font-weight: 760;
}
h2 {
font-size: var(--font-section-title);
font-weight: 800;
letter-spacing: -0.012em;
}
.topbar p,
.monitor-header p {
color: var(--muted);
margin-top: 4px;
}
.brand-block {
min-width: 0;
padding-bottom: 16px;
border-bottom: 1px solid #edf0f5;
}
.brand-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
align-items: start;
}
.brand-text {
min-width: 0;
}
.brand-short {
display: none;
}
.sidebar-toggle {
min-width: 52px;
min-height: 34px;
padding: 6px 9px;
border: 1px solid var(--border);
border-radius: 8px;
background: #f9fafc;
color: #344054;
cursor: pointer;
}
.module-nav {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
align-items: stretch;
}
.module-tab {
position: relative;
display: grid;
grid-template-rows: 20px 18px;
gap: 4px;
align-content: center;
justify-items: start;
min-height: 68px;
text-align: left;
border: 1px solid var(--border);
border-radius: 8px;
background: #ffffff;
color: var(--text);
padding: 13px 14px;
cursor: pointer;
}
.module-tab[draggable="true"] {
cursor: grab;
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
.module-tab.dragging {
opacity: 0.72;
cursor: grabbing;
}
.module-tab.drag-ready {
border-color: rgba(47, 109, 183, 0.65);
background: #eef6ff;
box-shadow: inset 3px 0 0 var(--accent), 0 0 0 3px rgba(47, 109, 183, 0.12);
}
.workflow-template-drag-ghost {
position: fixed;
left: 0;
top: 0;
z-index: var(--z-drag-ghost);
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
gap: 9px;
align-items: center;
min-width: 190px;
max-width: min(280px, calc(100vw - 24px));
padding: 9px 11px;
border: 1px solid rgba(47, 109, 183, 0.34);
border-radius: 14px;
background: rgba(255, 255, 255, 0.94);
color: var(--accent-strong);
box-shadow: 0 16px 38px rgba(15, 23, 42, 0.18);
pointer-events: none;
will-change: transform;
}
.workflow-template-drag-icon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 11px;
background: #e8f1fb;
color: var(--accent-strong);
}
.workflow-template-drag-icon svg {
width: 18px;
height: 18px;
stroke-width: 1.8;
}
.workflow-template-drag-copy {
display: grid;
gap: 2px;
min-width: 0;
}
.workflow-template-drag-copy b {
overflow: hidden;
color: #12385a;
font-size: 13px;
font-weight: 830;
line-height: 1.18;
text-overflow: ellipsis;
white-space: nowrap;
}
.workflow-template-drag-copy small {
overflow: hidden;
color: #5c7893;
font-size: 11px;
font-weight: 650;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
.module-template-dragging {
cursor: grabbing;
}
.module-place-ghost {
position: fixed;
left: 0;
top: 0;
z-index: var(--z-drag-ghost);
display: inline-flex;
align-items: center;
gap: 8px;
max-width: min(220px, calc(100vw - 24px));
padding: 7px 14px 7px 11px;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--menu-accent, var(--accent)) 42%, transparent);
background: rgba(255, 255, 255, 0.97);
color: #12385a;
font-size: 13px;
font-weight: 800;
white-space: nowrap;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.22);
backdrop-filter: blur(10px);
pointer-events: none;
will-change: transform;
}
.module-place-ghost-dot {
flex: 0 0 auto;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--menu-accent, var(--accent));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--menu-accent, var(--accent)) 18%, transparent);
}
.module-place-ghost-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.theme-dark .module-place-ghost {
background: rgba(20, 30, 48, 0.96);
color: #e8f1fc;
border-color: color-mix(in srgb, var(--menu-accent, var(--accent)) 50%, transparent);
}
.app-tooltip {
position: fixed;
z-index: 100001;
width: max-content;
max-width: min(260px, calc(100vw - 20px));
padding: 6px 8px;
border: 1px solid rgba(184, 202, 222, 0.68);
border-radius: 9px;
background: rgba(255, 255, 255, 0.95);
color: #21384f;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
backdrop-filter: blur(10px);
opacity: 0;
transform: translateY(2px) scale(0.98);
transition: opacity 0.12s ease, transform 0.12s ease;
pointer-events: none;
}
.app-tooltip.visible {
opacity: 1;
transform: translateY(0) scale(1);
}
.app-tooltip-title {
margin-bottom: 2px;
color: #112d49;
font-size: 11.25px;
font-weight: 720;
line-height: 1.22;
white-space: nowrap;
}
.app-tooltip.title-only .app-tooltip-title {
margin-bottom: 0;
}
.app-tooltip-detail {
color: #536b83;
font-size: 10.75px;
font-weight: 540;
line-height: 1.34;
white-space: normal;
}
body.theme-dark:not(.auth-required) .workflow-template-drag-ghost,
body.theme-dark .workflow-template-drag-ghost {
border-color: rgba(90, 166, 232, 0.38);
background: rgba(18, 21, 28, 0.94);
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
}
body.theme-dark:not(.auth-required) .workflow-template-drag-icon,
body.theme-dark .workflow-template-drag-icon {
background: rgba(47, 109, 183, 0.22);
color: #9cc4ec;
}
body.theme-dark:not(.auth-required) .workflow-template-drag-copy b,
body.theme-dark .workflow-template-drag-copy b {
color: #e7eef9;
}
body.theme-dark:not(.auth-required) .workflow-template-drag-copy small,
body.theme-dark .workflow-template-drag-copy small {
color: #9db0c8;
}
body.theme-dark:not(.auth-required) .app-tooltip,
body.theme-dark .app-tooltip {
border-color: rgba(83, 90, 104, 0.78);
background: rgba(18, 21, 28, 0.96);
color: #dbe7f5;
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
}
body.theme-dark:not(.auth-required) .app-tooltip-title,
body.theme-dark .app-tooltip-title {
color: #e7eef9;
}
body.theme-dark:not(.auth-required) .app-tooltip-detail,
body.theme-dark .app-tooltip-detail {
color: #aebfd6;
}
.module-tab strong {
display: block;
width: 100%;
font-size: 15px;
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.module-tab span {
display: block;
width: 100%;
color: var(--muted);
font-size: 12px;
line-height: 18px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.module-tab.active {
border-color: rgba(47, 109, 183, 0.55);
background: #eef7f3;
box-shadow: inset 4px 0 0 var(--accent);
}
.module-tab.drag-target {
border-color: var(--accent);
background: #eaf2fb;
box-shadow: inset 4px 0 0 var(--accent), 0 0 0 3px rgba(47, 109, 183, 0.14);
}
.topbar .top-actions {
margin-top: auto;
display: grid;
grid-template-columns: 1fr;
gap: 10px;
align-items: stretch;
}
.topbar .state-pill,
.topbar .icon-button {
justify-content: center;
min-height: 40px;
}
.topbar .sidebar-refresh,
.topbar .sidebar-theme {
width: 100%;
min-width: 0;
border-color: #bfd0ea;
background: #f7faff;
color: var(--blue);
}
.top-actions,
.monitor-actions,
.command-row,
.toggle-row {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.layout {
display: grid;
grid-template-columns: minmax(420px, 0.78fr) minmax(0, 1.22fr);
column-gap: var(--layout-column-gap);
row-gap: var(--layout-row-gap);
margin-left: var(--sidebar);
padding: var(--layout-padding);
min-height: 100vh;
align-items: stretch;
}
body.sidebar-collapsed .topbar {
padding: 14px 10px;
}
body.sidebar-collapsed .brand-block {
padding-bottom: 12px;
}
body.sidebar-collapsed .brand-row {
grid-template-columns: 1fr;
justify-items: center;
gap: 8px;
}
body.sidebar-collapsed .brand-full,
body.sidebar-collapsed .brand-text p,
body.sidebar-collapsed .module-tab strong,
body.sidebar-collapsed .module-tab span {
display: none;
}
body.sidebar-collapsed .brand-short {
display: inline;
}
body.sidebar-collapsed .brand-text {
text-align: center;
}
body.sidebar-collapsed .sidebar-toggle {
width: 100%;
min-width: 0;
padding: 6px 4px;
font-size: 12px;
}
body.sidebar-collapsed .module-nav {
gap: 8px;
}
body.sidebar-collapsed .module-tab {
min-height: 48px;
grid-template-rows: 1fr;
justify-items: center;
align-items: center;
align-content: center;
padding: 10px 6px;
text-align: center;
}
body.sidebar-collapsed .module-tab::before {
content: "";
font-weight: 760;
font-size: 13px;
}
body.sidebar-collapsed .module-tab.active {
box-shadow: inset 0 -3px 0 var(--accent);
}
body.sidebar-collapsed .topbar .state-pill,
body.sidebar-collapsed .topbar .icon-button {
min-height: 36px;
padding: 8px 4px;
font-size: 0;
}
body.sidebar-collapsed .topbar .state-pill::before,
body.sidebar-collapsed .topbar .icon-button::before {
content: attr(data-short);
font-size: 12px;
}
.panel {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: var(--shadow);
min-width: 0;
}
.layout > .panel {
min-height: calc(100vh - 32px);
width: 100%;
}
.workbench {
overflow: hidden;
}
.monitor {
padding: 18px;
overflow: hidden;
}
.layout:not(.workflow-layout):not(.settings-layout):not(.tool-layout) > .workbench,
.layout:not(.workflow-layout):not(.settings-layout):not(.tool-layout) > .monitor {
min-width: 0;
max-width: 100%;
}
#appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) {
height: 100vh;
min-height: 0;
overflow: hidden;
}
@media (min-width: 821px) {
#appLayout.layout[data-module-panel="batchModule"] {
--layout-column-gap: 0px;
}
}
#appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .workbench,
#appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor {
min-height: 0;
height: 100%;
max-height: 100%;
}
#appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .workbench {
overflow-x: hidden;
overflow-y: auto;
scrollbar-width: none; 
-ms-overflow-style: none; 
}
#appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .workbench::-webkit-scrollbar {
width: 0;
height: 0;
display: none; 
}
#appLayout.layout:is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor {
display: flex;
flex-direction: column;
}
#appLayout.layout:is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor .monitor-body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
#appLayout.layout:is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor #genFeed.gen-feed {
flex: 1 1 auto;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
}
.tabs {
display: grid;
grid-template-columns: repeat(2, 1fr);
border-bottom: 1px solid var(--border);
}
.tab {
border: 0;
border-right: 1px solid var(--border);
background: #f9fafc;
color: var(--muted);
padding: 14px 12px;
cursor: pointer;
}
.tab:last-child {
border-right: 0;
}
.tab.active {
background: #ffffff;
color: var(--text);
font-weight: 700;
box-shadow: inset 0 -3px 0 var(--accent);
}
.tab-panel {
display: none;
padding: 18px;
}
.tab-panel.active {
display: block;
}
#imageTab .drop-zone p {
overflow-wrap: anywhere;
}
#imageTab .command-row.compact {
max-width: 100%;
}
.module-workflow-panel {
display: none;
}
.layout.workflow-layout,
.layout.canvas-layout {
grid-template-columns: minmax(0, 1fr);
height: 100vh;
min-height: 0;
overflow: hidden;
}
body:not(.auth-required) .layout.canvas-layout > .workbench,
body:not(.auth-required) .layout.workflow-layout > .workbench {
height: 100%;
min-height: 0;
padding: 0 !important;
}
.layout.canvas-layout .infinite-canvas-panel,
.layout.workflow-layout .module-workflow-panel {
height: 100%;
min-height: 0;
padding: 0;
}
.layout.workflow-layout .monitor,
.layout.canvas-layout .monitor,
.layout.settings-layout .monitor,
.layout.tool-layout:not(.media-tool-layout) .monitor,
.layout.tools-layout .monitor {
display: none;
}
.layout.canvas-layout,
.layout.settings-layout,
.layout.tools-layout,
.layout.tool-layout:not(.media-tool-layout) {
grid-template-columns: minmax(0, 1fr);
}
.layout.media-tool-layout {
grid-template-columns: minmax(420px, 0.78fr) minmax(0, 1.22fr);
height: 100vh;
min-height: 0;
overflow: hidden;
}
.layout.media-tool-layout .workbench,
.layout.media-tool-layout .monitor {
min-height: calc(100vh - (var(--layout-padding) * 2));
height: 100%;
}
.layout.media-tool-layout,
.layout.media-tool-layout .workbench,
.layout.media-tool-layout .monitor,
.layout.media-tool-layout .tool-panel,
.layout.media-tool-layout .tool-grid,
.layout.media-tool-layout .tool-card,
.layout.media-tool-layout .form-grid,
.layout.media-tool-layout .options-grid,
.layout.media-tool-layout .advanced,
.layout.media-tool-layout label,
.layout.media-tool-layout input,
.layout.media-tool-layout select,
.layout.media-tool-layout textarea {
box-sizing: border-box;
min-width: 0;
max-width: 100%;
}
.layout.media-tool-layout > .panel {
min-height: 0;
}
.layout.media-tool-layout .workbench {
overflow-x: hidden;
overflow-y: auto;
}
.layout.canvas-layout .tabs,
.layout.settings-layout .tabs,
.layout.tool-layout .tabs {
display: none;
}
.layout.tool-layout #musicModeTabs.tabs {
display: grid;
}
.layout.media-tool-layout .tool-grid {
grid-template-columns: 1fr;
}
.layout.media-tool-layout .media-debug-card {
display: none;
}
.layout.media-tool-layout .tool-panel.active {
padding: var(--panel-padding);
min-height: 100%;
}
.layout.media-tool-layout .tool-page-head {
margin: calc(var(--panel-padding) * -1) calc(var(--panel-padding) * -1) var(--panel-padding);
min-height: var(--tab-height);
padding: 0 var(--panel-padding);
border-bottom: 1px solid var(--border);
background: #f9fafc;
align-items: center;
}
.layout.media-tool-layout .tool-page-head h2 {
font-size: 14px;
line-height: 1.2;
}
.layout.media-tool-layout .tool-page-head p {
display: none;
}
.layout.media-tool-layout .tool-card {
border: 0;
border-radius: 0;
background: transparent;
padding: 0;
box-shadow: none;
}
.layout.media-tool-layout .form-grid {
grid-template-columns: minmax(0, 1fr) 144px;
}
.layout.media-tool-layout .quick-options {
grid-template-columns: minmax(176px, 1.4fr) minmax(112px, 0.8fr) minmax(112px, 0.8fr);
}
.layout.media-tool-layout .advanced .options-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
}
.layout.media-tool-layout .advanced > label {
margin: 0 14px 14px;
}
.layout.media-tool-layout #videoToolTab .quick-options {
grid-template-columns: minmax(176px, 1.35fr) minmax(96px, 0.75fr) minmax(96px, 0.75fr) minmax(84px, 0.65fr);
}
.layout.media-tool-layout #audioToolTab .quick-options {
grid-template-columns: minmax(176px, 1.4fr) minmax(112px, 0.8fr) minmax(112px, 0.8fr);
}
.tool-mode-tabs[hidden] { display: none !important; } 
.tool-mode-tabs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
margin: 0 0 var(--panel-padding);
padding: 6px;
border: 1px solid #dce6ef;
border-radius: 16px;
background: #f4f8fb;
}
.layout.media-tool-layout #audioToolTab {
padding-top: 0;
}
.layout.media-tool-layout #audioToolTab > .tool-mode-tabs {
margin: 0 calc(var(--panel-padding) * -1) var(--panel-padding);
border-top: 0;
border-left: 0;
border-right: 0;
border-radius: 0;
}
.layout.media-tool-layout #audioToolTab > .tool-page-head {
display: none;
}
.tool-mode-tab {
min-height: var(--tab-height);
border: 0;
border-radius: 11px;
background: transparent;
color: #475569;
font-weight: 900;
cursor: pointer;
transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}
.tool-mode-tab:hover {
background: rgba(255, 255, 255, 0.76);
color: #344054;
}
.tool-mode-tab.active {
background: #ffffff;
color: #0f172a;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08), inset 0 -2px 0 #2f6db7;
}
.audio-mode-panel {
display: none;
}
.audio-mode-panel.active {
display: block;
}
.layout.media-tool-layout #audioToolTab .music-options {
grid-template-columns: minmax(176px, 1.4fr) minmax(120px, 0.8fr);
}
.layout.media-tool-layout #audioToolTab .music-version-row {
display: grid;
grid-column: 1 / -1;
grid-template-columns: minmax(176px, 1.4fr) minmax(120px, 0.8fr);
gap: inherit;
align-items: end;
min-width: 0;
}
.layout.media-tool-layout #audioToolTab .music-version-row > #musicVersionField {
grid-column: 1 / 2;
}
.layout.media-tool-layout #audioToolTab .music-version-row > .music-instrumental-row {
grid-column: 2 / 3;
}
.layout.media-tool-layout #audioToolTab .music-version-row:has(#musicVersionField[hidden]) > .music-instrumental-row {
grid-column: 1 / -1;
}
.compact-checkbox {
min-height: 62px;
justify-content: center;
}
.compact-checkbox input {
width: auto;
}
.layout.tool-layout:not(.media-tool-layout) .tool-panel {
width: 100%;
max-width: none;
height: calc(100vh - 34px);
padding: 12px;
}
.tab-panel.settings-panel {
display: none;
}
.tab-panel.settings-panel.active {
max-width: 1180px;
display: grid;
gap: 14px;
}
.settings-panel > label:first-child,
.settings-panel > .form-grid,
.settings-panel > .options-grid,
.settings-panel > .key-manager,
.settings-panel > .toggle-row,
.settings-panel > .command-row,
.settings-panel > .result-box {
margin-bottom: 0;
}
.settings-panel > label:first-child,
.settings-panel > .form-grid,
.settings-panel > .options-grid {
border: 1px solid var(--border);
border-radius: 8px;
background: #ffffff;
padding: 14px;
}
.settings-panel > .form-grid {
grid-template-columns: minmax(260px, 1.15fr) minmax(220px, 0.85fr) minmax(260px, 1fr);
align-items: end;
}
.settings-panel > .options-grid {
margin: 0;
}
.tool-page-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
}
.tool-page-head p {
color: var(--muted);
margin-top: 5px;
}
.tool-grid {
display: grid;
grid-template-columns: minmax(360px, 0.95fr) minmax(360px, 1.05fr);
gap: 14px;
}
.tool-grid-balanced {
grid-template-columns: minmax(420px, 1.05fr) minmax(360px, 0.95fr);
}
.tool-card {
border: 1px solid var(--border);
border-radius: 8px;
background: #ffffff;
padding: 14px;
display: grid;
gap: 14px;
align-content: start;
}
.tool-card .form-grid,
.tool-card .options-grid,
.tool-card .quick-options {
margin-top: 0;
margin-bottom: 0;
}
.tool-card h2 {
font-size: 16px;
}
.tool-result-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.tool-result-text {
min-height: 420px;
background: #ffffff;
}
.text-chat-shell {
display: grid;
grid-template-columns: 284px minmax(0, 1fr);
width: 100%;
height: 100%;
min-height: 0;
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 12px 36px rgba(26, 32, 44, 0.06);
}
.text-chat-sidebar {
display: grid;
grid-template-rows: auto auto auto minmax(0, 1fr);
gap: 10px;
min-height: 0;
padding: 14px 12px;
border-right: 1px solid var(--border);
background: #f7fbff;
}
.text-chat-brand {
display: grid;
gap: 5px;
padding: 2px 4px 4px;
}
.text-chat-brand strong {
color: var(--text);
font-size: 18px;
font-weight: 800;
}
.text-chat-brand span {
color: var(--muted);
font-size: 12px;
line-height: 1.45;
}
.text-new-chat-btn {
min-height: 36px;
}
.text-chat-search-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: stretch;
}
.text-chat-search {
min-width: 0;
}
.text-chat-search input {
height: 38px;
border-radius: 8px;
background: #ffffff;
}
.text-chat-history-head {
display: flex;
align-items: center;
justify-content: space-between;
color: var(--muted);
font-size: 12px;
font-weight: 700;
padding: 2px 4px 0;
}
.text-chat-history-head small {
color: #94a3b8;
font-size: 12px;
font-weight: 650;
}
.text-chat-history-head-actions {
display: inline-flex;
align-items: center;
gap: 8px;
}
.text-chat-history-close {
display: none;
}
.text-chat-history {
display: grid;
align-content: start;
gap: 8px;
min-height: 0;
overflow: auto;
padding: 2px 4px 4px 0;
}
.text-chat-history-item {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 52px;
align-items: stretch;
gap: 9px;
min-height: 72px;
padding: 10px 10px 10px 12px;
border: 1px solid #dce7f3;
border-radius: 8px;
background: #ffffff;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.82), 0 6px 16px rgba(47, 109, 183, 0.04);
text-align: left;
overflow: hidden;
transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.text-chat-history-item::before {
content: "";
position: absolute;
top: 11px;
bottom: 11px;
left: 0;
width: 3px;
border-radius: 0 999px 999px 0;
background: transparent;
transition: background 0.15s ease;
}
.text-chat-history-item:hover {
border-color: #b9d1ec;
background: #f8fbff;
box-shadow: 0 10px 22px rgba(47, 109, 183, 0.075);
}
.text-chat-history-item.active {
border-color: #9fc3ea;
background: #eef6ff;
box-shadow: 0 10px 22px rgba(47, 109, 183, 0.105);
}
.text-chat-history-item.active::before {
background: var(--accent);
}
.text-chat-history-main {
display: grid;
align-content: center;
gap: 7px;
min-width: 0;
border-radius: 6px;
cursor: pointer;
user-select: none;
}
.text-chat-history-main:focus-visible {
outline: 0;
box-shadow: 0 0 0 3px rgba(47, 109, 183, 0.16);
}
.text-chat-history-main strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text);
font-size: 13px;
font-weight: 800;
line-height: 1.24;
}
.text-chat-history-item.renaming {
border-color: var(--accent);
background: #f5f9fd;
}
.text-chat-history-main.renaming {
cursor: text;
}
.text-chat-history-main strong[contenteditable="true"] {
min-width: 0;
padding: 2px 5px;
border: 1px solid #b9cfe8;
border-radius: 5px;
background: #ffffff;
box-shadow: 0 0 0 3px rgba(47, 109, 183, 0.1);
cursor: text;
outline: none;
user-select: text;
}
.text-chat-history-subline {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.text-chat-history-preview {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--muted);
font-size: 12px;
line-height: 1.35;
}
.text-chat-history-count {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
height: 20px;
padding: 0 6px;
border: 1px solid #d8e6f6;
border-radius: 999px;
background: #eef5ff;
color: var(--accent);
font-size: 11px;
font-weight: 760;
line-height: 1;
}
.text-chat-history-meta {
display: grid;
align-content: center;
justify-items: end;
gap: 8px;
min-width: 0;
}
.text-chat-history-meta time {
color: #94a3b8;
font-size: 11px;
font-weight: 650;
line-height: 1;
}
.text-chat-delete-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 28px;
min-height: 28px;
max-height: 28px;
padding: 0 9px;
border: 1px solid #cfe0f4;
border-radius: 999px;
background: rgba(247, 251, 255, 0.78);
color: #4f7fb5;
font-size: 11px;
font-weight: 760;
line-height: 1;
appearance: none;
cursor: pointer;
white-space: nowrap;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.text-chat-delete-btn:hover {
border-color: #e8c4be;
background: #fff7f6;
color: #b42318;
box-shadow: 0 6px 14px rgba(180, 35, 24, 0.08);
}
.text-chat-history-item.active .text-chat-delete-btn {
border-color: #c5dbf4;
background: rgba(255, 255, 255, 0.78);
color: #2f6db7;
}
.text-chat-history-item.active .text-chat-delete-btn:hover {
border-color: #e8c4be;
background: #fff7f6;
color: #b42318;
box-shadow: 0 6px 14px rgba(180, 35, 24, 0.08);
}
.text-chat-empty-mini {
padding: 14px 10px;
color: var(--muted);
text-align: center;
border: 1px dashed #cbd5e1;
border-radius: 8px;
background: #ffffff;
}
.text-chat-main {
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
container-type: inline-size;
min-height: 0;
min-width: 0;
background: #ffffff;
}
.text-chat-topbar {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
padding: 12px 20px;
border-bottom: 1px solid var(--border);
background: #ffffff;
}
.text-chat-current {
display: grid;
gap: 3px;
min-width: 0;
}
.text-chat-current strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 16px;
font-weight: 800;
}
.text-chat-current span {
color: var(--muted);
font-size: 12px;
}
.text-chat-modelbar {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 8px;
min-width: 0;
padding: 0;
}
.text-chat-modelbar > label:not(.switch-row) {
width: min(340px, 42vw);
margin: 0;
}
.switch-row {
display: inline-flex;
align-items: center;
gap: 6px;
justify-content: center;
min-height: 32px;
height: 32px;
min-width: 76px;
padding: 0 9px;
border: 1px solid #d8e1ec;
border-radius: 8px;
background: #f8fafc;
color: var(--text);
font-weight: 650;
white-space: nowrap;
font-size: 12px;
}
.switch-row input[type="checkbox"] {
width: 18px;
height: 18px;
min-width: 18px;
margin: 0;
accent-color: var(--accent);
}
.text-chat-messages {
display: flex;
flex-direction: column;
align-content: start;
gap: 16px;
min-height: 0;
padding: 26px min(5vw, 58px);
overflow: auto;
background:
linear-gradient(180deg, #f8fbfa 0, rgba(255, 255, 255, 0.96) 180px),
#ffffff;
}
.text-chat-empty {
align-self: center;
display: grid;
gap: 14px;
width: min(620px, 100%);
margin-top: min(12vh, 96px);
padding: 28px;
border: 1px solid #dbe5ef;
border-radius: 8px;
background: #ffffff;
box-shadow: 0 12px 30px rgba(26, 32, 44, 0.06);
}
.text-chat-empty strong {
font-size: 20px;
font-weight: 800;
}
.text-chat-empty p {
color: var(--muted);
line-height: 1.55;
}
.text-chat-suggestions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.text-chat-suggestions button {
min-height: 38px;
border: 1px solid #a9c8e8;
border-radius: 8px;
background: #eaf2fb;
color: var(--accent-strong);
cursor: pointer;
text-align: left;
padding: 8px 10px;
}
.text-chat-suggestions button:hover {
border-color: var(--accent);
background: #ddebf9;
}
.text-chat-message {
display: flex;
gap: 10px;
max-width: min(820px, 88%);
}
.text-chat-message.user {
align-self: flex-end;
flex-direction: row-reverse;
}
.text-chat-message.assistant,
.text-chat-message.system {
align-self: flex-start;
}
.text-chat-avatar {
display: grid;
place-items: center;
flex: 0 0 30px;
width: 30px;
height: 30px;
margin-top: 18px;
border-radius: 8px;
background: #eaf2fb;
color: #2f6db7;
font-size: 12px;
font-weight: 800;
}
.text-chat-message.user .text-chat-avatar {
background: var(--accent);
color: #ffffff;
}
.text-chat-content {
display: grid;
gap: 6px;
min-width: 0;
}
.text-chat-role {
color: var(--muted);
font-size: 12px;
font-weight: 700;
padding: 0 2px;
}
.text-chat-message.user .text-chat-role {
display: none;
}
.text-chat-message.user .text-chat-avatar {
margin-top: 0;
}
.text-chat-bubble {
white-space: pre-wrap;
word-break: break-word;
border: 1px solid #d9e1ea;
border-radius: 8px;
padding: 13px 15px;
background: #ffffff;
color: var(--text);
line-height: 1.72;
box-shadow: 0 8px 22px rgba(28, 38, 54, 0.055);
}
.text-chat-bubble-wrap {
display: grid;
gap: 6px;
justify-items: start;
}
.text-chat-message.user .text-chat-bubble-wrap {
justify-items: end;
}
.text-message-copy {
min-height: 26px;
padding: 4px 8px;
border: 1px solid #cbd8e6;
border-radius: 6px;
background: #ffffff;
color: #386097;
font-size: 12px;
line-height: 1;
cursor: pointer;
}
.text-message-copy:hover {
border-color: #9bb7d8;
background: #f4f8fd;
}
.text-chat-message.user .text-chat-bubble {
border-color: #9fc3e8;
background: #eaf2fb;
box-shadow: 0 6px 18px rgba(47, 109, 183, 0.08);
}
.text-chat-message.system .text-chat-bubble {
background: #f1f5f9;
color: var(--muted);
}
.text-chat-footer {
display: grid;
gap: 10px;
min-width: 0;
padding: 12px min(4vw, 42px) 14px;
border-top: 1px solid var(--border);
background: #ffffff;
}
.text-chat-tools {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: flex-end;
align-items: end;
min-width: 0;
grid-column: 2;
grid-row: 1;
}
.text-chat-tools button,
.text-chat-modelbar button {
min-height: 32px;
height: 32px;
padding: 6px 10px;
border-radius: 7px;
font-size: 12px;
}
.text-chat-tools .secondary,
.text-chat-tools .danger,
.text-chat-modelbar .secondary {
padding-inline: 9px;
}
.text-chat-modelbar select {
min-height: 32px;
height: 32px;
padding: 6px 10px;
border-radius: 7px;
font-size: 13px;
}
.text-chat-composer {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: end;
min-width: 0;
padding: 9px;
border: 1px solid #cbd8e6;
border-radius: 8px;
background: #fbfcfe;
box-shadow: 0 8px 24px rgba(26, 32, 44, 0.06);
grid-column: 1 / -1;
grid-row: 2;
}
.text-chat-composer textarea {
min-height: 50px;
max-height: 180px;
resize: none;
border: 0;
padding: 10px;
background: transparent;
box-shadow: none;
}
.text-chat-composer .primary {
min-width: 72px;
min-height: 38px;
padding: 8px 14px;
align-self: end;
}
.text-chat-footer {
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
}
.text-chat-topbar .text-chat-modelbar {
grid-column: 2;
grid-row: 1;
}
.text-chat-modelbar > label:not(.switch-row) {
display: grid;
grid-template-columns: auto minmax(220px, 1fr);
align-items: center;
gap: 8px;
min-width: 0;
max-width: 100%;
}
.text-chat-model-label {
white-space: nowrap;
}
.text-chat-modelbar > label:not(.switch-row) select {
min-width: 220px;
}
@container (max-width: 560px) {
.text-chat-footer {
grid-template-columns: minmax(0, 1fr);
align-items: stretch;
padding-inline: 14px;
}
.text-chat-tools {
grid-column: 1;
grid-row: 1;
justify-content: flex-end;
}
.text-chat-modelbar {
grid-column: 1;
grid-row: 2;
justify-content: flex-start;
}
.text-chat-modelbar > label:not(.switch-row) {
width: 100%;
grid-template-columns: auto minmax(0, 1fr);
}
.text-chat-modelbar > label:not(.switch-row) select {
min-width: 0;
width: 100%;
}
.text-chat-composer {
grid-column: 1;
grid-row: 3;
}
}
.light-result {
background: #ffffff;
color: var(--text);
border: 1px solid var(--border);
min-height: 420px;
}
label {
display: grid;
gap: 7px;
color: #344054;
font-weight: 650;
}
input,
select,
textarea {
width: 100%;
border: 1px solid var(--control-border);
border-radius: 6px;
padding: var(--control-padding-y) var(--control-padding-x);
background: var(--control-surface);
color: var(--control-text);
outline: none;
}
input[type="number"] {
padding-right: 6px;
appearance: auto;
-webkit-appearance: auto;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
opacity: 1;
margin: 0;
cursor: pointer;
}
input:disabled,
select:disabled,
textarea:disabled {
--control-surface: var(--control-disabled-surface);
--control-border: var(--control-disabled-border);
--control-text: var(--control-disabled-text);
cursor: not-allowed;
opacity: 1;
}
textarea {
min-height: 132px;
resize: vertical;
line-height: 1.48;
}
input:focus,
select:focus,
textarea:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(47, 109, 183, 0.14);
}
.form-grid {
display: grid;
grid-template-columns: 1fr 144px;
gap: var(--form-gap);
margin-bottom: var(--section-gap);
}
.options-grid {
display: grid;
grid-template-columns: repeat(4, minmax(120px, 1fr));
gap: calc(15px * var(--ui-density));
margin: var(--section-gap) 0;
}
.ark-model-panel {
border: 1px solid #a9c8e8;
border-radius: 8px;
background: #f6fbf8;
padding: 14px;
margin: 12px 0 14px;
}
.model-category-panel {
display: grid;
grid-template-columns: repeat(2, minmax(360px, 1fr));
gap: 12px;
margin: 0;
}
.model-category-card {
border: 1px solid #c7d8ea;
border-radius: 8px;
background: #ffffff;
padding: 14px;
display: grid;
gap: 12px;
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}
.model-category-head {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: flex-start;
border-bottom: 1px solid #e5eee9;
padding-bottom: 10px;
}
.model-category-head strong {
display: block;
color: var(--accent-strong);
font-size: 15px;
}
.model-category-head span {
display: block;
color: var(--muted);
font-size: 12px;
margin-top: 3px;
}
.model-category-fields {
display: grid;
grid-template-columns: minmax(180px, 0.9fr) minmax(220px, 1.1fr);
gap: 10px;
align-items: end;
}
.model-category-fields label:last-child {
grid-column: 1 / -1;
}
.model-category-note {
color: var(--muted);
font-size: 12px;
line-height: 1.45;
min-height: 34px;
}
.model-category-key-manager {
border: 1px solid #d7e2ef;
border-radius: 8px;
background: #f8fbfa;
padding: 10px;
display: grid;
gap: 10px;
}
.model-category-key-head {
display: grid;
gap: 3px;
}
.model-category-key-head strong {
color: var(--accent-strong);
font-size: 13px;
}
.model-category-key-head span {
color: var(--muted);
font-size: 12px;
}
.category-key-add-row,
.category-key-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 74px;
gap: 8px;
align-items: center;
}
.category-key-row {
grid-template-columns: 28px minmax(180px, 1fr) 64px 64px;
}
.category-key-list {
display: grid;
gap: 8px;
}
.model-category-status {
min-height: 18px;
color: var(--muted);
font-size: 12px;
white-space: pre-wrap;
border-radius: 6px;
background: #f8fafc;
border: 1px dashed #d6dee8;
padding: 8px 10px;
}
.model-category-status.ok {
color: var(--ok);
background: #f3faf6;
border-color: #a9c8e8;
}
.model-category-status.error {
color: var(--danger);
background: #fff7f7;
border-color: #f0b7b7;
}
.ark-model-panel-head {
display: flex;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.ark-model-panel-head strong {
display: block;
color: var(--accent-strong);
font-size: 15px;
margin-bottom: 3px;
}
.ark-model-panel-head span {
color: #5c728a;
font-size: 13px;
}
.ark-model-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 10px;
}
.ark-model-card {
display: grid;
gap: 10px;
align-content: start;
border: 1px solid #cfe0f0;
border-radius: 8px;
background: #ffffff;
padding: 12px;
}
.ark-model-card.active {
border-color: #2f6db7;
box-shadow: 0 0 0 2px rgba(47, 109, 183, 0.12);
}
.ark-model-card strong {
color: #1d4a83;
font-size: 14px;
}
.ark-model-card small {
color: #5e7180;
line-height: 1.45;
}
.ark-model-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ark-model-status {
min-height: 18px;
color: #5e7180;
font-size: 12px;
white-space: pre-wrap;
}
.ark-model-status.ok {
color: #2563a7;
}
.ark-model-status.error {
color: var(--danger);
}
.quick-options {
grid-template-columns: minmax(144px, 1.4fr) minmax(96px, 0.8fr) minmax(96px, 0.8fr);
margin: var(--section-gap) 0;
}
.toggle-row {
color: var(--muted);
margin: 8px 0 16px;
}
.advanced {
border: 1px solid var(--border);
border-radius: 6px;
background: #fbfcfe;
margin: var(--section-gap) 0;
padding: 0;
}
.advanced summary {
cursor: pointer;
padding: 12px 14px;
font-weight: 760;
color: #344054;
}
.advanced .form-grid,
.advanced .options-grid,
.advanced .toggle-row {
margin-left: 14px;
margin-right: 14px;
}
.advanced .options-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
}
.advanced .form-grid {
padding-top: 2px;
}
.toggle-row label {
display: flex;
grid-template-columns: none;
align-items: center;
gap: 8px;
font-weight: 600;
}
.toggle-row input {
width: auto;
}
button,
.button-link {
border: 1px solid var(--border);
border-radius: 6px;
background: #ffffff;
color: var(--text);
padding: var(--button-padding-y) var(--button-padding-x);
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--button-height);
}
button:hover,
.button-link:hover {
border-color: #aeb7c6;
}
button:disabled,
.disabled {
opacity: 0.46;
pointer-events: none;
}
.topbar .module-tab {
display: grid;
grid-template-rows: 20px 18px;
align-content: center;
align-items: center;
justify-content: stretch;
justify-items: start;
min-height: 68px;
text-align: left;
}
.topbar .module-tab strong,
.topbar .module-tab span {
justify-self: start;
text-align: left;
}
body.sidebar-collapsed .topbar .module-tab {
grid-template-rows: 1fr;
justify-items: center;
min-height: 48px;
text-align: center;
}
body.sidebar-collapsed .topbar .module-tab strong,
body.sidebar-collapsed .topbar .module-tab span {
display: none;
}
.primary {
background: var(--accent);
border-color: var(--accent);
color: #ffffff;
font-weight: 760;
}
.primary:hover {
background: var(--accent-strong);
border-color: var(--accent-strong);
}
.secondary {
color: #45546b;
border-color: var(--border);
background: #ffffff;
}
.secondary:hover {
color: var(--text);
border-color: #c6d2e2;
background: var(--surface-3);
}
.danger {
color: var(--danger);
border-color: #f0b8b2;
background: #fff8f7;
}
.danger.confirming {
color: #ffffff;
border-color: var(--danger);
background: var(--danger);
}
.icon-button {
min-width: 88px;
}
.file-picker {
margin-bottom: 8px;
}
.hidden-input {
display: none;
}
[hidden] {
display: none !important;
}
.upload-box {
border: 0;
border-radius: 0;
background: transparent;
padding: 0;
display: grid;
gap: 8px;
margin-bottom: var(--section-gap);
-webkit-tap-highlight-color: transparent;
}
.drop-zone {
border: 1px dashed #9aa8bb;
border-radius: 8px;
background: #fbfcfe;
padding: var(--section-gap);
margin-bottom: 10px;
display: grid;
gap: 8px;
}
.upload-box .drop-zone {
border: 0;
border-radius: 0;
background: transparent;
padding: 0;
margin-bottom: 0;
}
.upload-box:has(.drop-zone.drag-over) {
border-color: transparent;
background: transparent;
box-shadow: none;
}
.drop-zone.drag-over {
border-color: var(--accent);
background: #eef7f3;
box-shadow: 0 0 0 3px rgba(47, 109, 183, 0.12);
}
.upload-box .drop-zone.drag-over {
background: transparent;
box-shadow: none;
}
.drop-zone strong {
font-size: 15px;
}
.drop-zone p {
color: var(--muted);
line-height: 1.45;
}
.text-ref-drop-zone {
margin-bottom: 10px;
}
.text-ref-drop-zone .compact {
margin-bottom: 0;
}
.file-summary {
border: 1px dashed #bcc5d3;
border-radius: 6px;
color: var(--muted);
background: #fbfcfe;
padding: 12px;
margin-bottom: 14px;
}
.upload-box .file-summary {
margin-bottom: 0;
background: #ffffff;
}
.upload-box .file-summary[hidden] {
display: none !important;
}
.upload-box .file-summary-empty {
color: #66758a;
background: rgba(255, 255, 255, 0.78);
border-color: #c8d7e8;
}
.upload-box .selected-preview {
margin: 0;
}
.plan-summary-inline {
min-height: 38px;
display: inline-flex;
align-items: center;
flex: 1 1 220px;
border: 1px dashed #bcc5d3;
border-radius: 6px;
color: var(--muted);
background: #fbfcfe;
padding: 9px 12px;
line-height: 1.35;
}
.model-capability-hint {
margin: -4px 0 14px;
min-height: 34px;
border: 1px dashed #c8d9ec;
border-radius: 6px;
background: #f2f7fb;
color: #2f5e88;
padding: 8px 10px;
font-size: 13px;
line-height: 1.35;
}
.model-capability-hint.capability-note-editable { cursor: text; }
.model-capability-hint.capability-note-editable:hover { border-style: solid; border-color: #9cc0e6; }
.model-capability-hint .capability-note-extra { opacity: 0.82; }
.model-capability-hint.capability-note-editing { cursor: default; }
.capability-note-editor {
width: 100%;
box-sizing: border-box;
resize: vertical;
min-height: 76px;
font: inherit;
color: #1f3d5c;
border: 1px solid #9cc0e6;
border-radius: 6px;
padding: 6px 8px;
background: #fff;
}
.capability-note-actions { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.capability-note-btn {
font-size: 12px;
padding: 4px 12px;
border-radius: 6px;
cursor: pointer;
border: 1px solid #c8d9ec;
background: #fff;
color: #2f5e88;
line-height: 1.4;
}
.capability-note-btn.capability-note-save { background: #2f6fe0; border-color: #2f6fe0; color: #fff; }
.capability-note-btn.capability-note-reset { color: #b23a58; }
.command-row + .model-capability-hint {
margin-top: 10px;
margin-bottom: 2px;
}
.key-manager {
border: 1px solid var(--border);
border-radius: 8px;
background: #fbfcfe;
padding: 14px;
margin-bottom: 14px;
}
.key-add-row {
grid-template-columns: 1fr 120px;
margin-bottom: 10px;
}
.key-add-actions {
display: flex;
align-items: end;
}
.key-list {
display: grid;
gap: 8px;
}
.key-empty {
color: var(--muted);
border: 1px dashed #bcc5d3;
border-radius: 6px;
padding: 10px;
background: #ffffff;
}
.key-row {
display: grid;
grid-template-columns: 34px minmax(180px, 1fr) auto auto;
gap: 8px;
align-items: center;
}
.key-index {
color: var(--muted);
font-weight: 750;
text-align: center;
}
.key-row input {
font-family: Consolas, "Microsoft YaHei", monospace;
font-size: 13px;
}
.media-output-card {
border: 1px solid var(--border);
border-radius: 8px;
background: #ffffff;
padding: 12px;
display: grid;
gap: 7px;
}
.media-output-card strong {
color: var(--text);
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.media-output-card span {
color: var(--muted);
font-size: 12px;
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.media-output-link {
justify-self: start;
text-decoration: none;
}
.media-preview-panel {
width: min(1380px, calc(100vw - 40px)) !important;
max-height: calc(100dvh - 32px);
display: flex;
flex-direction: column;
overflow: hidden;
}
.media-preview-stage {
min-height: 0;
min-width: 0;
flex: 1 1 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: #f8fafc;
padding: 14px;
}
.media-preview-stage.is-video {
min-height: 0;
flex: 1 1 auto;
padding: 10px;
overflow: hidden;
height: auto;
}
.media-video-player {
width: 100%;
min-height: 0;
flex: 1 1 auto;
display: grid;
grid-template-rows: minmax(220px, 1fr);
gap: 0;
}
.media-preview-tools {
width: min(520px, 100%);
display: grid;
grid-template-columns: auto minmax(130px, 220px) auto;
gap: 10px;
align-items: center;
}
.media-preview-viewport {
width: 100%;
height: min(68dvh, calc(100dvh - 330px));
max-height: min(68dvh, calc(100dvh - 330px));
flex: 1 1 auto;
min-height: 0;
display: grid;
place-items: center;
overflow: hidden;
cursor: default;
touch-action: none;
padding: 4px;
}
.media-preview-viewport.zoomed {
cursor: grab;
}
.media-preview-viewport.dragging {
cursor: grabbing;
}
.media-preview-stage.is-video .media-preview-viewport {
width: 100%;
height: 100%;
max-height: none;
position: relative;
padding: 0;
border-radius: 8px;
background: #0f172a;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.media-preview-stage video {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
box-sizing: border-box;
object-fit: contain;
border-radius: 8px;
background: #0f172a;
transform-origin: center center;
will-change: transform;
box-shadow: 0 18px 46px rgba(15, 23, 42, 0.16);
}
.media-preview-stage.is-video video {
position: static;
inset: auto;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
display: block;
object-fit: contain;
box-shadow: none;
}
.media-video-controls {
display: grid;
grid-template-columns: auto auto minmax(180px, 1fr);
gap: 12px;
align-items: center;
padding: 10px 12px;
border: 1px solid rgba(47, 103, 178, 0.18);
border-radius: 12px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}
.media-video-play {
min-width: 72px;
}
.media-video-time {
color: #334155;
font-size: 13px;
font-weight: 780;
white-space: nowrap;
}
.media-video-progress {
width: 100%;
min-width: 0;
}
.audio-preview-box {
width: min(680px, 100%);
display: grid;
gap: 14px;
padding: 18px;
border: 1px solid var(--border);
border-radius: 8px;
background: #ffffff;
}
.audio-preview-box audio {
width: 100%;
}
.selected-preview {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
gap: 8px;
max-height: 220px;
overflow: auto;
margin: -4px 0 14px;
}
.selected-thumb {
border: 1px solid var(--border);
border-radius: 6px;
overflow: hidden;
background: #ffffff;
min-width: 0;
position: relative;
}
.selected-thumb.reused {
border-color: #84aed6;
}
.selected-thumb.draggable {
cursor: grab;
}
.selected-thumb.reference-dragging-live {
position: fixed;
z-index: var(--z-drag-ghost);
margin: 0;
pointer-events: none;
box-shadow: 0 14px 32px rgba(15, 23, 42, 0.36);
transform: scale(1.05);
opacity: 0.97;
cursor: grabbing;
}
.selected-thumb.reference-dragging-live.reference-dragging-delete {
border-color: #d9534f;
box-shadow: 0 12px 26px rgba(217, 83, 79, 0.45);
}
.selected-thumb.reference-drag-placeholder {
border-color: transparent;
background: none;
}
.selected-thumb.dragging {
visibility: hidden;
}
.selected-thumb.drag-over {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.thumb-remove {
position: absolute;
top: 6px;
right: 6px;
min-width: 0;
padding: 4px 7px;
border-color: rgba(185, 28, 28, 0.35);
background: rgba(255, 255, 255, 0.92);
color: var(--danger);
font-size: 12px;
}
.selected-thumb img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
display: block;
background: #eef1f6;
}
.selected-thumb video,
.selected-thumb .thumb-preview-plain {
width: 100%;
aspect-ratio: 1 / 1;
}
.selected-thumb .thumb-preview-plain {
display: grid;
place-items: center;
border: 0;
border-radius: 0;
padding: 0;
background: #f7fafd;
color: var(--text);
overflow: hidden;
}
.selected-thumb .thumb-preview-plain video {
object-fit: cover;
display: block;
background: #eef2ff;
}
.selected-thumb .media-thumb-icon {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 999px;
background: #eaf2fb;
color: var(--accent);
font-weight: 700;
padding: 0;
}
.selected-thumb span {
display: block;
padding: 6px;
font-size: 12px;
color: var(--muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.result-box {
background: #101828;
color: #d7e7ff;
border-radius: 6px;
padding: 12px;
min-height: 72px;
white-space: pre-wrap;
overflow: auto;
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}
.result-box.is-error,
.light-result.is-error,
.file-summary.is-error {
border-color: #f2b8ad;
background: #fff7f5;
color: #9f1d1d;
}
.progress-wrap {
margin-bottom: 10px;
}
.state-pill {
display: inline-flex;
align-items: center;
border-radius: 999px;
padding: 5px 8px;
background: #eef7f3;
color: var(--ok);
border: 1px solid #c7d8ea;
font-weight: 700;
}
.state-pill.neutral {
background: #f2f4f7;
color: #475467;
border-color: #d0d5dd;
}
.state-pill.error {
background: #fff1f0;
color: var(--danger);
border-color: #ffc9c4;
}
.state-pill.warn {
background: #fff8eb;
color: var(--warning);
border-color: #ffd99a;
}
.compact {
margin-bottom: 14px;
}
.folder-row {
margin: 10px 0 14px;
}
.runtime-note {
border-color: #c7d2fe;
background: #f8fafc;
color: #475569;
}
.public-access #settings-output-dir {
background: #f8fafc;
color: #64748b;
}
.job-select {
text-align: left;
width: 100%;
background: transparent;
border: none;
min-height: 56px;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 4px;
padding: 2px;
min-width: 0;
overflow: hidden;
}
.job-row-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.job-reuse,
.job-favorite {
width: 100%;
min-height: 34px;
padding: 6px 8px;
}
.job-reuse,
.job-favorite,
.case-reuse,
.case-delete {
min-width: 64px;
color: var(--blue);
border-color: #bfd0ea;
background: #f7faff;
}
.job-reuse,
.job-favorite {
min-width: 0;
}
.case-delete {
min-width: 86px;
color: var(--danger);
border-color: #f1b8b2;
background: #fff8f7;
}
.case-delete.confirming {
color: #ffffff;
border-color: var(--danger);
background: var(--danger);
}
.job-row strong,
.job-select strong,
.case-select strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.job-select span {
flex: 0 0 auto;
color: var(--muted);
font-size: 12px;
}
.job-select strong {
flex: 1 1 auto;
min-width: 0;
}
.modal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 14px;
}
.modal-head-actions {
display: inline-flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
}
.modal-mask {
--modal-edge: clamp(8px, 2vw, 18px);
position: fixed;
inset: 0;
display: grid;
place-items: center;
background: rgba(15, 23, 42, 0.36);
padding: var(--modal-edge);
overflow: hidden;
z-index: var(--z-modal);
}
.modal-mask[hidden] {
display: none;
}
#accountUsageModal,
#imagePreviewModal,
#mediaPreviewModal,
#panoramaPreviewModal {
z-index: var(--z-modal-priority);
}
body:not(.auth-required) #accountUsageModal:not([hidden]) {
opacity: 1 !important;
}
body:not(.auth-required) #accountUsageModal:not([hidden]) .account-usage-panel {
opacity: 1 !important;
transform: none !important;
}
.modal-panel {
width: min(760px, 100%);
max-width: calc(100dvw - (var(--modal-edge) * 2));
max-height: calc(100dvh - (var(--modal-edge) * 2));
box-sizing: border-box;
overflow: hidden;
background: #ffffff;
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 22px 60px rgba(16, 24, 40, 0.22);
padding: 18px;
}
.app-confirm-modal {
z-index: var(--z-modal-confirm);
background: rgba(15, 23, 42, 0.42);
}
.app-confirm-panel {
display: grid;
gap: 14px;
width: min(420px, calc(100vw - 28px));
padding: 16px;
border-radius: 14px;
}
.app-confirm-head strong {
color: var(--text);
font-size: 18px;
font-weight: 850;
line-height: 1.25;
}
.app-confirm-message {
margin: 0;
color: #475569;
font-size: 14px;
line-height: 1.55;
}
.app-confirm-prompt {
display: grid;
gap: 7px;
margin: 0;
color: var(--muted);
font-size: 12px;
font-weight: 820;
}
.app-confirm-prompt input {
width: 100%;
min-height: 40px;
padding: 0 11px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface-2);
color: var(--text);
font: inherit;
outline: none;
}
.app-confirm-prompt input:focus {
border-color: rgba(47, 109, 183, 0.52);
background: var(--surface);
box-shadow: var(--focus-ring);
}
.app-confirm-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.app-confirm-actions button {
width: 100%;
min-height: 40px;
border-radius: 10px;
}
.modal-panel.media-preview-panel {
width: min(1380px, calc(100vw - 40px));
height: min(860px, calc(100dvh - 32px));
max-height: calc(100dvh - 32px);
display: flex;
flex-direction: column;
}
.modal-panel.media-preview-panel.is-video-preview {
width: min(1480px, calc(100vw - 48px));
height: min(820px, calc(100dvh - 48px));
}
.modal-tools {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
}
.case-list {
display: grid;
gap: 8px;
max-height: min(520px, calc(100vh - 180px));
overflow: auto;
}
#caseModal.modal-mask {
place-items: start center;
padding-top: max(16px, min(6vh, 56px));
}
#caseModal .modal-panel {
max-height: min(720px, calc(100dvh - 42px));
}
.case-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
align-items: stretch;
padding: 9px;
border: 1px solid #e2ecf4;
border-radius: 14px;
background: #ffffff;
}
.case-select {
grid-column: 1 / -1;
text-align: left;
width: 100%;
background: #fbfcfe;
display: grid;
grid-template-columns: 58px minmax(0, 1fr);
align-items: center;
gap: 10px;
min-height: 74px;
padding: 8px;
border-radius: 10px;
}
.case-row > button.case-reuse,
.case-row > button.case-delete {
min-height: 34px;
border-radius: 10px;
}
.case-info {
display: grid;
gap: 4px;
min-width: 0;
}
.case-preview {
width: 58px;
height: 58px;
display: grid;
place-items: center;
overflow: hidden;
border: 1px solid #dbe7f0;
border-radius: 8px;
background: linear-gradient(180deg, #f8fbfd 0%, #eef6f5 100%);
color: var(--muted);
font-size: 13px;
font-weight: 800;
}
.case-preview img,
.case-preview video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.case-param-list {
display: flex;
flex-wrap: wrap;
gap: 4px;
min-width: 0;
}
.case-param-list em {
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 2px 7px;
border: 1px solid #d7e2ef;
border-radius: 999px;
background: #f0faf5;
color: #2f6db7;
font-style: normal;
font-size: 11px;
font-weight: 760;
}
.case-select .case-info > span:not(.case-param-list),
.empty-row {
color: var(--muted);
}
.empty-row {
border: 1px dashed var(--border);
border-radius: 6px;
padding: 14px 12px;
background: #fbfcfe;
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
}
.empty-row.error {
border-color: #f2b8ad;
background: #fff7f5;
color: #9f1d1d;
}
.empty-row.warn {
border-color: #f4d28a;
background: #fffbeb;
color: #8a5a00;
}
.empty-row,
.workflow-project-empty {
display: grid;
justify-items: center;
gap: 7px;
text-align: center;
}
.empty-row::before,
.workflow-project-empty::before {
content: "";
width: 40px;
height: 40px;
background: currentColor;
opacity: 0.4;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='11' width='28' height='24' rx='4.5'/%3E%3Cpath d='M11 29.5l6.5-7.5 5 5.5 4.5-5.5 3 3.5'/%3E%3Ccircle cx='15.5' cy='18.5' r='1.8'/%3E%3Cpath d='M40 8v7M36.5 11.5h7'/%3E%3Cpath d='M40.5 24.5l1.1 2.4 2.4 1.1-2.4 1.1-1.1 2.4-1.1-2.4-2.4-1.1 2.4-1.1z' fill='%23000' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='11' width='28' height='24' rx='4.5'/%3E%3Cpath d='M11 29.5l6.5-7.5 5 5.5 4.5-5.5 3 3.5'/%3E%3Ccircle cx='15.5' cy='18.5' r='1.8'/%3E%3Cpath d='M40 8v7M36.5 11.5h7'/%3E%3Cpath d='M40.5 24.5l1.1 2.4 2.4 1.1-2.4 1.1-1.1 2.4-1.1-2.4-2.4-1.1 2.4-1.1z' fill='%23000' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
}
.gallery .empty-row {
grid-column: 1 / -1;
}
.preview-panel {
width: min(1280px, calc(100vw - 16px));
height: min(860px, calc(100dvh - 24px));
max-height: calc(100dvh - 24px);
display: grid;
grid-template-rows: auto minmax(0, 1fr);
}
.preview-panel.is-canvas-preview {
grid-template-rows: auto auto minmax(0, 1fr);
}
.preview-tools {
display: grid;
grid-template-columns: auto auto minmax(140px, 220px) auto auto auto auto;
gap: 10px;
align-items: center;
margin-bottom: 12px;
}
.preview-canvas-tools[hidden] {
display: none !important;
}
@keyframes preview-toolbar-in {
from {
opacity: 0;
transform: translateY(-6px) scale(0.992);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes preview-tool-in {
from {
opacity: 0;
transform: translateY(8px) scale(0.972);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.preview-canvas-tools {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 6px;
margin: 2px 0 18px;
padding: 7px;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: thin;
border: 1px solid rgba(199, 218, 240, 0.72);
border-radius: 20px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(246, 250, 255, 0.72)),
rgba(247, 251, 255, 0.68);
box-shadow:
0 12px 32px rgba(37, 90, 156, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.86);
backdrop-filter: blur(16px) saturate(1.08);
animation: preview-toolbar-in 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.preview-canvas-tool {
position: relative;
isolation: isolate;
flex: 0 1 184px;
min-width: 148px;
min-height: 52px;
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
align-items: center;
gap: 9px;
overflow: hidden;
padding: 8px 12px 8px 8px;
border: 1px solid transparent;
border-radius: 15px;
background: transparent;
color: #102033;
text-align: left;
box-shadow: none;
transform: translateY(0) scale(1);
transition:
transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
border-color 180ms cubic-bezier(0.16, 1, 0.3, 1),
background 180ms cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1),
color 160ms ease;
}
.preview-canvas-tools:not(.is-ready) .preview-canvas-tool {
opacity: 0;
transform: translateY(8px) scale(0.972);
}
.preview-canvas-tools.is-ready .preview-canvas-tool {
animation: preview-tool-in 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
animation-delay: calc(var(--preview-tool-index, 0) * 32ms);
}
.preview-canvas-tool::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(244, 249, 255, 0.56)),
linear-gradient(135deg, rgba(47, 109, 183, 0.075), rgba(242, 146, 47, 0.035));
opacity: 0.64;
transition:
opacity 190ms cubic-bezier(0.16, 1, 0.3, 1),
transform 190ms cubic-bezier(0.16, 1, 0.3, 1);
}
.preview-canvas-tool:hover {
border-color: rgba(128, 171, 222, 0.28);
background: transparent;
color: #1f66b6;
box-shadow: 0 10px 20px rgba(47, 109, 183, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.86);
transform: translateY(-1px);
}
.preview-canvas-tool:hover::before,
.preview-canvas-tool.is-pressed::before {
opacity: 1;
transform: scale(0.995);
}
.preview-canvas-tool:active,
.preview-canvas-tool.is-pressed {
transform: translateY(0) scale(0.986);
box-shadow: 0 4px 12px rgba(47, 109, 183, 0.09), inset 0 1px 3px rgba(47, 109, 183, 0.1);
}
.preview-canvas-tool:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
.preview-canvas-tool-icon {
width: 32px;
height: 32px;
display: grid;
place-items: center;
border-radius: 12px;
background: rgba(47, 109, 183, 0.09);
color: #2f6db7;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
transition:
transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
background 180ms cubic-bezier(0.16, 1, 0.3, 1),
color 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.preview-canvas-tool:hover .preview-canvas-tool-icon {
color: #245fa3;
background: rgba(47, 109, 183, 0.14);
transform: translateY(-1px) scale(1.04);
}
.preview-canvas-tool:active .preview-canvas-tool-icon,
.preview-canvas-tool.is-pressed .preview-canvas-tool-icon {
transform: scale(0.95);
}
.preview-canvas-tool-icon svg {
width: 17px;
height: 17px;
display: block;
fill: none;
stroke: currentColor;
stroke-width: 1.85;
stroke-linecap: round;
stroke-linejoin: round;
}
.preview-canvas-tool-text {
min-width: 0;
display: grid;
gap: 0;
}
.preview-canvas-tool-text strong,
.preview-canvas-tool-text small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.preview-canvas-tool-text strong {
font-size: 13.5px;
font-weight: 860;
line-height: 1.12;
letter-spacing: 0;
}
.preview-canvas-tool-text small {
color: #65758a;
font-size: 11px;
font-weight: 660;
line-height: 1.14;
}
.preview-canvas-tool-text em {
display: inline-flex;
align-items: center;
min-height: 16px;
margin-left: 5px;
padding: 0 5px;
border-radius: 999px;
background: rgba(47, 109, 183, 0.1);
color: #2f6db7;
font-style: normal;
font-weight: 900;
}
.preview-nav-btn[hidden],
.preview-counter[hidden] {
display: none !important;
}
.preview-counter {
min-width: 56px;
text-align: center;
color: var(--muted);
font-size: 12px;
font-weight: 800;
}
.preview-stage {
position: relative;
min-height: 220px;
height: auto;
overflow: hidden;
display: grid;
place-items: center;
border: 1px solid var(--border);
border-radius: 8px;
background: #ffffff;
padding: 14px;
cursor: default;
user-select: none;
touch-action: none;
}
.preview-stage.zoomed {
cursor: grab;
}
.preview-stage.dragging {
cursor: grabbing;
}
#previewImage {
display: block;
width: auto;
height: auto;
max-width: none;
max-height: none;
object-fit: contain;
opacity: 0;
transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1);
user-select: none;
}
#previewImage.preview-image-ready {
opacity: 1;
}
#previewImage.preview-image-loading {
opacity: 0;
}
body.theme-dark:not(.auth-required) .preview-canvas-tools {
border-color: rgba(94, 122, 160, 0.42);
background: rgba(18, 28, 44, 0.78);
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.055);
}
body.theme-dark:not(.auth-required) .preview-canvas-tool {
border-color: transparent;
background: transparent;
color: #e8eff8;
box-shadow: none;
}
body.theme-dark:not(.auth-required) .preview-canvas-tool::before {
background:
linear-gradient(180deg, rgba(30, 43, 64, 0.98), rgba(20, 31, 49, 0.92)),
linear-gradient(135deg, rgba(90, 166, 232, 0.12), rgba(242, 146, 47, 0.06));
}
body.theme-dark:not(.auth-required) .preview-canvas-tool:hover {
border-color: rgba(111, 174, 238, 0.58);
color: #cce7ff;
background: transparent;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
body.theme-dark:not(.auth-required) .preview-canvas-tool-icon {
color: #9cc4ec;
background: rgba(90, 166, 232, 0.14);
}
body.theme-dark:not(.auth-required) .preview-canvas-tool-text small {
color: #a8b7c9;
}
@media (prefers-reduced-motion: reduce) {
.preview-canvas-tools,
.preview-canvas-tools.is-ready .preview-canvas-tool {
animation: none !important;
}
.preview-canvas-tools:not(.is-ready) .preview-canvas-tool {
opacity: 1;
transform: none;
}
#previewImage {
transition: none !important;
}
}
.watermark-panel {
width: min(980px, calc(100vw - 32px));
max-height: calc(100dvh - 84px);
overflow: auto;
}
.watermark-picker-panel {
width: min(560px, 100%);
}
#watermarkPickerModal .watermark-picker-panel {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
max-height: min(620px, calc(100dvh - 128px));
overflow: hidden;
}
#watermarkModal.modal-mask,
#watermarkPickerModal.modal-mask {
place-items: start center;
padding-top: min(7vh, 56px);
}
#watermarkPickerModal.modal-mask {
padding-top: min(10vh, 76px);
z-index: var(--z-modal-pick); 
}
#watermarkModal.modal-mask {
z-index: var(--z-modal-pick); 
}
.watermark-library-view[hidden],
.watermark-layout[hidden] {
display: none;
}
.watermark-library-view {
display: grid;
gap: 12px;
}
.watermark-library-actions {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
}
.watermark-library-actions button {
flex: 0 0 auto;
min-width: 92px;
}
.watermark-library {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
justify-content: start;
align-content: start;
gap: 14px;
max-height: min(650px, calc(100vh - 190px));
overflow: auto;
padding: 2px 4px 4px 2px;
}
.watermark-library .empty-row {
grid-column: 1 / -1;
display: grid;
place-items: center;
min-height: 132px;
border: 1px dashed var(--border);
border-radius: 14px;
color: var(--muted);
background: rgba(148, 163, 184, 0.06);
text-align: center;
padding: 18px;
}
.watermark-library-card {
display: grid;
grid-template-rows: 134px auto auto;
gap: 9px;
border: 1px solid var(--border);
border-radius: 14px;
background: #ffffff;
padding: 10px;
min-width: 0;
transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.watermark-library-card:hover {
border-color: rgba(47, 109, 183, 0.5);
box-shadow: 0 8px 22px rgba(16, 24, 40, 0.1);
transform: translateY(-1px);
}
.watermark-library-card.selected {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(47, 109, 183, 0.16);
}
.watermark-library-preview {
position: relative;
display: grid;
place-items: center;
width: 100%;
height: 134px;
min-height: 134px;
padding: 0;
border: 0;
border-radius: 11px;
background:
linear-gradient(45deg, rgba(100, 116, 139, 0.5) 25%, transparent 25%),
linear-gradient(-45deg, rgba(100, 116, 139, 0.5) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, rgba(100, 116, 139, 0.5) 75%),
linear-gradient(-45deg, transparent 75%, rgba(100, 116, 139, 0.5) 75%),
#eef2f6;
background-position: 0 0, 0 9px, 9px -9px, -9px 0;
background-size: 18px 18px;
overflow: hidden;
cursor: pointer;
}
.watermark-library-preview img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
padding: 8px;
box-sizing: border-box;
}
.watermark-default-flag {
position: absolute;
top: 7px;
left: 7px;
padding: 2px 9px;
border-radius: 999px;
background: var(--accent);
color: #fff;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.3px;
box-shadow: 0 2px 6px rgba(16, 24, 40, 0.28);
pointer-events: none;
}
.watermark-library-meta {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.watermark-library-meta strong {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13.5px;
}
.watermark-ratio-chip {
flex: 0 0 auto;
padding: 2px 9px;
border-radius: 999px;
background: rgba(47, 109, 183, 0.1);
color: var(--accent);
font-size: 11.5px;
font-weight: 600;
white-space: nowrap;
}
.watermark-library-card-actions {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.watermark-library-card-actions .watermark-card-select {
grid-column: 1 / -1;
}
.watermark-library-card-actions button {
min-height: 32px;
padding: 5px 8px;
font-size: 12.5px;
}
.watermark-library-card-actions .watermark-card-default {
background: transparent;
border: 1px solid var(--border);
color: var(--muted);
}
.watermark-library-card-actions .watermark-card-default.active {
border-color: var(--accent);
color: var(--accent);
background: rgba(47, 109, 183, 0.08);
cursor: default;
}
.watermark-layout {
display: grid;
grid-template-columns: minmax(260px, 0.76fr) minmax(340px, 1.24fr);
gap: 16px;
align-items: start;
}
.watermark-editor-toolbar {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 10px;
justify-content: flex-start;
min-width: 0;
}
.watermark-list-panel,
.watermark-editor,
.watermark-maker {
display: grid;
gap: 10px;
min-width: 0;
}
.watermark-editor {
align-content: start;
}
.watermark-upload-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
}
.watermark-maker-actions {
display: grid;
grid-template-columns: minmax(160px, auto);
justify-content: start;
margin-top: 2px;
}
.watermark-template-actions {
display: grid;
grid-template-columns: repeat(3, minmax(112px, 1fr));
align-items: stretch;
}
.watermark-layer-panel {
border: 1px solid var(--border);
border-radius: 8px;
background: #ffffff;
padding: 10px;
display: grid;
gap: 8px;
}
.watermark-layer-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.watermark-layer-head span {
color: var(--muted);
font-size: 12px;
}
.watermark-layer-list {
display: grid;
gap: 7px;
max-height: 280px;
overflow: auto;
}
.watermark-layer-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
gap: 6px;
align-items: stretch;
border: 1px solid var(--border);
border-radius: 7px;
background: #fbfcfe;
padding: 6px;
}
.watermark-layer-row.selected {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(47, 109, 183, 0.12);
}
.watermark-layer-row.drag-over {
border-color: var(--blue);
}
.watermark-layer-select {
min-height: 44px;
padding: 0;
border: 0;
background: transparent;
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
gap: 8px;
text-align: left;
justify-content: start;
}
.watermark-layer-select img {
width: 44px;
height: 44px;
object-fit: contain;
border: 1px solid var(--border);
border-radius: 6px;
background: #eef1f6;
}
.watermark-layer-select span {
min-width: 0;
display: grid;
gap: 3px;
}
.watermark-layer-select strong,
.watermark-layer-select small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.watermark-layer-select small {
color: var(--muted);
font-size: 12px;
}
.watermark-layer-eye,
.watermark-layer-delete {
min-height: 32px;
padding: 5px 8px;
align-self: center;
font-size: 12px;
}
.watermark-maker {
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px;
background: #fbfcfe;
}
.watermark-maker-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
margin: 0;
}
.watermark-list {
display: grid;
gap: 8px;
max-height: 430px;
overflow: auto;
padding-right: 4px;
}
#watermarkPickerList.watermark-list {
gap: 10px;
max-height: none;
min-height: 0;
padding: 2px 4px 4px 2px;
}
.watermark-card {
display: grid;
grid-template-columns: 78px minmax(0, 1fr);
gap: 10px;
align-items: center;
width: 100%;
text-align: left;
background: #ffffff;
}
#watermarkPickerList .watermark-card {
position: relative;
display: grid;
grid-template-columns: 92px minmax(0, 1fr);
min-height: 84px;
box-sizing: border-box;
padding: 10px;
border: 1px solid var(--border);
border-radius: 10px;
}
.watermark-card.selected {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(47, 109, 183, 0.12);
}
.watermark-card img {
width: 78px;
height: 58px;
object-fit: contain;
border: 1px solid var(--border);
border-radius: 6px;
background: #f4f7fb;
}
#watermarkPickerList .watermark-card img {
grid-column: 1;
grid-row: 1;
width: 92px;
height: 64px;
}
#watermarkPickerList .watermark-card > span:not(.ui-icon) {
grid-column: 2;
grid-row: 1;
}
#watermarkPickerList .watermark-card > .ui-icon {
position: absolute;
top: 14px;
left: 14px;
z-index: 2;
display: grid;
width: 18px;
height: 18px;
place-items: center;
border-radius: 6px;
background: var(--accent);
color: #ffffff;
box-shadow: 0 2px 7px rgba(15, 23, 42, 0.22);
}
#watermarkPickerList .watermark-card > .ui-icon svg {
width: 13px;
height: 13px;
}
.watermark-card span {
display: grid;
gap: 4px;
min-width: 0;
}
.watermark-card strong,
.watermark-card small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.watermark-card small {
color: var(--muted);
}
.watermark-stage-wrap {
display: grid;
place-items: center;
border: 1px solid var(--border);
border-radius: 8px;
background: #f7f9fc;
padding: 12px;
}
.watermark-stage {
position: relative;
width: min(100%, 380px);
aspect-ratio: 1 / 1;
overflow: hidden;
margin: 0 auto;
border: 1px solid #c7d1df;
border-radius: 8px;
background: #f4f7fb;
cursor: crosshair;
touch-action: none; 
}
.watermark-stage[data-preview-bg="dark"] {
background: #111827;
}
.watermark-stage[data-preview-bg="gray"] {
background: #8f98a8;
}
.watermark-stage[data-preview-bg="white"] {
background: #ffffff;
}
.watermark-stage.drag-over {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(47, 109, 183, 0.14);
}
.watermark-stage-layer,
#watermarkStageImage {
position: absolute;
object-fit: contain;
cursor: move;
max-width: none;
user-select: none;
touch-action: none;
}
.watermark-stage-layer.selected {
outline: 2px solid rgba(47, 109, 183, 0.85);
outline-offset: 2px;
}
.watermark-editor-v2 {
display: flex;
flex-direction: column;
gap: 12px;
min-height: 0;
}
.wm-editor-bar {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding-bottom: 10px;
border-bottom: 1px solid var(--border);
}
.wm-editor-bar > strong { font-size: 15px; font-weight: 850; }
.wm-bar-actions {
margin-left: auto;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.wm-editor-body {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
gap: 16px;
align-items: start;
min-height: 0;
}
.wm-controls {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
}
.wm-section {
border: 1px solid var(--border);
border-radius: 12px;
background: #fbfcfe;
padding: 12px;
display: flex;
flex-direction: column;
gap: 10px;
}
.wm-section-title { margin: 0; font-size: 13px; font-weight: 850; color: #344054; }
.wm-section-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.wm-hint { font-size: 11.5px; color: var(--muted); }
.wm-add-image { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.wm-add-text { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--border); }
.wm-grid { display: grid; gap: 8px; }
.wm-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wm-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wm-grid > label {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 12px;
color: #475569;
min-width: 0;
}
.wm-grid > label input,
.wm-grid > label select { width: 100%; min-width: 0; box-sizing: border-box; }
.wm-grid > label input[type="color"] { height: 34px; padding: 2px; }
.wm-sub { padding: 9px; border: 1px dashed var(--border); border-radius: 8px; background: #f3f7fc; }
.wm-sub[hidden] { display: none !important; }
.wm-toggle { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: #344054; cursor: pointer; }
.wm-toggle input { width: auto; flex: 0 0 auto; }
.wm-preview {
position: sticky;
top: 0;
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.wm-preview .watermark-stage { width: min(100%, 460px); }
.wm-stage-hint { font-size: 11.5px; color: var(--muted); line-height: 1.55; }
@media (max-width: 820px) {
.wm-editor-body { grid-template-columns: minmax(0, 1fr); }
.wm-preview { position: static; order: -1; }
.wm-bar-actions { width: 100%; }
.wm-bar-actions > .primary { flex: 1 1 auto; }
.wm-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.watermark-editor-v3 {
display: flex;
flex-direction: column;
gap: 12px;
min-height: 0;
}
.watermark-editor-v3 .wm-editor-body {
grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
}
.wm-name-field {
flex: 1 1 220px;
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
font-size: 12.5px;
font-weight: 700;
color: #475569;
white-space: nowrap;
}
.wm-name-field > input { flex: 1 1 auto; min-width: 0; }
.wm-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.wm-add-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wm-add-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
font-weight: 750;
border-style: dashed;
}
.wm-add-btn:hover { border-color: var(--accent); color: var(--accent); }
.hidden-input { display: none !important; }
.wm-text-maker {
display: flex;
flex-direction: column;
gap: 9px;
padding: 12px;
border: 1px solid var(--border);
border-radius: 12px;
background: #f3f7fc;
}
.wm-text-maker[hidden] { display: none !important; }
.wm-text-maker-title { font-size: 13px; font-weight: 850; color: #344054; }
.wm-text-maker > input[type="text"] { width: 100%; box-sizing: border-box; }
.wm-text-maker-actions { display: flex; gap: 8px; }
.wm-text-maker-actions > .primary { flex: 1 1 auto; }
.wm-layers-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
font-size: 13px;
font-weight: 850;
color: #344054;
padding-top: 2px;
}
.wm-layer-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wm-layer-empty {
padding: 18px 12px;
border: 1px dashed var(--border);
border-radius: 12px;
text-align: center;
color: var(--muted);
font-size: 12.5px;
line-height: 1.6;
}
.wm-layer {
border: 1px solid var(--border);
border-radius: 12px;
background: #fff;
overflow: hidden;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wm-layer.selected {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(47, 109, 183, 0.14);
}
.wm-layer.is-hidden { opacity: 0.62; }
.wm-layer.dragging { opacity: 0.4; }
.wm-layer.drag-over { border-color: var(--accent); border-style: dashed; }
.wm-layer-row { display: flex; align-items: center; gap: 8px; padding: 8px; }
.wm-layer-grip { color: #9aa6b8; cursor: grab; font-size: 14px; line-height: 1; user-select: none; flex: 0 0 auto; }
.wm-layer-pick {
flex: 1 1 auto;
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
padding: 0;
border: 0;
background: transparent;
text-align: left;
cursor: pointer;
}
#watermarkModal .wm-layer-pick { justify-content: flex-start !important; padding: 0 !important; }
.wm-layer-pick > img {
width: 42px;
height: 42px;
flex: 0 0 auto;
object-fit: contain;
border-radius: 8px;
border: 1px solid var(--border);
background:
repeating-conic-gradient(#e9eef5 0% 25%, #ffffff 0% 50%) 0 / 14px 14px;
}
.wm-layer-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wm-layer-meta > strong { font-size: 13px; font-weight: 750; color: #1f2a37; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-layer-meta > small { font-size: 11px; color: var(--muted); }
.wm-layer-icon {
flex: 0 0 auto;
width: 32px;
height: 32px;
display: grid;
place-items: center;
padding: 0;
border: 1px solid var(--border);
border-radius: 8px;
background: #fff;
cursor: pointer;
font-size: 14px;
line-height: 1;
}
.wm-layer-icon:hover { border-color: var(--accent); }
.wm-layer-icon.danger:hover { border-color: var(--danger, #dc3a3a); color: var(--danger, #dc3a3a); }
.wm-inspector {
display: flex;
flex-direction: column;
gap: 11px;
padding: 12px;
border: 1px solid var(--border);
border-radius: 12px;
background: #fbfcfe;
}
.wm-inspector:empty { display: none; }
.wm-insp-empty { text-align: center; color: var(--muted); font-size: 12.5px; padding: 6px 0; }
.wm-insp-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
font-size: 12px;
color: var(--muted);
}
.wm-insp-head > b { font-size: 13px; font-weight: 800; color: #1f2a37; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wm-insp-group { display: flex; flex-direction: column; gap: 8px; padding-top: 9px; border-top: 1px dashed var(--border); }
.wm-insp-label { font-size: 12px; font-weight: 750; color: #475569; }
.wm-insp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wm-slider { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #475569; white-space: nowrap; }
.wm-slider-name { flex: 0 0 52px; font-weight: 700; }
.wm-slider > input[type="range"] { flex: 1 1 auto; min-width: 0; }
.wm-slider > b { flex: 0 0 auto; min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; color: #344054; font-weight: 750; }
.wm-pos-grid {
display: grid;
grid-template-columns: repeat(3, 26px);
grid-auto-rows: 26px;
gap: 4px;
}
.wm-pos-grid > button {
width: 26px;
height: 26px;
min-height: 26px;
max-height: 26px;
box-sizing: border-box;
padding: 0;
border: 1px solid var(--border);
border-radius: 7px;
background: #fff;
cursor: pointer;
display: grid;
place-items: center;
}
.wm-pos-grid > button > i {
width: 6px;
height: 6px;
border-radius: 50%;
background: #b9c4d4;
}
.wm-pos-grid > button:hover { border-color: var(--accent); }
.wm-pos-grid > button:hover > i { background: var(--accent); }
.wm-pos-grid > button.on { border-color: var(--accent); background: rgba(47, 109, 183, 0.12); }
.wm-pos-grid > button.on > i { background: var(--accent); }
.wm-insp-textedit > input[type="text"] { width: 100%; box-sizing: border-box; }
.wm-insp-textrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wm-insp-textrow > label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #475569; min-width: 0; }
.wm-insp-textrow > label input,
.wm-insp-textrow > label select { width: 100%; min-width: 0; box-sizing: border-box; }
.wm-insp-textrow > label input[type="color"] { height: 34px; padding: 2px; }
.wm-insp-apply { width: 100%; }
.wm-stage-toolbar {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.wm-stage-ctl { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #475569; white-space: nowrap; }
.wm-stage-ctl > select { width: auto; min-width: 72px; }
.wm-frame {
position: absolute;
box-sizing: border-box;
border: 1.5px dashed rgba(47, 109, 183, 0.9);
transform-origin: center center;
pointer-events: none;
z-index: 5;
}
.wm-frame.is-tile { border-style: solid; background: rgba(47, 109, 183, 0.08); }
.wm-frame-stem {
position: absolute;
left: 50%;
top: -26px;
width: 1.5px;
height: 26px;
background: rgba(47, 109, 183, 0.9);
transform: translateX(-50%);
pointer-events: none;
}
.wm-handle {
position: absolute;
width: 19px;
height: 19px;
display: grid;
place-items: center;
box-sizing: border-box;
border: 1.5px solid var(--accent);
border-radius: 50%;
background: #fff;
color: var(--accent);
font-size: 11px;
line-height: 1;
pointer-events: auto;
touch-action: none;
box-shadow: 0 1px 4px rgba(15, 23, 42, 0.25);
}
.wm-handle-rotate { top: -34px; left: 50%; transform: translateX(-50%); cursor: grab; }
.wm-handle-resize { right: -10px; bottom: -10px; cursor: nwse-resize; }
@media (max-width: 820px) {
.watermark-editor-v3 .wm-editor-body { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.watermark-editor-v3 .wm-preview { position: static; order: -1; }
.wm-editor-bar { row-gap: 8px; }
.wm-name-field { flex: 1 1 auto; }
.wm-bar-actions { width: 100%; display: grid; grid-template-columns: auto auto minmax(0, 1fr); }
.wm-stage-toolbar .wm-stage-hint { flex-basis: 100%; }
.wm-handle { width: 26px; height: 26px; font-size: 14px; }
.wm-handle-rotate { top: -40px; }
.wm-handle-resize { right: -13px; bottom: -13px; }
}
.monitor-body {
display: grid;
grid-template-columns: minmax(360px, 0.52fr) minmax(0, 0.48fr);
gap: 18px;
align-items: start;
min-width: 0;
overflow-x: hidden;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(clamp(126px, 22vw, 168px), 1fr));
gap: 12px;
max-height: min(46vh, 460px);
overflow-y: auto;
overflow-x: hidden;
padding: 2px 6px 4px 2px;
min-width: 0;
align-content: start;
}
.gallery:has(.media-thumb) {
grid-template-columns: repeat(auto-fill, minmax(clamp(206px, 44vw, 282px), 1fr));
align-content: start;
}
.gallery-empty {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 9px;
padding: 40px 16px;
text-align: center;
color: var(--muted);
border: 1px dashed var(--border);
border-radius: 14px;
background: var(--surface-2, #f7fafd);
}
.gallery-empty-icon {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 14px;
background: rgba(47, 109, 183, 0.1);
color: var(--accent);
}
.gallery-empty-icon .ui-icon,
.gallery-empty-icon svg {
width: 24px;
height: 24px;
}
.gallery-empty strong {
color: var(--text);
font-size: 14px;
}
.gallery-empty p {
margin: 0;
max-width: 280px;
font-size: 12.5px;
line-height: 1.5;
}
.gallery-select-bar {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
padding: 8px 11px;
border: 1px solid var(--border);
border-radius: 11px;
background: var(--surface-2, #f6f9fc);
}
.gallery-select-bar button {
min-height: 30px;
padding: 5px 11px;
font-size: 12px;
}
.gallery-select-bar span {
color: var(--muted);
font-size: 12px;
}
.thumb {
position: relative;
display: flex;
flex-direction: column;
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
background: #ffffff;
min-width: 0;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
transition:
border-color var(--motion-premium-base) var(--motion-premium-in),
box-shadow var(--motion-premium-base) var(--motion-premium-in);
}
.thumb:hover {
border-color: rgba(47, 109, 183, 0.42);
box-shadow: 0 10px 24px rgba(16, 24, 40, 0.12);
}
.thumb.selected {
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(47, 109, 183, 0.2);
}
.thumb.partial {
border-color: #e0c074;
}
.thumb-select {
position: absolute;
z-index: 4;
top: 8px;
left: 8px;
display: block;
width: 22px;
min-width: 22px;
max-width: 22px;
height: 22px;
min-height: 22px;
max-height: 22px;
cursor: pointer;
}
.thumb-select input {
position: absolute;
inset: 0;
margin: 0;
opacity: 0;
cursor: pointer;
}
.thumb-select span {
display: block;
width: 22px;
min-width: 22px;
max-width: 22px;
height: 22px;
min-height: 22px;
max-height: 22px;
border: 1.5px solid #cdd7e3;
border-radius: 6px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 1px 5px rgba(16, 24, 40, 0.18);
transition: background 0.14s ease, border-color 0.14s ease;
}
.thumb-select input:checked + span {
border-color: var(--accent);
background: var(--accent);
}
.thumb-select input:checked + span::after {
content: "";
position: absolute;
left: 8px;
top: 5px;
width: 5px;
height: 9px;
border: solid #ffffff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.thumb img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
display: block;
background: #eef1f6;
}
.thumb-preview {
position: relative;
display: block;
width: 100%;
padding: 0;
border: 0;
border-radius: 0;
background: #eef1f6;
cursor: zoom-in;
overflow: hidden;
min-height: 0;
}
.thumb-preview:hover {
border-color: transparent;
}
.media-thumb {
display: flex;
flex-direction: column;
grid-template-columns: none;
grid-template-rows: none;
grid-template-areas: none;
gap: 0;
padding: 0;
border-radius: 12px;
}
.media-thumb .thumb-select {
top: 8px;
left: 8px;
}
.media-thumb .thumb-preview {
position: relative;
display: grid;
place-items: center;
gap: 6px;
width: 100%;
aspect-ratio: 16 / 9;
min-height: 0;
max-height: none;
height: auto;
padding: 0;
border: 0;
border-radius: 0;
color: #2f5e88;
background:
linear-gradient(135deg, rgba(47, 109, 183, 0.14), rgba(47, 96, 156, 0.1)),
#f1f5fb;
overflow: hidden;
}
.media-thumb-video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
background: #0f172a;
pointer-events: none;
}
.media-play-badge {
position: absolute;
left: 8px;
bottom: 8px;
padding: 4px 9px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.74);
color: #ffffff;
font-size: 11px;
font-weight: 700;
}
.media-thumb-icon {
width: 44px;
height: 44px;
border-radius: 999px;
display: grid;
place-items: center;
background: var(--accent);
color: #ffffff;
font-size: 15px;
font-weight: 800;
}
.media-thumb-icon svg { width: 21px; height: 21px; }
.media-thumb .thumb-preview strong {
font-size: 13px;
}
.media-thumb .media-thumb-footer {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
padding: 8px 9px 4px;
}
.media-thumb .media-thumb-footer > span {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #1f2937;
font-size: 12.5px;
font-weight: 700;
line-height: 1.3;
}
.media-thumb-prompt {
margin: 0;
padding: 0 9px 9px;
color: var(--muted);
font-size: 12px;
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.thumb-badge {
position: absolute;
z-index: 3;
right: 8px;
top: 8px;
padding: 3px 7px;
border-radius: 7px;
background: rgba(15, 23, 42, 0.78);
color: #ffffff;
font-size: 11px;
font-weight: 700;
}
.thumb-footer {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 9px;
min-width: 0;
}
.thumb-footer > span {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #475569;
font-size: 12px;
}
.thumb-footer .icon-action {
flex: 0 0 auto;
width: 30px;
height: 30px;
min-width: 30px;
min-height: 30px;
display: inline-grid;
place-items: center;
padding: 0;
border: 1px solid var(--border);
border-radius: 8px;
background: #ffffff;
color: #5b6678;
white-space: nowrap;
}
.thumb-footer .icon-action .ui-icon {
display: grid;
width: 16px;
height: 16px;
}
.thumb-footer .icon-action .ui-icon svg {
width: 16px;
height: 16px;
}
.thumb-footer .icon-action:hover {
background: #f1f5f9;
}
.thumb-footer .thumb-watermark {
color: var(--accent);
border-color: #cfe0f2;
background: #f2f7fb;
}
.thumb-footer .thumb-watermark:hover {
background: #e6f0fb;
}
.thumb-footer .thumb-delete {
color: #c2410c;
}
.thumb-footer .thumb-delete:hover {
background: #fef2f0;
border-color: #f4c7bb;
}
.toast {
position: fixed;
right: 18px;
bottom: 18px;
max-width: min(520px, calc(100vw - 36px));
max-height: min(30vh, 240px);
overflow: auto;
overflow-wrap: anywhere;
background: #101828;
color: #ffffff;
padding: 13px 15px;
border-radius: 8px;
box-shadow: var(--shadow);
z-index: var(--z-toast);
}
.shortcut-panel {
max-width: min(720px, calc(100vw - 28px));
}
.shortcut-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.shortcut-grid div {
display: grid;
grid-template-columns: minmax(140px, auto) 1fr;
gap: 8px;
align-items: center;
padding: 10px;
border: 1px solid var(--border);
border-radius: 8px;
background: #fbfcfe;
}
.shortcut-keys {
display: inline-flex;
flex-wrap: wrap;
gap: 5px;
align-items: center;
color: var(--muted);
white-space: nowrap;
}
kbd {
display: inline-flex;
min-width: 26px;
height: 24px;
padding: 0 7px;
align-items: center;
justify-content: center;
border: 1px solid #c7d0dd;
border-bottom-width: 2px;
border-radius: 6px;
background: #ffffff;
color: #344054;
font-size: 12px;
font-weight: 760;
white-space: nowrap;
}
.context-menu {
position: fixed;
z-index: 80;
min-width: 236px;
max-height: calc(100vh - 16px);
overflow: auto;
padding: 8px;
border: 1px solid #d9e2ee;
border-radius: 10px;
background: #fbfcfe;
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14);
}
.context-menu button {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border: 1px solid transparent;
border-radius: 8px;
background: transparent;
color: var(--text);
padding: 8px 9px;
text-align: left;
cursor: pointer;
font-size: 13px;
line-height: 1.25;
}
.context-menu .context-label {
display: inline-flex;
align-items: center;
min-width: 0;
gap: 8px;
}
.context-menu .context-copy {
display: grid;
min-width: 0;
gap: 2px;
}
.context-menu .context-title-line {
display: inline-flex;
align-items: center;
min-width: 0;
gap: 6px;
font-weight: 760;
}
.context-menu .context-description {
color: #667085;
font-size: 12px;
font-weight: 560;
line-height: 1.25;
}
.context-menu .context-description .context-price {
vertical-align: middle;
}
.context-menu .context-tag {
display: inline-flex;
align-items: center;
height: 18px;
padding: 0 6px;
border: 1px solid rgba(148, 163, 184, 0.45);
border-radius: 999px;
background: rgba(248, 250, 252, 0.86);
color: #475467;
font-size: 11px;
font-weight: 760;
}
.context-menu-heading {
display: flex;
align-items: center;
gap: 8px;
margin: 8px 2px 5px;
padding: 6px 6px 5px;
border-bottom: 1px solid #edf1f6;
color: #344054;
font-size: 12px;
font-weight: 850;
}
.context-menu-heading:first-child {
margin-top: 0;
}
.context-menu-divider {
height: 1px;
margin: 8px 2px;
background: #edf1f6;
}
.context-menu .context-color-badge,
.command-palette-list .context-color-badge {
display: inline-grid;
place-items: center;
width: 26px;
height: 26px;
flex: 0 0 26px;
border-radius: 8px;
background: color-mix(in srgb, var(--menu-accent, #2f6db7) 13%, #ffffff);
color: var(--menu-accent, #2f6db7);
font-size: 11px;
font-weight: 800;
line-height: 1;
}
.context-menu .context-icon {
display: inline-grid;
place-items: center;
width: 23px;
height: 23px;
flex: 0 0 23px;
border-radius: 7px;
background: color-mix(in srgb, var(--menu-accent, #2f6db7) 13%, #ffffff);
color: var(--menu-accent, #2f6db7);
}
.context-menu .context-icon svg,
.context-menu .context-color-badge svg,
.command-palette-list .context-color-badge svg {
width: 12.5px;
height: 12.5px;
stroke-width: 1.5;
}
.context-menu button.module-create {
border-color: transparent;
background: transparent;
color: #1d2939;
box-shadow: none;
}
.context-menu button.module-create:hover {
border-color: color-mix(in srgb, var(--menu-accent, #2f6db7) 24%, #e5edf6);
background: color-mix(in srgb, var(--menu-accent, #2f6db7) 8%, #ffffff);
}
.context-menu button:hover {
background: #eef3f8;
}
.context-menu button.danger {
color: var(--danger);
}
.context-menu button:disabled {
color: #98a2b3;
cursor: not-allowed;
opacity: 0.72;
}
.context-menu .shortcut-hint {
color: var(--muted);
font-size: 12px;
}
.workflow-stage-wrap.panning {
cursor: grabbing;
}
.litegraph.litecontextmenu,
.litegraph.litecontextmenu.dark {
min-width: 238px;
padding: 8px;
border: 1px solid #d9e2ee;
border-radius: 10px;
background: #fbfcfe !important;
background-color: #fbfcfe !important;
color: #243042 !important;
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14) !important;
font-family: "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
z-index: var(--z-overlay);
}
.prompt-rich-source.prompt-rich-source {
position: absolute !important;
width: 1px !important;
height: 1px !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: 1px !important;
max-height: 1px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
opacity: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
resize: none !important;
clip-path: inset(50%) !important;
}
.prompt-rich-shell {
box-sizing: border-box;
width: 100%;
min-width: 0;
height: 98px;
min-height: 86px;
max-height: none;
align-self: start;
overflow: auto;
resize: vertical;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface);
color: var(--text);
transition:
border-color var(--motion-premium-fast) var(--motion-premium-in),
box-shadow var(--motion-premium-fast) var(--motion-premium-in),
background-color var(--motion-premium-base) var(--motion-premium-in);
}
.prompt-rich-shell:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(47, 109, 183, 0.14);
}
.prompt-rich-editor {
box-sizing: border-box;
width: 100%;
height: 100%;
min-height: 0;
padding: var(--control-padding-y) var(--control-padding-x);
outline: none;
color: var(--text);
font: inherit;
line-height: 1.48;
white-space: pre-wrap;
overflow-wrap: anywhere;
caret-color: var(--accent-strong);
cursor: text;
-webkit-user-select: text;
user-select: text;
}
.prompt-rich-editor:empty::before,
.prompt-rich-editor[data-prompt-empty="1"]::before {
content: attr(data-placeholder);
color: var(--muted-2);
pointer-events: none;
}
.prompt-inline-mention {
display: inline-flex;
align-items: center;
gap: 5px;
max-width: min(220px, 72%);
height: 22px;
min-height: 22px;
max-height: 22px;
margin: 0 2px;
padding: 1px 6px 1px 1px;
vertical-align: middle;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
border-radius: 7px;
background: color-mix(in srgb, var(--accent) 7%, var(--surface));
color: var(--accent-strong);
box-shadow: 0 2px 7px rgba(32, 76, 127, 0.10);
font-size: 11.5px;
font-weight: 750;
line-height: 1;
white-space: nowrap;
cursor: default;
-webkit-user-select: none;
user-select: none;
transition:
transform 140ms ease-out,
border-color 140ms ease-out,
box-shadow 140ms ease-out;
}
.prompt-inline-mention:hover {
transform: translateY(-1px);
border-color: var(--accent);
box-shadow: 0 5px 12px rgba(32, 76, 127, 0.16);
}
.prompt-inline-mention.is-selected {
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(47, 109, 183, 0.24), 0 5px 12px rgba(32, 76, 127, 0.16);
}
.prompt-inline-mention-media {
display: grid;
place-items: center;
flex: 0 0 18px;
width: 18px;
height: 18px;
overflow: hidden;
border-radius: 5px;
background: var(--surface-3);
}
.prompt-inline-mention-media > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.prompt-inline-mention-media .prompt-mention-ico {
width: 100%;
height: 100%;
}
.prompt-inline-mention-media .prompt-mention-ico svg {
width: 12px;
height: 12px;
}
.prompt-inline-mention-label {
overflow: hidden;
text-overflow: ellipsis;
}
body.theme-dark .prompt-rich-shell {
background: var(--surface);
border-color: var(--border);
}
body.theme-dark .prompt-inline-mention {
border-color: color-mix(in srgb, #8fb4e6 42%, var(--border));
background: color-mix(in srgb, #2f6db7 18%, var(--surface));
color: #b9d4f4;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
}
.prompt-mention-pop {
position: fixed;
z-index: 100000;
box-sizing: border-box;
padding: 10px;
background: var(--surface, #fff);
border: 1px solid var(--border, #d9e2ee);
border-radius: 12px;
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
}
.prompt-mention-title { margin-bottom: 8px; color: #5c728a; font-size: 12px; font-weight: 650; }
.prompt-mention-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; max-height: min(42vh, calc(var(--anchored-room, 100vh) - 58px)); overflow: auto; }
.prompt-mention-item {
position: relative; padding: 0; border: 1px solid var(--border, #d9e2ee); border-radius: 10px;
overflow: hidden; background: #f4f7fb; cursor: pointer; aspect-ratio: 1;
}
.prompt-mention-item:hover { border-color: #2f6db7; box-shadow: 0 0 0 2px rgba(47, 109, 183, 0.16); }
.prompt-mention-item.is-active {
border-color: #2f6db7;
box-shadow: 0 0 0 2.5px rgba(47, 109, 183, 0.55), 0 4px 12px rgba(47, 109, 183, 0.22);
transform: translateY(-1px);
}
.prompt-mention-item.is-active .prompt-mention-badge { background: #2f6db7; }
.prompt-mention-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prompt-mention-ico {
display: grid; place-items: center; width: 100%; height: 100%;
}
.prompt-mention-ico svg { width: 26px; height: 26px; }
.prompt-mention-item.dead { display: none; }
.prompt-mention-badge {
position: absolute; left: 4px; bottom: 4px; padding: 1px 6px; border-radius: 6px;
background: rgba(17, 24, 39, 0.68); color: #fff; font-size: 11px; font-weight: 650; pointer-events: none;
}
.prompt-mention-empty { padding: 6px 4px; color: #5c728a; font-size: 12.5px; }
body.theme-dark .prompt-mention-pop { background: #252a34; border-color: #454c5c; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42); }
body.theme-dark .prompt-mention-item { background: #1b1f28; border-color: #454c5c; }
body.theme-dark .prompt-mention-title, body.theme-dark .prompt-mention-empty { color: #9aa8bd; }
.hui-select-panel {
position: fixed;
z-index: 100000; 
display: grid;
grid-template-columns: 1fr;
gap: 3px;
box-sizing: border-box;
padding: 6px;
max-height: min(58vh, 480px, var(--anchored-room, 100vh));
overflow: auto;
background: var(--surface, #fff);
border: 1px solid var(--border, #d9e2ee);
border-radius: 10px;
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
}
.hui-select-panel.hui-ratio-pair { grid-template-columns: 1fr 1fr; gap: 4px; }
.hui-select-opt {
display: flex;
align-items: center;
justify-content: flex-start;
min-height: 32px;
padding: 6px 10px;
border: 1px solid transparent;
border-radius: 8px;
background: transparent;
color: #263244;
font-size: 13px;
font-weight: 570;
line-height: 1.25;
text-align: left;
cursor: pointer;
}
.model-logo {
flex: 0 0 auto;
display: inline-grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 7px;
background: #fff;
color: #111827;
border: 1px solid rgba(15, 23, 42, 0.10);
box-shadow: 0 2px 5px rgba(15, 23, 42, 0.10);
font-size: 9.5px;
font-weight: 850;
line-height: 1;
letter-spacing: 0;
text-transform: none;
overflow: hidden;
}
.model-logo img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.model-logo.has-image { font-size: 0; }
.model-logo.has-image {
background: transparent;
border-color: transparent;
box-shadow: none;
}
.model-logo:not(.has-image) {
background: linear-gradient(135deg, #64748b, #94a3b8);
color: #fff;
border-color: transparent;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 2px 5px rgba(15, 23, 42, 0.12);
}
.model-logo:not(.has-image).model-logo-sora { background: linear-gradient(135deg, #111827, #2563eb); }
.model-logo:not(.has-image).model-logo-openai { background: linear-gradient(135deg, #101828, #475467); }
.model-logo:not(.has-image).model-logo-gemini { background: linear-gradient(135deg, #2563eb, #16a34a 58%, #f59e0b); }
.model-logo:not(.has-image).model-logo-nanobanana { background: linear-gradient(135deg, #7c3aed, #f59e0b); }
.model-logo:not(.has-image).model-logo-doubao { background: linear-gradient(135deg, #0f172a, #0ea5e9 48%, #ec4899); }
.model-logo:not(.has-image).model-logo-volcengine { background: linear-gradient(135deg, #2563eb, #ef4444); }
.model-logo:not(.has-image).model-logo-kling { background: linear-gradient(135deg, #1d4ed8, #7c3aed); }
.model-logo:not(.has-image).model-logo-grok,
.model-logo:not(.has-image).model-logo-xai { background: linear-gradient(135deg, #020617, #475569); }
.model-logo:not(.has-image).model-logo-flux { background: linear-gradient(135deg, #111827, #f97316); }
.model-logo:not(.has-image).model-logo-qwen { background: linear-gradient(135deg, #2563eb, #7c3aed); }
.model-logo:not(.has-image).model-logo-minimax { background: linear-gradient(135deg, #0f766e, #14b8a6); }
.model-logo:not(.has-image).model-logo-suno { background: linear-gradient(135deg, #7c2d12, #f59e0b); }
.model-logo:not(.has-image).model-logo-deepseek { background: linear-gradient(135deg, #1d4ed8, #06b6d4); }
.model-logo:not(.has-image).model-logo-anthropic,
.model-logo:not(.has-image).model-logo-claude { background: linear-gradient(135deg, #7c3f2d, #d97706); }
.model-logo:not(.has-image).model-logo-luma { background: linear-gradient(135deg, #111827, #8b5cf6); }
.hui-model-select-panel { gap: 4px; }
.hui-select-opt.hui-select-model-opt {
min-height: 36px;
padding: 5px 7px;
}
.hui-select-model-main {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 7px;
width: min(100%, 268px);
min-width: 0;
}
.hui-select-model-main.has-generation-metric {
justify-content: space-between;
width: 100%;
max-width: none;
gap: 8px;
}
.hui-select-model-primary {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 7px;
flex: 1 1 auto;
min-width: 0;
}
.hui-select-model-main .model-logo {
width: 18px;
height: 18px;
border-radius: 6px;
}
.hui-select-label {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.model-success-glyph {
--model-status-accent: #6f8298;
--model-status-muted: #d8e3ee;
flex: 0 0 auto;
margin-left: auto;
display: inline-flex;
align-items: flex-end;
justify-content: center;
gap: 2px;
width: 30px;
height: 22px;
padding: 4px 5px 3px;
border: 0;
background: transparent;
}
.model-success-glyph.is-good { --model-status-accent: #07966a; --model-status-muted: #cfeadf; }
.model-success-glyph.is-sampling,
.model-success-glyph.is-active { --model-status-accent: #2f6db7; --model-status-muted: #d4e3f4; }
.model-success-glyph.is-warn,
.model-success-glyph.is-low-sample { --model-status-accent: #c58412; --model-status-muted: #f2dfb5; }
.model-success-glyph.is-bad { --model-status-accent: #d44a4a; --model-status-muted: #f2d3d3; }
.model-success-bar {
--model-bar-color: var(--model-status-accent);
display: block;
width: 3px;
height: max(2px, var(--model-bar-height, 0%));
border-radius: 3px 3px 2px 2px;
background: var(--model-status-muted);
transform-origin: center bottom;
transition: transform 150ms ease-out, filter 150ms ease-out;
}
.model-success-bar.has-activity { min-height: 4px; background: var(--model-bar-color); }
.model-success-bar.is-good { --model-bar-color: #08a66c; }
.model-success-bar.is-warn,
.model-success-bar.is-low-sample { --model-bar-color: #d39414; }
.model-success-bar.is-bad { --model-bar-color: #dc3f3f; }
.model-success-bar.is-active,
.model-success-bar.is-sampling { --model-bar-color: #2f6db7; }
.model-success-bar.is-empty { --model-bar-color: #94a3b8; }
.hui-model-success-badge:hover .model-success-bar.has-activity,
.hui-model-success-badge:focus-visible .model-success-bar.has-activity { filter: saturate(1.1); transform: scaleY(1.05); }
.model-status-hover-panel {
--model-panel-accent: #6f8298;
--model-panel-soft: #f3f7fb;
position: fixed;
z-index: 100001;
box-sizing: border-box;
width: 308px;
padding: 14px;
border: 1px solid #dce6f0;
border-radius: 8px;
background: #fff;
color: #172033;
box-shadow: 0 14px 32px rgba(35, 57, 84, 0.14), 0 3px 9px rgba(35, 57, 84, 0.07);
pointer-events: none;
transform-origin: 24px 24px;
animation: modelStatusPanelEnter 160ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.model-status-hover-panel.is-good { --model-panel-accent: #07966a; --model-panel-soft: #edf9f5; }
.model-status-hover-panel.is-sampling,
.model-status-hover-panel.is-active { --model-panel-accent: #2f6db7; --model-panel-soft: #eff6fd; }
.model-status-hover-panel.is-warn,
.model-status-hover-panel.is-low-sample { --model-panel-accent: #c58412; --model-panel-soft: #fff8e9; }
.model-status-hover-panel.is-bad { --model-panel-accent: #d44a4a; --model-panel-soft: #fff2f2; }
@keyframes modelStatusPanelEnter {
from { opacity: 0; transform: translateY(4px) scale(0.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.model-status-hover-head,
.model-status-chart-head,
.model-status-admin-detail {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.model-status-hover-head > strong { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 760; }
.model-status-hover-head > strong::before {
content: "";
width: 7px;
height: 7px;
border-radius: 3px;
background: var(--model-panel-accent);
box-shadow: 0 0 0 4px var(--model-panel-soft);
transform: rotate(12deg);
}
.model-status-tone {
display: inline-flex;
align-items: center;
gap: 5px;
color: #64748b;
font-size: 11px;
font-weight: 650;
}
.model-status-tone > i { width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; }
.model-status-tone.is-good { color: #07875f; }
.model-status-tone.is-sampling,
.model-status-tone.is-active { color: #2f6db7; }
.model-status-tone.is-warn,
.model-status-tone.is-low-sample { color: #a96e0a; }
.model-status-tone.is-bad { color: #c63f3f; }
.model-status-tone.is-good > i { background: #08a66c; }
.model-status-tone.is-warn > i,
.model-status-tone.is-low-sample > i { background: #d39414; }
.model-status-tone.is-bad > i { background: #dc3f3f; }
.model-status-tone.is-active > i,
.model-status-tone.is-sampling > i { background: #2f6db7; }
.model-status-periods {
display: grid;
grid-template-columns: 1fr 1fr;
margin-top: 11px;
padding: 10px 0;
border-top: 1px solid #e7edf4;
border-bottom: 1px solid #e7edf4;
}
.model-status-period { min-width: 0; padding: 0 10px; }
.model-status-period:first-child { padding-left: 0; border-right: 1px solid #e7edf4; }
.model-status-period:last-child { padding-right: 0; }
.model-status-period small,
.model-status-period strong,
.model-status-period span { display: block; }
.model-status-period small { color: #718096; font-size: 10.5px; }
.model-status-period strong { margin-top: 4px; color: #172033; font-size: 20px; line-height: 1; transition: color 150ms ease-out; }
.model-status-period.is-good strong { color: #078b62; }
.model-status-period.is-sampling strong,
.model-status-period.is-active strong { color: #2f6db7; }
.model-status-period.is-warn strong,
.model-status-period.is-low-sample strong { color: #b7790d; }
.model-status-period.is-bad strong { color: #cc4141; }
.model-status-period span { margin-top: 4px; color: #64748b; font-size: 10px; }
.model-status-chart-head { margin-top: 11px; color: #64748b; font-size: 10.5px; }
.model-status-chart-head > b { color: #44546a; font-weight: 650; }
.model-status-chart {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 5px;
margin-top: 6px;
padding: 8px 6px 6px;
border: 1px solid #edf2f7;
border-radius: 7px;
background: #f8fbfe;
}
.model-status-chart-day { min-width: 0; text-align: center; }
.model-status-chart-column {
display: grid;
grid-template-rows: 15px 58px;
align-items: end;
justify-items: center;
}
.model-status-chart-column > b { align-self: start; color: #64748b; font-size: 9px; font-weight: 650; line-height: 1; }
.model-status-chart-column > i {
--model-chart-color: #94a3b8;
grid-row: 2;
align-self: end;
display: block;
width: 12px;
height: max(3px, var(--model-chart-height, 0%));
border-radius: 5px 5px 2px 2px;
background: #dfe8f2;
transform-origin: center bottom;
animation: modelStatusChartRise 200ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}
.model-status-chart-column > i.has-activity { min-height: 5px; background: var(--model-chart-color); box-shadow: 0 2px 4px color-mix(in srgb, var(--model-chart-color) 18%, transparent); }
.model-status-chart-column > i.is-good { --model-chart-color: #08a66c; }
.model-status-chart-column > i.is-warn,
.model-status-chart-column > i.is-low-sample { --model-chart-color: #d39414; }
.model-status-chart-column > i.is-bad { --model-chart-color: #dc3f3f; }
.model-status-chart-column > i.is-active,
.model-status-chart-column > i.is-sampling { --model-chart-color: #2f6db7; }
@keyframes modelStatusChartRise {
from { opacity: 0.35; transform: scaleY(0.25); }
to { opacity: 1; transform: scaleY(1); }
}
.model-status-chart-day > small { display: block; margin-top: 4px; color: #8996a8; font-size: 9px; white-space: nowrap; }
.model-status-admin-detail {
justify-content: flex-start;
margin-top: 10px;
padding-top: 9px;
border-top: 1px solid #e7edf4;
color: #64748b;
font-size: 10px;
}
select.model-select-has-logo {
--hui-control-prefix-indent: 24px;
background-color: #fff;
background-image: var(--model-select-logo) !important;
background-repeat: no-repeat !important;
background-position: 10px center !important;
background-size: 16px 16px !important;
}
select.model-select-has-logo[data-model-brand-key="openai"],
select.model-select-has-logo[data-model-brand-key="grok"],
select.model-select-has-logo[data-model-brand-key="xai"],
select.model-select-has-logo[data-model-brand-key="suno"],
select.model-select-has-logo[data-model-brand-key="flux"],
select.model-select-has-logo[data-model-brand-key="anthropic"] {
filter: none;
}
select.hui-select-has-ratio-icon {
--hui-control-prefix-indent: 27px;
background-image: var(--hui-select-ratio-icon) !important;
background-repeat: no-repeat !important;
background-position: 10px center !important;
background-size: 17px 17px !important;
}
.hui-ratio-ico { flex: 0 0 auto; display: block; margin-inline: auto; border: 1.6px solid currentColor; border-radius: 3px; }
.hui-ratio-ico.is-auto { border-style: dashed; }
.hui-ratio-pair .hui-select-opt { grid-template-columns: 17px minmax(0, 1fr); }
.hui-select-opt.is-ratio { display: grid; grid-template-columns: 17px minmax(0, 1fr); align-items: center; gap: 8px; }
.hui-select-opt:hover:not(:disabled) { border-color: #d8e2ee; background: #eef3f8; color: #111827; }
.hui-select-opt.active { border-color: #2f6db7; background: rgba(47, 109, 183, 0.08); color: #2f6db7; font-weight: 650; }
.hui-select-opt:disabled { opacity: 0.45; cursor: default; }
.hui-select-opt.ratio-span { grid-column: 1 / -1; }
body.theme-dark .hui-select-panel { background: #252a34; border-color: #454c5c; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42); }
body.theme-dark .hui-select-opt { color: #dbe2ee; }
body.theme-dark .hui-select-opt:hover:not(:disabled) { border-color: #4a5364; background: #2d3442; color: #f1f5fb; }
body.theme-dark .hui-select-opt.active { border-color: #6f9dd8; background: rgba(111, 157, 216, 0.14); color: #9ec2ee; }
body.theme-dark .model-logo { border-color: rgba(255, 255, 255, 0.16); box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3); }
body.theme-dark .model-logo.has-image { border-color: transparent; box-shadow: none; }
body.theme-dark .model-success-glyph { --model-status-muted: #4b596c; }
body.theme-dark .model-success-glyph.is-good { --model-status-muted: #365c53; }
body.theme-dark .model-success-glyph.is-sampling,
body.theme-dark .model-success-glyph.is-active { --model-status-muted: #40546e; }
body.theme-dark .model-success-glyph.is-warn,
body.theme-dark .model-success-glyph.is-low-sample { --model-status-muted: #655838; }
body.theme-dark .model-success-glyph.is-bad { --model-status-muted: #67464d; }
body.theme-dark .model-success-bar.is-good { --model-bar-color: #4ade80; }
body.theme-dark .model-success-bar.is-warn,
body.theme-dark .model-success-bar.is-low-sample { --model-bar-color: #fbbf24; }
body.theme-dark .model-success-bar.is-bad { --model-bar-color: #fb7185; }
body.theme-dark .model-success-bar.is-active,
body.theme-dark .model-success-bar.is-sampling { --model-bar-color: #60a5fa; }
body.theme-dark .model-status-tone.is-active > i,
body.theme-dark .model-status-tone.is-sampling > i { background: #60a5fa; }
body.theme-dark .model-status-hover-panel { border-color: #454c5c; background: #252a34; color: #e5edf7; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42); }
body.theme-dark .model-status-periods,
body.theme-dark .model-status-period:first-child,
body.theme-dark .model-status-admin-detail { border-color: #3c4452; }
body.theme-dark .model-status-period strong { color: #f1f5f9; }
body.theme-dark .model-status-period.is-good strong { color: #4ade80; }
body.theme-dark .model-status-period.is-sampling strong,
body.theme-dark .model-status-period.is-active strong { color: #60a5fa; }
body.theme-dark .model-status-period.is-warn strong,
body.theme-dark .model-status-period.is-low-sample strong { color: #fbbf24; }
body.theme-dark .model-status-period.is-bad strong { color: #fb7185; }
body.theme-dark .model-status-period small,
body.theme-dark .model-status-period span,
body.theme-dark .model-status-chart-head,
body.theme-dark .model-status-chart-column > b,
body.theme-dark .model-status-admin-detail { color: #9aa8bd; }
body.theme-dark .model-status-chart { border-color: #394453; background: #29313d; }
body.theme-dark .model-status-chart-column > i { background: #475569; }
body.theme-dark .model-status-chart-column > i.has-activity { background: var(--model-chart-color); }
body.theme-dark .model-status-chart-column > i.is-good { --model-chart-color: #4ade80; }
body.theme-dark .model-status-chart-column > i.is-warn,
body.theme-dark .model-status-chart-column > i.is-low-sample { --model-chart-color: #fbbf24; }
body.theme-dark .model-status-chart-column > i.is-bad { --model-chart-color: #fb7185; }
body.theme-dark .model-status-chart-column > i.is-active,
body.theme-dark .model-status-chart-column > i.is-sampling { --model-chart-color: #60a5fa; }
@media (prefers-reduced-motion: reduce) {
.model-status-hover-panel,
.model-status-chart-column > i { animation: none; }
.hui-model-success-badge,
.model-success-bar { transition: none; }
}
body.theme-dark .model-logo.has-image:is(.model-logo-openai, .model-logo-grok, .model-logo-xai, .model-logo-suno, .model-logo-flux, .model-logo-anthropic) img {
filter: invert(1);
}
body.theme-dark .model-logo:not(.has-image) { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 2px 7px rgba(0, 0, 0, 0.3); }
.litegraph.litecontextmenu.hui-ratio-pair-menu {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3px 6px;
min-width: 196px;
}
.litegraph.litecontextmenu.hui-ratio-menu .litemenu-entry { display: grid; grid-template-columns: 17px minmax(0, 1fr); align-items: center; gap: 8px; text-align: left; margin: 0; min-height: 30px; padding: 6px 8px; }
.litegraph.litecontextmenu.hui-ratio-pair-menu .litemenu-entry.ratio-span { grid-column: 1 / -1; }
.litegraph.litecontextmenu.hui-ratio-pair-menu .ai-lite-menu-drag-handle { grid-column: 1 / -1; }
.litegraph.litecontextmenu.hui-model-lite-menu {
min-width: min(260px, calc(100vw - 24px));
max-width: min(320px, calc(100vw - 24px));
padding: 7px;
}
.litegraph.litecontextmenu.hui-model-lite-menu .litemenu-entry.hui-model-lite-entry {
display: flex;
align-items: center;
justify-content: flex-start;
min-height: 38px;
padding: 6px 8px;
border-radius: 9px;
text-align: left;
}
.litegraph.litecontextmenu.hui-model-lite-menu .litemenu-entry.hui-model-lite-entry .hui-select-model-main {
width: min(100%, 268px);
}
.litegraph.litecontextmenu.hui-model-lite-menu .litemenu-entry.hui-model-lite-entry .hui-select-model-main.has-generation-metric {
width: 100%;
max-width: none;
}
.litegraph.litecontextmenu .ai-lite-menu-drag-handle {
height: 16px;
margin: -3px -2px 5px;
color: #8a98aa;
cursor: move;
font-size: 10px;
font-weight: 750;
line-height: 16px;
text-align: center;
user-select: none;
}
.litegraph.litecontextmenu .litemenu-title {
margin: -2px -2px 7px;
padding: 0 2px 7px;
border-bottom: 1px solid #edf1f6;
background: transparent;
color: #1d2430;
font-size: 13px;
font-weight: 800;
}
.litegraph.litecontextmenu .litemenu-entry,
.litegraph.litecontextmenu .litemenu-entry.submenu,
.litegraph.litecontextmenu.dark .litemenu-entry,
.litegraph.litecontextmenu.dark .litemenu-entry.submenu {
min-height: 32px;
margin: 3px 0;
padding: 8px 10px;
border: 1px solid transparent !important;
border-radius: 8px;
background: transparent !important;
background-color: transparent !important;
color: #263244 !important;
font-size: 13px;
font-weight: 640;
line-height: 1.25;
}
.litegraph.litecontextmenu .litemenu-entry:hover:not(.disabled):not(.separator),
.litegraph.litecontextmenu.dark .litemenu-entry:hover:not(.disabled):not(.separator) {
border-color: #d8e2ee !important;
background: #eef3f8 !important;
background-color: #eef3f8 !important;
color: #111827 !important;
}
.litegraph.litecontextmenu .litemenu-entry.has_submenu {
border-right: 0;
}
.litegraph.litecontextmenu .litemenu-entry.has_submenu::after {
content: ">";
float: right;
color: #667085;
}
.litegraph.litecontextmenu .litemenu-entry.separator {
border-top: 1px solid #edf0f5;
border-bottom: 0;
height: 1px;
margin: 7px 0;
background: transparent !important;
}
.litegraph.litesearchbox,
.graphdialog,
.graphdialog.rounded {
font-family: "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
}
.graphdialog,
.graphdialog.rounded {
display: grid !important;
grid-template-columns: minmax(240px, 1fr) auto;
align-items: start;
gap: 8px 10px;
width: fit-content;
min-width: 360px;
min-height: 66px;
max-width: none;
max-height: min(640px, calc(100vh - 32px));
padding: 12px !important;
border: 1px solid #cbd5e1;
border-radius: 10px !important;
background: #ffffff !important;
background-color: #ffffff !important;
color: #1d2430 !important;
box-shadow: 0 8px 18px rgba(20, 31, 48, 0.08) !important;
resize: none;
overflow: visible;
z-index: calc(var(--z-overlay) + 1);
}
.graphdialog .name {
grid-column: 1 / -1;
min-height: 28px !important;
padding: 0 0 6px 2px !important;
border-bottom: 1px solid #edf0f5;
color: #1d2430 !important;
cursor: move;
font-size: 13px;
font-weight: 750;
user-select: none;
}
.graphdialog input.value,
.graphdialog textarea.value,
.graphdialog input,
.graphdialog textarea,
.graphdialog select {
width: 100%;
min-width: 180px;
min-height: 34px;
margin: 0 !important;
padding: 7px 10px !important;
border: 1px solid #b8c7d9 !important;
border-radius: 7px !important;
background: #f8fafc !important;
background-color: #f8fafc !important;
color: #111827 !important;
outline: none !important;
}
.graphdialog input.value:focus,
.graphdialog textarea.value:focus,
.graphdialog input:focus,
.graphdialog textarea:focus,
.graphdialog select:focus {
border-color: #16855f !important;
box-shadow: 0 0 0 3px rgba(22, 133, 95, 0.13);
}
.graphdialog textarea.value,
.graphdialog textarea {
grid-column: 1 / -1;
align-self: start;
justify-self: start;
width: min(520px, calc(100vw - 72px));
min-height: 220px;
min-width: 300px;
max-width: none;
max-height: calc(100vh - 140px);
resize: both;
vertical-align: top;
}
.graphdialog button,
.graphdialog button.rounded {
justify-self: end;
align-self: center;
min-height: 34px;
margin: 0 !important;
padding: 0 14px;
border: 1px solid #16855f !important;
border-radius: 7px !important;
background: #16855f !important;
color: #ffffff !important;
font-weight: 700;
cursor: pointer;
}
.graphdialog button:hover {
background: #126b4e !important;
}
.litegraph.litesearchbox.graphdialog.rounded {
display: block !important;
width: 280px;
min-width: 260px;
padding: 8px;
border: 1px solid #cbd5e1;
border-radius: 8px;
background: #ffffff !important;
color: #243042;
box-shadow: none !important;
resize: none;
overflow: visible;
z-index: calc(var(--z-overlay) + 1);
}
.litegraph.litesearchbox .name {
display: block;
margin: -8px -8px 8px;
padding: 8px 10px;
border-bottom: 1px solid #edf0f5;
background: #f7f9fc;
color: #1d2430 !important;
cursor: move;
user-select: none;
font-size: 13px;
font-weight: 750;
}
.litegraph.litesearchbox input.value {
width: 100%;
height: 32px;
margin-bottom: 8px;
padding: 0 10px;
border: 1px solid #cbd5e1;
border-radius: 6px;
background: #ffffff;
color: #1d2430;
outline: none;
}
.litegraph.litesearchbox .helper {
max-height: 280px;
overflow: auto;
}
.litegraph.litesearchbox.graphdialog.rounded .helper .litegraph.lite-search-item,
.litegraph.litesearchbox .lite-search-item {
min-height: 30px;
padding: 7px 10px;
background: #e8f6ef !important;
background-color: #e8f6ef !important;
background-image: none !important;
border: 1px solid #b9dfcf !important;
border-radius: 6px;
color: var(--accent-strong) !important;
font-size: 13px;
font-weight: 650;
line-height: 1.25;
box-shadow: none !important;
}
.litegraph.litesearchbox.graphdialog.rounded .helper .litegraph.lite-search-item:hover,
.litegraph.litesearchbox.graphdialog.rounded .helper .litegraph.lite-search-item.selected,
.litegraph.litesearchbox .lite-search-item:hover,
.litegraph.litesearchbox .lite-search-item.selected {
background: #16855f !important;
background-color: #16855f !important;
background-image: none !important;
color: #ffffff !important;
}
.litegraph.litecontextmenu .ai-lite-menu-node {
display: grid !important;
grid-template-columns: 26px minmax(0, 1fr) 12px;
align-items: center !important;
gap: 9px !important;
min-height: 34px !important;
margin: 1px 0 !important;
padding: 6px 8px !important;
border: 1px solid transparent !important;
border-radius: 7px !important;
color: #1d2939 !important;
background: transparent !important;
box-shadow: none !important;
}
.litegraph.litecontextmenu .ai-lite-menu-node[data-workflow-lite-drag-type] {
cursor: grab;
}
.litegraph.litecontextmenu .ai-lite-menu-node.workflow-menu-drag-source {
opacity: 0.55;
cursor: grabbing;
}
.litegraph.litecontextmenu .ai-lite-menu-node:hover {
border-color: color-mix(in srgb, var(--menu-accent, #2f6db7) 24%, #e5edf6) !important;
background: color-mix(in srgb, var(--menu-accent, #2f6db7) 8%, #ffffff) !important;
}
.litegraph.litecontextmenu .ai-lite-menu-node.has_submenu::after {
float: none;
justify-self: end;
align-self: center;
}
.litegraph.litecontextmenu .ai-lite-menu-node > span:not(.ai-lite-menu-badge) {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.litegraph.litecontextmenu .ai-lite-menu-badge {
display: inline-grid;
place-items: center;
width: 26px;
height: 26px;
flex: 0 0 26px;
border-radius: 8px;
background: color-mix(in srgb, var(--menu-accent, #2f6db7) 13%, #ffffff);
color: var(--menu-accent, #2f6db7);
font-size: 12px;
font-weight: 800;
line-height: 1;
}
.litegraph.litecontextmenu .ai-lite-menu-badge svg,
.workflow-menu-drag-badge svg,
.workflow-module-icon svg,
.infinite-card-badge svg {
width: 12.5px;
height: 12.5px;
stroke-width: 1.5;
}
@media (max-width: 820px) {
.topbar {
position: static;
width: auto;
height: auto;
min-height: auto;
border-right: 0;
border-bottom: 1px solid var(--border);
box-shadow: none;
display: grid;
grid-template-columns: 1fr;
align-items: stretch;
gap: 12px;
}
.topbar .top-actions {
margin-top: 0;
}
.module-nav {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.layout {
margin-left: 0;
grid-template-columns: 1fr;
min-height: calc(100vh - 180px);
}
.layout.media-tool-layout {
grid-template-columns: 1fr;
}
body.sidebar-collapsed .topbar {
width: auto;
padding: 14px;
}
body.sidebar-collapsed .brand-row {
grid-template-columns: minmax(0, 1fr) auto;
justify-items: stretch;
}
body.sidebar-collapsed .brand-full {
display: inline;
}
body.sidebar-collapsed .brand-text p,
body.sidebar-collapsed .module-tab strong,
body.sidebar-collapsed .module-tab span {
display: block;
}
body.sidebar-collapsed .module-tab {
grid-template-rows: 20px 18px;
justify-items: start;
align-items: center;
align-content: center;
min-height: 68px;
padding: 13px 14px;
text-align: left;
}
body.sidebar-collapsed .brand-short,
body.sidebar-collapsed .module-tab::before,
body.sidebar-collapsed .topbar .state-pill::before,
body.sidebar-collapsed .topbar .icon-button::before {
display: none;
content: "";
}
body.sidebar-collapsed .topbar .state-pill,
body.sidebar-collapsed .topbar .icon-button {
font-size: 14px;
}
.watermark-layout {
grid-template-columns: 1fr;
}
.tool-grid,
.model-category-panel,
.settings-panel > .form-grid,
.model-category-fields {
grid-template-columns: 1fr;
}
.text-chat-shell {
grid-template-columns: 240px minmax(0, 1fr);
}
.text-chat-topbar {
grid-template-columns: 1fr;
align-items: stretch;
}
.text-chat-modelbar {
justify-content: flex-start;
}
.text-chat-modelbar > label:not(.switch-row) {
width: min(340px, 100%);
}
.watermark-layer-list {
max-height: 190px;
}
}
@media (max-width: 720px) {
.topbar {
height: auto;
align-items: flex-start;
gap: 12px;
padding: 14px;
}
.module-nav {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.layout {
padding: 10px;
}
.form-grid,
.options-grid,
.stats-grid,
.key-add-row,
.tool-grid,
.model-category-panel,
.settings-panel > .form-grid,
.model-category-fields {
grid-template-columns: 1fr;
}
.key-row {
grid-template-columns: 28px 1fr;
}
.key-row button {
grid-column: 2;
}
.category-key-add-row,
.category-key-row {
grid-template-columns: 1fr;
}
.job-row,
.case-row {
grid-template-columns: 1fr;
}
.job-reuse,
.job-favorite {
grid-column: auto;
grid-row: auto;
}
.monitor-body {
grid-template-columns: 1fr;
}
.gallery,
.item-table {
max-height: 320px;
}
.preview-tools,
.watermark-controls,
.watermark-maker-grid,
.watermark-upload-row,
.watermark-template-actions,
.shortcut-grid {
grid-template-columns: 1fr;
}
.watermark-editor-toolbar {
display: grid;
grid-template-columns: 1fr;
align-items: stretch;
}
.watermark-stage-wrap {
padding: 8px;
}
.watermark-library {
grid-template-columns: 1fr;
}
}
.workflow-panel,
.infinite-canvas-panel {
padding: 0;
}
.layout.workflow-layout .workbench,
.layout.canvas-layout .workbench {
overflow: hidden;
}
.layout.workflow-layout .tabs,
.layout.canvas-layout .tabs {
display: none;
}
.layout.workflow-layout .module-workflow-panel {
display: block;
}
.layout.canvas-layout .infinite-canvas-panel {
display: block;
}
.infinite-canvas-shell {
--canvas-bg: #f6f9fb;
--canvas-panel: rgba(255, 255, 255, 0.9);
--canvas-panel-strong: #ffffff;
--canvas-border: rgba(203, 213, 225, 0.82);
--canvas-ink: #0f172a;
--canvas-muted: #64748b;
--canvas-brand: #2f6db7;
--canvas-brand-soft: #eaf2fb;
--canvas-blue: #2563eb;
display: block;
gap: 0;
height: 100%;
min-height: 0;
background: transparent;
color: var(--canvas-ink);
border: 0;
border-radius: 0;
overflow: hidden;
}
.infinite-canvas-sidebar,
.infinite-canvas-inspector {
min-height: 0;
padding: 14px;
background: #fbfcfe;
overflow: auto;
}
.infinite-canvas-sidebar {
display: none;
}
.infinite-canvas-inspector {
display: none;
border-left: 1px solid var(--border);
}
.infinite-canvas-head h2 {
font-size: 20px;
line-height: 1.2;
}
.infinite-canvas-head p,
.infinite-canvas-tip span {
display: block;
margin-top: 6px;
color: var(--muted);
line-height: 1.55;
}
.infinite-canvas-actions {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-top: 14px;
}
.infinite-canvas-board-label {
display: grid;
gap: 7px;
margin-top: 14px;
color: var(--muted);
font-weight: 700;
}
.infinite-canvas-board-label select {
min-height: 38px;
border-radius: 8px;
border: 1px solid #cad6e5;
background: #ffffff;
color: var(--text);
padding: 0 10px;
font-weight: 750;
}
.infinite-canvas-tip {
margin-top: 12px;
padding: 12px;
border: 1px dashed #b8c8dc;
border-radius: 10px;
background: rgba(255, 255, 255, 0.76);
}
.infinite-canvas-main {
min-width: 0;
min-height: 0;
display: block;
position: relative;
height: 100%;
padding: 0;
overflow: hidden;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.infinite-canvas-toolbar {
position: absolute;
inset: 0;
z-index: 20;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
pointer-events: none;
}
.canvas-board-actions .workflow-dirty-badge {
min-height: 28px;
padding: 0 8px;
white-space: nowrap;
}
.canvas-side-dock {
position: absolute;
top: 86px;
left: 18px;
z-index: 24;
display: grid;
gap: 10px;
padding: 10px;
border: 1px solid var(--canvas-border);
border-radius: 22px;
background: var(--canvas-panel);
box-shadow: none;
backdrop-filter: blur(16px);
pointer-events: auto;
}
.canvas-dock-button {
display: grid;
place-items: center;
width: 46px;
height: 46px;
border: 1px solid #d6e1eb;
border-radius: 16px;
background: #ffffff;
color: #334155;
font-size: 15px;
font-weight: 950;
cursor: pointer;
transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.canvas-dock-button:hover {
transform: translateY(-1px);
border-color: rgba(47, 109, 183, 0.42);
background: #eaf2fb;
box-shadow: 0 10px 24px rgba(47, 109, 183, 0.12);
}
.canvas-dock-button.primary-action {
border-color: rgba(47, 109, 183, 0.42);
background: linear-gradient(135deg, #2f6db7 0%, #2563eb 100%);
color: #ffffff;
font-size: 24px;
line-height: 1;
}
.canvas-ai-composer {
display: grid;
position: absolute;
top: 16px;
right: 16px;
bottom: 16px;
left: auto;
transform: none;
z-index: 23;
width: clamp(360px, 28vw, 430px);
max-width: 430px;
margin: 0 auto;
grid-template-columns: 1fr;
grid-template-rows: auto auto minmax(0, 1fr) auto auto;
gap: 12px;
align-items: stretch;
padding: 16px;
border: 1px solid var(--canvas-border);
border-radius: 26px;
background: var(--canvas-panel-strong);
box-shadow: none;
backdrop-filter: blur(22px);
pointer-events: auto;
}
.canvas-composer-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(203, 213, 225, 0.74);
}
.canvas-composer-head div {
display: grid;
gap: 4px;
}
.canvas-composer-head span,
.canvas-composer-head small {
color: var(--canvas-muted);
font-size: 12px;
line-height: 1.45;
}
.canvas-composer-head strong {
color: var(--canvas-ink);
font-size: 21px;
line-height: 1.15;
}
.canvas-composer-ref-drop {
position: relative;
min-height: 130px;
border: 1px dashed #cbd8e7;
border-radius: 18px;
background: #f8fbfd;
padding: 12px;
display: grid;
grid-template-rows: auto auto minmax(62px, 1fr);
gap: 8px;
}
.canvas-composer-ref-drop strong {
color: var(--canvas-ink);
font-size: 14px;
}
.canvas-composer-ref-drop > span,
.canvas-composer-result {
color: var(--canvas-muted);
font-size: 12px;
}
.canvas-composer-ref-drop.drag-over {
border-color: rgba(47, 109, 183, 0.54);
background: #eaf2fb;
}
.canvas-composer-refs {
min-height: 66px;
display: flex;
align-items: center;
gap: 7px;
overflow-x: auto;
overflow-y: hidden;
padding: 2px 0;
}
.canvas-composer-ref-empty {
min-width: 100%;
padding: 16px 10px;
border: 1px dashed #d7e2ef;
border-radius: 12px;
color: #718097;
text-align: center;
}
.canvas-composer-ref {
position: relative;
flex: 0 0 68px;
width: 68px;
height: 68px;
padding: 0;
border: 1px solid #d7e2ef;
border-radius: 14px;
background: #ffffff;
overflow: hidden;
}
.canvas-composer-ref img,
.canvas-composer-ref video {
width: 100%;
height: 100%;
object-fit: cover;
border: 0;
border-radius: 0;
}
.canvas-composer-ref .infinite-card-audio {
height: 100%;
border-radius: 0;
font-size: 12px;
}
.canvas-composer-ref > span {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 2px 4px;
background: rgba(15, 23, 42, 0.58);
color: #ffffff;
font-size: 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.canvas-composer-ref i {
position: absolute;
top: 3px;
right: 3px;
display: none;
padding: 2px 4px;
border-radius: 999px;
background: rgba(220, 38, 38, 0.95);
color: #ffffff;
font-style: normal;
font-size: 10px;
}
.canvas-composer-ref:hover i {
display: block;
}
.canvas-composer-ref-drop .danger {
position: absolute;
top: 10px;
right: 10px;
min-height: 24px;
padding: 0 8px;
font-size: 11px;
}
.canvas-prompt-box {
display: grid;
gap: 6px;
color: var(--canvas-ink);
font-weight: 850;
}
.canvas-prompt-box textarea {
min-height: 150px;
border: 1px solid #d6e1eb;
border-radius: 18px;
background: rgba(255, 255, 255, 0.94);
color: var(--canvas-ink);
resize: vertical;
}
.canvas-generate-options {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
align-items: end;
}
.canvas-generate-options label {
display: grid;
gap: 5px;
color: var(--canvas-muted);
font-size: 12px;
font-weight: 850;
}
.canvas-generate-options input,
.canvas-generate-options select {
min-height: 36px;
border: 1px solid #d6e1eb;
border-radius: 12px;
background: #ffffff;
color: var(--canvas-ink);
}
.canvas-generate-options .primary {
grid-column: 1 / -1;
min-height: 42px;
border-radius: 14px;
}
.canvas-composer-result {
grid-column: 1 / -1;
min-height: 40px;
padding: 10px 12px;
border: 1px solid #dbe7f0;
border-radius: 14px;
background: #f8fbfd;
}
.canvas-composer-result[data-tone="ok"] {
border-color: #a9c8e8;
background: #effaf5;
color: #2f6db7;
}
.canvas-composer-result[data-tone="busy"] {
border-color: #c5d8f3;
background: #f1f6ff;
color: #285c9b;
}
.canvas-composer-result[data-tone="error"] {
border-color: #f4b9b1;
background: #fff5f3;
color: #b42318;
}
.infinite-canvas-toolbar-actions {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 4px;
scrollbar-width: thin;
}
.infinite-canvas-toolbar-actions > * {
flex: 0 0 auto;
}
.canvas-toolbar-select {
width: auto;
min-width: 118px;
min-height: 36px;
}
.infinite-canvas-stage {
position: absolute;
inset: 0;
min-height: 0;
overflow: hidden;
touch-action: none;
overscroll-behavior: none;
border: 0;
border-radius: 0;
background-color: var(--canvas-surface, #f8fbfd);
background-image: var(--canvas-grid-image);
background-size: var(--canvas-grid-size-current, 28px) var(--canvas-grid-size-current, 28px);
cursor: default;
}
.infinite-canvas-stage.panning {
cursor: grabbing;
}
.infinite-canvas-stage.hand-tool {
cursor: grab;
}
.infinite-canvas-stage.insert-tool {
cursor: copy;
}
.infinite-canvas-stage.drag-over {
border-color: var(--accent);
box-shadow: inset 0 0 0 2px rgba(47, 109, 183, 0.18);
}
.infinite-canvas-stage.picking-reference {
cursor: default;
box-shadow: inset 0 0 0 1px rgba(47, 109, 183, 0.22);
}
.infinite-canvas-stage.picking-reference::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
background: rgba(15, 23, 42, 0.28);
pointer-events: none;
}
.infinite-canvas-stage.picking-reference .infinite-canvas-links {
opacity: 0.28;
}
.infinite-canvas-content {
position: absolute;
inset: 0;
transform-origin: 0 0;
z-index: 2;
touch-action: none;
}
.infinite-canvas-stage.canvas-interacting .infinite-canvas-content {
will-change: transform;
}
.infinite-canvas-stage.canvas-edit-entry-isolated .infinite-canvas-content {
content-visibility: hidden !important;
}
.infinite-canvas-stage.canvas-edit-entry-isolated :is(.infinite-canvas-links, .infinite-canvas-group-layer) {
visibility: hidden !important;
}
.infinite-canvas-stage.canvas-edit-entry-isolated .canvas-edit-dim {
visibility: hidden;
}
.infinite-canvas-stage.canvas-editing .infinite-canvas-links {
visibility: hidden !important;
}
.infinite-canvas-stage.canvas-edit-reveal :is(.infinite-canvas-content, .infinite-canvas-links, .infinite-canvas-group-layer) {
animation: canvasEditRevealFade .38s ease-out both;
}
@keyframes canvasEditRevealFade { 0%, 35% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.infinite-canvas-stage.canvas-edit-reveal :is(.infinite-canvas-content, .infinite-canvas-links, .infinite-canvas-group-layer) { animation: none; }
}
#infiniteCanvasContent .canvas-tile-loading {
background: rgba(148, 163, 184, 0.16);
}
.infinite-canvas-grid {
position: absolute;
inset: -256px;
z-index: 0;
contain: strict;
overflow: hidden;
background-image: var(--canvas-grid-image);
background-repeat: repeat;
background-size: 28px 28px;
background-position: 0 0;
transform-origin: 256px 256px;
will-change: auto;
backface-visibility: hidden;
pointer-events: none;
}
.infinite-canvas-stage.canvas-interacting .infinite-canvas-grid {
will-change: transform;
}
.infinite-canvas-inline-panel-layer {
position: absolute;
inset: 0;
z-index: 36;
pointer-events: none;
}
.infinite-canvas-links {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
overflow: hidden;
contain: paint;
pointer-events: none;
}
.infinite-canvas-links :is(.ic-links-body, .ic-links-selected, .ic-links-pulse) {
transform-origin: 0 0;
transform-box: view-box;
will-change: auto;
}
.infinite-canvas-stage.canvas-interacting .infinite-canvas-links :is(.ic-links-body, .ic-links-selected, .ic-links-pulse) {
will-change: transform;
}
.infinite-canvas-stage.panning .infinite-canvas-content {
pointer-events: none;
}
.infinite-canvas-stage.canvas-interacting .infinite-card {
transition-duration: 0s !important;
}
.infinite-canvas-stage.canvas-interacting #infiniteCanvasLinks .ic-links-pulse {
display: none;
}
.infinite-canvas-stage.canvas-interacting :is(
.infinite-card-run-progress-wave,
.infinite-card-run-progress-wave path,
.infinite-card-run-progress-bubble,
.infinite-card-run-progress-glowband,
.infinite-card-audio-wave i
) {
animation-play-state: paused !important;
}
.infinite-canvas-active-links {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
overflow: hidden;
contain: paint;
pointer-events: none;
display: none;
}
.infinite-canvas-active-links.is-active {
display: block;
}
.infinite-canvas-link-active-drag {
pointer-events: none;
filter: none !important;
animation: none !important;
stroke-opacity: 1;
}
.infinite-canvas-stage.canvas-card-dragging #infiniteCanvasLinks :is(.ic-links-selected, .ic-links-pulse) {
display: none;
}
:root {
--wire-fx-line: #7f8d9e;
--wire-fx-line-selected: #007fc8;
--wire-fx-active: #00a6e8;
--wire-fx-pulse: #20dcff;
--wire-fx-core: #ffffff;
--wire-fx-glow: rgba(32, 220, 255, 0.24);
--wire-fx-temp: #8aa8c8;
}
body.theme-dark:not(.auth-required) {
--wire-fx-line: #98aabd;
--wire-fx-line-selected: #77dfff;
--wire-fx-active: #8af7ff;
--wire-fx-pulse: #b8fbff;
--wire-fx-core: #ffffff;
--wire-fx-glow: rgba(184, 251, 255, 0.24);
--wire-fx-temp: #8ea4c0;
}
.infinite-canvas-link {
fill: none;
stroke: var(--wire-fx-line, #6f91b8);
stroke-width: calc(2.4px * var(--canvas-link-zoom, 1));
stroke-opacity: 0.68;
stroke-linecap: round;
stroke-linejoin: round;
pointer-events: stroke;
cursor: pointer;
}
.infinite-canvas-link-hit {
fill: none;
stroke: rgba(47, 109, 183, 0.001);
stroke-width: 14.67;
stroke-linecap: round;
stroke-linejoin: round;
pointer-events: stroke;
cursor: pointer;
}
.infinite-canvas-link:hover,
.infinite-canvas-link.hovered,
.infinite-canvas-link.selected,
.infinite-canvas-link.energized {
stroke: var(--wire-fx-line-selected, #3478a6);
stroke-width: calc(2.85px * var(--canvas-link-zoom, 1));
stroke-opacity: 1;
}
.infinite-canvas-link.energized {
filter: none;
}
.infinite-canvas-links .ic-links-selected path,
.infinite-canvas-links .ic-links-pulse path {
pointer-events: none !important;
}
.infinite-canvas-links .ic-links-selected .infinite-canvas-selected-link-base {
stroke: var(--wire-fx-active, #00a6e8);
stroke-width: calc(3.35px * var(--canvas-link-zoom, 1));
stroke-opacity: 0.98;
filter: drop-shadow(0 0 calc(2.8px * var(--canvas-link-zoom, 1)) var(--wire-fx-glow, rgba(32, 220, 255, 0.24)));
}
.infinite-canvas-link-pulse,
.infinite-canvas-link-pulse-silk,
.infinite-canvas-link-pulse-glow,
.infinite-canvas-link-pulse-veil {
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
pointer-events: none;
stroke-dasharray: none;
stroke-dashoffset: 0;
}
.infinite-canvas-link-pulse-veil {
stroke-width: calc(7.2px * var(--canvas-link-zoom, 1));
opacity: 0.28;
filter: blur(calc(1.15px * var(--canvas-link-zoom, 1)));
}
.infinite-canvas-link-pulse-glow {
stroke-width: calc(4.25px * var(--canvas-link-zoom, 1));
opacity: 0.58;
filter: blur(calc(0.42px * var(--canvas-link-zoom, 1)));
}
.infinite-canvas-link-pulse-silk {
stroke-width: calc(2.35px * var(--canvas-link-zoom, 1));
opacity: 0.9;
filter: blur(calc(0.16px * var(--canvas-link-zoom, 1)));
}
.infinite-canvas-link-pulse {
stroke-width: calc(1.24px * var(--canvas-link-zoom, 1));
opacity: 1;
filter: none;
}
.infinite-canvas-stage.canvas-interacting .infinite-canvas-links :is(.ic-links-pulse, .ic-links-selected) { display: none; }
.infinite-canvas-stage.canvas-interacting .infinite-canvas-links path.energized {
filter: none !important;
}
.infinite-canvas-link-active-drag {
filter: none !important;
animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
.infinite-canvas-link-pulse,
.infinite-canvas-link-pulse-silk,
.infinite-canvas-link-pulse-glow,
.infinite-canvas-link-pulse-veil { animation: none; }
}
.infinite-canvas-link-temp {
fill: none;
stroke: var(--wire-fx-temp, #8aa8c8);
stroke-width: 2;
stroke-dasharray: 7 6;
stroke-linecap: round;
animation: hui-link-ants 0.6s linear infinite; 
}
@keyframes hui-link-ants {
to { stroke-dashoffset: -26; }
}
@keyframes hui-link-dot-breathe {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.22); }
}
.infinite-canvas-link-temp-dot {
fill: color-mix(in srgb, var(--wire-fx-line-selected, #3478a6) 16%, transparent);
stroke: color-mix(in srgb, var(--wire-fx-line-selected, #3478a6) 58%, transparent);
stroke-width: 2;
pointer-events: none;
transform-box: fill-box;
transform-origin: center;
animation: hui-link-dot-breathe 1.1s ease-in-out infinite; 
}
.infinite-canvas-link-temp-dot-core {
fill: var(--wire-fx-line-selected, #3478a6);
stroke: #ffffff;
stroke-width: 1.5;
pointer-events: none;
}
.infinite-canvas-selection-box {
position: absolute;
z-index: 5;
border: var(--canvas-selection-frame-line-width) dashed var(--canvas-selection-frame-color);
background: var(--canvas-selection-frame-fill);
border-radius: var(--canvas-selection-frame-radius);
box-shadow: inset 0 0 0 1px var(--canvas-selection-frame-inset);
pointer-events: none;
contain: layout style paint;
backface-visibility: hidden;
}
.infinite-canvas-drop-hint {
position: absolute;
left: 98px;
bottom: 82px;
padding: 8px 12px;
border: 1px solid #d6e1eb;
border-radius: 999px;
background: rgba(255, 255, 255, 0.86);
color: var(--canvas-muted);
pointer-events: none;
}
.canvas-empty-starters {
position: absolute;
inset: 0;
z-index: 4;
display: none;
place-items: center;
pointer-events: none;
}
.infinite-canvas-stage[data-render-state="ready"][data-empty="true"] .canvas-empty-starters {
display: grid;
}
.infinite-canvas-stage:is([data-render-state="loading"], [data-render-state="rendering"]) .canvas-empty-starters {
display: grid;
}
.infinite-canvas-stage:is([data-render-state="loading"], [data-render-state="rendering"]) .canvas-empty-starters > * {
display: none;
}
.canvas-empty-starters::before {
display: none;
padding: 14px 18px;
border: 1px solid var(--canvas-border);
border-radius: 16px;
background: rgba(255, 255, 255, 0.9);
color: var(--canvas-muted);
font-weight: 800;
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.09);
backdrop-filter: blur(16px);
}
.infinite-canvas-stage:is([data-render-state="loading"], [data-render-state="rendering"]) .canvas-empty-starters::before {
content: "画布加载中...";
display: block;
}
body.account-guest #infiniteCanvasStage .canvas-empty-starters > *:not(.guest-gate) {
display: none !important;
}
body.account-guest #infiniteCanvasStage .canvas-empty-starters {
display: grid;
}
body.account-guest #infiniteCanvasStage .canvas-empty-starters .guest-gate {
display: flex;
}
body.account-guest #infiniteCanvasTab .canvas-creator-bar,
body.account-guest #infiniteCanvasTab .infinite-canvas-inspector,
body.account-guest #infiniteCanvasTab .canvas-corner-hud {
pointer-events: none;
opacity: 0.5;
}
body.account-guest #infiniteCanvasTab #infiniteCanvasStage {
pointer-events: none;
}
body.account-guest #infiniteCanvasStage .canvas-empty-starters {
pointer-events: auto;
}
body.account-guest #infiniteCanvasStage .canvas-empty-starters .guest-gate {
position: absolute;
left: 50%;
top: 45%;
z-index: 5;
transform: translate(-50%, -50%);
}
body.account-guest #workflowTab .workflow-toolbar,
body.account-guest #workflowTab .workflow-sidebar,
body.account-guest #workflowTab .workflow-corner-hud {
pointer-events: none;
opacity: 0.5;
}
body.account-guest #workflowTab .workflow-stage-wrap {
pointer-events: none;
}
body.account-guest #workflowEmptyState {
border: none !important;
background: transparent !important;
box-shadow: none !important;
backdrop-filter: none !important;
padding: 0 !important;
max-width: none !important;
width: auto;
z-index: 5;
pointer-events: auto;
}
body.account-guest #workflowEmptyState .workflow-empty-hint {
display: none;
}
body.account-guest #workflowEmptyState .guest-gate {
display: flex;
}
.guest-gate {
display: none;
flex-direction: column;
align-items: center;
gap: 4px;
box-sizing: border-box;
width: 264px;
padding: 22px 22px 18px;
border: 1px solid color-mix(in srgb, var(--border, #e3e8f0) 85%, transparent);
border-radius: 16px;
background: color-mix(in srgb, var(--panel, #fff) 94%, transparent);
box-shadow: 0 14px 36px -18px rgba(15, 23, 42, 0.16);
backdrop-filter: blur(14px);
text-align: center;
pointer-events: auto;
font-size: 13px;
line-height: 1.6;
}
.guest-gate-icon {
width: 34px;
height: 34px;
border-radius: 10px;
display: grid;
place-items: center;
margin-bottom: 6px;
background: linear-gradient(135deg, #4b86dd, #7a5fd0);
box-shadow: 0 8px 16px -8px rgba(87, 111, 214, 0.55);
}
.guest-gate-icon svg {
width: 17px;
height: 17px;
fill: none;
stroke: #fff;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.guest-gate strong {
font-size: 14px;
font-weight: 800;
color: var(--text, #1c2433);
}
.guest-gate p {
margin: 0;
font-size: 12px;
line-height: 1.65;
color: var(--muted, #7a8699);
}
.guest-gate .guest-gate-login {
margin-top: 12px;
height: 32px;
padding: 0 22px;
border: none;
border-radius: 9px;
background: linear-gradient(135deg, #3d7bd4, #6a55c8);
color: #fff;
font-size: 12.5px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 8px 16px -8px rgba(87, 111, 214, 0.6);
transition: transform 0.15s ease, filter 0.15s ease;
}
.guest-gate .guest-gate-login:hover {
filter: brightness(1.07);
}
.guest-gate .guest-gate-login:active {
transform: translateY(1px);
}
body.theme-dark:not(.auth-required) .guest-gate {
background: rgba(27, 31, 40, 0.92);
border-color: #454c5c;
box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.6);
}
body.theme-dark:not(.auth-required) button.guest-gate-login {
background: linear-gradient(135deg, #4d85d6, #7a5fd0);
color: #fff;
border: none;
}
.canvas-empty-card {
width: min(560px, calc(100% - 180px));
padding: 22px;
border: 1px solid var(--canvas-border);
border-radius: 24px;
background: rgba(255, 255, 255, 0.9);
box-shadow: none;
backdrop-filter: blur(18px);
text-align: center;
pointer-events: auto;
}
.canvas-empty-card > span {
display: block;
color: #2f6db7;
font-size: 12px;
font-weight: 900;
}
.canvas-empty-card > strong {
display: block;
margin-top: 6px;
color: #0f172a;
font-size: 24px;
line-height: 1.25;
}
.canvas-empty-actions {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
margin-top: 18px;
}
.canvas-empty-actions button {
min-height: 44px;
border: 1px solid #d6e4ef;
border-radius: 14px;
background: #f8fbff;
color: #1f3454;
font-weight: 900;
cursor: pointer;
}
.canvas-empty-actions button:hover {
border-color: rgba(47, 109, 183, 0.4);
background: #eaf2fb;
}
.infinite-card {
position: absolute;
width: 240px;
min-height: 124px;
border: 1px solid #d6e0ec;
border-radius: 18px;
background: var(--card-fill, #ffffff);
box-shadow: 0 6px 16px rgba(31, 49, 79, 0.16);
overflow: visible;
user-select: none;
touch-action: none;
z-index: 2;
color: var(--text);
contain: layout style;
}
.infinite-card :is(input, textarea, select, button, a, [contenteditable="true"]),
.infinite-card-inline-panel :is(input, textarea, select, button, a, [contenteditable="true"]) {
touch-action: manipulation;
}
.infinite-card[data-canvas-shape="rect"] {
border-radius: 4px;
}
.infinite-card[data-canvas-shape="pill"] {
border-radius: 26px;
}
.infinite-card[data-canvas-shape="ellipse"] {
border-radius: 999px;
}
.infinite-card[data-canvas-shape="ellipse"] .infinite-card-head {
border-radius: 999px 999px 0 0;
justify-content: center;
}
.infinite-card[data-canvas-type="section"] {
background: rgba(248, 251, 253, 0.58);
border: 2px dashed rgba(47, 109, 183, 0.36);
box-shadow: none;
}
.infinite-card[data-canvas-type="shape"] {
box-shadow: 0 8px 22px rgba(31, 49, 79, 0.08);
}
.infinite-card[data-canvas-type="shape"] .infinite-card-body {
min-height: 72px;
display: grid;
place-items: center;
color: #475467;
}
.infinite-card[data-canvas-type="section"] {
z-index: 1;
}
.infinite-card[data-canvas-type="section"] .infinite-card-head {
background: rgba(100, 116, 139, 0.92);
}
.infinite-card[data-canvas-type="reference"] .infinite-card-body,
.infinite-card[data-canvas-type="result"] .infinite-card-body {
min-height: 160px;
}
.infinite-card.grouped {
outline: 2px dashed rgba(47, 109, 183, 0.22);
outline-offset: 3px;
}
.infinite-card.search-hit {
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.32), 0 12px 30px rgba(31, 49, 79, 0.14);
}
.infinite-card.selected {
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(47, 109, 183, 0.2), 0 12px 30px rgba(31, 49, 79, 0.14);
}
.infinite-card.running {
border-color: color-mix(in srgb, var(--card-accent, #2f6db7) 34%, #d9e6f2);
}
.infinite-card .infinite-card-run-progress { display: none; }
.infinite-card.running .infinite-card-run-progress {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-end;
gap: 4px;
position: absolute;
inset: auto 12px 12px;
z-index: 7;
height: auto;
min-height: 0;
padding: 0;
overflow: visible;
pointer-events: none;
background: transparent;
}
.infinite-card-run-progress-track {
order: 2;
width: 100%;
flex: 0 0 var(--generation-progress-height);
}
.infinite-card-run-progress-label {
order: 1;
align-self: flex-start;
display: flex;
align-items: center;
gap: 5px;
max-width: 100%;
min-height: 0;
padding: 2px 6px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.82);
color: var(--muted);
font-size: 11px;
line-height: 1.3;
white-space: nowrap;
}
.infinite-card-run-progress-pct {
font-size: inherit;
font-weight: 700;
}
.infinite-card-run-progress-pct:empty {
display: none;
}
.infinite-card-run-progress-eta { font-size: inherit; font-weight: 600; }
.infinite-card-run-progress-water { display: none; }
.infinite-card.running:not(.media-ingress-active) .infinite-card-run-progress {
flex-direction: row;
align-items: center;
justify-content: center;
gap: 0;
inset: 0;
height: auto;
min-height: 0;
border-radius: inherit;
overflow: hidden;
padding: 14px;
isolation: isolate;
background: rgba(240, 244, 250, 0.4); 
}
.infinite-card.running:not(.media-ingress-active) .infinite-card-run-progress-track { display: none; }
.infinite-card.running:not(.media-ingress-active) .infinite-card-run-progress-water {
display: block;
position: absolute;
inset: 0;
z-index: 1;
opacity: 0.78; 
pointer-events: none;
}
.infinite-card-run-progress-waterfill {
position: absolute;
inset: 0 auto 0 0;
z-index: 2;
width: calc(max(var(--run-progress-pct, 8%), 18px) - 11px);
min-width: 6px;
background: color-mix(in srgb, var(--card-accent, #2f6db7) 75%, #eef5fc);
border-radius: inherit;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
pointer-events: none;
overflow: hidden; 
transition: width 900ms cubic-bezier(0.22, 0.8, 0.28, 1);
}
.infinite-card-run-progress-wave {
position: absolute;
top: 0;
left: calc(max(var(--run-progress-pct, 8%), 18px) - 14px + var(--wave-shift, 0px));
width: 28px;
height: 150%;
z-index: 1;
overflow: visible;
pointer-events: none;
transition: left 900ms cubic-bezier(0.22, 0.8, 0.28, 1);
}
.infinite-card-run-progress-wave.wave-front {
z-index: 3;
animation: infiniteCanvasWaveTravel 3.3s linear infinite;
}
.infinite-card-run-progress-wave.wave-front path {
fill: color-mix(in srgb, var(--card-accent, #2f6db7) 75%, #eef5fc);
animation: infiniteCanvasLineMorphA 3.4s ease-in-out infinite;
}
.infinite-card-run-progress-wave.wave-back {
--wave-shift: 5px;
z-index: 1;
-webkit-mask: linear-gradient(90deg, transparent 0, #000 12px);
mask: linear-gradient(90deg, transparent 0, #000 12px);
animation: infiniteCanvasWaveTravel 6.7s linear infinite;
}
.infinite-card-run-progress-wave.wave-back path {
fill: color-mix(in srgb, var(--card-accent, #2f6db7) 52%, #cfe8ff);
animation: infiniteCanvasLineMorphB 5.4s ease-in-out -2s infinite;
}
@keyframes infiniteCanvasWaveTravel {
from { transform: translateY(-33.333%); }
to { transform: translateY(0); }
}
@keyframes infiniteCanvasLineMorphA {
0%, 100% { d: path("M14 0 C21.33 8.33 21.33 16.67 14 25 C6.67 33.33 6.67 41.67 14 50 C21.33 58.33 21.33 66.67 14 75 C6.67 83.33 6.67 91.67 14 100 C21.33 108.33 21.33 116.67 14 125 C6.67 133.33 6.67 141.67 14 150 L0 150 L0 0 Z"); }
50% { d: path("M14 0 C18.4 8.33 18.4 16.67 14 25 C9.6 33.33 9.6 41.67 14 50 C18.4 58.33 18.4 66.67 14 75 C9.6 83.33 9.6 91.67 14 100 C18.4 108.33 18.4 116.67 14 125 C9.6 133.33 9.6 141.67 14 150 L0 150 L0 0 Z"); }
}
@keyframes infiniteCanvasLineMorphB {
0%, 100% { d: path("M14 0 C5.62 8.33 5.62 16.67 14 25 C22.38 33.33 22.38 41.67 14 50 C5.62 58.33 5.62 66.67 14 75 C22.38 83.33 22.38 91.67 14 100 C5.62 108.33 5.62 116.67 14 125 C22.38 133.33 22.38 141.67 14 150 L0 150 L0 0 Z"); }
50% { d: path("M14 0 C8.97 8.33 8.97 16.67 14 25 C19.03 33.33 19.03 41.67 14 50 C8.97 58.33 8.97 66.67 14 75 C19.03 83.33 19.03 91.67 14 100 C8.97 108.33 8.97 116.67 14 125 C19.03 133.33 19.03 141.67 14 150 L0 150 L0 0 Z"); }
}
.infinite-card-run-progress-wave.wave-front path.infinite-card-run-progress-waveline {
fill: none;
stroke: color-mix(in srgb, var(--card-accent, #2f6db7) 20%, #ffffff);
stroke-width: 1.7;
opacity: 0.44;
animation: infiniteCanvasLineMorphAS 3.4s ease-in-out infinite;
}
@keyframes infiniteCanvasLineMorphAS {
0%, 100% { d: path("M14 0 C21.33 8.33 21.33 16.67 14 25 C6.67 33.33 6.67 41.67 14 50 C21.33 58.33 21.33 66.67 14 75 C6.67 83.33 6.67 91.67 14 100 C21.33 108.33 21.33 116.67 14 125 C6.67 133.33 6.67 141.67 14 150"); }
50% { d: path("M14 0 C18.4 8.33 18.4 16.67 14 25 C9.6 33.33 9.6 41.67 14 50 C18.4 58.33 18.4 66.67 14 75 C9.6 83.33 9.6 91.67 14 100 C18.4 108.33 18.4 116.67 14 125 C9.6 133.33 9.6 141.67 14 150"); }
}
.infinite-card-run-progress-bubble {
position: absolute;
top: 0;
height: 100%;
width: 10px;
background: radial-gradient(circle 4px at 50% var(--bub-y, 78%), rgba(255, 255, 255, 0.9), color-mix(in srgb, var(--card-accent, #2f6db7) 20%, #ffffff) 50%, transparent 100%);
opacity: 0;
pointer-events: none;
animation: infiniteCanvasBubbleDrift 6s linear infinite;
}
@keyframes infiniteCanvasBubbleDrift {
0% { transform: translateX(-14px); opacity: 0; }
16% { opacity: 0.68; }
84% { opacity: 0.34; }
100% { transform: translateX(var(--bub-dx, 72px)); opacity: 0; }
}
.infinite-card-run-progress-glowband { display: none; }
.infinite-card.running:not(.media-ingress-active) .infinite-card-run-progress-glowband {
display: block;
position: absolute;
top: 0;
bottom: 0;
z-index: 1;
width: 26px;
left: calc(max(var(--run-progress-pct, 8%), 18px) - 13px);
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--card-accent, #2f6db7) 22%, #ffffff), transparent);
pointer-events: none;
animation: infiniteCanvasGlowBreath 3.4s ease-in-out infinite;
transition: left 900ms cubic-bezier(0.22, 0.8, 0.28, 1);
}
@keyframes infiniteCanvasGlowBreath {
0%, 100% { opacity: 0.036; }
50% { opacity: 0.08; }
}
@media (prefers-reduced-motion: reduce) {
.infinite-card-run-progress-wave,
.infinite-card-run-progress-wave path,
.infinite-card-run-progress-bubble,
.infinite-card-run-progress-glowband {
animation: none !important;
}
.infinite-card-run-progress-glowband { opacity: 0.06; }
}
.infinite-card.running:not(.media-ingress-active) .infinite-card-run-progress-label {
order: 0;
position: relative;
z-index: 2;
align-self: center;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 8px;
max-width: calc(100% - 24px);
min-height: 34px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.64);
box-shadow:
0 10px 24px -12px rgba(30, 64, 100, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.9),
inset 0 0 0 1px rgba(255, 255, 255, 0.5);
color: color-mix(in srgb, var(--card-accent, #2f6db7) 56%, #243247);
text-align: center;
white-space: nowrap;
font-size: 12px;
}
.infinite-card.running:not(.media-ingress-active) .infinite-card-run-progress-pct {
font-size: 15px;
font-weight: 860;
letter-spacing: 0;
line-height: 1;
}
.infinite-card.running:not(.media-ingress-active) .infinite-card-run-progress-eta {
font-size: 12px;
font-weight: 720;
opacity: 0.86;
}
.infinite-card-run-progress-label[hidden],
.infinite-card-run-progress-label:not(:has(.infinite-card-run-progress-pct:not(:empty), .infinite-card-run-progress-eta:not(:empty))) {
display: none;
}
.infinite-card.media-ingress-active {
--generation-progress-fill: linear-gradient(90deg, #c2410c, #f59e0b);
border-color: color-mix(in srgb, #f59e0b 48%, #d9e6f2);
}
.infinite-card.media-ingress-active .infinite-card-run-progress {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-end;
gap: 4px;
position: absolute;
inset: auto 12px 12px;
z-index: 8;
pointer-events: none;
}
.infinite-card.media-ingress-error {
border-color: rgba(180, 35, 24, 0.48);
}
.infinite-media-ingress-preview {
position: relative;
display: block !important;
width: 100%;
height: 100%;
min-height: 0;
overflow: hidden;
border-radius: inherit;
background: #eef3f9;
cursor: default;
}
.infinite-media-ingress-preview > :is(img, video) {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(1) saturate(0.18) brightness(0.94);
opacity: 0.72;
transition: filter 180ms ease, opacity 180ms ease;
}
.infinite-media-ingress-fallback {
position: absolute;
inset: 0;
display: grid;
place-items: center;
background: linear-gradient(145deg, #f4f6f9, #e7edf4);
color: #94a3b8;
}
.infinite-media-ingress-fallback span {
display: grid;
place-items: center;
width: 52px;
height: 52px;
border: 1px solid rgba(100, 116, 139, 0.2);
border-radius: 16px;
background: rgba(255, 255, 255, 0.66);
font-size: 20px;
font-weight: 800;
}
.infinite-media-ingress-shade {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(145deg, rgba(194, 65, 12, 0.54), rgba(245, 158, 11, 0.4));
}
.infinite-media-ingress-preview:is(.is-queued, .is-checking, .is-uploading, .is-finalizing)::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.42) 50%, transparent 70%);
transform: translateX(-100%);
animation: infiniteCardResultShimmer 1.25s linear infinite;
pointer-events: none;
}
.infinite-media-ingress-preview.is-finalizing .infinite-media-ingress-shade {
opacity: 0.45;
}
.infinite-media-ingress-preview.is-error .infinite-media-ingress-shade {
background: rgba(180, 35, 24, 0.34);
}
.infinite-media-ingress-copy {
position: absolute;
inset: 0;
z-index: 3;
display: grid;
place-content: center;
justify-items: center;
gap: 5px;
padding: 22px;
color: #fff;
text-align: center;
text-shadow: 0 1px 4px rgba(15, 23, 42, 0.42);
pointer-events: none;
}
.infinite-media-ingress-copy strong {
font-size: 13px;
font-weight: 800;
}
.infinite-media-ingress-copy span {
max-width: 100%;
overflow: hidden;
font-size: 11px;
text-overflow: ellipsis;
white-space: nowrap;
}
.infinite-media-ingress-actions {
position: absolute;
left: 50%;
bottom: 18px;
z-index: 9;
display: flex;
gap: 7px;
transform: translateX(-50%);
}
.infinite-media-ingress-actions[hidden] {
display: none !important;
}
.infinite-media-ingress-actions button {
min-width: 58px;
border: 1px solid rgba(255, 255, 255, 0.66);
border-radius: 8px;
background: rgba(255, 255, 255, 0.9);
color: #b42318;
font-size: 12px;
font-weight: 800;
padding: 6px 9px;
cursor: pointer;
box-shadow: 0 3px 10px rgba(15, 23, 42, 0.18);
}
.infinite-target-ingress-thumb {
position: relative;
width: 78px;
min-width: 78px;
height: 92px;
margin: 2px;
overflow: hidden;
border: 1px solid rgba(194, 65, 12, 0.34) !important;
border-radius: 10px;
background: #fffaf5 !important;
--upload-accent: #ea580c;
}
.infinite-target-ingress-thumb .reference-upload-status {
display: block;
min-height: 22px;
padding: 3px 5px;
overflow: hidden;
color: #9a3412;
font-size: 9px;
line-height: 1.15;
text-overflow: ellipsis;
white-space: nowrap;
}
.infinite-target-ingress-actions {
position: absolute;
inset: auto 3px 26px;
z-index: 8;
display: flex;
justify-content: center;
gap: 3px;
}
.infinite-target-ingress-actions[hidden] {
display: none !important;
}
.infinite-target-ingress-actions button {
min-width: 0;
border: 1px solid rgba(255, 255, 255, 0.78);
border-radius: 6px;
background: rgba(255, 255, 255, 0.94);
color: #b42318;
font-size: 9px;
font-weight: 800;
padding: 3px 5px;
}
.infinite-playlist-box > .infinite-target-ingress-thumb,
.infinite-card-media-box > .infinite-target-ingress-thumb,
#canvasComposerRefs > .infinite-target-ingress-thumb {
display: inline-flex;
vertical-align: top;
}
@media (prefers-reduced-motion: reduce) {
.infinite-media-ingress-preview::after {
animation: none !important;
}
}
.infinite-card.result-grid-card {
position: absolute;
background: color-mix(in srgb, var(--panel, #ffffff) 92%, transparent);
border: 1px solid var(--line, #e2e8f0);
border-radius: 18px;
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16);
overflow: visible;
pointer-events: none;
}
body.theme-dark .infinite-card.result-grid-card {
background: color-mix(in srgb, #1b1f28 94%, transparent);
border-color: #454c5c;
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
}
.infinite-card.result-grid-card .infinite-card-head {
position: absolute;
z-index: 8;
top: -38px;
bottom: auto;
left: 0;
right: auto;
display: flex;
justify-content: flex-end;
align-items: center;
width: var(--result-cell-w, calc((100% - var(--result-col-gap, 18px)) * 0.5)); 
max-width: none;
min-height: 32px;
height: 32px;
padding: 0;
background: transparent;
color: var(--card-accent, #2f6db7);
pointer-events: none;
}
.infinite-card.result-grid-card .infinite-card-head > :not(.infinite-card-results-toggle) {
display: none;
}
.infinite-card.result-grid-card .infinite-card-body { padding: 0; overflow: visible; }
.infinite-card.result-grid-card .infinite-card-run-progress { display: none !important; }
.infinite-card-result-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--result-col-gap, 18px);
row-gap: var(--result-row-gap, 34px);
overflow: visible;
align-items: start;
touch-action: none;
}
.infinite-card-result-module {
position: relative;
display: block;
width: 100%;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
overflow: visible;
cursor: grab;
pointer-events: auto;
text-align: left;
color: var(--text);
font: inherit;
user-select: none;
-webkit-user-drag: none;
appearance: none;
transition: transform 0.14s ease;
}
.infinite-card-result-module:active { cursor: grabbing; }
.infinite-card-result-module.generating { cursor: default; }
.infinite-card-result-module-head {
position: absolute;
left: 0;
right: 0;
top: auto;
bottom: calc(100% + 3px);
z-index: 2;
display: flex;
align-items: center;
gap: 5px;
height: 20px;
padding: 0 2px;
color: var(--card-accent, #2f6db7);
font-size: 13px;
line-height: 18px;
}
.infinite-card-result-module-head strong {
min-width: 0;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--card-accent, #2f6db7);
font-weight: 900;
}
.infinite-card-result-module-badge {
display: grid;
place-items: center;
width: 14px;
height: 14px;
border-radius: 0;
background: transparent;
color: var(--card-accent, #2f6db7);
flex: 0 0 14px;
}
.infinite-card-result-module-badge svg { width: 12px; height: 12px; }
.infinite-card-result-module-tag {
flex: 0 0 auto;
padding: 1px 7px;
border-radius: 999px;
background: var(--card-accent, #2f6db7);
color: #ffffff;
font-size: 10px;
font-weight: 800;
line-height: 16px;
}
.infinite-card-result-module-body {
position: relative;
display: grid;
place-items: center;
box-sizing: border-box;
width: 100%;
aspect-ratio: var(--result-cell-aspect, 1);
border: 1px solid #d6e0ec;
border-radius: 8px;
background: #ffffff;
box-shadow: 0 8px 18px rgba(31, 49, 79, 0.12);
overflow: hidden;
}
.infinite-card-result-module-body img,
.infinite-card-result-module-body video {
width: 100%;
height: 100%;
object-fit: cover;
border: none;
background: #eef3f9;
pointer-events: none;
}
.infinite-card-result-module:hover {
transform: translateY(-1px);
}
.infinite-card-result-module:hover .infinite-card-result-module-body {
border-color: color-mix(in srgb, var(--card-accent, #2f6db7) 45%, #cfe0f0);
box-shadow: 0 10px 24px rgba(31, 49, 79, 0.16);
}
.infinite-card-result-module.main .infinite-card-result-module-body {
border-color: var(--card-accent, #2f6db7);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--card-accent, #2f6db7) 20%, transparent), 0 6px 16px rgba(31, 49, 79, 0.14);
}
.infinite-card-result-module-body.generating {
background: #ffffff;
}
.infinite-card-result-skeleton {
position: absolute;
inset: 0;
overflow: hidden;
background: #eef3f9;
}
.infinite-card-result-skeleton::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.72) 50%, transparent 70%);
transform: translateX(-100%);
animation: infiniteCardResultShimmer 1.25s linear infinite;
}
@keyframes infiniteCardResultShimmer {
to { transform: translateX(100%); }
}
.infinite-card-result-ph {
position: relative;
z-index: 1;
display: grid;
justify-items: center;
gap: 9px;
}
.infinite-card-result-ph-icon {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 14px;
background: linear-gradient(150deg, color-mix(in srgb, var(--card-accent, #2f6db7) 22%, #fff) 0%, color-mix(in srgb, var(--card-accent, #2f6db7) 9%, #fff) 100%);
color: var(--card-accent, #2f6db7);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--card-accent, #2f6db7) 16%, transparent);
}
.infinite-card-result-ph-icon svg { width: 24px; height: 24px; }
.infinite-card-result-ph-text {
font-size: 12px;
font-weight: 700;
color: color-mix(in srgb, var(--card-accent, #2f6db7) 60%, #64748b);
}
.infinite-card-result-progress {
position: absolute;
left: 12px;
right: 12px;
bottom: 12px;
z-index: 2;
}
.infinite-card-results-toggle {
flex: 0 0 auto;
margin-left: auto; 
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 28px;
padding: 4px 10px;
border: 1px solid color-mix(in srgb, var(--card-accent, #2f6db7) 28%, transparent);
border-radius: 10px;
background: rgba(255, 255, 255, 0.94);
color: var(--card-accent, #2f6db7);
font-size: 12px;
font-weight: 800;
line-height: 17px;
cursor: pointer;
box-shadow: 0 8px 20px rgba(31, 49, 79, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.88);
transition: background 0.14s ease, border-color 0.14s ease;
}
.infinite-card-results-toggle:hover {
border-color: color-mix(in srgb, var(--card-accent, #2f6db7) 46%, transparent);
background: #ffffff;
}
.infinite-card-results-toggle-icon {
display: inline-grid;
place-items: center;
color: var(--card-accent, #2f6db7);
}
.infinite-card-results-toggle-icon svg { display: block; }
.infinite-card-results-count {
display: inline-grid;
place-items: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 8px;
background: var(--card-accent, #2f6db7);
color: #ffffff;
font-size: 11px;
font-weight: 800;
line-height: 16px;
text-align: center;
}
.infinite-card.result-grid-card .infinite-card-results-toggle {
pointer-events: auto;
}
.infinite-card.result-grid-card .infinite-card-results-count {
background: var(--card-accent, #2f6db7);
color: #ffffff;
}
.infinite-card.media-pickable {
opacity: 1;
outline: 2px solid rgba(47, 109, 183, 0.84);
outline-offset: 7px;
cursor: pointer;
filter: none;
box-shadow: 0 0 0 5px rgba(47, 109, 183, 0.14);
}
.infinite-card.media-pick-target {
outline: 2px dashed rgba(47, 109, 183, 0.48);
outline-offset: 5px;
}
.infinite-canvas-stage.picking-reference {
--canvas-pick-dim: 70%;
}
.infinite-canvas-stage.picking-reference .infinite-card:not(.media-pickable):not(.media-pick-target)::after {
content: "";
position: absolute;
inset: 0;
z-index: 6;
border-radius: inherit;
background: color-mix(in srgb, var(--canvas-surface, #f8fbfd) var(--canvas-pick-dim, 70%), transparent);
pointer-events: none;
}
.infinite-card-head {
display: flex;
align-items: center;
gap: 8px;
min-height: 40px;
padding: 9px 11px;
background: var(--card-accent, #2f6db7);
color: #ffffff;
cursor: default;
}
.infinite-card-link-handle {
position: relative;
width: 24px;
height: 24px;
border: 2px solid rgba(255, 255, 255, 0.86);
border-radius: 999px;
background: rgba(47, 109, 183, 0.58);
cursor: crosshair;
flex: 0 0 24px;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
transition: transform 0.16s var(--ease-ui, ease), background-color 0.16s ease, box-shadow 0.16s ease;
}
.infinite-card-link-handle:hover {
transform: scale(1.12);
background: rgba(47, 109, 183, 0.8);
}
.infinite-card-link-handle.linking {
transform: scale(1.16);
background: var(--accent, #2f6db7);
box-shadow: 0 0 0 6px rgba(47, 109, 183, 0.16), 0 4px 12px rgba(15, 23, 42, 0.2);
}
#infiniteCanvasStage.canvas-linking .infinite-card-link-handle:not(.linking) {
background: rgba(47, 109, 183, 0.78);
box-shadow: 0 0 0 4px rgba(47, 109, 183, 0.14), 0 4px 12px rgba(15, 23, 42, 0.18);
}
@media (prefers-reduced-motion: reduce) {
.infinite-canvas-link-temp,
.infinite-canvas-link-temp-dot,
.infinite-card-link-zone.snap-ready::after,
.infinite-card-link-zone.canvas-link-plugged::after {
animation: none;
}
}
.infinite-card-link-handle::before,
.infinite-card-link-handle::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: #ffffff;
border-radius: 1px;
pointer-events: none;
}
.infinite-card-link-handle::before {
width: 11px;
height: 2.4px;
transform: translate(-50%, -50%);
}
.infinite-card-link-handle::after {
width: 2.4px;
height: 11px;
transform: translate(-50%, -50%);
}
.infinite-card-head > .infinite-card-link-handle {
display: none;
}
.infinite-card-link-zone {
position: absolute;
top: 50%;
z-index: 6;
display: grid;
width: 56px;
height: 56px;
border-radius: 999px;
clip-path: circle(50%);
place-items: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.12s ease, transform 0.12s ease;
}
.infinite-card-link-zone.left {
left: -68px;
transform: translate(-8px, -50%);
}
.infinite-card-link-zone.right {
right: -68px;
transform: translate(8px, -50%);
}
.infinite-card.is-pointer-hover .infinite-card-link-zone,
.infinite-card.selected .infinite-card-link-zone,
.infinite-card-link-zone:focus-within,
.infinite-card-link-zone:has(.infinite-card-link-handle:hover),
.infinite-card-link-zone:has(.infinite-card-link-handle.linking) {
opacity: 1;
transform: translate(0, -50%);
}
.infinite-card-link-zone::before {
content: "";
position: absolute;
inset: 0 4px;
border-radius: 999px;
background: rgba(47, 109, 183, 0.015);
}
.infinite-card-link-zone .infinite-card-link-handle {
pointer-events: auto;
}
.infinite-card-link-handle:hover {
background: rgba(37, 90, 156, 0.78);
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.22); 
}
.infinite-card-link-handle.linking {
opacity: 0;
transform: scale(0.72);
}
.infinite-card-link-zone:has(.infinite-card-link-handle.magnetized) {
clip-path: none !important;
overflow: visible !important;
}
.infinite-card.canvas-link-snap-target {
outline: 2px solid var(--accent, #2f6db7);
outline-offset: 2px;
box-shadow: 0 0 0 6px rgba(47, 109, 183, 0.14), 0 14px 34px rgba(47, 109, 183, 0.22);
transition: box-shadow 0.14s ease;
}
.canvas-studio-shell .infinite-card.result-grid-card.canvas-link-snap-target {
outline: 2px solid var(--accent, #2f6db7) !important; 
outline-offset: 2px;
}
.infinite-card-link-zone.snap-ready,
.infinite-card-link-zone.canvas-link-plugged {
opacity: 1;
transform: translate(0, -50%);
clip-path: none !important;
overflow: visible !important;
}
.infinite-card-link-zone.snap-ready .infinite-card-link-handle {
transform: scale(1.28);
background: var(--accent, #2f6db7);
box-shadow: 0 0 0 6px rgba(47, 109, 183, 0.18), 0 6px 18px rgba(15, 23, 42, 0.24);
}
.infinite-card-link-zone.snap-ready::after {
content: "";
position: absolute;
inset: 6px;
border-radius: 999px;
border: 2px solid rgba(47, 109, 183, 0.55);
pointer-events: none;
animation: canvasLinkSnapPulse 0.9s ease-out infinite;
}
@keyframes canvasLinkSnapPulse {
0% { transform: scale(0.66); opacity: 0.9; }
75% { transform: scale(1.05); opacity: 0; }
100% { transform: scale(1.05); opacity: 0; }
}
.infinite-card-link-zone.canvas-link-plugged::after {
content: "";
position: absolute;
inset: 6px;
border-radius: 999px;
border: 2px solid rgba(47, 109, 183, 0.65);
pointer-events: none;
animation: canvasLinkPluggedRipple 0.42s cubic-bezier(0.22, 0.82, 0.3, 1) forwards;
}
@keyframes canvasLinkPluggedRipple {
0% { transform: scale(0.55); opacity: 0.95; }
100% { transform: scale(1.45); opacity: 0; }
}
#infiniteCanvasStage.canvas-link-snapped .infinite-canvas-link-temp-dot {
animation-duration: 0.7s;
}
.infinite-card-head:active {
cursor: default;
}
.infinite-card-head strong {
min-width: 0;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.infinite-card-badge {
display: grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.18);
font-size: 13px;
font-weight: 800;
}
.infinite-card-body {
padding: 10px;
color: var(--text);
}
.infinite-card-body textarea {
width: 100%;
min-height: 78px;
resize: none;
border: 1px solid #d7e2ef;
border-radius: 8px;
background: #ffffff;
color: var(--text);
padding: 8px;
font: inherit;
}
.infinite-card[data-canvas-type="text"],
.infinite-card[data-canvas-type="prompt"] {
display: flex;
flex-direction: column;
}
.infinite-card[data-canvas-type="text"] .infinite-card-body,
.infinite-card[data-canvas-type="prompt"] .infinite-card-body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
padding: 0;
}
.infinite-card[data-canvas-type="text"] .infinite-card-body .infinite-card-linked-text,
.infinite-card[data-canvas-type="prompt"] .infinite-card-body .infinite-card-linked-text {
margin: 8px 12px 0;
}
.infinite-card-linked-text { display: none !important; }
.infinite-card[data-canvas-type="text"] .infinite-card-body textarea,
.infinite-card[data-canvas-type="prompt"] .infinite-card-body textarea {
flex: 1 1 auto;
min-height: 88px;
border: none !important;
border-radius: 0 0 16px 16px;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
padding: 6px 13px 13px !important;
resize: none !important;
}
.infinite-card-body input,
.infinite-card-body select {
width: 100%;
min-width: 0;
min-height: 28px;
border: 1px solid #d7e2ef;
border-radius: 7px;
background: #ffffff;
color: var(--text);
padding: 4px 7px;
font: inherit;
}
.infinite-card-cs {
position: relative;
width: 100%;
min-width: 0;
}
.infinite-card-cs-native {
display: none;
}
.infinite-card-cs-trigger {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
min-height: 28px;
padding: 4px 9px;
border: 1px solid #d7e2ef;
border-radius: 7px;
background: #ffffff;
color: var(--text);
font: inherit;
cursor: pointer;
user-select: none;
transition: border-color 130ms ease, box-shadow 130ms ease;
}
.infinite-card-cs-trigger:hover {
border-color: #b9cbe0;
}
.infinite-card-cs.cs-open .infinite-card-cs-trigger {
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(47, 109, 183, 0.14);
}
.infinite-card-cs.is-disabled {
opacity: 0.6;
}
.infinite-card-cs.is-disabled .infinite-card-cs-trigger {
cursor: not-allowed;
}
.infinite-card-cs-label {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
font-weight: inherit;
}
.infinite-card-cs.model-branded .infinite-card-cs-trigger {
justify-content: flex-start;
padding-inline: 6px;
}
.infinite-card-cs.model-branded .infinite-card-cs-label {
flex: 1 1 auto;
display: flex;
justify-content: flex-start;
min-width: 0;
}
.infinite-card-cs-main {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 6px;
width: min(100%, 214px);
min-width: 0;
}
.infinite-card-cs-main.has-generation-metric {
justify-content: space-between;
width: 100%;
max-width: none;
gap: 8px;
}
.infinite-card-cs-main.current {
width: 100%;
max-width: 100%;
gap: 5px;
}
.infinite-card-cs-main.current .model-logo {
width: 14px;
height: 14px;
border-radius: 4px;
}
.infinite-card-cs-main .model-logo {
width: 16px;
height: 16px;
border-radius: 5px;
}
.infinite-card-cs-text {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.infinite-card-cs-caret {
flex: 0 0 auto;
color: #8497ab;
transition: transform 140ms ease;
}
.infinite-card-cs.cs-open .infinite-card-cs-caret {
transform: rotate(180deg);
}
.infinite-card-cs-pop {
position: absolute;
top: calc(100% + 8px);
bottom: auto;
left: 0;
z-index: 40;
min-width: 100%;
width: max-content;
max-width: min(280px, 72vw);
max-height: min(248px, var(--canvas-cs-pop-room, 248px));
overflow-y: auto;
padding: 6px;
display: grid;
gap: 2px;
border: 1px solid rgba(202, 215, 229, 0.92);
border-radius: 13px;
background: #ffffff;
box-shadow: 0 18px 46px rgba(15, 23, 42, 0.2);
cursor: default;
transform-origin: top center;
animation: qrPopIn 130ms ease;
}
.infinite-card-cs.cs-pop-up .infinite-card-cs-pop {
top: auto;
bottom: calc(100% + 8px);
transform-origin: bottom center;
}
.infinite-card-cs-pop[hidden] {
display: none;
}
.infinite-card-cs-opt {
padding: 7px 10px;
border-radius: 9px;
color: #2c3e52;
font-size: 12px;
font-weight: 600;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
transition: background 120ms ease, color 120ms ease;
}
.infinite-card-cs-pop.model-select-pop {
width: min(280px, max(100%, 72vw));
}
.infinite-card-cs-opt.has-model-logo,
.infinite-card-cs-opt.has-model-status {
display: flex;
align-items: center;
justify-content: flex-start;
min-height: 36px;
padding: 7px 8px;
}
.infinite-card-cs-opt.has-model-logo .infinite-card-cs-main,
.infinite-card-cs-opt.has-model-status .infinite-card-cs-main {
width: min(100%, 268px);
}
.infinite-card-cs-opt.has-model-status .infinite-card-cs-main.has-generation-metric {
width: 100%;
}
.infinite-card-cs-opt:hover {
background: #eef3f8;
}
.infinite-card-cs-opt.active {
background: #eaf2fb;
color: var(--accent);
font-weight: 800;
}
.infinite-card-fields {
display: grid;
gap: 7px;
}
.infinite-card-field {
display: grid;
grid-template-columns: 72px minmax(0, 1fr);
align-items: center;
gap: 8px;
color: #4a5870;
font-size: 12px;
}
.infinite-card-field span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.infinite-card-note {
white-space: pre-wrap;
line-height: 1.5;
color: #2c3b50;
}
.director-card { display: grid; gap: 8px; padding: 2px; }
.director-card-strip { display: flex; gap: 5px; overflow: hidden; }
.director-strip-cell {
position: relative;
flex: 1 1 0;
min-width: 0;
aspect-ratio: 16 / 10;
border-radius: 8px;
border: 1px solid var(--border);
background: #f5f7fa;
display: grid;
place-items: center;
overflow: hidden;
}
.director-strip-cell > span { font-size: 11px; font-weight: 800; color: var(--muted-2, #98a2b3); }
.director-strip-cell.has-img { border-color: transparent; }
.director-strip-cell.has-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.director-strip-cell.has-img > span { position: absolute; left: 3px; top: 2px; color: #fff; font-size: 10px; text-shadow: 0 1px 2px rgba(0,0,0,.6); z-index: 1; }
.director-strip-cell.director-strip-more { background: #eef2f7; color: #475569; font-weight: 800; font-size: 12px; }
.director-card-meta { font-size: 12px; color: var(--muted); }
.director-card-hint { font-size: 11.5px; color: var(--muted-2, #98a2b3); }
.director-console { display: grid; gap: 12px; }
.director-block { border: 1px solid var(--border); border-radius: 12px; background: #fbfcfe; padding: 11px 12px; display: grid; gap: 9px; }
.director-block-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 850; color: #344054; }
.director-block-head .director-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #eef2f7; color: #475569; font-size: 11px; font-weight: 800; }
.director-add {
border: 1px solid var(--accent);
border-radius: 8px;
background: #eaf2fb;
color: var(--accent-strong);
font-weight: 750;
font-size: 12px;
padding: 4px 10px;
cursor: pointer;
}
.director-add:hover { background: var(--accent); color: #fff; }
.director-field-col { display: grid; gap: 4px; font-size: 12px; color: #475569; min-width: 0; }
.director-field-col > textarea,
.director-field-col > select,
.director-cast-name,
.director-shot-prompt,
.director-shot-size { width: 100%; box-sizing: border-box; font-family: inherit; }
.director-field-col > textarea,
.director-shot-prompt { resize: vertical; border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; font-size: 13px; }
.director-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.director-empty { font-size: 12.5px; color: var(--muted); padding: 10px; border: 1px dashed var(--border); border-radius: 8px; text-align: center; line-height: 1.6; }
.director-cast-list { display: grid; gap: 8px; }
.director-cast { border: 1px solid var(--border); border-radius: 10px; background: #fff; padding: 8px; display: grid; gap: 7px; }
.director-cast-thumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.director-cast-thumb { position: relative; width: 46px; height: 46px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.director-cast-thumb > img { width: 100%; height: 100%; object-fit: cover; }
.director-cast-thumb-del {
position: absolute; right: 1px; top: 1px; width: 16px; height: 16px;
display: grid; place-items: center; border: 0; border-radius: 50%;
background: rgba(16,24,40,.62); color: #fff; font-size: 10px; line-height: 1; cursor: pointer;
}
.director-cast-add-ref {
width: 46px; height: 46px; border: 1px dashed var(--border); border-radius: 8px;
background: #f7f9fc; color: var(--accent-strong); font-size: 12px; font-weight: 700; cursor: pointer;
}
.director-cast-add-ref:hover { border-color: var(--accent); background: #eaf2fb; }
.director-cast-row { display: flex; gap: 8px; align-items: center; }
.director-cast-name { flex: 1 1 auto; border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; font-size: 13px; }
.director-cast-del { flex: 0 0 auto; border: 1px solid #f1c4c0; border-radius: 8px; background: #fff; color: var(--danger); font-size: 12px; padding: 6px 10px; cursor: pointer; }
.director-cast-del:hover { background: var(--danger); color: #fff; }
.director-shot-list { display: grid; gap: 9px; }
.director-shot { border: 1px solid var(--border); border-radius: 10px; background: #fff; padding: 9px; display: grid; gap: 7px; transition: border-color .15s ease, box-shadow .15s ease; }
.director-shot.is-running { border-color: #b45309; box-shadow: 0 0 0 3px rgba(180,83,9,.12); }
.director-shot-head { display: flex; align-items: center; gap: 7px; }
.director-shot-no { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: #b45309; color: #fff; font-size: 12px; font-weight: 800; }
.director-shot-head .director-shot-size { flex: 0 0 auto; width: auto; max-width: 40%; border: 1px solid var(--border); border-radius: 7px; padding: 4px 6px; font-size: 12px; }
.director-shot-run { flex: 1 1 auto; border: 1px solid var(--accent); border-radius: 7px; background: #eaf2fb; color: var(--accent-strong); font-weight: 750; font-size: 12.5px; padding: 5px 8px; cursor: pointer; }
.director-shot-run:hover:not(:disabled) { background: var(--accent); color: #fff; }
.director-shot-run:disabled { opacity: .55; cursor: default; }
.director-shot-mini { flex: 0 0 auto; width: 24px; height: 26px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--muted); cursor: pointer; font-size: 13px; line-height: 1; }
.director-shot-mini:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-strong); }
.director-shot-mini:disabled { opacity: .4; cursor: default; }
.director-shot-del { flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--muted); cursor: pointer; }
.director-shot-del:hover { border-color: var(--danger); color: var(--danger); }
.director-shot-cast { display: flex; flex-wrap: wrap; gap: 6px; }
.director-cast-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px; background: #f7f9fc; font-size: 12px; color: #475569; cursor: pointer; }
.director-cast-chip > input { width: auto; margin: 0; }
.director-cast-chip.on { border-color: #b45309; background: rgba(180,83,9,.1); color: #92400e; }
.director-shot-result { border-radius: 8px; overflow: hidden; border: 1px solid var(--border); background: #f5f7fa; min-height: 84px; display: grid; place-items: center; }
.director-shot-result > span { font-size: 12px; color: var(--muted-2, #98a2b3); }
.director-shot-result.has-img { border-color: transparent; min-height: 0; }
.director-shot-result.has-img > img { width: 100%; display: block; max-height: 280px; object-fit: contain; background: #0d1117; cursor: zoom-in; }
.director-run-bar { position: sticky; bottom: 0; padding-top: 2px; }
.director-run-all { width: 100%; }
.director-run-bar { display: flex; gap: 8px; }
.director-run-bar .secondary { flex: 0 0 auto; }
.director-run-bar .primary { flex: 1 1 auto; }
.poser-card { display: grid; gap: 8px; padding: 2px; }
.poser-card-shot { aspect-ratio: 4 / 3; border-radius: 10px; border: 1px solid var(--border); background: linear-gradient(135deg,#efe7fb,#e6edf7); display: grid; place-items: center; overflow: hidden; }
.poser-card-shot > span { font-size: 12px; font-weight: 800; color: #7c3aed; }
.poser-card-shot.has-img { border-color: transparent; }
.poser-card-shot.has-img > img { width: 100%; height: 100%; object-fit: cover; }
.infinite-card[data-canvas-type="poser"] { border: 0; display: flex; flex-direction: column; }
body.theme-dark:not(.auth-required) .infinite-card[data-canvas-type="poser"] { border: 0; }
.infinite-card[data-canvas-type="poser"] .infinite-card-head { border-radius: 18px 18px 0 0; }
.infinite-card[data-canvas-type="poser"] .infinite-card-body { padding: 0; flex: 1 1 auto; min-height: 0; }
.infinite-card[data-canvas-type="poser"] .poser-card { padding: 0; gap: 0; display: block; height: 100%; position: relative; }
.infinite-card[data-canvas-type="poser"] .poser-card-shot { border: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.poser-card-pose-btn { position: absolute; left: 0; right: 0; bottom: 12px; margin: 0 auto; width: fit-content; max-width: 86%; z-index: 4; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 14px; border: 0; border-radius: 999px; background: rgba(17,14,34,0.74); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0.2px; cursor: pointer; white-space: nowrap; box-shadow: 0 8px 22px rgba(0,0,0,0.32); opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity 0.16s ease, transform 0.16s ease, background 0.16s ease; }
.infinite-card.is-pointer-hover[data-canvas-type="poser"] .poser-card-pose-btn,
.infinite-card[data-canvas-type="poser"].selected .poser-card-pose-btn { opacity: 1; pointer-events: auto; transform: translateY(0); }
.poser-card-pose-btn:hover { background: rgba(17,14,34,0.92); }
.poser-card-pose-btn:active { background: rgba(17,14,34,1); }
.poser-card-shot.poser-card-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; position: relative;
background: radial-gradient(130% 140% at 50% -20%, rgba(124,58,237,0.16), transparent 62%), linear-gradient(152deg,#f2ecfd 0%,#eaf0fb 55%,#f4eefc 100%); }
.poser-card-empty .poser-card-glyph { display: grid; place-items: center; line-height: 0; }
.poser-card-empty .poser-card-glyph svg { width: 28%; max-width: 54px; min-width: 30px; height: auto; color: #8b5cf6; opacity: 0.92; filter: drop-shadow(0 5px 12px rgba(124,58,237,0.2)); }
.poser-card-empty .poser-card-title { font-size: 13px; font-weight: 800; color: #6d28d9; letter-spacing: 0.4px; }
.poser-card-empty .poser-card-sub { font-size: 10.5px; font-weight: 600; color: #a08fc8; }
.poser-card-empty .poser-card-tip { margin-top: 3px; font-size: 10px; font-weight: 600; color: #7c5cc9; background: rgba(124,58,237,0.09); border: 1px solid rgba(124,58,237,0.16); border-radius: 999px; padding: 3px 11px; max-width: 88%; text-align: center; line-height: 1.4; }
.poser-card-empty .poser-card-badge { position: absolute; top: 9px; left: 9px; font-size: 9.5px; font-weight: 900; letter-spacing: 0.6px; color: #fff;
background: linear-gradient(135deg,#8b5cf6,#6d28d9); border-radius: 6px; padding: 1px 6px; box-shadow: 0 2px 6px rgba(109,40,217,0.32); }
.poser-bg-picker { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 30; max-height: 280px; overflow-y: auto;
background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 12px; box-shadow: 0 16px 40px rgba(15,23,42,0.22); padding: 6px; display: flex; flex-direction: column; gap: 3px; }
.poser-bg-pick-head { font-size: 11px; font-weight: 800; color: #64748b; padding: 4px 8px 6px; }
.poser-bg-pick-empty { font-size: 12px; color: #94a3b8; line-height: 1.6; padding: 10px; text-align: center; }
.poser-bg-pick-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px; border: 0; background: transparent; border-radius: 9px; cursor: pointer; text-align: left; }
.poser-bg-pick-item:hover { background: #f1f5fb; }
.poser-bg-pick-thumb { width: 46px; height: 30px; flex: 0 0 auto; border-radius: 6px; background: #e8eef6 center/cover no-repeat; border: 1px solid var(--border, #e2e8f0); }
.poser-bg-pick-name { font-size: 12.5px; font-weight: 600; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poser-console { display: grid; gap: 10px; }
.poser-stage { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: #eaeef3; touch-action: none; }
.poser-canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; overscroll-behavior: none; }
.poser-canvas:active { cursor: grabbing; }
.poser-stage-hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); max-width: min(92%, 760px); width: max-content; text-align: center; font-size: 11.5px; line-height: 1.45; white-space: normal; word-break: break-word; color: #dfe9f6; background: rgba(15, 23, 42, 0.62); border-radius: 999px; padding: 6px 16px; pointer-events: none; z-index: 4; transition: opacity .45s ease, transform .45s ease; }
.poser-stage-hint.is-faded { opacity: 0; transform: translate(-50%, 6px); }
.poser-runtime-overlay { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; padding: 20px; box-sizing: border-box; background: rgba(226, 232, 240, .76); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.poser-runtime-overlay[hidden] { display: none !important; }
.poser-runtime-card { width: min(390px, 92%); padding: 18px 20px; border: 1px solid rgba(148, 163, 184, .34); border-radius: 16px; background: rgba(255, 255, 255, .94); color: #1e293b; box-shadow: 0 18px 55px rgba(15, 23, 42, .18); }
.poser-runtime-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.poser-runtime-head strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 800; }
.poser-runtime-head span { flex: 0 0 auto; color: #58667a; font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 800; }
.poser-runtime-track { width: 100%; height: 5px; }
.poser-runtime-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 18px; margin-top: 9px; color: #64748b; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.poser-runtime-meta span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.poser-runtime-error { margin: 10px 0 0; color: #b42318; font-size: 12px; line-height: 1.45; word-break: break-word; }
.poser-runtime-retry { display: block; margin: 12px 0 0 auto; }
.poser-runtime-overlay.is-error { background: rgba(241, 245, 249, .86); }
.poser-toolbar { display: flex; flex-wrap: wrap; gap: 6px; }
.poser-tool { border: 1px solid var(--border); border-radius: 8px; background: #fff; color: #475569; font-size: 12px; font-weight: 700; padding: 5px 10px; cursor: pointer; }
.poser-tool:hover:not(:disabled) { border-color: #7c3aed; color: #7c3aed; background: #f6f3fe; }
.poser-tool:disabled { opacity: .5; cursor: default; }
.poser-tool.poser-tool-danger:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); background: #fff5f4; }
.poser-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.poser-prompt { width: 100%; box-sizing: border-box; resize: vertical; border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; font-size: 13px; font-family: inherit; }
.poser-fields-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.poser-mode-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 6px; }
.poser-mode { border: 1px solid var(--border); border-radius: 8px; background: #fff; color: #475569; font-size: 12.5px; font-weight: 700; padding: 6px 4px; cursor: pointer; }
.poser-mode:hover { border-color: #7c3aed; color: #7c3aed; }
.poser-mode.active { border-color: #7c3aed; background: #7c3aed; color: #fff; }
.poser-add-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.poser-add-label { font-size: 11.5px; color: #8a96a7; font-weight: 700; letter-spacing: .3px; }
.poser-add-row .poser-build-select { flex: 0 0 auto; width: auto; min-width: 92px; max-width: 132px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: #475569; font-size: 12px; font-weight: 700; padding: 5px 6px; cursor: pointer; }
.poser-add-row .poser-build-select:hover { border-color: #7c3aed; color: #7c3aed; }
.poser-actor-list { display: flex; flex-direction: column; gap: 6px; max-height: 168px; overflow: auto; }
.poser-actor { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 10px; background: #fff; cursor: pointer; transition: border-color .12s, background .12s; }
.poser-actor:hover { border-color: #c4b5fd; background: #faf8ff; }
.poser-actor.selected { border-color: #7c3aed; background: #f3effe; box-shadow: 0 0 0 1px #7c3aed inset; }
.poser-actor-dot { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(0,0,0,.18); }
.poser-actor .poser-actor-name { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 650; color: #1f2a37; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poser-actor-kind { flex: 0 0 auto; color: var(--muted); font-size: 11.5px; }
.poser-actor-dup, .poser-actor-del, .poser-shot-del { flex: 0 0 auto; width: 24px; height: 24px; min-height: 0; display: grid; place-items: center; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #9aa7b8; cursor: pointer; font-size: 13px; padding: 0; transition: background .12s, color .12s, border-color .12s; }
.poser-actor-dup:hover { border-color: #e6def9; background: #f6f3fe; color: #7c3aed; }
.poser-actor-del, .poser-shot-del { font-size: 12px; }
.poser-actor-del:hover, .poser-shot-del:hover { border-color: #f3d9d6; background: #fff5f4; color: var(--danger); }
.poser-rename-input { width: 100%; min-width: 0; border: 1px solid var(--poser-accent, #7c3aed); border-radius: 6px; background: #fff; padding: 2px 6px; font-size: 13px; font-weight: 650; color: #1f2a37; outline: none; box-sizing: border-box; }
.poser-inspector { display: flex; flex-direction: column; gap: 8px; }
.poser-insp-empty { color: var(--muted); font-size: 12px; padding: 4px 2px; }
.poser-insp-axis { display: grid; grid-template-columns: 36px repeat(3, minmax(0, 1fr)); align-items: center; gap: 6px; }
.poser-insp-axis-label { font-size: 12px; color: #475569; font-weight: 700; }
.poser-insp-cell { display: flex; align-items: center; gap: 4px; border: 1px solid var(--border); border-radius: 7px; background: #fff; padding: 0 7px; height: 30px; min-width: 0; }
.poser-insp-cell i { font-style: normal; font-size: 11px; font-weight: 800; color: #9aa6b6; white-space: nowrap; flex: 0 0 auto; }
.poser-insp-cell input { flex: 1 1 auto; width: 100%; min-width: 0; border: 0; background: transparent; font-size: 12px; color: #1f2a37; padding: 0; outline: none; }
.poser-insp-cell input::-webkit-outer-spin-button, .poser-insp-cell input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.poser-insp-scale { display: flex; align-items: center; gap: 9px; }
.poser-insp-scale input[type="range"] { flex: 1 1 auto; min-width: 0; accent-color: #7c3aed; }
.poser-insp-scale input[type="number"] { flex: 0 0 56px; width: 56px; height: 30px; border: 1px solid var(--border); border-radius: 7px; padding: 0 6px; font-size: 12px; text-align: center; color: #1f2a37; }
.poser-insp-head { display: flex; align-items: center; gap: 8px; }
.poser-insp-dot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--border); }
.poser-insp-name { flex: 1 1 auto; min-width: 0; height: 32px; border: 1px solid var(--border); border-radius: 8px; padding: 0 9px; font-size: 13px; font-weight: 600; color: #1f2a37; background: #fff; outline: none; }
.poser-insp-name:focus { border-color: #7c3aed; }
.poser-insp-color { flex: 0 0 auto; width: 34px; height: 32px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: #fff; cursor: pointer; }
.poser-insp-tabs { display: flex; gap: 4px; margin-bottom: 2px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.poser-insp-tab { flex: 0 0 auto; border: 0; background: transparent; color: #64748b; font-size: 13px; font-weight: 750; padding: 5px 14px; border-radius: 8px; cursor: pointer; transition: background .12s, color .12s; }
.poser-insp-tab:hover { color: #7c3aed; background: rgba(124, 58, 237, .08); }
.poser-insp-tab.active { background: #7c3aed; color: #fff; }
.poser-insp-pane { display: flex; flex-direction: column; gap: 12px; }
.poser-insp-pane[hidden] { display: none; }
.poser-insp-field { display: flex; flex-direction: column; gap: 5px; }
.poser-insp-flabel { font-size: 12px; font-weight: 700; color: #64748b; }
.poser-insp-xyz { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.poser-insp-uni { display: flex; align-items: center; gap: 10px; }
.poser-insp-uni-slider { flex: 1 1 auto; min-width: 0; accent-color: #7c3aed; cursor: pointer; }
.poser-insp-uni-val { flex: 0 0 auto; min-width: 54px; text-align: center; height: 30px; line-height: 28px; border: 1px solid var(--border); border-radius: 7px; background: #fff; font-size: 12px; color: #1f2a37; }
.poser-insp-color-row { display: flex; align-items: center; gap: 8px; }
.poser-insp-colorhex { flex: 1 1 auto; min-width: 0; height: 32px; border: 1px solid var(--border); border-radius: 8px; padding: 0 10px; font-size: 12.5px; color: #1f2a37; background: #fff; outline: none; }
.poser-insp-colorhex:focus { border-color: #7c3aed; }
.poser-scene { display: flex; flex-direction: column; gap: 12px; }
.poser-scene .poser-field-2 { gap: 8px; }
.poser-insp-field > select, .poser-insp-field > input, .poser-insp-field > .poser-num { width: 100%; box-sizing: border-box; height: 32px; }
.poser-insp-field > .poser-tool { width: 100%; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; }
.poser-insp-field .poser-pano-modes { margin: 0; }
.poser-insp-field .poser-hdr-row { margin-top: 0; }
.poser-insp-pose-sec { display: flex; flex-direction: column; gap: 6px; }
.poser-insp-seclabel { font-size: 12px; font-weight: 700; color: #475569; }
.poser-pose-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.poser-pose-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px 4px; border: 1px solid var(--border); border-radius: 9px; background: #fff; color: #475569; cursor: pointer; transition: border-color .12s, color .12s, background .12s, transform .12s; }
.poser-pose-btn svg { width: 26px; height: 26px; }
.poser-pose-btn span { font-size: 10px; line-height: 1; color: #64748b; white-space: nowrap; }
.poser-pose-btn:hover { border-color: #7c3aed; color: #7c3aed; background: #f6f3ff; transform: translateY(-1px); }
.poser-pose-btn:hover span { color: #7c3aed; }
.poser-pose-btn:active { transform: translateY(0); }
.poser-pose-btn:first-child { border-color: #c4b5fd; background: #faf8ff; } 
.poser-pose-grid-2row { max-height: 96px; overflow-y: auto; overflow-x: hidden; padding: 2px 4px 2px 2px; }
.poser-pose-grid-2row::-webkit-scrollbar { width: 6px; }
.poser-pose-grid-2row::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.poser-pose-btn { position: relative; touch-action: none; }
.poser-insp-hint { font-size: 10px; font-weight: 500; color: #94a3b8; margin-left: 7px; }
.poser-pose-custom { border-color: #f3cd9a; background: #fffaf2; }
.poser-pose-custom:hover { border-color: #ef9d4e; color: #d97a18; background: #fff6ea; }
.poser-pose-del { position: absolute; top: -5px; right: -5px; width: 15px; height: 15px; line-height: 14px; text-align: center; font-size: 10px; font-style: normal; color: #fff; background: #f0a04b; border-radius: 50%; opacity: 0; transition: opacity .12s, background .12s; box-shadow: 0 1px 3px rgba(0,0,0,.22); }
.poser-pose-custom:hover .poser-pose-del { opacity: 1; }
.poser-pose-del:hover { background: #e8554e; }
.poser-pose-new { border-style: dashed; color: #7c3aed; border-color: #c4b5fd; background: #faf8ff; }
.poser-pose-new:hover { border-color: #7c3aed; background: #f3eeff; }
.poser-pose-new svg { width: 22px; height: 22px; }
.poser-pose-btn.poser-pose-dragging { opacity: .28; }
.poser-pose-btn.poser-drop-left { box-shadow: inset 3px 0 0 #7c3aed; }
.poser-pose-btn.poser-drop-right { box-shadow: inset -3px 0 0 #7c3aed; }
.poser-pose-ghost { position: fixed; z-index: 99999; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px 4px; border: 1px solid #7c3aed; border-radius: 9px; background: #fff; color: #7c3aed; opacity: .94; box-shadow: 0 10px 26px rgba(80,40,160,.32); transform: scale(1.07); }
.poser-pose-ghost svg { width: 26px; height: 26px; }
.poser-pose-ghost span { font-size: 10px; line-height: 1; color: #7c3aed; }
.poser-pose-ghost .poser-pose-del { display: none; }
.poser-posename-overlay { position: fixed; inset: 0; z-index: 100000; background: rgba(15,18,28,.42); display: flex; align-items: center; justify-content: center; }
.poser-posename-card { width: 264px; background: #fff; border-radius: 14px; padding: 18px; box-shadow: 0 20px 54px rgba(0,0,0,.3); }
.poser-posename-title { font-size: 14px; font-weight: 700; color: #1e293b; margin-bottom: 12px; }
.poser-posename-input { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; font-size: 13px; outline: none; }
.poser-posename-input:focus { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.13); }
.poser-posename-err { color: #e8554e; font-size: 11px; margin-top: 6px; }
.poser-posename-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.poser-posename-btns button { padding: 7px 16px; border-radius: 8px; font-size: 13px; cursor: pointer; border: 1px solid var(--border); background: #fff; color: #475569; }
.poser-posename-btns .poser-posename-cancel:hover { background: #f1f5f9; }
.poser-posename-btns .poser-posename-ok { background: #7c3aed; color: #fff; border-color: #7c3aed; }
.poser-posename-btns .poser-posename-ok:hover { background: #6d28d9; }
.poser-insp-fold { border: 1px solid var(--border); border-radius: 10px; padding: 4px 8px 8px; background: #fbfcfe; }
.poser-insp-fold > summary { cursor: pointer; list-style: none; padding: 4px 0; user-select: none; }
.poser-insp-fold > summary::-webkit-details-marker { display: none; }
.poser-insp-fold > summary::before { content: "▾"; display: inline-block; width: 14px; color: #94a3b8; transition: transform .15s; }
.poser-insp-fold:not([open]) > summary::before { transform: rotate(-90deg); }
.poser-insp-fold > .poser-insp-axis { margin-top: 6px; }
.poser-num { width: 100%; height: 30px; border: 1px solid var(--border); border-radius: 7px; padding: 0 8px; font-size: 12px; color: #1f2a37; background: #fff; outline: none; }
.poser-num:focus { border-color: #7c3aed; }
.poser-pano-modes { display: flex; gap: 6px; margin: 4px 0 6px; }
.poser-pano-modes button { flex: 1 1 0; }
.poser-pano-modes button.active { border-color: #7c3aed; background: #f3effe; color: #7c3aed; font-weight: 700; }
.poser-pano-modes button:disabled { opacity: 0.45; cursor: not-allowed; }
.poser-pano-adjust { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.poser-pano-adjust[hidden] { display: none; }
.poser-pano-rot-label { font-size: 11.5px; color: #64748b; font-weight: 600; display: flex; justify-content: space-between; }
.poser-pano-rot-label b { color: #7c3aed; font-weight: 800; }
.poser-pano-adjust input[type="range"] { width: 100%; accent-color: #7c3aed; }
.poser-scrub { cursor: ew-resize; }
.poser-scrub:focus { cursor: text; }
.poser-shot-add { border: 1px solid var(--border); background: #fff; color: #475569; font-size: 12px; font-weight: 700; padding: 3px 11px; border-radius: 999px; cursor: pointer; transition: border-color .12s, color .12s; }
.poser-shot-add:hover { border-color: #7c3aed; color: #7c3aed; }
.poser-shot-list { display: flex; flex-direction: column; gap: 5px; }
.poser-shot-empty { color: var(--muted); font-size: 11.5px; line-height: 1.5; padding: 0 2px 2px; }
.poser-shot { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 10px; background: #fff; cursor: pointer; transition: border-color .12s, background .12s; }
.poser-shot:hover { border-color: #c4b5fd; background: #faf8ff; }
.poser-shot-ico { flex: 0 0 auto; color: #f2a23a; display: inline-flex; }
.poser-shot-name { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 650; color: #1f2a37; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poser-shot.selected { border-color: #7c3aed; background: #f3effe; box-shadow: 0 0 0 1px #7c3aed inset; }
.poser-shot-live { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; color: #16a34a; }
.poser-shot-free .poser-shot-ico { color: #64748b; }
.poser-fit-btn { width: 100%; }
label.director-field-col input[type="range"] { width: 100%; accent-color: #7c3aed; }
[data-poser-mm-val], [data-poser-fstop-val], [data-poser-laz-val], [data-poser-lel-val], [data-poser-lint-val] { color: #7c3aed; font-weight: 700; }
.image-studio-mask { padding: 0; }
#imageStudioModal { transition: opacity .22s ease, transform .24s cubic-bezier(.16, 1, .3, 1); transform-origin: center; }
#imageStudioModal:not(.is-open) { opacity: 0; transform: scale(.992); }
#imageStudioModal.is-open { opacity: 1; transform: none; }
#imageStudioModal.is-closing { opacity: 0; transform: scale(.992); }
.image-studio-panel {
width: 100vw; max-width: none; height: 100dvh; max-height: none;
border-radius: 0; padding: 0; overflow: hidden;
}
.image-studio {
position: relative; width: 100%; height: 100%; overflow: hidden;
background: var(--bg); color: var(--text);
}
.image-studio-stage {
position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: default;
background-color: var(--studio-canvas-surface-light);
background-image: var(--studio-canvas-grid-image-light);
}
body.theme-dark .image-studio-stage {
background-color: var(--studio-canvas-surface-dark);
background-image: var(--studio-canvas-grid-image-dark);
}
.image-studio-stage.is-panning { cursor: grabbing; }
.image-studio-canvas {
position: absolute; top: 0; left: 0;
box-shadow: 0 6px 28px rgba(38, 52, 92, .22);
}
.image-studio-loading {
position: absolute; inset: 0; display: grid; place-items: center; z-index: 5;
background: color-mix(in srgb, var(--bg) 72%, transparent); color: var(--muted); font-size: 14px;
}
.image-studio-loading[hidden] { display: none; }
.image-studio-rail,
.image-studio-options,
.image-studio-topright,
.image-studio-zoom,
.image-studio-aipanel {
background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-popover);
}
.image-studio-rail {
position: absolute; left: 16px; top: 50%; transform: translateY(-50%); z-index: 10;
display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: var(--radius-lg);
}
.image-studio-tool {
display: grid; grid-template-rows: auto auto; gap: 3px; justify-items: center;
width: 60px; padding: 8px 4px; border: 0; border-radius: var(--radius-md); cursor: pointer;
background: transparent; color: var(--muted); transition: background .15s, color .15s;
}
.image-studio-tool:hover { background: var(--surface-3); color: var(--text); }
.image-studio-tool.is-active { background: var(--brand-gradient); color: #fff; box-shadow: var(--brand-glow); }
.image-studio-tool-ico { display: inline-grid; place-items: center; }
.image-studio-tool-ico svg { width: 20px; height: 20px; }
.image-studio-tool-label { font-size: 11px; font-weight: 650; letter-spacing: .2px; }
.image-studio-options {
position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 9;
display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 7px 16px;
border-radius: var(--radius-lg); color: var(--text); max-width: min(64vw, 720px);
}
.image-studio-options-hint { font-size: 13px; color: var(--muted); }
.image-studio-topright {
position: absolute; top: 16px; right: 16px; z-index: 11;
display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: var(--radius-lg);
}
.image-studio-iconbtn {
display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: var(--radius-sm);
background: transparent; color: var(--muted); cursor: pointer; transition: background .15s, color .15s;
}
.image-studio-iconbtn svg { width: 19px; height: 19px; }
.image-studio-iconbtn:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.image-studio-iconbtn:disabled { opacity: .4; cursor: default; }
.image-studio-close:hover:not(:disabled) { background: var(--danger-soft); color: #d92d20; }
.image-studio-sep { width: 1px; height: 22px; background: var(--border); margin: 0 2px; }
.image-studio-aipanel {
position: absolute; top: 74px; right: 16px; width: 300px; max-height: calc(100dvh - 168px); overflow: auto; z-index: 9;
padding: 16px; border-radius: var(--radius-lg); color: var(--text);
}
.image-studio-aipanel[hidden] { display: none; }
.image-studio-foot {
position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 10;
display: flex; align-items: center; gap: 12px;
}
.image-studio-zoom {
display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; border-radius: var(--radius-md);
}
.image-studio-zoom-btn {
min-width: 30px; height: 28px; padding: 0 8px; border: 0; border-radius: var(--radius-xs); cursor: pointer;
background: transparent; color: var(--text); font-size: 13px; font-weight: 700;
}
.image-studio-zoom-btn:hover { background: var(--surface-3); }
.image-studio-zoom-val { min-width: 46px; text-align: center; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.image-studio-save {
height: 42px; padding: 0 22px; border: 0; border-radius: var(--radius-md); cursor: pointer;
background: var(--brand-gradient); color: #fff; font-size: 14px; font-weight: 750; box-shadow: var(--brand-glow-strong);
}
.image-studio-save:disabled { opacity: .6; cursor: default; }
.image-studio .image-studio-aipanel select,
.image-studio .image-studio-aipanel textarea,
.image-studio .image-studio-aipanel input[type="range"] { width: 100%; box-sizing: border-box; }
.image-studio-ai-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 750; color: var(--text); margin-bottom: 12px; }
.image-studio-ai-title svg { width: 18px; height: 18px; color: #2f6db7; }
.image-studio-ai-hint { font-size: 12.5px; color: var(--muted); margin: 4px 0 0; }
.image-studio-field { display: block; margin-bottom: 12px; }
.image-studio-field > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.image-studio-field > span b { color: var(--text); font-weight: 700; }
.image-studio-aipanel select,
.image-studio-aipanel textarea { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); padding: 7px 9px; font-size: 12.5px; }
.image-studio-expand-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.image-studio-field-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.image-studio .image-studio-aipanel .image-studio-field-inline input { width: 64px; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); padding: 6px 8px; }
.image-studio-field-inline i { font-style: normal; color: var(--muted); }
.image-studio-check { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); margin-bottom: 12px; }
.image-studio-check input { width: auto; }
.image-studio-ai-run { width: 100%; height: 38px; margin-top: 4px; }
.image-studio-options { flex-wrap: wrap; justify-content: center; }
.image-studio-options .image-studio-field-inline { color: var(--muted); }
.image-studio .image-studio-options .image-studio-field-inline input { width: 56px; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); padding: 5px 7px; }
.image-studio-colorwrap {
position: relative; display: block; width: 34px; height: 34px; padding: 3px; flex: none;
box-sizing: border-box; border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
}
.image-studio-colorwrap .image-studio-color-chip { display: block; width: 100%; height: 100%; border-radius: 6px; }
.image-studio-colorwrap input.image-studio-color {
position: absolute; inset: 0; width: 100%; height: 100%;
margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer;
}
.image-studio .image-studio-options .image-studio-field-inline input[type="range"] { width: 110px; }
.image-studio-erase-layer { position: absolute; top: 0; left: 0; pointer-events: auto; cursor: crosshair; opacity: .5; }
.image-studio-draw-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: auto; }
.image-studio-draw-preview { position: absolute; top: 0; left: 0; pointer-events: none; }
.image-studio .image-studio-options .image-studio-field-inline input[type="text"] { width: 116px; }
.image-studio-angle-drag { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: auto; cursor: grab; }
.image-studio-angle-drag:active { cursor: grabbing; }
.image-studio-split-grid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.image-studio-split-line { position: absolute; background: rgba(47, 109, 183, .9); box-shadow: 0 0 0 calc(1px * var(--studio-inv, 1)) rgba(255, 255, 255, .55); }
.image-studio-split-line.v { top: 0; bottom: 0; width: calc(1.5px * var(--studio-inv, 1)); }
.image-studio-split-line.h { left: 0; right: 0; height: calc(1.5px * var(--studio-inv, 1)); }
.image-studio-expand-frame {
position: absolute; pointer-events: auto; cursor: move;
outline: calc(2px * var(--studio-inv, 1)) dashed rgba(79, 99, 221, .95);
box-shadow: 0 0 0 calc(1px * var(--studio-inv, 1)) rgba(255, 255, 255, .75), inset 0 0 0 calc(1px * var(--studio-inv, 1)) rgba(255, 255, 255, .55);
}
.image-studio-expand-band {
position: absolute; pointer-events: none;
background: repeating-linear-gradient(45deg, rgba(79, 99, 221, .2) 0 calc(12px * var(--studio-inv, 1)), rgba(79, 99, 221, .06) calc(12px * var(--studio-inv, 1)) calc(24px * var(--studio-inv, 1)));
}
.image-studio-expand-h { position: absolute; width: 13px; height: 13px; background: #4f63dd; border: 2px solid #fff; border-radius: 4px; box-shadow: 0 1px 5px rgba(15, 23, 42, .35); pointer-events: auto; transform: scale(var(--studio-inv, var(--exp-inv, 1))); transform-origin: center; }
.image-studio-expand-h.h-n { left: 50%; top: -6px; margin-left: -6px; cursor: ns-resize; }
.image-studio-expand-h.h-s { left: 50%; bottom: -6px; margin-left: -6px; cursor: ns-resize; }
.image-studio-expand-h.h-w { left: -6px; top: 50%; margin-top: -6px; cursor: ew-resize; }
.image-studio-expand-h.h-e { right: -6px; top: 50%; margin-top: -6px; cursor: ew-resize; }
.image-studio-expand-h.h-nw { left: -6px; top: -6px; cursor: nwse-resize; }
.image-studio-expand-h.h-ne { right: -6px; top: -6px; cursor: nesw-resize; }
.image-studio-expand-h.h-sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
.image-studio-expand-h.h-se { right: -6px; bottom: -6px; cursor: nwse-resize; }
.image-studio-ai-actions { display: flex; gap: 8px; margin-top: 6px; }
.image-studio-ai-actions .image-studio-opt-btn { height: 38px; }
.image-studio-ai-actions .image-studio-ai-run { flex: 1; width: auto; }
@media (max-width: 860px) {
.image-studio-rail { flex-direction: row; left: 50%; top: auto; bottom: 72px; transform: translateX(-50%); }
.image-studio-tool { width: 52px; }
.image-studio-aipanel { left: 12px; right: 12px; width: auto; top: 66px; max-height: 40dvh; }
.image-studio-options { max-width: calc(100vw - 24px); }
}
.image-studio-viewport { position: absolute; top: 0; left: 0; will-change: transform; }
.image-studio-overlay { position: absolute; top: 0; left: 0; pointer-events: none; }
.image-studio-chips { display: inline-flex; gap: 3px; padding: 3px; border-radius: var(--radius-md); background: var(--surface-3); }
.image-studio-chips-wrap { display: flex; flex-wrap: wrap; }
.image-studio-ai-divider { font-size: 11px; color: var(--muted); margin: 10px 0 4px; border-top: 1px solid var(--border); padding-top: 8px; }
.image-studio-3d { position: absolute; inset: 0; z-index: 6; border-radius: inherit; overflow: hidden; background: radial-gradient(120% 100% at 50% 42%, var(--surface) 0%, var(--surface-3) 72%, var(--bg) 100%); }
.image-studio-3d-canvas { display: block; width: 100%; height: 100%; touch-action: none; border-radius: inherit; cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%2026%2026%22%3E%3Cg%20fill%3D%22%231f2937%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13%202.5%2015.8%206.8%2010.2%206.8%20Z%22%2F%3E%3Cpath%20d%3D%22M13%2023.5%2010.2%2019.2%2015.8%2019.2%20Z%22%2F%3E%3Cpath%20d%3D%22M2.5%2013%206.8%2010.2%206.8%2015.8%20Z%22%2F%3E%3Cpath%20d%3D%22M23.5%2013%2019.2%2015.8%2019.2%2010.2%20Z%22%2F%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2213%22%20r%3D%222.4%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 13 13, grab; }
.image-studio-3d-canvas:active { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%2026%2026%22%3E%3Cg%20fill%3D%22%231f2937%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2213%22%20r%3D%225.2%22%2F%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2213%22%20r%3D%221.8%22%20fill%3D%22%23ffffff%22%20stroke%3D%22none%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 13 13, grabbing; }
.image-studio-3d-hint { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
.image-studio-shot { font-size: 14px; font-weight: 750; color: var(--text); }
.image-studio-chip { height: 28px; padding: 0 11px; border: 0; border-radius: var(--radius-sm); cursor: pointer; background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 650; }
.image-studio-chip:hover { color: var(--text); }
.image-studio-chip.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-soft); }
.image-studio-ratio-input { flex: none; width: 74px; height: 28px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 12px; font-weight: 600; text-align: center; }
.image-studio-ratio-input:focus { outline: none; border-color: var(--accent); }
.image-studio-ratio-input::placeholder { color: var(--muted-2); font-weight: 500; }
.image-studio-opt-sep { width: 1px; height: 22px; background: var(--border); }
.image-studio-opt-btn { height: 30px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; background: var(--surface); color: var(--text); font-size: 12.5px; font-weight: 650; }
.image-studio-opt-btn:hover { background: var(--surface-3); }
.image-studio-opt-btn.primary { border: 0; background: var(--brand-gradient); color: #fff; box-shadow: var(--brand-glow); }
.image-studio-dim { position: absolute; background: rgba(15, 23, 42, .46); pointer-events: none; }
.image-studio-crop {
position: absolute;
pointer-events: auto;
cursor: move;
outline: calc(2px * var(--studio-inv, 1)) solid rgba(47, 109, 183, .95);
outline-offset: calc(-1px * var(--studio-inv, 1));
box-shadow: 0 0 0 calc(1px * var(--studio-inv, 1)) rgba(255, 255, 255, .85), inset 0 0 0 calc(1px * var(--studio-inv, 1)) rgba(255, 255, 255, .85);
}
.image-studio-crop-thirds {
position: absolute; inset: 0; pointer-events: none; opacity: .6;
background-image: linear-gradient(rgba(47, 109, 183, .45) calc(1px * var(--studio-inv, 1)), transparent calc(1px * var(--studio-inv, 1))), linear-gradient(90deg, rgba(47, 109, 183, .45) calc(1px * var(--studio-inv, 1)), transparent calc(1px * var(--studio-inv, 1)));
background-size: 33.33% 33.33%;
}
.image-studio-crop-h { position: absolute; width: 12px; height: 12px; background: #fff; border: 1.5px solid #2f6db7; border-radius: 3px; pointer-events: auto; transform: scale(var(--studio-inv, var(--crop-inv, 1))); transform-origin: center; }
.image-studio-crop-h.h-nw { left: -6px; top: -6px; cursor: nwse-resize; }
.image-studio-crop-h.h-n { left: 50%; top: -6px; margin-left: -6px; cursor: ns-resize; }
.image-studio-crop-h.h-ne { right: -6px; top: -6px; cursor: nesw-resize; }
.image-studio-crop-h.h-e { right: -6px; top: 50%; margin-top: -6px; cursor: ew-resize; }
.image-studio-crop-h.h-se { right: -6px; bottom: -6px; cursor: nwse-resize; }
.image-studio-crop-h.h-s { left: 50%; bottom: -6px; margin-left: -6px; cursor: ns-resize; }
.image-studio-crop-h.h-sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
.image-studio-crop-h.h-w { left: -6px; top: 50%; margin-top: -6px; cursor: ew-resize; }
.image-studio-crop-rot {
position: absolute;
left: 50%;
bottom: calc(-32px * var(--studio-inv, var(--crop-inv, 1)));
width: 18px;
height: 18px;
margin-left: -9px;
display: grid;
place-items: center;
background: #fff;
border: 1.5px solid #2f6db7;
border-radius: 50%;
color: #2f6db7;
font-size: 11px;
line-height: 1;
cursor: grab;
pointer-events: auto;
transform: scale(var(--studio-inv, var(--crop-inv, 1)));
transform-origin: center;
user-select: none;
-webkit-user-select: none;
}
.image-studio-crop-rot:active { cursor: grabbing; }
.image-studio-crop-rot::after {
content: "";
position: absolute;
left: 50%;
bottom: 100%;
width: 1.5px;
height: 12px;
background: rgba(255, 255, 255, .92);
}
.image-studio-crop-rot-badge {
position: absolute;
left: 50%;
bottom: calc(-60px * var(--studio-inv, var(--crop-inv, 1)));
transform: translateX(-50%) scale(var(--studio-inv, var(--crop-inv, 1)));
transform-origin: center;
padding: 2px 8px;
border-radius: 8px;
background: rgba(15, 23, 42, .78);
color: #fff;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
pointer-events: none;
}
.image-studio-crop-rot-badge[hidden] { display: none; }
.canvas-edit-layer { position: absolute; inset: 0; z-index: 60; pointer-events: none; }
.canvas-edit-dim { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.canvas-edit-dim path { fill: rgba(241, 244, 249, .66); }
body.theme-dark .canvas-edit-dim path { fill: rgba(5, 8, 15, .68); }
.canvas-edit-veil { position: absolute; inset: 0; pointer-events: auto; cursor: grab; background: transparent; }
.canvas-edit-veil:active { cursor: grabbing; }
.canvas-edit-family-hits { position: absolute; inset: 0; pointer-events: none; }
.canvas-edit-family-hit {
position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; border-radius: 12px;
background-position: center; background-repeat: no-repeat; background-size: cover;
box-shadow: 0 7px 20px rgba(15, 23, 42, .16);
}
.canvas-edit-family-hit:hover { box-shadow: inset 0 0 0 2px rgba(79, 99, 221, .7); }
.canvas-edit-surface .image-studio-dim { background: rgba(15, 23, 42, .38); }
body.theme-dark .canvas-edit-surface .image-studio-dim { background: rgba(9, 12, 19, .48); }
.canvas-edit-caption {
position: absolute;
left: 0;
top: 0;
z-index: 6;
display: flex;
align-items: center;
gap: 6px;
max-width: 420px;
padding: 0 2px;
color: var(--card-accent, #2f6db7);
font-size: 13px;
font-weight: 900;
line-height: 1.3;
white-space: nowrap;
pointer-events: auto;
cursor: grab;
user-select: none;
-webkit-user-select: none;
touch-action: none;
}
.canvas-edit-caption:active { cursor: grabbing; }
.canvas-edit-caption strong { overflow: hidden; text-overflow: ellipsis; font-weight: 900; }
.canvas-edit-caption .infinite-card-badge {
flex: 0 0 auto;
width: 18px;
height: 18px;
border: 0;
border-radius: 0;
background: transparent;
color: var(--card-accent, #2f6db7);
font-size: 10px;
}
.canvas-edit-caption[hidden] { display: none; }
.canvas-edit-surface {
position: absolute; left: 0; top: 0; pointer-events: auto; will-change: transform; transform-origin: 0 0;
touch-action: none; 
border-radius: var(--canvas-edit-surface-radius, 8px);
backface-visibility: hidden;
contain: layout style;
}
.canvas-edit-surface.has-media-content {
box-shadow: 0 8px 26px rgba(15, 23, 42, .18);
border-radius: var(--canvas-edit-surface-radius, 8px);
background:
conic-gradient(rgba(148, 163, 184, .3) 0 25%, transparent 0 50%, rgba(148, 163, 184, .3) 0 75%, transparent 0) 0 0 / 20px 20px,
#fdfdfe;
}
body.theme-dark .canvas-edit-surface.has-media-content {
box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
background:
conic-gradient(rgba(148, 163, 184, .13) 0 25%, transparent 0 50%, rgba(148, 163, 184, .13) 0 75%, transparent 0) 0 0 / 20px 20px,
#10141d;
}
.canvas-edit-surface.is-crop-rotating,
body.theme-dark .canvas-edit-surface.is-crop-rotating {
background: none;
box-shadow: none;
}
.canvas-edit-surface canvas.is-rot-preview { box-shadow: 0 8px 26px rgba(15, 23, 42, .22); }
body.theme-dark .canvas-edit-surface canvas.is-rot-preview { box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.canvas-edit-surface .image-studio-viewport { overflow: visible; }
.canvas-edit-surface .image-studio-canvas { box-shadow: none; }
.canvas-edit-surface .image-studio-overlay { overflow: visible; }
.canvas-edit-entry-preview { display: block; width: 100%; height: 100%; object-fit: fill; user-select: none; pointer-events: none; }
.canvas-edit-bitmap-preview { position: absolute; inset: 0; z-index: 0; }
.canvas-edit-surface .image-studio-canvas { z-index: 1; }
.canvas-edit-surface .image-studio-overlay { z-index: 2; }
.canvas-edit-loading {
position: absolute; inset: 0; display: grid; place-items: center; z-index: 5;
background: rgba(10, 14, 24, .55); color: #e6ebf5; font-size: 13px; font-weight: 650; border-radius: 4px;
}
.canvas-edit-loading[hidden] { display: none; }
.canvas-edit-loading.is-overlay {
background: transparent;
place-items: end center;
padding-bottom: 18px;
pointer-events: none;
}
.canvas-edit-loading.is-hd-loading.is-overlay {
inset: auto 0 -38px 0;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 0;
}
.canvas-edit-hd-pill {
display: flex; align-items: center; gap: 9px; padding: 7px 14px; border-radius: 999px;
background: rgba(15, 23, 42, .78); color: #fff; font-size: 12px; line-height: 1; white-space: nowrap;
box-shadow: 0 4px 14px rgba(15, 23, 42, .28);
}
.canvas-edit-hd-bar {
position: relative; width: 72px; height: 3px; border-radius: 2px;
background: rgba(255, 255, 255, .28); overflow: hidden; flex: 0 0 auto;
}
.canvas-edit-hd-bar::after {
content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 40%; border-radius: 2px;
background: #fff; animation: canvasEditHdSlide 1.1s ease-in-out infinite;
}
.canvas-edit-loading.is-progress .canvas-edit-hd-bar::after {
animation: none; width: var(--hd-progress, 0%); transition: width .18s ease;
}
@keyframes canvasEditHdSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
.canvas-edit-layer.canvas-edit-exiting :is(.canvas-edit-dock, .canvas-edit-side, .canvas-edit-caption, .canvas-edit-family-hits) {
visibility: hidden !important; pointer-events: none !important;
}
.canvas-edit-layer.canvas-edit-exiting :is(.canvas-edit-surface, .canvas-edit-veil) { pointer-events: none !important; }
#canvasEditLayer.space-pan, #canvasEditLayer.space-pan * { cursor: grab !important; }
#canvasEditLayer.space-pan:active, #canvasEditLayer.space-pan *:active { cursor: grabbing !important; }
.canvas-edit-dock {
position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 9px;
max-width: min(96%, 1120px); pointer-events: none;
animation: canvasEditDockIn .2s ease;
}
@keyframes canvasEditDockIn { from { opacity: 0; transform: translateX(-50%) translateY(10px); } }
.canvas-edit-dock > * { pointer-events: auto; }
.canvas-edit-options,
.canvas-edit-toolrow {
background: var(--surface);
border: 1px solid var(--border);
box-shadow: 0 20px 48px rgba(8, 12, 22, .2), 0 2px 10px rgba(8, 12, 22, .08);
}
.canvas-edit-options {
display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 7px 16px;
border-radius: 16px; color: var(--text); max-width: 100%; flex-wrap: wrap; justify-content: center;
}
.canvas-edit-options:empty { display: none; }
.canvas-edit-versions {
display: flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 14px;
background: var(--surface); border: 1px solid var(--border);
box-shadow: 0 20px 48px rgba(8, 12, 22, .2), 0 2px 10px rgba(8, 12, 22, .08);
max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.canvas-edit-versions::-webkit-scrollbar { display: none; }
.canvas-edit-versions[hidden] { display: none; }
.canvas-edit-version-chip {
flex: none; display: flex; align-items: center; gap: 6px; height: 36px; padding: 3px 9px 3px 3px;
border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text);
font-size: 12px; font-weight: 600; cursor: pointer;
transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.canvas-edit-version-chip:hover { background: var(--surface-3); transform: translateY(-1px); }
.canvas-edit-version-chip.active { border-color: var(--accent); color: var(--accent); cursor: default; transform: none; }
.canvas-edit-version-chip img {
width: 30px; height: 30px; object-fit: cover; border-radius: 7px; display: block;
background: var(--surface-3);
}
.canvas-edit-version-arrow { flex: none; color: var(--muted); font-size: 12px; user-select: none; }
.canvas-edit-options input[type="range"] { width: 150px; flex: none; }
.canvas-edit-options .image-studio-field-inline input[type="text"] { width: 150px; flex: none; height: 30px; }
.canvas-edit-options .image-studio-field-inline { flex: none; white-space: nowrap; }
.canvas-edit-toolrow {
display: flex; align-items: center; gap: 4px; padding: 8px 12px;
border-radius: 18px; max-width: 100%;
flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
.canvas-edit-toolrow::-webkit-scrollbar { display: none; }
.canvas-edit-tools { display: flex; align-items: center; gap: 3px; flex: none; }
.canvas-edit-dock .image-studio-tool { width: 50px; padding: 6px 2px; border-radius: 12px; flex: none; transition: background .15s ease, color .15s ease, transform .15s ease; }
.canvas-edit-dock .image-studio-tool:hover { transform: translateY(-1px); }
.canvas-edit-dock .image-studio-tool-ico svg { width: 18px; height: 18px; }
.canvas-edit-dock .image-studio-tool-label { font-size: 10.5px; }
.canvas-edit-sep {
flex: none; width: 1px; height: 26px; margin: 0 6px;
background: linear-gradient(180deg, transparent, var(--border) 28%, var(--border) 72%, transparent);
}
.canvas-edit-actbtn {
flex: none; height: 33px; padding: 0 13px; border: 1px solid var(--border); border-radius: 11px;
background: var(--surface); color: var(--text); font-size: 12.5px; font-weight: 700; cursor: pointer;
transition: background .14s ease, border-color .14s ease, color .14s ease, transform .14s ease, box-shadow .14s ease;
white-space: nowrap;
}
.canvas-edit-actbtn:hover:not(:disabled) { background: var(--surface-3); transform: translateY(-1px); }
.canvas-edit-actbtn.primary { border: 0; background: var(--brand-gradient); color: #fff; box-shadow: var(--brand-glow); }
.canvas-edit-actbtn.primary:hover:not(:disabled) { box-shadow: var(--brand-glow), 0 6px 18px rgba(79, 99, 221, .35); }
.canvas-edit-actbtn:disabled { opacity: .55; cursor: default; }
.canvas-edit-exit:hover:not(:disabled) { background: var(--danger-soft); color: #d92d20; }
.canvas-edit-side {
position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
width: 296px; display: flex; pointer-events: none;
}
.canvas-edit-side .image-studio-aipanel {
position: static; width: 100%; max-height: min(66dvh, 560px); overflow: auto; pointer-events: auto;
padding: 12px 13px; border-radius: 14px;
background: var(--surface);
border: 1px solid var(--border);
box-shadow: 0 18px 44px rgba(8, 12, 22, .18), 0 2px 8px rgba(8, 12, 22, .08);
overscroll-behavior: contain;
}
.canvas-edit-surface .canvas-video-frame {
position: absolute; inset: 0; display: block; max-width: none; max-height: none; border-radius: 4px;
}
.canvas-edit-surface .canvas-video-frame video {
display: block; width: 100%; height: 100%; max-width: none; max-height: none;
object-fit: contain; background: transparent;
}
.canvas-video-transport {
display: grid; grid-template-columns: auto minmax(220px, 1fr) auto; align-items: center;
gap: 8px 14px; width: min(92vw, 680px); flex-wrap: nowrap;
}
.canvas-video-transport .canvas-video-timeline { width: 100%; padding: 2px 6px 0; }
.canvas-video-playhead {
position: absolute; top: 50%; z-index: 2;
width: 4px; min-width: 4px; height: 30px; min-height: 30px; padding: 0; border: 0; border-radius: 999px;
transform: translate(-50%, -50%);
background: #0f172a; box-shadow: 0 0 0 1.5px #fff, 0 2px 8px rgba(15, 23, 42, .35);
cursor: ew-resize;
}
body.theme-dark .canvas-video-playhead { background: #e6ebf5; box-shadow: 0 0 0 1.5px rgba(18, 21, 29, .9), 0 2px 8px rgba(0, 0, 0, .4); }
.canvas-video-params { row-gap: 8px; }
.canvas-video-param {
display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; color: var(--muted); white-space: nowrap;
}
.canvas-video-param select, .canvas-video-param input[type="number"] { width: auto; min-width: 0; height: 30px; padding: 0 8px; font-size: 12.5px; }
.canvas-video-param input[type="number"] { width: 68px; }
.canvas-video-param input[type="checkbox"] { width: auto; margin: 0 2px 0 0; }
.canvas-video-speed-hint { margin: 0; padding: 0 6px; font-size: 12px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; box-shadow: var(--shadow-popover); }
.canvas-video-speed-hint[hidden] { display: none; }
#canvasEditLayer.clip-previewing .canvas-video-crop-overlay { opacity: .42; }
#canvasEditLayer.clip-previewing .canvas-video-crop-box { pointer-events: none; }
#canvasEditLayer.video-playing .canvas-video-crop-box,
#canvasEditLayer.clip-previewing .canvas-video-crop-box { background: rgba(47, 109, 183, .04); box-shadow: 0 0 0 1px rgba(15, 23, 42, .18); }
#canvasEditLayer.video-playing .canvas-video-crop-box span,
#canvasEditLayer.clip-previewing .canvas-video-crop-box span { opacity: .72; }
#globalGenFab.canvas-edit-hidden { display: none !important; }
body:not(.auth-required) #appLayout .infinite-canvas-stage.canvas-editing .canvas-corner-hud {
opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .16s ease, visibility .16s ease;
}
.image-studio-opt-scroll {
display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.image-studio-opt-scroll::-webkit-scrollbar { display: none; }
.image-studio-opt-scroll .image-studio-chips { flex: none; flex-wrap: nowrap; }
.canvas-edit-actions { display: flex; align-items: center; gap: 6px; flex: none; }
@media (max-width: 820px) {
.canvas-edit-dock { left: 8px; right: 8px; bottom: 10px; transform: none; max-width: none; }
.canvas-edit-options { padding: 6px 10px; gap: 8px; flex-wrap: nowrap; justify-content: flex-start; }
.canvas-edit-toolrow { flex-wrap: nowrap; max-width: 100%; }
.canvas-edit-toolrow .canvas-edit-tools { flex: 1; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: none; }
.canvas-edit-toolrow .canvas-edit-tools::-webkit-scrollbar { display: none; }
.canvas-edit-dock .image-studio-tool { width: 48px; flex: none; }
.canvas-edit-actbtn { flex: none; }
.canvas-video-transport { width: 100%; }
.canvas-edit-side { left: 8px; right: auto; width: min(320px, calc(100vw - 16px)); top: auto; bottom: 172px; transform: none; }
.canvas-edit-side .image-studio-aipanel { max-height: 42dvh; }
.canvas-edit-actions [data-studio-close] { display: none; }
.canvas-edit-side .image-studio-prompt-field textarea { min-height: 44px; max-height: 72px; }
.canvas-video-params { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; justify-content: flex-start; }
.canvas-video-params::-webkit-scrollbar { display: none; }
.canvas-video-params .canvas-edit-actbtn, .canvas-video-params .image-studio-iconbtn { flex: none; }
}
.infinite-card.media-card {
--media-transport-edge-inset: 6px;
}
.infinite-card-video-controls {
--vc-bg: rgba(255, 255, 255, 0.78);
--vc-border: rgba(15, 23, 42, 0.08);
--vc-text: #475467;
--vc-accent: #2f6db7;
--vc-accent-strong: #255a9c;
--vc-button-hover: rgba(47, 109, 183, 0.11);
--vc-track: rgba(100, 116, 139, 0.2);
--vc-buffered: rgba(71, 85, 105, 0.38);
--vc-thumb-ring: #ffffff;
--vc-shadow: 0 2px 7px rgba(15, 23, 42, 0.09);
--vc-edge-inset: var(--media-transport-edge-inset, 6px);
position: absolute;
inset-inline: var(--vc-edge-inset);
bottom: 6px;
z-index: 4;
min-width: 0;
min-height: 28px;
display: grid;
grid-template-columns: 24px minmax(42px, 1fr) auto;
align-items: center;
gap: 5px;
padding: 1px 5px;
border: 1px solid var(--vc-border);
border-radius: 7px;
background: var(--vc-bg);
color: var(--vc-text);
box-shadow: var(--vc-shadow);
}
body.theme-dark .infinite-card-video-controls {
--vc-bg: rgba(12, 15, 22, 0.8);
--vc-border: rgba(255, 255, 255, 0.1);
--vc-text: #b4c1d2;
--vc-accent: #78b3e8;
--vc-accent-strong: #9cc8ee;
--vc-button-hover: rgba(120, 179, 232, 0.14);
--vc-track: rgba(180, 193, 210, 0.2);
--vc-buffered: rgba(180, 193, 210, 0.4);
--vc-thumb-ring: #121821;
--vc-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}
.infinite-card-video-controls .infinite-card-video-toggle {
width: 24px;
min-width: 24px;
max-width: 24px;
height: 24px;
min-height: 24px;
max-height: 24px;
padding: 0;
border: 0;
border-radius: 50%;
display: inline-grid;
place-items: center;
background: transparent;
color: var(--vc-accent);
cursor: pointer;
box-shadow: none;
transition: color 120ms ease, background-color 120ms ease;
}
.infinite-card-video-controls .infinite-card-video-toggle:hover {
background: var(--vc-button-hover);
color: var(--vc-accent-strong);
}
.infinite-card-video-controls .infinite-card-video-toggle:focus-visible {
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--vc-accent) 26%, transparent);
}
.infinite-card-video-toggle .ui-icon {
display: inline-grid;
place-items: center;
pointer-events: none;
}
.infinite-card-video-toggle .ui-icon svg {
width: 12px;
height: 12px;
min-width: 12px;
min-height: 12px;
}
.infinite-card-video-controls input[type="range"] {
--video-progress: 0%;
--video-buffered: 0%;
width: 100%;
min-width: 0;
min-height: 0 !important;
max-height: 20px !important;
height: 20px;
margin: 0;
padding: 0 !important;
border: 0 !important;
appearance: none;
background: transparent !important;
box-shadow: none !important;
cursor: pointer;
}
.infinite-card-video-controls input[type="range"]::-webkit-slider-runnable-track {
height: 3px;
border-radius: 999px;
background: linear-gradient(to right, var(--vc-accent) 0 var(--video-progress), var(--vc-buffered) var(--video-progress) var(--video-buffered), var(--vc-track) var(--video-buffered) 100%);
}
.infinite-card-video-controls input[type="range"]::-webkit-slider-thumb {
width: 10px;
height: 10px;
margin-top: -3.5px;
appearance: none;
border: 1.5px solid var(--vc-thumb-ring);
border-radius: 50%;
background: var(--vc-accent);
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22);
}
.infinite-card-video-controls input[type="range"]::-moz-range-track { height: 3px; border-radius: 999px; background: var(--vc-track); }
.infinite-card-video-controls input[type="range"]::-moz-range-progress { height: 3px; border-radius: 999px; background: var(--vc-accent); }
.infinite-card-video-controls input[type="range"]::-moz-range-thumb { width: 8px; height: 8px; border: 1.5px solid var(--vc-thumb-ring); border-radius: 50%; background: var(--vc-accent); }
.infinite-card-video-controls input[type="range"]:focus-visible { outline: 2px solid var(--vc-accent); outline-offset: 1px; border-radius: 999px; }
.infinite-card-video-controls input[type="range"]:disabled { opacity: 0.45; cursor: default; }
.infinite-card-video-controls [data-canvas-video-timecode] {
color: currentColor;
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
font-size: 9px;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
text-align: right;
white-space: nowrap;
}
.infinite-card.media-card [data-canvas-media-drag] { container-type: inline-size; }
@container (max-width: 200px) {
.infinite-card-video-controls {
grid-template-columns: 24px minmax(42px, 1fr);
}
.infinite-card-video-controls [data-canvas-video-timecode] { display: none; }
}
.poser-studio-mask { padding: 0; }
.poser-studio-panel {
--poser-accent: #7c3aed;
width: 100vw;
height: 100dvh;
max-width: none;
max-height: none;
padding: 0;
border: 0;
border-radius: 0;
overflow: hidden;
overscroll-behavior: none; 
}
.poser-studio { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; background: var(--surface, #fff); overflow: hidden; color: var(--text); }
.poser-studio-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 5px 16px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, #faf9ff, #ffffff); }
.poser-studio-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.poser-studio-badge { display: inline-grid; place-items: center; width: 32px; height: 26px; border-radius: 8px; background: var(--brand-gradient, linear-gradient(135deg, #7c3aed, #4f63dd)); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .5px; box-shadow: 0 3px 9px rgba(124, 58, 237, .26); }
.poser-studio-brandtext { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.poser-studio-brandtext strong { font-size: 14px; font-weight: 850; color: #101828; }
.poser-studio-brandtext span { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.poser-studio-modes { display: inline-flex; gap: 3px; padding: 3px; border-radius: 12px; background: var(--surface-3, #f1f5f9); border: 1px solid var(--border); }
.poser-studio-modes .poser-mode { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; border-radius: 8px; padding: 4px 12px; color: #475569; font-weight: 750; font-size: 12.5px; cursor: pointer; transition: background .14s ease, color .14s ease; }
.poser-mode-ico { display: inline-flex; }
.poser-mode-ico svg { width: 17px; height: 17px; display: block; }
.poser-studio-modes .poser-mode:hover { color: var(--poser-accent); background: rgba(124, 58, 237, .08); }
.poser-studio-modes .poser-mode.active { background: var(--poser-accent); color: #fff; box-shadow: 0 3px 10px rgba(124, 58, 237, .38); }
.poser-mode-key { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 4px; background: rgba(15,23,42,.1); color: inherit; font-size: 10px; font-weight: 800; line-height: 1; opacity: .7; }
.poser-studio-modes .poser-mode.active .poser-mode-key { background: rgba(255,255,255,.25); opacity: .95; }
.poser-studio-bar-right { display: flex; align-items: center; gap: 7px; }
.poser-reverse-btn { display: inline-flex; align-items: center; gap: 6px; }
.poser-reverse-icon { display: inline-flex; }
.poser-reverse-icon svg { width: 16px; height: 16px; display: block; }
.poser-bar-sep { width: 1px; height: 22px; background: var(--border); margin: 0 2px; }
.poser-iconbtn { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: #475569; cursor: pointer; transition: border-color .14s ease, color .14s ease, background .14s ease; }
.poser-iconbtn svg { width: 17px; height: 17px; }
.poser-iconbtn:hover { border-color: var(--poser-accent); color: var(--poser-accent); background: #f7f4fe; }
.poser-iconbtn-close:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-soft, #fff3f1); }
.poser-ghost-btn { border: 1px solid var(--border); border-radius: 8px; background: #fff; color: #475569; font-size: 12.5px; font-weight: 700; padding: 5px 11px; cursor: pointer; transition: border-color .14s ease, color .14s ease; }
.poser-ghost-btn:hover { border-color: var(--poser-accent); color: var(--poser-accent); }
.poser-studio-main { display: grid; grid-template-columns: 268px minmax(0, 1fr) 330px; min-height: 0; }
.poser-studio-left, .poser-studio-right { display: flex; flex-direction: column; gap: 10px; padding: 16px; overflow: auto; background: var(--surface-2, #f8fafc); }
.poser-studio-left { border-right: 1px solid var(--border); }
.poser-studio-right { border-left: 1px solid var(--border); }
.poser-studio-left .poser-actor-list { max-height: none; flex: 1 1 auto; }
.poser-studio-left .poser-shot-list { max-height: 184px; overflow: auto; flex: 0 0 auto; }
#poserStudioModal :where(.poser-actor-dup, .poser-actor-del, .poser-shot-del) { width: 24px !important; height: 24px !important; min-height: 0 !important; padding: 0 !important; }
.poser-studio-tabs { display: none; } 
.poser-studio-sec { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; font-weight: 750; letter-spacing: .5px; color: #66738a; }
.poser-studio-sec > span { display: inline-flex; align-items: center; gap: 7px; }
.poser-studio-sec > span::before { content: ""; width: 3px; height: 12px; border-radius: 2px; background: var(--poser-accent, #7c3aed); opacity: .8; }
.poser-studio-sec:not(:first-child) { margin-top: 9px; padding-top: 14px; border-top: 1px solid var(--border); }
.poser-studio-right .poser-inspector,
.poser-studio-right .poser-scene {
padding: 12px;
border: 1px solid var(--border);
border-radius: 14px;
background: var(--surface, #fff);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.poser-studio-right .poser-inspector:empty { display: none; padding: 0; border: 0; }
.poser-studio-right select,
.poser-studio-right input[type="number"] {
min-height: 32px;
border-radius: 9px;
box-sizing: border-box;
}
body.theme-dark .poser-studio-right .poser-inspector,
body.theme-dark .poser-studio-right .poser-scene {
background: rgba(18, 21, 28, 0.55);
border-color: rgba(83, 90, 104, 0.5);
box-shadow: none;
}
.poser-studio-count { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--accent-2-soft, #ecebfd); color: var(--accent-2-strong, #574bd4); font-size: 11px; font-weight: 800; }
.poser-add-group { display: grid; gap: 7px; }
.poser-add-shapes { align-items: center; }
.poser-tool-accent { border-color: var(--poser-accent); color: var(--poser-accent); background: rgba(124, 58, 237, .07); font-weight: 750; }
.poser-tool-accent:hover:not(:disabled) { background: var(--poser-accent); color: #fff; border-color: var(--poser-accent); }
.poser-field-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.poser-hdr-row { display: flex; gap: 6px; }
.poser-hdr-pick { flex: 1 1 auto; }
.poser-studio-stage { position: relative; min-height: 0; overflow: hidden; background: radial-gradient(120% 100% at 50% 0%, #f2f5fb 0%, #e7ecf4 100%); touch-action: none; overscroll-behavior: none; }
.poser-studio-stage .poser-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.poser-studio-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 90px rgba(15, 23, 42, .12); }
.poser-studio-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; padding: 5px 16px; border-top: 1px solid var(--border); background: #fff; }
.poser-studio-foot-left { display: flex; align-items: center; gap: 14px; min-width: 0; justify-self: start; }
.poser-frame { justify-self: center; }
.poser-studio-foot-actions { justify-self: end; }
.poser-studio-foot-hint { font-size: 12px; color: var(--muted); }
.poser-capture-thumb { display: flex; align-items: center; gap: 8px; padding: 3px 9px 3px 3px; border: 1px solid var(--ok-soft, #cdeee2); border-radius: 10px; background: var(--ok-soft, #e9f6f1); }
.poser-capture-thumb img { width: 34px; height: 34px; object-fit: cover; border-radius: 8px; border: 1px solid rgba(0,0,0,.08); display: block; }
.poser-capture-thumb span { font-size: 12px; font-weight: 750; color: var(--ok, #13795b); white-space: nowrap; }
.poser-frame { display: inline-flex; align-items: center; gap: 8px; }
.poser-frame-label { font-size: 12px; font-weight: 750; color: #475569; }
.poser-frame-btns { display: inline-flex; gap: 4px; }
.poser-frame-btn { border: 1px solid var(--border); background: #fff; color: #475569; font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 8px; cursor: pointer; transition: border-color .12s, color .12s, background .12s; }
.poser-frame-btn:hover { border-color: var(--poser-accent, #7c3aed); color: var(--poser-accent, #7c3aed); }
.poser-frame-btn.active { background: var(--poser-accent, #7c3aed); color: #fff; border-color: var(--poser-accent, #7c3aed); }
.poser-frame-mask { position: absolute; pointer-events: none; box-shadow: 0 0 0 9999px rgba(15, 23, 42, .42); border: 1px solid rgba(255, 255, 255, .85); border-radius: 1px; z-index: 3; }
.poser-studio-foot-actions { display: flex; gap: 10px; }
.poser-studio-foot-actions .secondary, .poser-studio-foot-actions .primary { padding: 6px 18px; border-radius: 10px; font-weight: 750; font-size: 13px; }
.poser-studio-foot-actions .primary { background: var(--brand-gradient, linear-gradient(135deg, #7c3aed, #4f63dd)); border: 0; color: #fff; box-shadow: 0 6px 16px rgba(124, 58, 237, .3); }
body.theme-dark .poser-studio-bar { background: linear-gradient(180deg, #1b1f29, #12151d); }
body.theme-dark .poser-studio-foot { background: #12151d; }
body.theme-dark .poser-studio-stage { background: radial-gradient(120% 100% at 50% 0%, #1b1f29 0%, #0e1016 100%); }
body.theme-dark .poser-runtime-overlay { background: rgba(8, 12, 20, .76); }
body.theme-dark .poser-runtime-card { background: rgba(18, 24, 35, .95); border-color: rgba(100, 116, 139, .42); color: #e6edf7; box-shadow: 0 18px 55px rgba(0, 0, 0, .44); }
body.theme-dark .poser-runtime-head span, body.theme-dark .poser-runtime-meta { color: #9db0c8; }
body.theme-dark .poser-runtime-error { color: #ffb4ab; }
body.theme-dark .poser-studio-brandtext strong { color: #eaf2fb; }
body.theme-dark .poser-studio-sec, body.theme-dark .poser-insp-seclabel { color: #c4d2e2; }
body.theme-dark .poser-stage-hint, body.theme-dark .poser-shot-empty, body.theme-dark .poser-insp-hint, body.theme-dark .poser-studio-foot-hint, body.theme-dark .poser-add-label { color: #7e93ad; }
body.theme-dark .poser-insp-flabel, body.theme-dark .poser-insp-tab, body.theme-dark .poser-insp-axis-label, body.theme-dark .poser-frame-label { color: #9db0c8; }
body.theme-dark .poser-insp-tab.active { color: #fff; }
body.theme-dark .poser-insp-tabs { border-bottom-color: rgba(83,90,104,.5); }
body.theme-dark :is(.poser-insp-cell, .poser-insp-name, .poser-insp-color, .poser-insp-uni-val, .poser-insp-colorhex, .poser-num, .poser-build-select) { background: rgba(15,23,42,.6); border-color: rgba(83,90,104,.5); color: #dbe7f5; }
body.theme-dark .poser-insp-cell input { color: #dbe7f5; }
body.theme-dark .poser-insp-cell i { color: #7e93ad; }
body.theme-dark :is(.poser-tool, .poser-ghost-btn, .poser-iconbtn, .poser-pose-btn, .poser-frame-btn, .poser-shot) { background: rgba(32,36,46,.55); border-color: rgba(83,90,104,.5); color: #c4d2e2; }
body.theme-dark .poser-pose-btn span { color: #9db0c8; }
body.theme-dark .poser-pose-btn:first-child { background: rgba(124,58,237,.16); border-color: rgba(124,58,237,.45); }
body.theme-dark .poser-pose-new { background: rgba(124,58,237,.16); border-color: rgba(124,58,237,.5); color: #c4b5fd; }
body.theme-dark .poser-pose-custom { background: rgba(240,160,75,.14); border-color: rgba(240,160,75,.4); }
body.theme-dark .poser-studio-modes { background: rgba(15,23,42,.5); border-color: rgba(83,90,104,.5); }
body.theme-dark :is(.poser-tool, .poser-ghost-btn, .poser-iconbtn, .poser-frame-btn):hover { color: var(--poser-accent); border-color: var(--poser-accent); }
body.theme-dark .poser-actor { background: rgba(18,21,28,.7); border-color: rgba(83,90,104,.5); }
body.theme-dark .poser-actor.selected { background: rgba(124,58,237,.16); border-color: var(--poser-accent); box-shadow: inset 0 0 0 1px var(--poser-accent); }
body.theme-dark .poser-actor .poser-actor-name { color: #e7eef9; }
body.theme-dark .poser-actor .poser-actor-name:focus { background: rgba(15,23,42,.85); }
body.theme-dark .poser-frame-mask { border-color: rgba(255,255,255,.5); }
@media (max-width: 860px) {
.poser-studio-main { display: flex; flex-direction: column; overflow: auto; }
.poser-studio-stage { order: -1; min-height: 46vh; }
.poser-studio-left { border-right: 0; border-bottom: 1px solid var(--border); }
.poser-studio-right { border-left: 0; }
.poser-studio-bar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
.poser-studio-brandtext span { display: none; }
.poser-studio-modes { order: 3; width: 100%; justify-content: space-between; }
.poser-studio-modes .poser-mode { flex: 1 1 auto; justify-content: center; padding: 7px 8px; }
.poser-studio-foot { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 10px 12px; }
.poser-studio-foot-hint { display: none; }
.poser-studio-foot-actions { width: 100%; }
.poser-studio-foot-actions .secondary, .poser-studio-foot-actions .primary { flex: 1 1 auto; }
.poser-runtime-overlay { display: grid; padding: 12px; }
.poser-runtime-overlay[hidden] { display: none !important; }
.poser-runtime-card { width: min(360px, 96%); padding: 15px 16px; }
.poser-reverse-btn span:last-child { display: none; }
.poser-reverse-btn { width: 32px; height: 32px; padding: 0; justify-content: center; }
}
.infinite-card-summary {
display: grid;
gap: 7px;
min-height: 84px;
padding: 4px 2px;
}
.infinite-card-summary strong {
color: #142033;
font-size: 13px;
line-height: 1.3;
}
.infinite-card-summary span,
.infinite-card-summary small {
color: #506176;
font-size: 12px;
line-height: 1.45;
}
.infinite-card-summary span {
display: -webkit-box;
min-height: 34px;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.infinite-card-summary small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.infinite-card-summary.infinite-card-empty {
justify-items: center;
align-content: center;
gap: 11px;
padding: 14px 12px;
}
.infinite-card-empty .infinite-card-empty-icon {
display: grid;
place-items: center;
width: 54px;
height: 54px;
min-height: 0;
border-radius: 16px;
background: linear-gradient(150deg, color-mix(in srgb, var(--card-accent, var(--accent)) 22%, #fff) 0%, color-mix(in srgb, var(--card-accent, var(--accent)) 9%, #fff) 100%);
color: var(--card-accent, var(--accent));
box-shadow: 0 6px 16px color-mix(in srgb, var(--card-accent, var(--accent)) 20%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--card-accent, var(--accent)) 16%, transparent);
}
.infinite-card-empty .infinite-card-empty-icon svg {
width: 26px;
height: 26px;
}
.infinite-card-empty .infinite-card-empty-hint {
display: block;
min-height: 0;
-webkit-line-clamp: unset;
text-align: center;
color: #3f4a5c;
font-size: 12.5px;
font-weight: 600;
line-height: 1.45;
max-width: 94%;
}
.infinite-card-empty .infinite-card-empty-refs {
display: inline-flex;
align-items: center;
color: var(--card-accent, var(--accent));
font-size: 11px;
font-weight: 650;
padding: 3px 10px;
border-radius: 999px;
background: color-mix(in srgb, var(--card-accent, var(--accent)) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--card-accent, var(--accent)) 20%, transparent);
}
.infinite-card-inline-panel {
position: absolute;
z-index: 35;
display: grid;
gap: 8px;
padding: 10px;
max-height: min(420px, calc(100% - 22px));
overflow: auto;
overscroll-behavior: contain;
border: 1px solid rgba(203, 213, 225, 0.92);
border-top: 4px solid var(--card-accent, #2f6db7);
border-radius: 20px;
background: rgba(255, 255, 255, 0.97);
box-shadow: 0 22px 52px rgba(15, 23, 42, 0.15);
color: var(--text);
pointer-events: auto;
user-select: text;
transform-origin: 32px 0;
animation: infiniteCanvasPanelIn 150ms ease-out both;
will-change: opacity, transform;
}
.infinite-card-inline-panel.no-enter-anim {
animation: none;
}
.infinite-card-inline-panel::before {
content: "";
position: absolute;
top: -10px;
left: 28px;
width: 16px;
height: 16px;
border-left: 1px solid rgba(203, 213, 225, 0.92);
border-top: 1px solid rgba(203, 213, 225, 0.92);
background: rgba(255, 255, 255, 0.98);
transform: rotate(45deg);
}
.infinite-card-inline-panel.closing {
pointer-events: none;
animation: infiniteCanvasPanelOut 140ms ease-in both;
}
@keyframes infiniteCanvasPanelIn {
from {
opacity: 0;
transform: translateY(-8px) scale(0.985);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes infiniteCanvasPanelOut {
from {
opacity: 1;
transform: translateY(0) scale(1);
}
to {
opacity: 0;
transform: translateY(-6px) scale(0.985);
}
}
@media (prefers-reduced-motion: reduce) {
.infinite-card-inline-panel,
.infinite-card-inline-panel.closing {
animation: none;
}
}
.infinite-inline-panel-head {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.infinite-inline-panel-head strong {
color: #101828;
font-size: 14px;
line-height: 1.25;
}
.infinite-inline-panel-head span {
color: #667085;
font-size: 12px;
white-space: nowrap;
}
.infinite-inline-panel-body {
position: relative;
z-index: 1;
display: grid;
gap: 8px;
padding: 0;
}
.infinite-inline-panel-body textarea {
width: 100%;
min-height: 120px;
overflow-y: auto;
box-sizing: border-box;
}
.infinite-card-inline-panel:has(.infinite-card-run) {
max-height: min(390px, calc(100% - 22px));
}
.infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"refs"
"prompt"
"fields"
"actions"
"note";
align-items: stretch;
}
.infinite-inline-prompt-expand {
display: inline-flex;
align-items: center;
justify-content: center;
}
.infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > textarea {
grid-area: prompt;
min-height: 150px;
max-height: 178px;
border-radius: 14px;
padding: 11px 48px 11px 12px;
resize: none;
}
.infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .infinite-inline-prompt-expand {
grid-area: prompt;
z-index: 2;
align-self: end;
justify-self: end;
}
.infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .infinite-inline-references {
grid-area: refs;
min-height: 64px;
padding: 6px 8px;
}
.infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .infinite-card-note {
grid-area: note;
min-height: 0;
padding: 7px 10px;
border-radius: 12px;
background: #f7fafd;
color: #5f7287;
font-size: 12px;
}
.infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .infinite-card-fields {
grid-area: fields;
grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
align-self: stretch;
align-content: start;
}
.infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .infinite-card-actions {
grid-area: actions;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
justify-self: start;
}
.infinite-inline-panel-body .infinite-card-fields {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.infinite-inline-panel-body .infinite-card-field {
grid-template-columns: 62px minmax(0, 1fr);
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel .infinite-card-field:has([data-canvas-config-key="model"]),
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel .infinite-card-field:has([data-canvas-config-key="imageModel"]),
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel .infinite-card-field:has([data-canvas-config-key="videoModel"]),
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel .infinite-card-field:has([data-canvas-config-key="audioModel"]),
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel .infinite-card-field:has([data-canvas-config-key="musicModel"]),
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel .infinite-card-field:has([data-canvas-config-key="textModel"]),
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel .infinite-card-field:has([data-canvas-config-key="visionModel"]) {
flex: 0 1 var(--canvas-inline-field-model-w, 150px) !important;
width: var(--canvas-inline-field-model-w, 150px) !important;
max-width: var(--canvas-inline-field-model-w, 150px) !important;
}
.infinite-inline-panel-body .infinite-card-run {
justify-self: start;
width: auto;
min-width: 128px;
padding-inline: 18px;
}
.infinite-card-run {
width: 100%;
min-height: 34px;
}
.infinite-card-media {
display: grid;
gap: 8px;
cursor: default;
user-select: none;
-webkit-user-drag: none;
}
.infinite-card-media-box {
min-height: 150px;
border: 1px dashed #cbd8e7;
border-radius: 10px;
background: #f8fbfd;
padding: 8px;
}
.infinite-card-media-box.drag-over {
border-color: #2f6db7;
background: #eaf2fb;
}
.infinite-card-drop-zone {
display: grid;
place-items: center;
min-height: 130px;
color: #6b7890;
text-align: center;
line-height: 1.55;
font-size: 12px;
}
.infinite-card-media-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
}
.infinite-card-media-grid button {
min-height: 72px;
padding: 0;
border: 1px solid #dbe7f0;
border-radius: 8px;
background: #ffffff;
overflow: hidden;
cursor: default;
user-select: none;
-webkit-user-drag: none;
}
.infinite-card-media:hover,
.infinite-card-media-grid button:hover {
cursor: zoom-in;
}
.infinite-card-media img,
.infinite-card-media video,
.infinite-card-media-grid img,
.infinite-card-media-grid video {
width: 100%;
max-height: 160px;
object-fit: cover;
border-radius: 8px;
border: 1px solid #e0e8f3;
background: #f4f7fb;
user-select: none;
-webkit-user-select: none;
-webkit-user-drag: none;
-webkit-touch-callout: none;
pointer-events: none;
}
.infinite-card-media,
.infinite-card-media-grid,
.infinite-card-media-grid button,
[data-canvas-card-media],
[data-canvas-media-drag] {
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
.infinite-card.media-card,
.infinite-card.panorama-view-card {
display: flex;
flex-direction: column;
}
.infinite-card.media-card .infinite-card-body,
.infinite-card.panorama-view-card .infinite-card-body {
flex: 1 1 auto;
height: auto;
min-height: 0;
}
.infinite-card.media-card .infinite-card-media {
height: 100%;
min-height: 0;
}
.infinite-card.media-card .infinite-card-media img,
.infinite-card.media-card .infinite-card-media video {
height: 100%;
max-height: none;
}
.infinite-card.media-card .infinite-card-media video {
object-fit: contain;
background: #070b10;
}
.infinite-card-media.panorama img {
aspect-ratio: 2 / 1;
object-fit: cover;
}
.infinite-card.panorama-view-card .infinite-card-body {
padding: 0;
}
.infinite-card-panorama {
position: relative;
display: block;
width: 100%;
height: 100%;
min-height: 0;
border: 0;
border-radius: 0 0 9px 9px;
overflow: hidden;
cursor: zoom-in;
background:
radial-gradient(circle at center, rgba(47, 109, 183, 0.10), transparent 62%),
linear-gradient(135deg, #f8fbff, #edf6ff);
user-select: none;
touch-action: manipulation;
}
.infinite-card-panorama.dragging {
cursor: zoom-in;
}
.infinite-card-panorama-image,
.infinite-card-panorama canvas {
display: block;
width: 100%;
height: 100%;
min-height: 0;
object-fit: cover;
pointer-events: none;
}
.infinite-card-panorama-hint {
position: absolute;
left: 9px;
bottom: 8px;
padding: 4px 8px;
border: 1px solid rgba(255, 255, 255, 0.38);
border-radius: 999px;
background: rgba(15, 23, 42, 0.46);
color: #ffffff;
font-size: 11px;
font-weight: 760;
backdrop-filter: blur(8px);
pointer-events: none;
}
.infinite-card-media-grid img,
.infinite-card-media-grid video {
height: 72px;
max-height: 72px;
border: 0;
border-radius: 0;
}
.infinite-generated-media {
margin-bottom: 8px;
}
.infinite-generated-media.single .infinite-card-media-grid {
grid-template-columns: 1fr;
}
.infinite-generated-media.single .infinite-card-media-grid button {
min-height: 150px;
}
.infinite-generated-media.single .infinite-card-media-grid img,
.infinite-generated-media.single .infinite-card-media-grid video {
height: auto;
max-height: 340px;
aspect-ratio: inherit;
border-radius: 10px;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card[data-canvas-type="playlist"] > .infinite-card-body {
flex: 1 1 auto;
min-height: 0;
padding: 0;
overflow: hidden;
border-radius: 7px;
background: var(--surface-2);
}
body:not(.auth-required) .layout.canvas-layout .infinite-card[data-canvas-type="playlist"] {
display: flex;
flex-direction: column;
}
.infinite-playlist-box {
--pl-bg: var(--surface-2);
--pl-panel: var(--surface);
--pl-raised: var(--surface-3);
--pl-border: var(--border);
--pl-text: var(--text);
--pl-muted: var(--muted);
--pl-accent: var(--accent);
--pl-accent-solid: var(--accent);
--pl-stage: #070b10;
position: relative;
min-width: 0;
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
gap: 7px;
padding: 10px;
overflow: hidden;
border-radius: 7px;
background: var(--pl-bg);
color: var(--pl-text);
}
body.theme-dark .infinite-playlist-box {
--pl-accent: #72b7ff;
--pl-accent-solid: #2f6db7;
}
.infinite-playlist-box[data-canvas-move-handle] { cursor: grab; }
.infinite-playlist-box[data-canvas-move-handle] [data-canvas-playback-control],
.infinite-playlist-box[data-canvas-move-handle] .infinite-playlist-thumb,
.infinite-playlist-box[data-canvas-move-handle] input,
.infinite-playlist-box[data-canvas-move-handle] label { cursor: auto; }
.infinite-playlist-box[data-canvas-move-handle] button { cursor: pointer; }
.infinite-playlist-summary {
min-height: 22px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.infinite-playlist-summary strong { color: var(--pl-text); font-size: 13px; letter-spacing: 0.01em; }
.infinite-playlist-summary span { color: var(--pl-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.infinite-playlist-player {
position: relative;
flex: 1 1 260px;
min-height: 220px;
aspect-ratio: 16 / 9;
display: grid;
place-items: center;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--pl-border) 76%, #26384d);
border-radius: 9px;
background: var(--pl-stage);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}
.infinite-playlist-box.drag-over .infinite-playlist-player,
.infinite-playlist-box.drag-over .infinite-playlist-track {
border-color: #63a4ee;
box-shadow: 0 0 0 2px rgba(74, 145, 224, 0.22);
}
.infinite-playlist-player > video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
display: block;
aspect-ratio: auto !important;
background: var(--pl-stage);
object-position: 50% 50%;
}
.infinite-playlist-player[data-playlist-fit="contain"] > video { object-fit: contain !important; }
.infinite-playlist-player[data-playlist-fit="cover"] > video { object-fit: cover !important; }
.infinite-playlist-player:focus-visible {
outline: 2px solid var(--pl-accent);
outline-offset: 2px;
}
.infinite-playlist-status {
flex: 0 0 auto;
color: var(--pl-muted);
font-size: 11px;
font-weight: 700;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.infinite-playlist-current-name {
position: absolute;
left: 10px;
bottom: 9px;
max-width: calc(100% - 20px);
padding: 4px 8px;
overflow: hidden;
border-radius: 5px;
background: rgba(4, 8, 13, 0.72);
color: #f8fafc;
font-size: 11px;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
backdrop-filter: blur(8px);
}
.infinite-playlist-empty-state {
display: grid;
place-items: center;
gap: 5px;
color: var(--pl-muted);
text-align: center;
}
.infinite-playlist-empty-state svg { width: 28px; height: 28px; }
.infinite-playlist-empty-state strong { color: var(--pl-text); font-size: 13px; }
.infinite-playlist-empty-state span { font-size: 11px; }
.infinite-playlist-transport {
min-width: 0;
display: grid;
gap: 5px;
padding: 6px 7px;
border: 1px solid var(--pl-border);
border-radius: 8px;
background: var(--pl-panel);
}
.infinite-playlist-transport-main {
min-width: 0;
display: grid;
grid-template-columns: auto minmax(120px, 1fr) auto;
align-items: center;
gap: 8px;
}
.infinite-playlist-transport-buttons,
.infinite-playlist-transport-options {
display: inline-flex;
align-items: center;
gap: 5px;
}
.infinite-playlist-transport-meta {
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
}
.infinite-playlist-transport-options { margin-left: auto; }
.infinite-playlist-playback-state {
color: var(--pl-accent);
font-size: 10px;
font-weight: 750;
}
.infinite-playlist-transport button,
.infinite-playlist-trim button,
.infinite-playlist-bgm-toggle {
min-height: 30px;
padding: 0 10px;
border: 1px solid var(--pl-border);
border-radius: 6px;
background: var(--pl-raised);
color: var(--pl-text);
font: inherit;
font-size: 11px;
font-weight: 700;
cursor: pointer;
}
.infinite-playlist-transport button:hover:not(:disabled),
.infinite-playlist-trim button:hover:not(:disabled),
.infinite-playlist-bgm-toggle:hover:not(:disabled) { border-color: var(--pl-accent); color: var(--pl-accent); }
.infinite-playlist-transport button:disabled,
.infinite-playlist-trim button:disabled { opacity: 0.38; cursor: default; }
.infinite-playlist-transport button.primary { min-width: 54px; border-color: var(--pl-accent-solid); background: var(--pl-accent-solid); color: #fff; }
.infinite-playlist-transport button:focus-visible,
.infinite-playlist-trim button:focus-visible,
.infinite-playlist-bgm-toggle:focus-visible { outline: 2px solid var(--pl-accent); outline-offset: 2px; }
.infinite-playlist-video-scrub {
--video-progress: 0%;
--video-buffered: 0%;
width: 100%;
min-width: 0;
min-height: 0 !important;
max-height: 26px !important;
height: 26px;
margin: 0;
padding: 0 !important;
border: 0 !important;
appearance: none;
background: transparent !important;
box-shadow: none !important;
cursor: pointer;
}
.infinite-playlist-video-scrub::-webkit-slider-runnable-track {
height: 4px;
border-radius: 999px;
background: linear-gradient(to right, var(--pl-accent) 0 var(--video-progress), color-mix(in srgb, var(--pl-muted) 42%, transparent) var(--video-progress) var(--video-buffered), color-mix(in srgb, var(--pl-muted) 20%, transparent) var(--video-buffered) 100%);
}
.infinite-playlist-video-scrub::-webkit-slider-thumb {
width: 14px;
height: 14px;
margin-top: -5px;
appearance: none;
border: 2px solid var(--pl-panel);
border-radius: 50%;
background: var(--pl-accent);
box-shadow: 0 1px 4px rgba(15, 23, 42, 0.28);
}
.infinite-playlist-video-scrub::-moz-range-track { height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--pl-muted) 20%, transparent); }
.infinite-playlist-video-scrub::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--pl-accent); }
.infinite-playlist-video-scrub::-moz-range-thumb { width: 12px; height: 12px; border: 2px solid var(--pl-panel); border-radius: 50%; background: var(--pl-accent); }
.infinite-playlist-video-scrub:focus-visible { outline: 2px solid var(--pl-accent); outline-offset: 1px; border-radius: 999px; }
.infinite-playlist-video-scrub:disabled { opacity: 0.4; cursor: default; }
.infinite-playlist-timecode {
flex: 0 0 auto;
color: var(--pl-text);
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
font-size: 11px;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.infinite-playlist-trim {
min-height: 30px;
display: flex;
align-items: center;
gap: 6px;
padding: 4px 6px 4px 9px;
border: 1px solid var(--pl-border);
border-radius: 7px;
background: var(--pl-panel);
}
.infinite-playlist-trim > span { flex: 1 1 auto; color: var(--pl-muted); font-size: 11px; }
.infinite-playlist-trim b { color: var(--pl-text); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 650; }
.infinite-playlist-track {
min-width: 0;
padding: 7px;
border: 1px solid var(--pl-border);
border-radius: 8px;
background: var(--pl-panel);
transition: border-color 140ms ease, box-shadow 140ms ease;
}
.infinite-playlist-track-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 6px;
color: var(--pl-muted);
font-size: 10px;
}
.infinite-playlist-track-label { display: inline-flex; align-items: center; gap: 6px; color: var(--pl-text); }
.infinite-playlist-track-label svg { width: 14px; height: 14px; color: var(--pl-accent); }
.infinite-playlist-track-label strong { font-size: 11px; }
.infinite-playlist-strip {
display: flex;
flex-wrap: nowrap;
gap: 6px;
min-height: 92px;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-inline: contain;
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--pl-muted) 54%, transparent) transparent;
}
.infinite-playlist-strip.empty { align-items: center; justify-content: center; color: var(--pl-muted); font-size: 11px; }
.infinite-playlist-thumb {
position: relative;
width: var(--playlist-clip-width, 144px);
height: 96px;
flex: 0 0 var(--playlist-clip-width, 144px);
padding: 0;
overflow: hidden;
border: 1px solid var(--pl-border);
border-radius: 7px;
background: var(--pl-raised);
cursor: grab;
transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}
.infinite-playlist-thumb.active {
border-color: var(--pl-accent);
box-shadow: 0 0 0 2px rgba(74, 145, 224, 0.22);
}
.infinite-playlist-thumb:focus-visible { outline: 2px solid var(--pl-accent); outline-offset: 2px; }
.infinite-playlist-thumb.dragging {
opacity: 0.55;
transform: scale(0.96);
cursor: grabbing;
}
.infinite-playlist-thumb.will-remove {
opacity: 0.4;
border-color: #d9534f;
box-shadow: 0 0 0 2px rgba(217, 83, 79, 0.32);
}
.infinite-playlist-thumb.placeholder {
opacity: 0.25;
}
.playlist-thumb-ghost {
position: fixed;
z-index: var(--z-drag-ghost);
margin: 0;
pointer-events: none;
overflow: hidden;
border: 2px solid #2f6db7;
border-radius: 8px;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.34);
transform: scale(1.05);
opacity: 0.96;
}
.playlist-thumb-ghost .infinite-playlist-thumb-index {
display: none;
}
.playlist-thumb-ghost.will-remove {
border-color: #d9534f;
box-shadow: 0 10px 24px rgba(217, 83, 79, 0.42);
}
.infinite-playlist-thumb.drop-target {
border-color: #2f6db7;
box-shadow: 0 0 0 3px rgba(47, 109, 183, 0.16);
}
.infinite-playlist-strip.drop-target {
outline: 2px dashed rgba(47, 109, 183, 0.5);
outline-offset: 2px;
border-radius: 8px;
}
.infinite-playlist-thumb video,
.infinite-playlist-thumb img {
width: 100%;
height: 100%;
pointer-events: none;
}
.infinite-playlist-thumb video { object-fit: contain; background: #070b10; }
.infinite-playlist-thumb img { object-fit: cover; }
.infinite-playlist-thumb-preview {
position: relative;
height: 68px;
overflow: hidden;
background: #070b10;
}
.infinite-playlist-thumb-info {
height: 27px;
display: flex;
align-items: center;
gap: 5px;
padding: 0 26px 0 7px;
color: var(--pl-text);
font-size: 10px;
}
.infinite-playlist-thumb-info > span {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.infinite-playlist-thumb-info time { flex: 0 0 auto; color: var(--pl-muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.infinite-playlist-remove {
width: 23px;
height: 23px;
display: grid;
place-items: center;
padding: 0;
border: 0;
border-radius: 5px;
background: transparent;
color: var(--pl-muted);
cursor: pointer;
}
.infinite-playlist-thumb > .infinite-playlist-remove { position: absolute; right: 3px; bottom: 2px; }
.infinite-playlist-remove:hover { background: rgba(225, 85, 85, 0.14); color: #f08b8b; }
.infinite-playlist-remove svg { width: 14px; height: 14px; }
.infinite-playlist-trimmed {
position: absolute;
right: 4px;
top: 4px;
padding: 2px 4px;
border-radius: 4px;
background: rgba(44, 116, 184, 0.88);
color: #fff;
font-size: 9px;
font-weight: 700;
pointer-events: none;
}
.infinite-playlist-thumb-index {
position: absolute;
top: 3px;
left: 3px;
z-index: 2;
min-width: 16px;
height: 16px;
padding: 0 4px;
display: grid;
place-items: center;
border-radius: 8px;
background: rgba(4, 8, 13, 0.78);
color: #ffffff;
font-size: 10px;
font-weight: 800;
line-height: 1;
pointer-events: none;
}
.infinite-playlist-bgm {
display: flex;
flex-direction: column;
gap: 6px;
min-height: 63px;
padding: 7px 8px;
border: 1px solid var(--pl-border);
border-radius: 8px;
background: var(--pl-panel);
}
.infinite-playlist-bgm.empty {
min-height: 48px;
flex-direction: row;
align-items: center;
justify-content: space-between;
border-style: dashed;
}
.infinite-playlist-bgm-head {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.infinite-playlist-bgm-empty {
color: var(--pl-muted);
font-size: 11px;
}
.infinite-playlist-bgm-controls {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.infinite-playlist-bgm-controls label {
min-width: 0;
display: grid;
grid-template-columns: auto minmax(70px, 1fr);
align-items: center;
gap: 7px;
color: var(--pl-muted);
font-size: 10px;
}
.infinite-playlist-bgm-controls input {
width: 100%;
min-width: 0;
min-height: 0 !important;
max-height: 24px !important;
height: 24px;
margin: 0;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
accent-color: var(--pl-accent);
cursor: pointer;
}
body.theme-dark:not(.auth-required) .infinite-card-video-controls input[type="range"],
body.theme-dark:not(.auth-required) .infinite-playlist-video-scrub,
body.theme-dark:not(.auth-required) .infinite-playlist-bgm-controls input[type="range"] {
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.infinite-playlist-bgm-toggle {
flex: 0 0 auto;
min-width: 46px;
}
.infinite-playlist-bgm-label {
flex: 1 1 auto;
min-width: 0;
color: var(--pl-text);
font-size: 11px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.infinite-playlist-bgm audio {
display: none;
}
.panorama-preview-panel {
width: min(1120px, calc(100vw - 36px));
height: min(760px, calc(100dvh - 34px));
max-height: calc(100dvh - 34px);
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
gap: 12px;
}
.panorama-preview-stage {
position: relative;
width: 100%;
height: 100%;
min-height: 0;
border: 1px solid #c8d7e8;
border-radius: 14px;
background-color: #eef4f8;
background-repeat: repeat-x;
background-position: 50% 50%;
overflow: hidden;
cursor: grab;
touch-action: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.panorama-zoom-ctrl {
position: absolute; right: 12px; bottom: 12px; z-index: 3;
display: inline-flex; align-items: center; gap: 2px; padding: 4px;
border-radius: 999px; background: rgba(15, 23, 42, 0.62);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.panorama-zoom-ctrl button {
display: inline-grid; place-items: center; width: 30px; height: 30px;
border: 0; border-radius: 999px; background: transparent; color: #fff;
font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer;
}
.panorama-zoom-ctrl button:hover { background: rgba(255, 255, 255, 0.18); }
.panorama-zoom-ctrl button:active { background: rgba(255, 255, 255, 0.28); }
.panorama-zoom-ctrl [data-panorama-zoom-val] {
min-width: 42px; text-align: center; color: #fff; font-size: 12px;
font-weight: 600; font-variant-numeric: tabular-nums;
}
#panoramaPreviewCanvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.panorama-preview-stage.dragging {
cursor: grabbing;
}
.panorama-preview-stage::before,
.panorama-preview-stage::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
}
.panorama-preview-stage::before {
background: radial-gradient(circle at 50% 50%, transparent 45%, rgba(5, 18, 34, 0.22));
}
.panorama-preview-stage::after {
border: 1px solid rgba(255, 255, 255, 0.42);
border-radius: inherit;
}
.panorama-preview-hint {
position: absolute;
left: 16px;
bottom: 14px;
z-index: 2;
padding: 7px 10px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.62);
color: #ffffff;
font-size: 12px;
}
.panorama-preview-tools {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
color: #607089;
font-size: 12px;
}
.panorama-preview-hud {
position: absolute;
top: 12px;
right: 12px;
z-index: 3;
display: flex;
align-items: center;
gap: 10px;
pointer-events: none;
}
.panorama-compass {
position: relative;
width: 46px;
height: 46px;
border-radius: 50%;
background: rgba(15, 23, 42, 0.55);
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 2px 10px rgba(5, 18, 34, 0.3);
}
.panorama-compass b {
position: absolute;
left: 50%;
top: 3px;
transform: translateX(-50%);
color: #fff;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
opacity: 0.92;
}
.panorama-compass-needle {
position: absolute;
inset: 0;
display: block;
transform-origin: 50% 50%;
transition: transform 0.06s linear;
}
.panorama-compass-needle::before {
content: "";
position: absolute;
left: 50%;
top: 6px;
transform: translateX(-50%);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 14px solid #ff6b6b;
}
.panorama-compass-needle::after {
content: "";
position: absolute;
left: 50%;
bottom: 6px;
transform: translateX(-50%);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 14px solid rgba(255, 255, 255, 0.72);
}
.panorama-readout {
display: flex;
flex-direction: column;
gap: 4px;
}
.panorama-readout span {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 9px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.55);
color: #fff;
font-size: 11px;
line-height: 1;
}
.panorama-readout i {
font-style: normal;
opacity: 0.7;
}
.panorama-readout strong {
font-variant-numeric: tabular-nums;
}
.panorama-frame-guide {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
border: 1.5px solid rgba(255, 255, 255, 0.95);
border-radius: 3px;
box-shadow: 0 0 0 100vmax rgba(8, 14, 26, 0.46);
pointer-events: none;
}
.panorama-frame-guide::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(to right, transparent calc(33.33% - 0.5px), rgba(255, 255, 255, 0.26) calc(33.33% - 0.5px), rgba(255, 255, 255, 0.26) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px)),
linear-gradient(to right, transparent calc(66.66% - 0.5px), rgba(255, 255, 255, 0.26) calc(66.66% - 0.5px), rgba(255, 255, 255, 0.26) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px)),
linear-gradient(to bottom, transparent calc(33.33% - 0.5px), rgba(255, 255, 255, 0.26) calc(33.33% - 0.5px), rgba(255, 255, 255, 0.26) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px)),
linear-gradient(to bottom, transparent calc(66.66% - 0.5px), rgba(255, 255, 255, 0.26) calc(66.66% - 0.5px), rgba(255, 255, 255, 0.26) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px));
}
.panorama-preview-tools {
flex-wrap: wrap;
padding-top: 2px;
}
.panorama-ratio-bar {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
gap: 3px;
flex: 1 1 auto;
padding: 4px;
background: #eef3f9;
border: 1px solid #e1e9f2;
border-radius: 999px;
}
.panorama-ratio-label {
color: #7a889d;
font-size: 12px;
font-weight: 600;
padding: 0 8px 0 6px;
}
.panorama-ratio-chip {
min-width: 40px;
padding: 5px 12px;
border: 0;
border-radius: 999px;
background: transparent;
color: #475569;
font-size: 12px;
font-weight: 650;
line-height: 1.35;
cursor: pointer;
transition: background 0.13s ease, color 0.13s ease, box-shadow 0.13s ease;
}
.panorama-ratio-chip:hover {
background: #dfe8f4;
color: #2f6db7;
}
.panorama-ratio-chip.is-active {
background: #2f6db7;
color: #fff;
box-shadow: 0 1px 5px rgba(47, 109, 183, 0.38);
}
#capturePanoramaToCanvasBtn {
display: inline-flex;
align-items: center;
gap: 6px;
flex: 0 0 auto;
}
#capturePanoramaToCanvasBtn svg {
width: 15px;
height: 15px;
}
.panorama-preview-panel:fullscreen,
.panorama-preview-panel:-webkit-full-screen {
width: 100vw;
height: 100vh;
max-width: none;
max-height: none;
border-radius: 0;
grid-template-rows: auto minmax(0, 1fr) auto;
background: #0b1220;
}
.panorama-preview-panel:fullscreen .modal-head h2,
.panorama-preview-panel:fullscreen .modal-head p {
color: #e8eef7;
}
.panorama-preview-panel:fullscreen .panorama-preview-stage {
aspect-ratio: auto;
height: 100%;
min-height: 0;
border-radius: 0;
}
.infinite-inline-references {
display: grid;
gap: 8px;
padding: 9px;
border: 1px dashed #c9d8e8;
border-radius: 12px;
background: #f7fafd;
}
.infinite-inline-references.drag-over {
border-color: #2f6db7;
background: #eaf2fb;
}
.infinite-inline-references-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: #2f6db7;
font-size: 12px;
}
.infinite-inline-references-head strong {
font-size: 12px;
}
.infinite-inline-references-head span {
color: #5f7287;
}
.infinite-inline-references-actions {
display: inline-flex;
align-items: center;
gap: 8px;
}
.infinite-inline-references-actions .small {
min-height: 28px;
padding: 4px 10px;
border-radius: 10px;
font-size: 12px;
}
.infinite-inline-reference-grid {
display: grid;
grid-template-columns: repeat(10, minmax(0, 1fr));
gap: 5px;
}
.infinite-inline-reference-empty {
grid-column: 1 / -1;
display: grid;
min-height: 48px;
place-items: center;
border: 1px dashed #d5e3ee;
border-radius: 10px;
color: #5f7287;
font-size: 12px;
line-height: 1.5;
text-align: center;
background: rgba(255, 255, 255, 0.74);
}
.infinite-inline-reference-grid > [role="button"] {
min-height: 40px;
padding: 0;
border: 1px solid #dbe7f0;
border-radius: 9px;
background: #ffffff;
overflow: hidden;
cursor: grab;
touch-action: none;
transition: transform 160ms ease, opacity 120ms ease, border-color 160ms ease, box-shadow 160ms ease;
will-change: transform;
}
.infinite-inline-reference-grid .infinite-inline-reference-add {
display: grid;
place-items: center;
align-content: center;
gap: 1px;
border: 1px dashed rgba(47, 109, 183, 0.55);
background: linear-gradient(180deg, #f6fbff 0%, #eef6ff 100%);
color: #2f6db7;
cursor: pointer;
font-weight: 900;
}
.infinite-inline-reference-grid .infinite-inline-reference-add span {
line-height: 1;
font-size: 20px;
}
.infinite-inline-reference-grid .infinite-inline-reference-add:hover {
transform: translateY(-1px);
border-color: rgba(47, 109, 183, 0.58);
background: #eaf2fb;
color: #2f6db7;
box-shadow: 0 8px 18px rgba(47, 109, 183, 0.1);
}
.infinite-inline-reference-grid .infinite-inline-reference-add.active {
border-style: solid;
border-color: rgba(47, 109, 183, 0.68);
background: #eaf2fb;
color: #2f6db7;
box-shadow: 0 0 0 3px rgba(47, 109, 183, 0.12);
}
.infinite-inline-reference-grid [data-canvas-panel-ref].dragging {
visibility: hidden;
}
.infinite-inline-reference-grid [data-canvas-panel-ref].removing {
opacity: 0;
transform: scale(0.86);
}
.infinite-inline-reference-grid img,
.infinite-inline-reference-grid video {
width: 100%;
height: 40px;
object-fit: cover;
display: block;
pointer-events: none;
}
.infinite-card-audio-thumb {
display: grid;
place-items: center;
width: 100%;
height: 100%;
background: linear-gradient(180deg, #eef3fb 0%, #e3ecf7 100%);
color: #2f6db7;
}
.infinite-card-audio-thumb svg {
width: 20px;
height: 20px;
}
.infinite-inline-reference-ghost {
z-index: var(--z-drag-ghost);
margin: 0;
pointer-events: none;
border: 2px solid #2f6db7;
border-radius: 11px;
overflow: hidden;
background-color: #f1f5f9;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
box-shadow: 0 12px 26px rgba(15, 23, 42, 0.32);
opacity: 0.97;
}
.infinite-inline-reference-ghost img,
.infinite-inline-reference-ghost video,
.infinite-inline-reference-ghost .infinite-card-audio-thumb {
width: 100%;
height: 100%;
object-fit: cover;
}
.infinite-inline-reference-ghost.is-text {
display: grid;
place-items: center;
padding: 6px;
background-color: #ffffff;
color: #2f6db7;
font-size: 11px;
font-weight: 800;
text-align: center;
word-break: break-all;
}
.infinite-inline-reference-ghost.is-audio {
display: grid;
place-items: center;
background: linear-gradient(180deg, #eef3fb 0%, #e3ecf7 100%);
color: #2f6db7;
}
.infinite-inline-reference-ghost.is-audio svg {
width: 22px;
height: 22px;
}
.infinite-inline-reference-ghost.dragging-out {
border-color: #d92d20;
box-shadow: 0 14px 30px rgba(217, 45, 32, 0.42);
}
.infinite-card-audio {
--audio-card-accent: #2f6db7;
--audio-card-accent-soft: rgba(47, 109, 183, 0.10);
--audio-card-border: #dbe7f0;
--audio-card-bg: #ffffff;
--audio-card-bg-soft: #f7fafc;
--audio-card-text: #172033;
--audio-card-muted: #66738a;
display: grid;
grid-template-columns: 36px minmax(0, 1fr);
grid-template-rows: auto auto auto;
gap: 7px 10px;
align-items: center;
width: 100%;
height: 112px;
min-height: 92px;
padding: 11px;
border-radius: 8px;
border: 1px solid var(--audio-card-border);
background: linear-gradient(180deg, var(--audio-card-bg) 0%, var(--audio-card-bg-soft) 100%);
color: var(--audio-card-text);
font-weight: 800;
overflow: hidden;
}
.infinite-card-audio audio {
display: none;
}
.infinite-card-audio-icon {
grid-column: 1;
grid-row: 1;
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 10px;
border: 1px solid rgba(47, 109, 183, 0.16);
background: var(--audio-card-accent-soft);
color: var(--audio-card-accent);
}
.infinite-card-audio-icon[data-canvas-audio-toggle] {
cursor: pointer;
transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.infinite-card-audio-icon[data-canvas-audio-toggle]:hover {
background: var(--audio-card-accent);
color: #ffffff;
}
.infinite-card-audio-icon[data-canvas-audio-toggle]:focus-visible {
outline: 2px solid var(--audio-card-accent);
outline-offset: 2px;
}
.infinite-card-audio-icon[data-canvas-audio-toggle]:active {
transform: scale(0.96);
}
.infinite-card-audio-icon [data-canvas-audio-toggle-icon] {
display: grid;
place-items: center;
}
.infinite-card-audio-main {
grid-column: 2;
grid-row: 1;
display: grid;
gap: 3px;
min-width: 0;
}
.infinite-card-audio-title {
min-width: 0;
color: var(--audio-card-text);
font-size: 12px;
font-weight: 850;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.infinite-card-audio-icon svg {
width: 17px;
height: 17px;
stroke-width: 2;
}
.infinite-card-audio-wave {
grid-column: 1 / -1;
grid-row: 2;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
min-width: 0;
height: 22px;
}
.infinite-card-audio-wave i {
width: 4px;
height: 18px;
border-radius: 999px;
background: rgba(47, 109, 183, 0.42);
transform-origin: center;
}
.infinite-card-audio-wave i:nth-child(2) { height: 28px; }
.infinite-card-audio-wave i:nth-child(3) { height: 22px; }
.infinite-card-audio-wave i:nth-child(4) { height: 32px; }
.infinite-card-audio-wave i:nth-child(5) { height: 16px; }
.infinite-card-audio.playing .infinite-card-audio-wave i {
animation: infiniteAudioPulse 720ms ease-in-out infinite alternate;
}
.infinite-card-audio.playing .infinite-card-audio-wave i:nth-child(2) { animation-delay: 80ms; }
.infinite-card-audio.playing .infinite-card-audio-wave i:nth-child(3) { animation-delay: 160ms; }
.infinite-card-audio.playing .infinite-card-audio-wave i:nth-child(4) { animation-delay: 240ms; }
.infinite-card-audio.playing .infinite-card-audio-wave i:nth-child(5) { animation-delay: 320ms; }
.infinite-card-audio-progress {
grid-column: 1 / -1;
grid-row: 3;
width: 100%;
height: 14px;
margin: 0;
accent-color: var(--audio-card-accent);
cursor: pointer;
touch-action: none;
}
.infinite-card-audio-progress::-webkit-slider-runnable-track {
height: 5px;
border-radius: 999px;
background: rgba(47, 109, 183, 0.18);
}
.infinite-card-audio-progress::-webkit-slider-thumb {
width: 13px;
height: 13px;
margin-top: -4px;
border: 2px solid #ffffff;
border-radius: 50%;
background: var(--audio-card-accent);
box-shadow: 0 2px 8px rgba(47, 109, 183, 0.26);
}
.infinite-card-audio-progress::-moz-range-track {
height: 5px;
border-radius: 999px;
background: rgba(47, 109, 183, 0.18);
}
.infinite-card-audio-progress::-moz-range-thumb {
width: 13px;
height: 13px;
border: 2px solid #ffffff;
border-radius: 50%;
background: var(--audio-card-accent);
box-shadow: 0 2px 8px rgba(47, 109, 183, 0.26);
}
.infinite-card-audio-status {
min-width: 0;
color: var(--audio-card-muted);
font-size: 11px;
font-weight: 750;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.infinite-card-audio.playing .infinite-card-audio-status {
color: var(--audio-card-accent);
}
.infinite-card-audio.playing .infinite-card-audio-status::before {
content: "正在播放 · ";
}
.infinite-card-audio[data-canvas-audio-surface="card"] {
display: flex;
align-items: center;
gap: 13px;
height: 100%;
min-height: 0;
padding: 11px 14px;
border: 0;
border-radius: 0 0 9px 9px;
background: linear-gradient(180deg, var(--audio-card-bg), var(--audio-card-bg-soft));
}
.infinite-card-audio[data-canvas-audio-surface="card"] .infinite-card-audio-main {
flex: 1 1 auto;
display: flex;
align-items: center;
gap: 15px;
min-width: 0;
min-height: 0;
}
.infinite-card-audio-disc {
flex: 0 0 auto;
position: relative;
box-sizing: border-box;
width: 56px;
height: 56px;
padding: 0;
margin: 0;
border: 0;
border-radius: 50%;
background: transparent;
cursor: pointer;
}
.infinite-card-audio-disc-face {
position: absolute;
inset: 0;
border-radius: 50%;
background:
radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--audio-card-accent) 26%, #1b1f27) 0 14%, rgba(0, 0, 0, 0) 14.5%),
repeating-radial-gradient(circle at 50% 50%, #262a33 0 1.5px, #14171d 1.5px 3.6px);
box-shadow: 0 6px 16px rgba(15, 20, 32, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.infinite-card-audio[data-canvas-audio-surface="card"].playing .infinite-card-audio-disc-face {
animation: icaVinylSpin 3.4s linear infinite;
}
@keyframes icaVinylSpin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.infinite-card-audio-disc-face { animation: none !important; }
}
.infinite-card-audio-disc-icon {
position: absolute;
inset: 0;
margin: auto;
width: 26px;
height: 26px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--audio-card-accent);
color: #ffffff;
box-shadow: 0 2px 8px rgba(15, 20, 32, 0.30);
transition: transform 120ms ease, box-shadow 120ms ease;
}
.infinite-card-audio-disc:hover .infinite-card-audio-disc-icon { transform: scale(1.06); }
.infinite-card-audio-disc:active .infinite-card-audio-disc-icon { transform: scale(0.94); }
.infinite-card-audio-disc-icon svg { width: 15px; height: 15px; }
.infinite-card-audio-disc:focus-visible { outline: none; }
.infinite-card-audio-disc:focus-visible .infinite-card-audio-disc-icon {
box-shadow: 0 0 0 4px color-mix(in srgb, var(--audio-card-accent) 22%, transparent), 0 2px 8px rgba(15, 20, 32, 0.30);
}
.infinite-card-audio-body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.infinite-card-audio[data-canvas-audio-surface="card"] .infinite-card-audio-title {
font-size: 13.5px;
font-weight: 800;
color: var(--audio-card-text);
}
.infinite-card-audio-sub {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--audio-card-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 5px;
}
.infinite-card-audio-scrub {
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0;
}
.infinite-card-audio[data-canvas-audio-surface="card"] .infinite-card-audio-progress {
width: 100%;
height: 16px;
margin: 0;
}
.infinite-card-audio[data-canvas-audio-surface="card"] .infinite-card-audio-progress::-webkit-slider-runnable-track {
background: linear-gradient(to right,
var(--audio-card-accent) var(--audio-progress, 0%),
rgba(47, 109, 183, 0.18) var(--audio-progress, 0%));
}
.infinite-card-audio[data-canvas-audio-surface="card"] .infinite-card-audio-progress::-moz-range-progress {
height: 5px;
border-radius: 999px;
background: var(--audio-card-accent);
}
.infinite-card-audio[data-canvas-audio-surface="card"] .infinite-card-audio-status {
align-self: flex-end;
color: var(--audio-card-muted);
font-size: 11.5px;
font-weight: 750;
font-variant-numeric: tabular-nums;
}
.infinite-card-audio[data-canvas-audio-surface="card"].playing .infinite-card-audio-status {
color: var(--audio-card-accent);
}
.infinite-card-media-grid .infinite-card-audio {
height: 100%;
min-height: 82px;
padding: 9px;
grid-template-columns: 30px minmax(0, 1fr);
grid-template-rows: auto minmax(14px, 1fr) auto;
gap: 5px 8px;
border: 0;
border-radius: 0;
}
.infinite-card-media-grid .infinite-card-audio-icon {
width: 30px;
height: 30px;
border-radius: 8px;
}
.infinite-card-media-grid .infinite-card-audio-title {
display: none;
}
.infinite-card-media-grid .infinite-card-audio-status {
font-size: 11px;
}
.infinite-card-media-grid .infinite-card-audio-wave i {
width: 3px;
height: 14px;
}
.infinite-card-media-grid .infinite-card-audio-progress {
height: 12px;
}
.infinite-card.media-card .infinite-card-media .infinite-card-audio {
height: 100%;
min-height: 0;
border: 0;
border-radius: 0 0 9px 9px;
}
@container (max-width: 220px) {
.infinite-card-audio[data-canvas-audio-surface="card"] {
padding: 10px;
grid-template-columns: 34px minmax(0, 1fr);
gap: 7px 9px;
}
.infinite-card-audio[data-canvas-audio-surface="card"] .infinite-card-audio-icon {
width: 34px;
height: 34px;
border-radius: 10px;
}
.infinite-card-audio[data-canvas-audio-surface="card"] .infinite-card-audio-title {
font-size: 11px;
}
.infinite-card-audio[data-canvas-audio-surface="card"] .infinite-card-audio-status {
font-size: 10px;
}
.infinite-card-audio[data-canvas-audio-surface="card"] .infinite-card-audio-wave {
height: 24px;
gap: 4px;
}
.infinite-card-audio[data-canvas-audio-surface="card"] .infinite-card-audio-wave i {
width: 4px;
height: 16px;
}
}
body.theme-dark .infinite-card-audio {
--audio-card-accent: #78b3e8;
--audio-card-accent-soft: rgba(120, 179, 232, 0.13);
--audio-card-border: rgba(255, 255, 255, 0.10);
--audio-card-bg: #151c27;
--audio-card-bg-soft: #111822;
--audio-card-text: #e6eef8;
--audio-card-muted: #a6b5c6;
}
@keyframes infiniteAudioPulse {
from { transform: scaleY(0.62); opacity: 0.62; }
to { transform: scaleY(1.18); opacity: 1; }
}
.infinite-card-meta {
font-size: 12px;
color: var(--muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.infinite-card-url {
margin-bottom: 8px;
}
.infinite-card-shape textarea {
min-height: 58px;
text-align: center;
}
.infinite-canvas-status-row {
position: absolute;
left: 18px;
right: auto;
bottom: 18px;
z-index: 19;
display: flex;
align-items: center;
gap: 10px;
width: auto;
height: auto;
border: 0;
background: transparent;
pointer-events: none;
}
.infinite-canvas-status-row > * {
pointer-events: auto;
}
.infinite-canvas-status-row .file-summary,
.infinite-canvas-status-row .workflow-history-actions {
min-height: 38px;
border: 1px solid rgba(203, 213, 225, 0.9);
border-radius: 999px;
background: rgba(255, 255, 255, 0.9);
box-shadow: none;
backdrop-filter: blur(12px);
}
.infinite-canvas-status-row .file-summary {
display: flex;
align-items: center;
padding: 0 14px;
color: #526174;
}
.infinite-canvas-status-row .workflow-history-actions {
display: flex;
align-items: center;
gap: 6px;
padding: 4px;
}
.infinite-canvas-status-row .workflow-history-actions button {
min-height: 30px;
border-radius: 999px;
}
.infinite-canvas-search {
display: grid;
gap: 7px;
color: var(--muted);
font-weight: 800;
}
.infinite-canvas-layer-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 12px;
}
.infinite-canvas-layer-head h3 {
margin: 0;
font-size: 14px;
}
.infinite-canvas-layer-head span {
color: var(--muted);
font-size: 12px;
}
.infinite-canvas-layer-list {
display: grid;
gap: 6px;
max-height: 260px;
overflow: auto;
margin-top: 8px;
}
.infinite-canvas-layer-item {
display: grid;
grid-template-columns: 24px minmax(0, 1fr);
align-items: center;
gap: 8px;
min-height: 38px;
padding: 7px 8px;
border: 1px solid #dbe7f0;
border-radius: 10px;
background: #ffffff;
text-align: left;
cursor: pointer;
}
.infinite-canvas-layer-item:hover,
.infinite-canvas-layer-item.selected {
border-color: rgba(47, 109, 183, 0.42);
background: #eaf2fb;
}
.infinite-canvas-layer-item span:first-child {
display: grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: 7px;
background: var(--layer-accent, #2f6db7);
color: #ffffff;
font-size: 12px;
font-weight: 900;
}
.infinite-canvas-layer-title {
min-width: 0;
display: grid;
gap: 2px;
}
.infinite-canvas-layer-title strong,
.infinite-canvas-layer-title small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.infinite-canvas-layer-title small {
color: var(--muted);
font-size: 11px;
}
.infinite-canvas-selection-info {
display: grid;
gap: 5px;
padding: 10px;
border: 1px solid #dbe7f0;
border-radius: 10px;
background: #ffffff;
color: #344154;
font-size: 12px;
}
.infinite-canvas-selection-info strong {
color: var(--text);
font-size: 14px;
}
.infinite-canvas-property-panel {
display: grid;
gap: 8px;
margin-top: 10px;
}
.infinite-canvas-property-title {
font-weight: 900;
color: var(--text);
}
.infinite-canvas-property-row {
display: grid;
gap: 5px;
font-size: 12px;
color: #526174;
font-weight: 800;
}
.infinite-canvas-property-row input,
.infinite-canvas-property-row select {
width: 100%;
min-height: 32px;
border: 1px solid #d7e2ef;
border-radius: 8px;
background: #ffffff;
padding: 4px 8px;
font: inherit;
font-weight: 700;
}
.infinite-canvas-property-row input[type="color"] {
padding: 3px;
}
.infinite-canvas-property-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.infinite-canvas-property-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.infinite-canvas-property-actions button {
min-height: 32px;
border-radius: 8px;
border: 1px solid #cad6e5;
background: #ffffff;
color: #1f3454;
font-weight: 800;
}
.infinite-canvas-tip.compact {
margin-top: 0;
padding: 10px;
}
@media (max-width: 980px) {
.infinite-canvas-shell {
grid-template-columns: 1fr;
}
.infinite-canvas-sidebar,
.infinite-canvas-inspector {
display: none;
}
.infinite-canvas-toolbar {
inset: 0;
}
.infinite-canvas-main {
height: calc(100vh - 28px);
min-height: 560px;
}
.canvas-ai-composer {
grid-template-columns: 1fr;
}
.canvas-generate-options {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.canvas-ai-composer {
position: absolute;
left: 70px;
right: 10px;
bottom: 58px;
width: auto;
max-width: none;
margin: 0;
transform: none;
max-height: min(50vh, 380px);
overflow: auto;
align-items: stretch;
padding: 10px;
}
.canvas-composer-ref-drop {
min-height: 78px;
}
.canvas-composer-ref-drop > span {
display: none;
}
.canvas-prompt-box textarea {
min-height: 72px;
}
.canvas-composer-result {
display: none;
}
.canvas-empty-card {
width: calc(100% - 100px);
}
.canvas-empty-actions {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 1120px) {
body:not(.auth-required) .topbar {
position: fixed;
inset: 0 auto 0 0;
width: var(--sidebar);
height: 100vh;
min-height: 100vh;
border-right: 1px solid var(--border);
border-bottom: 0;
}
body:not(.auth-required) .layout {
margin-left: var(--sidebar);
}
}
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-shell.canvas-studio-shell {
--canvas-surface: #f4f7fa;
--canvas-glass-strong: rgba(255, 255, 255, 0.82);
--canvas-glass-soft: rgba(255, 255, 255, 0.78);
--canvas-border-strong: rgba(213, 220, 229, 0.9);
--canvas-panel-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 24px rgba(15, 23, 42, 0.055);
--canvas-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 12px 28px rgba(15, 23, 42, 0.07);
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
height: 100%;
min-height: 0;
overflow: hidden;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-main {
position: relative;
height: 100%;
min-width: 0;
min-height: 0;
overflow: hidden;
border: 0;
border-radius: 20px 0 0 20px;
background: transparent;
box-shadow: none;
}
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-inspector {
display: block;
min-width: 0;
height: 100%;
padding: 18px 16px;
overflow: auto;
border-left: 1px solid rgba(213, 220, 229, 0.9);
border-radius: 0 20px 20px 0;
background: rgba(255, 255, 255, 0.86);
box-shadow: none;
backdrop-filter: blur(18px);
}
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-toolbar {
position: absolute;
inset: 0;
z-index: 20;
pointer-events: none;
}
body:not(.auth-required) .layout.canvas-layout .canvas-side-dock {
top: 86px;
left: 18px;
z-index: 25;
gap: 8px;
padding: 8px;
border: 1px solid var(--canvas-border-strong);
border-radius: 18px;
background: var(--canvas-glass-strong);
box-shadow: 0 16px 42px rgba(15, 23, 42, 0.08);
backdrop-filter: blur(18px);
}
body:not(.auth-required) .layout.canvas-layout .canvas-dock-button {
width: 40px;
height: 40px;
border-radius: 13px;
background: #f8fbff;
color: #344054;
font-size: 0;
}
body:not(.auth-required) .layout.canvas-layout .canvas-dock-button > .ui-icon {
margin: 0;
}
body:not(.auth-required) .layout.canvas-layout .canvas-dock-button.primary-action {
background: linear-gradient(135deg, #2f6db7 0%, #2f6db7 100%);
}
body:not(.auth-required) .layout.canvas-layout .canvas-dock-button:hover {
transform: translateY(-1px);
}
body:not(.auth-required) .layout.canvas-layout .canvas-ai-composer {
display: none !important;
}
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-stage {
inset: 0;
border: 0;
border-radius: 0;
background-color: var(--canvas-surface);
background-image: var(--canvas-grid-image);
background-size: var(--canvas-grid-size-current, 28px) var(--canvas-grid-size-current, 28px);
background-position: 0 0;
}
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-drop-hint {
left: 78px;
bottom: 82px;
max-width: min(520px, calc(100% - 190px));
border-color: rgba(203, 213, 225, 0.86);
background: rgba(255, 255, 255, 0.82);
color: #667085;
box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
backdrop-filter: blur(12px);
}
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-status-row {
position: absolute;
left: 18px;
right: 18px;
bottom: 18px;
z-index: 24;
display: flex;
justify-content: space-between;
gap: 10px;
width: auto;
padding: 0;
border: 0;
background: transparent;
pointer-events: none;
}
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-status-row > * {
pointer-events: auto;
}
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-status-row .file-summary,
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-status-row .workflow-history-actions {
min-height: 38px;
border: 1px solid rgba(203, 213, 225, 0.86);
border-radius: 999px;
background: rgba(255, 255, 255, 0.88);
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.07);
backdrop-filter: blur(16px);
margin: 0 !important;
}
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-status-row .file-summary {
display: flex;
align-items: center;
padding: 0 14px;
}
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-status-row .workflow-history-actions {
display: flex;
align-items: center;
gap: 6px;
padding: 4px;
}
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-status-row .workflow-history-actions button {
min-height: 30px;
border-radius: 999px;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card {
border: 1px solid #dde5ee;
border-radius: 8px;
background: rgba(255, 255, 255, 0.96);
box-shadow: var(--canvas-card-shadow);
overflow: visible;
display: flex;
flex-direction: column;
transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card.is-pointer-hover {
transform: translateY(-1px);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 16px 34px rgba(15, 23, 42, 0.09);
}
body:not(.auth-required) .layout.canvas-layout .infinite-card.selected {
border-color: rgba(37, 90, 156, 0.68);
box-shadow: 0 0 0 2px rgba(37, 90, 156, 0.16), 0 16px 34px rgba(15, 23, 42, 0.1);
}
body:not(.auth-required) .layout.canvas-layout .infinite-card:not([data-canvas-type="section"]) .infinite-card-head {
position: absolute;
left: 0;
right: auto;
bottom: calc(100% + 3px);
z-index: 4;
width: auto;
max-width: 100%;
min-height: 0;
padding: 0 2px;
background: transparent;
color: var(--card-accent, #2f6db7);
}
body:not(.auth-required) .layout.canvas-layout .infinite-card:not([data-canvas-type="section"]):not(.result-grid-card) .infinite-card-head:has(.infinite-card-results-toggle) {
width: 100%;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card:not([data-canvas-type="section"]) .infinite-card-head strong {
color: var(--card-accent, #2f6db7);
font-size: 13px;
font-weight: 900;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card:not([data-canvas-type="section"]) .infinite-card-badge {
width: 18px;
height: 18px;
border: 0;
border-radius: 0;
background: transparent;
color: var(--card-accent, #2f6db7);
font-size: 10px;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card > .infinite-card-body {
padding: 9px;
flex: 1 1 auto;
min-height: 0;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-body:has(> .infinite-card-empty) {
display: flex;
flex-direction: column;
padding: 12px;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-body > .infinite-card-empty {
flex: 1 1 auto;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-note,
body:not(.auth-required) .layout.canvas-layout .infinite-card-meta {
color: #667085;
line-height: 1.5;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-field {
grid-template-columns: 66px minmax(0, 1fr);
gap: 6px;
min-height: 26px;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-body textarea,
body:not(.auth-required) .layout.canvas-layout .infinite-card-body input,
body:not(.auth-required) .layout.canvas-layout .infinite-card-body select {
border-radius: 9px;
font-size: 12px;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-media-box,
body:not(.auth-required) .layout.canvas-layout .infinite-card-drop-zone {
border-color: #dbe7f0;
border-radius: 12px;
background: #f8fbfd;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-media img,
body:not(.auth-required) .layout.canvas-layout .infinite-card-media video,
body:not(.auth-required) .layout.canvas-layout .infinite-card-media-grid img,
body:not(.auth-required) .layout.canvas-layout .infinite-card-media-grid video {
border-radius: 10px;
}
body:not(.auth-required) :is(.layout.canvas-layout, .canvas-studio-shell) .infinite-card:is(.media-card, .panorama-view-card, [data-canvas-type="poser"]) .infinite-card-body {
padding: 0;
overflow: hidden;
border-radius: 7px;
background: transparent;
}
body:not(.auth-required) :is(.layout.canvas-layout, .canvas-studio-shell) .infinite-card.panorama-view-card .infinite-card-panorama {
height: 100%;
min-height: 0;
border: 0;
border-radius: 7px;
box-shadow: none;
}
body:not(.auth-required) :is(.layout.canvas-layout, .canvas-studio-shell) .infinite-card.media-card .infinite-card-media {
display: block;
height: 100%;
overflow: hidden;
border-radius: 7px;
background: transparent;
}
body:not(.auth-required) :is(.layout.canvas-layout, .canvas-studio-shell) .infinite-card.media-card .infinite-card-media img,
body:not(.auth-required) :is(.layout.canvas-layout, .canvas-studio-shell) .infinite-card.media-card .infinite-card-media video {
display: block;
width: 100%;
height: 100%;
border: 0;
border-radius: 7px;
background: transparent;
object-fit: cover;
}
body:not(.auth-required) :is(.layout.canvas-layout, .canvas-studio-shell) .infinite-card.media-card .infinite-card-media video {
object-fit: contain;
background: #070b10;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-link-zone {
opacity: 0;
transition: opacity 140ms ease;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card.is-pointer-hover .infinite-card-link-zone,
body:not(.auth-required) .layout.canvas-layout .infinite-card.selected .infinite-card-link-zone,
body:not(.auth-required) .layout.canvas-layout .infinite-card-link-zone:focus-within,
body:not(.auth-required) .layout.canvas-layout .infinite-card-link-zone:has(.infinite-card-link-handle:hover),
body:not(.auth-required) .layout.canvas-layout .infinite-card-link-zone:has(.infinite-card-link-handle.linking) {
opacity: 1;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-link-handle {
width: 24px;
height: 24px;
border-color: rgba(47, 109, 183, 0.42);
background: rgba(47, 109, 183, 0.16);
box-shadow: none;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-link-handle::before,
body:not(.auth-required) .layout.canvas-layout .infinite-card-link-handle::after {
background: #2f6db7;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel {
border-color: rgba(203, 213, 225, 0.9);
border-radius: 18px;
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.13);
backdrop-filter: blur(18px);
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel::before {
border-bottom-color: rgba(255, 255, 255, 0.96);
}
body:not(.auth-required) .layout.canvas-layout .infinite-inline-panel-head {
border-bottom-color: #e8eef5;
}
body:not(.auth-required) .layout.canvas-layout .infinite-inline-panel-body {
gap: 9px;
}
body:not(.auth-required) .layout.canvas-layout .infinite-inline-references,
body:not(.auth-required) .layout.canvas-layout .infinite-inline-reference-empty {
border-radius: 13px;
background: #f8fbfd;
}
body:not(.auth-required) .layout.canvas-layout .canvas-empty-card {
width: min(650px, calc(100% - 180px));
border-color: rgba(203, 213, 225, 0.88);
border-radius: 24px;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 18px 56px rgba(15, 23, 42, 0.1);
backdrop-filter: blur(18px);
}
body:not(.auth-required) .layout.canvas-layout .canvas-empty-actions button {
border-radius: 12px;
}
body:not(.auth-required) .layout.canvas-layout .workflow-inspector-head {
align-items: center;
padding-bottom: 12px;
border-bottom: 1px solid #e8eef5;
}
body:not(.auth-required) .layout.canvas-layout .workflow-inspector-head h2 {
font-size: 15px;
}
body:not(.auth-required) .layout.canvas-layout .workflow-inspector-body {
gap: 12px;
}
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-search {
display: grid;
gap: 6px;
color: #667085;
font-size: 11px;
font-weight: 850;
}
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-search input {
min-height: 34px;
border-radius: 12px;
}
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-layer-head {
margin-top: 2px;
padding-top: 8px;
border-top: 1px solid #e8eef5;
}
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-layer-list {
gap: 7px;
}
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-layer-item {
min-height: 44px;
border-color: #dbe7f0;
border-radius: 13px;
background: #ffffff;
}
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-layer-item:hover,
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-layer-item.selected {
border-color: rgba(47, 109, 183, 0.38);
background: #eaf2fb;
}
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-tip {
border-color: #dbe7f0;
border-style: solid;
border-radius: 14px;
background: rgba(248, 251, 253, 0.82);
}
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-property-panel {
border-radius: 14px;
background: rgba(248, 251, 253, 0.82);
}
@media (max-width: 1280px) {
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-shell.canvas-studio-shell {
grid-template-columns: minmax(0, 1fr) 260px;
}
}
@media (max-width: 980px) {
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-shell.canvas-studio-shell {
grid-template-columns: 1fr;
}
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-inspector {
display: none;
}
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-main {
border-radius: 20px;
}
body:not(.auth-required) .layout.canvas-layout .canvas-side-dock {
top: 110px;
left: 12px;
}
}
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-shell.canvas-studio-shell {
grid-template-columns: minmax(0, 1fr);
}
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-inspector {
display: none !important;
}
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-main {
border-radius: 20px;
}
body:not(.auth-required) .layout.canvas-layout .canvas-side-dock {
top: 18px;
left: 18px;
display: flex;
flex-direction: row;
align-items: center;
gap: 6px;
padding: 8px;
border-radius: 20px;
}
body:not(.auth-required) .layout.canvas-layout .canvas-dock-button {
width: 38px;
height: 38px;
border-radius: 12px;
}
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-drop-hint {
left: 18px;
}
body:not(.auth-required) .workflow-shell {
--canvas-surface: var(--studio-canvas-surface-light);
--canvas-grid-size-current: 28px;
--canvas-grid-image: var(--studio-canvas-grid-image-light);
--canvas-grid-line-light: var(--studio-canvas-grid-light);
--canvas-grid-line-dark: var(--studio-canvas-grid-dark);
grid-template-columns: minmax(0, 1fr) 286px;
gap: 0;
background: linear-gradient(180deg, #f8fafc 0%, #eef2f6 100%);
}
body:not(.auth-required) .layout.workflow-layout .workflow-main {
position: relative;
display: block;
overflow: hidden;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
body:not(.auth-required) .layout.workflow-layout .workflow-stage-wrap,
body:not(.auth-required) .layout.workflow-layout .workflow-lite-wrap {
background-color: var(--canvas-surface);
background-image: var(--canvas-grid-image);
background-size: var(--workflow-grid-size, var(--canvas-grid-size-current, 28px)) var(--workflow-grid-size, var(--canvas-grid-size-current, 28px));
background-position: var(--workflow-grid-position-x, 0px) var(--workflow-grid-position-y, 0px);
}
body:not(.auth-required) .layout.workflow-layout .workflow-lite-canvas {
background: transparent;
}
body:not(.auth-required) .layout.workflow-layout .workflow-main > .workflow-stage-wrap.workflow-lite-wrap {
position: absolute;
inset: 0;
overflow: hidden;
border: 0;
border-radius: 0;
box-shadow: none;
}
body:not(.auth-required) .layout.workflow-layout .workflow-main > .workflow-status-row {
position: absolute;
z-index: 18;
left: 18px;
bottom: 18px;
width: auto;
max-width: min(760px, calc(100% - 36px));
padding: 7px;
border: 1px solid rgba(213, 220, 229, 0.9);
border-radius: 999px;
background: rgba(255, 255, 255, 0.82);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 24px rgba(15, 23, 42, 0.055);
backdrop-filter: blur(16px);
}
body:not(.auth-required) .layout.workflow-layout .workflow-main > .workflow-status-row .file-summary {
min-height: 32px;
display: inline-flex;
align-items: center;
padding: 0 12px;
border: 0;
border-radius: 999px;
background: rgba(248, 251, 253, 0.86);
white-space: nowrap;
}
body:not(.auth-required) .layout.workflow-layout .workflow-main > .workflow-status-row .workflow-history-actions {
display: inline-flex;
align-items: center;
gap: 7px;
padding-left: 4px;
}
body:not(.auth-required) .layout.workflow-layout .workflow-main > .workflow-status-row .workflow-history-actions button {
min-height: 32px;
border-radius: 999px;
}
body:not(.auth-required) .layout.workflow-layout .workflow-inspector {
align-self: stretch;
height: calc(100% - 24px);
margin: 12px 12px 12px 0;
border: 1px solid rgba(213, 220, 229, 0.9);
border-radius: 20px;
background: rgba(255, 255, 255, 0.86);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 24px rgba(15, 23, 42, 0.055);
backdrop-filter: blur(16px);
}
body:not(.auth-required) .workflow-empty-state {
border-color: rgba(203, 213, 225, 0.82);
border-radius: 18px;
background: rgba(255, 255, 255, 0.88);
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.09);
backdrop-filter: blur(16px);
}
body:not(.auth-required) .layout.canvas-layout .canvas-studio-shell .infinite-canvas-stage,
body:not(.auth-required) .canvas-studio-shell .infinite-canvas-stage {
background-color: var(--canvas-surface);
background-image: var(--canvas-grid-image);
background-size: var(--canvas-grid-size-current, 28px) var(--canvas-grid-size-current, 28px);
}
body:not(.auth-required) .canvas-studio-shell .canvas-board-row,
body:not(.auth-required) .canvas-studio-shell .canvas-side-dock,
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-status-row {
border-color: rgba(213, 220, 229, 0.9);
background: rgba(255, 255, 255, 0.82);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 24px rgba(15, 23, 42, 0.055);
backdrop-filter: blur(16px);
}
body:not(.auth-required) .canvas-studio-shell .infinite-card {
border-color: #dde5ee;
border-radius: 10px;
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 12px 28px rgba(15, 23, 42, 0.07);
}
body:not(.auth-required) .canvas-studio-shell .infinite-card.is-pointer-hover {
transform: translateY(-1px);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 16px 34px rgba(15, 23, 42, 0.09);
}
body:not(.auth-required) .canvas-studio-shell .infinite-card.selected {
border-color: rgba(37, 90, 156, 0.68);
box-shadow: 0 0 0 2px rgba(37, 90, 156, 0.16), 0 16px 34px rgba(15, 23, 42, 0.1);
}
body:not(.auth-required) .canvas-studio-shell .infinite-card-head {
min-height: 34px;
padding: 7px 9px;
border-radius: 9px 9px 0 0;
}
body:not(.auth-required) .canvas-studio-shell .infinite-card-head strong {
color: #ffffff;
font-size: 13px;
font-weight: 900;
}
body:not(.auth-required) .canvas-studio-shell .infinite-card-badge {
width: 20px;
height: 20px;
border-radius: 999px;
font-size: 12px;
}
body:not(.auth-required) .canvas-studio-shell .infinite-card-body {
padding: 9px 10px 10px;
}
body:not(.auth-required) .canvas-studio-shell .infinite-card-field {
grid-template-columns: 64px minmax(0, 1fr);
gap: 7px;
}
body:not(.auth-required) .canvas-studio-shell .infinite-card-body textarea,
body:not(.auth-required) .canvas-studio-shell .infinite-card-body input,
body:not(.auth-required) .canvas-studio-shell .infinite-card-body select {
border-radius: 8px;
font-size: 12px;
}
body:not(.auth-required) .workflow-shell {
--canvas-surface: var(--studio-canvas-surface-light);
--canvas-grid-size-current: 28px;
--canvas-grid-image: var(--studio-canvas-grid-image-light);
--canvas-grid-line-light: var(--studio-canvas-grid-light);
--canvas-grid-line-dark: var(--studio-canvas-grid-dark);
grid-template-columns: minmax(0, 1fr) 286px;
gap: 0;
background: linear-gradient(180deg, #f8fafc 0%, #eef2f6 100%);
}
body.theme-dark:not(.auth-required) .workflow-shell,
body.theme-dark:not(.auth-required) .layout.workflow-layout .workflow-shell {
--canvas-surface: var(--studio-canvas-surface-dark);
--canvas-grid-size-current: 28px;
--canvas-grid-image: var(--studio-canvas-grid-image-dark);
background: linear-gradient(180deg, #0e1726 0%, #0b121f 100%);
}
body:not(.auth-required) .workflow-main {
position: relative;
display: block;
min-height: 0;
overflow: hidden;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
body:not(.auth-required) .workflow-stage-wrap,
body:not(.auth-required) .workflow-lite-wrap {
background-color: var(--canvas-surface);
background-image: var(--canvas-grid-image);
background-size: var(--workflow-grid-size, var(--canvas-grid-size-current, 28px)) var(--workflow-grid-size, var(--canvas-grid-size-current, 28px));
background-position: var(--workflow-grid-position-x, 0px) var(--workflow-grid-position-y, 0px);
}
body:not(.auth-required) .workflow-lite-canvas {
background: transparent;
}
body:not(.auth-required) .workflow-main > .workflow-stage-wrap.workflow-lite-wrap {
position: absolute;
inset: 0;
overflow: hidden;
border: 0;
border-radius: 0;
box-shadow: none;
}
body:not(.auth-required) .workflow-main > .workflow-status-row {
position: absolute;
z-index: 18;
left: 18px;
bottom: 18px;
width: auto;
max-width: min(760px, calc(100% - 36px));
padding: 7px;
border: 1px solid rgba(213, 220, 229, 0.9);
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 24px rgba(15, 23, 42, 0.055);
backdrop-filter: blur(16px);
}
body:not(.auth-required) .workflow-main > .workflow-status-row .file-summary {
min-height: 32px;
display: inline-flex;
align-items: center;
padding: 0 12px;
border: 0;
border-radius: 999px;
background: rgba(248, 251, 253, 0.86);
white-space: nowrap;
}
body:not(.auth-required) .workflow-main > .workflow-status-row .workflow-history-actions {
display: inline-flex;
align-items: center;
gap: 7px;
padding-left: 4px;
}
body:not(.auth-required) .workflow-main > .workflow-status-row .workflow-history-actions button {
min-height: 32px;
border-radius: 999px;
}
body:not(.auth-required) .workflow-inspector {
align-self: stretch;
height: calc(100% - 24px);
margin: 12px 12px 12px 0;
border: 1px solid rgba(213, 220, 229, 0.9);
border-radius: 20px;
background: rgba(255, 255, 255, 0.86);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 24px rgba(15, 23, 42, 0.055);
backdrop-filter: blur(16px);
}
body:not(.auth-required) .workflow-empty-state {
border-color: rgba(203, 213, 225, 0.82);
border-radius: 18px;
background: rgba(255, 255, 255, 0.88);
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.09);
backdrop-filter: blur(16px);
}
body:not(.auth-required) .layout.canvas-layout .canvas-studio-shell .infinite-canvas-stage,
body:not(.auth-required) .canvas-studio-shell .infinite-canvas-stage {
background-color: var(--canvas-surface);
background-image: var(--canvas-grid-image);
background-size: var(--canvas-grid-size-current, 28px) var(--canvas-grid-size-current, 28px);
}
body:not(.auth-required) .canvas-studio-shell .canvas-board-row,
body:not(.auth-required) .canvas-studio-shell .canvas-side-dock,
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-status-row {
border-color: rgba(213, 220, 229, 0.9);
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 24px rgba(15, 23, 42, 0.055);
backdrop-filter: blur(16px);
}
body:not(.auth-required) .canvas-studio-shell .infinite-card {
border-color: #dde5ee;
border-radius: 10px;
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 12px 28px rgba(15, 23, 42, 0.07);
}
body:not(.auth-required) .canvas-studio-shell .infinite-card.is-pointer-hover {
transform: translateY(-1px);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 16px 34px rgba(15, 23, 42, 0.09);
}
body:not(.auth-required) .canvas-studio-shell .infinite-card.selected {
border-color: rgba(37, 90, 156, 0.68);
box-shadow: 0 0 0 2px rgba(37, 90, 156, 0.16), 0 16px 34px rgba(15, 23, 42, 0.1);
}
body:not(.auth-required) .canvas-studio-shell .infinite-card-head {
min-height: 34px;
padding: 7px 9px;
border-radius: 9px 9px 0 0;
}
body:not(.auth-required) .canvas-studio-shell .infinite-card-head strong {
color: #ffffff;
font-size: 13px;
font-weight: 900;
}
body:not(.auth-required) .canvas-studio-shell .infinite-card-badge {
width: 20px;
height: 20px;
border-radius: 999px;
font-size: 12px;
}
body:not(.auth-required) .canvas-studio-shell .infinite-card-body {
padding: 9px 10px 10px;
}
body:not(.auth-required) .canvas-studio-shell .infinite-card-field {
grid-template-columns: 64px minmax(0, 1fr);
gap: 7px;
}
body:not(.auth-required) .canvas-studio-shell .infinite-card-body textarea,
body:not(.auth-required) .canvas-studio-shell .infinite-card-body input,
body:not(.auth-required) .canvas-studio-shell .infinite-card-body select {
border-radius: 8px;
font-size: 12px;
}
@media (max-width: 1280px) {
body:not(.auth-required) .workflow-shell {
grid-template-columns: minmax(0, 1fr) 258px;
}
}
@media (max-width: 980px) {
body:not(.auth-required) .workflow-shell {
grid-template-columns: 1fr;
}
body:not(.auth-required) .workflow-inspector {
display: none;
}
}
.canvas-studio-shell {
--canvas-surface: #f4f7fa;
--canvas-ink: #101828;
--canvas-muted: #667085;
--canvas-line: rgba(184, 197, 214, 0.42);
--canvas-line-strong: rgba(130, 152, 180, 0.34);
--canvas-glass: rgba(255, 255, 255, 0.82);
--canvas-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05), 0 12px 28px rgba(15, 23, 42, 0.07);
--canvas-grid-size-current: 28px;
--canvas-grid-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M0 .5H28M.5 0V28' fill='none' stroke='%23b8c5d6' stroke-opacity='.42' stroke-width='1'/%3E%3C/svg%3E");
--canvas-grid-line-light: rgba(184, 197, 214, 0.42);
--canvas-grid-line-dark: var(--studio-canvas-grid-dark, rgba(255, 255, 255, 0.08));
background: linear-gradient(180deg, #f8fafc 0%, #eef2f6 100%);
}
body:not(.auth-required) .layout.canvas-layout .canvas-studio-shell .infinite-canvas-stage,
.canvas-studio-shell .infinite-canvas-stage {
background-color: var(--canvas-surface);
background-image: var(--canvas-grid-image);
background-size: var(--canvas-grid-size-current, 28px) var(--canvas-grid-size-current, 28px);
background-position: 0 0;
}
.canvas-studio-shell .canvas-side-dock {
top: 92px;
left: 18px;
border-radius: 22px;
background: rgba(255, 255, 255, 0.88);
box-shadow: 0 16px 42px rgba(15, 23, 42, 0.08);
}
.canvas-studio-shell .canvas-dock-button {
width: 44px;
height: 44px;
border-radius: 14px;
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}
.canvas-studio-shell .canvas-dock-button.primary-action {
background: linear-gradient(135deg, #2f6db7 0%, #2f6db7 100%);
font-size: 22px;
}
.canvas-studio-shell .canvas-ai-composer {
top: auto;
right: auto;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
width: min(880px, calc(100% - 126px));
max-width: 880px;
max-height: min(34vh, 240px);
grid-template-columns: 190px minmax(260px, 1fr);
grid-template-rows: auto auto auto;
gap: 10px 12px;
padding: 11px;
border-radius: 24px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 18px 56px rgba(15, 23, 42, 0.13);
overflow: auto;
}
.canvas-studio-shell .canvas-composer-head {
grid-column: 1 / -1;
align-items: center;
padding-bottom: 4px;
border-bottom: 0;
}
.canvas-studio-shell .canvas-composer-head strong {
font-size: 15px;
}
.canvas-studio-shell .canvas-composer-head small {
display: none;
}
.canvas-studio-shell .canvas-composer-ref-drop {
grid-row: 2 / span 2;
min-height: 112px;
border-radius: 16px;
}
.canvas-studio-shell .canvas-prompt-box {
min-width: 0;
}
.canvas-studio-shell .canvas-prompt-box textarea {
min-height: 66px;
border-radius: 14px;
resize: vertical;
}
.canvas-studio-shell .canvas-generate-options {
grid-template-columns: 118px minmax(180px, 1fr) repeat(4, minmax(82px, 112px)) 128px;
gap: 8px;
}
.canvas-studio-shell .canvas-generate-options label {
min-width: 0;
}
.canvas-studio-shell .canvas-generate-options .primary {
grid-column: auto;
min-height: 38px;
}
.canvas-studio-shell .canvas-composer-result {
grid-column: 2 / -1;
display: none;
}
.canvas-studio-shell .infinite-canvas-drop-hint {
left: 86px;
bottom: 104px;
background: rgba(255, 255, 255, 0.78);
}
.canvas-studio-shell .canvas-empty-card {
width: min(680px, calc(100% - 220px));
border-radius: 28px;
box-shadow: 0 18px 56px rgba(15, 23, 42, 0.12);
}
.canvas-studio-shell .canvas-empty-card > strong {
font-size: 22px;
}
.canvas-studio-shell .canvas-empty-actions {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.canvas-studio-shell .canvas-empty-actions button {
border-radius: 14px;
background: #eaf2fb;
color: #2f6db7;
}
.canvas-studio-shell .infinite-card {
border-color: #dde5ee;
border-radius: 10px;
background: rgba(255, 255, 255, 0.96);
box-shadow: var(--canvas-shadow-card);
transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.canvas-studio-shell .infinite-card.is-pointer-hover {
transform: translateY(-1px);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 16px 34px rgba(15, 23, 42, 0.09);
}
.canvas-studio-shell .infinite-card.selected {
border-color: rgba(37, 90, 156, 0.68);
box-shadow: 0 0 0 2px rgba(37, 90, 156, 0.16), 0 16px 34px rgba(15, 23, 42, 0.1);
}
.canvas-studio-shell .infinite-card.selected::before {
content: "";
position: absolute;
inset: -4px;
z-index: -1;
border: 1px solid rgba(37, 90, 156, 0.34);
border-radius: calc(var(--radius, 10px) + 5px);
background: transparent;
box-shadow: 0 0 0 4px rgba(37, 90, 156, 0.06);
pointer-events: none;
animation: none;
}
.canvas-studio-shell .infinite-card.running {
border-color: #0ea5e9;
box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.24), 0 24px 54px rgba(14, 165, 233, 0.2);
}
.canvas-studio-shell .infinite-card.running .infinite-card-head {
background-image: linear-gradient(90deg, rgba(14, 165, 233, 0.06), rgba(14, 165, 233, 0.12), rgba(14, 165, 233, 0.06));
background-size: 100% 100%;
animation: none;
}
@keyframes infiniteCanvasSelectedPulse {
0%, 100% {
opacity: 0.74;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.01);
}
}
@keyframes infiniteCanvasHeadSweep {
from {
background-position: 180% 0;
}
to {
background-position: -180% 0;
}
}
.canvas-studio-shell .infinite-card-head {
min-height: 34px;
padding: 7px 9px;
border-radius: 9px 9px 0 0;
}
.canvas-studio-shell .infinite-card-badge {
width: 20px;
height: 20px;
border-radius: 7px;
}
.canvas-studio-shell .infinite-card-link-handle {
width: 22px;
height: 22px;
flex-basis: 22px;
cursor: crosshair;
}
.canvas-studio-shell .infinite-card-link-zone {
top: 50%;
bottom: auto;
}
.canvas-studio-shell .infinite-card-body {
padding: 10px;
}
.canvas-studio-shell .infinite-card[data-canvas-type="media"] {
border-radius: 14px;
}
.canvas-studio-shell .infinite-card[data-canvas-type="media"] .infinite-card-head {
background: linear-gradient(135deg, #2f6db7 0%, #255a9c 100%);
}
.canvas-studio-shell .infinite-card-media img,
.canvas-studio-shell .infinite-card-media video {
display: block;
width: 100%;
height: auto;
max-height: 460px;
border: 0;
border-radius: 14px;
object-fit: contain;
background: #f7fafc;
}
.canvas-studio-shell .infinite-card-media-box {
min-height: 172px;
border-radius: 16px;
background: rgba(248, 251, 253, 0.92);
}
.canvas-studio-shell .infinite-card-media-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.canvas-studio-shell .infinite-card-media-grid button {
min-height: 82px;
border-radius: 12px;
transition: transform 0.12s ease, border-color 0.12s ease;
}
.canvas-studio-shell .infinite-card-media-grid button:hover {
transform: translateY(-1px);
border-color: rgba(47, 109, 183, 0.42);
}
.canvas-studio-shell .infinite-card-media-grid img,
.canvas-studio-shell .infinite-card-media-grid video {
height: 82px;
max-height: 82px;
}
.canvas-studio-shell .infinite-card.result-grid-card,
body:not(.auth-required) .canvas-studio-shell .infinite-card.result-grid-card {
border-color: var(--line, #e2e8f0) !important;
background: color-mix(in srgb, var(--panel, #ffffff) 92%, transparent) !important;
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16) !important;
border-radius: 18px;
outline: 0 !important;
overflow: visible !important;
}
body.theme-dark .canvas-studio-shell .infinite-card.result-grid-card {
background: color-mix(in srgb, #1b1f28 94%, transparent) !important;
border-color: #454c5c !important;
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42) !important;
}
.canvas-studio-shell .infinite-card.result-grid-card:hover,
body:not(.auth-required) .canvas-studio-shell .infinite-card.result-grid-card:hover {
transform: none;
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16) !important;
}
body.theme-dark .canvas-studio-shell .infinite-card.result-grid-card:hover {
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42) !important;
}
.canvas-studio-shell .infinite-card.result-grid-card.selected,
body:not(.auth-required) .canvas-studio-shell .infinite-card.result-grid-card.selected {
border-color: var(--line, #e2e8f0) !important;
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16) !important;
}
body.theme-dark .canvas-studio-shell .infinite-card.result-grid-card.selected {
border-color: #454c5c !important;
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42) !important;
}
.canvas-studio-shell .infinite-card.result-grid-card.selected::before {
display: none;
}
.canvas-studio-shell .infinite-card.result-grid-card > .infinite-card-head,
body:not(.auth-required) .canvas-studio-shell .infinite-card.result-grid-card > .infinite-card-head,
body:not(.auth-required) .layout.canvas-layout .infinite-card.result-grid-card > .infinite-card-head {
position: absolute;
z-index: 8;
top: -38px;
bottom: auto;
left: 0;
right: auto;
display: flex;
justify-content: flex-end;
align-items: center;
width: var(--result-cell-w, calc((100% - var(--result-col-gap, 18px)) * 0.5)); 
max-width: none;
min-height: 32px;
height: 32px;
padding: 0;
border-radius: 12px;
background: transparent;
pointer-events: none;
}
.canvas-studio-shell .infinite-card.result-grid-card > .infinite-card-head > :not(.infinite-card-results-toggle) {
display: none;
}
.canvas-studio-shell .infinite-card.result-grid-card .infinite-card-results-toggle,
body:not(.auth-required) .canvas-studio-shell .infinite-card.result-grid-card .infinite-card-results-toggle {
pointer-events: auto;
}
.canvas-studio-shell .infinite-card.result-grid-card > .infinite-card-body,
body:not(.auth-required) .canvas-studio-shell .infinite-card.result-grid-card > .infinite-card-body {
padding: 0 !important;
overflow: visible !important;
background: transparent !important;
}
.canvas-studio-shell .infinite-card-drop-zone {
min-height: 150px;
border-radius: 14px;
}
.canvas-studio-shell .infinite-card-field {
grid-template-columns: 68px minmax(0, 1fr);
}
.canvas-studio-shell .infinite-card-body textarea,
.canvas-studio-shell .infinite-card-body input,
.canvas-studio-shell .infinite-card-body select {
border-radius: 10px;
}
.canvas-studio-shell .infinite-canvas-link {
stroke: var(--wire-fx-line, #6f91b8);
stroke-width: calc(2.6px * var(--canvas-link-zoom, 1));
}
.canvas-studio-shell .infinite-canvas-link-hit {
stroke-width: 24;
}
.canvas-studio-shell .infinite-canvas-link:hover,
.canvas-studio-shell .infinite-canvas-link.hovered,
.canvas-studio-shell .infinite-canvas-link.selected,
.canvas-studio-shell .infinite-canvas-link.energized {
stroke: var(--wire-fx-line-selected, #3478a6);
stroke-width: calc(2.75px * var(--canvas-link-zoom, 1));
}
.canvas-studio-shell .infinite-canvas-status-row {
left: 18px;
bottom: 18px;
}
body:not(.auth-required) .layout.canvas-layout .context-menu {
min-width: 300px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16);
}
body:not(.auth-required) .layout.canvas-layout .context-menu.canvas-item-menu {
width: 188px;
min-width: 188px;
max-width: 188px;
padding: 6px;
border-radius: 14px;
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.13);
}
body:not(.auth-required) .layout.canvas-layout .context-menu.canvas-item-menu button {
min-height: 34px;
padding: 7px 8px;
gap: 8px;
border-radius: 10px;
font-size: 12px;
}
body:not(.auth-required) .layout.canvas-layout .context-menu.canvas-item-menu .context-menu-heading {
margin: 2px 2px 4px;
padding: 5px 5px 6px;
font-size: 12px;
min-width: 0;
}
body:not(.auth-required) .layout.canvas-layout .context-menu.canvas-item-menu .context-menu-heading > span:last-child,
body:not(.auth-required) .layout.canvas-layout .context-menu.canvas-item-menu .context-title-line > span:first-child,
body:not(.auth-required) .layout.canvas-layout .context-menu.canvas-item-menu .context-description {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body:not(.auth-required) .layout.canvas-layout .context-menu.canvas-item-menu .context-menu-heading > span:last-child {
display: block;
min-width: 0;
}
body:not(.auth-required) .layout.canvas-layout .context-menu.canvas-item-menu .context-label {
min-width: 0;
flex: 1 1 auto;
overflow: hidden;
}
body:not(.auth-required) .layout.canvas-layout .context-menu.canvas-item-menu .context-copy {
min-width: 0;
overflow: hidden;
}
body:not(.auth-required) .layout.canvas-layout .context-menu.canvas-item-menu .context-title-line {
display: block;
min-width: 0;
}
body:not(.auth-required) .layout.canvas-layout .context-menu.canvas-item-menu .context-title-line > span:first-child {
display: block;
max-width: 112px;
}
body:not(.auth-required) .layout.canvas-layout .context-menu.canvas-item-menu .context-description {
max-width: 112px;
font-size: 10.5px;
}
body:not(.auth-required) .layout.canvas-layout .context-menu.canvas-item-menu .context-color-badge {
width: 22px;
height: 22px;
flex-basis: 22px;
border-radius: 7px;
font-size: 11px;
}
body:not(.auth-required) .layout.canvas-layout .context-menu.canvas-item-menu .context-icon {
width: 22px;
height: 22px;
flex-basis: 22px;
border-radius: 7px;
}
body:not(.auth-required) .layout.canvas-layout .context-menu.canvas-item-menu .context-icon svg {
width: 13px;
height: 13px;
}
body:not(.auth-required) .layout.canvas-layout .context-menu.canvas-item-menu .shortcut-hint {
font-size: 11px;
}
body:not(.auth-required) .context-menu.canvas-item-menu {
width: 188px !important;
min-width: 188px !important;
max-width: 188px !important;
}
body:not(.auth-required) .context-menu.canvas-item-menu .context-title-line > span:first-child,
body:not(.auth-required) .context-menu.canvas-item-menu .context-description {
max-width: 112px !important;
}
body:not(.auth-required) .context-menu.canvas-item-menu .context-menu-heading > span:last-child {
display: -webkit-box !important;
max-width: 112px !important;
max-height: 2.6em;
overflow: hidden;
white-space: normal !important;
line-height: 1.3;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
body:not(.auth-required) .context-menu.canvas-add-menu {
min-width: 280px;
max-width: 310px;
padding: 7px;
border-color: rgba(203, 213, 225, 0.88);
border-radius: 18px;
background: rgba(255, 255, 255, 0.97);
box-shadow: 0 18px 44px rgba(15, 23, 42, 0.15);
}
body:not(.auth-required) .context-menu.canvas-add-menu button {
min-height: 34px;
padding: 6px 8px;
border-radius: 10px;
font-size: 12px;
}
body:not(.auth-required) .context-menu.canvas-add-menu .context-menu-heading {
margin: 6px 4px 4px;
padding: 0 2px;
border-bottom: 0;
color: #667085;
font-size: 12px;
font-weight: 860;
}
body:not(.auth-required) .context-menu.canvas-add-menu .context-menu-heading:first-child {
margin-top: 2px;
color: #344054;
font-size: 14px;
}
body:not(.auth-required) .layout.canvas-layout .context-menu button.module-create {
min-height: 42px;
margin: 3px 0;
border: 1px solid #dfe8f2;
border-left: 4px solid var(--menu-accent, #2f6db7);
border-radius: 12px !important;
background: #ffffff;
}
body:not(.auth-required) .context-menu.canvas-add-menu button.module-create {
min-height: 43px;
margin: 2px 0;
padding: 6px 8px;
border-left-width: 4px;
border-radius: 13px !important;
background: rgba(248, 251, 253, 0.92);
}
body:not(.auth-required) .context-menu.canvas-add-menu .context-color-badge {
width: 26px;
height: 26px;
flex-basis: 26px;
border-radius: 8px;
font-size: 12px;
}
body:not(.auth-required) .context-menu.canvas-add-menu .context-label {
gap: 9px;
}
body:not(.auth-required) .context-menu.canvas-add-menu .context-title-line {
font-size: 12px;
}
body:not(.auth-required) .context-menu.canvas-add-menu .context-description {
font-size: 10.5px;
line-height: 1.15;
}
body:not(.auth-required) .context-menu.canvas-add-menu .shortcut-hint {
font-size: 11px;
}
body:not(.auth-required) .layout.canvas-layout .context-menu button.module-create:hover {
background: color-mix(in srgb, var(--menu-accent, #2f6db7) 9%, #ffffff);
}
@media (max-width: 1300px) {
.canvas-studio-shell .canvas-board-row {
width: min(520px, calc(100vw - 160px));
}
.canvas-studio-shell .canvas-ai-composer {
width: calc(100% - 112px);
grid-template-columns: 190px minmax(240px, 1fr);
}
.canvas-studio-shell .canvas-generate-options {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.canvas-studio-shell .canvas-generate-options .primary {
grid-column: 1 / -1;
}
}
@media (max-width: 980px) {
.canvas-studio-shell .canvas-ai-composer {
left: 70px;
right: 10px;
bottom: 64px;
width: auto;
transform: none;
grid-template-columns: 1fr;
}
.canvas-studio-shell .canvas-composer-ref-drop,
.canvas-studio-shell .canvas-composer-result {
grid-column: 1 / -1;
grid-row: auto;
}
.canvas-studio-shell .canvas-generate-options {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.canvas-studio-shell .canvas-ai-composer {
grid-template-columns: 180px minmax(260px, 1fr);
grid-template-rows: auto auto;
max-height: none;
overflow: visible;
}
.canvas-studio-shell .canvas-ai-composer {
display: none !important;
}
.canvas-studio-shell .canvas-composer-head {
display: none;
}
.canvas-studio-shell .canvas-composer-ref-drop {
grid-column: 1;
grid-row: 1 / span 2;
min-height: 136px;
}
.canvas-studio-shell .canvas-prompt-box {
grid-column: 2;
grid-row: 1;
}
.canvas-studio-shell .canvas-prompt-box textarea {
min-height: 62px;
}
.canvas-studio-shell .canvas-generate-options {
grid-column: 2;
grid-row: 2;
display: flex;
flex-wrap: wrap;
gap: 7px;
align-items: end;
}
.canvas-studio-shell .canvas-generate-options label {
flex: 1 1 88px;
}
.canvas-studio-shell .canvas-generate-options label:has(#canvasGenerateModel) {
flex-basis: 180px;
}
.canvas-studio-shell .canvas-generate-options label:has(#canvasGenerateCount),
.canvas-studio-shell .canvas-generate-options label:has(#canvasGenerateDuration) {
flex: 0 0 78px;
}
.canvas-studio-shell .canvas-generate-options .primary {
flex: 0 0 122px;
min-height: 36px;
}
@media (max-width: 1300px) {
.canvas-studio-shell .canvas-ai-composer {
grid-template-columns: 170px minmax(250px, 1fr);
}
.canvas-studio-shell .canvas-generate-options {
display: flex;
grid-template-columns: none;
}
.canvas-studio-shell .canvas-generate-options .primary {
grid-column: auto;
}
}
.workflow-shell {
display: grid;
grid-template-columns: minmax(0, 1fr);
height: 100%;
min-height: 0;
border: 0;
border-radius: 0;
overflow: hidden;
}
.workflow-sidebar,
.workflow-inspector {
min-height: 0;
padding: 14px;
background: #fbfcfe;
overflow: auto;
}
.workflow-sidebar {
display: none;
}
.workflow-inspector {
border-left: 1px solid var(--border);
}
.workflow-head,
.workflow-inspector-head,
.workflow-status-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.workflow-head p {
margin-top: 4px;
color: var(--muted);
line-height: 1.45;
}
.workflow-select-label,
.workflow-library-filter {
margin-top: 14px;
}
.workflow-actions,
.workflow-library-filter {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-top: 10px;
}
.workflow-library-filter {
grid-template-columns: 1fr 110px;
}
.workflow-module-library {
display: grid;
gap: 10px;
margin-top: 12px;
max-height: calc(100vh - 420px);
overflow: auto;
padding-right: 4px;
}
.workflow-module-card {
display: grid;
grid-template-columns: 34px 1fr;
gap: 10px;
align-items: start;
border: 1px solid var(--border);
border-radius: 8px;
background: #ffffff;
padding: 10px;
cursor: grab;
text-align: left;
}
.workflow-module-card:hover {
border-color: #8fb8d8;
box-shadow: 0 6px 18px rgba(28, 52, 84, 0.08);
}
.workflow-module-icon {
width: 30px;
height: 30px;
display: grid;
place-items: center;
border-radius: 8px;
background: #e8f3ee;
color: var(--accent-strong);
font-weight: 800;
}
.workflow-module-card[data-category="参数模块"] .workflow-module-icon,
.command-palette-item[data-category="参数模块"] .workflow-module-icon,
.workflow-node[data-category="参数模块"] .workflow-node-type {
background: #e9f1fb;
color: #245a9a;
}
.workflow-module-card[data-category="工具模块"] .workflow-module-icon,
.command-palette-item[data-category="工具模块"] .workflow-module-icon,
.workflow-node[data-category="工具模块"] .workflow-node-type {
background: #f0e9ff;
color: #6b3fd4;
}
.workflow-module-card[data-category="工作模块"] .workflow-module-icon,
.command-palette-item[data-category="工作模块"] .workflow-module-icon,
.workflow-node[data-category="工作模块"] .workflow-node-type {
background: #eaf7ed;
color: #1f7a4d;
}
.workflow-module-card[data-category="输出模块"] .workflow-module-icon,
.command-palette-item[data-category="输出模块"] .workflow-module-icon,
.workflow-node[data-category="输出模块"] .workflow-node-type {
background: #fff4df;
color: #995f00;
}
.workflow-module-card[data-category="通用模块"] .workflow-module-icon,
.command-palette-item[data-category="通用模块"] .workflow-module-icon,
.workflow-node[data-category="通用模块"] .workflow-node-type {
background: #f2f4f7;
color: #475467;
}
.workflow-module-title {
font-weight: 760;
}
.workflow-module-desc {
color: var(--muted);
font-size: 12px;
line-height: 1.35;
margin-top: 3px;
}
.workflow-main {
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
position: relative;
height: 100%;
min-height: 0;
min-width: 0;
}
.workflow-dirty-badge {
min-height: 32px;
display: inline-flex;
align-items: center;
border: 1px solid var(--border);
border-radius: 8px;
padding: 0 10px;
background: #f8fafc;
color: var(--muted);
font-size: 12px;
font-weight: 800;
}
.workflow-menu-drag-ghost {
position: fixed;
z-index: var(--z-drag-ghost);
display: inline-grid;
grid-template-columns: 24px minmax(0, auto);
align-items: center;
gap: 8px;
max-width: 220px;
padding: 7px 10px;
border: 1px solid color-mix(in srgb, var(--menu-accent, #2f6db7) 28%, #dbe5f0);
border-radius: 9px;
background: rgba(255, 255, 255, 0.96);
color: #172033;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
font-size: 13px;
font-weight: 760;
pointer-events: none;
transform: translate3d(0, 0, 0);
}
.workflow-menu-drag-badge {
display: inline-grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: 7px;
background: var(--menu-accent, #2f6db7);
color: #ffffff;
font-size: 12px;
font-weight: 850;
}
.workflow-stage-wrap.workflow-lite-wrap.workflow-menu-drop-ready {
outline: 2px solid rgba(47, 109, 183, 0.38);
outline-offset: -2px;
}
.workflow-dirty-badge.dirty {
border-color: #f2c58c;
background: #fff7ed;
color: #9a5b00;
}
.workflow-dirty-badge.clean {
border-color: #b9cfe8;
background: #eaf2fb;
color: #2563a7;
}
.workflow-stage-wrap {
position: relative;
min-height: 0;
overflow: auto;
touch-action: none;
overscroll-behavior: none;
background-color: var(--canvas-surface, var(--studio-canvas-surface-light, #f4f7fa));
background-image: var(--canvas-grid-image, var(--studio-canvas-grid-image-light));
background-size: var(--workflow-grid-size, var(--canvas-grid-size-current, 28px)) var(--workflow-grid-size, var(--canvas-grid-size-current, 28px));
background-position: var(--workflow-grid-position-x, 0px) var(--workflow-grid-position-y, 0px);
}
.workflow-lite-wrap {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
background-color: var(--canvas-surface, var(--studio-canvas-surface-light, #f4f7fa));
background-image: var(--canvas-grid-image, var(--studio-canvas-grid-image-light));
background-size: var(--workflow-grid-size, var(--canvas-grid-size-current, 28px)) var(--workflow-grid-size, var(--canvas-grid-size-current, 28px));
background-position: var(--workflow-grid-position-x, 0px) var(--workflow-grid-position-y, 0px);
}
body:not(.auth-required) .layout.workflow-layout .workflow-stage-wrap.workflow-grid-layer-ready,
body:not(.auth-required) .layout.workflow-layout .workflow-lite-wrap.workflow-grid-layer-ready,
body:not(.auth-required) .workflow-stage-wrap.workflow-grid-layer-ready,
body:not(.auth-required) .workflow-lite-wrap.workflow-grid-layer-ready,
.workflow-stage-wrap.workflow-grid-layer-ready,
.workflow-lite-wrap.workflow-grid-layer-ready {
background-image: none;
}
.workflow-canvas-grid {
position: absolute;
inset: -256px;
z-index: 0;
pointer-events: none;
background-image: var(--canvas-grid-image, var(--studio-canvas-grid-image-light));
background-size: var(--workflow-grid-size, var(--canvas-grid-size-current, 28px)) var(--workflow-grid-size, var(--canvas-grid-size-current, 28px));
background-position: var(--workflow-grid-position-x, 0px) var(--workflow-grid-position-y, 0px);
transform-origin: 256px 256px;
}
.workflow-lite-wrap.workflow-template-drop-target::after {
content: "松开后添加完整工作流";
position: absolute;
inset: 14px;
z-index: 5;
display: grid;
place-items: center;
border: 2px dashed rgba(47, 109, 183, 0.55);
border-radius: 18px;
background: rgba(244, 249, 255, 0.72);
backdrop-filter: blur(3px);
color: #255a9c;
font-size: 16px;
font-weight: 800;
pointer-events: none;
}
.workflow-lite-canvas {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
display: block;
flex: none;
outline: none;
touch-action: none;
cursor: default !important;
z-index: 1;
background: transparent;
}
.workflow-lite-canvas:active {
cursor: default !important;
}
.workflow-lite-wrap.workflow-viewport-interacting > .workflow-lite-canvas {
transform-origin: 0 0;
backface-visibility: hidden;
will-change: transform;
}
.workflow-lite-wrap.workflow-viewport-interacting > :is(
.workflow-media-overlay,
.workflow-selected-wire-fx
) {
pointer-events: none !important;
}
.workflow-lite-wrap.workflow-viewport-interacting > .workflow-selected-wire-fx {
visibility: hidden !important;
}
.workflow-lite-wrap.workflow-viewport-interacting > .workflow-group-layer,
.infinite-canvas-stage.canvas-interacting > .infinite-canvas-group-layer {
overflow: visible;
}
.workflow-lite-wrap.workflow-viewport-interacting ~ .workflow-selection-overlay .canvas-selection-toolbar {
visibility: hidden !important;
pointer-events: none !important;
}
.workflow-lite-wrap.workflow-viewport-interacting .infinite-canvas-link-pulse {
animation-play-state: paused !important;
}
.workflow-lite-wrap.workflow-node-interacting > .workflow-selected-wire-fx {
visibility: hidden !important;
pointer-events: none !important;
}
.workflow-lite-wrap.workflow-node-interacting > .workflow-media-overlay {
pointer-events: none !important;
}
.workflow-lite-wrap.workflow-node-interacting ~ .workflow-selection-overlay .canvas-selection-toolbar {
visibility: hidden !important;
pointer-events: none !important;
}
.workflow-media-overlay {
position: absolute;
inset: 0;
z-index: 2;
overflow: hidden;
pointer-events: none;
}
.workflow-media-overlay-world {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
transform-origin: 0 0;
will-change: transform;
}
.workflow-media-overlay-node {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
transform-origin: 0 0;
}
.workflow-selected-wire-fx {
position: absolute;
inset: 0;
z-index: 1;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
contain: strict;
}
.workflow-selected-wire-fx:not(.is-active) {
display: none;
}
.workflow-selected-wire-fx.is-viewport-stale {
display: none !important;
}
.workflow-selected-wire-fx path {
pointer-events: none;
}
.workflow-selected-wire-fx .infinite-canvas-link.energized {
stroke-width: calc(2.9px * var(--canvas-link-zoom, 1));
}
.workflow-selected-wire-fx .infinite-canvas-link-pulse {
stroke-width: calc(1.28px * var(--canvas-link-zoom, 1));
opacity: 1;
}
.workflow-media-overlay-zone {
position: absolute;
display: block;
box-sizing: border-box;
padding: 0;
border: 0;
outline: 1px solid transparent;
outline-offset: -1px;
border-radius: 8px;
pointer-events: none;
}
.workflow-media-overlay-zone.drag-over {
outline-color: #2f6db7;
background: rgba(47, 109, 183, 0.08);
}
.workflow-media-overlay-empty-hit {
position: absolute;
inset: 0;
pointer-events: auto;
}
.workflow-media-overlay-download-hit {
position: absolute;
z-index: 4;
display: block;
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
border-radius: 6px;
appearance: none;
background: transparent;
cursor: pointer;
pointer-events: auto;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.workflow-media-overlay-download-hit:focus-visible {
outline: 2px solid #2f6db7;
outline-offset: 1px;
}
.workflow-media-overlay-thumb {
position: relative;
width: 56px;
height: 56px;
flex: 0 0 56px;
overflow: hidden;
border: 1px solid transparent;
border-radius: 7px;
background: transparent;
cursor: grab;
pointer-events: auto;
touch-action: manipulation;
}
.workflow-media-overlay-remove {
z-index: 5 !important;
}
.workflow-media-overlay-thumb:active {
cursor: grabbing;
}
.workflow-media-overlay-thumb:hover {
border-color: rgba(47, 109, 183, 0.45);
background: rgba(47, 109, 183, 0.04);
}
.workflow-media-overlay-thumb.is-media-ingress {
cursor: default;
border-color: transparent;
}
.workflow-media-ingress-overlay {
position: absolute;
inset: 0;
display: grid;
place-items: center;
overflow: hidden;
border-radius: inherit;
color: #fff;
background: rgba(47, 109, 183, 0.42);
pointer-events: none;
}
.workflow-media-ingress-overlay::before {
width: 42%;
min-width: 14px;
aspect-ratio: 1;
border-radius: 50%;
background: conic-gradient(#fff calc(var(--workflow-ingress-progress, 0) * 1turn), rgba(255, 255, 255, 0.38) 0);
content: "";
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
}
.workflow-media-ingress-overlay > span {
position: absolute;
font-size: clamp(8px, 0.68em, 11px);
font-weight: 800;
line-height: 1;
}
.workflow-media-ingress-overlay:is(.is-queued, .is-checking)::before {
background: conic-gradient(from 0deg, transparent 0 18%, #fff 18% 72%, transparent 72% 100%);
animation: workflow-media-ingress-spin 0.9s linear infinite;
}
.workflow-media-ingress-overlay.is-error {
background: rgba(180, 35, 24, 0.42);
pointer-events: none;
}
@keyframes workflow-media-ingress-spin {
to { transform: rotate(1turn); }
}
@media (prefers-reduced-motion: reduce) {
.workflow-media-ingress-overlay:is(.is-queued, .is-checking)::before { animation: none; }
}
.workflow-media-overlay-thumb.has-video-player > video[data-canvas-video-player] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
display: block;
background: transparent;
pointer-events: none;
}
.workflow-media-overlay-thumb.has-video-player > .infinite-card-video-controls {
pointer-events: auto;
}
.workflow-media-overlay-drag-ghost {
position: fixed;
z-index: var(--z-drag-ghost);
width: 56px;
height: 56px;
overflow: hidden;
border: 1px solid #2f6db7;
border-radius: 8px;
background: #f7fafd;
box-shadow: 0 10px 24px rgba(20, 31, 48, 0.14);
opacity: 0.8; 
pointer-events: none;
transform: translate(-50%, -50%);
display: grid;
place-items: center;
color: var(--accent-strong);
font-size: 12px;
font-weight: 800;
}
.workflow-media-overlay-drag-ghost img,
.workflow-media-overlay-drag-ghost video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.workflow-media-overlay-drag-ghost.is-blank-stream {
gap: 4px;
border-color: rgba(47, 109, 183, 0.45);
background: linear-gradient(180deg, #f8fbff 0%, #eaf3ff 100%);
color: #215f9d;
font-size: 11px;
line-height: 1;
}
.workflow-blank-stream-glyph {
display: grid;
width: 24px;
height: 24px;
place-items: center;
border: 1px solid rgba(47, 109, 183, 0.24);
border-radius: 999px;
background: #ffffff;
color: #2f6db7;
font-size: 18px;
font-weight: 850;
}
.legacy-workflow-stage[hidden] {
display: none;
}
.workflow-stage {
position: relative;
width: 2200px;
height: 1400px;
transform-origin: 0 0;
text-rendering: geometricPrecision;
}
.workflow-edges,
.workflow-nodes {
position: absolute;
inset: 0;
}
.workflow-edges {
pointer-events: none;
overflow: visible;
}
.workflow-edge-path {
fill: none;
stroke: #62748e;
stroke-width: 3;
}
.workflow-edge-path.selected {
stroke: var(--accent);
stroke-width: 4;
}
.workflow-nodes {
pointer-events: none;
}
.workflow-node {
position: absolute;
width: 230px;
min-height: 116px;
border: 1px solid #d8e1ec;
border-radius: 8px;
background: #ffffff;
box-shadow: 0 10px 24px rgba(20, 31, 48, 0.12);
overflow: hidden;
pointer-events: auto;
user-select: none;
-webkit-font-smoothing: antialiased;
backface-visibility: hidden;
}
.workflow-node.selected {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(47, 109, 183, 0.2), 0 14px 30px rgba(20, 31, 48, 0.18);
}
.workflow-node.disabled {
border-style: dashed;
opacity: 0.7;
box-shadow: none;
}
.workflow-node-header {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
padding: 9px 11px;
background: var(--accent);
color: #ffffff;
cursor: move;
}
.workflow-node[data-category="参数模块"] .workflow-node-header {
background: #2f67b2;
}
.workflow-node[data-category="工具模块"] .workflow-node-header {
background: #7f56d9;
}
.workflow-node[data-category="工作模块"] .workflow-node-header {
background: var(--accent);
}
.workflow-node[data-category="输出模块"] .workflow-node-header {
background: #b54708;
}
.workflow-node[data-category="通用模块"] .workflow-node-header {
background: #667085;
}
.workflow-node.disabled .workflow-node-header {
background: #98a2b3;
}
.workflow-node-title {
font-weight: 800;
color: #ffffff;
font-size: 14px;
letter-spacing: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.workflow-node-badges {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 5px;
min-width: 0;
}
.workflow-node-state {
border-radius: 999px;
padding: 3px 6px;
font-size: 12px;
background: rgba(255, 255, 255, 0.18);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.24);
white-space: nowrap;
}
.workflow-node-type {
border-radius: 999px;
padding: 3px 7px;
font-size: 12px;
background: rgba(255, 255, 255, 0.18);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.24);
white-space: nowrap;
}
.workflow-node .workflow-node-header .workflow-node-type,
.workflow-node .workflow-node-header .workflow-node-state {
background: rgba(255, 255, 255, 0.18);
color: #ffffff;
border-color: rgba(255, 255, 255, 0.24);
}
.workflow-node-body {
display: grid;
gap: 8px;
padding: 10px 11px 11px;
background: #ffffff;
}
.workflow-node.disabled .workflow-node-body {
background: #f8fafc;
}
.workflow-node-summary {
color: var(--muted);
font-size: 12px;
line-height: 1.35;
max-height: 38px;
overflow: hidden;
}
.workflow-port-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.workflow-port-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.workflow-port {
border: 1px solid #d5dee9;
background: #ffffff;
color: #344054;
border-radius: 999px;
padding: 4px 8px;
font-size: 12px;
cursor: crosshair;
line-height: 1;
}
.workflow-port.output {
border-color: #9dbfe2;
background: #f1f7ff;
color: #245a9a;
}
.workflow-port.input {
border-color: #a9c8e8;
background: #eef5ff;
color: var(--accent);
}
.workflow-port.connecting {
outline: 3px solid rgba(47, 109, 183, 0.2);
}
.workflow-empty-state {
position: absolute;
left: 50%;
top: 45%;
transform: translate(-50%, -50%);
color: var(--muted);
border: 1px dashed #b8c2d2;
border-radius: 8px;
background: rgba(255, 255, 255, 0.9);
padding: 18px 22px;
}
.workflow-stage-wrap[data-render-state="ready"][data-empty="false"] .workflow-empty-state {
display: none !important;
}
.workflow-stage-wrap:is([data-render-state="loading"], [data-render-state="rendering"]) .workflow-empty-state {
color: transparent;
font-size: 0;
line-height: 0;
pointer-events: none;
}
.workflow-stage-wrap:is([data-render-state="loading"], [data-render-state="rendering"]) .workflow-empty-state::before {
content: "工作流加载中...";
color: var(--muted);
font-size: 14px;
line-height: 1.4;
font-weight: 800;
}
.workflow-status-row {
padding: 10px 16px;
border-top: 1px solid var(--border);
background: #ffffff;
}
.workflow-history-actions {
display: inline-flex;
align-items: center;
gap: 8px;
}
.workflow-inspector-body {
display: grid;
gap: 12px;
margin-top: 12px;
}
.workflow-inspector-empty,
.workflow-check-list {
color: var(--muted);
border: 1px dashed #b8c2d2;
border-radius: 8px;
padding: 12px;
background: #ffffff;
}
.workflow-field {
display: grid;
gap: 7px;
}
.workflow-folder-picker {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: center;
}
.workflow-folder-picker input[readonly] {
cursor: default;
background: #f8fafc;
}
.workflow-watermark-picker input[readonly] {
background: #f4fbf7;
border-color: #a9c8e8;
color: var(--accent-strong);
}
.workflow-folder-picker button {
min-height: 38px;
white-space: nowrap;
}
.workflow-toggle-field {
grid-template-columns: 1fr auto;
align-items: center;
padding: 9px 10px;
border: 1px solid var(--border);
border-radius: 8px;
background: #ffffff;
}
.workflow-field textarea {
min-height: 96px;
}
.workflow-meta-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
color: var(--muted);
font-size: 12px;
}
.workflow-task-estimate {
display: grid;
gap: 4px;
border: 1px solid #cfe0f0;
border-radius: 8px;
background: #f4fbf7;
padding: 10px 12px;
}
.workflow-task-estimate strong {
color: var(--accent-strong);
font-size: 13px;
}
.workflow-task-estimate span {
color: #0f172a;
font-weight: 700;
}
.workflow-task-estimate small {
color: var(--muted);
}
.workflow-dropped-images {
display: grid;
gap: 8px;
border: 1px solid #cfe0f0;
border-radius: 8px;
background: #f4fbf7;
padding: 10px;
}
.workflow-dropped-images.drag-over {
border-color: var(--accent);
background: #eaf2fb;
}
.workflow-dropped-images strong {
color: var(--accent-strong);
font-size: 13px;
}
.workflow-dropped-images > div {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
gap: 8px;
}
.workflow-dropped-images .selected-preview {
grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
min-height: 132px;
max-height: 360px;
margin: 0;
}
.workflow-dropped-images .selected-thumb {
background: #ffffff;
}
.workflow-dropped-images .selected-thumb video {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: 6px;
background: #eef2ff;
}
.workflow-dropped-images .workflow-start-media-thumb {
border-color: rgba(47, 109, 183, 0.25);
background: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%);
}
.workflow-start-media-preview {
display: grid;
width: 100%;
aspect-ratio: 1;
place-items: center;
gap: 5px;
border: 1px solid rgba(47, 109, 183, 0.18);
border-radius: 6px;
background: #eef6ff;
color: #215f9d;
}
.workflow-start-media-symbol {
display: grid;
width: 32px;
height: 32px;
place-items: center;
border: 1px solid rgba(47, 109, 183, 0.22);
border-radius: 999px;
background: #ffffff;
color: #2f6db7;
font-size: 22px;
font-weight: 850;
line-height: 1;
}
.workflow-start-media-preview strong {
color: #215f9d;
font-size: 12px;
font-weight: 850;
}
.workflow-audio-thumb {
width: 100%;
aspect-ratio: 1;
display: grid;
place-items: center;
border-radius: 6px;
background: #fff7ed;
color: #9a3412;
font-weight: 800;
font-size: 13px;
}
.workflow-text-thumb {
background: #eef4ff;
color: #1f4f7d;
font-weight: 600;
font-size: 10.5px;
line-height: 1.35;
padding: 6px;
text-align: left;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
place-items: stretch;
}
.workflow-dropped-images .workflow-dropped-empty {
display: block; 
border: 1px dashed #c1d4ea;
border-radius: 8px;
background: #ffffff;
color: var(--muted);
padding: 12px;
font-size: 13px;
cursor: pointer;
text-align: center;
transition: border-color 0.15s ease, background 0.15s ease;
}
.workflow-dropped-images .workflow-dropped-empty:hover {
border-color: var(--accent);
background: #f4f9ff;
color: var(--accent-strong);
}
.workflow-dropped-images .workflow-dropped-upload {
justify-self: start;
border: 1px solid var(--accent);
border-radius: 8px;
background: #eaf2fb;
color: var(--accent-strong);
font-weight: 750;
font-size: 12.5px;
padding: 6px 12px;
cursor: pointer;
}
.workflow-dropped-images .workflow-dropped-upload:hover {
background: var(--accent);
color: #fff;
}
.workflow-dropped-images .workflow-media-ingress-thumb {
cursor: default;
}
.workflow-dropped-images .workflow-media-ingress-actions {
display: flex;
gap: 5px;
padding: 0 5px 5px;
}
.workflow-dropped-images .workflow-media-ingress-actions[hidden] {
display: none !important;
}
.workflow-dropped-images .workflow-media-ingress-actions button {
flex: 1 1 0;
min-width: 0;
border: 1px solid rgba(180, 35, 24, 0.28);
border-radius: 6px;
background: #fff;
color: #b42318;
font-size: 11px;
font-weight: 750;
padding: 4px 5px;
cursor: pointer;
}
.workflow-node-help {
border: 1px solid #d4dce8;
border-radius: 8px;
background: #ffffff;
padding: 10px 12px;
}
.workflow-node-help summary {
cursor: pointer;
font-weight: 800;
}
.workflow-node-help p {
margin: 8px 0;
color: var(--muted);
line-height: 1.45;
}
.workflow-help-grid {
display: grid;
grid-template-columns: 52px 1fr;
gap: 6px 10px;
margin: 8px 0;
font-size: 12px;
}
.workflow-help-grid span,
.workflow-node-help small {
color: var(--muted);
}
.workflow-help-grid strong {
color: #344054;
font-weight: 700;
}
.command-palette-panel {
width: min(420px, calc(100vw - 24px));
}
.workflow-project-panel {
display: flex;
flex-direction: column;
width: min(920px, calc(100dvw - (var(--modal-edge, 14px) * 2)));
height: min(720px, calc(100dvh - (var(--modal-edge, 14px) * 2)));
min-height: 0;
}
.workflow-media-library-panel {
width: min(1180px, calc(100dvw - (var(--modal-edge, 14px) * 2)));
height: min(780px, calc(100dvh - (var(--modal-edge, 14px) * 2)));
min-height: 0;
--workflow-media-card-min: 176px;
--workflow-media-card-max: 204px;
--workflow-media-preview-ratio: 1 / 1;
}
.workflow-project-status {
margin-top: 4px;
color: var(--muted);
font-size: var(--panel-fs-note);
}
.workflow-project-tools {
display: flex;
flex: 0 0 auto;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.workflow-project-tools > input[type="search"] {
flex: 1 1 100%;
min-width: 0;
}
.workflow-project-tools > button {
flex: 0 0 auto;
min-height: var(--panel-h-action);
}
.workflow-media-library-tools {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: minmax(0, 1fr) 140px auto auto;
gap: 8px;
margin-bottom: 0;
background: #ffffff;
}
.workflow-media-library-panel {
--workflow-media-bar-height: var(--scale-toolbar-height);
--ui-panel-padding-block: var(--scale-gap);
--ui-panel-gap: var(--scale-gap);
display: flex;
flex-direction: column;
max-height: calc(100dvh - (var(--modal-edge, 14px) * 2));
overflow: hidden;
}
.workflow-media-library-panel > .modal-head {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
flex: 0 0 auto;
gap: 8px 12px;
margin: 0;
padding: 0;
border: 0;
background: transparent;
}
.workflow-media-library-panel > .modal-head > .workflow-media-library-switch {
align-self: center;
margin: 0;
}
.workflow-media-library-panel > .modal-head > .workflow-media-library-head-actions {
margin-left: auto;
min-width: 0;
}
.workflow-media-library-head-actions > #closeWorkflowMediaLibraryBtn {
flex: 0 0 auto;
}
.workflow-media-library-hint {
flex: 1 1 auto;
min-width: 0;
margin: 0;
color: var(--muted);
font-size: 12.5px;
font-weight: 700;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 820px) {
.workflow-media-library-panel > .modal-head > .workflow-media-library-head-actions {
order: 2;
}
.workflow-media-library-hint {
order: 3;
flex: 1 1 100%;
text-align: left;
font-size: 11.5px;
}
}
.workflow-media-library-switch {
position: relative;
z-index: 4;
display: inline-grid;
grid-template-columns: repeat(2, minmax(94px, 1fr));
align-self: start;
gap: 4px;
margin: 0 0 12px;
padding: 4px;
border: 1px solid #dce7f3;
border-radius: 12px;
background: #f6f9fd;
}
.workflow-media-library-switch button {
min-height: 34px;
border: 0;
border-radius: 9px;
background: transparent;
color: #53657d;
font-weight: 850;
cursor: pointer;
}
.workflow-media-library-switch button.active {
background: #ffffff;
color: var(--accent-strong);
box-shadow: 0 8px 18px rgba(47, 109, 183, 0.12), inset 0 0 0 1px rgba(47, 109, 183, 0.16);
}
.workflow-media-library-switch button:disabled {
cursor: not-allowed;
opacity: 0.52;
}
.workflow-media-library-view {
min-height: 0;
}
.workflow-media-library-view.is-active {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: var(--ui-panel-gap);
min-height: 0;
overflow: hidden;
}
.workflow-media-library-view[hidden] {
display: none !important;
}
.workflow-media-library-list {
position: relative;
z-index: 1;
display: grid;
flex: 1 1 auto;
grid-template-columns: repeat(auto-fill, minmax(var(--workflow-media-card-min, 224px), var(--workflow-media-card-max, 1fr)));
grid-auto-rows: max-content;
align-content: start;
column-gap: 14px;
row-gap: var(--ui-panel-gap);
width: 100%;
min-height: 0;
max-height: none;
overflow: auto;
padding: 0 6px 0 2px;
box-sizing: border-box;
}
.workflow-media-library-list > .workflow-project-empty {
grid-column: 1 / -1;
align-self: stretch;
display: grid;
place-items: center;
width: 100%;
min-height: min(320px, 100%);
box-sizing: border-box;
}
.workflow-media-upload-view {
gap: var(--ui-panel-gap);
}
.workflow-media-upload-drop {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 8px 12px;
padding: 10px 12px;
border: 1.5px dashed #b9cce3;
border-radius: 14px;
background: linear-gradient(180deg, #f8fbff, #f2f7fd);
color: #58708c;
text-align: left;
cursor: pointer;
transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.workflow-media-upload-drop strong {
color: #172033;
font-size: 14px;
font-weight: 900;
white-space: nowrap;
}
.workflow-media-upload-drop span {
min-width: 0;
font-size: 12px;
line-height: 1.35;
}
.workflow-media-upload-drop.is-dragging,
.workflow-media-upload-drop:focus-visible {
border-color: var(--accent);
background: #eef6ff;
box-shadow: 0 0 0 4px rgba(47, 109, 183, 0.12);
outline: none;
}
.workflow-media-upload-list {
flex: 1 1 360px;
min-height: 0;
}
.workflow-media-upload-pending-card {
border-style: dashed;
border-color: rgba(47, 109, 183, 0.42);
background: linear-gradient(180deg, #ffffff, #f7fbff);
}
.workflow-media-upload-pending-card.is-uploading {
opacity: 0.72;
cursor: wait;
}
.workflow-media-upload-pending-card .workflow-media-library-select {
display: none;
}
.workflow-media-upload-pending-badge {
position: absolute;
z-index: 2;
right: 10px;
top: 10px;
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 0 9px;
border-radius: 999px;
background: rgba(47, 109, 183, 0.92);
color: #ffffff;
font-size: 12px;
font-weight: 850;
box-shadow: 0 8px 18px rgba(47, 109, 183, 0.18);
}
body.theme-dark .workflow-media-library-switch {
border-color: rgba(141, 149, 165, 0.26);
background: rgba(13, 21, 34, 0.68);
}
body.theme-dark .workflow-media-library-switch button {
color: #a9bace;
}
body.theme-dark .workflow-media-library-switch button.active,
body.theme-dark .workflow-media-upload-pending-card {
background: rgba(18, 21, 29, 0.82);
color: #dce8f6;
border-color: rgba(141, 149, 165, 0.24);
}
body.theme-dark .workflow-media-upload-drop {
border-color: rgba(141, 149, 165, 0.26);
background: rgba(13, 21, 34, 0.7);
color: #a9bace;
}
body.theme-dark .workflow-media-upload-drop strong,
body.theme-dark .workflow-media-upload-pending-card .workflow-media-library-title strong {
color: #edf5ff;
}
.workflow-media-library-card {
position: relative;
z-index: 0;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
gap: 0;
border: 1px solid var(--border-soft);
border-radius: 14px;
background: #ffffff;
padding: 0;
cursor: pointer;
overflow: hidden;
box-shadow: 0 0 0 3px transparent, 0 18px 42px transparent;
transition: border-color 0.15s ease;
}
.workflow-media-library-card.is-selected {
border-color: rgba(47, 109, 183, 0.72);
box-shadow: 0 0 0 3px rgba(47, 109, 183, 0.12), 0 18px 42px rgba(15, 23, 42, 0.08);
}
.workflow-media-library-select {
position: absolute;
z-index: 3;
top: 10px;
left: 10px;
display: grid;
place-items: center;
box-sizing: border-box;
width: 26px;
min-width: 26px;
max-width: 26px;
height: 26px;
min-height: 26px;
max-height: 26px;
padding: 0;
border: 1px solid rgba(47, 109, 183, 0.36);
border-radius: 7px;
background: rgba(255, 255, 255, 0.88);
color: #ffffff;
font-size: 15px;
font-weight: 900;
line-height: 1;
cursor: pointer;
backdrop-filter: blur(8px);
}
.infinite-card textarea::placeholder,
.infinite-card-inline-panel textarea::placeholder {
color: rgba(83, 90, 104, 0.62);
}
.workflow-media-library-select[aria-pressed="true"] {
border-color: #2f6db7;
background: #2f6db7;
}
.workflow-media-library-card[data-media-library-draggable="true"] {
cursor: grab;
}
.workflow-media-library-card[data-media-library-draggable="true"]:active {
cursor: grabbing;
}
.workflow-media-library-card.dragging {
cursor: grabbing;
}
.workflow-media-library-preview {
position: relative;
display: grid;
place-items: center;
width: 100%;
height: auto;
min-height: 0;
aspect-ratio: var(--workflow-media-preview-ratio, 1 / 1);
border: 0;
border-bottom: 1px solid #e4ecf5;
border-radius: 0;
background:
linear-gradient(45deg, rgba(148, 163, 184, 0.12) 25%, transparent 25%),
linear-gradient(-45deg, rgba(148, 163, 184, 0.12) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, rgba(148, 163, 184, 0.12) 75%),
linear-gradient(-45deg, transparent 75%, rgba(148, 163, 184, 0.12) 75%),
#f4f7fb;
background-position: 0 0, 0 9px, 9px -9px, -9px 0;
background-size: 18px 18px;
overflow: hidden;
padding: 0;
cursor: zoom-in;
}
.workflow-media-library-preview .media-play-badge {
position: absolute;
inset: auto;
width: 34px;
height: 34px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.55);
backdrop-filter: blur(4px);
pointer-events: none;
}
.workflow-media-library-preview .media-play-badge::before {
content: "";
position: absolute;
top: 50%;
left: 53%;
transform: translate(-50%, -50%);
border-style: solid;
border-width: 7px 0 7px 11px;
border-color: transparent transparent transparent #ffffff;
}
.workflow-media-library-preview img,
.workflow-media-library-preview video {
width: 100%;
height: 100%;
object-fit: cover;
}
.workflow-media-library-icon {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 14px;
background: #eaf2fb;
color: var(--accent-strong);
font-weight: 850;
}
.workflow-media-library-icon svg {
width: 24px;
height: 24px;
}
.workflow-media-library-icon.kind-audio {
background: #eaf0ff;
color: #3a64c8;
}
.workflow-media-library-icon.kind-text {
background: #eef2f6;
color: #5a6b82;
}
.workflow-media-library-meta {
min-width: 0;
padding: 10px 12px 12px;
}
.workflow-media-library-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-width: 0;
}
.workflow-media-library-title strong {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #111827;
font-size: 13px;
font-weight: 850;
}
.workflow-media-library-title span {
flex: 0 0 auto;
border-radius: 999px;
background: #eef5ff;
color: #245a9a;
padding: 2px 7px;
font-size: 11px;
font-weight: 780;
}
.workflow-media-library-meta p {
margin: 6px 0 5px;
min-height: 18px;
color: var(--muted);
font-size: 12px;
line-height: 1.42;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.workflow-media-library-meta small {
display: block;
color: #667085;
font-size: 11px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.workflow-media-library-actions {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 5px;
margin-top: 7px;
}
.workflow-media-library-actions button {
min-height: 24px;
border: 1px solid #cfe0f1;
border-radius: 8px;
background: #f7fbff;
color: #235a96;
font-size: 10.5px;
font-weight: 850;
cursor: pointer;
}
.workflow-media-library-actions button:hover {
border-color: rgba(47, 109, 183, 0.32);
background: #eaf2fb;
color: #2f6db7;
}
.workflow-media-library-actbar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
padding: 8px;
background: linear-gradient(to top, rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0));
visibility: hidden;
pointer-events: none;
z-index: 3;
}
.workflow-media-library-preview:hover .workflow-media-library-actbar,
.workflow-media-library-card:focus-within .workflow-media-library-actbar,
.workflow-media-library-card.is-selected .workflow-media-library-actbar {
visibility: visible;
pointer-events: auto;
}
@media (hover: none) {
.workflow-media-library-actbar {
visibility: visible;
pointer-events: auto;
}
}
.media-detail-mask {
z-index: var(--z-modal-priority);
}
.media-detail-zoom-target {
transform-origin: center center;
will-change: transform;
}
.media-detail-audio {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
width: min(680px, 94%);
height: min(560px, 100%);
min-height: 320px;
padding: 32px;
border-radius: 18px;
background: linear-gradient(135deg, #eef5ff, #f7fbff);
}
.media-detail-audio svg {
width: 64px;
height: 64px;
color: #3a64c8;
}
.media-detail-audio audio {
width: min(560px, 100%);
}
.media-detail-fileicon {
display: grid;
place-items: center;
min-height: 320px;
}
.media-detail-fileicon svg {
width: 58px;
height: 58px;
color: #5a6b82;
}
.media-detail-kind-audio .media-detail-preview,
.media-detail-kind-file .media-detail-preview {
cursor: default;
}
.media-detail-actions .ui-icon {
width: 16px;
height: 16px;
}
body.theme-dark:not(.auth-required) .media-detail-audio {
background: rgba(13, 21, 34, 0.86);
}
@media (max-width: 760px) {
.media-detail-audio,
.media-detail-fileicon {
min-height: 260px;
}
}
@media (max-width: 1120px) {
.workflow-media-library-list {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 860px) {
.workflow-media-library-list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.workflow-media-library-selection-box,
.app-box-select-rect {
position: absolute;
z-index: 5;
pointer-events: none;
border: 1px solid rgba(47, 109, 183, 0.72);
border-radius: 12px;
background: rgba(47, 109, 183, 0.1);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}
.workflow-media-library-drag-badge {
position: fixed;
z-index: var(--z-drag-ghost);
top: -1000px;
left: -1000px;
border-radius: 999px;
background: #2f6db7;
color: #ffffff;
padding: 8px 13px;
font-size: 13px;
font-weight: 850;
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18);
}
.workflow-media-library-card-ghost {
position: fixed;
z-index: var(--z-drag-ghost);
width: 92px;
height: 92px;
margin: 0;
transform: translate(-50%, -50%);
pointer-events: none;
border: 2px solid #2f6db7;
border-radius: 12px;
overflow: hidden;
background-color: #0d1320;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
box-shadow: 0 14px 32px rgba(15, 23, 42, 0.4);
opacity: 0.97;
}
.workflow-media-library-card-ghost.is-text {
display: grid;
place-items: center;
padding: 8px;
background-color: #ffffff;
color: #2f6db7;
font-size: 12px;
font-weight: 800;
text-align: center;
word-break: break-all;
}
.workflow-media-library-card.is-drag-source {
opacity: 0.3;
}
.workflow-media-library-ghost-count {
position: absolute;
top: 6px;
right: 6px;
min-width: 22px;
height: 22px;
padding: 0 6px;
display: grid;
place-items: center;
border-radius: 11px;
background: #2f6db7;
color: #ffffff;
font-size: 12px;
font-weight: 800;
z-index: 3;
}
.workflow-media-library-drag-ghost {
position: fixed;
z-index: var(--z-drag-ghost);
top: 0;
left: 0;
max-width: 220px;
pointer-events: none;
border: 1px solid rgba(47, 109, 183, 0.3);
border-radius: 999px;
background: rgba(255, 255, 255, 0.94);
color: #2f6db7;
padding: 8px 12px;
font-size: 12px;
font-weight: 850;
box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 980px), (max-height: 760px) {
body:not(.auth-required) :is(.workflow-project-panel, .workflow-media-library-panel) {
height: calc(100dvh - (var(--modal-edge, 12px) * 2));
border-radius: 14px;
padding: 14px;
}
body:not(.auth-required) .workflow-media-library-panel {
--workflow-media-card-min: 158px;
--workflow-media-card-max: 1fr;
}
body:not(.auth-required) .workflow-media-library-tools {
grid-template-columns: minmax(0, 1fr) minmax(120px, 0.35fr) auto auto;
gap: 7px;
}
body:not(.auth-required) .workflow-project-list {
grid-template-columns: repeat(auto-fill, minmax(204px, 1fr));
}
body:not(.auth-required) .canvas-project-list {
grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
}
}
@media (min-width: 821px) {
body:not(.auth-required) .workflow-media-library-tools,
body:not(.auth-required) .workflow-media-upload-drop {
height: var(--workflow-media-bar-height);
min-height: var(--workflow-media-bar-height);
}
body:not(.auth-required) .workflow-media-upload-drop {
padding-block: 0;
}
}
@media (max-width: 760px) {
body:not(.auth-required) .workflow-media-library-tools {
grid-template-columns: minmax(0, 1fr) minmax(106px, 0.4fr);
}
body:not(.auth-required) .workflow-media-library-tools > input[type="search"] {
grid-column: 1 / -1;
}
body:not(.auth-required) .workflow-media-library-tools > button {
min-width: 0;
}
}
.workflow-project-list {
display: grid;
flex: 1 1 auto;
grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
align-content: start;
gap: 14px;
min-height: 0;
max-height: none;
overflow: auto;
padding: 2px 4px 4px 2px;
}
.workflow-project-card {
display: flex;
flex-direction: column;
gap: 9px;
min-width: 0;
border: 1px solid var(--border);
border-radius: 14px;
background: #ffffff;
padding: 10px;
transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.workflow-project-card:hover {
border-color: rgba(47, 109, 183, 0.45);
box-shadow: 0 10px 26px rgba(16, 24, 40, 0.1);
transform: translateY(-2px);
}
.canvas-project-panel {
width: min(1040px, calc(100dvw - (var(--modal-edge, 14px) * 2)));
}
.canvas-project-list {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.canvas-project-card {
border-radius: 14px;
padding: 10px;
overflow: hidden;
}
.canvas-project-preview {
position: relative;
width: 100%;
height: 106px;
min-height: 106px;
border: 1px solid rgba(31, 45, 65, 0.08);
border-radius: 11px;
background:
radial-gradient(rgba(47, 109, 183, 0.18) 1px, transparent 1.6px),
linear-gradient(160deg, #f7fafd 0%, #edf3fa 100%);
background-size: 14px 14px, 100% 100%;
overflow: hidden;
cursor: pointer;
padding: 0;
transition: border-color 0.16s ease;
}
.project-card:hover .canvas-project-preview {
border-color: rgba(47, 109, 183, 0.32);
}
.project-card-cover-workflow {
display: grid;
place-items: center;
color: #7d95b4;
}
.project-card-cover-glyph svg { width: 58px; height: 38px; opacity: 0.75; }
.project-card-flag {
position: absolute;
left: 8px;
top: 8px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.02em;
color: #ffffff;
background: linear-gradient(135deg, #4585d4, #2f6db7);
border-radius: 999px;
padding: 2px 9px;
box-shadow: 0 2px 8px rgba(47, 109, 183, 0.38);
pointer-events: none;
}
.project-card-cover-run {
position: absolute;
right: 7px;
top: 7px;
}
.project-card-meta {
font-size: var(--panel-fs-note);
line-height: 1.4;
color: var(--muted);
letter-spacing: 0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.project-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-width: 0;
border-top: 1px solid rgba(31, 45, 65, 0.07);
padding-top: 7px;
margin-top: auto;
}
.project-card-time {
font-size: var(--panel-fs-note);
color: #74839a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.project-card-foot .workflow-project-actions {
display: inline-flex;
align-items: center;
gap: 2px;
flex: none;
}
.project-icon-btn {
width: 28px;
height: 28px;
display: grid;
place-items: center;
padding: 0;
border: 0;
border-radius: 8px;
background: transparent;
color: #5d6b81;
cursor: pointer;
transition: background 0.13s ease, color 0.13s ease;
}
.project-icon-btn:hover { background: rgba(47, 109, 183, 0.1); color: #2f6db7; }
.project-icon-btn.project-icon-danger:hover { background: rgba(217, 60, 74, 0.1); color: #d93c4a; }
.project-icon-btn[disabled] { opacity: 0.35; cursor: not-allowed; }
.project-icon-btn[disabled]:hover { background: transparent; color: #5d6b81; }
.project-icon-btn svg {
width: 15px;
height: 15px;
display: block;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.workflow-project-empty.project-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 7px;
text-align: center;
padding: 46px 18px;
color: var(--muted);
}
.project-empty-icon {
display: grid;
place-items: center;
width: 74px;
height: 56px;
border-radius: 14px;
color: #8ba3c0;
background: linear-gradient(160deg, #f2f7fc, #e9f1fa);
margin-bottom: 4px;
}
.project-empty-icon svg { width: 44px; height: 32px; }
.workflow-project-empty.project-empty strong {
font-size: 14px;
color: var(--text);
}
.workflow-project-empty.project-empty > span:not(.project-empty-icon) {
font-size: 12.5px;
}
.music-mode-block{display:flex;flex-direction:column;gap:7px}
.music-mode-block-top{margin:0 0 var(--panel-padding)}
.music-mode-hint{margin:0;font-size:12px;line-height:1.5;color:#7c90a5;padding:0 4px}
.music-required{color:#d8413a;font-weight:800}
body.theme-dark:not(.auth-required) .music-mode-hint{color:#8aa0bb}
.music-label-line{display:inline-flex;align-items:center;gap:4px}


/* entry:styles.part2.css sha256:8d9765959c3d36665ddcd3a4bfbac3d0e7b56b3713533772022bb69a065065cf */
.canvas-project-preview-node {
position: absolute;
display: block;
border-radius: 6px;
background: var(--node-color, #2f6db7);
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15);
opacity: 0.9;
}
.canvas-project-preview-empty {
height: 100%;
display: grid;
place-items: center;
color: var(--muted);
font-size: 12px;
font-weight: 800;
}
.canvas-project-cover-glyph {
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: #a9c2de;
pointer-events: none;
}
.canvas-project-cover-glyph svg {
width: 54px;
height: 38px;
opacity: 0.92;
}
body.theme-dark:not(.auth-required) .canvas-project-cover-glyph {
color: rgba(150, 184, 222, 0.5);
}
.canvas-at-mention.prompt-mention-pop { width: min(320px, calc(100vw - 24px)); }
.canvas-at-mention .canvas-at-mention-ic {
display: grid; place-items: center; width: 100%; height: 100%;
background: #eef5ff; color: #2f6db7; font-size: 15px; font-weight: 800;
}
body.theme-dark .canvas-at-mention .canvas-at-mention-ic { background: #1b2740; color: #8fb4e6; }
.canvas-project-main p,
.canvas-project-main small {
display: block;
margin-top: 5px;
color: var(--muted);
font-size: 12px;
}
.workflow-project-actions,
.canvas-project-actions {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
margin-top: auto;
}
.canvas-project-actions {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.workflow-project-actions button,
.canvas-project-actions button {
min-height: 30px;
padding: 0 8px;
border-radius: 9px;
font-size: 12.5px;
width: 100%;
}
.workflow-project-card.active {
border-color: var(--accent);
background: #f0f8f4;
}
.workflow-project-main {
min-width: 0;
}
.workflow-project-title-row {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.workflow-project-title-row strong {
display: block;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.workflow-project-current {
flex: 0 0 auto;
border-radius: 999px;
background: #e1edfa;
color: var(--accent-strong);
padding: 2px 8px;
font-size: 12px;
font-weight: 800;
}
.workflow-project-run {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 5px;
border-radius: 999px;
background: #eef5ff;
color: #245a9a;
padding: 2px 8px;
font-size: 12px;
font-weight: 850;
}
.workflow-project-run::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
.workflow-project-run.queued,
.workflow-project-run.running {
background: #fff7df;
color: #9a5a00;
}
.workflow-project-run.running::before {
animation: workflowRunDotPulse 1s ease-in-out infinite;
}
.workflow-project-run.completed {
background: #e1edfa;
color: var(--accent-strong);
}
.workflow-project-run.failed {
background: #fee2e2;
color: #b42318;
}
@keyframes workflowRunDotPulse {
0%, 100% { transform: scale(0.82); opacity: 0.55; }
50% { transform: scale(1.18); opacity: 1; }
}
.workflow-project-card p {
margin: 5px 0 4px;
color: var(--muted);
line-height: 1.45;
}
.workflow-project-card small {
color: #667085;
}
.workflow-project-actions {
display: flex;
gap: 8px;
align-items: center;
}
.workflow-project-empty {
border: 1px dashed var(--border);
border-radius: 8px;
padding: 18px;
color: var(--muted);
background: #fbfcfe;
overflow-wrap: anywhere;
}
.workflow-project-empty.error {
border-color: #f2b8ad;
background: #fff7f5;
color: #9f1d1d;
}
.command-palette-search {
width: 100%;
height: 34px;
margin: 0 0 8px;
padding: 0 10px;
border-radius: 9px;
}
.command-palette-list {
display: grid;
gap: 8px;
max-height: min(500px, calc(100dvh - 170px));
overflow: auto;
padding: 0 3px 4px 0;
}
.command-palette-group {
display: grid;
gap: 3px;
}
.command-palette-category {
display: flex;
align-items: center;
gap: 6px;
min-height: 22px;
padding: 3px 2px;
border-bottom: 0;
color: #667085;
font-size: 11.5px;
font-weight: 850;
}
.command-palette-group-items {
display: grid;
gap: 2px;
}
.command-palette-item {
position: relative;
display: grid;
grid-template-columns: 24px minmax(0, 1fr);
gap: 8px;
align-items: center;
min-height: 42px;
border: 1px solid transparent;
border-radius: 8px;
background: transparent;
padding: 6px 8px 6px 6px;
text-align: left;
box-shadow: none;
cursor: pointer;
overflow: hidden;
}
.command-palette-item::before {
content: "";
position: absolute;
left: 0;
top: 8px;
bottom: 8px;
width: 2px;
border-radius: 999px;
background: var(--menu-accent, #2f6db7);
opacity: 0;
}
.command-palette-item:hover,
.command-palette-item.active {
border-color: color-mix(in srgb, var(--menu-accent, #2f6db7) 24%, #d9e2ee);
background: color-mix(in srgb, var(--menu-accent, #2f6db7) 7%, #ffffff);
}
.command-palette-item:hover::before,
.command-palette-item.active::before {
opacity: 1;
}
.command-palette-item-main {
display: grid;
gap: 2px;
min-width: 0;
}
.command-palette-item-title {
display: flex;
align-items: center;
gap: 5px;
min-width: 0;
}
.command-palette-item strong {
display: block;
min-width: 0;
color: var(--text);
font-size: 12.5px;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.command-palette-item small {
display: block;
min-width: 0;
margin-top: 0;
color: var(--muted);
font-size: 11px;
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.workflow-check-panel {
margin-top: 18px;
}
.workflow-check-panel h2 {
margin-bottom: 10px;
}
.workflow-check-item {
display: grid;
gap: 3px;
padding: 8px 0;
border-bottom: 1px solid #edf0f5;
}
.workflow-check-item:last-child {
border-bottom: 0;
}
.workflow-check-item strong {
color: #344054;
}
.workflow-check-item.ok strong {
color: var(--ok);
}
.workflow-check-item.warn strong {
color: var(--warning);
}
.workflow-check-item.error strong {
color: var(--danger);
}
@media (max-width: 1180px) {
.workflow-shell {
grid-template-columns: minmax(0, 1fr) 250px;
}
.workflow-toolbar {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
.tabs {
grid-template-columns: repeat(2, 1fr);
}
.workflow-shell {
grid-template-columns: 1fr;
}
.workflow-sidebar {
border-right: 0;
border-bottom: 1px solid var(--border);
}
.workflow-inspector {
grid-column: 1 / -1;
border-left: 0;
border-top: 1px solid var(--border);
}
.workflow-stage-wrap {
min-height: 420px;
}
.workflow-actions,
.workflow-library-filter,
.workflow-project-tools,
.workflow-project-card,
.workflow-project-actions {
grid-template-columns: 1fr;
}
.workflow-project-actions {
display: grid;
}
}
@media (max-width: 480px) {
.module-nav,
.tabs,
.topbar .top-actions {
grid-template-columns: 1fr;
}
}
html {
background: var(--bg);
}
html[data-theme="dark"] {
background: #0b111d;
color-scheme: dark;
}
body {
background:
radial-gradient(900px 520px at 12% -8%, rgba(47, 109, 183, 0.07), transparent 60%),
radial-gradient(820px 520px at 92% 0%, rgba(124, 108, 240, 0.06), transparent 58%),
linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(244, 246, 250, 0.92)),
var(--bg);
background-attachment: fixed;
color: var(--text);
letter-spacing: 0;
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
}
* {
scrollbar-width: thin;
scrollbar-color: #c3ccd8 transparent;
}
*::-webkit-scrollbar {
width: 10px;
height: 10px;
}
*::-webkit-scrollbar-thumb {
border: 2px solid transparent;
border-radius: 999px;
background: #c3ccd8;
background-clip: padding-box;
}
*::-webkit-scrollbar-track {
background: transparent;
}
.topbar {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 250, 252, 0.98));
border-right-color: var(--border-soft);
box-shadow: 1px 0 0 rgba(16, 24, 40, 0.02);
padding: var(--shell-padding);
gap: var(--shell-gap);
}
.brand-block {
padding-bottom: 10px;
border-bottom-color: var(--border-soft);
}
.brand-text h1 {
font-size: var(--font-title);
font-weight: 820;
letter-spacing: 0;
}
.brand-text p,
.monitor-header p,
.workflow-head p {
color: var(--muted);
}
.sidebar-toggle,
.topbar .sidebar-refresh {
border-color: var(--border);
border-radius: var(--radius-sm);
background: var(--surface);
color: #344054;
box-shadow: 0 1px 1px rgba(16, 24, 40, 0.03);
}
.sidebar-toggle:hover,
.topbar .sidebar-refresh:hover {
border-color: #b9c3d0;
background: #f8fafc;
}
.module-nav {
gap: 6px;
}
.module-tab,
.topbar .module-tab {
grid-template-columns: var(--nav-icon-size) minmax(0, 1fr);
grid-template-rows: auto auto;
column-gap: calc(12.5px * var(--ui-density));
row-gap: 2px;
min-height: var(--nav-item-height);
padding: var(--nav-item-padding);
border-color: var(--border-soft);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.82);
box-shadow: none;
transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}
.module-tab::before,
.topbar .module-tab::before {
content: "";
grid-row: 1 / span 2;
display: grid;
place-items: center;
width: var(--nav-icon-size);
height: var(--nav-icon-size);
align-self: center;
border: 1px solid #dbe4ef;
border-radius: 9px;
background: #f4f7fb;
color: #344054;
font-size: 12px;
font-weight: 840;
line-height: 1;
}
.module-tab strong,
.topbar .module-tab strong {
grid-column: 2;
align-self: end;
color: #111827;
font-size: 12px;
font-weight: 780;
}
.module-tab span,
.topbar .module-tab span {
grid-column: 2;
align-self: start;
color: var(--muted);
font-size: 10px;
}
.module-tab:hover {
border-color: #c8d2df;
background: #ffffff;
box-shadow: 0 6px 18px rgba(16, 24, 40, 0.05);
}
.module-tab.active {
border-color: rgba(47, 109, 183, 0.38);
background: var(--accent-soft);
box-shadow: inset 3px 0 0 var(--accent), 0 1px 2px rgba(47, 109, 183, 0.05);
}
.module-tab.active::before {
border-color: rgba(47, 109, 183, 0.25);
background: #e1edfa;
color: var(--accent-strong);
}
.module-tab.drag-target {
border-color: var(--accent);
background: #e6f0fb;
box-shadow: inset 3px 0 0 var(--accent), var(--focus-ring);
}
body.sidebar-collapsed .module-tab,
body.sidebar-collapsed .topbar .module-tab {
grid-template-columns: 1fr;
min-height: 48px;
padding: 8px;
}
body.sidebar-collapsed .module-tab::before,
body.sidebar-collapsed .topbar .module-tab::before {
grid-row: auto;
width: 38px;
height: 32px;
font-size: 12px;
}
body.sidebar-collapsed .module-tab.active {
box-shadow: inset 0 -3px 0 var(--accent);
}
.panel,
.tool-card,
.model-category-card,
.ark-model-card,
.workflow-sidebar,
.workflow-inspector {
border-color: var(--border-soft);
border-radius: var(--radius-lg);
background: var(--surface);
box-shadow: var(--shadow-soft);
}
.layout > .panel {
min-height: calc(100vh - (var(--layout-padding) * 2));
}
.workbench,
.monitor {
border-radius: var(--radius-lg);
}
.monitor {
padding: var(--panel-padding);
}
.tabs {
gap: 3px;
padding: 5px;
border-bottom: 1px solid var(--border-soft);
background: var(--surface-2);
}
.tab {
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--muted);
min-height: var(--tab-height);
padding: var(--tab-padding-y) var(--tab-padding-x);
font-weight: 720;
transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}
.tab:hover {
background: #ffffff;
color: #344054;
}
.tab.active {
background: #ffffff;
color: #101828;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), inset 0 -2px 0 var(--accent);
}
.tab-panel {
padding: var(--panel-padding);
}
label {
color: #344054;
font-size: var(--font-label);
font-weight: 720;
}
input,
select,
textarea {
min-height: var(--control-height);
border-color: var(--control-border);
border-radius: var(--radius-sm);
background: var(--control-surface);
color: var(--control-text);
box-shadow: inset 0 1px 0 rgba(16, 24, 40, 0.02);
transition: border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}
textarea {
line-height: 1.52;
}
input:hover,
select:hover,
textarea:hover {
border-color: #bcc7d6;
}
input:focus,
select:focus,
textarea:focus {
border-color: var(--accent);
box-shadow: var(--focus-ring);
}
button,
.button-link {
min-height: var(--button-height);
border-color: #d2d9e4;
border-radius: var(--radius-sm);
background: #ffffff;
color: #1d2939;
box-shadow: 0 1px 1px rgba(16, 24, 40, 0.03);
font-weight: 680;
transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}
button:hover,
.button-link:hover {
border-color: #b8c2d0;
background: #f8fafc;
}
.primary {
border-color: var(--accent);
background: var(--accent);
color: #ffffff;
box-shadow: 0 1px 2px rgba(47, 109, 183, 0.18), 0 8px 18px rgba(47, 109, 183, 0.12);
}
.primary:hover {
border-color: var(--accent-strong);
background: var(--accent-strong);
}
.secondary,
.job-reuse,
.job-favorite,
.case-reuse {
border-color: #c8d6ea;
background: var(--blue-soft);
color: var(--blue);
}
.secondary:hover,
.job-reuse:hover,
.job-favorite:hover,
.case-reuse:hover {
border-color: #abc4e4;
background: #e5f0ff;
}
.danger,
.case-delete {
border-color: #f2b9b4;
background: var(--danger-soft);
color: var(--danger);
}
.danger:hover,
.case-delete:hover {
border-color: #e99991;
background: #ffe8e5;
}
.form-grid,
.options-grid,
.quick-options {
gap: calc(15px * var(--ui-density));
}
.advanced,
.upload-box,
.key-manager,
.model-category-key-manager,
.workflow-dropped-images,
.workflow-node-help,
.workflow-task-estimate,
.empty-row,
.file-summary,
.plan-summary-inline {
border-color: var(--border-soft);
border-radius: var(--radius-md);
background: var(--surface-2);
}
.advanced summary {
color: #1d2939;
}
.drop-zone {
border-color: #c8d6e4;
border-radius: var(--radius-md);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(248, 250, 252, 0.92));
}
.drop-zone:hover,
.workflow-dropped-images.drag-over {
border-color: rgba(47, 109, 183, 0.5);
background: #eaf2fb;
}
.workflow-media-overlay-zone.drag-over {
border-color: rgba(47, 109, 183, 0.5);
background: rgba(47, 109, 183, 0.08);
}
.selected-thumb,
.thumb,
.watermark-library-card,
.watermark-card {
border-color: var(--border-soft);
border-radius: var(--radius-md);
background: #ffffff;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.state-pill {
border-color: #a9c8e8;
background: #edf8f2;
color: var(--ok);
font-size: 12px;
}
.job-select {
min-height: 52px;
border-radius: var(--radius-sm);
border-color: transparent;
background: transparent;
}
.job-reuse,
.job-favorite {
min-height: 34px;
border-radius: var(--radius-sm);
}
.job-select:hover {
border-color: transparent;
background: transparent;
}
.monitor-body {
grid-template-columns: minmax(280px, 0.58fr) minmax(200px, 0.42fr);
gap: 14px;
}
@media (max-width: 1120px) {
.monitor-body {
grid-template-columns: 1fr;
}
}
.modal-mask {
background: rgba(11, 17, 29, 0.52);
}
.command-palette-mask.command-palette-mask:not([hidden]) {
display: block;
padding: 0;
background: rgba(15, 23, 42, 0.1);
backdrop-filter: none;
}
.command-palette-mask .command-palette-panel {
position: absolute;
left: var(--command-palette-x, 50%);
top: var(--command-palette-y, 72px);
display: grid;
grid-template-rows: auto auto minmax(0, 1fr);
gap: 8px;
width: min(420px, calc(100vw - 24px));
max-height: min(560px, calc(100dvh - 24px));
margin: 0;
padding: 10px;
overflow: hidden;
}
.command-palette-mask:not(.is-anchored) .command-palette-panel {
transform: translateX(-50%);
}
.modal-panel,
.watermark-panel,
.watermark-picker-panel,
.command-palette-panel,
.workflow-project-panel {
border-color: var(--border-soft);
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, 0.98);
box-shadow: var(--shadow-popover);
}
.context-menu,
.litegraph.litecontextmenu,
.litegraph.litesearchbox.graphdialog.rounded,
.graphdialog {
border-color: var(--border-soft) !important;
border-radius: 12px !important;
background: rgba(255, 255, 255, 0.98) !important;
box-shadow: var(--shadow-popover) !important;
color: var(--text) !important;
}
.context-menu {
padding: 7px;
}
.context-menu-heading,
.command-palette-category {
color: #475467;
letter-spacing: 0;
}
.context-menu button,
.litegraph.litecontextmenu .litemenu-entry,
.litegraph.litecontextmenu .litemenu-title {
border-radius: var(--radius-sm) !important;
color: var(--text) !important;
}
.context-menu button:hover,
.litegraph.litecontextmenu .litemenu-entry:hover {
background: #f2f6fb !important;
}
.context-menu .context-color-badge,
.command-palette-list .context-color-badge,
.workflow-module-icon {
border-radius: 8px;
}
.command-palette-list {
gap: 8px;
}
.command-palette-item {
border: 1px solid transparent;
border-radius: 8px;
background: transparent;
box-shadow: none;
}
.command-palette-item:hover,
.command-palette-item.active {
background: color-mix(in srgb, var(--menu-accent, #2f6db7) 7%, #ffffff);
}
.text-chat-app {
gap: 12px;
}
.text-chat-sidebar,
.text-chat-main,
.text-chat-composer,
.text-chat-modelbar,
.text-chat-suggestions button {
border-color: var(--border-soft);
border-radius: var(--radius-lg);
background: var(--surface);
box-shadow: var(--shadow-soft);
}
.text-chat-composer {
border-radius: 16px;
}
.text-chat-modelbar button,
.text-chat-modelbar select,
.text-chat-tools button {
min-height: 34px;
}
.light-result,
.result-box {
border-color: var(--border-soft);
border-radius: var(--radius-md);
}
.result-box {
background: #0f172a;
color: #dbeafe;
}
.layout.media-tool-layout .tool-page-head {
border-bottom-color: var(--border-soft);
background: var(--surface-2);
}
.layout.media-tool-layout .tool-panel.active {
padding: 18px;
}
.settings-panel > label:first-child,
.settings-panel > .form-grid,
.settings-panel > .options-grid,
.ark-model-panel,
.model-category-card {
border-color: var(--border-soft);
border-radius: var(--radius-lg);
background: #ffffff;
box-shadow: var(--shadow-soft);
}
.ark-model-panel {
background: linear-gradient(180deg, #f7fafd, #ffffff);
}
.ark-model-card.active,
.workflow-project-card.active,
.watermark-library-card.selected,
.watermark-card.selected {
border-color: rgba(47, 109, 183, 0.48);
background: #eaf2fb;
box-shadow: var(--focus-ring);
}
.workflow-shell {
grid-template-columns: minmax(0, 1fr);
height: 100%;
min-height: 0;
background: #ffffff;
}
.workflow-main {
height: 100%;
}
.workflow-toolbar {
border-bottom-color: var(--border-soft);
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 1px 0 rgba(16, 24, 40, 0.03);
}
.workflow-toolbar-actions button,
.workflow-toolbar-actions .workflow-dirty-badge {
min-height: 36px;
}
.workflow-inspector {
border-left-color: var(--border-soft);
border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
box-shadow: none;
}
.workflow-lite-wrap,
.workflow-lite-canvas,
.workflow-stage-wrap {
background:
linear-gradient(#e7edf5 1px, transparent 1px),
linear-gradient(90deg, #e7edf5 1px, transparent 1px),
linear-gradient(#ced8e6 1px, transparent 1px),
linear-gradient(90deg, #ced8e6 1px, transparent 1px),
#fbfcfe;
background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px;
}
.workflow-status-row {
border-top: 1px solid var(--border-soft);
background: #ffffff;
}
.workflow-dirty-badge {
border-radius: 999px;
}
.workflow-minimap {
border-color: var(--border-soft);
border-radius: 12px;
background: rgba(255, 255, 255, 0.78);
box-shadow: var(--shadow-soft);
backdrop-filter: blur(4px);
}
.workflow-field,
.workflow-check-item,
.workflow-project-card,
.workflow-module-card {
border-color: var(--border-soft);
}
.workflow-module-card {
border-radius: var(--radius-md);
background: #ffffff;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}
.workflow-module-card:hover {
border-color: #c2cedc;
box-shadow: 0 8px 18px rgba(16, 24, 40, 0.07);
}
.workflow-check-panel {
padding-top: 14px;
border-top: 1px solid var(--border-soft);
}
.workflow-project-card {
border-radius: var(--radius-md);
}
.workflow-media-overlay-zone {
border-radius: var(--radius-md);
}
.workflow-media-overlay-thumb:hover {
border-color: rgba(47, 109, 183, 0.5);
background: rgba(47, 109, 183, 0.06);
}
.preview-stage,
.watermark-stage,
.watermark-layer-row,
.watermark-library-card {
border-color: var(--border-soft);
border-radius: var(--radius-lg);
}
.preview-panel,
.watermark-panel {
background: #ffffff;
}
@media (max-width: 1180px) {
.workflow-shell {
grid-template-columns: minmax(0, 1fr) 260px;
}
}
@media (max-width: 760px) {
.layout {
padding: 10px;
gap: 10px;
}
.workflow-shell,
.workflow-main {
height: auto;
min-height: calc(100vh - 20px);
}
.workflow-inspector {
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
}
.ui-icon {
display: inline-grid;
place-items: center;
width: 16px;
height: 16px;
flex: 0 0 auto;
color: currentColor;
line-height: 0;
pointer-events: none;
}
.ui-icon svg {
width: 100%;
height: 100%;
fill: none;
stroke: currentColor;
stroke-width: 1.55;
stroke-linecap: round;
stroke-linejoin: round;
}
button.has-ui-icon {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
}
button.has-ui-icon .ui-icon {
width: 15px;
height: 15px;
opacity: 0.9;
}
button.primary.has-ui-icon .ui-icon,
button.danger.has-ui-icon .ui-icon {
opacity: 1;
}
.brand-text {
position: relative;
padding-left: 42px;
}
.brand-text::before {
content: "";
position: absolute;
left: 0;
top: 1px;
width: 32px;
height: 32px;
border: 1px solid rgba(47, 109, 183, 0.22);
border-radius: 11px;
background:
radial-gradient(circle at 28% 26%, rgba(255, 255, 255, 0.95) 0 11%, transparent 12%),
linear-gradient(135deg, #2f6db7, #2f80ed);
box-shadow: 0 10px 22px rgba(47, 109, 183, 0.16);
}
.brand-text::after {
content: "绘";
position: absolute;
left: 0;
top: 1px;
width: 32px;
height: 32px;
display: grid;
place-items: center;
color: #ffffff;
font-size: 15px;
font-weight: 900;
letter-spacing: 0;
}
.module-tab.has-ui-icon,
.topbar .module-tab.has-ui-icon {
grid-template-columns: 38px minmax(0, 1fr);
column-gap: 11px;
}
.module-tab.has-ui-icon::before,
.topbar .module-tab.has-ui-icon::before {
content: none;
}
.module-tab.has-ui-icon > .ui-icon,
.topbar .module-tab.has-ui-icon > .ui-icon {
grid-row: 1 / span 2;
grid-column: 1;
align-self: center;
width: 36px;
height: 36px;
padding: 8px;
border: 1px solid var(--sidebar-icon-border, #dbe4ef);
border-radius: 11px;
background: var(--sidebar-icon-bg, linear-gradient(180deg, #f8fafc, #eef4fb));
color: var(--sidebar-icon-color, #344054);
box-shadow: var(--sidebar-icon-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.85));
}
.module-tab.has-ui-icon:hover > .ui-icon,
.topbar .module-tab.has-ui-icon:hover > .ui-icon {
border-color: var(--sidebar-icon-hover-border, rgba(47, 109, 183, 0.3));
background: var(--sidebar-icon-hover-bg, linear-gradient(180deg, #eef6ff, #e3edf8));
color: var(--sidebar-icon-hover-color, #255a9c);
}
.module-tab.has-ui-icon strong,
.topbar .module-tab.has-ui-icon strong,
.module-tab.has-ui-icon span:not(.ui-icon),
.topbar .module-tab.has-ui-icon span:not(.ui-icon) {
grid-column: 2;
}
.module-tab.has-ui-icon.active > .ui-icon,
.topbar .module-tab.has-ui-icon.active > .ui-icon {
border-color: var(--sidebar-icon-active-border, rgba(47, 109, 183, 0.3));
background: var(--sidebar-icon-active-bg, linear-gradient(180deg, #e3ecf7, #d7e2f3));
color: var(--sidebar-icon-active-color, var(--accent-strong));
box-shadow: var(--sidebar-icon-active-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.85));
}
body:not(.theme-dark) .module-tab[data-module="videoModule"].has-ui-icon.active > .ui-icon {
border-color: rgba(47, 128, 237, 0.28);
background: linear-gradient(180deg, #eaf2ff, #dbeafe);
color: #1d4ed8;
}
body:not(.theme-dark) .module-tab[data-module="audioModule"].has-ui-icon.active > .ui-icon,
body:not(.theme-dark) .module-tab[data-module="textModule"].has-ui-icon.active > .ui-icon {
border-color: rgba(124, 58, 237, 0.24);
background: linear-gradient(180deg, #f2ebff, #e9ddff);
color: #6d28d9;
}
body:not(.theme-dark) .module-tab[data-module="workflowModule"].has-ui-icon.active > .ui-icon {
border-color: rgba(202, 93, 0, 0.24);
background: linear-gradient(180deg, #fff3e8, #ffe3c2);
color: #a44900;
}
body:not(.theme-dark) .module-tab[data-module="settingsModule"].has-ui-icon.active > .ui-icon {
border-color: rgba(83, 90, 104, 0.25);
background: linear-gradient(180deg, #f4f7fb, #e8eef6);
color: #334155;
}
.sidebar-toggle.has-ui-icon,
.topbar .sidebar-refresh.has-ui-icon,
.topbar .sidebar-theme.has-ui-icon {
gap: 6px;
}
.sidebar-toggle.has-ui-icon {
width: 38px;
min-width: 38px;
padding: 0;
font-size: 0;
}
.sidebar-toggle.has-ui-icon .ui-icon {
width: 16px;
height: 16px;
}
.topbar .icon-button.has-ui-icon::before {
content: none;
}
.command-row button.has-ui-icon,
.workflow-toolbar-actions button.has-ui-icon,
.monitor-actions button.has-ui-icon,
.watermark-library-actions button.has-ui-icon,
.watermark-template-actions button.has-ui-icon,
.workflow-project-tools button.has-ui-icon,
.modal-head button.has-ui-icon {
min-width: 0;
}
.job-row button.has-ui-icon,
.case-row button.has-ui-icon,
.watermark-library-card-actions button.has-ui-icon,
.watermark-layer-row button.has-ui-icon,
.gallery button.has-ui-icon {
gap: 5px;
}
.job-row button.has-ui-icon .ui-icon,
.case-row button.has-ui-icon .ui-icon,
.watermark-library-card-actions button.has-ui-icon .ui-icon,
.watermark-layer-row button.has-ui-icon .ui-icon,
.gallery button.has-ui-icon .ui-icon {
width: 13px;
height: 13px;
}
.workflow-field button.has-ui-icon,
.workflow-folder-picker button.has-ui-icon {
gap: 5px;
white-space: nowrap;
}
body.sidebar-collapsed .brand-text {
padding-left: 0;
}
body.sidebar-collapsed .brand-text::before,
body.sidebar-collapsed .brand-text::after {
display: none;
}
body.sidebar-collapsed .module-tab.has-ui-icon,
body.sidebar-collapsed .topbar .module-tab.has-ui-icon {
grid-template-columns: 1fr;
justify-items: center;
padding: 8px 6px;
}
body.sidebar-collapsed .module-tab.has-ui-icon > .ui-icon,
body.sidebar-collapsed .topbar .module-tab.has-ui-icon > .ui-icon {
display: inline-grid !important;
grid-column: 1;
grid-row: 1;
width: 38px;
height: 34px;
padding: 8px;
}
body.sidebar-collapsed .topbar .icon-button.has-ui-icon {
font-size: 0;
}
body.sidebar-collapsed .sidebar-toggle.has-ui-icon {
width: 100%;
min-width: 0;
font-size: 0;
}
body.sidebar-collapsed .topbar .icon-button.has-ui-icon .ui-icon {
display: inline-grid !important;
width: 17px;
height: 17px;
}
.brand-block,
.brand-row,
.brand-text,
.brand-text h1,
.brand-text p,
.brand-full,
.brand-short {
min-width: 0;
}
.brand-text {
overflow: hidden;
}
.brand-text h1,
.brand-text p,
.brand-full,
.brand-short {
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
word-break: keep-all;
}
.brand-full {
display: block;
}
.brand-short {
display: none;
}
body.sidebar-collapsed .brand-full {
display: none !important;
}
body.sidebar-collapsed .brand-short {
display: block !important;
}
.topbar {
transition: none;
}
.layout {
transition: none;
}
.brand-block,
.brand-row,
.module-nav,
.module-tab,
.module-tab > .ui-icon,
.module-tab strong,
.module-tab span:not(.ui-icon),
.sidebar-toggle,
.sidebar-toggle .ui-icon,
.sidebar-toggle-label,
.topbar .sidebar-refresh {
transition:
opacity var(--sidebar-motion),
transform var(--sidebar-motion),
height var(--sidebar-motion),
width var(--sidebar-motion),
max-width var(--sidebar-motion),
min-height var(--sidebar-motion),
padding var(--sidebar-motion),
border-color var(--sidebar-motion),
background-color var(--sidebar-motion),
box-shadow var(--sidebar-motion);
}
.module-tab.has-ui-icon strong,
.module-tab.has-ui-icon span:not(.ui-icon) {
opacity: 1;
transform: translateX(0);
max-width: 180px;
}
body.sidebar-collapsed .module-tab.has-ui-icon strong,
body.sidebar-collapsed .topbar .module-tab.has-ui-icon strong,
body.sidebar-collapsed .module-tab.has-ui-icon span:not(.ui-icon),
body.sidebar-collapsed .topbar .module-tab.has-ui-icon span:not(.ui-icon) {
display: block !important;
width: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
pointer-events: none;
transform: translateX(-8px);
}
.sidebar-toggle-label {
display: inline-block;
}
.sidebar-toggle.has-ui-icon .sidebar-toggle-label {
max-width: 0;
opacity: 0;
overflow: hidden;
transform: translateX(-4px);
}
body.sidebar-collapsed .module-tab.has-ui-icon,
body.sidebar-collapsed .topbar .module-tab.has-ui-icon {
transition:
height var(--sidebar-motion),
min-height var(--sidebar-motion),
padding var(--sidebar-motion),
border-color var(--sidebar-motion),
background-color 160ms ease,
box-shadow 160ms ease;
}
@media (prefers-reduced-motion: reduce) {
.topbar,
.layout,
.brand-block,
.brand-row,
.module-nav,
.module-tab,
.module-tab > .ui-icon,
.module-tab strong,
.module-tab span:not(.ui-icon),
.sidebar-toggle,
.sidebar-toggle .ui-icon,
.sidebar-toggle-label,
.topbar .sidebar-refresh {
transition-duration: 1ms !important;
}
}
.topbar .module-nav {
gap: 8px;
}
.module-tab.has-ui-icon,
.topbar .module-tab.has-ui-icon {
height: var(--sidebar-nav-row-height);
min-height: var(--sidebar-nav-row-height);
max-height: var(--sidebar-nav-row-height);
overflow: hidden;
}
.module-tab.has-ui-icon > .ui-icon,
.topbar .module-tab.has-ui-icon > .ui-icon,
body.sidebar-collapsed .module-tab.has-ui-icon > .ui-icon,
body.sidebar-collapsed .topbar .module-tab.has-ui-icon > .ui-icon {
width: var(--sidebar-icon-size);
height: var(--sidebar-icon-size);
padding: 8px;
align-self: center;
}
body.sidebar-collapsed .module-tab.has-ui-icon,
body.sidebar-collapsed .topbar .module-tab.has-ui-icon {
height: var(--sidebar-nav-row-height);
min-height: var(--sidebar-nav-row-height);
max-height: var(--sidebar-nav-row-height);
width: 52px;
padding: 0;
border-color: transparent;
background: transparent;
place-items: center;
justify-self: center;
box-shadow: none;
}
body.sidebar-collapsed .module-tab.has-ui-icon.active,
body.sidebar-collapsed .topbar .module-tab.has-ui-icon.active {
background: transparent;
box-shadow: none;
}
body.sidebar-collapsed .module-tab.has-ui-icon > .ui-icon,
body.sidebar-collapsed .topbar .module-tab.has-ui-icon > .ui-icon {
width: 42px;
height: 42px;
border-radius: 13px;
background: #f4f7fb;
}
body.sidebar-collapsed .module-tab.has-ui-icon.active > .ui-icon,
body.sidebar-collapsed .topbar .module-tab.has-ui-icon.active > .ui-icon {
border-color: rgba(47, 109, 183, 0.38);
background: #e1edfa;
box-shadow: inset 3px 0 0 var(--accent), 0 8px 18px rgba(47, 109, 183, 0.1);
}
.tab-panel.settings-panel.active {
max-width: none;
grid-template-columns: minmax(0, 1fr);
align-content: start;
}
.settings-provider-card {
display: grid;
grid-template-columns: minmax(130px, 0.18fr) minmax(280px, 0.82fr);
align-items: center;
gap: 14px;
border: 1px solid var(--border-soft);
border-radius: var(--radius-lg);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
box-shadow: var(--shadow-soft);
padding: 15px 16px;
color: #111827;
font-size: 15px;
font-weight: 820;
}
.settings-provider-card select {
min-height: 40px;
font-weight: 700;
}
.settings-legacy-global,
.settings-fallback-note,
.settings-fallback-keys,
.ark-model-panel {
display: none !important;
}
.settings-provider-help {
border-color: #c7ddf7;
background: #f5f9ff;
color: #385985;
line-height: 1.55;
}
.settings-section-title {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
margin-top: 4px;
padding: 4px 2px 0;
}
.settings-section-title strong {
color: #111827;
font-size: 16px;
font-weight: 840;
}
.settings-section-title span {
color: var(--muted);
font-size: 12px;
line-height: 1.45;
text-align: right;
}
.gateway-title {
margin-top: 0;
}
.gateway-card {
display: grid;
gap: 14px;
border: 1px solid rgba(47, 109, 183, 0.2);
border-radius: var(--radius-lg);
background: linear-gradient(180deg, #ffffff 0%, #f7fafd 100%);
box-shadow: var(--shadow-soft);
padding: 16px;
}
.gateway-card-head {
display: flex;
justify-content: space-between;
gap: 14px;
align-items: flex-start;
}
.gateway-card-head strong,
.gateway-category-head strong {
display: block;
color: #111827;
font-size: 15px;
font-weight: 860;
}
.gateway-card-head span,
.gateway-category-head span,
.gateway-category-card span {
display: block;
margin-top: 4px;
color: var(--muted);
font-size: 12px;
line-height: 1.45;
}
.gateway-enabled {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 36px;
padding: 7px 10px;
border: 1px solid #c7d8ea;
border-radius: 10px;
background: #eaf2fb;
color: #2f6db7;
font-size: 13px;
font-weight: 820;
white-space: nowrap;
}
.gateway-grid {
display: grid;
grid-template-columns: minmax(180px, 0.35fr) minmax(280px, 0.65fr);
gap: 12px;
}
.gateway-key-manager {
display: grid;
gap: 9px;
border: 1px solid #d9e5ef;
border-radius: 10px;
background: #fbfdff;
padding: 11px;
}
.gateway-category-head {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-end;
border-top: 1px solid #e5edf4;
padding-top: 12px;
}
.gateway-category-panel {
display: grid;
grid-template-columns: repeat(2, minmax(360px, 1fr));
gap: 10px;
}
.gateway-category-card {
display: grid;
grid-template-columns: minmax(118px, 0.26fr) minmax(220px, 1fr) auto;
gap: 10px;
align-items: center;
border: 1px solid #d8e5ee;
border-radius: 10px;
background: #ffffff;
padding: 10px;
}
.gateway-category-card strong {
display: block;
color: #1d4a83;
font-size: 14px;
font-weight: 840;
}
.gateway-category-card button {
min-height: 36px;
}
.gateway-category-status {
grid-column: 2 / -1;
min-height: 0;
color: var(--muted);
font-size: 12px;
line-height: 1.4;
}
.gateway-category-status.ok {
color: var(--ok);
}
.gateway-category-status.error {
color: var(--danger);
}
.gateway-actions {
display: flex;
justify-content: flex-start;
}
.settings-advanced-direct {
border: 1px solid var(--border-soft);
border-radius: var(--radius-lg);
background: #ffffff;
box-shadow: var(--shadow-soft);
overflow: hidden;
}
.settings-advanced-direct > summary {
cursor: pointer;
list-style: none;
padding: 14px 16px;
color: #344054;
font-size: 14px;
font-weight: 850;
background: #f8fbfa;
}
.settings-advanced-direct > summary::-webkit-details-marker {
display: none;
}
.settings-advanced-body {
display: grid;
gap: 14px;
padding: 14px;
border-top: 1px solid #e5edf4;
}
.model-category-panel {
grid-template-columns: repeat(2, minmax(360px, 1fr));
gap: 14px;
}
.model-route-toolbar {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
padding: 2px 0 0;
}
.model-route-panel {
display: grid;
grid-template-columns: repeat(2, minmax(420px, 1fr));
gap: 14px;
}
.model-route-card {
display: grid;
gap: 11px;
border: 1px solid var(--border-soft);
border-radius: var(--radius-lg);
background: #ffffff;
box-shadow: var(--shadow-soft);
padding: 14px;
}
.model-route-head {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
}
.model-route-head strong {
display: block;
color: #111827;
font-size: 15px;
font-weight: 840;
line-height: 1.35;
}
.model-route-head span {
display: block;
margin-top: 3px;
color: var(--muted);
font-size: 12px;
line-height: 1.35;
}
.model-route-enabled {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 28px;
padding: 0 4px;
white-space: nowrap;
color: #2563a7;
font-size: 13px;
font-weight: 760;
cursor: pointer;
}
.model-route-enabled input[type="checkbox"] {
width: 18px;
height: 18px;
margin: 0;
flex: 0 0 18px;
}
.model-route-grid {
display: grid;
grid-template-columns: minmax(150px, 0.8fr) minmax(130px, 0.55fr) minmax(150px, 0.7fr) minmax(180px, 1fr);
gap: 10px;
}
.model-route-grid .model-route-base {
grid-column: 1 / -1;
}
.model-route-note {
display: grid;
gap: 6px;
}
.model-route-key-manager {
display: grid;
gap: 8px;
border: 1px solid #d9e5ef;
border-radius: 10px;
background: #f8fbfa;
padding: 10px;
}
.model-route-key-list {
display: grid;
gap: 8px;
}
.model-route-key-row {
display: grid;
grid-template-columns: 34px minmax(160px, 1fr) auto auto;
gap: 8px;
align-items: center;
}
.model-route-key-row input {
font-family: Consolas, "Microsoft YaHei", monospace;
font-size: 13px;
}
.model-route-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.model-route-status {
min-height: 0;
color: var(--muted);
white-space: pre-wrap;
font-size: 12px;
line-height: 1.45;
}
.model-route-status.ok {
color: var(--ok);
}
.model-route-status.error {
color: var(--danger);
}
.model-category-card {
gap: 11px;
border-color: var(--border-soft);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-soft);
}
.model-category-card.is-empty {
background: #fbfcfe;
}
.model-category-head {
align-items: center;
}
.model-category-head button {
min-height: 36px;
}
.model-category-fields {
grid-template-columns: minmax(210px, 0.95fr) minmax(220px, 1.05fr);
}
.model-category-note {
min-height: 0;
padding: 9px 10px;
border: 1px dashed #d9e5ef;
border-radius: 8px;
background: #fbfdff;
}
.model-category-key-manager {
background: #f8fbfa;
}
.model-category-status:empty,
.settings-panel .result-box:empty {
display: none;
}
.storage-audit-summary {
white-space: pre-line;
}
.storage-audit-result {
max-height: 280px;
overflow: auto;
}
.routing-card,
.routing-table,
.routing-row {
min-width: 0;
}
.routing-card {
margin-top: 18px;
border: 1px solid var(--border-soft);
border-radius: 12px;
overflow: hidden;
}
.routing-card-title {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 14px;
padding: 12px 14px;
font-weight: 750;
border-bottom: 1px solid var(--border-soft);
}
.routing-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 16px;
padding: 10px 14px;
}
.routing-row + .routing-row {
border-top: 1px solid var(--border-soft);
}
.routing-name {
flex: 1 1 180px;
min-width: 0;
overflow-wrap: anywhere;
font-weight: 650;
}
.routing-muted {
color: var(--muted);
font-size: 12px;
font-weight: 450;
}
.routing-pill {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
padding: 3px 8px;
border-radius: 6px;
font-size: 11px;
font-weight: 650;
background: color-mix(in srgb, currentColor 9%, transparent);
}
.routing-pill.ok { color: var(--ok); }
.routing-pill.warn { color: var(--warning); }
.routing-pill.err { color: var(--danger); }
.routing-pill.muted { color: var(--muted); }
.route-health {
min-width: 0;
font-size: 12px;
}
.routing-route-row > .route-health {
flex-basis: 100%;
}
.route-health > summary {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 10px;
width: fit-content;
max-width: 100%;
list-style: none;
cursor: pointer;
}
.route-health > summary::-webkit-details-marker { display: none; }
.route-health > summary::before { content: "›"; font-size: 18px; line-height: 1; }
.route-health[open] > summary::before { transform: rotate(90deg); }
.route-health > summary:focus-visible { outline: 2px solid var(--accent, #3074c8); outline-offset: 3px; border-radius: 4px; }
.route-health-detail {
display: grid;
justify-items: start;
gap: 8px;
margin-top: 8px;
padding: 10px 12px;
border-left: 2px solid var(--border-soft);
line-height: 1.5;
}
.route-health-facts {
display: flex;
flex-wrap: wrap;
gap: 4px 18px;
color: var(--muted);
}
.route-health-detail p {
margin: 0;
overflow-wrap: anywhere;
}
.routing-err {
color: #b42318;
font-size: 12px;
line-height: 1.45;
overflow-wrap: anywhere;
}
.settings-panel > label:not(.settings-provider-card),
.settings-panel > .options-grid,
.settings-panel > .command-row,
.settings-panel > .result-box {
border-color: var(--border-soft);
border-radius: var(--radius-lg);
background: #ffffff;
box-shadow: var(--shadow-soft);
}
.settings-panel > label:not(.settings-provider-card) {
padding: 14px;
}
.settings-panel > .command-row {
justify-content: flex-start;
padding: 14px;
}
.settings-panel > .command-row .primary {
min-width: 132px;
}
@media (max-width: 980px) {
.settings-provider-card,
.gateway-grid,
.gateway-category-panel,
.gateway-category-card,
.model-category-panel,
.model-route-panel,
.model-route-grid,
.model-category-fields {
grid-template-columns: 1fr;
}
.gateway-card-head,
.gateway-category-head {
display: grid;
align-items: start;
}
.gateway-category-status {
grid-column: auto;
}
.settings-section-title {
display: grid;
align-items: start;
}
.settings-section-title span {
text-align: left;
}
}
.account-bar {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.account-summary {
max-width: 220px;
padding: 8px 12px;
border: 1px solid #cfe0f0;
border-radius: 10px;
background: var(--accent-soft);
color: var(--accent-strong);
font-family: inherit;
font-size: 13px;
font-weight: 700;
position: relative;
overflow: visible;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 7px;
cursor: pointer;
user-select: none;
transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.account-summary:hover {
border-color: rgba(47, 109, 183, 0.36);
background: #ddebf9;
}
.account-summary:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
.account-summary .ui-icon {
width: 15px;
height: 15px;
}
.account-summary-text {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.account-action {
min-height: 34px;
padding: 6px 10px;
}
.account-usage-panel {
width: min(1080px, calc(100vw - 48px));
height: min(900px, calc(100dvh - 32px));
display: flex;
flex-direction: column;
overflow: hidden;
overscroll-behavior: contain;
}
.account-usage-panel > :not([data-account-usage-section]) {
flex-shrink: 0;
}
.account-usage-topbar {
display: flex;
gap: 10px;
align-items: center;
}
.account-usage-topbar .account-usage-tabs {
flex: 1 1 auto;
min-width: 0;
margin: 0;
}
.account-usage-topbar-actions {
flex: 0 0 auto;
display: flex;
gap: 8px;
}
.account-usage-tab .tab-label-short {
display: none;
}
.account-usage-panel > .admin-account-manager,
.account-usage-panel > .admin-audit-manager,
.account-usage-panel > .admin-recycle-manager,
.account-usage-panel > .admin-feedback-manager,
.account-usage-panel > .account-usage-history {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
gap: 10px;
overflow: hidden;
}
.account-usage-panel > .admin-account-manager > *,
.account-usage-panel > .admin-audit-manager > *,
.account-usage-panel > .admin-recycle-manager > *,
.account-usage-panel > .admin-feedback-manager > *,
.account-usage-panel > .account-usage-history > * {
flex: 0 0 auto;
}
#adminAccountList,
#adminAuditList,
#adminRecycleList,
#adminFeedbackList {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
align-content: start;
overscroll-behavior: contain;
}
.account-usage-history > .account-usage-table-wrap {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
}
.account-usage-table-wrap tbody {
transition: opacity 0.15s ease;
}
.account-usage-table-wrap.is-loading tbody {
opacity: 0.45;
}
.modal-list-sentinel {
height: 2px;
}
.account-usage-panel > .routing-health-monitor,
.account-usage-panel > .account-redeem-pane {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
align-content: start;
overscroll-behavior: contain;
}
.account-redeem-pane {
display: grid;
gap: 12px;
}
.account-usage-date,
.admin-detail-date {
display: inline-flex;
align-items: center;
gap: 5px;
margin: 0;
}
.account-usage-date span,
.admin-detail-date span {
color: var(--muted);
font-size: 12px;
font-weight: 820;
white-space: nowrap;
}
.account-usage-date input,
.admin-detail-date input {
min-height: 32px;
width: 132px;
padding: 3px 8px;
}
.account-usage-summary {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: -2px 0 10px;
}
.account-usage-summary div {
min-height: 30px;
display: inline-flex;
align-items: center;
gap: 7px;
border: 1px solid var(--border);
border-radius: 999px;
background: linear-gradient(180deg, #ffffff, #f8fbff);
padding: 5px 10px;
}
.account-usage-summary strong {
display: inline-flex;
align-items: center;
gap: 3px;
color: var(--text);
font-size: 14px;
line-height: 1;
}
.account-usage-summary span {
display: inline-flex;
align-items: center;
margin: 0;
color: var(--muted);
font-size: 12px;
font-weight: 720;
}
.account-usage-tabs {
position: sticky;
top: 0;
z-index: 6;
display: inline-flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin: 0 0 10px;
padding: 6px;
border: 1px solid rgba(47, 103, 178, 0.14);
border-radius: 14px;
background: rgba(247, 250, 252, 0.86);
backdrop-filter: blur(12px);
}
.account-usage-tab {
min-height: 34px;
padding: 7px 14px;
border: 1px solid transparent;
border-radius: 10px;
background: transparent;
color: #526176;
font-weight: 860;
}
.account-usage-tab:hover {
border-color: rgba(47, 109, 183, 0.22);
background: rgba(234, 242, 251, 0.76);
color: #2f6db7;
}
.account-usage-tab.active {
border-color: rgba(47, 109, 183, 0.28);
background: #2f6db7;
color: #ffffff;
box-shadow: 0 8px 18px rgba(47, 109, 183, 0.16);
}
.account-usage-tools {
display: grid;
grid-template-columns: minmax(220px, 1fr) auto auto;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.account-usage-meta .model-logo {
margin-right: 7px;
vertical-align: -4px;
}
.account-usage-meta {
white-space: nowrap;
}
.account-usage-meta-text {
vertical-align: middle;
}
.account-usage-timebar {
grid-column: 1 / -1;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.account-usage-custom {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 10px 4px 12px;
border: 1px solid rgba(47, 103, 178, 0.14);
border-radius: 12px;
background: rgba(247, 250, 252, 0.92);
}
.account-usage-custom-cap {
color: var(--muted);
font-size: 12px;
font-weight: 860;
white-space: nowrap;
}
.account-usage-custom-sep {
color: rgba(82, 97, 118, 0.55);
font-size: 12px;
font-weight: 800;
}
.account-usage-custom input {
min-height: 32px;
width: 136px;
padding: 3px 8px;
border-radius: 9px;
}
body.theme-dark:not(.auth-required) .account-usage-custom {
border-color: rgba(99, 156, 222, 0.24);
background: rgba(24, 30, 41, 0.7);
}
.account-usage-filter {
display: inline-grid;
grid-template-columns: repeat(4, minmax(50px, 1fr));
gap: 4px;
align-items: center;
min-width: 260px;
padding: 4px;
border: 1px solid rgba(47, 103, 178, 0.14);
border-radius: 12px;
background: rgba(247, 250, 252, 0.92);
}
.account-usage-filter button {
min-height: 32px;
padding: 6px 9px;
border: 1px solid transparent;
border-radius: 9px;
background: transparent;
color: #526176;
font-size: 12px;
font-weight: 860;
white-space: nowrap;
}
.account-usage-filter button:hover {
border-color: rgba(47, 109, 183, 0.18);
background: rgba(234, 242, 251, 0.72);
color: #2f6db7;
}
.account-usage-filter button.active {
border-color: rgba(47, 109, 183, 0.28);
background: #2f6db7;
color: #ffffff;
box-shadow: 0 8px 16px rgba(47, 109, 183, 0.14);
}
.account-redeem-card {
display: flex;
flex-wrap: wrap;
gap: 10px 14px;
align-items: center;
margin: 0 0 12px;
padding: 14px;
border: 1px solid rgba(47, 109, 183, 0.18);
border-radius: 14px;
background: linear-gradient(135deg, rgba(234, 242, 251, 0.92), rgba(248, 251, 255, 0.96));
}
.account-redeem-card > .account-redeem-form {
flex: 1 1 320px;
min-width: 0;
}
.account-redeem-studio-btn {
flex: 0 0 auto;
}
.account-redeem-card strong {
display: block;
color: var(--text);
font-size: 14px;
line-height: 1.3;
}
.account-redeem-card span {
display: block;
margin-top: 4px;
color: var(--muted);
font-size: 12px;
line-height: 1.45;
}
.account-redeem-form {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
}
.account-redeem-form input {
min-width: 0;
}
.account-page-panel {
background:
linear-gradient(180deg, rgba(248, 251, 255, 0.82), rgba(255, 255, 255, 0.92) 280px),
var(--surface);
width: 100% !important;
max-width: none !important;
padding: 0 !important;
overflow: auto;
}
.account-page {
width: 100%;
max-width: none;
margin: 0;
display: grid;
gap: 16px;
padding: 16px 18px 48px;
}
.account-page-shell {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
align-items: start;
}
.account-page-main,
.account-page-hero,
.account-page-editcard {
border: 1px solid rgba(209, 219, 232, 0.86);
border-radius: 18px;
background: rgba(255, 255, 255, 0.86);
box-shadow: 0 14px 40px rgba(15, 23, 42, 0.06);
backdrop-filter: blur(18px);
}
.account-page-main {
min-width: 0;
padding: 20px;
}
.account-page-hero {
display: grid;
gap: 18px;
padding: 22px;
background-image: linear-gradient(180deg, rgba(47, 109, 183, 0.06), rgba(120, 112, 180, 0.03) 42%, transparent 70%);
}
.account-projects-toolbar {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.account-projects-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.account-projects-sort {
width: auto;
min-width: 132px;
margin-left: auto;
flex: 0 0 auto;
}
.account-page-profile {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 18px;
}
.account-page-avatar {
flex: none;
width: 96px;
height: 96px;
border-radius: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 38px;
font-weight: 900;
line-height: 1;
background: linear-gradient(135deg, #5b8fd6, #2f6db7);
box-shadow: 0 10px 24px rgba(47, 109, 183, 0.16);
}
.account-page-id {
width: 100%;
min-width: 0;
display: grid;
gap: 8px;
}
.account-page-name {
margin: 0;
font-size: 24px;
font-weight: 880;
letter-spacing: 0;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.account-page-tags {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 7px;
}
.account-page-handle {
color: #64748b;
font-size: 13px;
font-weight: 700;
}
.account-page-role {
padding: 2px 9px;
border-radius: 8px;
background: #eef5ff;
color: #255fa6;
font-size: 12px;
font-weight: 800;
}
.account-page-role.is-viewing {
background: #fef3f2;
color: #b42318;
border: 1px solid #fecdca;
}
.account-page-quick.is-danger {
color: #b42318;
border-color: #fecdca;
}
.account-page-quick.is-danger:hover {
background: #fef3f2;
}
.account-page-role.is-admin {
background: #fff5e6;
color: #a46116;
}
.account-page-bio {
margin: 2px 0 0;
max-width: 560px;
color: #475569;
font-size: 13px;
line-height: 1.6;
white-space: pre-wrap;
word-break: break-word;
}
.account-page-bio.is-empty {
color: var(--muted);
}
.account-page-namerow {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.account-page-edit {
flex: none;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
min-height: 34px;
border-radius: 10px;
padding: 7px 11px;
color: #2f6db7;
font-size: 12.5px;
font-weight: 800;
}
.account-page-edit i {
display: inline-flex;
}
.account-page-edit svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.account-page-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
width: min(560px, 100%);
}
.account-page-stat {
position: relative;
display: grid;
min-height: 58px;
gap: 2px;
justify-items: start;
text-align: left;
padding: 0 18px 0 0;
border: 0;
border-right: 1px solid #edf2f7;
border-radius: 0;
background: transparent;
box-shadow: none;
font: inherit;
color: var(--text);
}
.account-page-stat:last-child {
border-right: 0;
}
.account-page-stat.is-action {
cursor: pointer;
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.account-page-stat.is-action:hover {
border-color: transparent;
background: transparent;
box-shadow: none;
transform: none;
}
.account-page-stat-go {
display: none;
position: absolute;
top: 14px;
right: 14px;
place-items: center;
width: 22px;
height: 22px;
border-radius: 9px;
background: #ffffff;
color: #94a3b8;
opacity: 1;
transition: background 0.15s ease, color 0.15s ease;
}
.account-page-stat.is-action:hover .account-page-stat-go {
background: color-mix(in srgb, #2f6db7 12%, #ffffff);
color: #2f6db7;
}
.account-page-stat-go svg {
width: 13px;
height: 13px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
}
.account-page-stats b {
order: 0;
max-width: 100%;
color: var(--text);
font-size: 22px;
line-height: 1.08;
font-weight: 880;
font-variant-numeric: tabular-nums;
}
.account-page-stats span {
order: 1;
color: #64748b;
font-size: 12px;
font-weight: 720;
}
.account-page-stats small {
order: 2;
color: #94a3b8;
font-size: 11px;
font-weight: 650;
}
.account-page-menu {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 12px 0 0;
border: 0;
border-top: 1px solid #edf2f7;
border-radius: 0;
background: transparent;
}
.account-page-row {
display: flex;
align-items: center;
gap: 11px;
width: auto;
height: 44px;
margin: 0;
padding: 0 13px;
border: 1px solid #e4ebf3;
border-radius: 10px;
background: transparent;
box-shadow: none;
cursor: pointer;
color: var(--text);
font-size: 14px;
font-weight: 720;
text-align: left;
}
body:not(.auth-required) .account-page .account-page-row {
min-height: 44px !important;
padding: 0 13px !important;
}
.account-page-row:hover {
background: #f5f8fc;
}
.account-page-row-icon {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 9px;
background: #f8fafc;
color: #52657d;
}
.account-page-row-icon svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.account-page-row:hover .account-page-row-icon {
color: var(--accent-strong, #2f6db7);
}
.account-page-row-label {
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.account-page-row-chev {
display: none;
color: #b8c3d2;
}
.account-page-row-chev svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.account-page-row-danger {
color: #d64545;
}
.account-page-row-danger .account-page-row-icon {
color: #d64545;
}
.account-page-row-danger:hover {
background: rgba(214, 69, 69, 0.08);
}
.account-page-row-danger:hover .account-page-row-icon {
color: #d64545;
}
.account-page-editcard {
display: grid;
gap: 16px;
max-width: 720px;
margin: 0 auto;
padding: 22px;
}
.account-page-edit-head {
display: flex;
align-items: center;
gap: 12px;
}
.account-page-edit-head .account-page-avatar {
width: 48px;
height: 48px;
font-size: 22px;
box-shadow: none;
}
.account-page-edit-head strong {
font-size: 17px;
color: var(--text);
}
.account-page-field {
display: grid;
gap: 6px;
margin: 0;
color: var(--text);
font-weight: 820;
}
.account-page-field > span {
font-size: 13px;
}
.account-page-field input,
.account-page-field textarea {
width: 100%;
box-sizing: border-box;
}
.account-page-field textarea {
resize: vertical;
min-height: 84px;
line-height: 1.6;
}
.account-page-field small {
justify-self: end;
color: var(--muted);
font-size: 11px;
font-weight: 700;
}
.account-page-edit-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
}
.account-page-guest {
display: grid;
gap: 14px;
justify-items: center;
text-align: center;
min-height: 420px;
padding: 60px 20px;
border: 1px solid #e1e9f3;
border-radius: 18px;
background: rgba(255, 255, 255, 0.88);
color: var(--muted);
}
.account-page-avatar-guest {
background: linear-gradient(135deg, #9db4cf, #6f8bad);
}
.account-page-avatar-guest svg {
width: 38px;
height: 38px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
body.theme-dark:not(.auth-required) .account-page-panel {
background: var(--bg);
}
body.theme-dark:not(.auth-required) .account-page-main,
body.theme-dark:not(.auth-required) .account-page-hero,
body.theme-dark:not(.auth-required) .account-page-editcard,
body.theme-dark:not(.auth-required) .account-page-guest {
border-color: rgba(99, 156, 222, 0.18);
background: rgba(24, 34, 49, 0.9);
}
body.theme-dark:not(.auth-required) .account-page-stat,
body.theme-dark:not(.auth-required) .account-page-menu {
border-color: rgba(99, 156, 222, 0.18);
}
body.theme-dark:not(.auth-required) .account-page-stat {
background: transparent;
}
body.theme-dark:not(.auth-required) .account-page-menu {
background: transparent;
border-top-color: rgba(99, 156, 222, 0.16);
}
body.theme-dark:not(.auth-required) .account-page-row:hover {
background: rgba(99, 156, 222, 0.12);
}
body.theme-dark:not(.auth-required) .account-page-row:hover .account-page-row-icon {
color: #8fb6e8;
}
body.theme-dark:not(.auth-required) .account-page-row-icon {
background: transparent;
color: #9fc4f2;
}
body.theme-dark:not(.auth-required) .account-page-row {
border-color: transparent;
background: transparent;
color: #93a4bc;
}
body.theme-dark:not(.auth-required) .account-page-row:hover {
background: rgba(99, 156, 222, 0.12);
}
@media (max-width: 1180px) {
.account-page {
width: 100%;
}
.account-page-shell {
grid-template-columns: 1fr;
}
}
@media (max-width: 920px) {
.account-page {
width: 100%;
padding-top: 18px;
}
.account-page-shell {
grid-template-columns: 1fr;
}
.account-page-stats {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.account-page-bio {
max-width: none;
}
}
@media (max-width: 720px) {
.account-page {
width: 100%;
gap: 12px;
padding: 10px 10px 34px;
}
.account-page-hero,
.account-page-main {
padding: 14px;
border-radius: 16px;
}
.account-page-hero {
gap: 12px;
}
.account-page-profile {
grid-template-columns: auto minmax(0, 1fr);
gap: 12px;
}
.account-page-avatar {
width: 60px;
height: 60px;
border-radius: 16px;
font-size: 26px;
}
.account-page-name {
font-size: 19px;
}
.account-page-namerow {
flex-wrap: wrap;
gap: 8px;
}
.account-page-edit {
padding: 6px 12px;
}
.account-page-stats b {
font-size: 16px;
}
.account-page-row {
height: 42px;
}
.account-projects-toolbar,
.account-projects-tools {
display: grid;
grid-template-columns: 1fr;
width: 100%;
}
.account-projects-pills {
width: 100%;
}
.account-proj-pill {
flex: 1;
}
}
.account-page-avatar.has-img,
.app-more-avatar.has-img {
background: none !important;
padding: 0;
overflow: hidden;
}
.account-page-avatar.has-img img,
.app-more-avatar.has-img img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
display: block;
}
.account-page-edit-avatar {
display: flex;
align-items: center;
gap: 14px;
}
.account-page-avatar-edit {
position: relative;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
cursor: pointer;
line-height: 0;
}
.account-page-avatar-edit .account-page-avatar {
width: 64px;
height: 64px;
font-size: 28px;
box-shadow: none;
}
.account-page-avatar-cam {
position: absolute;
right: -2px;
bottom: -2px;
display: inline-grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: 50%;
border: 2px solid var(--surface, #fff);
background: #2f6db7;
color: #fff;
}
.account-page-avatar-cam svg {
width: 13px;
height: 13px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.account-page-avatar-ops {
display: flex;
align-items: center;
gap: 10px;
}
.account-page-avatar-remove {
border: 0;
background: transparent;
color: var(--danger, #d64545);
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
.account-page-section {
display: grid;
gap: 14px;
}
.account-page-section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
padding: 0;
}
.account-page-section-head strong {
color: var(--text);
font-size: 18px;
font-weight: 820;
}
.account-page-section-head span {
color: var(--muted);
font-size: 12px;
}
.account-projects-toolbar {
display: flex;
align-items: stretch;
gap: 10px;
flex-wrap: wrap;
margin: 0;
}
.account-projects-search {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
min-width: 200px;
min-height: 44px;
padding: 8px 12px;
border: 1px solid var(--border-soft);
border-radius: 12px;
background: #f8fafc;
border-color: #e4ebf3;
box-shadow: none;
}
.account-projects-search i { display: inline-flex; color: var(--muted); }
.account-projects-search svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.account-projects-search input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-size: 13px; color: var(--text); }
.account-projects-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.account-projects-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.account-projects-pills {
display: inline-flex;
gap: 2px;
padding: 3px;
border: 1px solid var(--border-soft);
border-radius: 11px;
background: #f8fafc;
border-color: #e4ebf3;
box-shadow: none;
}
.account-proj-pill {
border: none;
background: none;
min-height: 34px;
padding: 6px 12px;
border-radius: 9px;
font-size: 12.5px;
font-weight: 700;
color: var(--muted);
cursor: pointer;
transition: background 0.14s ease, color 0.14s ease;
}
.account-proj-pill.is-on {
background: #ffffff;
color: #1d5fa8;
box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}
.account-projects-sort {
padding: 7px 12px;
border: 1px solid var(--border-soft);
border-radius: 11px;
background: #f8fafc;
border-color: #e4ebf3;
box-shadow: none;
font-size: 12.5px;
color: var(--text);
cursor: pointer;
}
body.theme-dark:not(.auth-required) .account-projects-search,
body.theme-dark:not(.auth-required) .account-projects-pills,
body.theme-dark:not(.auth-required) .account-projects-sort {
border-color: rgba(99, 156, 222, 0.18);
background: var(--surface-2);
}
body.theme-dark:not(.auth-required) .account-proj-pill.is-on {
background: rgba(99, 156, 222, 0.18);
color: #8fb6e8;
}
.account-page-projects,
.account-resource-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 12px;
}
.account-card {
position: relative;
display: flex;
flex-direction: column;
border: 1px solid var(--border-soft);
border-radius: 14px;
background: #ffffff;
overflow: hidden;
cursor: pointer;
color: inherit;
font: inherit;
text-align: left;
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.account-card:hover {
border-color: var(--border-strong);
transform: translateY(-2px);
box-shadow: var(--shadow-popover);
}
.account-card-open {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
border: 0;
background: none;
padding: 0;
cursor: pointer;
font: inherit;
color: inherit;
text-align: left;
}
.account-card-cover {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
display: grid;
place-items: center;
overflow: hidden;
background: linear-gradient(135deg, #eef5ff, #f6f9fd);
color: #2f6db7;
}
.account-card-map {
position: absolute;
inset: 0;
display: block;
}
.account-map-node {
position: absolute;
border-radius: 4px;
background: var(--node-color, #5b8fd6);
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow: 0 2px 5px rgba(15, 23, 42, 0.1);
opacity: 0.95;
}
.project-card-cover.canvas-project-preview {
position: relative;
}
.account-card-cover-canvas {
background: linear-gradient(135deg, color-mix(in srgb, #7c5cff 14%, #ffffff), color-mix(in srgb, #7c5cff 4%, #ffffff));
color: #6b4ee6;
}
.account-card-cover-workflow {
background: linear-gradient(135deg, color-mix(in srgb, #2f6db7 14%, #ffffff), color-mix(in srgb, #2f6db7 4%, #ffffff));
color: #2f6db7;
}
.account-card-thumb,
.account-card-cover img,
.account-card-cover video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.account-card-cover svg {
width: 30px;
height: 30px;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.account-card-body {
display: grid;
gap: 3px;
padding: 10px 12px 11px;
min-width: 0;
}
.account-card-body strong {
font-size: 13.5px;
font-weight: 780;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.account-card-meta {
font-size: 12px;
color: var(--muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.account-card-date {
margin-top: 1px;
font-size: 11px;
font-weight: 600;
color: #98a2b3;
}
.account-card-more {
position: absolute;
top: 8px;
right: 8px;
width: 28px;
height: 28px;
display: grid;
place-items: center;
border: 0;
border-radius: 8px;
background: rgba(255, 255, 255, 0.86);
backdrop-filter: blur(4px);
color: #5a6a80;
cursor: pointer;
opacity: 0;
transition: opacity 0.14s ease, background 0.14s ease, color 0.14s ease;
}
.account-card:hover .account-card-more,
.account-card-more:focus-visible {
opacity: 1;
}
.account-card-more:hover {
background: #ffffff;
color: #2f6db7;
}
.account-card-more svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
}
.account-card.is-skeleton {
pointer-events: none;
cursor: default;
}
.account-card.is-skeleton .account-card-cover {
position: relative;
overflow: hidden;
background: #eef1f5;
}
.account-card.is-skeleton .account-card-cover::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 22%, rgba(255, 255, 255, 0.6) 50%, transparent 78%);
transform: translateX(-100%);
animation: accSkelSweep 1.3s ease infinite;
}
.account-page-projects-empty {
grid-column: 1 / -1;
padding: 28px 12px;
text-align: center;
color: var(--muted);
font-size: 13px;
border: 1px dashed var(--border-soft);
border-radius: 14px;
}
.account-infinite-sentinel {
grid-column: 1 / -1;
min-height: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.account-infinite-sentinel.is-loading {
padding: 14px 0 4px;
}
.account-infinite-spinner {
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid var(--border-strong);
border-top-color: var(--accent);
animation: accSpin 0.7s linear infinite;
}
@keyframes accSpin {
to { transform: rotate(360deg); }
}
.account-page-project.is-skeleton {
cursor: default;
pointer-events: none;
box-shadow: none;
align-items: center;
gap: 13px;
padding: 13px 14px;
}
.skel-box,
.skel-line {
position: relative;
overflow: hidden;
background: #eef1f5;
}
.skel-box::after,
.skel-line::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 22%, rgba(255, 255, 255, 0.6) 50%, transparent 78%);
transform: translateX(-100%);
animation: accSkelSweep 1.3s ease infinite;
}
.account-page-project .skel-box {
width: 46px;
height: 46px;
flex: none;
border-radius: 13px;
}
.skel-line {
height: 11px;
border-radius: 6px;
}
.skel-w70 { width: 70%; }
.skel-w45 { width: 45%; }
@keyframes accSkelSweep {
to { transform: translateX(100%); }
}
body.theme-dark:not(.auth-required) .skel-box,
body.theme-dark:not(.auth-required) .skel-line {
background: rgba(99, 156, 222, 0.1);
}
body.theme-dark:not(.auth-required) .skel-box::after,
body.theme-dark:not(.auth-required) .skel-line::after {
background: linear-gradient(90deg, transparent 22%, rgba(99, 156, 222, 0.22) 50%, transparent 78%);
}
.account-page-project {
position: relative;
display: flex;
align-items: stretch;
min-height: 64px;
margin: 0;
border: 1px solid var(--border-soft);
border-radius: 14px;
background: #ffffff;
box-shadow: none;
transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.account-page-project-open {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border: none;
background: none;
text-align: left;
cursor: pointer;
font: inherit;
color: inherit;
}
.account-page-project-more {
flex: none;
width: 40px;
display: inline-grid;
place-items: center;
border: none;
background: none;
color: #b3bccb;
cursor: pointer;
border-radius: 0 14px 14px 0;
color: #98a4b5;
transition: background 0.14s ease, color 0.14s ease;
}
.account-page-project:hover .account-page-project-more:not(:hover) {
color: #6b7689;
}
.account-page-project-more:hover {
background: color-mix(in srgb, var(--blue-soft) 60%, var(--surface));
color: #2f6db7;
}
.account-page-project-more svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
}
.account-proj-menu {
position: fixed;
z-index: 9995;
min-width: 150px;
max-height: var(--anchored-room, 100vh);
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 2px;
padding: 6px;
border: 1px solid #e6edf6;
border-radius: 12px;
background: #ffffff;
box-shadow: 0 16px 38px rgba(15, 23, 42, 0.18);
animation: appMoreIn 0.12s ease;
}
.account-proj-menu button {
display: flex;
align-items: center;
gap: 9px;
padding: 8px 10px;
border: none;
border-radius: 8px;
background: none;
color: var(--text);
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-align: left;
}
.account-proj-menu button:hover { background: color-mix(in srgb, var(--blue-soft) 60%, #ffffff); }
.account-proj-menu button.is-danger { color: var(--danger); }
.account-proj-menu button.is-danger:hover { background: var(--danger-soft, #fff3f1); }
.account-proj-menu svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
body.theme-dark:not(.auth-required) .account-proj-menu {
background: var(--surface-2, #1a2434);
border-color: rgba(99, 156, 222, 0.22);
}
body.theme-dark:not(.auth-required) .account-proj-menu button:hover {
background: rgba(99, 156, 222, 0.14);
}
.account-page-project:hover {
border-color: var(--border-strong);
background: #fbfdff;
box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
transform: translateY(-1px);
}
.account-page-project-cover {
flex: none;
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 12px;
overflow: hidden;
background: linear-gradient(135deg, color-mix(in srgb, #2f6db7 14%, #ffffff), color-mix(in srgb, #2f6db7 5%, #ffffff));
color: #2f6db7;
}
.account-page-project-canvas {
background: linear-gradient(135deg, color-mix(in srgb, #7c5cff 15%, #ffffff), color-mix(in srgb, #7c5cff 5%, #ffffff));
color: #6b4ee6;
}
.account-page-project-workflow {
background: linear-gradient(135deg, color-mix(in srgb, #2f6db7 15%, #ffffff), color-mix(in srgb, #2f6db7 5%, #ffffff));
color: #2f6db7;
}
.account-page-project-thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.account-page-project-cover svg {
width: 24px;
height: 24px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.account-page-project-body {
display: grid;
gap: 4px;
min-width: 0;
flex: 1;
}
.account-page-project-body strong {
color: var(--text);
font-size: 14px;
font-weight: 790;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.account-page-project-sub {
display: flex;
align-items: baseline;
gap: 14px;
min-width: 0;
}
.account-page-project-meta {
flex: 1;
min-width: 0;
color: var(--muted);
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.account-page-project-date {
flex: none;
margin-left: auto;
color: #98a2b3;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.account-page-projects-more {
grid-column: 1 / -1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
margin-top: 2px;
min-height: 44px;
padding: 11px 14px;
border: 1px solid var(--border-soft);
border-radius: 13px;
background: #f8fafc;
color: #2f6db7;
font-size: 13px;
font-weight: 760;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.account-page-projects-more:hover {
background: color-mix(in srgb, var(--blue-soft) 55%, var(--surface));
border-color: color-mix(in srgb, #2f6db7 32%, var(--border-soft));
}
.account-page-projects-more-chev {
display: inline-flex;
color: #2f6db7;
transform: rotate(90deg);
transition: transform 0.18s ease;
}
.account-page-projects-more.is-open .account-page-projects-more-chev {
transform: rotate(-90deg);
}
.account-page-projects-more-chev svg {
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
body.theme-dark:not(.auth-required) .account-page-projects-more {
border-color: rgba(99, 156, 222, 0.28);
color: #8fb6e8;
}
body.theme-dark:not(.auth-required) .account-page-projects-more-chev {
color: #8fb6e8;
}
body.theme-dark:not(.auth-required) .account-page-projects-empty {
border-color: rgba(99, 156, 222, 0.22);
}
body.theme-dark:not(.auth-required) .account-page-project {
border-color: rgba(99, 156, 222, 0.18);
background: var(--surface-2);
}
body.theme-dark:not(.auth-required) .account-page-project:hover {
background: rgba(99, 156, 222, 0.12);
}
body.theme-dark:not(.auth-required) .account-page-avatar-cam {
border-color: var(--surface-2, #1a2434);
}
@media (max-width: 720px) {
.account-page-projects {
grid-template-columns: 1fr;
}
}
.account-page-panel {
background: #ffffff;
width: 100% !important;
max-width: none !important;
min-height: 100%;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: auto;
}
.account-page {
width: 100%;
max-width: none;
min-height: 100%;
margin: 0;
padding: 0;
gap: 0;
}
.account-page-shell {
width: 100%;
max-width: none;
min-width: 0; 
min-height: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.account-page-main {
flex: 1 1 auto;
width: 100%;
min-width: 0;
box-sizing: border-box;
margin-top: 18px;
padding: 18px 32px 32px;
border: 0;
border-top: 1px solid var(--border-soft);
border-radius: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
}
.account-page-editcard {
min-height: 100%;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.account-page-hero,
.account-projects-panel,
.account-resource-panel {
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.account-page-hero {
position: relative;
display: grid;
width: 100%;
min-width: 0;
box-sizing: border-box;
gap: 0;
padding: 28px 32px 0;
}
.account-page-hero-main {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
}
.account-page-profile {
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 16px;
min-width: 0;
}
.account-page-avatar {
width: 64px;
height: 64px;
border-radius: 18px;
font-size: 26px;
box-shadow: var(--shadow-card);
}
.account-page-name {
font-size: 24px;
line-height: 1.18;
}
.account-page-bio {
max-width: 760px;
font-size: 13px;
color: #56657a;
}
.account-page-hero-actions {
flex: none;
display: flex;
align-items: center;
gap: 8px;
}
.account-page-more-btn {
flex: none !important;
width: 38px;
padding: 0 !important;
}
.account-page-more-btn svg {
width: 18px;
height: 18px;
}
.account-page-quick,
.account-content-action,
.account-command-btn,
.account-page-tab,
.account-resource-more {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 38px !important;
padding: 0 13px !important;
border: 1px solid #dce6f2;
border-radius: 11px;
background: #ffffff;
color: #243247;
font-size: 13px;
font-weight: 760;
line-height: 1;
cursor: pointer;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}
.account-page-quick svg,
.account-content-action svg,
.account-command-btn svg,
.account-page-tab svg,
.account-resource-more svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.account-page-quick:hover,
.account-content-action:hover,
.account-command-btn:hover,
.account-page-tab:hover,
.account-resource-more:hover {
border-color: #bdd0e7;
background: #f8fbff;
}
.account-page-quick.is-primary,
.account-content-action.is-primary,
.account-command-btn.is-primary {
border-color: #1f6fc7;
background: #1671d8;
color: #ffffff;
box-shadow: 0 8px 18px rgba(22, 113, 216, 0.18);
}
.account-page-stats {
width: 100%;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-top: 18px;
padding-top: 18px;
border: 0;
border-top: 1px solid var(--border-soft);
border-radius: 0;
background: transparent;
}
.account-page-stat {
min-height: 0;
gap: 4px;
padding: 2px 16px;
border-right: 1px solid var(--border-soft);
background: transparent;
}
.account-page-stat:first-child {
padding-left: 0;
}
.account-page-stat:last-child {
border-right: 0;
}
.account-page-stat.is-action:hover {
background: transparent;
}
.account-page-stat.is-action:hover b {
color: var(--accent);
}
.account-page-stats b {
font-size: 21px;
font-weight: 800;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
color: #121826;
}
.account-page-stats span {
font-size: 12px;
color: #5a6a80;
}
.account-page-menu {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
margin-top: 16px;
padding-top: 14px;
border: 0;
border-top: 1px solid var(--border-soft);
background: transparent;
}
.account-page-menu .account-page-row-danger {
margin-left: auto;
}
.account-page-row {
height: 32px;
min-height: 32px !important;
padding: 0 10px !important;
gap: 7px;
border-radius: 8px;
border-color: transparent;
background: transparent;
color: #5a6a80;
font-size: 12.5px;
font-weight: 700;
}
body:not(.auth-required) .account-page .account-page-row {
min-height: 32px !important;
padding: 0 10px !important;
}
.account-page-row:hover {
background: #f1f5fa;
color: var(--text);
}
.account-page-row-icon {
width: 18px;
height: 18px;
border-radius: 0;
background: transparent;
}
.account-page-row-icon svg {
width: 15px;
height: 15px;
}
.account-page-tabs {
display: flex;
align-items: stretch;
gap: 2px;
width: 100%;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: inset 0 -1px 0 var(--border-soft);
overflow-x: auto;
overflow-y: hidden;
}
.account-page-tab {
flex: none;
min-height: 42px !important;
padding: 0 15px !important;
border: 0 !important;
border-bottom: 2px solid transparent !important;
border-radius: 0 !important;
background: transparent !important;
color: #5d6b7f;
font-weight: 720;
box-shadow: none !important;
transition: color 0.15s ease, border-color 0.15s ease;
}
.account-page-tab:hover {
color: var(--text);
}
.account-page-tab.is-active {
color: var(--accent);
border-bottom-color: var(--accent) !important;
}
.account-page-content {
margin-top: 14px;
}
.account-overview-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
overflow: hidden;
}
.account-overview-card {
display: grid;
align-content: start;
gap: 10px;
min-height: 0;
padding: 18px;
border-right: 1px solid var(--border-soft);
border-bottom: 1px solid var(--border-soft);
}
.account-overview-card:nth-child(2n) {
border-right: 0;
}
.account-overview-card:nth-child(n + 3) {
border-bottom: 0;
}
.account-overview-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.account-overview-card-head strong,
.account-resource-head strong,
.account-page-section-head strong {
color: #121826;
font-size: 17px;
font-weight: 860;
}
.account-overview-card-head span,
.account-resource-head span,
.account-page-section-head span {
color: #758399;
font-size: 12px;
font-weight: 650;
}
.account-overview-card-head button {
min-height: 28px !important;
padding: 0 9px !important;
border: 1px solid #dfe8f3;
border-radius: 9px;
background: #f8fafc;
color: #2f6db7;
font-size: 12px;
font-weight: 760;
cursor: pointer;
}
.account-command-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.account-command-btn {
min-height: 56px !important;
justify-content: flex-start;
padding: 0 14px !important;
border-radius: 13px;
}
.account-mini-list {
display: grid;
gap: 7px;
}
.account-mini-item,
.account-mini-skeleton {
width: 100%;
min-height: 50px !important;
display: grid;
grid-template-columns: 34px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 7px 8px !important;
border: 1px solid transparent;
border-radius: 11px;
background: transparent;
color: inherit;
text-align: left;
}
.account-mini-item {
cursor: pointer;
}
.account-mini-item:hover {
border-color: #dce6f2;
background: #f8fbff;
}
.account-mini-icon,
.account-mini-preview {
width: 34px;
height: 34px;
display: inline-grid;
place-items: center;
overflow: hidden;
border-radius: 10px;
background: #eef5ff;
color: #2f6db7;
}
.account-mini-preview img,
.account-resource-preview img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.account-mini-item svg,
.account-mini-icon svg,
.account-mini-preview svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
}
.account-mini-item span:not(.account-mini-icon):not(.account-mini-preview),
.account-mini-skeleton span:last-child {
display: grid;
gap: 3px;
min-width: 0;
}
.account-mini-item strong {
overflow: hidden;
color: #121826;
font-size: 13px;
font-weight: 790;
text-overflow: ellipsis;
white-space: nowrap;
}
.account-mini-item small,
.account-mini-item time {
overflow: hidden;
color: #7b8798;
font-size: 11px;
font-weight: 620;
text-overflow: ellipsis;
white-space: nowrap;
}
.account-mini-empty {
min-height: 78px;
display: grid;
place-items: center;
border: 1px dashed #dfe8f3;
border-radius: 12px;
color: #7b8798;
font-size: 12px;
}
.account-projects-panel,
.account-resource-panel {
padding: 0;
}
.account-resource-panel {
display: grid;
gap: 14px;
}
.account-resource-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
}
.account-resource-head > div:first-child {
display: grid;
gap: 4px;
}
.account-resource-actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
.account-content-search {
flex: none;
width: 100%;
}
.account-resource-more {
grid-column: 1 / -1;
width: 100%;
min-height: 42px !important;
border-style: dashed;
}
.account-page-editcard {
max-width: none;
margin: 0;
padding: 28px 32px;
}
.account-page :where(button, a, select, input, [role="button"], [tabindex]):focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
@media (max-width: 760px) {
.account-page {
padding: 0;
}
.account-page-shell {
padding: 0;
border-radius: 0;
}
.account-page-hero {
padding: 16px 14px 0;
}
.account-page-main,
.account-page-editcard {
padding: 14px;
}
.account-page-hero-main,
.account-resource-head {
display: grid;
gap: 12px;
}
.account-page-profile {
align-items: center;
}
.account-page-hero-actions,
.account-resource-actions {
justify-content: stretch;
}
.account-page-quick,
.account-content-action {
flex: 1;
}
.account-page-profile {
gap: 12px;
}
.account-page-avatar {
width: 62px;
height: 62px;
border-radius: 17px;
font-size: 26px;
}
.account-page-name {
font-size: 20px;
}
.account-page-stats {
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-top: 12px;
padding-top: 12px;
}
.account-page-stat {
min-height: 0;
gap: 2px;
padding: 2px 8px;
border-right: 1px solid #e7edf5;
border-top: 0;
}
.account-page-stat:first-child {
padding-left: 0;
}
.account-page-stat:last-child {
border-right: 0;
}
.account-page-stats b {
font-size: 17px;
}
.account-page-stats span {
font-size: 10.5px;
}
.account-projects-toolbar {
display: flex; 
flex-wrap: nowrap;
align-items: center;
gap: 8px;
}
.account-projects-pills {
display: flex;
flex: 1 1 auto;
width: auto;
min-width: 0;
}
.account-proj-pill {
flex: 1 1 0;
min-width: 0;
padding: 6px 6px;
}
.account-projects-sort {
flex: 0 0 auto;
width: 104px;
min-width: 0;
min-height: var(--mobile-control-h, 32px);
height: var(--mobile-control-h, 32px);
padding: 4px 8px;
margin-left: 0;
}
.account-page-hero-main {
gap: 10px;
}
.account-page-tab {
padding: 0 8px !important;
gap: 5px;
}
.account-page-tab svg {
display: none;
}
.account-page-menu {
gap: 6px;
}
.account-page-row {
flex: 1 1 calc(50% - 6px);
}
.account-overview-grid,
.account-command-grid {
grid-template-columns: 1fr;
}
.account-page-projects,
.account-resource-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.account-overview-card {
border-right: 0;
border-bottom: 1px solid var(--border-soft);
padding: 14px;
}
.account-overview-card:last-child {
border-bottom: 0;
}
.account-projects-panel,
.account-resource-panel {
padding: 0;
border-radius: 0;
}
}
body.theme-dark:not(.auth-required) .account-page-panel {
background: var(--bg);
}
body.theme-dark:not(.auth-required) .account-page-hero,
body.theme-dark:not(.auth-required) .account-page-editcard,
body.theme-dark:not(.auth-required) .account-projects-panel,
body.theme-dark:not(.auth-required) .account-resource-panel,
body.theme-dark:not(.auth-required) .account-overview-grid,
body.theme-dark:not(.auth-required) .account-card {
border-color: rgba(99, 156, 222, 0.18);
background: rgba(24, 34, 49, 0.9);
}
body.theme-dark:not(.auth-required) .account-page-hero,
body.theme-dark:not(.auth-required) .account-page-editcard,
body.theme-dark:not(.auth-required) .account-projects-panel,
body.theme-dark:not(.auth-required) .account-resource-panel {
border-color: transparent;
background: transparent;
}
body.theme-dark:not(.auth-required) .account-card-cover {
background: rgba(15, 23, 42, 0.35);
}
body.theme-dark:not(.auth-required) .account-card-more {
background: rgba(24, 34, 49, 0.86);
color: #9fc4f2;
}
body.theme-dark:not(.auth-required) .account-overview-card {
border-color: rgba(99, 156, 222, 0.16);
}
body.theme-dark:not(.auth-required) .account-page-tabs {
box-shadow: inset 0 -1px 0 rgba(99, 156, 222, 0.20);
}
body.theme-dark:not(.auth-required) .account-page-tab {
color: #93a4bc;
}
body.theme-dark:not(.auth-required) .account-page-tab.is-active {
color: #8fb6e8;
border-bottom-color: #8fb6e8 !important;
}
body.theme-dark:not(.auth-required) .account-page-stats {
border-color: rgba(99, 156, 222, 0.18);
background: rgba(15, 23, 42, 0.25);
}
body.theme-dark:not(.auth-required) .account-page-stat,
body.theme-dark:not(.auth-required) .account-page-stat:nth-child(n + 4) {
border-color: rgba(99, 156, 222, 0.14);
}
body.theme-dark:not(.auth-required) .account-page-stats b,
body.theme-dark:not(.auth-required) .account-mini-item strong,
body.theme-dark:not(.auth-required) .account-card-body strong,
body.theme-dark:not(.auth-required) .account-overview-card-head strong,
body.theme-dark:not(.auth-required) .account-resource-head strong {
color: var(--text);
}
body.theme-dark:not(.auth-required) .account-mini-item:hover {
background: rgba(99, 156, 222, 0.12);
}
.app-more-menu {
position: fixed;
inset: 0;
z-index: 9990;
}
.app-more-menu[hidden] {
display: none;
}
.app-more-backdrop {
position: absolute;
inset: 0;
background: transparent;
}
.app-more-panel {
position: fixed;
width: min(264px, calc(100vw - 24px));
max-height: min(76vh, 600px);
overflow: auto;
overscroll-behavior: contain;
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px;
border: 1px solid rgba(203, 213, 225, 0.7);
border-radius: 16px;
background: #ffffff;
box-shadow:
0 24px 56px -12px rgba(15, 23, 42, 0.22),
0 4px 14px rgba(15, 23, 42, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
animation: appMoreIn 0.16s cubic-bezier(0.2, 0.9, 0.3, 1);
transform-origin: 0 100%;
}
@keyframes appMoreIn {
from { opacity: 0; transform: translateY(8px) scale(0.97); }
to { opacity: 1; transform: none; }
}
.app-more-account {
margin: 0 0 6px;
padding: 0 0 8px;
border-bottom: 1px solid rgba(203, 213, 225, 0.5);
}
.app-more-id,
.app-more-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
margin: 0;
border: 0;
background: transparent;
text-align: left;
cursor: pointer;
box-shadow: none;
color: var(--text);
transition: background 0.13s ease;
}
.app-more-id {
padding: 9px 10px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(47, 109, 183, 0.08), rgba(120, 112, 180, 0.07));
}
.app-more-id:hover { background: linear-gradient(135deg, rgba(47, 109, 183, 0.13), rgba(120, 112, 180, 0.11)); }
.app-more-id .app-more-chev { transition: transform 0.15s ease; }
.app-more-id:hover .app-more-chev { transform: translateX(2px); }
.app-more-item {
min-height: 36px !important;
padding: 6px 9px !important;
border-radius: 10px;
font-size: 13px;
font-weight: 640;
line-height: 1.25;
}
body:not(.auth-required) .app-more-panel .app-more-item {
min-height: 36px !important;
padding: 6px 9px !important;
}
.app-more-item:hover { background: rgba(47, 109, 183, 0.07); }
.app-more-item:hover .app-more-item-icon { color: var(--accent, #2f6db7); }
.app-more-avatar {
flex: none;
width: 32px;
height: 32px;
border-radius: 11px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 14px;
font-weight: 800;
line-height: 1;
background: linear-gradient(135deg, #5b8fd6, #2f6db7);
box-shadow: 0 3px 8px -2px rgba(47, 109, 183, 0.5);
}
.app-more-avatar-guest {
background: linear-gradient(135deg, #9db4cf, #6f8bad);
}
.app-more-avatar-guest svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.app-more-id-text {
display: grid;
gap: 2px;
flex: 1;
min-width: 0;
}
.app-more-id-text strong {
color: var(--text);
font-size: 14px;
font-weight: 760;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.app-more-id-text span {
color: #64748b;
font-size: 12px;
font-weight: 560;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.app-more-group-title {
padding: 7px 10px 4px;
color: #94a3b8;
font-size: 11px;
font-weight: 820;
letter-spacing: 0;
}
.app-more-item-icon {
flex: none;
display: inline-grid;
place-items: center;
width: 24px;
height: 24px;
color: #7b8aa0;
transition: color 0.13s ease;
}
.app-more-item-icon svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.app-more-item-text {
flex: 1;
min-width: 0;
display: grid;
gap: 2px;
}
.app-more-item-label {
flex: 1;
min-width: 0;
color: var(--text);
font-size: 13px;
font-weight: 760;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.app-more-item-desc {
color: #7b8798;
font-size: 12px;
font-weight: 560;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.app-more-chev {
flex: none;
margin-left: auto;
display: inline-flex;
color: #cbd5e3;
}
.app-more-id .app-more-chev {
color: #9aa7b8;
}
.app-more-chev svg {
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.app-more-divider {
height: 1px;
margin: 8px 6px;
background: #eef2f7;
}
.app-more-item-danger {
color: var(--danger, #d64545);
}
.app-more-item-danger .app-more-item-icon,
.app-more-item-danger:hover .app-more-item-icon {
color: var(--danger, #d64545);
}
.app-more-item-danger:hover {
background: color-mix(in srgb, var(--danger, #d64545) 8%, transparent);
}
.notice-center-panel {
width: min(660px, calc(100vw - 24px));
max-height: 84vh;
display: flex;
flex-direction: column;
padding: 0;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 40px 90px -28px rgba(15, 23, 42, 0.4), 0 6px 22px -10px rgba(15, 23, 42, 0.16);
}
.notice-hero {
position: relative;
flex: none;
display: flex;
align-items: center;
gap: 11px;
padding: 15px 20px 14px;
background:
radial-gradient(130% 240% at 0% 0%, rgba(75, 134, 221, 0.08), transparent 52%),
radial-gradient(110% 220% at 100% 0%, rgba(122, 95, 208, 0.06), transparent 48%),
var(--panel, #fff);
border-bottom: 1px solid color-mix(in srgb, var(--border, #e3e8f0) 72%, transparent);
}
.notice-hero-icon {
flex: none;
width: 32px;
height: 32px;
border-radius: 10px;
display: grid;
place-items: center;
background: linear-gradient(135deg, #4b86dd, #7a5fd0);
box-shadow: 0 8px 16px -8px rgba(87, 111, 214, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.notice-hero-icon svg {
width: 17px;
height: 17px;
fill: none;
stroke: #fff;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.notice-hero-text {
min-width: 0;
display: flex;
align-items: baseline;
gap: 10px;
}
.notice-hero-text h2 {
margin: 0;
font-size: 16px;
font-weight: 800;
letter-spacing: 0.01em;
color: var(--text);
}
.notice-hero-text p {
margin: 0;
font-size: 12px;
color: var(--muted, #7a8699);
}
.notice-head-actions {
margin-left: auto;
display: flex;
gap: 10px;
align-items: center;
flex: none;
}
.notice-publish-btn {
height: 30px;
padding: 0 14px;
border: none;
border-radius: 10px;
background: linear-gradient(135deg, #3d7bd4, #6a55c8);
color: #fff;
font-size: 13px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 8px 18px -8px rgba(87, 111, 214, 0.65);
transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.notice-publish-btn:hover {
filter: brightness(1.07);
box-shadow: 0 10px 22px -8px rgba(87, 111, 214, 0.7);
}
.notice-publish-btn:active {
transform: translateY(1px);
}
.notice-close-btn {
border-radius: 10px;
}
.changelog-body {
overflow: auto;
overscroll-behavior: contain;
padding: 22px 24px 18px;
display: block;
}
.notice-entry {
position: relative;
padding: 10px 14px 22px 40px;
border-radius: 14px;
transition: background 0.16s ease;
}
.notice-entry:hover {
background: color-mix(in srgb, var(--notice-accent, #6b7d9c) 4%, transparent);
}
.notice-entry:last-child {
padding-bottom: 12px;
}
.notice-entry::before {
content: "";
position: absolute;
left: 19px;
top: 34px;
bottom: -4px;
width: 2px;
border-radius: 1px;
background: color-mix(in srgb, var(--muted, #9aa5b8) 30%, transparent);
}
.notice-entry:last-child::before {
background: linear-gradient(180deg, color-mix(in srgb, var(--muted, #9aa5b8) 30%, transparent), transparent 78%);
}
.notice-node {
position: absolute;
left: 13px;
top: 15px;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--panel, #fff);
border: 3.5px solid var(--notice-accent, #96a1b5);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--notice-accent, #96a1b5) 13%, transparent);
z-index: 1;
}
.notice-type-update { --notice-accent: #2f6db7; }
.notice-type-notice { --notice-accent: #7c5cbf; }
.notice-type-maintenance { --notice-accent: #cf7226; }
.notice-entry-new .notice-node {
animation: notice-node-pulse 2.4s ease-in-out infinite;
}
@keyframes notice-node-pulse {
0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--notice-accent, #2f6db7) 22%, transparent); }
50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--notice-accent, #2f6db7) 9%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
.notice-entry-new .notice-node { animation: none; }
}
.notice-entry-head {
display: flex;
align-items: center;
gap: 8px;
min-height: 24px;
}
.notice-badge {
flex: none;
padding: 3px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.02em;
color: var(--notice-accent, #667085);
background: color-mix(in srgb, var(--notice-accent, #667085) 10%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--notice-accent, #667085) 18%, transparent);
}
.notice-new-tag {
flex: none;
padding: 2px 8px;
border-radius: 999px;
background: linear-gradient(135deg, #f0666a, #dd4a53);
color: #fff;
font-size: 10px;
font-weight: 800;
box-shadow: 0 3px 8px -3px rgba(221, 74, 83, 0.55);
}
.notice-entry-date {
flex: none;
color: color-mix(in srgb, var(--muted, #8a94a6) 88%, transparent);
font-size: 12px;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
.notice-admin-row {
margin-left: auto;
display: inline-flex;
gap: 4px;
opacity: 0;
transition: opacity 0.18s ease;
}
.notice-admin-row + .notice-entry-date {
flex: none;
}
.notice-entry-head > .notice-entry-date:last-child {
margin-left: 0;
}
.notice-entry-head > .notice-badge + .notice-entry-date:last-child,
.notice-entry-head > .notice-new-tag + .notice-entry-date:last-child {
margin-left: auto;
}
.notice-entry:hover .notice-admin-row,
.notice-admin-row:focus-within {
opacity: 1;
}
@media (hover: none) {
.notice-admin-row { opacity: 0.75; }
}
.notice-admin-btn {
border: none;
background: transparent;
color: var(--muted, #7a8699);
border-radius: 8px;
padding: 3px 10px;
font-size: 12px;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.notice-admin-btn:hover {
background: color-mix(in srgb, var(--accent, #2f6db7) 10%, transparent);
color: var(--accent, #2f6db7);
}
.notice-admin-btn-danger:hover {
background: color-mix(in srgb, var(--danger, #d64545) 10%, transparent);
color: var(--danger, #d64545);
}
.notice-entry-title {
display: block;
margin-top: 9px;
color: var(--text);
font-size: 15.5px;
font-weight: 800;
letter-spacing: 0.01em;
line-height: 1.45;
overflow-wrap: anywhere;
}
.notice-items {
margin: 8px 0 0;
padding: 0;
list-style: none;
display: grid;
gap: 5px;
}
.notice-items li {
position: relative;
padding-left: 16px;
color: color-mix(in srgb, var(--text) 80%, transparent);
font-size: 13px;
line-height: 1.75;
overflow-wrap: anywhere;
}
.notice-items li::before {
content: "";
position: absolute;
left: 2px;
top: 0.72em;
width: 6px;
height: 2px;
border-radius: 1px;
background: color-mix(in srgb, var(--notice-accent, #96a1b5) 55%, transparent);
}
.notice-empty {
margin: 52px 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
color: var(--muted, #8a94a6);
font-size: 13px;
}
.notice-empty svg {
width: 34px;
height: 34px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0.55;
}
.notice-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #e05d5d;
margin-left: 6px;
vertical-align: 1px;
}
#refreshJobsBtn.has-notice-dot {
position: relative;
}
#refreshJobsBtn.has-notice-dot::after {
content: "";
position: absolute;
top: 5px;
right: 5px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #e05d5d;
box-shadow: 0 0 0 2px var(--panel, #fff);
}
.notice-editor {
flex: none;
border: 1px solid color-mix(in srgb, var(--accent, #2f6db7) 26%, var(--border, #dbe2ec));
border-radius: 16px;
padding: 16px 18px;
margin: 16px 24px 0;
display: grid;
gap: 12px;
background: color-mix(in srgb, var(--accent, #2f6db7) 4%, var(--panel, #fff));
box-shadow: 0 12px 28px -18px rgba(38, 62, 105, 0.35);
}
.notice-editor-head strong {
color: var(--text);
font-size: 14px;
font-weight: 800;
}
.notice-editor label {
display: grid;
gap: 6px;
font-size: 12px;
font-weight: 700;
color: var(--muted, #667085);
}
.notice-editor .notice-email-option {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--text, #1f2937);
}
.notice-editor .notice-email-option input {
width: 16px;
height: 16px;
accent-color: #3d7bd4;
}
.notice-editor-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.notice-editor-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
}
.notice-editor-actions [data-notice-save] {
border: none;
border-radius: 10px;
padding: 0 18px;
background: linear-gradient(135deg, #3d7bd4, #6a55c8);
color: #fff;
font-weight: 700;
box-shadow: 0 6px 14px -6px rgba(87, 111, 214, 0.6);
}
.notice-editor-actions [data-notice-save]:hover {
filter: brightness(1.07);
}
body.theme-dark:not(.auth-required) .notice-center-panel {
box-shadow: 0 40px 90px -28px rgba(0, 0, 0, 0.7), 0 6px 22px -10px rgba(0, 0, 0, 0.4);
}
body.theme-dark:not(.auth-required) .notice-hero {
background:
radial-gradient(130% 240% at 0% 0%, rgba(90, 140, 210, 0.09), transparent 52%),
radial-gradient(110% 220% at 100% 0%, rgba(140, 112, 210, 0.07), transparent 48%),
var(--panel, #12151c);
border-bottom-color: #353b48;
}
body.theme-dark:not(.auth-required) .notice-entry::before {
background: #3a4150;
}
body.theme-dark:not(.auth-required) .notice-entry:last-child::before {
background: linear-gradient(180deg, #3a4150, transparent 78%);
}
body.theme-dark:not(.auth-required) .notice-node {
background: #1b1f28;
}
body.theme-dark:not(.auth-required) .notice-type-update { --notice-accent: #8db7e8; }
body.theme-dark:not(.auth-required) .notice-type-notice { --notice-accent: #b3a0e4; }
body.theme-dark:not(.auth-required) .notice-type-maintenance { --notice-accent: #e0a06a; }
body.theme-dark:not(.auth-required) .notice-editor {
background: #1b1f28;
border-color: #454c5c;
box-shadow: 0 12px 28px -18px rgba(0, 0, 0, 0.6);
}
body.theme-dark:not(.auth-required) button.notice-publish-btn,
body.theme-dark:not(.auth-required) .notice-editor-actions button[data-notice-save] {
background: linear-gradient(135deg, #4d85d6, #7a5fd0);
color: #fff;
border: none;
box-shadow: 0 8px 18px -8px rgba(60, 80, 170, 0.7);
}
body.theme-dark:not(.auth-required) #refreshJobsBtn.has-notice-dot::after {
box-shadow: 0 0 0 2px #1b1f28;
}
body.theme-dark:not(.auth-required) .app-more-panel {
background: var(--panel, #12151c);
border-color: var(--border);
box-shadow: 0 24px 56px -12px rgba(0, 0, 0, 0.6), 0 4px 14px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
body.theme-dark:not(.auth-required) .app-more-id {
background: linear-gradient(135deg, rgba(90, 140, 210, 0.13), rgba(120, 112, 180, 0.1));
}
body.theme-dark:not(.auth-required) .app-more-id:hover {
background: linear-gradient(135deg, rgba(90, 140, 210, 0.2), rgba(120, 112, 180, 0.16));
}
body.theme-dark:not(.auth-required) .app-more-account {
border-bottom-color: var(--border);
}
body.theme-dark:not(.auth-required) .app-more-item:hover {
background: rgba(99, 156, 222, 0.12);
}
body.theme-dark:not(.auth-required) .app-more-id-text span {
color: var(--muted);
}
body.theme-dark:not(.auth-required) .app-more-item-desc,
body.theme-dark:not(.auth-required) .app-more-group-title {
color: var(--muted);
}
body.theme-dark:not(.auth-required) .app-more-item-icon {
color: #8ba0bd;
}
body.theme-dark:not(.auth-required) .app-more-item:hover .app-more-item-icon {
color: #9cc4ec;
}
body.theme-dark:not(.auth-required) .app-more-item-danger:hover {
background: rgba(214, 69, 69, 0.14);
}
body.theme-dark:not(.auth-required) .app-more-divider {
background: var(--border);
}
body.theme-dark:not(.auth-required) .changelog-date {
background: rgba(99, 156, 222, 0.16);
color: #8fb6e8;
}
body.mobile-ui .app-more-backdrop {
background: transparent;
}
body.mobile-ui .app-more-panel {
width: min(236px, calc(100vw - 20px)) !important;
max-width: min(236px, calc(100vw - 20px)) !important;
max-height: min(72vh, 520px);
border-radius: 14px;
padding: 7px;
animation: appMoreIn 0.13s ease;
}
.admin-account-manager {
display: grid;
gap: 10px;
margin: 0 0 12px;
min-height: 0;
flex: 1 1 auto;
padding: 12px;
border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
border-radius: 16px;
background: linear-gradient(180deg, var(--blue-soft), var(--surface-2));
}
.admin-account-head {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
}
.admin-account-head-actions {
display: flex;
flex-wrap: nowrap;
gap: 8px;
align-items: center;
justify-content: flex-end;
min-width: 0;
}
.admin-account-search {
flex: 1 1 160px;
min-width: 120px;
max-width: 260px;
display: flex;
align-items: center;
}
.admin-account-search input {
width: 100%;
}
.admin-account-sort {
flex: 0 0 124px;
min-width: 0;
}
.admin-account-sort select {
width: 100%;
}
.admin-account-head-actions button {
flex: 0 0 auto;
white-space: nowrap;
}
.admin-account-toolbar {
display: flex;
gap: 10px;
align-items: flex-start;
}
.admin-account-toolbar .admin-account-create {
flex: 1 1 auto;
min-width: 0;
}
.admin-account-toolbar .admin-account-count {
flex: 0 0 auto;
align-self: center;
white-space: nowrap;
}
.admin-account-create {
border: 1px solid var(--border-soft);
border-radius: 12px;
background: color-mix(in srgb, var(--surface) 82%, var(--blue-soft));
}
.admin-account-create summary {
min-height: 34px;
display: flex;
align-items: center;
padding: 0 12px;
color: var(--accent-strong);
font-weight: 880;
cursor: pointer;
list-style: none;
}
.admin-account-create summary::-webkit-details-marker {
display: none;
}
.admin-account-create summary::after {
content: "+";
margin-left: auto;
color: var(--muted);
font-weight: 900;
}
.admin-account-create[open] summary {
border-bottom: 1px solid var(--border-soft);
}
.admin-account-create[open] summary::after {
content: "-";
}
.admin-account-grid {
display: grid;
grid-template-columns: minmax(130px, 1fr) minmax(130px, 1fr) minmax(130px, 1fr) 96px auto;
gap: 10px;
align-items: end;
padding: 10px;
}
.admin-account-grid label {
display: grid;
gap: 6px;
margin: 0;
color: var(--text);
font-weight: 850;
}
.admin-account-search {
display: grid;
gap: 4px;
margin: 0;
color: var(--text);
font-weight: 850;
}
.admin-account-search span {
color: var(--muted);
font-size: 12px;
}
.admin-account-count {
display: inline-flex;
align-items: center;
justify-content: flex-end;
color: var(--muted);
font-size: 12px;
font-weight: 780;
white-space: nowrap;
}
.admin-account-list {
display: grid;
gap: 10px;
grid-auto-rows: max-content;
align-content: start;
max-height: none;
min-height: 0;
overflow: visible;
}
.admin-account-row {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 10px;
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: 14px;
background: color-mix(in srgb, var(--surface) 94%, var(--blue-soft));
box-shadow: var(--shadow-card);
}
.admin-account-avatar {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
border-radius: 50%;
background: var(--accent-soft);
color: var(--accent);
font-weight: 920;
}
.admin-account-role-badge {
min-height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 3px 9px;
border-radius: 999px;
background: var(--surface-3);
color: var(--muted);
font-size: 11px;
font-style: normal;
font-weight: 880;
white-space: nowrap;
}
.admin-account-role-badge.is-admin {
background: var(--accent-soft);
color: var(--accent-strong);
}
.admin-account-role-badge.is-user {
background: var(--surface-3);
color: var(--muted);
}
.admin-account-points {
justify-self: end;
min-width: 0;
min-height: 30px;
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 7px;
padding: 5px 9px;
border: 1px solid var(--border-soft);
border-radius: 999px;
background: var(--surface-2);
color: var(--muted);
white-space: nowrap;
}
.admin-account-points span {
color: var(--muted);
font-size: 12px;
font-weight: 780;
}
.admin-account-points strong {
display: inline-flex;
align-items: center;
gap: 3px;
color: var(--text);
font-weight: 920;
line-height: 1;
}
.admin-account-storage {
justify-self: end;
min-width: 0;
min-height: 30px;
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 7px;
padding: 5px 9px;
border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border-soft));
border-radius: 999px;
background: var(--surface-2);
color: var(--muted);
white-space: nowrap;
}
.admin-account-storage span {
color: var(--muted);
font-size: 12px;
font-weight: 780;
}
.admin-account-storage strong {
color: var(--text);
font-size: 12px;
font-weight: 920;
line-height: 1;
}
.admin-account-storage.is-warning {
border-color: color-mix(in srgb, #f59e0b 38%, var(--border-soft));
background: color-mix(in srgb, #f59e0b 9%, var(--surface-2));
}
.admin-account-storage.is-danger {
border-color: color-mix(in srgb, var(--danger, #d92d20) 38%, var(--border-soft));
background: color-mix(in srgb, var(--danger, #d92d20) 8%, var(--surface-2));
}
.admin-account-storage.is-pending {
opacity: 0.78;
}
.admin-account-disabled-tag {
margin-left: 8px;
padding: 1px 8px;
border-radius: 999px;
background: color-mix(in srgb, var(--danger, #d92d20) 14%, transparent);
color: var(--danger, #d92d20);
font-size: 11px;
font-style: normal;
font-weight: 880;
vertical-align: middle;
}
.admin-account-row.is-disabled {
border-color: color-mix(in srgb, var(--danger, #d92d20) 32%, var(--border));
background: color-mix(in srgb, var(--danger, #d92d20) 5%, var(--surface));
}
.admin-account-row.is-disabled .admin-account-avatar {
filter: grayscale(0.6);
opacity: 0.7;
}
.admin-usage-view-banner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 12px;
margin-bottom: 10px;
padding: 8px 12px;
border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
border-radius: 10px;
background: var(--accent-soft);
color: var(--accent-strong);
font-size: 13px;
font-weight: 780;
}
.admin-usage-view-banner[hidden] {
display: none;
}
.admin-usage-view-banner button {
flex: 0 0 auto;
}
.admin-account-row input,
.admin-account-row select,
.admin-account-search input {
min-width: 0;
}
.admin-account-row.is-compact {
grid-template-columns: 32px minmax(0, 1fr) auto auto auto;
gap: 10px;
align-items: center;
padding: 10px 14px;
cursor: pointer;
}
.admin-account-row.is-compact:hover {
border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
}
.admin-account-main-compact {
min-width: 0;
}
.admin-account-main-compact strong {
display: flex;
align-items: center;
gap: 7px;
min-width: 0;
color: var(--text);
font-weight: 900;
}
.admin-account-main-compact span {
display: block;
margin-top: 3px;
overflow: hidden;
color: var(--muted);
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-account-detail-modal {
z-index: calc(var(--z-modal) + 40);
}
.admin-account-detail-panel {
display: flex;
flex-direction: column;
width: min(1260px, calc(100vw - 32px));
height: min(860px, calc(100dvh - 32px));
padding: 0;
border-radius: 14px;
overflow: hidden;
}
.admin-detail-head {
display: grid;
grid-template-columns: 40px minmax(180px, 1fr) auto auto;
gap: 12px;
align-items: center;
padding: 16px 20px 14px;
border-bottom: 1px solid var(--border-soft);
}
.admin-detail-head .admin-account-avatar {
width: 40px;
height: 40px;
}
.admin-detail-title {
min-width: 0;
}
.admin-detail-title strong {
display: flex;
align-items: center;
gap: 7px;
min-width: 0;
color: var(--text);
font-size: 15px;
font-weight: 920;
}
.admin-detail-title span {
display: block;
margin-top: 2px;
color: var(--muted);
font-size: 12px;
}
.admin-detail-key-metrics {
display: inline-flex;
align-items: stretch;
overflow: hidden;
border: 1px solid var(--border-soft);
border-radius: 8px;
background: var(--surface-2);
}
.admin-detail-head .admin-account-points,
.admin-detail-head .admin-account-storage,
.admin-detail-membership {
justify-self: auto;
min-height: 38px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
border: 0;
border-left: 1px solid var(--border-soft);
border-radius: 0;
background: transparent;
white-space: nowrap;
}
.admin-detail-head .admin-account-points {
border-left: 0;
}
.admin-detail-membership span,
.admin-detail-membership strong {
font-size: 12px;
}
.admin-detail-membership span {
color: var(--muted);
font-weight: 780;
}
.admin-detail-membership strong {
color: var(--text);
font-weight: 900;
}
.admin-detail-membership.is-active strong {
color: var(--success, #157f3d);
}
.admin-detail-head-actions,
.admin-detail-usage-actions {
display: flex;
align-items: center;
gap: 8px;
}
.admin-detail-head-actions .admin-detail-view-btn,
.admin-detail-usage-actions button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.admin-detail-head-actions .ui-icon,
.admin-detail-usage-actions .ui-icon,
.admin-detail-op-group h3 .ui-icon {
width: 16px;
height: 16px;
}
.admin-detail-close-btn {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid transparent;
border-radius: 8px;
background: transparent;
color: var(--muted);
font-size: 24px;
font-weight: 400;
line-height: 1;
cursor: pointer;
}
.admin-detail-close-btn:hover,
.admin-detail-close-btn:focus-visible {
border-color: var(--border-soft);
background: var(--surface-2);
color: var(--text);
}
.admin-detail-meta {
display: flex;
flex-wrap: wrap;
flex-shrink: 0;
gap: 6px 18px;
padding: 9px 20px;
border-bottom: 1px solid var(--border-soft);
background: var(--surface-2);
color: var(--muted);
font-size: 12px;
}
.admin-detail-meta strong {
color: var(--text);
font-weight: 880;
}
.admin-detail-body {
flex: 1 1 auto;
min-height: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) 410px;
overflow: hidden;
}
.admin-detail-usage {
min-height: 0;
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px 20px 18px;
}
.admin-detail-usage-head {
flex-shrink: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
}
.admin-detail-usage-title {
min-width: 0;
display: flex;
align-items: baseline;
gap: 10px;
}
.admin-detail-usage-title > strong {
color: var(--text);
font-size: 15px;
font-weight: 900;
}
.admin-detail-usage-stats {
color: var(--muted);
font-size: 12px;
}
.admin-detail-usage-filters {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-top: 12px;
border-top: 1px solid var(--border-soft);
}
.admin-detail-type-tabs {
display: inline-flex;
gap: 4px;
padding: 3px;
border: 1px solid var(--border-soft);
border-radius: 8px;
background: var(--surface-2);
}
.admin-detail-type {
min-height: 24px;
padding: 2px 10px;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--muted);
font-size: 12px;
font-weight: 820;
cursor: pointer;
}
.admin-detail-type.is-active {
background: var(--accent-soft);
color: var(--accent-strong);
}
.admin-detail-date-range {
display: inline-flex;
align-items: center;
gap: 7px;
}
.admin-detail-date-separator {
color: var(--muted);
font-size: 12px;
font-weight: 780;
}
.admin-detail-usage-table {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
border: 1px solid var(--border-soft);
border-radius: 8px;
background: var(--surface);
}
.admin-detail-usage-table tbody {
transition: opacity 0.15s ease;
}
.admin-detail-usage-table.is-loading tbody {
opacity: 0.45;
}
.admin-detail-usage-table table {
width: 100%;
border-collapse: collapse;
font-size: 13.5px;
}
.admin-detail-usage-table th,
.admin-detail-usage-table td {
padding: 9px 12px;
border-bottom: 1px solid var(--border-soft);
text-align: left;
white-space: nowrap;
}
.admin-detail-usage-table thead th {
position: sticky;
top: 0;
z-index: 1;
background: var(--surface-2);
color: var(--muted);
font-weight: 840;
}
.admin-detail-usage-table th:first-child,
.admin-detail-usage-table td:first-child {
width: 168px;
}
.admin-detail-usage-table th:nth-child(2),
.admin-detail-usage-table td:nth-child(2) {
width: 110px;
}
.admin-detail-usage-table th:nth-child(4),
.admin-detail-usage-table td:nth-child(4),
.admin-detail-usage-table th:nth-child(5),
.admin-detail-usage-table td:nth-child(5) {
width: 92px;
}
.admin-detail-usage-table td.account-usage-meta {
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
}
.admin-detail-usage-table td.negative {
color: var(--danger, #d92d20);
}
.admin-detail-usage-table td.positive {
color: var(--success, #157f3d);
}
.admin-detail-usage-foot {
flex-shrink: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.admin-detail-usage-foot .admin-detail-usage-more {
margin-right: auto;
}
.admin-detail-ops {
min-height: 0;
display: flex;
flex-direction: column;
overflow-y: auto;
padding: 16px 18px 18px;
border-left: 1px solid var(--border-soft);
background: var(--surface-2);
overscroll-behavior: contain;
}
.admin-detail-ops-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding-bottom: 12px;
}
.admin-detail-ops-head strong {
color: var(--text);
font-size: 15px;
font-weight: 900;
}
.admin-detail-ops-head span {
color: var(--muted);
font-size: 11px;
}
.admin-detail-op-group {
display: grid;
gap: 12px;
padding: 14px 0;
border-top: 1px solid var(--border-soft);
}
.admin-detail-op-group h3 {
min-height: 20px;
display: flex;
align-items: center;
gap: 7px;
margin: 0;
color: var(--text);
font-size: 12px;
font-weight: 900;
}
.admin-detail-op-group-title {
min-width: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.admin-detail-op-group-title > span {
overflow: hidden;
color: var(--muted);
font-size: 10.5px;
font-weight: 760;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-detail-op {
display: grid;
gap: 7px;
}
.admin-detail-entitlement-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.admin-detail-entitlement-grid > .admin-detail-op + .admin-detail-op {
padding-left: 12px;
border-left: 1px solid var(--border-soft);
}
.admin-detail-entitlement-grid .admin-detail-op-controls button {
padding-inline: 9px;
}
.admin-detail-op-copy {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.admin-detail-op-copy label {
color: var(--text);
font-size: 12px;
font-weight: 860;
}
.admin-detail-op-copy > span {
min-width: 0;
overflow: hidden;
color: var(--muted);
font-size: 11px;
font-weight: 760;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-detail-op-controls {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
align-items: center;
}
.admin-detail-op-controls input,
.admin-detail-op > input {
min-width: 0;
width: 100%;
}
.admin-detail-password-controls {
grid-template-columns: minmax(0, 1fr) auto auto;
}
.admin-detail-number-field {
position: relative;
min-width: 0;
}
.admin-detail-number-field input {
padding-right: 48px;
}
.admin-detail-number-field > span {
position: absolute;
top: 50%;
right: 28px;
color: var(--muted);
font-size: 11px;
font-weight: 780;
transform: translateY(-50%);
pointer-events: none;
}
.admin-account-storage-hint,
.admin-account-member-hint {
color: var(--muted);
font-size: 11px;
font-weight: 760;
}
.admin-detail-danger {
margin-top: auto;
padding: 14px 12px 12px;
border: 1px solid color-mix(in srgb, var(--danger, #d92d20) 24%, var(--border-soft));
border-radius: 8px;
background: color-mix(in srgb, var(--danger, #d92d20) 5%, var(--surface));
}
.admin-detail-danger h3 {
color: var(--danger, #d92d20);
}
.admin-detail-danger p {
margin: -4px 0 0;
color: var(--muted);
font-size: 11px;
line-height: 1.55;
}
.admin-detail-danger-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
@media (max-width: 640px) {
.admin-account-row.is-compact {
grid-template-columns: 32px minmax(0, 1fr) auto;
row-gap: 6px;
}
.admin-account-row.is-compact .admin-account-points {
grid-column: 2 / -1;
grid-row: 2;
justify-self: start;
}
.admin-account-row.is-compact .admin-account-storage {
grid-column: 2 / -1;
grid-row: 3;
justify-self: start;
}
}
@media (max-width: 820px) {
body:not(.auth-required) .admin-account-detail-modal.admin-account-detail-modal:not([hidden]) {
padding: 0 !important;
place-items: center !important;
}
.admin-account-detail-panel {
width: 100vw !important;
max-width: 100vw !important;
height: 100dvh !important;
max-height: 100dvh !important;
padding: 12px !important;
border-radius: 0 !important;
}
.admin-detail-head {
grid-template-columns: 40px minmax(0, 1fr) auto;
gap: 8px 10px;
padding: 12px;
}
.admin-detail-key-metrics {
grid-column: 1 / -1;
grid-row: 2;
width: 100%;
}
.admin-detail-key-metrics > * {
flex: 1 1 0;
justify-content: center;
}
.admin-detail-head-actions {
grid-column: 3;
grid-row: 1;
}
.admin-detail-head-actions .admin-detail-view-btn span {
display: none;
}
.admin-detail-meta {
flex-wrap: nowrap;
padding: 8px 12px;
overflow-x: auto;
}
.admin-detail-body {
display: block;
overflow-y: auto;
}
.admin-detail-usage {
min-height: 560px;
padding: 14px 12px;
}
.admin-detail-ops {
overflow: visible;
padding: 14px 12px 24px;
border-top: 1px solid var(--border-soft);
border-left: 0;
}
.admin-detail-type-tabs {
margin-left: 0;
}
.admin-detail-usage-table table {
min-width: 560px;
}
}
@media (max-width: 560px) {
.admin-detail-key-metrics {
overflow-x: auto;
}
.admin-detail-key-metrics > * {
flex: 0 0 auto;
}
.admin-detail-usage-head {
grid-template-columns: 1fr;
}
.admin-detail-usage-actions {
grid-row: 2;
}
.admin-detail-usage-filters {
align-items: stretch;
flex-direction: column;
}
.admin-detail-type-tabs,
.admin-detail-date-range {
width: 100%;
}
.admin-detail-type {
flex: 1 1 0;
padding-inline: 6px;
}
.admin-detail-date {
flex: 1 1 0;
}
.admin-detail-date input {
width: 100%;
}
.admin-detail-password-controls {
grid-template-columns: minmax(0, 1fr) auto;
}
.admin-detail-password-controls .admin-account-password-btn {
grid-column: 1 / -1;
}
}
.admin-audit-manager {
display: grid;
gap: 10px;
min-height: 0;
padding: 12px;
border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
border-radius: 16px;
background: linear-gradient(180deg, var(--blue-soft), var(--surface-2));
}
.admin-audit-head {
grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr);
align-items: end;
}
.admin-audit-head-actions {
display: grid;
grid-template-columns: minmax(180px, 1fr) minmax(150px, 0.45fr) auto;
gap: 8px;
align-items: end;
}
.admin-audit-head-actions input,
.admin-audit-head-actions select {
min-width: 0;
}
.admin-audit-list {
display: grid;
gap: 8px;
min-height: 0;
}
.admin-audit-row {
display: grid;
grid-template-columns: minmax(150px, 0.62fr) minmax(120px, 0.42fr) minmax(220px, 1fr) minmax(210px, 0.72fr);
gap: 10px;
align-items: center;
padding: 10px;
border: 1px solid var(--border);
border-radius: 12px;
background: color-mix(in srgb, var(--surface) 95%, var(--blue-soft));
}
.admin-audit-main,
.admin-audit-target,
.admin-audit-meta {
min-width: 0;
display: grid;
gap: 3px;
}
.admin-audit-main strong,
.admin-audit-target strong {
overflow: hidden;
color: var(--text);
font-weight: 900;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-audit-main span,
.admin-audit-target span,
.admin-audit-meta span {
overflow: hidden;
color: var(--muted);
font-size: 12px;
font-weight: 760;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-audit-summary {
min-width: 0;
overflow: hidden;
color: var(--text);
font-size: 12.5px;
font-weight: 760;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-audit-meta {
justify-items: end;
text-align: right;
}
.admin-audit-more {
display: flex;
gap: 8px;
justify-content: flex-end;
}
.admin-feedback-manager {
display: grid;
gap: 10px;
min-height: 0;
padding: 12px;
border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
border-radius: 16px;
background: linear-gradient(180deg, var(--blue-soft), var(--surface-2));
}
.admin-feedback-head {
grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr);
align-items: end;
}
.admin-feedback-head-actions {
display: grid;
grid-template-columns: minmax(160px, 1fr) minmax(120px, 0.4fr) minmax(120px, 0.4fr) auto;
gap: 8px;
align-items: end;
}
.admin-feedback-head-actions input,
.admin-feedback-head-actions select {
min-width: 0;
}
.admin-feedback-list {
display: grid;
gap: 8px;
min-height: 0;
}
.admin-feedback-row {
display: grid;
gap: 8px;
padding: 12px 12px 12px 15px;
border: 1px solid var(--border);
border-left: 4px solid #e09a3c; 
border-radius: 12px;
background: color-mix(in srgb, var(--surface) 95%, var(--blue-soft));
}
.admin-feedback-row.is-done {
border-left-color: #34a26b; 
opacity: 0.72;
}
.admin-feedback-content {
color: var(--text);
font-size: 13.5px;
line-height: 1.6;
white-space: pre-wrap;
word-break: break-word;
}
.admin-feedback-top {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.admin-feedback-type,
.admin-feedback-status {
padding: 2px 9px;
border-radius: 999px;
font-size: 12px;
font-weight: 800;
}
.admin-feedback-type {
color: var(--accent);
background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}
.admin-feedback-type.type-bug {
color: #b42318;
background: color-mix(in srgb, #f97066 22%, var(--surface));
}
.admin-feedback-type.type-suggestion {
color: #1f6f43;
background: color-mix(in srgb, #47cd89 22%, var(--surface));
}
.admin-feedback-status.status-open {
color: var(--accent);
background: color-mix(in srgb, var(--accent) 16%, var(--surface));
}
.admin-feedback-status.status-done {
color: var(--muted);
background: color-mix(in srgb, var(--muted) 14%, var(--surface));
}
.admin-feedback-time {
margin-left: auto;
color: var(--muted);
font-size: 12px;
font-weight: 760;
}
.admin-feedback-content {
color: var(--text);
font-size: 13px;
font-weight: 600;
line-height: 1.5;
white-space: pre-wrap;
word-break: break-word;
}
.admin-feedback-imgs {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.admin-feedback-img {
width: 96px;
height: 96px;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--border);
background: var(--surface);
cursor: zoom-in;
transition: border-color 0.12s ease, transform 0.12s ease;
}
.admin-feedback-img:hover {
border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
transform: translateY(-1px);
}
.admin-feedback-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.admin-feedback-meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
color: var(--muted);
font-size: 12px;
font-weight: 760;
}
.admin-feedback-meta span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-feedback-toggle {
margin-left: auto;
padding: 4px 12px;
font-size: 12px;
}
.admin-feedback-more {
display: flex;
gap: 8px;
justify-content: flex-end;
}
.admin-recycle-manager {
display: grid;
gap: 10px;
min-height: 0;
padding: 12px;
border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
border-radius: 16px;
background: linear-gradient(180deg, var(--blue-soft), var(--surface-2));
}
.admin-recycle-head {
grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr);
align-items: end;
}
.admin-recycle-head-actions {
display: grid;
grid-template-columns: minmax(160px, 1fr) minmax(120px, 0.4fr) auto auto;
gap: 8px;
align-items: center;
}
.admin-recycle-head-actions input,
.admin-recycle-head-actions select {
min-width: 0;
}
.admin-recycle-list {
display: grid;
gap: 8px;
}
.admin-recycle-row {
display: grid;
grid-template-columns: minmax(150px, 0.58fr) minmax(110px, 0.34fr) minmax(220px, 1fr) minmax(170px, 0.56fr) auto;
gap: 10px;
align-items: center;
padding: 10px;
border: 1px solid var(--border);
border-radius: 12px;
background: color-mix(in srgb, var(--surface) 95%, var(--blue-soft));
}
.admin-recycle-main,
.admin-recycle-owner,
.admin-recycle-meta {
min-width: 0;
display: grid;
gap: 3px;
}
.admin-recycle-main strong,
.admin-recycle-owner strong {
overflow: hidden;
color: var(--text);
font-weight: 900;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-recycle-main span,
.admin-recycle-owner span,
.admin-recycle-meta span {
overflow: hidden;
color: var(--muted);
font-size: 12px;
font-weight: 760;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-recycle-detail {
min-width: 0;
overflow: hidden;
color: var(--text);
font-size: 12.5px;
font-weight: 760;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-recycle-meta {
justify-items: end;
text-align: right;
}
.admin-recycle-actions {
display: inline-flex;
gap: 6px;
justify-content: flex-end;
}
.admin-recycle-actions button {
white-space: nowrap;
}
.admin-recycle-more {
display: flex;
gap: 8px;
justify-content: flex-end;
}
.account-usage-table-wrap {
min-height: 0;
overflow: visible;
border: 1px solid var(--border);
border-radius: 14px;
background: #ffffff;
}
.account-usage-more {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 10px;
color: var(--muted);
font-size: 12px;
font-weight: 820;
}
.account-usage-more button {
min-height: 34px;
padding: 7px 12px;
white-space: nowrap;
}
.account-usage-history {
display: grid;
min-height: 0;
}
.account-usage-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
table-layout: fixed;
}
.account-usage-table th,
.account-usage-table td {
padding: 8px 10px;
border-bottom: 1px solid var(--border);
text-align: left;
vertical-align: middle;
line-height: 1.28;
}
.account-usage-table th {
position: static;
background: #f7fafc;
color: var(--muted);
font-size: 12px;
font-weight: 820;
}
.account-usage-table td.negative {
color: #b42318;
font-weight: 820;
}
.account-usage-table td.positive {
color: #2f6db7;
font-weight: 820;
}
.account-usage-meta {
max-width: 320px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.account-usage-empty {
color: var(--muted);
text-align: center !important;
padding: 30px !important;
}
body.theme-dark:not(.auth-required) .account-summary {
border-color: rgba(125, 183, 255, 0.32);
background: rgba(47, 109, 183, 0.2);
color: #dbe9fa;
}
body.theme-dark:not(.auth-required) .account-summary:hover {
background: rgba(47, 109, 183, 0.3);
}
body.theme-dark:not(.auth-required) .account-usage-tabs {
border-color: rgba(141, 149, 165, 0.24);
background: rgba(10, 18, 32, 0.78);
}
body.theme-dark:not(.auth-required) .account-usage-tab {
color: #a8b6c9;
}
body.theme-dark:not(.auth-required) .account-usage-tab:hover {
border-color: rgba(125, 183, 255, 0.26);
background: rgba(47, 109, 183, 0.2);
color: #dbe9fa;
}
body.theme-dark:not(.auth-required) .account-usage-tab.active {
border-color: rgba(90, 166, 232, 0.34);
background: #2f6db7;
color: #f8fffd;
box-shadow: 0 10px 26px rgba(16, 24, 40, 0.3);
}
body.theme-dark:not(.auth-required) .account-usage-summary div,
body.theme-dark:not(.auth-required) .account-redeem-card,
body.theme-dark:not(.auth-required) .account-usage-table-wrap {
border-color: rgba(148, 163, 184, 0.28);
background: rgba(15, 23, 42, 0.92);
}
body.theme-dark:not(.auth-required) .account-redeem-card strong {
color: #e8eef8;
}
body.theme-dark:not(.auth-required) .account-redeem-card span {
color: #9fb0c7;
}
body.theme-dark:not(.auth-required) .account-usage-table th {
background: #101a2a;
color: #9fb0c7;
}
body.theme-dark:not(.auth-required) .account-usage-table th,
body.theme-dark:not(.auth-required) .account-usage-table td {
border-bottom-color: rgba(148, 163, 184, 0.18);
}
body.theme-dark:not(.auth-required) .account-usage-summary strong,
body.theme-dark:not(.auth-required) .account-usage-table {
color: #e8eef8;
}
body.theme-dark:not(.auth-required) .account-usage-summary {
background: rgba(10, 18, 32, 0.88);
}
body.theme-dark:not(.auth-required) .account-usage-filter {
border-color: rgba(141, 149, 165, 0.24);
background: rgba(10, 18, 32, 0.78);
}
body.theme-dark:not(.auth-required) .account-usage-filter button {
color: #a8b6c9;
}
body.theme-dark:not(.auth-required) .account-usage-filter button:hover {
border-color: rgba(125, 183, 255, 0.26);
background: rgba(47, 109, 183, 0.2);
color: #dbe9fa;
}
body.theme-dark:not(.auth-required) .account-usage-filter button.active {
border-color: rgba(90, 166, 232, 0.34);
background: #2f6db7;
color: #f8fffd;
box-shadow: 0 10px 22px rgba(16, 24, 40, 0.3);
}
body.theme-dark:not(.auth-required) .media-preview-stage,
body.theme-dark:not(.auth-required) .preview-stage {
border-color: rgba(83, 90, 104, 0.78);
background: rgba(10, 18, 32, 0.92);
}
body.theme-dark:not(.auth-required) .media-video-controls {
border-color: rgba(125, 183, 255, 0.26);
background: rgba(15, 23, 42, 0.94);
}
body.theme-dark:not(.auth-required) .media-video-time {
color: #d8e6f4;
}
body.sidebar-collapsed .topbar .top-actions {
width: 100%;
min-width: 0;
gap: 8px;
overflow: hidden;
}
body.sidebar-collapsed .account-bar {
display: grid;
grid-template-columns: 1fr;
width: 100%;
min-width: 0;
gap: 0;
overflow: hidden;
}
body.sidebar-collapsed .account-summary {
display: grid;
place-items: center;
width: 100%;
max-width: none;
height: 36px;
min-width: 0;
padding: 0;
border-radius: 10px;
font-size: 0;
}
body.sidebar-collapsed .account-summary::before {
content: none;
display: none;
}
body.sidebar-collapsed #refreshJobsBtn::after,
body.sidebar-collapsed #themeToggleBtn::after {
display: inline-grid;
place-items: center;
width: 18px;
height: 18px;
color: currentColor;
font-size: 16px;
line-height: 1;
}
body.sidebar-collapsed #refreshJobsBtn::after {
content: none;
display: none;
}
body.sidebar-collapsed #themeToggleBtn::after {
content: none;
display: none;
}
@media (max-width: 1100px) {
.admin-account-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-account-head {
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {
body:not(.auth-required) #accountUsageModal.account-usage-modal:not([hidden]) {
place-items: center !important;
padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
overflow: hidden !important;
}
#accountUsageModal .account-usage-panel {
width: calc(100vw - 16px) !important;
max-width: calc(100vw - 16px) !important;
height: calc(100dvh - 16px) !important;
max-height: calc(100dvh - 16px) !important;
padding: 10px !important;
border-radius: 16px !important;
overflow-x: hidden !important;
overflow-y: auto !important;
box-sizing: border-box !important;
scrollbar-gutter: stable;
}
#accountUsageModal .account-usage-panel *,
#accountUsageModal .account-usage-panel *::before,
#accountUsageModal .account-usage-panel *::after {
box-sizing: border-box;
min-width: 0;
}
#accountUsageModal .modal-head {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: start !important;
gap: 8px !important;
margin: 0 0 10px !important;
padding: 0 0 10px !important;
}
#accountUsageModal .modal-head h2 {
font-size: 18px !important;
line-height: 1.2 !important;
}
#accountUsageModal .modal-head p {
font-size: 12px !important;
line-height: 1.35 !important;
white-space: normal !important;
}
#accountUsageModal .modal-head-actions {
display: flex !important;
flex-wrap: wrap !important;
justify-content: flex-end !important;
gap: 6px !important;
width: auto !important;
justify-self: end !important;
}
#accountUsageModal .account-usage-summary {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 6px !important;
margin: 0 0 8px !important;
padding: 0 !important;
background: transparent !important;
}
#accountUsageModal .account-usage-summary div {
min-width: 0 !important;
width: 100% !important;
justify-content: center !important;
gap: 5px !important;
padding: 5px 7px !important;
}
#accountUsageModal .account-usage-summary span,
#accountUsageModal .account-usage-summary strong {
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
#accountUsageModal .account-usage-topbar {
position: sticky !important;
top: 0 !important;
z-index: 8 !important;
gap: 6px !important;
background: var(--surface) !important;
}
#accountUsageModal .account-usage-topbar {
flex-direction: column !important;
align-items: stretch !important;
gap: 6px !important;
}
#accountUsageModal .account-usage-tabs {
display: flex !important;
flex-wrap: nowrap !important;
width: 100% !important;
min-width: 0 !important;
gap: 4px !important;
margin: 0 !important;
padding: 4px !important;
}
#accountUsageModal .account-usage-topbar-actions {
flex: 0 0 auto !important;
flex-direction: row !important;
gap: 6px !important;
}
#accountUsageModal .account-usage-topbar-actions button {
flex: 1 1 0 !important;
padding: 0 10px !important;
min-height: 32px !important;
white-space: nowrap !important;
font-size: 12px !important;
}
#accountUsageModal .account-usage-tab .tab-label-full {
display: none !important;
}
#accountUsageModal .account-usage-tab .tab-label-short {
display: inline !important;
}
#accountUsageModal .admin-redeem-head > div > span {
display: none !important;
}
#accountUsageModal .account-usage-tools .account-usage-date {
flex: 1 1 0 !important;
min-width: 0 !important;
}
#accountUsageModal .account-usage-tools .account-usage-date input {
width: 100% !important;
min-width: 0 !important;
}
#accountUsageModal #refreshAccountUsageBtn {
flex: 0 0 auto !important;
}
#accountUsageModal .admin-audit-head-actions,
#accountUsageModal .admin-recycle-head-actions,
#accountUsageModal .admin-feedback-head-actions {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
width: 100% !important;
}
#accountUsageModal .admin-audit-head-actions input,
#accountUsageModal .admin-recycle-head-actions input,
#accountUsageModal .admin-feedback-head-actions input {
grid-column: 1 / -1 !important;
width: 100% !important;
}
#accountUsageModal .account-usage-tab {
flex: 1 1 0 !important;
width: auto !important;
min-width: 0 !important;
padding: 0 2px !important;
min-height: 32px !important;
padding: 0 6px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
font-size: 12px !important;
}
#accountUsageModal .account-redeem-card,
#accountUsageModal .admin-account-manager,
#accountUsageModal .admin-audit-manager,
#accountUsageModal .admin-recycle-manager,
#accountUsageModal .admin-redeem-manager,
#accountUsageModal .account-usage-history {
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
}
#accountUsageModal .account-redeem-card {
grid-template-columns: minmax(0, 1fr) !important;
gap: 10px !important;
padding: 12px !important;
margin-bottom: 10px !important;
}
#accountUsageModal .account-redeem-form {
grid-template-columns: minmax(0, 1fr) !important;
gap: 8px !important;
}
#accountUsageModal .account-redeem-form input,
#accountUsageModal .account-redeem-form button {
width: 100% !important;
}
#accountUsageModal .admin-account-manager,
#accountUsageModal .admin-audit-manager,
#accountUsageModal .admin-recycle-manager,
#accountUsageModal .admin-redeem-manager {
padding: 10px !important;
gap: 9px !important;
border-radius: 14px !important;
}
#accountUsageModal .admin-account-head,
#accountUsageModal .admin-account-head-actions,
#accountUsageModal .admin-audit-head,
#accountUsageModal .admin-audit-head-actions,
#accountUsageModal .admin-audit-row,
#accountUsageModal .admin-recycle-head,
#accountUsageModal .admin-recycle-head-actions,
#accountUsageModal .admin-recycle-row,
#accountUsageModal .admin-account-grid,
#accountUsageModal .admin-redeem-head,
#accountUsageModal .admin-redeem-grid,
#accountUsageModal .admin-redeem-row {
grid-template-columns: minmax(0, 1fr) !important;
width: 100% !important;
max-width: 100% !important;
gap: 8px !important;
}
#accountUsageModal .admin-account-head-actions {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
#accountUsageModal .admin-account-search,
#accountUsageModal .admin-account-sort {
grid-column: 1 / -1 !important;
}
#accountUsageModal .admin-account-grid {
padding: 9px !important;
}
#accountUsageModal .admin-account-grid label,
#accountUsageModal .admin-redeem-grid label,
#accountUsageModal .admin-account-search,
#accountUsageModal .admin-account-sort,
#accountUsageModal .admin-audit-head-actions,
#accountUsageModal .admin-recycle-head-actions {
width: 100% !important;
}
#accountUsageModal .admin-account-grid input,
#accountUsageModal .admin-account-grid select,
#accountUsageModal .admin-account-row input,
#accountUsageModal .admin-account-row select,
#accountUsageModal .admin-account-search input,
#accountUsageModal .admin-account-sort select,
#accountUsageModal .admin-audit-head-actions input,
#accountUsageModal .admin-audit-head-actions select,
#accountUsageModal .admin-recycle-head-actions input,
#accountUsageModal .admin-recycle-head-actions select,
#accountUsageModal .admin-redeem-grid :is(input, select) {
width: 100% !important;
max-width: 100% !important;
}
#accountUsageModal .admin-account-count {
justify-content: flex-start !important;
}
#accountUsageModal .admin-account-points {
width: 100% !important;
justify-content: center !important;
}
#accountUsageModal .admin-audit-meta {
justify-items: start !important;
text-align: left !important;
}
#accountUsageModal .admin-recycle-meta {
justify-items: start !important;
text-align: left !important;
}
#accountUsageModal .admin-audit-summary,
#accountUsageModal .admin-recycle-detail {
white-space: normal !important;
}
#accountUsageModal .admin-audit-more,
#accountUsageModal .admin-recycle-more {
justify-content: flex-start !important;
}
#accountUsageModal .admin-recycle-actions {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
width: 100% !important;
}
#accountUsageModal .admin-redeem-head > button,
#accountUsageModal #createAdminAccountBtn,
#accountUsageModal #createAdminRedeemBtn {
width: 100% !important;
}
#accountUsageModal .admin-redeem-list {
display: grid !important;
gap: 8px !important;
overflow: visible !important;
}
#accountUsageModal .admin-redeem-row {
padding: 9px !important;
}
#accountUsageModal .admin-redeem-usedby > div {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
}
#accountUsageModal .admin-redeem-user {
width: 100% !important;
justify-content: space-between !important;
}
#accountUsageModal .admin-redeem-actions {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 6px !important;
width: 100% !important;
}
#accountUsageModal .account-usage-tools {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 7px !important;
margin-bottom: 8px !important;
}
#accountUsageModal .account-usage-filter {
width: 100% !important;
min-width: 0 !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
#accountUsageModal .account-usage-table-wrap {
width: 100% !important;
max-width: 100% !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
}
#accountUsageModal .account-usage-table {
min-width: 620px !important;
}
#accountUsageModal .account-usage-more {
align-items: stretch !important;
}
#accountUsageModal .account-usage-more button {
width: 100% !important;
}
.admin-account-grid,
.admin-account-head-actions {
grid-template-columns: 1fr;
}
.admin-account-points {
justify-content: flex-start;
min-width: 0;
}
}
body.theme-dark:not(.auth-required) .topbar,
body.theme-dark:not(.auth-required) .panel,
body.theme-dark:not(.auth-required) .tool-card,
body.theme-dark:not(.auth-required) .workflow-main,
body.theme-dark:not(.auth-required) .workflow-inspector,
body.theme-dark:not(.auth-required) .infinite-canvas-main,
body.theme-dark:not(.auth-required) .task-detail-panel {
border-color: rgba(83, 90, 104, 0.72);
background: rgba(18, 21, 28, 0.94);
color: var(--text);
}
body.theme-dark:not(.auth-required) .module-tab,
body.theme-dark:not(.auth-required) .topbar .module-tab {
border-color: rgba(83, 90, 104, 0.78);
background-color: rgba(15, 23, 42, 0.88);
color: var(--text);
}
body.theme-dark:not(.auth-required) .module-tab strong,
body.theme-dark:not(.auth-required) .brand-text h1,
body.theme-dark:not(.auth-required) h1,
body.theme-dark:not(.auth-required) h2 {
color: #f8fafc;
}
body.theme-dark:not(.auth-required) .module-tab span,
body.theme-dark:not(.auth-required) .brand-text p,
body.theme-dark:not(.auth-required) .muted {
color: #9aa8bb;
}
body.theme-dark:not(.auth-required) .context-menu,
body.theme-dark:not(.auth-required) .modal-panel,
body.theme-dark:not(.auth-required) .infinite-card {
border-color: rgba(83, 90, 104, 0.76);
background: rgba(18, 21, 28, 0.98);
color: var(--text);
}
body.theme-dark:not(.auth-required) .context-menu button:hover,
body.theme-dark:not(.auth-required) .context-menu button.module-create:hover {
background: rgba(51, 65, 85, 0.72);
}
.context-menu .context-icon svg,
.context-menu .context-color-badge svg,
.command-palette-list .context-color-badge svg,
.litegraph.litecontextmenu .ai-lite-menu-badge svg,
.workflow-menu-drag-badge svg,
.workflow-module-icon svg,
.infinite-card-badge svg {
width: 12.5px;
height: 12.5px;
stroke-width: 1.5;
}
body.sidebar-collapsed .account-action {
display: none !important;
}
body.sidebar-collapsed .topbar {
gap: 12px;
}
body.sidebar-collapsed .topbar .module-nav {
gap: 6px;
}
body.sidebar-collapsed .module-tab.has-ui-icon,
body.sidebar-collapsed .topbar .module-tab.has-ui-icon,
body:not(.auth-required).sidebar-collapsed .module-tab.has-ui-icon,
body:not(.auth-required).sidebar-collapsed .topbar .module-tab.has-ui-icon {
width: 40px;
height: 44px;
min-height: 44px;
max-height: 44px;
padding: 0;
border-radius: 11px;
}
body.sidebar-collapsed .module-tab.has-ui-icon > .ui-icon,
body.sidebar-collapsed .topbar .module-tab.has-ui-icon > .ui-icon,
body:not(.auth-required).sidebar-collapsed .module-tab.has-ui-icon > .ui-icon,
body:not(.auth-required).sidebar-collapsed .topbar .module-tab.has-ui-icon > .ui-icon {
width: 36px;
height: 36px;
border-radius: 11px;
}
.account-modal {
position: fixed;
inset: 0;
z-index: var(--z-account);
display: grid;
place-items: center;
padding: 24px;
background: rgba(15, 23, 42, 0.22);
box-sizing: border-box;
width: 100vw;
max-width: 100vw;
height: 100dvh;
max-height: 100dvh;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
}
.account-modal *,
.account-modal *::before,
.account-modal *::after {
box-sizing: border-box;
}
.account-modal[hidden] {
display: none;
}
.account-modal:not([hidden]) {
width: 100vw;
max-width: 100vw;
height: 100dvh;
max-height: 100dvh;
}
.account-modal-card {
position: relative;
width: min(424px, 100%);
max-width: 100%;
max-height: calc(100dvh - 32px);
padding: 26px 24px 22px;
border: 1px solid var(--border-soft);
border-radius: 18px;
background: var(--panel);
box-shadow: 0 24px 64px rgba(15, 23, 42, 0.2);
overflow-x: hidden;
overflow-y: auto;
}
.account-modal-card h2 {
margin: 0 0 6px;
font-size: 21px;
letter-spacing: -0.01em;
}
.account-modal-card p {
margin: 0 0 18px;
color: var(--muted);
font-size: 12.5px;
line-height: 1.6;
}
.account-modal-card label {
display: grid;
gap: 7px;
margin-bottom: 14px;
font-weight: 700;
font-size: 12.5px;
color: var(--text);
}
.account-modal-card input {
width: 100%;
min-height: 44px;
border-radius: 11px;
transition: border-color var(--motion-fast) var(--ease-ui), box-shadow var(--motion-fast) var(--ease-ui);
}
.account-modal-card input:focus,
.account-modal-card input:focus-visible {
outline: none;
border-color: var(--accent);
box-shadow: var(--focus-ring);
}
.account-modal-card .account-identifier-hint {
color: var(--muted);
font-size: 10.5px;
font-weight: 600;
line-height: 1.45;
}
.account-modal-card .account-identifier-hint[hidden] { display: none; }
.account-modal-card .account-pw-field {
position: relative;
display: block;
}
.account-modal-card .account-pw-field input {
width: 100%;
padding-right: 46px;
}
.account-modal-card .account-pw-toggle {
position: absolute;
top: 50%;
right: 7px;
transform: translateY(-50%);
display: grid;
place-items: center;
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--muted);
cursor: pointer;
transition: color var(--motion-fast) var(--ease-ui), background var(--motion-fast) var(--ease-ui), transform 0.12s var(--motion-premium-press, ease);
}
.account-modal-card .account-pw-toggle:hover {
color: var(--text);
background: rgba(15, 23, 42, 0.06);
}
.account-modal-card .account-pw-toggle:active {
transform: translateY(-50%) scale(0.9);
}
.account-modal-card .account-pw-toggle:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
.account-modal-card .account-pw-toggle[aria-pressed="true"] {
color: var(--accent);
}
.account-modal-card .account-pw-toggle .ui-icon {
display: grid;
width: 18px;
height: 18px;
}
.account-modal-card .account-pw-toggle .ui-icon svg {
width: 100%;
height: 100%;
}
body.theme-dark .account-modal-card .account-pw-toggle:hover {
background: rgba(255, 255, 255, 0.08);
}
.account-modal-card .account-auth-actions {
display: flex;
}
.account-modal-card .account-auth-actions .primary {
flex: 1 1 auto;
width: 100%;
}
.account-modal-card .account-auth-welcome {
margin: -4px 0 16px;
color: var(--muted);
font-size: 13px;
line-height: 1.55;
}
.account-modal-card .account-auth-footnote {
margin: 14px 0 0;
color: var(--muted);
font-size: 12px;
line-height: 1.5;
text-align: center;
}
.account-modal-card .account-auth-footnote[hidden] {
display: none;
}
.account-modal-card .account-remember-row {
display: flex;
align-items: center;
gap: 8px;
margin: -2px 0 14px;
font-size: 12.5px;
font-weight: 600;
color: var(--muted);
cursor: pointer;
}
.account-modal-card .account-remember-row input[type="checkbox"] {
width: auto;
min-height: 0;
accent-color: var(--accent);
cursor: pointer;
}
.account-modal-card .account-remember-row[hidden] {
display: none;
}
.account-forgot-btn {
justify-self: end;
margin: -8px 0 12px;
padding: 0;
border: 0;
background: transparent;
color: var(--accent);
font-size: 12.5px;
font-weight: 800;
cursor: pointer;
}
.account-forgot-btn:hover {
text-decoration: underline;
}
.account-forgot-btn[hidden] {
display: none;
}
.account-modal-card .account-email-code-row {
display: grid;
gap: 7px;
}
.account-modal-card .account-email-code-row[hidden] {
display: none;
}
.account-code-field {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: center;
}
.account-code-field .secondary {
min-height: 44px;
white-space: nowrap;
}
.account-email-code-row small {
color: var(--muted);
font-size: 10.5px;
font-weight: 600;
line-height: 1.45;
}
@media (max-width: 420px) {
.account-code-field {
grid-template-columns: 1fr;
}
.account-code-field .secondary {
width: 100%;
}
}
.modal-close {
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
border: 1px solid #d7e3ec;
border-radius: 8px;
background: #fff;
color: #334155;
cursor: pointer;
}
body {
zoom: 1;
width: 100%;
min-height: 100vh;
}
body:not(.auth-required) .topbar,
body:not(.auth-required) .account-modal {
height: 100vh;
}
body:not(.auth-required) .account-modal {
width: 100vw;
max-width: 100vw;
}
body:not(.auth-required) .layout {
min-height: 100vh;
}
.account-auth-shell {
display: block;
max-width: 100%;
min-width: 0;
}
.account-auth-intro {
display: none;
}
.account-modal[data-gate="1"] .account-auth-shell {
width: min(430px, calc(100vw - 32px));
max-width: 100%;
}
.account-modal[data-gate="1"] .account-auth-intro,
.account-modal[data-gate="1"] .account-product-preview {
display: none !important;
}
.account-auth-copy {
position: relative;
z-index: 1;
display: grid;
gap: 16px;
max-width: 620px;
min-width: 0;
}
.account-auth-logo-row {
display: flex;
align-items: center;
gap: 10px;
color: #1d4a83;
font-size: 13px;
font-weight: 900;
}
.account-auth-logo {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 12px;
background: linear-gradient(135deg, #2f6db7, #2563a7);
color: #ffffff;
font-weight: 900;
box-shadow: 0 14px 32px rgba(47, 109, 183, 0.2);
}
.account-auth-intro h1 {
max-width: 560px;
font-size: clamp(34px, 4.2vw, 54px);
line-height: 1.03;
letter-spacing: 0;
}
.account-auth-intro p {
max-width: 560px;
color: #475467;
font-size: 16px;
line-height: 1.75;
}
.account-auth-points {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.account-auth-points span {
padding: 8px 12px;
border: 1px solid rgba(47, 109, 183, 0.16);
border-radius: 999px;
background: #eaf2fb;
color: #1d4a83;
font-size: 13px;
font-weight: 800;
}
.account-auth-tabs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
padding: 4px;
margin-bottom: 22px;
border: 1px solid #dfe6ef;
border-radius: 12px;
background: #f7fafc;
}
.account-auth-tabs button {
min-height: 38px;
border: 0;
border-radius: 9px;
background: transparent;
color: #475467;
font-weight: 800;
cursor: pointer;
}
.account-auth-tabs button.active {
background: #ffffff;
color: var(--accent-strong);
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}
.account-auth-tabs button[hidden] {
display: none;
}
.account-auth-actions {
margin-top: 18px;
}
.account-auth-actions .primary,
.account-auth-actions .secondary {
min-height: 42px;
padding-inline: 18px;
}
.account-form-brand {
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
gap: 12px;
align-items: center;
margin-bottom: 22px;
}
.account-form-brand > span {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 13px;
background: var(--brand-gradient);
color: #ffffff;
font-weight: 900;
font-size: 19px;
box-shadow: var(--brand-glow);
}
.account-form-brand strong,
.account-form-brand small {
display: block;
}
.account-form-brand strong {
font-size: 16px;
}
.account-form-brand small {
margin-top: 3px;
color: #667085;
}
.account-product-preview {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 68px minmax(0, 1fr);
gap: 14px;
min-width: 0;
min-height: 286px;
max-width: 100%;
max-height: min(360px, calc(100dvh - 48px));
padding: 14px;
border: 1px solid #dbe6ef;
border-radius: 18px;
background: #101828;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 22px 60px rgba(16, 24, 40, 0.16);
overflow: hidden;
}
.account-preview-sidebar {
display: grid;
align-content: start;
gap: 10px;
padding: 12px;
border-radius: 14px;
background: rgba(255,255,255,0.06);
}
.account-preview-sidebar span {
display: block;
height: 38px;
border-radius: 11px;
background: rgba(255,255,255,0.12);
}
.account-preview-sidebar span.active {
background: #2f6db7;
}
.account-preview-main {
display: grid;
gap: 12px;
min-width: 0;
max-width: 100%;
padding: 16px;
border-radius: 16px;
background: #f8fafc;
overflow: hidden;
}
.account-preview-head,
.account-preview-grid,
.account-preview-workflow,
.account-preview-result {
min-width: 0;
}
.account-preview-head {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
}
.account-preview-head strong {
color: #101828;
}
.account-preview-head span {
padding: 5px 9px;
border-radius: 999px;
background: #eaf2fb;
color: #1d4a83;
font-size: 12px;
font-weight: 900;
}
.account-preview-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.account-preview-grid div {
padding: 12px;
border: 1px solid #e1e7ef;
border-radius: 12px;
background: #ffffff;
}
.account-preview-grid b,
.account-preview-grid small {
display: block;
}
.account-preview-grid b {
font-size: 20px;
color: #101828;
}
.account-preview-grid small {
margin-top: 4px;
color: #667085;
}
.account-preview-workflow {
display: grid;
grid-template-columns: 1fr 34px 1fr 34px 1fr;
gap: 6px;
align-items: center;
}
.account-preview-workflow span {
min-height: 42px;
display: grid;
place-items: center;
border: 1px solid #dbe7f0;
border-radius: 12px;
background: #ffffff;
color: #344054;
font-size: 12px;
font-weight: 900;
}
.account-preview-workflow i {
height: 2px;
border-radius: 999px;
background: #2f6db7;
}
.account-preview-result {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.account-preview-result span {
min-height: 54px;
border-radius: 12px;
background:
linear-gradient(135deg, rgba(90, 166, 232, 0.2), rgba(37, 99, 167, 0.16)),
#eef5f2;
border: 1px solid #dbe7f0;
}
@media (max-width: 820px) {
:root {
--app-zoom: 1;
}
}
.account-preview-windowbar {
display: flex;
align-items: center;
gap: 7px;
padding-bottom: 12px;
border-bottom: 1px solid #e2e8f0;
}
.account-preview-windowbar span {
width: 9px;
height: 9px;
border-radius: 50%;
background: #cbd5e1;
}
.account-preview-windowbar span:first-child {
background: #ef4444;
}
.account-preview-windowbar span:nth-child(2) {
background: #f59e0b;
}
.account-preview-windowbar span:nth-child(3) {
background: #22c55e;
}
.account-preview-windowbar em {
margin-left: auto;
color: #64748b;
font-style: normal;
font-size: 12px;
font-weight: 800;
}
.account-captcha-row {
display: grid;
gap: 8px;
}
.captcha-stage {
position: relative;
width: 100%;
aspect-ratio: 2 / 1;
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
background: var(--surface-3);
user-select: none;
}
.captcha-bg,
.captcha-piece {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
pointer-events: none;
}
.captcha-piece {
right: auto;
width: auto;
filter: drop-shadow(0 2px 5px rgba(8, 14, 26, 0.45));
will-change: transform;
}
.captcha-refresh {
position: absolute;
top: 8px;
right: 8px;
width: 28px;
height: 28px;
display: grid;
place-items: center;
padding: 0;
border: 0;
border-radius: 9px;
background: rgba(8, 14, 26, 0.42);
color: #ffffff;
font-size: 15px;
cursor: pointer;
transition: background var(--motion-fast) var(--ease-ui);
}
.captcha-refresh:hover { background: rgba(8, 14, 26, 0.62); }
.captcha-track {
position: relative;
height: 40px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface-2);
overflow: hidden;
touch-action: none;
}
.captcha-track-fill {
position: absolute;
inset: 0 auto 0 0;
width: 0;
background: var(--accent-soft);
border-radius: 999px;
pointer-events: none;
}
.captcha-track-hint {
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-size: 12px;
color: var(--muted);
pointer-events: none;
transition: opacity var(--motion-fast) var(--ease-ui);
}
.captcha-track.moved .captcha-track-hint { opacity: 0; }
.captcha-handle {
position: absolute;
top: 1px;
left: 1px;
width: 38px;
height: 36px;
display: grid;
place-items: center;
border-radius: 999px;
background: var(--accent);
color: #ffffff;
font-size: 15px;
cursor: grab;
box-shadow: 0 2px 8px rgba(47, 109, 183, 0.35);
will-change: transform;
touch-action: none;
}
.captcha-handle:active { cursor: grabbing; }
.captcha-handle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.captcha-track.ok { border-color: var(--ok); }
.captcha-track.ok .captcha-track-fill { background: color-mix(in srgb, var(--ok) 26%, transparent); }
.captcha-track.ok .captcha-handle { background: var(--ok); box-shadow: 0 2px 8px rgba(19, 121, 91, 0.4); }
.captcha-track.err { border-color: var(--danger); animation: captcha-shake 0.42s var(--ease-ui); }
.captcha-track.err .captcha-handle { background: var(--danger); }
@keyframes captcha-shake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-6px); }
40% { transform: translateX(6px); }
60% { transform: translateX(-4px); }
80% { transform: translateX(4px); }
}
.captcha-verify-bar {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
min-height: 42px;
padding: 0 14px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--surface-2);
color: var(--muted);
font-size: 13px;
cursor: pointer;
transition: border-color var(--motion-fast) var(--ease-ui), background var(--motion-fast) var(--ease-ui), color var(--motion-fast) var(--ease-ui);
}
.captcha-verify-bar:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: var(--accent-soft); }
.captcha-verify-bar:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.captcha-verify-mark {
flex: none;
width: 18px;
height: 18px;
border: 1.5px solid var(--muted-2);
border-radius: 5px;
background: var(--surface);
transition: border-color var(--motion-fast) var(--ease-ui), background var(--motion-fast) var(--ease-ui);
}
.captcha-verify-bar.verified {
border-color: var(--ok);
background: var(--ok-soft);
color: var(--ok);
cursor: default;
}
.captcha-verify-bar.verified .captcha-verify-mark {
border-color: var(--ok);
background: var(--ok)
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.captcha-popover {
position: fixed;
inset: 0;
z-index: calc(var(--z-overlay) + 60);
display: grid;
place-items: center;
padding: 16px;
background: rgba(8, 14, 26, 0.5);
backdrop-filter: blur(3px);
animation: hui-fade-in var(--motion-fast) var(--ease-ui);
}
.captcha-popover[hidden] { display: none; }
.captcha-popover-card {
width: min(360px, calc(100vw - 32px));
padding: 16px;
border: 1px solid var(--border);
border-radius: 16px;
background: var(--panel);
box-shadow: var(--shadow-popover);
animation: hui-pop-in var(--motion-base) var(--motion-premium-in);
}
.captcha-popover-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
font-size: 14px;
font-weight: 800;
color: var(--text);
}
.captcha-popover-close {
width: 28px;
height: 28px;
display: grid;
place-items: center;
padding: 0;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--muted);
font-size: 19px;
cursor: pointer;
}
.captcha-popover-close:hover { background: var(--surface-3); color: var(--text); }
.captcha-popover-card .captcha-stage { margin-bottom: 12px; }
@keyframes hui-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hui-pop-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
.account-switch-strip {
width: 100%;
margin-top: 10px;
padding: 11px 12px;
border: 1px solid var(--border-soft);
border-radius: 12px;
background: var(--surface-2);
color: var(--muted);
font-size: 12.5px;
text-align: center;
cursor: pointer;
transition: border-color var(--motion-fast) var(--ease-ui), background var(--motion-fast) var(--ease-ui);
}
.account-switch-strip strong {
margin-left: 4px;
color: var(--accent);
font-weight: 800;
}
.account-switch-strip:hover {
border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
background: var(--accent-soft);
}
.account-modal-card .account-agree-row {
display: flex;
gap: 8px;
align-items: flex-start;
font-size: 12.5px;
color: #5c728a;
line-height: 1.55;
cursor: pointer;
}
.account-agree-row input[type="checkbox"] {
width: auto;
margin-top: 2px;
accent-color: var(--accent);
}
.account-agree-row a,
.account-auth-footnote a {
color: var(--accent);
text-decoration: none;
}
.account-agree-row a:hover,
.account-auth-footnote a:hover { text-decoration: underline; }
.auth-terms-body { color: #34495f; }
body.theme-dark .captcha-stage {
border-color: rgba(141, 149, 165, 0.34);
background: #121b2b;
}
body.theme-dark .captcha-track {
border-color: rgba(141, 149, 165, 0.3);
background: rgba(16, 18, 26, 0.88);
}
body.theme-dark .captcha-track-fill { background: rgba(47, 109, 183, 0.28); }
body.theme-dark .captcha-track-hint { color: #8aa0bb; }
body.theme-dark .captcha-handle {
background: #2f6db7;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
body.theme-dark .captcha-verify-bar {
border-color: rgba(141, 149, 165, 0.3);
background: rgba(16, 18, 26, 0.84);
color: #9fb1c7;
}
body.theme-dark .captcha-verify-bar:hover {
border-color: rgba(90, 166, 232, 0.45);
background: rgba(47, 109, 183, 0.18);
}
body.theme-dark .captcha-verify-mark { border-color: #5b6b80; background: #0d1728; }
body.theme-dark .captcha-popover-close:hover { background: rgba(47, 109, 183, 0.18); }
body.theme-dark .account-switch-strip {
border-color: rgba(141, 149, 165, 0.3);
background: rgba(16, 18, 26, 0.84);
color: #9fb1c7;
}
body.theme-dark .account-switch-strip strong { color: #9cc4ec; }
body.theme-dark .account-switch-strip:hover {
border-color: rgba(90, 166, 232, 0.45);
background: rgba(47, 109, 183, 0.18);
}
body.theme-dark .account-agree-row { color: #9fb1c7; }
body.theme-dark .account-agree-row input[type="checkbox"] {
accent-color: #5aa6e8;
color-scheme: dark;
outline: 1px solid rgba(141, 149, 165, 0.55);
outline-offset: -1px;
border-radius: 3px;
}
body.theme-dark .auth-terms-body { color: #c7d4e6; }
.feedback-panel {
width: min(520px, calc(100vw - 24px));
display: grid;
gap: 14px;
}
.feedback-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.feedback-head h2 { margin: 0; font-size: 17px; color: var(--text); }
.feedback-sub { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.feedback-body { display: grid; gap: 12px; }
.feedback-type {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 4px;
border-radius: 12px;
background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
width: 100%;
}
.feedback-type-btn {
flex: 1 1 118px;
padding: 6px 16px;
border: 0;
border-radius: 9px;
background: transparent;
color: var(--muted);
font-size: 13px;
font-weight: 800;
cursor: pointer;
}
.feedback-type-btn.active {
background: var(--surface);
color: var(--accent);
box-shadow: 0 1px 4px rgba(16, 24, 40, 0.12);
}
.feedback-field { display: grid; gap: 6px; }
.feedback-field > span { font-size: 12.5px; font-weight: 800; color: var(--text); }
.feedback-field textarea,
.feedback-field input {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface);
color: var(--text);
font-size: 13px;
font-family: inherit;
resize: vertical;
}
.feedback-field textarea:focus,
.feedback-field input:focus {
outline: none;
border-color: var(--accent);
}
.feedback-images {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.feedback-img-thumb {
position: relative;
width: 84px;
height: 84px;
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--border);
background: var(--surface-2);
}
.feedback-img-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.feedback-img-remove {
position: absolute;
top: 3px;
right: 3px;
width: 20px;
height: 20px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(16, 24, 40, 0.62);
color: #fff;
font-size: 14px;
line-height: 1;
cursor: pointer;
display: grid;
place-items: center;
}
.feedback-img-add {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
width: 84px;
height: 84px;
border: 1px dashed var(--border);
border-radius: 10px;
background: var(--surface-2);
color: var(--muted);
font-size: 18px;
font-weight: 700;
cursor: pointer;
}
.feedback-img-add span { font-size: 11.5px; font-weight: 600; }
.feedback-img-add:hover { border-color: var(--accent); color: var(--accent); }
.feedback-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.feedback-foot > span { max-width: 330px; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.feedback-foot > span button { padding: 0; border: 0; background: transparent; color: var(--accent); font: inherit; cursor: pointer; }
.feedback-foot .primary { min-width: 120px; }
.onboarding-panel {
position: relative;
width: min(880px, calc(100vw - 28px));
min-height: 496px;
max-height: calc(100dvh - 28px);
padding: 0;
overflow: hidden;
display: grid;
grid-template-columns: 272px minmax(0, 1fr);
border-radius: 24px;
box-shadow: 0 30px 80px -34px rgba(15, 23, 42, 0.52), 0 10px 26px -14px rgba(15, 23, 42, 0.22);
animation: obPanelIn 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes obPanelIn { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .onboarding-panel, .ob-slide { animation: none; } }
.onboarding-hero {
position: relative;
display: flex;
flex-direction: column;
gap: 20px;
padding: 24px 20px 18px;
color: #fff;
background: radial-gradient(120% 90% at 18% 0%, rgba(255, 255, 255, 0.16), transparent 52%),
var(--brand-gradient, linear-gradient(135deg, #2f6db7 0%, #4f63dd 52%, #7a59e0 100%));
overflow: hidden;
}
.onboarding-hero::after {
content: "";
position: absolute;
right: -70px;
bottom: -70px;
width: 200px;
height: 200px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
}
.onboarding-hero-top { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; }
.onboarding-logo {
flex: none;
width: 38px;
height: 38px;
border-radius: 12px;
display: grid;
place-items: center;
padding: 6px;
background: #fff;
box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.3);
}
.onboarding-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.onboarding-hero-brand { display: flex; flex-direction: column; line-height: 1.2; }
.onboarding-hero-brand strong { font-size: 16px; font-weight: 800; }
.onboarding-hero-brand span { font-size: 12px; color: rgba(255, 255, 255, 0.78); }
.onboarding-rail { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.ob-rail-step {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 11px;
width: 100%;
min-height: 44px;
padding: 4px 10px;
border: 0;
border-radius: 12px;
background: transparent;
color: #fff;
text-align: left;
cursor: pointer;
transition: background 0.15s ease;
}
.ob-rail-step:hover { background: rgba(255, 255, 255, 0.1); }
.ob-rail-step.is-current { background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
.ob-rail-step:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.92); outline-offset: 2px; }
.ob-rail-marker {
flex: none;
width: 26px;
height: 26px;
display: inline-grid;
place-items: center;
border-radius: 50%;
font-size: 12.5px;
font-weight: 800;
color: rgba(255, 255, 255, 0.85);
box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.38);
background: transparent;
}
.ob-rail-step.is-current .ob-rail-marker { background: #fff; color: var(--ob-accent, #2f6db7); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22); }
.ob-rail-step.is-done .ob-rail-marker { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7); }
.ob-rail-marker svg { width: 14px; height: 14px; }
.ob-rail-text { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; text-align: left; }
.ob-rail-text strong { font-size: 13.5px; line-height: 1.2; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-rail-text small { font-size: 11px; line-height: 1.25; color: rgba(255, 255, 255, 0.66); font-weight: 600; }
.ob-rail-step:not(.is-current) .ob-rail-text strong { color: rgba(255, 255, 255, 0.82); }
.onboarding-hero-tip { position: relative; z-index: 1; margin: auto 0 0; font-size: 11.5px; color: rgba(255, 255, 255, 0.6); line-height: 1.5; }
.onboarding-body {
position: relative;
display: flex;
flex-direction: column;
padding: 22px 26px 20px;
min-width: 0;
}
.onboarding-skip {
position: absolute;
top: 14px;
right: 16px;
z-index: 5;
background: transparent;
border: 0;
color: #8190a5;
font-size: 13px;
font-weight: 600;
cursor: pointer;
padding: 5px 11px;
border-radius: 999px;
transition: background 0.15s ease, color 0.15s ease;
}
.onboarding-skip:hover { background: rgba(120, 135, 160, 0.14); color: #5c728a; }
.onboarding-stage {
flex: 1;
min-height: 0;
display: grid;
align-content: start;
padding: 14px 0 8px;
}
.ob-slide { display: grid; gap: 16px; animation: obFade 0.28s ease; }
@keyframes obFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ob-slide-scene {
position: relative;
height: 178px;
border-radius: 16px;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--ob-accent, #2f6db7) 16%, var(--border, #e3e9f2));
background:
linear-gradient(rgba(148, 163, 184, 0.12) 1px, transparent 1px),
linear-gradient(90deg, rgba(148, 163, 184, 0.12) 1px, transparent 1px),
linear-gradient(135deg, color-mix(in srgb, var(--ob-accent, #2f6db7) 7%, #fbfdff), color-mix(in srgb, var(--ob-accent, #2f6db7) 3%, #f6f9fd));
background-size: 22px 22px, 22px 22px, auto;
}
.ob-scene { position: absolute; inset: 0; }
.ob-mock-window {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: min(300px, 74%);
height: 128px;
border-radius: 12px;
background: #fff;
border: 1px solid rgba(148, 163, 184, 0.3);
box-shadow: 0 16px 34px -18px color-mix(in srgb, var(--ob-accent, #2f6db7) 55%, transparent);
display: grid;
grid-template-columns: 44px 1fr;
grid-template-rows: 22px 1fr;
}
.ob-mock-dots { grid-column: 1 / -1; display: flex; align-items: center; gap: 4px; padding: 0 10px; border-bottom: 1px solid rgba(148, 163, 184, 0.2); }
.ob-mock-dots b { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--ob-accent, #2f6db7) 34%, #dbe4ef); }
.ob-mock-rail { display: flex; flex-direction: column; align-items: center; gap: 7px; padding-top: 10px; border-right: 1px solid rgba(148, 163, 184, 0.2); }
.ob-mock-rail b { width: 16px; height: 16px; border-radius: 6px; background: color-mix(in srgb, var(--ob-accent, #2f6db7) 16%, #edf2f8); }
.ob-mock-rail b:first-child { background: var(--ob-accent, #2f6db7); }
.ob-mock-content { padding: 10px 12px; display: grid; gap: 7px; align-content: start; }
.ob-mock-content b { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--ob-accent, #2f6db7) 22%, #e6edf6); }
.ob-mock-content b.w60 { width: 60%; }
.ob-mock-content b.w40 { width: 40%; opacity: 0.7; }
.ob-mock-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 2px; }
.ob-mock-grid u { display: block; height: 22px; border-radius: 6px; background: color-mix(in srgb, var(--ob-accent, #2f6db7) 12%, #eef3f9); }
.ob-scene-agent { display: flex; align-items: center; justify-content: center; gap: 12px; }
.ob-mock-bubble {
display: grid;
gap: 7px;
align-content: center;
width: 116px;
height: 62px;
padding: 0 14px;
border-radius: 14px 14px 14px 4px;
background: linear-gradient(150deg, color-mix(in srgb, var(--ob-accent, #2f6db7) 58%, #6f92c9), color-mix(in srgb, var(--ob-accent, #2f6db7) 32%, #9db9dd));
box-shadow: 0 16px 30px -16px color-mix(in srgb, var(--ob-accent, #2f6db7) 70%, transparent);
}
.ob-mock-bubble b { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.9); }
.ob-mock-bubble b.w70 { width: 70%; }
.ob-mock-bubble b.w45 { width: 45%; opacity: 0.72; }
.ob-mock-agent-arrow {
color: color-mix(in srgb, var(--ob-accent, #2f6db7) 72%, #9db9dd);
font-size: 15px;
line-height: 1;
}
.ob-mock-agent-out { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.ob-mock-agent-out u {
display: block;
width: 52px;
height: 38px;
border-radius: 8px;
border: 1px solid rgba(148, 163, 184, 0.28);
background: linear-gradient(150deg, color-mix(in srgb, var(--ob-accent, #2f6db7) 22%, #eaf1f9), color-mix(in srgb, var(--ob-accent, #2f6db7) 9%, #f5f9fd));
}
.ob-scene-cases { display: flex; align-items: center; justify-content: center; gap: 14px; }
.ob-mock-case {
width: 72px;
height: 96px;
border-radius: 12px;
background: linear-gradient(150deg, color-mix(in srgb, var(--ob-accent, #2f6db7) 22%, #eaf1f9), color-mix(in srgb, var(--ob-accent, #2f6db7) 9%, #f5f9fd));
border: 1px solid rgba(148, 163, 184, 0.28);
transform: translateY(6px);
}
.ob-mock-case.is-hero {
position: relative;
width: 96px;
height: 122px;
transform: none;
background: linear-gradient(150deg, color-mix(in srgb, var(--ob-accent, #2f6db7) 58%, #6f92c9), color-mix(in srgb, var(--ob-accent, #2f6db7) 30%, #9db9dd));
box-shadow: 0 18px 34px -16px color-mix(in srgb, var(--ob-accent, #2f6db7) 70%, transparent);
}
.ob-mock-cta {
position: absolute;
left: 50%;
bottom: 10px;
transform: translateX(-50%);
padding: 4px 10px;
border-radius: 999px;
background: #fff;
color: var(--ob-accent, #2f6db7);
font-size: 11px;
font-weight: 800;
white-space: nowrap;
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.2);
}
.ob-scene-canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ob-scene-canvas svg path {
fill: none;
stroke: color-mix(in srgb, var(--ob-accent, #2f6db7) 66%, #9db9dd);
stroke-width: 2;
stroke-dasharray: 6 6;
animation: obDashFlow 1.6s linear infinite;
}
@keyframes obDashFlow { to { stroke-dashoffset: -24; } }
.ob-mock-node {
position: absolute;
width: 64px;
height: 48px;
border-radius: 10px;
background: #fff;
border: 1px solid rgba(148, 163, 184, 0.32);
box-shadow: 0 10px 22px -12px rgba(15, 23, 42, 0.3);
padding: 7px 8px;
display: grid;
gap: 5px;
align-content: start;
}
.ob-mock-node b { height: 7px; width: 70%; border-radius: 4px; background: var(--ob-accent, #2f6db7); opacity: 0.85; }
.ob-mock-node i { height: 14px; border-radius: 5px; background: color-mix(in srgb, var(--ob-accent, #2f6db7) 14%, #edf2f8); }
.ob-scene-canvas .n1 { left: 10%; top: 18%; }
.ob-scene-canvas .n2 { left: 39%; top: 42%; animation: obNodeFloat 3.4s ease-in-out infinite alternate; }
.ob-scene-canvas .n3 { left: 68%; top: 22%; }
@keyframes obNodeFloat { from { transform: translateY(-3px); } to { transform: translateY(3px); } }
.ob-mock-belt {
position: absolute;
left: 10%;
right: 10%;
top: 50%;
height: 2px;
background: color-mix(in srgb, var(--ob-accent, #2f6db7) 34%, #cfdcec);
}
.ob-mock-machine {
position: absolute;
top: 50%;
width: 40px;
height: 40px;
transform: translateY(-50%);
border-radius: 11px;
background: #fff;
border: 1px solid rgba(148, 163, 184, 0.32);
box-shadow: 0 8px 18px -10px rgba(15, 23, 42, 0.28);
}
.ob-scene-workflow .m1 { left: 12%; }
.ob-scene-workflow .m2 { left: 34%; }
.ob-scene-workflow .m3 { left: 56%; }
.ob-scene-workflow .m4 { left: 78%; }
.ob-mock-machine.is-active {
border-color: var(--ob-accent, #2f6db7);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--ob-accent, #2f6db7) 16%, transparent), 0 10px 20px -10px color-mix(in srgb, var(--ob-accent, #2f6db7) 60%, transparent);
background: linear-gradient(150deg, #fff, color-mix(in srgb, var(--ob-accent, #2f6db7) 12%, #fff));
}
.ob-mock-pulse {
position: absolute;
left: 12%;
top: 50%;
width: 10px;
height: 10px;
margin-top: -5px;
border-radius: 50%;
background: var(--ob-accent, #2f6db7);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ob-accent, #2f6db7) 22%, transparent);
animation: obPulseMove 3s cubic-bezier(0.45, 0.05, 0.4, 0.95) infinite;
}
@keyframes obPulseMove {
0% { transform: translateX(0); opacity: 0; }
8% { opacity: 1; }
92% { opacity: 1; }
100% { transform: translateX(min(58vw, 430px)); opacity: 0; }
}
.ob-scene-workflow { container-type: inline-size; }
@supports (width: 1cqw) {
@keyframes obPulseMove {
0% { transform: translateX(0); opacity: 0; }
8% { opacity: 1; }
92% { opacity: 1; }
100% { transform: translateX(66cqw); opacity: 0; }
}
}
.ob-mock-gen {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: min(280px, 72%);
padding: 16px 16px 14px;
border-radius: 14px;
background: #fff;
border: 1px solid rgba(148, 163, 184, 0.3);
box-shadow: 0 16px 32px -16px color-mix(in srgb, var(--ob-accent, #2f6db7) 55%, transparent);
display: grid;
gap: 12px;
}
.ob-mock-genbar { display: block; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--ob-accent, #2f6db7) 12%, #edf2f8); overflow: hidden; }
.ob-mock-genbar b { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ob-accent, #2f6db7), color-mix(in srgb, var(--ob-accent, #2f6db7) 60%, #9f8df0)); transform-origin: 0 50%; animation: obGenFill 2.6s cubic-bezier(0.3, 0.1, 0.3, 1) infinite; }
@keyframes obGenFill { 0% { transform: scaleX(0.08); } 78% { transform: scaleX(1); } 100% { transform: scaleX(1); } }
.ob-mock-genpics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ob-mock-genpics u { display: block; height: 44px; border-radius: 8px; background: linear-gradient(150deg, color-mix(in srgb, var(--ob-accent, #2f6db7) 30%, #dfe9f5), color-mix(in srgb, var(--ob-accent, #2f6db7) 12%, #eef4fa)); animation: obPicIn 2.6s ease infinite; opacity: 0; }
.ob-mock-genpics u:nth-child(2) { animation-delay: 0.25s; }
.ob-mock-genpics u:nth-child(3) { animation-delay: 0.5s; }
@keyframes obPicIn { 0% { opacity: 0; transform: translateY(4px); } 34% { opacity: 1; transform: none; } 92% { opacity: 1; } 100% { opacity: 1; } }
.ob-mock-spark { position: absolute; right: 14%; top: 18%; font-size: 18px; color: var(--ob-accent, #2f6db7); animation: obNodeFloat 2.8s ease-in-out infinite alternate; }
.ob-slide-copy { display: grid; gap: 9px; justify-items: start; }
.ob-slide-eyebrow {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
letter-spacing: 1px;
color: var(--ob-accent, #2f6db7);
background: color-mix(in srgb, var(--ob-accent, #2f6db7) 12%, var(--surface, #fff));
}
.ob-slide-title { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.3px; color: #1d2939; }
.ob-slide-desc { margin: 0; font-size: 13.5px; line-height: 1.6; color: #5c728a; }
.ob-slide-points { margin: 2px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.ob-slide-points li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.55; color: #45556c; }
.ob-slide-points li svg { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--ob-accent, #2f6db7); }
.onboarding-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-top: 6px;
flex-wrap: wrap;
}
.onboarding-progress { display: flex; align-items: center; gap: 10px; flex: 1 1 160px; min-width: 0; }
.onboarding-progress-count { flex: none; font-size: 12px; font-weight: 800; color: #8190a5; font-variant-numeric: tabular-nums; }
.onboarding-progress-track { flex: 1 1 auto; max-width: 180px; height: 4px; border-radius: 999px; background: rgba(120, 135, 160, 0.2); overflow: hidden; }
.onboarding-progress-track b { display: block; height: 100%; width: 20%; border-radius: inherit; background: var(--ob-accent, var(--accent, #2f6db7)); transition: width 0.3s cubic-bezier(0.3, 0.1, 0.3, 1); }
.onboarding-nav { display: flex; align-items: center; gap: 8px; }
.onboarding-nav .primary { min-width: 108px; }
.onboarding-body { overflow: hidden; }
.onboarding-stage { overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 680px) {
.onboarding-panel {
grid-template-columns: 1fr;
display: flex;
flex-direction: column;
width: calc(100vw - 20px);
min-height: 0;
max-height: calc(100dvh - 20px);
border-radius: 20px;
}
.onboarding-hero { flex: none; gap: 12px; padding: 15px 16px 13px; }
.onboarding-hero::after { display: none; }
.onboarding-hero-tip { display: none; }
.onboarding-rail { flex-direction: row; justify-content: center; gap: 12px; margin-top: 0; }
.ob-rail-step { width: auto; padding: 0; border-radius: 999px; }
.ob-rail-step:hover, .ob-rail-step.is-current { background: transparent; box-shadow: none; }
.ob-rail-text { display: none; }
.ob-rail-marker { width: 24px; height: 24px; font-size: 12px; }
.onboarding-skip { color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.15); }
.onboarding-skip:hover { color: #fff; background: rgba(255, 255, 255, 0.26); }
.onboarding-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 16px 16px 14px; }
.onboarding-stage { flex: 1; min-height: 0; padding: 4px 0 2px; overflow-y: auto; }
.ob-slide { gap: 14px; }
.ob-slide-scene { height: 148px; border-radius: 14px; }
.ob-slide-title { font-size: 20px; }
.ob-slide-desc { font-size: 13px; }
.ob-slide-points li { font-size: 12.5px; }
.onboarding-progress { display: none; }
.onboarding-foot { margin-top: 12px; flex: none; }
.onboarding-nav { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; }
.onboarding-nav [data-ob-prev] { grid-column: 1; }
.onboarding-nav .primary { grid-column: 2; min-width: 0; width: 100%; }
.onboarding-nav [data-ob-cases] { grid-column: 1 / -1; width: 100%; }
}
body.theme-dark .onboarding-skip { color: #9aa6b8; }
body.theme-dark .onboarding-skip:hover { color: #cdd6e4; background: rgba(148, 163, 184, 0.16); }
body.theme-dark .ob-slide-title { color: #eef2f8; }
body.theme-dark .ob-slide-desc { color: #a7b2c4; }
body.theme-dark .ob-slide-points li { color: #b9c3d4; }
body.theme-dark .ob-slide-eyebrow { background: color-mix(in srgb, var(--ob-accent, #2f6db7) 26%, rgba(20, 24, 33, 0.6)); color: color-mix(in srgb, var(--ob-accent, #2f6db7) 55%, #fff); }
body.theme-dark .ob-slide-scene {
border-color: color-mix(in srgb, var(--ob-accent, #2f6db7) 28%, rgba(148, 163, 184, 0.28));
background:
linear-gradient(rgba(148, 163, 184, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(148, 163, 184, 0.1) 1px, transparent 1px),
linear-gradient(135deg, color-mix(in srgb, var(--ob-accent, #2f6db7) 22%, #12161f), color-mix(in srgb, var(--ob-accent, #2f6db7) 11%, #0d1017));
background-size: 22px 22px, 22px 22px, auto;
}
body.theme-dark .onboarding-progress-count { color: #93a0b4; }
body.theme-dark:not(.auth-required) .onboarding-rail button.ob-rail-step { background: transparent; }
body.theme-dark:not(.auth-required) .onboarding-rail button.ob-rail-step:hover { background: rgba(255, 255, 255, 0.1); }
body.theme-dark:not(.auth-required) .onboarding-rail button.ob-rail-step.is-current { background: rgba(255, 255, 255, 0.16); }
body.theme-dark:not(.auth-required) .onboarding-nav button.primary {
background: linear-gradient(135deg, var(--ob-accent, #2f6db7), color-mix(in srgb, var(--ob-accent, #2f6db7) 52%, #7a59e0));
color: #fff;
border-color: transparent;
}
@media (max-width: 720px) {
.onboarding-panel {
width: min(460px, calc(100vw - 24px));
min-height: 0;
grid-template-columns: 1fr;
}
.onboarding-hero { gap: 12px; padding: 14px 16px 12px; }
.onboarding-hero::after { display: none; }
.onboarding-hero-tip { display: none; }
.onboarding-rail { flex-direction: row; justify-content: center; gap: 6px; margin-top: 0; }
.ob-rail-step { width: auto; padding: 5px; border-radius: 999px; }
.ob-rail-text { display: none; }
.onboarding-body { padding: 16px 18px 14px; }
.onboarding-stage { min-height: 0; padding: 10px 0 4px; }
.ob-slide-scene { height: 128px; }
.ob-slide-title { font-size: 19px; }
.ob-mock-window { height: 104px; }
.ob-mock-case { width: 56px; height: 76px; }
.ob-mock-case.is-hero { width: 76px; height: 96px; }
}
body.theme-dark .ob-slide-title { color: #e7eef9; }
body.theme-dark .ob-slide-desc { color: #9fb1c7; }
body.theme-dark .ob-slide-points li { color: #c4d2e2; }
body.theme-dark .ob-slide-scene {
border-color: color-mix(in srgb, var(--ob-accent, #2f6db7) 30%, rgba(152, 161, 178, 0.2));
background:
linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px),
linear-gradient(135deg, color-mix(in srgb, var(--ob-accent, #2f6db7) 16%, #10141c), color-mix(in srgb, var(--ob-accent, #2f6db7) 7%, #0d1017));
background-size: 22px 22px, 22px 22px, auto;
}
body.theme-dark :is(.ob-mock-window, .ob-mock-node, .ob-mock-machine, .ob-mock-gen) { background: #171b24; border-color: rgba(152, 161, 178, 0.28); }
body.theme-dark .ob-mock-machine.is-active { background: linear-gradient(150deg, #1b2029, color-mix(in srgb, var(--ob-accent, #2f6db7) 22%, #171b24)); }
body.theme-dark :is(.ob-mock-content b, .ob-mock-grid u, .ob-mock-node i, .ob-mock-genbar) { background: rgba(152, 161, 178, 0.16); }
body.theme-dark .ob-mock-rail b { background: rgba(152, 161, 178, 0.18); }
body.theme-dark .ob-mock-rail b:first-child { background: var(--ob-accent, #2f6db7); }
body.theme-dark .onboarding-progress-track { background: rgba(152, 161, 178, 0.2); }
@keyframes authShellIn {
from { opacity: 0; transform: translateY(14px) scale(.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes authCardIn {
from { opacity: 0; transform: translateX(12px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes authPreviewIn {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
body:not(.auth-required) {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(241, 245, 249, 0.72)),
linear-gradient(135deg, rgba(47, 109, 183, 0.05), rgba(37, 99, 167, 0.04)),
linear-gradient(rgba(203, 213, 225, 0.34) 1px, transparent 1px),
linear-gradient(90deg, rgba(203, 213, 225, 0.28) 1px, transparent 1px),
#f5f8fb;
background-size: auto, auto, 32px 32px, 32px 32px, auto;
}
body:not(.auth-required) .topbar {
border-right-color: rgba(203, 213, 225, 0.78);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95)),
#ffffff;
box-shadow: 10px 0 34px rgba(15, 23, 42, 0.06);
}
body:not(.auth-required) .brand-block {
border-bottom-color: rgba(203, 213, 225, 0.72);
}
body:not(.auth-required) .brand-text h1 {
color: #0f172a;
font-size: 19px;
}
body:not(.auth-required) .brand-text p {
color: #64748b;
font-weight: 700;
}
body:not(.auth-required) .brand-text::before {
border-color: rgba(47, 109, 183, 0.2);
border-radius: 12px;
background:
radial-gradient(circle at 26% 24%, rgba(255, 255, 255, 0.95) 0 10%, transparent 11%),
linear-gradient(135deg, #2f6db7 0%, #2563a7 100%);
box-shadow: 0 14px 30px rgba(47, 109, 183, 0.18);
}
body:not(.auth-required) .module-tab,
body:not(.auth-required) .topbar .module-tab {
min-height: 64px;
border-color: #dce6ef;
border-radius: 14px;
background: rgba(255, 255, 255, 0.86);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
body:not(.auth-required) .module-tab:hover {
border-color: rgba(47, 109, 183, 0.28);
background: #ffffff;
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
}
body:not(.auth-required) .module-tab.active {
border-color: rgba(47, 109, 183, 0.4);
background: linear-gradient(135deg, #eaf2fb 0%, #f6fbff 100%);
box-shadow: inset 4px 0 0 #2f6db7, 0 10px 24px rgba(47, 109, 183, 0.08);
}
body:not(.auth-required) .module-tab strong {
color: #0f172a;
}
body:not(.auth-required) .module-tab span {
color: #64748b;
}
body:not(.auth-required) .panel,
body:not(.auth-required) .tool-card,
body:not(.auth-required) .workflow-sidebar,
body:not(.auth-required) .workflow-main,
body:not(.auth-required) .workflow-inspector,
body:not(.auth-required) .workflow-toolbar,
body:not(.auth-required) .infinite-canvas-main,
body:not(.auth-required) .infinite-canvas-inspector,
body:not(.auth-required) .infinite-canvas-toolbar,
body:not(.auth-required) .task-detail-panel {
border-color: rgba(203, 213, 225, 0.86);
border-radius: 18px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08);
}
body:not(.auth-required) .layout > .panel {
overflow: hidden;
}
body:not(.auth-required) .tabs {
padding: 6px;
gap: 6px;
border-color: #dce6ef;
border-radius: 16px;
background: #f4f8fb;
}
body:not(.auth-required) .tab {
border: 0;
border-radius: 11px;
background: transparent;
color: #475569;
font-weight: 900;
}
body:not(.auth-required) .tab:hover {
background: rgba(255, 255, 255, 0.76);
}
body:not(.auth-required) .tab.active {
background: #ffffff;
color: var(--accent-strong);
box-shadow: inset 0 -2px 0 var(--accent), 0 1px 2px rgba(16, 24, 40, 0.10);
}
body:not(.auth-required) input,
body:not(.auth-required) select,
body:not(.auth-required) textarea {
border-color: var(--control-border);
border-radius: 11px;
background-color: var(--control-surface);
transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
body:not(.auth-required) input:hover:not(:disabled),
body:not(.auth-required) select:hover:not(:disabled),
body:not(.auth-required) textarea:hover:not(:disabled) {
border-color: #b9c9d8;
background-color: #ffffff;
}
body:not(.auth-required) input:focus,
body:not(.auth-required) select:focus,
body:not(.auth-required) textarea:focus {
border-color: #2f6db7;
box-shadow: 0 0 0 3px rgba(47, 109, 183, 0.12);
outline: none;
}
body:not(.auth-required) .primary {
border: 0;
border-radius: 11px;
background: var(--brand-gradient);
color: #ffffff;
box-shadow: var(--brand-glow);
}
body:not(.auth-required) .primary:hover {
background: var(--brand-gradient-strong);
box-shadow: var(--brand-glow-strong);
}
body:not(.auth-required) .secondary,
body:not(.auth-required) .job-reuse,
body:not(.auth-required) .job-favorite,
body:not(.auth-required) .icon-button {
border-color: #cfe0f4;
border-radius: 11px;
background: #f8fbff;
color: #2563a7;
}
body:not(.auth-required) .secondary:hover,
body:not(.auth-required) .job-reuse:hover,
body:not(.auth-required) .job-favorite:hover,
body:not(.auth-required) .icon-button:hover {
border-color: #9fbce4;
background: #ffffff;
box-shadow: 0 8px 18px rgba(37, 99, 167, 0.11);
}
body:not(.auth-required) .danger:where(:not(.gen-icon-btn)) {
border-color: #fecaca;
border-radius: 11px;
background: #fff7f7;
color: #b42318;
}
body:not(.auth-required) .drop-zone,
body:not(.auth-required) .upload-box,
body:not(.auth-required) .file-summary,
body:not(.auth-required) .plan-summary-inline,
body:not(.auth-required) .advanced,
body:not(.auth-required) .workflow-check-panel,
body:not(.auth-required) .workflow-inspector-empty,
body:not(.auth-required) .workflow-media-library-card,
body:not(.auth-required) .workflow-project-item {
border-color: #dbe7f0;
border-radius: 14px;
background: rgba(248, 251, 253, 0.82);
}
body:not(.auth-required) .drop-zone {
border-style: dashed;
}
body:not(.auth-required) .drop-zone:hover,
body:not(.auth-required) .drop-zone.drag-over {
border-color: rgba(47, 109, 183, 0.48);
background: #f0faf5;
box-shadow: inset 0 0 0 1px rgba(47, 109, 183, 0.08);
}
body:not(.auth-required) .monitor-header,
body:not(.auth-required) .workflow-head,
body:not(.auth-required) .infinite-canvas-head,
body:not(.auth-required) .tool-page-head {
color: #0f172a;
}
body:not(.auth-required) .monitor-header h2,
body:not(.auth-required) .workflow-head h2,
body:not(.auth-required) .tool-page-head h2,
body:not(.auth-required) .workflow-inspector-head h2 {
font-weight: 900;
}
body:not(.auth-required) .job-row,
body:not(.auth-required) .job-select {
border-radius: 11px;
}
body:not(.auth-required) .job-meta span,
body:not(.auth-required) .state-pill,
body:not(.auth-required) .workflow-dirty-badge {
border-radius: 999px;
background: #f7fafc;
}
body:not(.auth-required) .workflow-shell {
gap: 12px;
}
body:not(.auth-required) .workflow-sidebar,
body:not(.auth-required) .workflow-inspector,
body:not(.auth-required) .infinite-canvas-inspector {
box-shadow: 0 14px 38px rgba(15, 23, 42, 0.07);
}
body:not(.auth-required) .workflow-lite-wrap,
body:not(.auth-required) .infinite-canvas-stage {
border-color: rgba(213, 220, 229, 0.9);
border-radius: 16px;
background-color: #f4f7fa;
}
body:not(.auth-required) .workflow-toolbar,
body:not(.auth-required) .infinite-canvas-toolbar {
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 24px rgba(15, 23, 42, 0.055);
}
body:not(.auth-required) .infinite-canvas-toolbar {
border: 0;
background: transparent;
box-shadow: none;
}
body:not(.auth-required) .infinite-canvas-stage {
border: 0;
border-radius: 0;
}
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-main {
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-stage {
background-color: var(--canvas-surface);
background-image: var(--canvas-grid-image);
background-position: 0 0;
background-size: var(--canvas-grid-size-current, 28px) var(--canvas-grid-size-current, 28px);
}
body:not(.auth-required) .infinite-canvas-stage.space-hand,
body:not(.auth-required) .infinite-canvas-stage.space-hand .infinite-card,
body:not(.auth-required) .infinite-canvas-stage.hand-tool,
body:not(.auth-required) .infinite-canvas-stage.hand-tool .infinite-card {
cursor: grab !important;
}
body:not(.auth-required) .infinite-canvas-stage.panning,
body:not(.auth-required) .infinite-canvas-stage.panning .infinite-card {
cursor: grabbing !important;
}
body:not(.auth-required) .infinite-canvas-stage.cut-tool,
body:not(.auth-required) .infinite-canvas-stage.cut-tool .infinite-card,
body:not(.auth-required) .infinite-canvas-stage.cut-tool .infinite-canvas-link {
cursor: crosshair !important;
}
body:not(.auth-required) .infinite-canvas-selection-box.add {
border-color: var(--canvas-selection-frame-color);
background: var(--canvas-selection-frame-fill);
box-shadow: inset 0 0 0 1px var(--canvas-selection-frame-inset);
}
body:not(.auth-required) .infinite-canvas-selection-box.subtract {
border-color: var(--canvas-selection-subtract-frame-color);
background: var(--canvas-selection-subtract-frame-fill);
box-shadow: inset 0 0 0 1px var(--canvas-selection-frame-inset);
}
body:not(.auth-required) .infinite-canvas-cut-path {
fill: none;
stroke: #d92d20;
stroke-width: 1.8;
stroke-dasharray: 6 5;
stroke-linecap: round;
pointer-events: none;
}
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-status-row {
left: 18px;
right: auto;
bottom: 18px;
width: auto;
height: auto;
padding: 0;
border-top: 0;
background: transparent;
justify-content: flex-start;
}
body:not(.auth-required) .workflow-check-item {
border-radius: 12px;
}
body:not(.auth-required) .modal-panel {
border-color: rgba(203, 213, 225, 0.9);
border-radius: 18px;
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
}
body:not(.auth-required) .result-box,
body:not(.auth-required) .light-result {
border-color: #dbe7f0;
border-radius: 14px;
background: #f8fbfd;
}
@media (max-width: 900px) {
body:not(.auth-required) .panel,
body:not(.auth-required) .tool-card,
body:not(.auth-required) .workflow-sidebar,
body:not(.auth-required) .workflow-main,
body:not(.auth-required) .workflow-inspector {
border-radius: 14px;
}
}
@media (max-width: 1120px) {
body:not(.auth-required) .topbar {
position: fixed;
inset: 0 auto 0 0;
width: var(--sidebar);
height: 100vh;
min-height: 100vh;
border-right: 1px solid var(--border);
border-bottom: 0;
}
body:not(.auth-required) .layout {
margin-left: var(--sidebar);
}
}
body:not(.auth-required) .canvas-side-dock,
body:not(.auth-required) .canvas-studio-shell .canvas-side-dock,
body:not(.auth-required) .layout.canvas-layout .canvas-side-dock {
display: none !important;
}
body:not(.auth-required) .canvas-studio-shell .canvas-board-actions .canvas-legacy-add,
body:not(.auth-required) .layout.canvas-layout .canvas-board-actions .canvas-legacy-add {
display: none !important;
}
body:not(.auth-required) .layout.workflow-layout .workflow-main > .workflow-status-row,
body:not(.auth-required) .workflow-main > .workflow-status-row,
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-status-row,
body:not(.auth-required) .canvas-studio-shell .infinite-canvas-status-row {
position: absolute;
left: 18px;
right: auto;
bottom: 18px;
z-index: 24;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
width: auto;
max-width: min(760px, calc(100% - 36px));
height: auto;
padding: 0;
border: 0;
border-top: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
pointer-events: none;
}
body:not(.auth-required) .layout.workflow-layout .workflow-main > .workflow-status-row > *,
body:not(.auth-required) .workflow-main > .workflow-status-row > *,
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-status-row > *,
body:not(.auth-required) .canvas-studio-shell .infinite-canvas-status-row > * {
pointer-events: auto;
}
body:not(.auth-required) .layout.workflow-layout .workflow-main > .workflow-status-row .file-summary,
body:not(.auth-required) .workflow-main > .workflow-status-row .file-summary,
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-status-row .file-summary,
body:not(.auth-required) .canvas-studio-shell .infinite-canvas-status-row .file-summary {
box-sizing: border-box;
height: 38px;
min-height: 38px;
border: 1px solid rgba(213, 220, 229, 0.9);
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 20px rgba(15, 23, 42, 0.05);
backdrop-filter: blur(16px);
margin: 0 !important;
}
body:not(.auth-required) .layout.workflow-layout .workflow-main > .workflow-status-row .file-summary,
body:not(.auth-required) .workflow-main > .workflow-status-row .file-summary,
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-status-row .file-summary,
body:not(.auth-required) .canvas-studio-shell .infinite-canvas-status-row .file-summary {
display: inline-flex;
align-items: center;
box-sizing: border-box;
max-width: min(390px, 44vw);
height: 38px;
padding: 0 14px;
overflow: hidden;
color: #526174;
text-overflow: ellipsis;
white-space: nowrap;
}
body:not(.auth-required) .layout.workflow-layout .workflow-main > .workflow-status-row .workflow-history-actions,
body:not(.auth-required) .workflow-main > .workflow-status-row .workflow-history-actions,
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-status-row .workflow-history-actions,
body:not(.auth-required) .canvas-studio-shell .infinite-canvas-status-row .workflow-history-actions {
display: inline-flex;
align-items: center;
box-sizing: border-box;
height: 38px;
min-height: 38px;
gap: 6px;
padding: 4px;
border: 1px solid rgba(213, 220, 229, 0.9);
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 20px rgba(15, 23, 42, 0.05);
backdrop-filter: blur(16px);
margin: 0 !important;
}
body:not(.auth-required) .layout.workflow-layout .workflow-main > .workflow-status-row .workflow-history-actions button,
body:not(.auth-required) .workflow-main > .workflow-status-row .workflow-history-actions button,
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-status-row .workflow-history-actions button,
body:not(.auth-required) .canvas-studio-shell .infinite-canvas-status-row .workflow-history-actions button {
box-sizing: border-box;
height: 30px;
min-height: 30px;
padding: 0 11px;
border-radius: 999px;
white-space: nowrap;
}
body:not(.auth-required) #infiniteCanvasDropHint,
body:not(.auth-required) .infinite-canvas-drop-hint {
display: none !important;
}
body:not(.auth-required) .layout.workflow-layout .workflow-shell {
--studio-frame-border: rgba(213, 220, 229, 0.9);
--studio-frame-bg: linear-gradient(180deg, #f8fafc 0%, #eef2f6 100%);
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
height: 100%;
min-height: 0;
overflow: hidden;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
body.theme-dark:not(.auth-required) .layout.workflow-layout .workflow-shell {
--studio-frame-border: rgba(141, 149, 165, 0.3);
--studio-frame-bg: linear-gradient(180deg, #0e1726 0%, #0b121f 100%);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 34px rgba(0, 0, 0, 0.35);
}
body:not(.auth-required) .layout.workflow-layout .workflow-main {
position: relative;
height: 100%;
min-width: 0;
min-height: 0;
overflow: hidden;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
body:not(.auth-required) .layout.workflow-layout .workflow-inspector {
display: block;
height: 100%;
min-width: 0;
margin: 0;
padding: 18px 16px;
overflow: auto;
border: 0;
border-left: 1px solid rgba(213, 220, 229, 0.9);
border-radius: 0 20px 20px 0;
background: rgba(255, 255, 255, 0.86);
box-shadow: none;
backdrop-filter: blur(18px);
}
body:not(.auth-required) .layout.workflow-layout .workflow-main > .workflow-stage-wrap.workflow-lite-wrap {
border-radius: 0;
}
body:not(.auth-required) .layout.workflow-layout .workflow-main > .workflow-status-row {
left: 18px;
bottom: 18px;
}
body:not(.auth-required) .layout.workflow-layout .workflow-minimap {
right: 18px;
bottom: 86px;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) {
--canvas-inline-unified-radius: 9px;
--canvas-inline-control-pad-x: 6px;
--canvas-inline-control-font: 11px;
max-height: none;
overflow: visible;
padding: 9px;
border-top-width: 2px;
border-radius: var(--canvas-inline-unified-radius) !important;
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run)::before {
display: none;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) > .infinite-inline-panel-head {
display: none;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"refs refs"
"prompt prompt"
"fields actions";
gap: 5px 8px;
align-items: stretch;
min-width: 0;
padding: 0;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .infinite-inline-references {
grid-area: refs;
position: relative;
width: 100%;
max-width: 100%;
justify-self: start;
min-height: 34px;
padding: 3px 5px;
border-radius: var(--canvas-inline-unified-radius);
border-color: rgba(47, 109, 183, 0.24);
background: linear-gradient(180deg, rgba(240, 246, 252, 0.98), rgba(229, 238, 248, 0.98));
box-shadow: inset 0 0 0 1px rgba(47, 109, 183, 0.04);
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-references-head {
position: absolute;
top: 6px;
right: 8px;
z-index: 2;
min-height: 0;
margin: 0;
pointer-events: none;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-references-head strong {
display: none;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-reference-grid {
display: flex;
align-items: center;
gap: 5px;
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 1px;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-reference-grid [data-canvas-panel-ref] {
flex: 0 0 34px;
width: 34px;
height: 34px;
min-height: 34px;
border-radius: var(--canvas-inline-unified-radius);
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-reference-grid .infinite-inline-reference-add {
flex: 0 0 34px;
width: 34px;
height: 34px;
min-height: 34px;
padding: 0;
border-radius: var(--canvas-inline-unified-radius);
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-references-actions {
pointer-events: auto;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-reference-pick {
display: inline-flex;
align-items: center;
gap: 4px;
min-height: 30px;
padding: 0 9px;
border: 1px dashed rgba(47, 109, 183, 0.5);
border-radius: var(--canvas-inline-unified-radius);
background: #f8fbff;
color: #2f6db7;
font-size: 11px;
font-weight: 850;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-reference-pick span {
font-size: 15px;
line-height: 1;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-reference-pick small {
font-size: 11px;
font-weight: 850;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-reference-pick.has-preview {
min-width: 72px;
padding: 3px 7px 3px 4px;
border-style: solid;
background: rgba(255, 255, 255, 0.88);
box-shadow: 0 7px 18px rgba(15, 23, 42, 0.08);
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-reference-pick.has-preview img,
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-reference-pick.has-preview video {
width: 30px;
height: 30px;
border-radius: 8px;
object-fit: cover;
box-shadow: 0 3px 9px rgba(15, 23, 42, 0.14);
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-reference-pick.active,
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-reference-add.active {
border-color: rgba(47, 109, 183, 0.72);
background: #eaf2fb;
color: #2f6db7;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-reference-empty {
flex: 1 1 auto;
min-width: 0;
min-height: 34px;
border: 0;
border-radius: 12px;
background: transparent;
color: transparent;
font-size: 0;
line-height: 0;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-reference-grid img,
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-reference-grid video {
width: 34px !important;
height: 34px !important;
max-width: none !important;
object-fit: cover;
display: block;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .infinite-card-fields {
grid-area: fields;
z-index: 3;
align-self: center;
justify-self: start;
display: flex;
flex-wrap: nowrap;
gap: 5px;
align-content: start;
width: max-content;
max-width: 100%;
min-width: 0;
margin: 0;
padding: 0;
pointer-events: auto;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .infinite-card-actions {
grid-area: actions;
z-index: 4;
align-self: center;
justify-self: end;
display: inline-flex;
flex-wrap: nowrap;
align-items: center;
gap: 6px;
width: max-content;
max-width: 100%;
min-width: 0;
margin: 0;
padding: 0;
pointer-events: auto;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field {
flex: 0 1 auto;
width: 96px;
grid-template-columns: minmax(0, 1fr);
align-items: center;
gap: 0;
min-width: 0;
--hui-control-font: var(--canvas-inline-control-font);
min-height: 30px;
height: 30px;
padding: 0;
border: 1px solid rgba(202, 215, 229, 0.72);
border-radius: var(--canvas-inline-unified-radius);
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.07);
backdrop-filter: blur(10px);
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field:has([data-canvas-config-key="model"]) {
width: fit-content;
max-width: 106px;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field:has([data-canvas-config-key="duration"]) {
width: 62px;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field:has([data-canvas-config-key="count"]) {
flex: 0 0 auto;
width: 42px;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field > span {
display: none;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field input,
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field select {
width: 100%;
min-width: 0;
min-height: 0;
height: 100%;
border-color: transparent;
border-radius: var(--canvas-inline-unified-radius);
background-color: transparent;
font-weight: 700;
font-family: inherit;
font-size: var(--canvas-inline-control-font) !important;
line-height: 1;
padding-block: 0;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field select {
-webkit-appearance: none !important;
appearance: none !important;
background-image: none !important;
padding-right: var(--canvas-inline-control-pad-x) !important;
padding-left: var(--canvas-inline-control-pad-x) !important;
text-overflow: ellipsis;
text-align: center;
text-align-last: center;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field .infinite-card-cs {
height: 100%;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field .infinite-card-cs-trigger {
height: 100%;
min-height: 0;
padding: 0 var(--canvas-inline-control-pad-x);
border-color: transparent;
background: transparent;
border-radius: var(--canvas-inline-unified-radius);
box-shadow: none;
font-weight: 700;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field .infinite-card-cs-label {
font-family: inherit;
font-size: var(--canvas-inline-control-font);
line-height: 1;
text-align: center;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field:has([data-canvas-config-key="model"]) .infinite-card-cs,
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field:has([data-canvas-config-key="model"]) .infinite-card-cs-trigger {
width: fit-content;
max-width: 100%;
padding-inline: calc(var(--canvas-inline-control-pad-x) + 1px);
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field:has([data-canvas-config-key="model"]) .infinite-card-cs-label {
flex: 0 1 auto;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field:has(.infinite-card-cs.cs-open) {
border-color: rgba(47, 109, 183, 0.6);
box-shadow: 0 0 0 2px rgba(47, 109, 183, 0.14);
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-qr {
flex: 0 1 auto;
width: 68px;
position: relative;
min-width: 0;
min-height: 30px;
height: 30px;
border: 1px solid rgba(202, 215, 229, 0.72);
border-radius: var(--canvas-inline-unified-radius);
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.07);
backdrop-filter: blur(10px);
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-qr.qr-open {
border-color: rgba(47, 109, 183, 0.6);
box-shadow: 0 0 0 2px rgba(47, 109, 183, 0.14);
}
.infinite-card-qr-trigger {
display: flex;
align-items: center;
justify-content: center;
gap: 3px;
width: 100%;
height: 100%;
padding: 0 8px;
border-radius: var(--canvas-inline-unified-radius);
color: #2c3e52;
font-size: 11px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
user-select: none;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-qr-trigger {
padding-inline: var(--canvas-inline-control-pad-x);
font-family: inherit;
font-size: var(--canvas-inline-control-font);
line-height: 1;
}
.infinite-card-qr-trigger .infinite-card-qr-q,
.infinite-card-qr-trigger .infinite-card-qr-r,
.infinite-card-qr-trigger .infinite-card-qr-d {
overflow: hidden;
text-overflow: ellipsis;
}
.infinite-card-qr-trigger .infinite-card-qr-dot {
color: #c0cad8;
}
.infinite-card-qr-caret {
flex: 0 0 auto;
color: #8497ab;
margin-left: 1px;
transition: transform 140ms ease;
}
.infinite-card-qr.qr-open .infinite-card-qr-caret {
transform: rotate(180deg);
}
.infinite-card-qr-pop {
position: absolute;
top: calc(100% + 9px);
bottom: auto;
left: 0;
max-height: min(62vh, 420px, var(--canvas-qr-pop-room, 420px));
overflow-y: auto;
z-index: 30;
width: 250px;
max-width: 72vw;
padding: 12px;
display: grid;
gap: 11px;
border: 1px solid rgba(202, 215, 229, 0.92);
border-radius: 15px;
background: #ffffff;
box-shadow: 0 18px 46px rgba(15, 23, 42, 0.2);
cursor: default;
transform-origin: top center;
animation: qrPopIn 130ms ease;
}
.infinite-card-qr.qr-pop-up .infinite-card-qr-pop {
top: auto;
bottom: calc(100% + 9px);
transform-origin: bottom center;
}
.infinite-card-qr-pop[hidden] {
display: none;
}
@keyframes qrPopIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.infinite-card-qr-sec {
display: grid;
gap: 7px;
}
.infinite-card-qr-sec-label {
font-size: 11px;
font-weight: 800;
color: #5f7287;
letter-spacing: 0.02em;
}
.infinite-card-qr-seg {
display: flex;
gap: 3px;
padding: 3px;
border-radius: 11px;
background: #eef2f7;
}
.infinite-card-qr-seg [data-qr-set] {
flex: 1 1 0;
display: grid;
place-items: center;
min-height: 28px;
border-radius: 8px;
color: #44546b;
font-size: 12px;
font-weight: 700;
cursor: pointer;
user-select: none;
transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.infinite-card-qr-seg [data-qr-set].active {
background: #ffffff;
color: #2f6db7;
box-shadow: 0 2px 7px rgba(15, 23, 42, 0.12);
}
.infinite-card-qr-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
}
.infinite-card-qr-grid [data-qr-set] {
display: grid;
grid-template-rows: 18px auto;
place-items: center;
gap: 5px;
padding: 7px 2px 5px;
border: 1.5px solid transparent;
border-radius: 10px;
background: #f5f8fb;
color: #8497ab;
cursor: pointer;
user-select: none;
transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.infinite-card-qr-grid [data-qr-set]:hover {
background: #eef3f8;
}
.infinite-card-qr-grid [data-qr-set].active {
border-color: #2f6db7;
background: #eaf2fb;
color: #2f6db7;
}
.infinite-card-qr-grid small {
font-size: 9px;
font-weight: 700;
color: #5f7287;
line-height: 1;
}
.infinite-card-qr-grid [data-qr-set].active small {
color: #2f6db7;
}
.infinite-card-qr-native {
display: none;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > textarea {
grid-area: prompt;
z-index: 1;
min-height: 104px;
max-height: 320px;
border: 1px solid rgba(188, 204, 221, 0.95);
border-radius: var(--canvas-inline-unified-radius) !important;
background: #ffffff;
background-image: none !important;
padding: 10px 11px 44px 11px !important;
resize: none !important;
box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.02);
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > textarea:focus {
border-color: rgba(47, 109, 183, 0.55);
outline: none;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .infinite-inline-prompt-expand {
grid-area: prompt;
z-index: 2;
align-self: end;
justify-self: end;
width: 30px !important;
min-width: 30px !important;
height: 30px !important;
min-height: 30px !important;
margin: 7px;
padding: 0 !important;
border: 1px solid rgba(207, 221, 235, 0.94);
border-radius: var(--canvas-inline-unified-radius);
background: rgba(247, 250, 253, 0.94);
color: #5c7590;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .infinite-inline-prompt-expand:hover {
border-color: rgba(47, 109, 183, 0.42);
background: #edf4fb;
color: #2f6db7;
}
.infinite-inline-prompt-expand .ui-icon,
.infinite-inline-prompt-expand svg {
width: 15px;
height: 15px;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .infinite-card-fields > *,
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .infinite-card-actions > * {
height: 30px !important;
min-height: 30px !important;
align-self: center;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-cs,
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-cs-trigger {
height: 100%;
min-height: 0;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body .infinite-card-run {
min-width: 78px;
min-height: 30px !important;
height: 30px !important;
padding: 0 13px;
border-radius: var(--canvas-inline-unified-radius) !important;
font-size: 12px;
font-weight: 900;
font-family: inherit;
line-height: 1;
align-items: center;
justify-content: center;
box-shadow: 0 8px 18px rgba(47, 109, 183, 0.22);
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-run-label,
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-run > .button-price,
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-run > .button-price .points-value {
line-height: 1;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-run-label {
display: inline-flex;
align-items: center;
height: 15px;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .infinite-card-actions > .infinite-card-run {
margin: 0;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .infinite-card-note {
display: none;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:not(:has(.infinite-card-run)) {
max-height: none;
overflow: visible;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel textarea {
box-sizing: border-box;
resize: none;
max-width: none;
max-height: none;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) textarea {
resize: none !important;
max-width: 100%;
background-image: none !important;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:not(:has(.infinite-card-run)) .infinite-inline-panel-body > textarea {
min-width: 420px;
min-height: 176px;
border: 1px solid rgba(188, 204, 221, 0.95);
border-radius: 14px;
background: #ffffff;
padding: 13px 14px;
line-height: 1.55;
box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.02);
}
.infinite-canvas-prompt-editor-mask {
z-index: 1280;
padding: 24px;
background: rgba(15, 23, 42, 0.48);
backdrop-filter: blur(8px);
}
#infiniteCanvasPromptEditorModal .infinite-canvas-prompt-editor-panel {
width: min(1008px, calc(100vw - 48px));
max-width: none;
height: min(720px, calc(100dvh - 48px));
max-height: none;
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
gap: 0 !important;
padding: 0 !important;
overflow: hidden;
border: 1px solid rgba(194, 207, 221, 0.96);
border-radius: 20px !important;
background: #ffffff;
box-shadow: 0 32px 90px rgba(15, 23, 42, 0.28);
}
.infinite-canvas-prompt-editor-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 12px 14px 12px 18px;
border-bottom: 1px solid #e4ebf3;
background: #ffffff;
}
#infiniteCanvasPromptEditorModal .infinite-canvas-prompt-editor-head h2 {
margin: 0;
color: #172435;
font-size: 17px !important;
line-height: 1.3 !important;
}
#infiniteCanvasPromptEditorModal .infinite-canvas-prompt-editor-close {
flex: 0 0 36px;
width: 36px;
height: 36px !important;
min-height: 36px !important;
padding: 0 !important;
border: 1px solid #dce5ef;
border-radius: 10px !important;
background: #f7f9fc;
color: #52657a;
font-size: 24px !important;
font-weight: 400;
line-height: 1 !important;
}
.infinite-canvas-prompt-editor-stage {
min-height: 0;
padding: 32px;
background: #f3f6fa;
display: grid;
}
#infiniteCanvasPromptEditorModal .infinite-canvas-prompt-editor-stage textarea {
width: 100%;
min-width: 0;
min-height: 0 !important;
height: 100%;
max-height: none !important;
padding: 18px 20px !important;
border: 1px solid #cfdae6;
border-radius: 14px !important;
outline: 0;
background: #ffffff;
background-image: none !important;
color: #172435;
font: inherit;
font-size: 16px !important;
line-height: 1.7 !important;
resize: none !important;
box-shadow: 0 8px 26px rgba(15, 23, 42, 0.06);
}
#infiniteCanvasPromptEditorModal .infinite-canvas-prompt-editor-stage textarea:focus {
border-color: rgba(47, 109, 183, 0.62);
box-shadow: 0 0 0 3px rgba(47, 109, 183, 0.11), 0 12px 30px rgba(15, 23, 42, 0.08);
}
.infinite-canvas-prompt-editor-foot {
min-height: 64px;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
padding: 12px 16px;
border-top: 1px solid #e4ebf3;
background: #ffffff;
}
#infiniteCanvasPromptEditorModal .infinite-canvas-prompt-editor-foot button {
min-width: 88px;
min-height: 38px !important;
height: 38px !important;
padding: 0 16px !important;
border-radius: 10px !important;
font-size: 13px !important;
font-weight: 850;
}
body.theme-dark .infinite-canvas-prompt-editor-panel,
body.theme-dark .infinite-canvas-prompt-editor-head,
body.theme-dark .infinite-canvas-prompt-editor-foot,
body.theme-dark .infinite-canvas-prompt-editor-stage textarea {
border-color: rgba(148, 163, 184, 0.24);
background: #111b28;
color: #e6edf5;
}
body.theme-dark .infinite-canvas-prompt-editor-stage {
background: #0c1420;
}
body.theme-dark .infinite-canvas-prompt-editor-head h2,
body.theme-dark .infinite-canvas-prompt-editor-stage textarea {
color: #eef4fa;
}
@media (max-width: 980px) {
body:not(.auth-required) .layout.workflow-layout .workflow-shell {
grid-template-columns: 1fr;
}
body:not(.auth-required) .layout.workflow-layout .workflow-inspector {
display: none;
}
body:not(.auth-required) .layout.workflow-layout .workflow-main,
body:not(.auth-required) .layout.workflow-layout .workflow-main > .workflow-stage-wrap.workflow-lite-wrap {
border-radius: 20px;
}
}
body:not(.auth-required) .canvas-studio-shell .canvas-board-actions,
body:not(.auth-required) .layout.canvas-layout .canvas-board-actions {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
gap: 6px;
padding: 1px 1px 3px;
}
body:not(.auth-required) .canvas-studio-shell .canvas-board-actions button,
body:not(.auth-required) .canvas-studio-shell .canvas-board-actions button.has-ui-icon,
body:not(.auth-required) .layout.canvas-layout .canvas-board-actions button,
body:not(.auth-required) .layout.canvas-layout .canvas-board-actions button.has-ui-icon {
width: auto !important;
min-width: 0 !important;
min-height: 31px;
padding: 0 10px !important;
border-radius: 999px;
font-size: 12px !important;
font-weight: 850;
line-height: 1;
gap: 6px;
white-space: nowrap;
}
body:not(.auth-required) .canvas-studio-shell .canvas-board-actions button.has-ui-icon .ui-icon,
body:not(.auth-required) .layout.canvas-layout .canvas-board-actions button.has-ui-icon .ui-icon {
flex: 0 0 auto;
width: 14px;
height: 14px;
margin: 0;
}
body:not(.auth-required) .canvas-studio-shell .canvas-board-actions .workflow-dirty-badge,
body:not(.auth-required) .layout.canvas-layout .canvas-board-actions .workflow-dirty-badge {
min-height: 31px;
max-width: none;
padding: 0 10px;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-link-zone,
body:not(.auth-required) .canvas-studio-shell .infinite-card-link-zone {
width: 56px;
height: 56px;
pointer-events: auto;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-link-zone.left,
body:not(.auth-required) .canvas-studio-shell .infinite-card-link-zone.left {
left: -68px;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-link-zone.right,
body:not(.auth-required) .canvas-studio-shell .infinite-card-link-zone.right {
right: -68px;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card.is-pointer-hover .infinite-card-link-zone,
body:not(.auth-required) .layout.canvas-layout .infinite-card.selected .infinite-card-link-zone,
body:not(.auth-required) .layout.canvas-layout .infinite-card-link-zone:focus-within,
body:not(.auth-required) .layout.canvas-layout .infinite-card-link-zone:has(.infinite-card-link-handle:hover),
body:not(.auth-required) .layout.canvas-layout .infinite-card-link-zone:has(.infinite-card-link-handle.linking),
body:not(.auth-required) .canvas-studio-shell .infinite-card.is-pointer-hover .infinite-card-link-zone,
body:not(.auth-required) .canvas-studio-shell .infinite-card.selected .infinite-card-link-zone,
body:not(.auth-required) .canvas-studio-shell .infinite-card-link-zone:focus-within,
body:not(.auth-required) .canvas-studio-shell .infinite-card-link-zone:has(.infinite-card-link-handle:hover),
body:not(.auth-required) .canvas-studio-shell .infinite-card-link-zone:has(.infinite-card-link-handle.linking) {
pointer-events: auto;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-link-zone::before,
body:not(.auth-required) .canvas-studio-shell .infinite-card-link-zone::before {
inset: -10px 0;
background: transparent;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-link-handle,
body:not(.auth-required) .canvas-studio-shell .infinite-card-link-handle {
width: 27px;
height: 27px;
flex-basis: 27px;
transform: translate(var(--link-magnet-x, 0px), var(--link-magnet-y, 0px)) scale(1);
transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), background-color 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
cursor: crosshair;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-link-handle.magnetized,
body:not(.auth-required) .canvas-studio-shell .infinite-card-link-handle.magnetized {
background: rgba(47, 109, 183, 0.3);
border-color: rgba(47, 109, 183, 0.7);
box-shadow: none;
transform: translate(var(--link-magnet-x, 0px), var(--link-magnet-y, 0px)) scale(1.08);
transition: transform 70ms ease-out;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-link-handle.linking,
body:not(.auth-required) .canvas-studio-shell .infinite-card-link-handle.linking {
opacity: 0;
transform: translate(var(--link-magnet-x, 0px), var(--link-magnet-y, 0px)) scale(0.72);
}
body:not(.auth-required) .layout.canvas-layout .infinite-card.media-card .infinite-card-meta,
body:not(.auth-required) .canvas-studio-shell .infinite-card.media-card .infinite-card-meta {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
body:not(.auth-required) .module-nav,
body:not(.auth-required) .topbar .module-nav {
gap: 7px;
}
body:not(.auth-required) .module-tab,
body:not(.auth-required) .topbar .module-tab,
.module-tab.has-ui-icon,
.topbar .module-tab.has-ui-icon {
min-height: 53px;
height: 53px;
max-height: 53px;
padding: 8px 10px;
border-radius: 12px;
}
.module-tab.has-ui-icon,
.topbar .module-tab.has-ui-icon {
grid-template-columns: 32px minmax(0, 1fr);
column-gap: 9px;
}
.module-tab.has-ui-icon > .ui-icon,
.topbar .module-tab.has-ui-icon > .ui-icon,
body.sidebar-collapsed .module-tab.has-ui-icon > .ui-icon,
body.sidebar-collapsed .topbar .module-tab.has-ui-icon > .ui-icon {
width: 32px;
height: 32px;
padding: 7px;
border-radius: 10px;
}
body:not(.auth-required) .module-tab strong,
body:not(.auth-required) .topbar .module-tab strong {
font-size: 13px;
line-height: 1.1;
}
body:not(.auth-required) .module-tab span:not(.ui-icon),
body:not(.auth-required) .topbar .module-tab span:not(.ui-icon) {
font-size: 11px;
line-height: 1.2;
}
body.sidebar-collapsed .module-tab.has-ui-icon,
body.sidebar-collapsed .topbar .module-tab.has-ui-icon {
width: 44px;
min-height: 44px;
height: 44px;
max-height: 44px;
}
body.sidebar-collapsed #refreshJobsBtn {
width: 42px;
min-width: 42px;
height: 42px;
padding: 0;
align-self: center;
font-size: 0;
}
body.sidebar-collapsed #themeToggleBtn {
width: 42px;
min-width: 42px;
height: 42px;
padding: 0;
align-self: center;
font-size: 0;
}
body.sidebar-collapsed #refreshJobsBtn .ui-icon {
width: 17px;
height: 17px;
}
body.sidebar-collapsed .topbar {
align-items: center;
overflow-x: hidden;
}
body.sidebar-collapsed .brand-block {
width: 100%;
padding-bottom: 10px;
}
body.sidebar-collapsed .brand-row {
display: grid;
grid-template-columns: 1fr;
justify-items: center;
align-items: center;
gap: 9px;
}
body.sidebar-collapsed .brand-text {
display: grid;
place-items: center;
width: 42px;
height: 42px;
padding: 0;
border-radius: 0;
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
}
body.sidebar-collapsed .brand-text h1 {
display: grid;
place-items: center;
width: 100%;
height: 100%;
color: #ffffff;
font-size: 17px;
line-height: 1;
}
body.sidebar-collapsed .brand-short {
color: inherit;
display: grid !important;
place-items: center;
overflow: visible;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
body.sidebar-collapsed .sidebar-toggle.has-ui-icon,
body.sidebar-collapsed .topbar .icon-button.has-ui-icon,
body.sidebar-collapsed #refreshJobsBtn,
body.sidebar-collapsed #themeToggleBtn,
body.sidebar-collapsed .account-summary {
display: inline-grid;
place-items: center;
width: 42px;
min-width: 42px;
max-width: 42px;
height: 42px;
min-height: 42px;
padding: 0;
border-radius: 13px;
font-size: 0;
line-height: 1;
white-space: nowrap;
overflow: hidden;
}
body.sidebar-collapsed .sidebar-toggle.has-ui-icon::before,
body.sidebar-collapsed .topbar .icon-button.has-ui-icon::before,
body.sidebar-collapsed #refreshJobsBtn::before,
body.sidebar-collapsed #themeToggleBtn::before {
content: none !important;
display: none !important;
}
body.sidebar-collapsed .sidebar-toggle.has-ui-icon .sidebar-toggle-label,
body.sidebar-collapsed #refreshJobsBtn .sidebar-toggle-label,
body.sidebar-collapsed #themeToggleBtn .sidebar-toggle-label {
display: none !important;
}
body.sidebar-collapsed .sidebar-toggle.has-ui-icon .ui-icon,
body.sidebar-collapsed .topbar .icon-button.has-ui-icon .ui-icon,
body.sidebar-collapsed #refreshJobsBtn .ui-icon,
body.sidebar-collapsed #themeToggleBtn .ui-icon {
display: inline-grid !important;
width: 18px;
height: 18px;
margin: 0;
}
body.sidebar-collapsed .topbar .top-actions {
display: grid;
justify-items: center;
align-items: end;
width: 100%;
gap: 9px;
}
body.sidebar-collapsed .account-bar {
display: grid;
justify-items: center;
width: 100%;
gap: 0;
overflow: visible;
}
body.sidebar-collapsed .account-summary {
border-color: #cfe0f0;
background: #eaf2fb;
color: #1d4a83;
}
body.sidebar-collapsed .account-summary::before {
content: none !important;
display: none !important;
}
body:not(.mobile-ui).sidebar-collapsed:not(.auth-required) .topbar .account-summary[data-account-tooltip]::after,
body:not(.mobile-ui):not(.auth-required).sidebar-collapsed .topbar .account-summary[data-account-tooltip]::after {
content: attr(data-account-tooltip);
position: absolute;
left: calc(100% + 10px);
top: 50%;
z-index: 120;
display: block;
width: max-content;
max-width: 220px;
padding: 7px 10px;
border: 1px solid #d6e3ef;
border-radius: 9px;
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 10px 26px rgba(34, 64, 98, 0.16);
color: #1b3658;
font-size: 12px;
font-weight: 750;
line-height: 1.35;
text-align: left;
white-space: normal;
opacity: 0;
pointer-events: none;
transform: translate(4px, -50%);
transition: opacity 0.14s ease, transform 0.14s ease;
}
body:not(.mobile-ui).sidebar-collapsed:not(.auth-required) .topbar .account-summary[data-account-tooltip]:hover::after,
body:not(.mobile-ui).sidebar-collapsed:not(.auth-required) .topbar .account-summary[data-account-tooltip]:focus-visible::after,
body:not(.mobile-ui):not(.auth-required).sidebar-collapsed .topbar .account-summary[data-account-tooltip]:hover::after,
body:not(.mobile-ui):not(.auth-required).sidebar-collapsed .topbar .account-summary[data-account-tooltip]:focus-visible::after {
opacity: 1;
transform: translate(0, -50%);
}
body.theme-dark:not(.mobile-ui).sidebar-collapsed:not(.auth-required) .topbar .account-summary[data-account-tooltip]::after,
body.theme-dark:not(.mobile-ui):not(.auth-required).sidebar-collapsed .topbar .account-summary[data-account-tooltip]::after {
border-color: rgba(90, 166, 232, 0.28);
background: rgba(18, 21, 28, 0.96);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.36);
color: #dbe8f7;
}
body.sidebar-collapsed .account-summary-text {
display: none !important;
}
body.sidebar-collapsed #refreshJobsBtn::after,
body.sidebar-collapsed #themeToggleBtn::after {
content: none !important;
display: none !important;
}
.text-chat-shell {
grid-template-columns: 284px minmax(0, 1fr);
}
body:not(.auth-required) .layout.workflow-layout .workflow-shell {
grid-template-columns: minmax(0, 1fr) 286px !important;
position: relative;
}
body:not(.auth-required) .layout.workflow-layout .workflow-main {
border-radius: 0;
}
body:not(.auth-required) .layout.workflow-layout .workflow-main > .workflow-stage-wrap.workflow-lite-wrap {
border-radius: 0;
}
body:not(.auth-required) .layout.workflow-layout .workflow-inspector {
position: static;
z-index: auto;
align-self: stretch;
width: auto;
height: 100%;
margin: 0;
padding: 18px 16px;
overflow: auto;
border: 0;
border-left: 1px solid rgba(213, 220, 229, 0.9);
border-radius: 0 20px 20px 0;
background: rgba(255, 255, 255, 0.9);
box-shadow: none;
backdrop-filter: none;
}
body:not(.auth-required) .layout.workflow-layout .workflow-inspector-head {
position: sticky;
top: 0;
z-index: 2;
margin: -14px -14px 10px;
padding: 12px 14px;
border-bottom: 1px solid rgba(213, 220, 229, 0.76);
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(16px);
}
body:not(.auth-required) .workflow-empty-state {
max-width: 420px;
padding: 16px 20px;
color: #475569;
font-weight: 750;
line-height: 1.55;
text-align: center;
}
.workflow-media-overlay-thumb {
transition: transform 140ms cubic-bezier(0.16, 1, 0.3, 1), opacity 120ms ease, border-color 120ms ease, background 120ms ease;
}
.workflow-media-overlay-thumb.sort-shift-right,
.workflow-media-overlay-thumb.sort-shift-left {
}
.workflow-media-overlay-thumb.dragging,
.workflow-media-overlay-thumb.sort-placeholder {
visibility: hidden;
}
.selected-thumb {
transition: transform 140ms cubic-bezier(0.16, 1, 0.3, 1), opacity 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.selected-thumb.drag-over:not(.dragging) {
transform: translateX(10px);
border-color: rgba(47, 109, 183, 0.65);
box-shadow: -5px 0 0 rgba(47, 109, 183, 0.14), 0 10px 20px rgba(15, 23, 42, 0.08);
}
button .button-price {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
margin-left: 6px;
padding-left: 6px;
border-left: 1px solid rgba(255, 255, 255, 0.32);
font-size: 11px;
font-weight: 800;
line-height: 1;
opacity: 0.9;
}
button.has-button-price {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
white-space: nowrap;
}
button.has-button-price > .button-label,
button.has-button-price > .button-price {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
height: 100%;
min-height: 0;
line-height: 1;
}
.button-price-separator {
display: none;
align-items: center;
margin: 0 6px;
opacity: 0.72;
font-weight: 800;
}
button .button-price.button-price-text {
gap: 2px;
margin-left: 0;
padding-left: 0;
border-left: 0;
font-size: 11px;
letter-spacing: 0;
opacity: 0.96;
}
button .button-price.compact-points {
margin-left: 0;
padding-left: 0;
border-left: 0;
gap: 2px;
opacity: 1;
}
button .button-price.compact-points::before {
content: none;
}
.points-inline-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
flex: 0 0 auto;
border-radius: 0;
color: #0b7cff;
background: transparent;
box-shadow: none;
filter: drop-shadow(0 2px 5px rgba(11, 124, 255, 0.28));
line-height: 0;
}
.points-inline-icon svg {
display: block;
width: 14px;
height: 14px;
fill: currentColor;
stroke: none;
}
.button-point-icon {
width: 15px;
height: 15px;
}
.button-point-icon svg {
width: 13px;
height: 13px;
}
.table-point-icon,
.redeem-points-inline .points-inline-icon,
.ledger-points-inline .points-inline-icon {
width: 14px;
height: 14px;
}
.table-point-icon svg,
.redeem-points-inline .points-inline-icon svg,
.ledger-points-inline .points-inline-icon svg {
width: 12px;
height: 12px;
}
body.theme-dark:not(.auth-required) .points-inline-icon {
color: #66c3ff;
filter: drop-shadow(0 2px 6px rgba(102, 195, 255, 0.26));
}
button.primary .button-price,
button.primary .points-inline-icon {
color: #ffffff;
}
button.primary .points-inline-icon {
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.22));
}
.workflow-run-estimate {
display: inline-flex;
align-items: center;
min-height: 31px;
padding: 0 8px;
border: 1px solid rgba(202, 215, 229, 0.75);
border-radius: 999px;
background: rgba(255, 255, 255, 0.76);
color: #2f6db7;
font-size: 12px;
font-weight: 850;
white-space: nowrap;
}
.workflow-run-estimate .context-price {
margin-top: 0;
}
button .button-price::before,
.plan-summary-price::before,
.context-price::before {
content: none;
}
.plan-summary-price,
.context-price {
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
color: #2f6db7;
font-weight: 850;
}
.context-price {
margin: 0 0 0 6px;
font-size: 11px;
}
.points-amount,
.redeem-points-inline,
.ledger-points-inline {
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.redeem-member-inline {
display: inline-flex;
align-items: center;
margin-left: 6px;
padding: 1px 7px;
border-radius: 999px;
border: 1px solid rgba(200, 152, 46, 0.34);
background: rgba(253, 243, 224, 0.9);
color: #8a6413;
font-size: 11px;
font-style: normal;
font-weight: 700;
white-space: nowrap;
}
body.theme-dark .redeem-member-inline {
border-color: rgba(226, 182, 87, 0.4);
background: rgba(214, 158, 46, 0.16);
color: #ecc978;
}
.points-prefix,
.points-suffix {
color: inherit;
font-weight: 800;
}
button.secondary .button-price,
button.danger .button-price {
border-left-color: rgba(37, 99, 167, 0.18);
}
button .button-price[hidden] {
display: none;
}
.canvas-image-crop-panel,
.canvas-image-edit-panel,
.canvas-video-edit-panel {
width: min(1180px, calc(100vw - 48px));
height: min(820px, calc(100vh - 48px));
height: min(820px, calc(100dvh - 48px));
max-height: calc(100vh - 48px);
max-height: calc(100dvh - 48px);
display: grid;
grid-template-rows: auto minmax(0, 1fr);
overflow: hidden;
}
.canvas-cutout-panel {
width: min(660px, calc(100vw - 48px));
height: min(680px, calc(100vh - 48px));
height: min(680px, calc(100dvh - 48px));
max-height: calc(100vh - 48px);
max-height: calc(100dvh - 48px);
display: grid;
grid-template-rows: auto minmax(0, 1fr);
overflow: hidden;
}
.canvas-cutout-body {
display: grid;
grid-template-columns: minmax(0, 1fr) 260px;
gap: 16px;
min-height: 0;
overflow: auto;
padding-top: 4px;
}
.canvas-cutout-preview {
display: grid;
place-items: center;
border-radius: 14px;
padding: 10px;
min-height: 220px;
background:
linear-gradient(45deg, rgba(100, 116, 139, 0.5) 25%, transparent 25%),
linear-gradient(-45deg, rgba(100, 116, 139, 0.5) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, rgba(100, 116, 139, 0.5) 75%),
linear-gradient(-45deg, transparent 75%, rgba(100, 116, 139, 0.5) 75%),
#eef2f6;
background-position: 0 0, 0 9px, 9px -9px, -9px 0;
background-size: 18px 18px;
}
.canvas-cutout-preview img {
max-width: 100%;
max-height: 360px;
object-fit: contain;
border-radius: 8px;
}
.canvas-cutout-options { display: flex; flex-direction: column; gap: 13px; }
.canvas-cutout-note { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin: 0; }
.canvas-cutout-field { display: flex; flex-direction: column; gap: 7px; }
.canvas-cutout-field > label { font-size: 12.5px; font-weight: 600; color: var(--text); }
.canvas-cutout-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.canvas-cutout-chips button {
flex: 1 1 auto;
min-width: 0;
padding: 7px 6px;
font-size: 12.5px;
border-radius: 9px;
border: 1px solid var(--border);
background: #ffffff;
color: var(--text);
cursor: pointer;
transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}
.canvas-cutout-chips button:hover { border-color: rgba(47, 109, 183, 0.45); }
.canvas-cutout-chips button.active {
border-color: var(--accent);
background: rgba(47, 109, 183, 0.1);
color: var(--accent);
font-weight: 600;
}
.canvas-cutout-aiprice { font-size: 11px; opacity: 0.82; margin-left: 3px; }
.canvas-cutout-field input[type="color"] { width: 56px; height: 32px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: #fff; cursor: pointer; }
.canvas-cutout-field input[type="range"] { width: 100%; }
.canvas-cutout-run { margin-top: 4px; }
.canvas-cutout-options textarea {
width: 100%;
resize: vertical;
min-height: 48px;
padding: 8px 10px;
font-size: 12.5px;
line-height: 1.5;
border: 1px solid var(--border);
border-radius: 9px;
background: #fff;
color: var(--text);
box-sizing: border-box;
}
.canvas-cutout-options textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47, 109, 183, 0.14); }
#canvasCutoutEditCanvas {
border-radius: 8px;
box-shadow: 0 2px 10px rgba(16, 24, 40, 0.18);
cursor: crosshair;
touch-action: none;
max-width: 100%;
max-height: 100%;
}
.canvas-cutout-editbtns {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 8px;
margin-top: 6px;
}
.canvas-cutout-editbtns button { min-height: 38px; }
body.theme-dark:not(.auth-required) .canvas-cutout-chips button { background: rgba(18, 21, 29, 0.6); color: #e7eef9; border-color: rgba(141, 149, 165, 0.32); }
body.theme-dark:not(.auth-required) .canvas-cutout-chips button.active { background: rgba(90, 166, 232, 0.16); color: #cfe6ff; border-color: rgba(90, 166, 232, 0.6); }
body.theme-dark:not(.auth-required) .canvas-cutout-options textarea { background: rgba(18, 21, 29, 0.6); color: #e7eef9; border-color: rgba(141, 149, 165, 0.32); }
@media (max-width: 640px) {
.canvas-cutout-body { grid-template-columns: minmax(0, 1fr); }
}
.canvas-image-crop-layout,
.canvas-image-edit-layout,
.canvas-video-edit-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
gap: 14px;
min-height: 0;
height: 100%;
align-items: stretch;
overflow: hidden;
}
.canvas-image-crop-stage,
.canvas-image-expand-stage {
position: relative;
min-height: 0;
height: 100%;
display: grid;
place-items: center;
padding: 10px;
border: 1px solid rgba(190, 205, 220, 0.82);
border-radius: 14px;
background: linear-gradient(180deg, #f8fbfd 0%, #eef6f3 100%);
}
.canvas-image-expand-stage {
position: relative;
overflow: hidden;
}
#canvasImageCropCanvas {
max-width: 100%;
max-height: calc(100vh - 240px);
border-radius: 10px;
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
cursor: default;
}
.canvas-image-crop-side,
.canvas-image-edit-side {
display: grid;
align-content: start;
gap: 12px;
min-height: 0;
max-height: 100%;
padding: 12px;
border: 1px solid rgba(203, 213, 225, 0.86);
border-radius: 16px;
background: rgba(248, 251, 253, 0.94);
overflow: auto;
overscroll-behavior: contain;
scrollbar-gutter: stable;
}
.canvas-video-edit-layout .canvas-image-crop-side {
display: flex;
flex-direction: column;
}
.canvas-video-edit-layout .canvas-image-crop-side #previewCanvasVideoClipBtn {
margin-top: auto;
}
.canvas-image-crop-presets {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 7px;
}
.canvas-image-crop-presets button,
.canvas-image-crop-side button {
min-height: 34px;
border-radius: 10px;
}
.canvas-image-crop-presets button.active,
.canvas-image-edit-presets button.active {
border-color: rgba(47, 109, 183, 0.72);
background: rgba(47, 109, 183, 0.13);
color: #1d4a83;
box-shadow: inset 0 0 0 1px rgba(47, 109, 183, 0.18);
}
.canvas-image-crop-custom {
display: grid;
gap: 6px;
color: #475569;
font-size: 12px;
font-weight: 850;
}
.canvas-image-crop-custom span {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
}
.canvas-image-crop-custom input {
min-width: 0;
}
.canvas-image-crop-custom button {
min-height: 32px;
padding: 0 11px;
}
.canvas-image-crop-status {
padding: 7px 9px;
border: 1px dashed rgba(47, 109, 183, 0.32);
border-radius: 10px;
color: #1d4a83;
background: rgba(234, 242, 251, 0.78);
font-size: 12px;
font-weight: 850;
}
.canvas-image-crop-fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.canvas-image-crop-fields label {
display: grid;
gap: 5px;
color: #475569;
font-size: 12px;
font-weight: 800;
}
.canvas-image-crop-fields input {
min-width: 0;
}
.canvas-image-expand-scale {
display: grid;
gap: 6px;
color: #475569;
font-size: 12px;
font-weight: 850;
}
.canvas-image-expand-scale input {
min-width: 0;
}
.canvas-image-expand-scale-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.canvas-image-expand-scale.is-preview {
color: #94a3b8;
}
.canvas-image-edit-hint {
color: #94a3b8;
font-size: 11px;
line-height: 1.5;
}
.canvas-image-angle-preview {
min-height: 420px;
display: grid;
place-items: center;
position: relative;
overflow: hidden;
padding: 14px;
border: 1px solid rgba(203, 213, 225, 0.9);
border-radius: 18px;
background:
radial-gradient(circle, rgba(15, 23, 42, 0.09) 1px, transparent 1px),
#0a0f16;
background-size: 18px 18px;
}
#canvasImageExpandCanvas {
max-width: 100%;
max-height: calc(100vh - 240px);
border-radius: 10px;
cursor: default;
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
}
.canvas-video-edit-preview {
min-height: 390px;
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
gap: 12px;
padding: 12px;
border: 1px solid rgba(203, 213, 225, 0.9);
border-radius: 16px;
background: #f8fbfd;
}
.canvas-video-edit-stage {
position: relative;
min-height: 330px;
display: grid;
place-items: center;
}
.canvas-video-frame {
position: relative;
display: inline-block;
max-width: 100%;
max-height: calc(100vh - 260px);
border-radius: 12px;
overflow: hidden;
background: #0f172a;
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
contain: paint;
isolation: isolate;
}
.canvas-video-edit-preview video {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: calc(100vh - 260px);
background: #0f172a;
transform: translateZ(0);
backface-visibility: hidden;
}
.canvas-video-playback-controls {
display: grid;
grid-template-columns: 72px minmax(120px, 1fr) 104px;
align-items: center;
gap: 10px;
padding: 8px 10px;
border: 1px solid rgba(203, 213, 225, 0.9);
border-radius: 14px;
background: rgba(255, 255, 255, 0.86);
}
.canvas-video-playback-controls .secondary {
min-height: 32px;
padding: 0 12px;
border-radius: 10px;
}
.canvas-video-playback-range {
width: 100%;
accent-color: #2f6db7;
cursor: pointer;
}
.canvas-video-playback-time {
color: #475569;
font-size: 12px;
font-weight: 800;
text-align: right;
white-space: nowrap;
}
.canvas-video-crop-overlay {
position: absolute;
inset: 0;
pointer-events: none;
}
.canvas-video-crop-box {
position: absolute;
border: 2px solid rgba(47, 109, 183, 0.95);
background: rgba(47, 109, 183, 0.08);
border-radius: 10px;
box-shadow: 0 0 0 999px rgba(15, 23, 42, 0.34);
cursor: move;
pointer-events: auto;
}
.canvas-video-crop-box span {
position: absolute;
width: 12px;
height: 12px;
border-radius: 999px;
border: 2px solid #fff;
background: #2f80ed;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.22);
}
.canvas-video-edit-mask.clip-previewing .canvas-video-crop-overlay {
opacity: 0.42;
}
.canvas-video-edit-mask.clip-previewing .canvas-video-crop-box {
pointer-events: none;
}
.canvas-video-edit-mask.video-playing .canvas-video-crop-box,
.canvas-video-edit-mask.clip-previewing .canvas-video-crop-box {
background: rgba(47, 109, 183, 0.04);
box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.18);
}
.canvas-video-edit-mask.video-playing .canvas-video-crop-box span,
.canvas-video-edit-mask.clip-previewing .canvas-video-crop-box span {
opacity: 0.72;
}
.canvas-video-crop-box [data-video-crop-handle="nw"] { left: -7px; top: -7px; cursor: nwse-resize; }
.canvas-video-crop-box [data-video-crop-handle="ne"] { right: -7px; top: -7px; cursor: nesw-resize; }
.canvas-video-crop-box [data-video-crop-handle="sw"] { left: -7px; bottom: -7px; cursor: nesw-resize; }
.canvas-video-crop-box [data-video-crop-handle="se"] { right: -7px; bottom: -7px; cursor: nwse-resize; }
.canvas-video-timeline {
display: grid;
gap: 7px;
padding: 4px 6px 0;
}
.canvas-video-timeline-track {
position: relative;
height: 18px;
border-radius: 999px;
background: rgba(148, 163, 184, 0.22);
cursor: pointer;
}
.canvas-video-timeline-selection {
position: absolute;
top: 4px;
bottom: 4px;
border-radius: 999px;
background: var(--accent);
}
.canvas-video-timeline-handle {
position: absolute;
top: 50%;
width: 12px;
min-width: 12px;
height: 24px;
min-height: 24px;
padding: 0;
border-radius: 999px;
transform: translate(-50%, -50%);
border: 2px solid #fff;
background: #2f6db7;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
cursor: ew-resize;
}
.canvas-video-timeline .canvas-video-timeline-handle,
.canvas-video-timeline .canvas-video-timeline-handle:hover,
.canvas-video-timeline .canvas-video-timeline-handle:focus,
.canvas-video-timeline .canvas-video-timeline-handle:active {
transform: translate(-50%, -50%) !important;
transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.canvas-video-timeline .canvas-video-timeline-handle:hover,
.canvas-video-timeline .canvas-video-timeline-handle:focus-visible {
background: #2f6db7;
box-shadow: 0 0 0 4px rgba(47, 109, 183, 0.16), 0 4px 14px rgba(15, 23, 42, 0.18);
}
.canvas-video-timeline.dragging,
.canvas-video-timeline.dragging * {
cursor: ew-resize !important;
}
.canvas-video-timeline-labels {
display: flex;
justify-content: space-between;
color: #64748b;
font-size: 12px;
font-weight: 750;
}
.canvas-image-erase-panel {
width: min(1180px, calc(100vw - 48px));
height: min(820px, calc(100vh - 48px));
height: min(820px, calc(100dvh - 48px));
max-height: calc(100vh - 48px);
max-height: calc(100dvh - 48px);
display: grid;
grid-template-rows: auto minmax(0, 1fr);
overflow: hidden;
}
.canvas-image-erase-layout {
grid-template-columns: minmax(0, 1fr) 270px;
}
.canvas-image-erase-stage {
min-height: 0;
height: 100%;
display: grid;
place-items: center;
position: relative;
overflow: hidden;
padding: 14px;
border: 1px solid rgba(203, 213, 225, 0.9);
border-radius: 18px;
background: linear-gradient(180deg, #f8fbfd 0%, #eef6f3 100%);
}
#canvasImageEraseCanvas {
max-width: 100%;
max-height: calc(100vh - 240px);
border-radius: 12px;
cursor: crosshair;
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.2);
}
.canvas-image-erase-side .secondary {
min-height: 34px;
border-radius: 10px;
}
.canvas-image-split-panel {
width: min(860px, calc(100vw - 48px));
height: min(680px, calc(100vh - 48px));
height: min(680px, calc(100dvh - 48px));
max-height: calc(100vh - 48px);
max-height: calc(100dvh - 48px);
display: grid;
grid-template-rows: auto minmax(0, 1fr);
overflow: hidden;
}
.canvas-image-split-body {
display: grid;
grid-template-columns: minmax(0, 1fr) 230px;
gap: 14px;
min-height: 0;
height: 100%;
overflow: hidden;
}
.canvas-image-split-preview {
position: relative;
min-height: 0;
height: 100%;
display: grid;
place-items: center;
overflow: hidden;
padding: 12px;
border: 1px solid rgba(203, 213, 225, 0.9);
border-radius: 18px;
background: linear-gradient(180deg, #f8fbfd 0%, #eef6f3 100%);
}
.canvas-image-angle-preview {
position: relative;
}
.canvas-edit-loading-state {
position: absolute;
inset: 12px;
z-index: 20;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px dashed rgba(47, 109, 183, 0.35);
border-radius: 14px;
background: color-mix(in srgb, #f8fbfd 88%, transparent);
color: #1d4a83;
font-size: 13px;
font-weight: 900;
text-align: center;
pointer-events: none;
}
.canvas-edit-loading-state::before {
content: "";
width: 18px;
height: 18px;
margin-bottom: 10px;
border: 2px solid rgba(47, 109, 183, 0.22);
border-top-color: #2f6db7;
border-radius: 999px;
animation: tool-run-spin 0.72s linear infinite;
}
.canvas-edit-loading-state[hidden] {
display: none;
}
.canvas-edit-loading :is(.canvas-image-crop-stage, .canvas-image-expand-stage, .canvas-image-erase-stage, .canvas-image-split-preview, .canvas-image-angle-preview) {
cursor: wait;
}
.canvas-image-split-frame {
position: relative;
display: grid;
max-width: 100%;
max-height: 100%;
}
.canvas-image-split-frame img {
display: block;
max-width: 100%;
max-height: 100%;
border-radius: 12px;
box-shadow: 0 20px 52px rgba(15, 23, 42, 0.16);
}
.canvas-image-split-frame span {
position: absolute;
inset: 0;
pointer-events: none;
border-radius: 12px;
border: 0 solid transparent;
background-image:
linear-gradient(to right, rgba(47, 109, 183, 0.72) 1px, transparent 1px),
linear-gradient(to bottom, rgba(47, 109, 183, 0.72) 1px, transparent 1px);
background-size: calc(100% / var(--split-cols, 2)) calc(100% / var(--split-rows, 2));
}
.canvas-image-erase-tools {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.canvas-image-erase-tools button {
min-height: 34px;
border-radius: 10px;
font-size: 12px;
font-weight: 900;
}
.canvas-image-erase-tools button.active {
border-color: rgba(47, 109, 183, 0.48);
color: #1d4a83;
background: rgba(47, 109, 183, 0.12);
box-shadow: inset 0 0 0 1px rgba(47, 109, 183, 0.16);
}
#canvasImageExpandCanvas:active {
cursor: grabbing;
}
.canvas-image-edit-note {
padding: 9px 10px;
border: 1px dashed rgba(47, 109, 183, 0.28);
border-radius: 12px;
color: #475569;
font-size: 12px;
font-weight: 800;
background: rgba(239, 246, 255, 0.62);
}
.canvas-image-edit-presets {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.canvas-image-edit-presets button {
min-height: 34px;
border-radius: 10px;
}
.canvas-image-edit-textarea-label {
display: grid;
gap: 7px;
color: #475569;
font-size: 12px;
font-weight: 900;
}
.canvas-image-edit-textarea-label textarea {
min-height: 92px;
resize: vertical;
}
.canvas-image-angle-preview {
min-height: 0;
height: 100%;
cursor: grab;
perspective: 900px;
isolation: isolate;
background:
radial-gradient(circle at 50% 50%, rgba(47, 109, 183, 0.18), transparent 32%),
linear-gradient(rgba(148, 163, 184, 0.12) 1px, transparent 1px),
linear-gradient(90deg, rgba(148, 163, 184, 0.12) 1px, transparent 1px),
#0b1118;
background-size: auto, 34px 34px, 34px 34px, auto;
}
.canvas-image-angle-preview:active {
cursor: grabbing;
}
.canvas-image-angle-object {
width: min(62%, 520px);
display: grid;
place-items: center;
position: relative;
border: 0;
border-radius: 14px;
background: transparent;
box-shadow: none;
transform-style: preserve-3d;
transition: transform 120ms ease;
z-index: 2;
}
.canvas-image-angle-object::before,
.canvas-image-angle-object::after {
display: none;
}
.canvas-image-angle-object img {
width: 100%;
max-height: 340px;
object-fit: contain;
position: relative;
z-index: 2;
border-radius: 12px;
box-shadow:
0 24px 70px rgba(0, 0, 0, 0.42),
0 0 0 1px rgba(255, 255, 255, 0.18);
}
.canvas-image-angle-object.wide {
box-shadow: 0 30px 80px rgba(47, 109, 183, 0.35), inset 0 0 0 1px rgba(96, 165, 250, 0.36);
}
#resetCanvasImageAngleBtn {
position: absolute;
left: 18px;
bottom: 16px;
color: rgba(255, 255, 255, 0.72);
border-color: rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.08);
}
.canvas-image-angle-backdrop {
position: absolute;
inset: 22px;
z-index: 1;
pointer-events: none;
border: 1px dashed rgba(148, 163, 184, 0.22);
border-radius: 16px;
}
.canvas-image-angle-backdrop::before,
.canvas-image-angle-backdrop::after {
content: "";
position: absolute;
background: rgba(148, 163, 184, 0.24);
}
.canvas-image-angle-backdrop::before {
left: 50%;
top: 18px;
bottom: 18px;
width: 1px;
}
.canvas-image-angle-backdrop::after {
left: 18px;
right: 18px;
top: 50%;
height: 1px;
}
.canvas-image-angle-backdrop span {
position: absolute;
padding: 4px 8px;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 999px;
color: rgba(226, 232, 240, 0.78);
background: rgba(15, 23, 42, 0.58);
font-size: 11px;
font-weight: 900;
}
.canvas-image-angle-backdrop .top {
top: 10px;
left: 50%;
transform: translateX(-50%);
}
.canvas-image-angle-backdrop .right {
right: 12px;
top: 50%;
transform: translateY(-50%);
}
.canvas-image-angle-backdrop .bottom {
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
.canvas-image-angle-backdrop .left {
left: 12px;
top: 50%;
transform: translateY(-50%);
}
.canvas-image-angle-help {
position: absolute;
left: 50%;
bottom: 18px;
z-index: 3;
transform: translateX(-50%);
padding: 7px 12px;
border: 1px solid rgba(47, 109, 183, 0.26);
border-radius: 999px;
color: rgba(226, 232, 240, 0.86);
background: rgba(15, 23, 42, 0.72);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
font-size: 12px;
font-weight: 900;
}
.canvas-image-angle-row {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) 48px;
align-items: center;
gap: 9px;
color: #475569;
font-size: 12px;
font-weight: 900;
}
.canvas-image-angle-row input[type="range"] {
min-width: 0;
}
.canvas-image-angle-row output {
justify-self: end;
color: #0f172a;
font-weight: 950;
}
.canvas-image-angle-toggle {
min-height: 36px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: #475569;
font-size: 12px;
font-weight: 900;
}
@media (max-width: 860px) {
.canvas-image-crop-layout {
grid-template-columns: 1fr;
}
.canvas-image-crop-side,
.canvas-image-edit-layout {
grid-template-columns: 1fr;
}
.canvas-image-edit-layout {
display: grid;
}
}
@media (max-width: 980px) {
body:not(.auth-required) .layout.workflow-layout .workflow-shell {
grid-template-columns: 1fr !important;
}
body:not(.auth-required) .layout.workflow-layout .workflow-inspector {
display: none;
}
}
body.theme-dark:not(.auth-required) {
color-scheme: dark;
--bg: #0a0c11;
--panel: #12151c;
--panel-soft: #151821;
--surface: #12151d;
--member-gold: #e2b657;
--member-gold-strong: #caa04a;
--member-gold-soft: #f0cd7c;
--member-gold-tint: #241d0e;
--member-surface: linear-gradient(180deg, var(--member-gold-tint), color-mix(in srgb, var(--member-gold) 16%, var(--member-gold-tint)));
--member-surface-hover: linear-gradient(180deg, color-mix(in srgb, var(--member-gold) 10%, var(--member-gold-tint)), color-mix(in srgb, var(--member-gold) 26%, var(--member-gold-tint)));
--member-surface-line: color-mix(in srgb, var(--member-gold) 45%, transparent);
--member-surface-ink: var(--member-gold-strong);
--surface-2: #171a24;
--surface-3: #1d212d;
--topbar-bg: linear-gradient(180deg, rgba(20, 23, 32, 0.96), rgba(15, 17, 24, 0.94));
--mobile-topbar-bg: linear-gradient(180deg, rgba(20, 23, 32, 0.97), rgba(13, 15, 21, 0.96));
--mobile-topbar-border: rgba(152, 161, 178, 0.16);
--mobile-topbar-shadow: 0 12px 28px rgba(0, 0, 0, 0.42);
--advanced-bg: rgba(16, 18, 26, 0.78);
--advanced-open-bg: rgba(18, 21, 29, 0.86);
--advanced-border: rgba(141, 149, 165, 0.3);
--advanced-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
--advanced-summary-bg: rgba(18, 21, 29, 0.88);
--advanced-summary-open-bg: rgba(16, 18, 26, 0.94);
--advanced-summary-color: #c8d7ea;
--advanced-summary-hover-bg: rgba(47, 109, 183, 0.18);
--advanced-summary-hover-color: #9cc4ec;
--advanced-summary-shadow: none;
--advanced-arrow: #9fb0c7;
--mobile-chat-surface: rgba(18, 21, 29, 0.92);
--mobile-chat-surface-2: rgba(16, 18, 26, 0.88);
--mobile-chat-border: rgba(141, 149, 165, 0.28);
--mobile-chat-sidebar-bg: rgba(18, 21, 29, 0.96);
--mobile-chat-sidebar-shadow: 0 22px 54px rgba(0, 0, 0, 0.45);
--text: #e9edf4;
--muted: #98a3b5;
--accent-text: #8fb4e6;
--danger-text: #fb7185;
--warning-text: #fbbf24;
--ok-text: #4ade80;
--border: rgba(152, 161, 178, 0.16);
--control-surface: rgba(9, 11, 16, 0.72);
--control-border: var(--border-strong);
--control-text: var(--text);
--control-disabled-surface: var(--surface-2);
--control-disabled-border: var(--border);
--control-disabled-text: var(--muted);
--media-drop-accent: #5aa6e8;
--studio-command-surface: var(--surface);
--studio-command-border: color-mix(in srgb, var(--border-strong) 72%, transparent);
--studio-command-divider: color-mix(in srgb, var(--border-strong) 48%, transparent);
--studio-command-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
--studio-command-hover: var(--surface-3);
--studio-command-active: color-mix(in srgb, var(--media-drop-accent) 14%, var(--surface));
--studio-command-accent: var(--media-drop-accent);
--studio-command-ink: var(--muted);
--border-soft: color-mix(in srgb, var(--border) 72%, transparent);
--border-strong: rgba(152, 161, 178, 0.32);
--brand-soft: rgba(47, 109, 183, 0.16);
--blue-soft: rgba(59, 130, 246, 0.16);
--danger-soft: rgba(248, 113, 113, 0.16);
--danger-border: rgba(248, 113, 113, 0.42);
--ok-soft: rgba(19, 121, 91, 0.2);
--ok-border: rgba(52, 211, 153, 0.36);
--warning-soft: rgba(217, 119, 6, 0.18);
--warning-border: rgba(245, 158, 11, 0.36);
--info: #7cc4ff;
--info-soft: rgba(59, 130, 246, 0.16);
--shadow: 0 22px 54px rgba(0, 0, 0, 0.5);
--accent-2: #897fc4;
--accent-2-strong: #6a60b0;
--accent-2-soft: rgba(120, 112, 180, 0.2);
--highlight: #f6ab55;
--highlight-strong: #f2922f;
--highlight-soft: rgba(242, 146, 47, 0.18);
--brand-gradient: linear-gradient(135deg, #43679c 0%, #5160a8 52%, #6f5ba8 100%);
--brand-gradient-strong: linear-gradient(135deg, #3a5c8d 0%, #474e93 52%, #5f4c96 100%);
--brand-gradient-soft: linear-gradient(135deg, rgba(47, 109, 183, 0.16), rgba(120, 112, 180, 0.16));
--brand-glow: 0 12px 30px rgba(0, 0, 0, 0.4);
--brand-glow-strong: 0 16px 36px rgba(0, 0, 0, 0.46);
--sidebar-icon-color: #b8cce4;
--sidebar-icon-border: rgba(90, 166, 232, 0.22);
--sidebar-icon-bg: linear-gradient(180deg, rgba(27, 31, 41, 0.98), rgba(16, 19, 26, 0.98));
--sidebar-icon-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
--sidebar-icon-hover-color: #d7eaff;
--sidebar-icon-hover-border: rgba(90, 166, 232, 0.38);
--sidebar-icon-hover-bg: linear-gradient(180deg, rgba(47, 109, 183, 0.24), rgba(37, 90, 156, 0.22));
--sidebar-icon-active-color: #eef7ff;
--sidebar-icon-active-border: rgba(90, 166, 232, 0.58);
--sidebar-icon-active-bg: linear-gradient(180deg, rgba(90, 166, 232, 0.3), rgba(37, 90, 156, 0.32));
--sidebar-icon-active-shadow: inset 0 0 0 1px rgba(214, 235, 255, 0.08), 0 8px 22px rgba(47, 109, 183, 0.22);
background:
radial-gradient(circle at 16% -2%, rgba(47, 109, 183, 0.1), transparent 30%),
radial-gradient(circle at 82% 4%, rgba(120, 112, 180, 0.07), transparent 34%),
radial-gradient(circle at 60% 100%, rgba(99, 110, 180, 0.05), transparent 40%),
linear-gradient(180deg, #0c0e14 0%, #090b10 100%);
color: var(--text);
}
body.theme-dark:not(.auth-required) .layout,
body.theme-dark:not(.auth-required) .tab-panel {
background: transparent;
color: var(--text);
}
body.theme-dark:not(.auth-required) .topbar,
body.theme-dark:not(.auth-required) .panel,
body.theme-dark:not(.auth-required) .tool-card,
body.theme-dark:not(.auth-required) .task-detail-panel,
body.theme-dark:not(.auth-required) .workflow-sidebar,
body.theme-dark:not(.auth-required) .workflow-main,
body.theme-dark:not(.auth-required) .workflow-inspector,
body.theme-dark:not(.auth-required) .infinite-canvas-main,
body.theme-dark:not(.auth-required) .infinite-canvas-inspector,
body.theme-dark:not(.auth-required) .text-chat-sidebar,
body.theme-dark:not(.auth-required) .text-chat-main,
body.theme-dark:not(.auth-required) .text-chat-composer,
body.theme-dark:not(.auth-required) .model-card,
body.theme-dark:not(.auth-required) .account-card {
background: rgba(18, 21, 29, 0.92);
border-color: var(--border);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.035), var(--shadow);
color: var(--text);
}
body.theme-dark:not(.auth-required) .topbar {
background: linear-gradient(180deg, rgba(20, 23, 32, 0.96), rgba(15, 17, 24, 0.94));
}
body.theme-dark:not(.auth-required) .module-tab,
body.theme-dark:not(.auth-required) .topbar .module-tab,
body.theme-dark:not(.auth-required) .task-row,
body.theme-dark:not(.auth-required) .result-card,
body.theme-dark:not(.auth-required) .case-card,
body.theme-dark:not(.auth-required) .media-library-card,
body.theme-dark:not(.auth-required) .favorite-case-card,
body.theme-dark:not(.auth-required) .workflow-status-row > *,
body.theme-dark:not(.auth-required) .infinite-canvas-status-row > *,
body.theme-dark:not(.auth-required) .workflow-history-actions,
body.theme-dark:not(.auth-required) .file-summary,
body.theme-dark:not(.auth-required) .infinite-canvas-layer-item,
body.theme-dark:not(.auth-required) .infinite-canvas-property-panel,
body.theme-dark:not(.auth-required) .infinite-canvas-tip,
body.theme-dark:not(.auth-required) .canvas-side-dock,
body.theme-dark:not(.auth-required) .message-bubble,
body.theme-dark:not(.auth-required) .text-chat-history-item {
background: rgba(18, 27, 43, 0.82);
border-color: var(--border);
color: var(--text);
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}
body.theme-dark:not(.auth-required) .module-tab.active,
body.theme-dark:not(.auth-required) .topbar .module-tab.active,
body.theme-dark:not(.auth-required) .infinite-canvas-layer-item.selected {
background: linear-gradient(180deg, rgba(47, 109, 183, 0.2), rgba(47, 109, 183, 0.11));
border-color: rgba(90, 166, 232, 0.56);
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}
body.theme-dark:not(.auth-required) .text-chat-history-item.active {
background: rgba(47, 109, 183, 0.18);
border-color: rgba(90, 166, 232, 0.56);
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}
body.theme-dark:not(.auth-required) .text-chat-history-item.active::before {
background: #5aa6e8;
}
body.theme-dark:not(.auth-required) h1,
body.theme-dark:not(.auth-required) h2,
body.theme-dark:not(.auth-required) h3,
body.theme-dark:not(.auth-required) h4,
body.theme-dark:not(.auth-required) strong,
body.theme-dark:not(.auth-required) label,
body.theme-dark:not(.auth-required) .brand-text h1,
body.theme-dark:not(.auth-required) .module-tab strong,
body.theme-dark:not(.auth-required) .task-title,
body.theme-dark:not(.auth-required) .canvas-title-input {
color: #f4f8ff;
}
body.theme-dark:not(.auth-required) p,
body.theme-dark:not(.auth-required) small,
body.theme-dark:not(.auth-required) .muted,
body.theme-dark:not(.auth-required) .brand-text p,
body.theme-dark:not(.auth-required) .module-tab span,
body.theme-dark:not(.auth-required) .helper-text,
body.theme-dark:not(.auth-required) .task-meta,
body.theme-dark:not(.auth-required) .infinite-canvas-head p,
body.theme-dark:not(.auth-required) .canvas-subtitle-input {
color: var(--muted);
}
body.theme-dark:not(.auth-required) input,
body.theme-dark:not(.auth-required) select,
body.theme-dark:not(.auth-required) textarea,
body.theme-dark:not(.auth-required) .input-like,
body.theme-dark:not(.auth-required) .editable-title {
background: var(--control-surface);
border-color: var(--control-border);
color: var(--control-text);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
body.theme-dark:not(.auth-required) input::placeholder,
body.theme-dark:not(.auth-required) textarea::placeholder {
color: rgba(154, 168, 188, 0.72);
}
body.theme-dark:not(.auth-required) input:focus,
body.theme-dark:not(.auth-required) select:focus,
body.theme-dark:not(.auth-required) textarea:focus {
border-color: rgba(90, 166, 232, 0.72);
box-shadow: 0 0 0 3px rgba(90, 166, 232, 0.16);
}
body.theme-dark:not(.auth-required) button:not([data-ui-compact-control]),
body.theme-dark:not(.auth-required) .secondary,
body.theme-dark:not(.auth-required) .icon-button {
background: rgba(17, 30, 50, 0.88);
border-color: rgba(96, 165, 250, 0.34);
color: #cfe3ff;
}
body.theme-dark:not(.auth-required) button:not([data-ui-compact-control]):hover,
body.theme-dark:not(.auth-required) .secondary:hover,
body.theme-dark:not(.auth-required) .icon-button:hover {
background: rgba(37, 53, 78, 0.95);
border-color: rgba(125, 183, 255, 0.58);
}
body.theme-dark:not(.auth-required) .primary {
background: var(--brand-gradient);
border-color: transparent;
color: #f6f9ff;
box-shadow: var(--brand-glow);
}
body.theme-dark:not(.auth-required) .danger:where(:not(.gen-icon-btn)),
body.theme-dark:not(.auth-required) button.danger:where(:not(.gen-icon-btn)) {
background: rgba(127, 29, 29, 0.36);
border-color: rgba(248, 113, 113, 0.5);
color: #fecaca;
}
body.theme-dark:not(.auth-required) .state-pill,
body.theme-dark:not(.auth-required) .badge,
body.theme-dark:not(.auth-required) .price-pill,
body.theme-dark:not(.auth-required) .credit-pill {
background: rgba(47, 109, 183, 0.14);
border-color: rgba(90, 166, 232, 0.42);
color: #9cc4ec;
}
body.theme-dark:not(.auth-required) .workflow-stage-wrap,
body.theme-dark:not(.auth-required) .workflow-lite-wrap {
background-color: var(--canvas-surface, var(--studio-canvas-surface-dark)) !important;
background-image: var(--canvas-grid-image, var(--studio-canvas-grid-image-dark)) !important;
background-size: var(--workflow-grid-size, var(--canvas-grid-size-current, 28px)) var(--workflow-grid-size, var(--canvas-grid-size-current, 28px)) !important;
background-position: var(--workflow-grid-position-x, 0px) var(--workflow-grid-position-y, 0px) !important;
border-color: var(--border) !important;
}
body.theme-dark:not(.auth-required) .workflow-stage-wrap.workflow-grid-layer-ready,
body.theme-dark:not(.auth-required) .workflow-lite-wrap.workflow-grid-layer-ready {
background-image: none !important;
}
body.theme-dark:not(.auth-required) .workflow-lite-canvas {
background: transparent !important;
}
body.theme-dark:not(.auth-required) .workflow-lite-wrap::before {
background: radial-gradient(circle at 50% 0%, rgba(90, 166, 232, 0.07), transparent 34%);
}
body.theme-dark:not(.auth-required) .infinite-card,
body.theme-dark:not(.auth-required) .canvas-edit-panel,
body.theme-dark:not(.auth-required) .workflow-node,
body.theme-dark:not(.auth-required) .litegraph.litesearchbox,
body.theme-dark:not(.auth-required) .litegraph.graphdialog,
body.theme-dark:not(.auth-required) .context-menu,
body.theme-dark:not(.auth-required) .modal-panel,
body.theme-dark:not(.auth-required) .command-palette,
body.theme-dark:not(.auth-required) .canvas-add-menu,
body.theme-dark:not(.auth-required) .canvas-image-edit-modal,
body.theme-dark:not(.auth-required) .media-library-dialog {
background: rgba(18, 21, 29, 0.97);
border-color: var(--border-strong);
color: var(--text);
box-shadow: 0 22px 54px rgba(0, 0, 0, 0.42);
}
body.theme-dark:not(.auth-required) .infinite-card {
background: linear-gradient(180deg, rgba(18, 27, 43, 0.98), rgba(13, 22, 36, 0.98));
}
body.theme-dark:not(.auth-required) .workflow-node-body,
body.theme-dark:not(.auth-required) .infinite-card-body,
body.theme-dark:not(.auth-required) .canvas-edit-panel-body,
body.theme-dark:not(.auth-required) .media-drop-zone,
body.theme-dark:not(.auth-required) .reference-drop-zone {
background: rgba(9, 17, 30, 0.64);
border-color: var(--border);
color: var(--text);
}
body.theme-dark:not(.auth-required) .context-menu button,
body.theme-dark:not(.auth-required) .canvas-add-menu button,
body.theme-dark:not(.auth-required) .command-palette-item,
body.theme-dark:not(.auth-required) .litegraph.litesearchbox.graphdialog.rounded .lite-search-item {
background: rgba(18, 21, 29, 0.88) !important;
color: var(--text) !important;
border-color: rgba(148, 163, 184, 0.16) !important;
}
body.theme-dark:not(.auth-required) .context-menu button:hover,
body.theme-dark:not(.auth-required) .canvas-add-menu button:hover,
body.theme-dark:not(.auth-required) .command-palette-item:hover,
body.theme-dark:not(.auth-required) .litegraph.litesearchbox.graphdialog.rounded .lite-search-item:hover,
body.theme-dark:not(.auth-required) .litegraph.litesearchbox.graphdialog.rounded .lite-search-item.selected {
background: rgba(47, 109, 183, 0.18) !important;
color: #eaf4ff !important;
border-color: rgba(90, 166, 232, 0.42) !important;
}
body.theme-dark:not(.auth-required) .infinite-canvas-link,
body.theme-dark:not(.auth-required) .workflow-edge-path {
stroke: var(--wire-fx-line, #6f8db2);
}
body.theme-dark:not(.auth-required) .infinite-canvas-link.hovered,
body.theme-dark:not(.auth-required) .infinite-canvas-link.selected,
body.theme-dark:not(.auth-required) .infinite-canvas-link.energized,
body.theme-dark:not(.auth-required) .workflow-edge-path.selected {
stroke: var(--wire-fx-line-selected, #8fb8df);
}
body.theme-dark:not(.auth-required) .infinite-canvas-link-hit,
body.theme-dark:not(.auth-required) .workflow-edge-hit {
stroke: transparent;
}
body.theme-dark:not(.auth-required) .workflow-node.selected,
body.theme-dark:not(.auth-required) .infinite-card.selected {
outline-color: rgba(90, 166, 232, 0.9);
box-shadow: 0 0 0 2px rgba(90, 166, 232, 0.34), 0 18px 44px rgba(0, 0, 0, 0.38);
}
body.theme-dark:not(.auth-required) .modal-backdrop,
body.theme-dark:not(.auth-required) .image-preview-backdrop {
background: rgba(3, 7, 18, 0.62);
backdrop-filter: blur(14px);
}
body.theme-dark:not(.auth-required) table,
body.theme-dark:not(.auth-required) .settings-section,
body.theme-dark:not(.auth-required) .advanced-panel,
body.theme-dark:not(.auth-required) details,
body.theme-dark:not(.auth-required) .form-card {
background: rgba(15, 17, 24, 0.68);
border-color: var(--border);
color: var(--text);
}
body.theme-dark:not(.auth-required) .gateway-card,
body.theme-dark:not(.auth-required) .settings-provider-card {
background: linear-gradient(180deg, rgba(17, 27, 43, 0.95), rgba(13, 21, 35, 0.9));
border-color: rgba(141, 149, 165, 0.3);
color: var(--text);
}
body.theme-dark:not(.auth-required) hr,
body.theme-dark:not(.auth-required) .divider {
border-color: var(--border);
}
body.theme-dark:not(.auth-required) ::-webkit-scrollbar-thumb {
background: rgba(100, 116, 139, 0.72);
border: 3px solid rgba(11, 17, 29, 0.92);
}
body.theme-dark:not(.auth-required) .tool-shell,
body.theme-dark:not(.auth-required) .workspace-shell,
body.theme-dark:not(.auth-required) .image-layout,
body.theme-dark:not(.auth-required) .video-layout,
body.theme-dark:not(.auth-required) .audio-layout,
body.theme-dark:not(.auth-required) .task-panel,
body.theme-dark:not(.auth-required) .result-panel,
body.theme-dark:not(.auth-required) .task-list-panel,
body.theme-dark:not(.auth-required) .task-detail-panel {
background: rgba(13, 21, 35, 0.92);
border-color: rgba(141, 149, 165, 0.24);
color: #e7eef9;
}
body.theme-dark:not(.auth-required) #textTab,
body.theme-dark:not(.auth-required) #imageTab,
body.theme-dark:not(.auth-required) #videoToolTab,
body.theme-dark:not(.auth-required) #audioToolTab,
body.theme-dark:not(.auth-required) .tab-panel.active {
color: #e7eef9;
}
body.theme-dark:not(.auth-required) .tabs,
body.theme-dark:not(.auth-required) .tab-buttons,
body.theme-dark:not(.auth-required) .mode-tabs,
body.theme-dark:not(.auth-required) .tool-mode-tabs,
body.theme-dark:not(.auth-required) .sub-tabs {
background: rgba(18, 21, 29, 0.86);
border-color: rgba(141, 149, 165, 0.26);
color: #dbe7f5;
}
body.theme-dark:not(.auth-required) .tabs button,
body.theme-dark:not(.auth-required) .tab-buttons button,
body.theme-dark:not(.auth-required) .mode-tabs button,
body.theme-dark:not(.auth-required) .tool-mode-tab,
body.theme-dark:not(.auth-required) .sub-tabs button {
background: rgba(17, 30, 50, 0.72);
color: #b9c7da;
border-color: rgba(141, 149, 165, 0.24);
}
body.theme-dark:not(.auth-required) .tabs button.active,
body.theme-dark:not(.auth-required) .tab-buttons button.active,
body.theme-dark:not(.auth-required) .mode-tabs button.active,
body.theme-dark:not(.auth-required) .tool-mode-tab.active,
body.theme-dark:not(.auth-required) .sub-tabs button.active {
background: linear-gradient(180deg, rgba(90, 166, 232, 0.28), rgba(47, 109, 183, 0.14));
color: #eaf4ff;
border-color: rgba(90, 166, 232, 0.56);
box-shadow: inset 0 -2px 0 #5aa6e8;
}
body.theme-dark:not(.auth-required) .canvas-title-input,
body.theme-dark:not(.auth-required) .canvas-subtitle-input,
body.theme-dark:not(.auth-required) .infinite-canvas-toolbar input,
body.theme-dark:not(.auth-required) .infinite-canvas-toolbar textarea {
background: rgba(9, 11, 16, 0.78) !important;
border-color: rgba(141, 149, 165, 0.34) !important;
color: #e7eef9 !important;
}
body.theme-dark:not(.auth-required) .workflow-board-row {
background: rgba(18, 21, 29, 0.82) !important;
border-color: rgba(141, 149, 165, 0.3) !important;
color: #e7eef9 !important;
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28) !important;
}
body.theme-dark:not(.auth-required) .workflow-board-row label,
body.theme-dark:not(.auth-required) .canvas-creator-bar label {
color: #dbe7f5 !important;
}
body.theme-dark:not(.auth-required) label,
body.theme-dark:not(.auth-required) .form-grid label,
body.theme-dark:not(.auth-required) .options-grid label,
body.theme-dark:not(.auth-required) .quick-options label {
color: #e7eef9;
}
body.theme-dark:not(.auth-required) .upload-box,
body.theme-dark:not(.auth-required) .drop-zone,
body.theme-dark:not(.auth-required) .selected-preview,
body.theme-dark:not(.auth-required) .reference-preview,
body.theme-dark:not(.auth-required) .file-summary,
body.theme-dark:not(.auth-required) .plan-summary-inline,
body.theme-dark:not(.auth-required) .advanced,
body.theme-dark:not(.auth-required) .advanced summary,
body.theme-dark:not(.auth-required) .options-grid,
body.theme-dark:not(.auth-required) .toggle-row,
body.theme-dark:not(.auth-required) .light-result {
background: rgba(16, 18, 26, 0.84);
border-color: rgba(141, 149, 165, 0.28);
color: #dbe7f5;
}
body.theme-dark:not(.auth-required) .drop-zone {
background:
linear-gradient(180deg, rgba(47, 109, 183, 0.08), rgba(16, 18, 26, 0.84));
border-style: dashed;
}
body.theme-dark:not(.auth-required) .drop-zone strong,
body.theme-dark:not(.auth-required) .upload-box strong {
color: #f3f7fc;
}
body.theme-dark:not(.auth-required) .drop-zone p,
body.theme-dark:not(.auth-required) .file-summary,
body.theme-dark:not(.auth-required) .plan-summary-inline {
color: #a7b5c9;
}
body.theme-dark:not(.auth-required) .selected-preview:empty,
body.theme-dark:not(.auth-required) .reference-preview:empty {
background: rgba(9, 11, 16, 0.62);
}
body.theme-dark:not(.auth-required) .result-stats > *,
body.theme-dark:not(.auth-required) .stat-card,
body.theme-dark:not(.auth-required) .job-stat,
body.theme-dark:not(.auth-required) .task-summary-card,
body.theme-dark:not(.auth-required) .job-row,
body.theme-dark:not(.auth-required) .task-row {
background: rgba(16, 18, 26, 0.88);
border-color: rgba(141, 149, 165, 0.26);
color: #e7eef9;
}
body.theme-dark:not(.auth-required) .text-chat-shell,
body.theme-dark:not(.auth-required) .text-chat-main,
body.theme-dark:not(.auth-required) .text-chat-thread,
body.theme-dark:not(.auth-required) .text-chat-footer {
background: rgba(11, 18, 30, 0.94);
border-color: rgba(141, 149, 165, 0.24);
color: #e7eef9;
}
body.theme-dark:not(.auth-required) .text-chat-bubble {
background: rgba(18, 29, 47, 0.96);
border-color: rgba(141, 149, 165, 0.28);
color: #e7eef9;
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}
body.theme-dark:not(.auth-required) .text-chat-message.user .text-chat-bubble {
background: rgba(47, 109, 183, 0.16);
border-color: rgba(90, 166, 232, 0.38);
}
body.theme-dark:not(.auth-required) .text-chat-message.system .text-chat-bubble {
background: rgba(32, 36, 46, 0.86);
color: #a7b5c9;
}
body.theme-dark:not(.auth-required) .text-chat-composer {
background: rgba(16, 18, 26, 0.92);
border-color: rgba(141, 149, 165, 0.34);
}
body.theme-dark:not(.auth-required) .workflow-main,
body.theme-dark:not(.auth-required) .layout.workflow-layout .workflow-main,
body.theme-dark:not(.auth-required) .infinite-canvas-main,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-canvas-main {
background: rgba(8, 14, 24, 0.82);
border-color: rgba(141, 149, 165, 0.25);
}
body.theme-dark:not(.auth-required) .infinite-canvas-stage:not(.picking-reference)::before {
content: none !important;
display: none !important;
}
body.theme-dark:not(.auth-required) .workflow-inspector,
body.theme-dark:not(.auth-required) .infinite-canvas-inspector {
background: rgba(13, 21, 35, 0.96);
border-color: rgba(141, 149, 165, 0.26);
}
body.theme-dark:not(.auth-required) .workflow-check-list,
body.theme-dark:not(.auth-required) .workflow-node-help,
body.theme-dark:not(.auth-required) .workflow-empty-state {
background: rgba(16, 19, 26, 0.92);
border-color: rgba(141, 149, 165, 0.28);
color: #dbe7f5;
}
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card {
background: rgba(248, 251, 255, 0.97);
border-color: rgba(125, 144, 168, 0.72);
color: #102033;
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card.is-pointer-hover,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card.is-pointer-hover {
box-shadow: 0 24px 58px rgba(0, 0, 0, 0.34);
}
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card.selected,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card.selected {
border-color: #5aa6e8;
box-shadow: 0 0 0 2px rgba(90, 166, 232, 0.34), 0 24px 58px rgba(0, 0, 0, 0.34);
}
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-body,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-body {
background: transparent;
color: #102033;
}
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-summary strong,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-summary strong,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-note,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-note {
color: #102033;
}
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-summary span,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-summary small,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-summary span,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-summary small,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-meta,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-meta {
color: #526176;
}
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-body textarea,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-body input:not([type="range"]),
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-body select,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-body textarea,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-body input:not([type="range"]),
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-body select {
background: #ffffff;
border-color: #d7e2ef;
color: #102033;
}
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-media-box,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-drop-zone,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-media-box,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-drop-zone {
background: rgba(241, 247, 250, 0.96);
border-color: #d6e3ee;
color: #526176;
}
body.theme-dark:not(.auth-required) .infinite-card-inline-panel,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel,
body.theme-dark:not(.auth-required) .canvas-edit-panel {
background: rgba(248, 251, 255, 0.98);
border-color: rgba(125, 144, 168, 0.62);
color: #102033;
box-shadow: 0 24px 68px rgba(0, 0, 0, 0.38);
}
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .infinite-inline-references {
background: linear-gradient(180deg, rgba(234, 242, 251, 0.98), rgba(224, 236, 247, 0.98));
border-color: rgba(47, 109, 183, 0.26);
color: #102033;
}
body.theme-dark:not(.auth-required) .context-menu,
body.theme-dark:not(.auth-required) .canvas-add-menu,
body.theme-dark:not(.auth-required) .command-palette,
body.theme-dark:not(.auth-required) .modal-panel,
body.theme-dark:not(.auth-required) .media-library-dialog {
background: rgba(18, 21, 29, 0.98);
border-color: rgba(141, 149, 165, 0.32);
color: #e7eef9;
}
body.theme-dark:not(.auth-required) .context-menu button,
body.theme-dark:not(.auth-required) .canvas-add-menu button,
body.theme-dark:not(.auth-required) .command-palette-item {
background: rgba(18, 21, 29, 0.86) !important;
color: #e7eef9 !important;
}
body.theme-dark:not(.auth-required) .context-menu button:hover,
body.theme-dark:not(.auth-required) .canvas-add-menu button:hover,
body.theme-dark:not(.auth-required) .command-palette-item:hover {
background: rgba(90, 166, 232, 0.14) !important;
color: #f8fffd !important;
}
body.theme-dark:not(.auth-required) .watermark-card,
body.theme-dark:not(.auth-required) .canvas-image-crop-modal,
body.theme-dark:not(.auth-required) .canvas-image-edit-modal,
body.theme-dark:not(.auth-required) .canvas-image-angle-panel,
body.theme-dark:not(.auth-required) .canvas-image-crop-side,
body.theme-dark:not(.auth-required) .canvas-image-edit-side {
background: rgba(18, 21, 29, 0.98);
border-color: rgba(141, 149, 165, 0.32);
color: #e7eef9;
}
body.theme-dark:not(.auth-required) .canvas-image-crop-stage,
body.theme-dark:not(.auth-required) .canvas-image-expand-stage,
body.theme-dark:not(.auth-required) .canvas-image-erase-stage,
body.theme-dark:not(.auth-required) .canvas-image-split-preview,
body.theme-dark:not(.auth-required) .canvas-image-edit-stage,
body.theme-dark:not(.auth-required) .canvas-video-edit-preview,
body.theme-dark:not(.auth-required) .watermark-canvas-wrap {
background: #0b1220;
border-color: rgba(141, 149, 165, 0.28);
}
body.theme-dark:not(.auth-required) .stats-grid div,
body.theme-dark:not(.auth-required) .job-select,
body.theme-dark:not(.auth-required) .case-select,
body.theme-dark:not(.auth-required) .case-preview,
body.theme-dark:not(.auth-required) .empty-row,
body.theme-dark:not(.auth-required) .thumb,
body.theme-dark:not(.auth-required) .gallery-select-bar,
body.theme-dark:not(.auth-required) .media-output-card,
body.theme-dark:not(.auth-required) .item-row,
body.theme-dark:not(.auth-required) .shortcut-grid div {
background: rgba(16, 18, 26, 0.9) !important;
border-color: rgba(141, 149, 165, 0.3) !important;
color: #e7eef9 !important;
box-shadow: none;
}
body.theme-dark:not(.auth-required) .empty-row.error,
body.theme-dark:not(.auth-required) .workflow-project-empty.error,
body.theme-dark:not(.auth-required) .result-box.is-error,
body.theme-dark:not(.auth-required) .light-result.is-error,
body.theme-dark:not(.auth-required) .file-summary.is-error {
background: rgba(69, 18, 18, 0.78) !important;
border-color: rgba(248, 113, 113, 0.5) !important;
color: #fecaca !important;
}
body.theme-dark:not(.auth-required) .empty-row.warn {
background: rgba(69, 49, 18, 0.76) !important;
border-color: rgba(245, 158, 11, 0.48) !important;
color: #fde68a !important;
}
body.theme-dark:not(.auth-required) .routing-err {
color: #fca5a5;
}
body.theme-dark:not(.auth-required) .job-row.selected .job-select,
body.theme-dark:not(.auth-required) .thumb.selected,
body.theme-dark:not(.auth-required) .workflow-media-library-card.is-selected,
body.theme-dark:not(.auth-required) .media-library-card.is-selected {
background: linear-gradient(180deg, rgba(47, 109, 183, 0.18), rgba(16, 18, 26, 0.9)) !important;
border-color: rgba(90, 166, 232, 0.62) !important;
color: #eaf4ff !important;
box-shadow: inset 3px 0 0 #5aa6e8, 0 12px 28px rgba(0, 0, 0, 0.22);
}
body.theme-dark:not(.auth-required) .job-row.selected .job-select span,
body.theme-dark:not(.auth-required) .job-select span,
body.theme-dark:not(.auth-required) .case-select .case-info > span:not(.case-param-list),
body.theme-dark:not(.auth-required) .stats-grid small,
body.theme-dark:not(.auth-required) .thumb-footer span,
body.theme-dark:not(.auth-required) .media-thumb-prompt,
body.theme-dark:not(.auth-required) .item-row p,
body.theme-dark:not(.auth-required) .gallery-select-bar span {
color: #a9b8cc !important;
}
body.theme-dark:not(.auth-required) .job-select strong,
body.theme-dark:not(.auth-required) .case-select strong,
body.theme-dark:not(.auth-required) .stats-grid span,
body.theme-dark:not(.auth-required) .item-row b,
body.theme-dark:not(.auth-required) .media-output-card strong {
color: #f4f8ff !important;
}
body.theme-dark:not(.auth-required) .case-param-list em,
body.theme-dark:not(.auth-required) .thumb-badge,
body.theme-dark:not(.auth-required) .media-play-badge {
background: rgba(90, 166, 232, 0.14) !important;
border-color: rgba(90, 166, 232, 0.38) !important;
color: #9cc4ec !important;
}
body.theme-dark:not(.auth-required) .thumb-select span {
background: rgba(16, 18, 26, 0.92) !important;
border-color: rgba(148, 163, 184, 0.58) !important;
}
body.theme-dark:not(.auth-required) .thumb-select input:checked + span {
background: #5aa6e8 !important;
border-color: #9cc4ec !important;
}
body.theme-dark:not(.auth-required) .text-chat-shell {
background: #0b1220 !important;
border-color: rgba(141, 149, 165, 0.3) !important;
}
body.theme-dark:not(.auth-required) .text-chat-sidebar,
body.theme-dark:not(.auth-required) .text-chat-main,
body.theme-dark:not(.auth-required) .text-chat-topbar,
body.theme-dark:not(.auth-required) .text-chat-messages,
body.theme-dark:not(.auth-required) .text-chat-footer {
background: rgba(11, 18, 30, 0.96) !important;
border-color: rgba(141, 149, 165, 0.26) !important;
color: #e7eef9 !important;
}
body.theme-dark:not(.auth-required) .text-chat-messages {
background:
radial-gradient(circle at 18% 8%, rgba(90, 166, 232, 0.08), transparent 32%),
linear-gradient(180deg, #0d1625 0%, #0a111e 100%) !important;
}
body.theme-dark:not(.auth-required) .text-chat-param > span { color: #8aa0bb !important; }
body.theme-dark:not(.auth-required) .text-chat-param > input {
background: rgba(15, 23, 42, 0.88) !important;
border-color: rgba(141, 149, 165, 0.3) !important;
color: #e7eef9 !important;
}
body.theme-dark:not(.auth-required) .text-chat-history-item,
body.theme-dark:not(.auth-required) .text-chat-empty,
body.theme-dark:not(.auth-required) .text-chat-empty-mini,
body.theme-dark:not(.auth-required) .text-chat-suggestions button,
body.theme-dark:not(.auth-required) .switch-row,
body.theme-dark:not(.auth-required) .text-chat-param,
body.theme-dark:not(.auth-required) .text-message-copy {
background: rgba(16, 18, 26, 0.9) !important;
border-color: rgba(141, 149, 165, 0.3) !important;
color: #e7eef9 !important;
}
body.theme-dark:not(.auth-required) .text-chat-history-item.active {
background: rgba(47, 109, 183, 0.2) !important;
border-color: rgba(90, 166, 232, 0.56) !important;
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
}
body.theme-dark:not(.auth-required) .text-chat-history-item.active::before {
background: #5aa6e8 !important;
}
body.theme-dark:not(.auth-required) .text-chat-history-preview,
body.theme-dark:not(.auth-required) .text-chat-history-meta time {
color: #8aa0bb !important;
}
body.theme-dark:not(.auth-required) .text-chat-history-count {
background: rgba(90, 166, 232, 0.12) !important;
border-color: rgba(90, 166, 232, 0.28) !important;
color: #9cc4ec !important;
}
body.theme-dark:not(.auth-required) .text-chat-delete-btn {
background: rgba(90, 166, 232, 0.08) !important;
border-color: rgba(90, 166, 232, 0.24) !important;
color: #9cc4ec !important;
}
body.theme-dark:not(.auth-required) .text-chat-delete-btn:hover {
background: rgba(220, 38, 38, 0.12) !important;
border-color: rgba(243, 164, 164, 0.3) !important;
color: #f3a4a4 !important;
}
body.theme-dark:not(.auth-required) .text-chat-history-item.active .text-chat-delete-btn:hover {
background: rgba(220, 38, 38, 0.12) !important;
border-color: rgba(243, 164, 164, 0.3) !important;
color: #f3a4a4 !important;
}
body.theme-dark:not(.auth-required) .text-chat-bubble {
background: #111c2d !important;
border-color: rgba(141, 149, 165, 0.32) !important;
color: #e7eef9 !important;
}
body.theme-dark:not(.auth-required) .text-chat-message.user .text-chat-bubble {
background: rgba(47, 109, 183, 0.18) !important;
border-color: rgba(90, 166, 232, 0.5) !important;
color: #eaf4ff !important;
}
body.theme-dark:not(.auth-required) .text-chat-composer {
background: rgba(9, 17, 30, 0.96) !important;
border-color: rgba(141, 149, 165, 0.38) !important;
}
body.theme-dark:not(.auth-required) .text-chat-composer textarea {
background: transparent !important;
color: #e7eef9 !important;
}
body.theme-dark:not(.auth-required) .layout.workflow-layout .workflow-inspector,
body.theme-dark:not(.auth-required) .workflow-inspector,
body.theme-dark:not(.auth-required) .workflow-inspector-head,
body.theme-dark:not(.auth-required) .workflow-inspector-body {
background: rgba(13, 21, 35, 0.98) !important;
border-color: rgba(141, 149, 165, 0.3) !important;
color: #e7eef9 !important;
}
body.theme-dark:not(.auth-required) .workflow-inspector-empty,
body.theme-dark:not(.auth-required) .workflow-check-list,
body.theme-dark:not(.auth-required) .workflow-node-help,
body.theme-dark:not(.auth-required) .workflow-toggle-field,
body.theme-dark:not(.auth-required) .workflow-meta-grid,
body.theme-dark:not(.auth-required) .workflow-task-estimate {
background: rgba(16, 18, 26, 0.92) !important;
border-color: rgba(141, 149, 165, 0.3) !important;
color: #dbe7f5 !important;
}
body.theme-dark:not(.auth-required) .workflow-field,
body.theme-dark:not(.auth-required) .workflow-field span,
body.theme-dark:not(.auth-required) .workflow-help-grid,
body.theme-dark:not(.auth-required) .workflow-node-help p,
body.theme-dark:not(.auth-required) .workflow-check-item span {
color: #dbe7f5 !important;
}
body.theme-dark:not(.auth-required) .model-capability-hint {
border-color: rgba(141, 149, 165, 0.4);
background: rgba(16, 18, 26, 0.88);
color: #9fc0e0;
}
body.theme-dark:not(.auth-required) .model-capability-hint.capability-note-editable:hover { border-color: rgba(141, 149, 165, 0.7); }
body.theme-dark:not(.auth-required) .capability-note-editor {
background: rgba(9, 12, 20, 0.95);
color: #d6e4f4;
border-color: rgba(141, 149, 165, 0.5);
}
body.theme-dark:not(.auth-required) .capability-note-btn {
background: rgba(22, 26, 36, 0.9);
border-color: rgba(141, 149, 165, 0.4);
color: #9fc0e0;
}
body.theme-dark:not(.auth-required) .capability-note-btn.capability-note-save { background: #2f6fe0; border-color: #2f6fe0; color: #fff; }
body.theme-dark:not(.auth-required) .layout.media-tool-layout .tool-page-head {
background: rgba(13, 21, 35, 0.95);
border-bottom-color: rgba(141, 149, 165, 0.3);
}
body.theme-dark:not(.auth-required) .tool-mode-tabs {
border-color: rgba(141, 149, 165, 0.3);
background: rgba(16, 18, 26, 0.88);
}
body.theme-dark:not(.auth-required) .tool-mode-tab {
color: #a7b5c9;
}
body.theme-dark:not(.auth-required) .tool-mode-tab:hover {
background: rgba(32, 36, 46, 0.7);
color: #dbe7f5;
}
body.theme-dark:not(.auth-required) .tool-mode-tab.active {
background: rgba(47, 109, 183, 0.3);
color: #e7eef9;
box-shadow: inset 0 -2px 0 #5aa6e8;
}
body.theme-dark:not(.auth-required) .text-chat-avatar {
background: rgba(47, 109, 183, 0.22);
color: #9cc4ec;
}
body.theme-dark:not(.auth-required) .layout.workflow-layout .workflow-main > .workflow-status-row .file-summary,
body.theme-dark:not(.auth-required) .layout.workflow-layout .workflow-main > .workflow-status-row .workflow-history-actions,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-canvas-status-row .file-summary,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-canvas-status-row .workflow-history-actions,
body.theme-dark:not(.auth-required) .infinite-canvas-status-row .file-summary,
body.theme-dark:not(.auth-required) .infinite-canvas-status-row .workflow-history-actions {
background: rgba(13, 21, 35, 0.92);
border-color: rgba(141, 149, 165, 0.32);
color: #dbe7f5;
}
body.theme-dark:not(.auth-required) .settings-advanced-direct > summary {
background: rgba(16, 18, 26, 0.88);
color: #dbe7f5;
}
body.theme-dark:not(.auth-required) .workflow-check-panel,
body.theme-dark:not(.auth-required) .workflow-media-library-card,
body.theme-dark:not(.auth-required) .workflow-project-item {
background: rgba(16, 18, 26, 0.9);
border-color: rgba(141, 149, 165, 0.3);
}
body.theme-dark:not(.auth-required) .model-route-card {
background: rgba(17, 27, 43, 0.92);
border-color: rgba(141, 149, 165, 0.3);
box-shadow: none;
}
body.theme-dark:not(.auth-required) .model-route-key-manager {
background: rgba(11, 19, 33, 0.85);
border-color: rgba(141, 149, 165, 0.3);
}
body.theme-dark:not(.auth-required) .workflow-media-library-icon {
background: rgba(47, 109, 183, 0.2);
color: #9cc4ec;
}
body.theme-dark:not(.auth-required) .workflow-media-library-icon.kind-audio {
background: rgba(58, 100, 200, 0.25);
color: #a9c4f5;
}
body.theme-dark:not(.auth-required) .workflow-media-library-icon.kind-text {
background: rgba(90, 107, 130, 0.28);
color: #b5c4d8;
}
body.theme-dark:not(.auth-required) .workflow-menu-drag-ghost {
border-color: color-mix(in srgb, var(--menu-accent, #5aa6e8) 42%, rgba(141, 149, 165, 0.3));
background: rgba(18, 21, 29, 0.96);
color: #e7eef9;
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.46);
}
body.theme-dark:not(.auth-required) .workflow-stage-wrap.workflow-lite-wrap.workflow-menu-drop-ready {
outline-color: rgba(90, 166, 232, 0.55);
}
body.theme-dark:not(.auth-required) .workflow-lite-wrap.workflow-template-drop-target::after {
border-color: rgba(90, 166, 232, 0.55);
background: rgba(9, 17, 30, 0.74);
color: #9cc4ec;
}
body.theme-dark:not(.auth-required) .workflow-media-library-tools {
background: transparent;
}
body.theme-dark:not(.auth-required) .workflow-help-grid strong {
color: #dbe7f5;
}
body.theme-dark:not(.auth-required) .workflow-field input,
body.theme-dark:not(.auth-required) .workflow-field select,
body.theme-dark:not(.auth-required) .workflow-field textarea,
body.theme-dark:not(.auth-required) .workflow-folder-picker input[readonly],
body.theme-dark:not(.auth-required) .workflow-watermark-picker input[readonly] {
background: rgba(9, 11, 16, 0.9) !important;
border-color: rgba(141, 149, 165, 0.36) !important;
color: #e7eef9 !important;
}
body.theme-dark:not(.auth-required) .canvas-studio-shell,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-canvas-shell.canvas-studio-shell {
--canvas-surface: var(--studio-canvas-surface-dark);
--canvas-grid-image: var(--studio-canvas-grid-image-dark);
--canvas-glass-strong: rgba(18, 21, 29, 0.82);
--canvas-glass-soft: rgba(18, 21, 29, 0.78);
--canvas-border-strong: rgba(141, 149, 165, 0.32);
--canvas-panel-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
--canvas-card-shadow: 0 14px 34px rgba(0, 0, 0, 0.26);
background: var(--studio-canvas-surface-dark) !important;
border-color: rgba(141, 149, 165, 0.34) !important;
}
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-canvas-stage,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-canvas-stage {
background-color: var(--canvas-surface) !important;
background-image: var(--canvas-grid-image) !important;
background-size: var(--canvas-grid-size-current, 28px) var(--canvas-grid-size-current, 28px) !important;
}
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card {
background: rgba(18, 28, 44, 0.98) !important;
border-color: rgba(141, 149, 165, 0.4) !important;
color: #e7eef9 !important;
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32) !important;
}
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-body,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-body,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-summary strong,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-summary strong,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-note,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-note {
color: #e7eef9 !important;
}
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-summary span,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-summary small,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-meta,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-summary span,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-summary small,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-meta {
color: #a9b8cc !important;
}
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-body textarea,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-body input:not([type="range"]),
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-body select,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-body textarea,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-body input:not([type="range"]),
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-body select {
background: rgba(9, 11, 16, 0.82) !important;
border-color: rgba(141, 149, 165, 0.34) !important;
color: #e7eef9 !important;
}
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-media-box,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-drop-zone,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-media-box,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-drop-zone {
background: #1b1f28 !important;
border-color: #454c5c !important;
color: #a9b8cc !important;
}
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-inline-panel,
body.theme-dark:not(.auth-required) .canvas-edit-panel {
background: rgba(18, 21, 29, 0.98) !important;
border-color: rgba(141, 149, 165, 0.36) !important;
color: #e7eef9 !important;
}
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .infinite-inline-references {
background: rgba(13, 21, 35, 0.92) !important;
border-color: rgba(90, 166, 232, 0.28) !important;
color: #dbe9fa !important;
}
body.theme-dark:not(.auth-required) .infinite-canvas-stage.picking-reference {
box-shadow: inset 0 0 0 2px rgba(90, 166, 232, 0.32) !important;
}
body.theme-dark:not(.auth-required) .infinite-canvas-stage.picking-reference::before {
background: rgba(3, 7, 18, 0.12) !important;
backdrop-filter: none !important;
}
body.theme-dark:not(.auth-required) .infinite-canvas-stage.picking-reference {
--canvas-pick-dim: 34%;
}
body.theme-dark:not(.auth-required) .infinite-card.media-pickable,
body.theme-dark:not(.auth-required) .infinite-card.media-pick-target {
opacity: 1 !important;
filter: none !important;
}
body.theme-dark:not(.auth-required) .canvas-studio-shell,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-canvas-shell.canvas-studio-shell {
--canvas-surface: var(--studio-canvas-surface-dark);
--canvas-grid-image: var(--studio-canvas-grid-image-dark);
background: var(--studio-canvas-surface-dark) !important;
border-color: rgba(141, 149, 165, 0.34) !important;
}
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-canvas-main {
background: transparent !important;
}
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-canvas-stage,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-canvas-stage {
background-color: var(--canvas-surface) !important;
background-image: var(--canvas-grid-image) !important;
background-size: var(--canvas-grid-size-current, 28px) var(--canvas-grid-size-current, 28px) !important;
}
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card {
background: rgba(255, 255, 255, 0.97) !important;
border-color: rgba(125, 144, 168, 0.62) !important;
color: #102033 !important;
box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14) !important;
}
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card.selected,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card.selected {
border-color: rgba(47, 109, 183, 0.68) !important;
box-shadow: 0 0 0 2px rgba(47, 109, 183, 0.2), 0 20px 48px rgba(15, 23, 42, 0.18) !important;
}
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-body,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-body,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-summary strong,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-summary strong,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-note,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-note {
color: #102033 !important;
}
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-summary span,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-summary small,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-meta,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-summary span,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-summary small,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-meta {
color: #526176 !important;
}
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-body textarea,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-body input:not([type="range"]),
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-body select,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-body textarea,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-body input:not([type="range"]),
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-body select {
background: #ffffff !important;
border-color: #d7e2ef !important;
color: #102033 !important;
}
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-media-box,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-drop-zone,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-media-box,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-drop-zone {
background: #f8fbfd !important;
border-color: #dbe7f0 !important;
color: #526176 !important;
}
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-inline-panel,
body.theme-dark:not(.auth-required) .canvas-edit-panel {
background: rgba(255, 255, 255, 0.98) !important;
border-color: rgba(125, 144, 168, 0.58) !important;
color: #102033 !important;
box-shadow: 0 24px 68px rgba(15, 23, 42, 0.22) !important;
}
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .infinite-inline-references {
background: linear-gradient(180deg, rgba(234, 242, 251, 0.98), rgba(224, 236, 247, 0.98)) !important;
border-color: rgba(47, 109, 183, 0.26) !important;
color: #102033 !important;
}
body.theme-dark:not(.auth-required) .infinite-canvas-stage.picking-reference::before {
background: rgba(15, 23, 42, 0.08) !important;
}
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-canvas-toolbar.canvas-creator-bar {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
body.theme-dark:not(.auth-required) .modal-mask {
background: rgba(3, 7, 18, 0.58) !important;
}
body.theme-dark:not(.auth-required) .modal-panel,
body.theme-dark:not(.auth-required) .workflow-project-panel,
body.theme-dark:not(.auth-required) .workflow-media-library-panel,
body.theme-dark:not(.auth-required) .canvas-project-panel,
body.theme-dark:not(.auth-required) .command-palette-panel {
background: rgba(18, 21, 29, 0.98) !important;
border-color: rgba(141, 149, 165, 0.34) !important;
color: #e7eef9 !important;
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42) !important;
}
body.theme-dark:not(.auth-required) .modal-head,
body.theme-dark:not(.auth-required) .workflow-project-status,
body.theme-dark:not(.auth-required) .workflow-media-library-meta p,
body.theme-dark:not(.auth-required) .workflow-media-library-meta small,
body.theme-dark:not(.auth-required) .canvas-project-main p,
body.theme-dark:not(.auth-required) .canvas-project-main small,
body.theme-dark:not(.auth-required) .workflow-project-card p,
body.theme-dark:not(.auth-required) .workflow-project-card small {
color: #a9b8cc !important;
}
body.theme-dark:not(.auth-required) .workflow-project-tools input,
body.theme-dark:not(.auth-required) .workflow-project-tools select,
body.theme-dark:not(.auth-required) .workflow-media-library-tools input,
body.theme-dark:not(.auth-required) .workflow-media-library-tools select,
body.theme-dark:not(.auth-required) .canvas-project-tools input,
body.theme-dark:not(.auth-required) .canvas-project-tools select,
body.theme-dark:not(.auth-required) .command-palette-search {
background: rgba(9, 11, 16, 0.88) !important;
border-color: rgba(141, 149, 165, 0.36) !important;
color: #e7eef9 !important;
}
body.theme-dark:not(.auth-required) .workflow-media-library-card,
body.theme-dark:not(.auth-required) .workflow-project-card,
body.theme-dark:not(.auth-required) .canvas-project-card,
body.theme-dark:not(.auth-required) .workflow-project-empty {
background: rgba(16, 18, 26, 0.92) !important;
border-color: rgba(141, 149, 165, 0.32) !important;
color: #e7eef9 !important;
box-shadow: inset 3px 0 0 transparent, 0 16px 36px transparent;
}
body.theme-dark:not(.auth-required) .workflow-project-card:hover,
body.theme-dark:not(.auth-required) .canvas-project-card:hover {
border-color: rgba(90, 166, 232, 0.42) !important;
background: rgba(19, 31, 50, 0.96) !important;
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24) !important;
}
body.theme-dark:not(.auth-required) .workflow-media-library-card.is-selected,
body.theme-dark:not(.auth-required) .workflow-project-card.active {
background: linear-gradient(180deg, rgba(47, 109, 183, 0.2), rgba(16, 18, 26, 0.94)) !important;
border-color: rgba(90, 166, 232, 0.62) !important;
box-shadow: inset 3px 0 0 #5aa6e8, 0 16px 36px rgba(0, 0, 0, 0.26) !important;
}
body.theme-dark:not(.auth-required) .workflow-media-library-preview,
body.theme-dark:not(.auth-required) .canvas-project-preview {
background: rgba(9, 11, 16, 0.86) !important;
border-color: rgba(141, 149, 165, 0.28) !important;
}
body.theme-dark:not(.auth-required) .workflow-media-library-title strong,
body.theme-dark:not(.auth-required) .workflow-project-title-row strong,
body.theme-dark:not(.auth-required) .canvas-project-main strong,
body.theme-dark:not(.auth-required) .command-palette-item strong {
color: #f4f8ff !important;
}
body.theme-dark:not(.auth-required) .workflow-media-library-title span,
body.theme-dark:not(.auth-required) .workflow-project-current,
body.theme-dark:not(.auth-required) .workflow-project-run {
background: rgba(90, 166, 232, 0.14) !important;
border-color: rgba(90, 166, 232, 0.28) !important;
color: #9cc4ec !important;
}
body.theme-dark:not(.auth-required) .command-palette-category {
background: transparent !important;
border-color: transparent !important;
color: #9cc4ec !important;
}
body.theme-dark:not(.auth-required) .workflow-media-library-select {
background: rgba(9, 11, 16, 0.82) !important;
border-color: rgba(90, 166, 232, 0.42) !important;
}
body.theme-dark:not(.auth-required) .canvas-project-preview {
background:
radial-gradient(rgba(90, 166, 232, 0.22) 1px, transparent 1.6px),
linear-gradient(160deg, #141821 0%, #0f1219 100%) !important;
background-size: 14px 14px, 100% 100% !important;
border-color: rgba(141, 149, 165, 0.26) !important;
}
body.theme-dark:not(.auth-required) .account-map-node {
border-color: rgba(255, 255, 255, 0.24);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
body.theme-dark:not(.auth-required) .project-card-foot {
border-top-color: rgba(141, 149, 165, 0.2);
}
body.theme-dark:not(.auth-required) .project-card-meta,
body.theme-dark:not(.auth-required) .project-card-time {
color: #8ea2ba !important;
}
body.theme-dark:not(.auth-required) .project-icon-btn {
color: #a9b8cc;
}
body.theme-dark:not(.auth-required) .project-icon-btn:hover {
background: rgba(90, 166, 232, 0.16);
color: #cfe0f3;
}
body.theme-dark:not(.auth-required) .project-icon-btn.project-icon-danger:hover {
background: rgba(255, 107, 107, 0.14);
color: #ffa2a2;
}
body.theme-dark:not(.auth-required) .project-empty-icon {
background: linear-gradient(160deg, #161b25, #10141d);
color: #6f86a3;
}
body.theme-dark:not(.auth-required) .workflow-project-empty.project-empty strong {
color: #e7eef9;
}
body.theme-dark:not(.auth-required) .workflow-media-library-select[aria-pressed="true"] {
background: #2f6db7 !important;
border-color: #9cc4ec !important;
}
body.theme-dark:not(.auth-required) .workflow-media-library-actions button,
body.theme-dark:not(.auth-required) .workflow-project-actions button,
body.theme-dark:not(.auth-required) .canvas-project-actions button {
background: rgba(17, 30, 50, 0.88) !important;
border-color: rgba(96, 165, 250, 0.34) !important;
color: #cfe3ff !important;
}
body.theme-dark:not(.auth-required) .context-menu,
body.theme-dark:not(.auth-required) .context-menu.canvas-add-menu,
body.theme-dark:not(.auth-required) .context-menu.canvas-item-menu,
body.theme-dark:not(.auth-required) .layout.canvas-layout .context-menu,
body.theme-dark:not(.auth-required) .layout.canvas-layout .context-menu.canvas-add-menu,
body.theme-dark:not(.auth-required) .layout.canvas-layout .context-menu.canvas-item-menu {
background: rgba(18, 21, 29, 0.98) !important;
border-color: rgba(141, 149, 165, 0.34) !important;
color: #e7eef9 !important;
box-shadow: 0 22px 56px rgba(0, 0, 0, 0.42) !important;
}
body.theme-dark:not(.auth-required) .context-menu button,
body.theme-dark:not(.auth-required) .context-menu button.module-create,
body.theme-dark:not(.auth-required) .layout.canvas-layout .context-menu button.module-create {
background: transparent !important;
border-color: transparent !important;
color: #e7eef9 !important;
}
body.theme-dark:not(.auth-required) .context-menu button:hover,
body.theme-dark:not(.auth-required) .context-menu button.module-create:hover,
body.theme-dark:not(.auth-required) .layout.canvas-layout .context-menu button.module-create:hover {
background: rgba(90, 166, 232, 0.13) !important;
border-color: rgba(90, 166, 232, 0.3) !important;
color: #f8fffd !important;
}
body.theme-dark:not(.auth-required) .context-menu .context-description,
body.theme-dark:not(.auth-required) .context-menu .shortcut-hint,
body.theme-dark:not(.auth-required) .context-menu-heading {
color: #a9b8cc !important;
}
body.theme-dark:not(.auth-required) .context-menu-heading,
body.theme-dark:not(.auth-required) .context-menu-divider,
body.theme-dark:not(.auth-required) .command-palette-category {
border-color: rgba(141, 149, 165, 0.24) !important;
}
body.theme-dark:not(.auth-required) .context-menu .context-icon {
background: color-mix(in srgb, var(--menu-accent, #5aa6e8) 18%, #111a29) !important;
color: color-mix(in srgb, var(--menu-accent, #5aa6e8) 65%, #e7eef9) !important;
}
body.theme-dark:not(.auth-required) .context-menu .context-tag {
background: rgba(16, 18, 26, 0.9) !important;
border-color: rgba(141, 149, 165, 0.32) !important;
color: #cbd5e1 !important;
}
body.theme-dark:not(.auth-required) .command-palette-item {
background: transparent !important;
border-color: transparent !important;
color: #e7eef9 !important;
}
body.theme-dark:not(.auth-required) .command-palette-item:hover,
body.theme-dark:not(.auth-required) .command-palette-item.active {
background: rgba(90, 166, 232, 0.13) !important;
border-color: rgba(90, 166, 232, 0.36) !important;
}
body.theme-dark:not(.auth-required) .command-palette-item small {
color: #a9b8cc !important;
}
body.theme-dark:not(.auth-required) .litegraph.litecontextmenu,
body.theme-dark:not(.auth-required) .litegraph.litecontextmenu.dark {
background: rgba(18, 21, 29, 0.98) !important;
background-color: rgba(18, 21, 29, 0.98) !important;
border-color: rgba(141, 149, 165, 0.34) !important;
color: #e7eef9 !important;
box-shadow: 0 22px 56px rgba(0, 0, 0, 0.42) !important;
}
body.theme-dark:not(.auth-required) .litegraph.litecontextmenu .litemenu-title,
body.theme-dark:not(.auth-required) .litegraph.litecontextmenu .ai-lite-menu-drag-handle {
color: #dbe7f5 !important;
border-color: rgba(141, 149, 165, 0.24) !important;
}
body.theme-dark:not(.auth-required) .litegraph.litecontextmenu .litemenu-entry,
body.theme-dark:not(.auth-required) .litegraph.litecontextmenu .litemenu-entry.submenu,
body.theme-dark:not(.auth-required) .litegraph.litecontextmenu.dark .litemenu-entry,
body.theme-dark:not(.auth-required) .litegraph.litecontextmenu.dark .litemenu-entry.submenu,
body.theme-dark:not(.auth-required) .litegraph.litecontextmenu .ai-lite-menu-node {
color: #e7eef9 !important;
background: transparent !important;
background-color: transparent !important;
border-color: transparent !important;
}
body.theme-dark:not(.auth-required) .litegraph.litecontextmenu .litemenu-entry:hover:not(.disabled):not(.separator),
body.theme-dark:not(.auth-required) .litegraph.litecontextmenu.dark .litemenu-entry:hover:not(.disabled):not(.separator),
body.theme-dark:not(.auth-required) .litegraph.litecontextmenu .ai-lite-menu-node:hover {
background: rgba(90, 166, 232, 0.13) !important;
background-color: rgba(90, 166, 232, 0.13) !important;
border-color: rgba(90, 166, 232, 0.3) !important;
color: #f8fffd !important;
}
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card {
background: #252a34 !important;
border-color: #454c5c !important;
color: #e7eef9 !important;
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5) !important;
}
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card.is-pointer-hover,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card.is-pointer-hover {
border-color: rgba(90, 166, 232, 0.42) !important;
box-shadow: 0 22px 54px rgba(0, 0, 0, 0.38) !important;
}
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card.selected,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card.selected {
border-color: rgba(90, 166, 232, 0.78) !important;
box-shadow: 0 0 0 2px rgba(90, 166, 232, 0.28), 0 22px 54px rgba(0, 0, 0, 0.4) !important;
}
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-body,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-body,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-summary strong,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-summary strong,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-note,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-note {
color: #e7eef9 !important;
}
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-summary span,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-summary small,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-meta,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-summary span,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-summary small,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-meta {
color: #a9b8cc !important;
}
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-body textarea,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-body input:not([type="range"]),
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-body select,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-body textarea,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-body input:not([type="range"]),
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-body select {
background: #1b1f28 !important;
border-color: #454c5c !important;
color: #e7eef9 !important;
}
body.theme-dark:not(.auth-required) :is(.layout.canvas-layout, .canvas-studio-shell) .infinite-card[data-canvas-type="text"] .infinite-card-body textarea,
body.theme-dark:not(.auth-required) :is(.layout.canvas-layout, .canvas-studio-shell) .infinite-card[data-canvas-type="prompt"] .infinite-card-body textarea {
background: transparent !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
}
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-media-box,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-drop-zone,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-media-box,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-drop-zone {
background: #1b1f28 !important;
border-color: #454c5c !important;
color: #a9b8cc !important;
}
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-media img,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-media video,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-media-grid img,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-media-grid video,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-media img,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-media video,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-media-grid img,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-media-grid video {
filter: none !important;
opacity: 1 !important;
}
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-inline-panel,
body.theme-dark:not(.auth-required) .canvas-edit-panel {
background: rgba(18, 21, 29, 0.98) !important;
border-color: rgba(141, 149, 165, 0.36) !important;
color: #e7eef9 !important;
box-shadow: 0 24px 68px rgba(0, 0, 0, 0.42) !important;
}
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .infinite-inline-references {
background: rgba(13, 21, 35, 0.92) !important;
border-color: rgba(90, 166, 232, 0.28) !important;
color: #dbe9fa !important;
}
body.theme-dark:not(.auth-required) .infinite-canvas-stage.picking-reference::before {
background: rgba(3, 7, 18, 0.18) !important;
}
button,
.secondary,
.primary,
.icon-button,
.module-tab,
.job-list button,
.workflow-toolbar button,
.infinite-canvas-toolbar button,
.modal-close,
.account-action {
transition:
background-color var(--motion-fast) var(--ease-ui),
border-color var(--motion-fast) var(--ease-ui),
color var(--motion-fast) var(--ease-ui),
box-shadow var(--motion-fast) var(--ease-ui),
opacity var(--motion-fast) var(--ease-ui);
}
@media (hover: hover) {
.workflow-node-card:hover,
.infinite-card.is-pointer-hover,
.workflow-project-card:hover,
.job-list li:hover {
box-shadow: 0 12px 30px rgba(26, 32, 44, 0.10);
}
}
.modal-mask:not([hidden]) .modal-panel,
.account-usage-modal:not([hidden]) .account-usage-panel,
.workflow-media-library-modal:not([hidden]) .workflow-media-library-panel {
animation: uiPanelIn var(--motion-base) var(--ease-ui) both;
}
@keyframes uiPanelIn {
from {
opacity: 0;
transform: translateY(10px) scale(0.985);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes authCardIn {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 900px) {
body:not(.auth-required) {
overflow: auto;
}
body:not(.auth-required) .topbar {
position: sticky;
top: 0;
z-index: 80;
width: 100% !important;
height: auto;
max-height: none;
padding: 12px;
border-right: 0;
border-bottom: 1px solid var(--border);
box-shadow: 0 10px 28px rgba(26, 32, 44, 0.08);
}
body:not(.auth-required).sidebar-collapsed .topbar {
width: 100% !important;
padding: 12px;
}
body:not(.auth-required) .brand-row,
body:not(.auth-required).sidebar-collapsed .brand-row {
grid-template-columns: minmax(0, 1fr) auto;
}
body:not(.auth-required) .brand-full,
body:not(.auth-required).sidebar-collapsed .brand-full {
display: inline;
}
body:not(.auth-required) .brand-short,
body:not(.auth-required).sidebar-collapsed .brand-short {
display: none;
}
body:not(.auth-required) .module-nav,
body:not(.auth-required).sidebar-collapsed .module-nav {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
body:not(.auth-required) .module-tab,
body:not(.auth-required) .topbar .module-tab,
body:not(.auth-required).sidebar-collapsed .module-tab.has-ui-icon {
min-height: 52px;
grid-template-rows: auto;
grid-template-columns: 34px minmax(0, 1fr);
align-items: center;
gap: 8px;
padding: 8px;
}
body:not(.auth-required) .module-tab strong,
body:not(.auth-required).sidebar-collapsed .module-tab.has-ui-icon strong {
display: block;
font-size: 13px;
}
body:not(.auth-required) .module-tab span:not(.ui-icon),
body:not(.auth-required).sidebar-collapsed .module-tab.has-ui-icon span:not(.ui-icon) {
display: none;
}
body:not(.auth-required) .layout,
body:not(.auth-required) .module-panel {
min-height: auto;
grid-template-columns: 1fr !important;
padding: 10px;
}
body:not(.auth-required) .layout.media-tool-layout,
body:not(.auth-required) .layout.workflow-layout,
body:not(.auth-required) .layout.canvas-layout,
body:not(.auth-required) .layout.text-layout {
grid-template-columns: 1fr !important;
}
body:not(.auth-required) .layout.media-tool-layout {
height: auto;
overflow: visible;
}
body:not(.auth-required) .workflow-main,
body:not(.auth-required) .infinite-canvas-main,
body:not(.auth-required) .canvas-studio-shell {
min-width: 0;
overflow: auto;
}
body:not(.auth-required) .workflow-canvas-shell,
body:not(.auth-required) .infinite-canvas-stage,
body:not(.auth-required) .canvas-stage {
min-height: 520px;
}
}
@media (min-width: 901px) and (max-width: 1500px) {
.layout.media-tool-layout #videoToolTab .quick-options,
.layout.media-tool-layout #audioToolTab .quick-options,
.layout.media-tool-layout #audioToolTab .music-options {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
body:not(.auth-required) .module-nav,
body:not(.auth-required).sidebar-collapsed .module-nav {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body:not(.auth-required) .layout,
body:not(.auth-required) .module-panel {
padding: 8px;
}
body:not(.auth-required) .panel,
body:not(.auth-required) .settings-panel,
body:not(.auth-required) .monitor-panel,
body:not(.auth-required) .task-panel,
body:not(.auth-required) .result-panel {
padding: 12px;
border-radius: 16px;
}
body:not(.auth-required) .form-grid,
body:not(.auth-required) .options-grid,
body:not(.auth-required) .stats-grid,
body:not(.auth-required) .media-basic-grid,
body:not(.auth-required) .model-category-panel,
body:not(.auth-required) .settings-panel > .form-grid {
grid-template-columns: 1fr !important;
}
body:not(.auth-required) .command-row,
body:not(.auth-required) .toolbar-row,
body:not(.auth-required) .result-actions {
flex-wrap: wrap;
}
body:not(.auth-required) textarea {
min-height: 132px;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
}
body.account-guest:not(.auth-required) .account-summary {
border-color: rgba(47, 109, 183, 0.28);
background: rgba(234, 242, 251, 0.95);
color: #2f6db7;
}
body.account-guest:not(.auth-required) .account-summary:hover {
border-color: rgba(47, 109, 183, 0.46);
background: #d7e6f7;
}
body:not(.auth-required) .account-modal:not([hidden]) {
position: fixed;
inset: 0;
z-index: var(--z-account);
width: 100vw;
max-width: 100vw;
height: 100dvh;
display: grid;
place-items: center;
padding: 18px;
overflow-x: hidden;
overflow-y: auto;
background: rgba(15, 23, 42, 0.30);
backdrop-filter: blur(14px);
}
body:not(.auth-required) .account-modal .account-auth-shell {
width: min(430px, 100%);
min-height: 0;
display: block;
}
body:not(.auth-required) .account-modal .account-auth-intro {
display: none !important;
}
body:not(.auth-required) .account-modal .account-modal-card {
width: 100%;
min-height: auto;
display: grid;
gap: 14px;
padding: 28px;
border-radius: 22px;
border: 1px solid rgba(203, 213, 225, 0.92);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 253, 0.96));
box-shadow: 0 26px 86px rgba(15, 23, 42, 0.22);
animation: uiPanelIn var(--motion-base) var(--ease-ui) both;
}
body:not(.auth-required) .account-modal .account-modal-card .account-auth-welcome,
body:not(.auth-required) .account-modal .account-modal-card .account-remember-row,
body:not(.auth-required) .account-modal .account-modal-card .account-agree-row,
body:not(.auth-required) .account-modal .account-modal-card .account-auth-footnote,
body:not(.auth-required) .account-modal .account-modal-card .account-switch-strip {
margin: 0;
}
body:not(.auth-required) .account-modal .account-form-brand {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
align-items: center;
}
body:not(.auth-required) .account-modal .account-form-brand > span {
display: none !important;
}
body:not(.auth-required) .account-modal .account-form-brand strong,
body:not(.auth-required) .account-modal .account-modal-card h2 {
color: #0f172a;
}
body:not(.auth-required) .account-modal .account-form-brand small,
body:not(.auth-required) .account-modal .account-modal-card p,
body:not(.auth-required) .account-modal .account-auth-footnote {
color: #64748b;
}
body:not(.auth-required) .account-modal .account-modal-card h2 {
margin: 2px 0 0;
font-size: 24px;
}
body:not(.auth-required) .account-modal .account-modal-card p {
margin: 0;
line-height: 1.65;
}
body:not(.auth-required) .account-modal .account-modal-card label:not(.account-agree-row):not(.account-remember-row) {
display: grid;
gap: 8px;
margin: 0;
color: #334155;
font-weight: 850;
}
body:not(.auth-required) .account-modal .account-modal-card input {
width: 100%;
min-height: 44px;
padding: 0 13px;
border: 1px solid #cdd9e6;
border-radius: 13px;
background: #f8fafc;
outline: none;
}
body:not(.auth-required) .account-modal .account-modal-card input:focus {
border-color: #2f6db7;
background: #ffffff;
box-shadow: 0 0 0 4px rgba(47, 109, 183, 0.14);
}
body:not(.auth-required) .account-modal .account-auth-actions {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
body:not(.auth-required) .account-modal .account-auth-actions .primary {
min-height: 46px;
border-radius: 13px;
background: var(--accent);
box-shadow: 0 14px 28px rgba(47, 109, 183, 0.2);
}
body:not(.auth-required) .account-modal #accountSwitchBtn {
display: none !important;
}
body:not(.auth-required) .account-modal .account-auth-footnote {
padding: 11px;
border: 1px solid #dce6ef;
border-radius: 13px;
background: #f8fafc;
text-align: center;
}
body.theme-dark.account-guest:not(.auth-required) .account-summary {
border-color: rgba(90, 166, 232, 0.38);
background: rgba(47, 109, 183, 0.18);
color: #dbe9fa;
}
body.theme-dark:not(.auth-required) .account-modal:not([hidden]) {
background: rgba(3, 7, 18, 0.58);
backdrop-filter: blur(16px);
}
body.theme-dark:not(.auth-required) .account-modal .account-modal-card {
border-color: rgba(141, 149, 165, 0.34);
background:
linear-gradient(180deg, rgba(18, 21, 29, 0.98), rgba(11, 14, 20, 0.98));
box-shadow: 0 28px 90px rgba(0, 0, 0, 0.48);
}
body.theme-dark:not(.auth-required) .account-modal .account-form-brand strong,
body.theme-dark:not(.auth-required) .account-modal .account-modal-card h2,
body.theme-dark:not(.auth-required) .account-modal .account-modal-card label {
color: #e8eef8;
}
body.theme-dark:not(.auth-required) .account-modal .account-form-brand small,
body.theme-dark:not(.auth-required) .account-modal .account-modal-card p,
body.theme-dark:not(.auth-required) .account-modal .account-auth-footnote {
color: #9fb0c7;
}
body.theme-dark:not(.auth-required) .account-modal .account-modal-card input {
border-color: rgba(141, 149, 165, 0.34);
background: rgba(4, 11, 22, 0.86);
color: #e8eef8;
}
body.theme-dark:not(.auth-required) .account-modal .account-modal-card input:focus {
border-color: rgba(90, 166, 232, 0.72);
background: rgba(9, 11, 16, 0.96);
box-shadow: 0 0 0 4px rgba(90, 166, 232, 0.12);
}
body.theme-dark:not(.auth-required) .account-modal .account-auth-footnote,
body.theme-dark:not(.auth-required) .account-modal .modal-close {
border-color: rgba(141, 149, 165, 0.28);
background: rgba(15, 23, 42, 0.88);
}
.admin-redeem-manager {
display: grid;
gap: 12px;
padding: 14px;
border: 1px solid var(--border);
border-radius: 16px;
background: linear-gradient(180deg, var(--surface-2), var(--panel));
}
.admin-redeem-head,
.admin-redeem-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
}
.admin-redeem-head strong,
.admin-redeem-code strong {
display: block;
color: var(--text);
font-weight: 900;
}
.admin-redeem-head span,
.admin-redeem-code span,
.admin-redeem-note-text {
color: var(--muted);
font-size: 12px;
}
.admin-redeem-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px 12px;
align-items: end;
}
.admin-redeem-grid .arc-offering,
.admin-redeem-grid .arc-expiry {
grid-column: span 2;
}
.admin-redeem-group-title {
grid-column: 1 / -1;
display: flex;
align-items: baseline;
gap: 8px;
padding-top: 2px;
color: var(--text);
}
.admin-redeem-group-title strong {
font-size: 13px;
}
.admin-redeem-group-title span {
color: var(--muted);
font-size: 11px;
}
.admin-redeem-grid .arc-note {
grid-column: span 5;
}
.admin-redeem-reward-preview {
grid-column: span 4;
min-height: 38px;
display: flex;
align-items: center;
padding: 8px 10px;
border: 1px dashed var(--border-strong);
border-radius: 9px;
background: var(--surface-2);
color: var(--muted);
font-size: 12px;
line-height: 1.45;
}
.admin-redeem-reward-preview.is-ready {
border-color: var(--ok-border);
background: var(--ok-soft);
color: var(--ok);
}
.admin-redeem-grid .arc-submit {
grid-column: span 1;
height: 38px;
}
.admin-redeem-hint {
margin: 10px 2px 0;
font-size: 12px;
line-height: 1.55;
color: var(--muted);
}
.admin-redeem-hint code {
padding: 1px 6px;
border-radius: 5px;
background: var(--accent-soft);
color: var(--accent);
font-size: 11.5px;
}
.admin-redeem-grid label {
display: grid;
gap: 6px;
margin: 0;
color: var(--text);
font-weight: 850;
}
.admin-redeem-grid :is(input, select) {
min-height: 34px;
min-width: 0;
}
.admin-redeem-filter {
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
align-items: center;
}
.admin-redeem-filter input[type="search"] {
flex: 1 1 180px;
min-width: 0;
}
.admin-redeem-head-actions {
display: inline-flex;
gap: 8px;
flex-shrink: 0;
}
.admin-redeem-summary {
margin: 10px 2px 6px;
color: var(--muted);
font-size: 12px;
line-height: 1.5;
}
.admin-redeem-fresh {
margin: 10px 0 4px;
padding: 10px 12px;
border: 1px solid var(--border-strong);
border-radius: 12px;
background: var(--accent-soft);
}
.admin-redeem-fresh-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 8px;
}
.admin-redeem-fresh-head strong { font-size: 13px; color: var(--text); }
.admin-redeem-fresh-head > div {
display: grid;
gap: 2px;
}
.admin-redeem-fresh-head small {
color: var(--muted);
font-size: 11px;
}
.admin-redeem-fresh-codes {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.admin-redeem-fresh-codes code {
padding: 3px 8px;
border: 1px solid var(--border-soft);
border-radius: 6px;
background: var(--surface);
color: var(--accent);
font-size: 12px;
cursor: pointer;
user-select: all;
}
.admin-redeem-fresh-codes code:hover { border-color: var(--accent); }
.account-redeem-pane[data-redeem-view="codes"] > .membership-card,
.account-redeem-pane[data-redeem-view="codes"] > .account-recharge {
display: none;
}
.admin-redeem-chips {
display: inline-flex;
flex-wrap: wrap;
gap: 4px;
padding: 3px;
border: 1px solid var(--border-soft);
border-radius: 999px;
background: var(--surface-2);
}
.admin-redeem-chips button {
min-height: 26px;
padding: 2px 11px;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--muted);
font-size: 12px;
font-weight: 830;
white-space: nowrap;
cursor: pointer;
}
.admin-redeem-chips button.is-active {
background: var(--accent-soft);
color: var(--accent-strong);
}
.admin-redeem-filter #adminRedeemSearch {
flex: 1 1 200px;
min-width: 160px;
max-width: 320px;
margin-left: auto;
min-height: 32px;
}
.admin-redeem-list {
display: grid;
gap: 8px;
max-height: none;
overflow: visible;
}
.admin-redeem-row {
grid-template-columns: minmax(180px, 0.95fr) minmax(220px, 1.35fr) auto;
padding: 10px 10px 10px 13px;
border: 1px solid var(--border);
border-left-width: 4px;
border-radius: 12px;
background: var(--surface);
}
.admin-redeem-row.is-fresh { border-left-color: var(--ok); }
.admin-redeem-row.is-partial { border-left-color: var(--warning); }
.admin-redeem-row.is-used { border-left-color: var(--muted-2); }
.admin-redeem-row.is-expired { border-left-color: var(--warning); }
.admin-redeem-row.is-disabled { border-left-color: var(--danger); opacity: 0.82; }
.admin-redeem-code-text {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
letter-spacing: 0.3px;
}
.redeem-status-badge {
display: inline-flex;
align-items: center;
margin-right: 7px;
padding: 1px 8px;
border-radius: 999px;
font-size: 11px;
font-style: normal;
font-weight: 860;
vertical-align: middle;
}
.redeem-status-badge.is-fresh { background: var(--ok-soft); color: var(--ok); }
.redeem-status-badge.is-partial,
.redeem-status-badge.is-expired { background: var(--warning-soft); color: var(--warning); }
.redeem-status-badge.is-used { background: var(--surface-3); color: var(--muted); }
.redeem-status-badge.is-disabled { background: var(--danger-soft); color: var(--danger); }
.admin-redeem-usedby {
display: grid;
gap: 5px;
min-width: 0;
}
.admin-redeem-usedby em {
color: var(--text);
font-size: 12px;
font-style: normal;
font-weight: 860;
}
.admin-redeem-usedby > div {
display: flex;
flex-wrap: wrap;
gap: 5px;
min-width: 0;
}
.admin-redeem-user {
min-height: 24px;
display: inline-flex;
align-items: center;
gap: 5px;
max-width: 100%;
padding: 3px 7px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--accent-soft);
color: var(--accent-strong);
}
.admin-redeem-user strong {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
font-weight: 880;
}
.admin-redeem-user small,
.admin-redeem-usedby > small {
color: var(--muted);
font-size: 11px;
}
.admin-redeem-user.is-empty {
color: var(--muted);
background: var(--surface-2);
}
.admin-redeem-actions {
display: inline-flex;
gap: 6px;
}
body.theme-dark:not(.auth-required) .admin-account-manager {
border-color: var(--border);
background: linear-gradient(180deg, var(--surface-2), var(--panel));
}
body.theme-dark:not(.auth-required) .admin-audit-manager {
border-color: var(--border);
background: linear-gradient(180deg, var(--surface-2), var(--panel));
}
body.theme-dark:not(.auth-required) .admin-recycle-manager {
border-color: var(--border);
background: linear-gradient(180deg, var(--surface-2), var(--panel));
}
body.theme-dark:not(.auth-required) .admin-account-create,
body.theme-dark:not(.auth-required) .admin-account-points,
body.theme-dark:not(.auth-required) .admin-account-storage,
body.theme-dark:not(.auth-required) .admin-account-grid label,
body.theme-dark:not(.auth-required) .admin-account-search,
body.theme-dark:not(.auth-required) .admin-account-main-compact strong,
body.theme-dark:not(.auth-required) .admin-detail-title strong,
body.theme-dark:not(.auth-required) .admin-detail-meta strong,
body.theme-dark:not(.auth-required) .admin-account-points strong,
body.theme-dark:not(.auth-required) .admin-account-storage strong,
body.theme-dark:not(.auth-required) .admin-audit-main strong,
body.theme-dark:not(.auth-required) .admin-audit-target strong,
body.theme-dark:not(.auth-required) .admin-audit-summary,
body.theme-dark:not(.auth-required) .admin-recycle-main strong,
body.theme-dark:not(.auth-required) .admin-recycle-owner strong,
body.theme-dark:not(.auth-required) .admin-recycle-detail {
color: var(--text);
}
body.theme-dark:not(.auth-required) .admin-account-main-compact span,
body.theme-dark:not(.auth-required) .admin-detail-title span,
body.theme-dark:not(.auth-required) .admin-detail-meta,
body.theme-dark:not(.auth-required) .admin-account-points span,
body.theme-dark:not(.auth-required) .admin-account-storage span,
body.theme-dark:not(.auth-required) .admin-account-storage-hint,
body.theme-dark:not(.auth-required) .admin-account-member-hint,
body.theme-dark:not(.auth-required) .admin-account-count,
body.theme-dark:not(.auth-required) .admin-audit-main span,
body.theme-dark:not(.auth-required) .admin-audit-target span,
body.theme-dark:not(.auth-required) .admin-audit-meta span,
body.theme-dark:not(.auth-required) .admin-recycle-main span,
body.theme-dark:not(.auth-required) .admin-recycle-owner span,
body.theme-dark:not(.auth-required) .admin-recycle-meta span {
color: var(--muted);
}
body.theme-dark:not(.auth-required) .admin-account-row,
body.theme-dark:not(.auth-required) .admin-audit-row,
body.theme-dark:not(.auth-required) .admin-recycle-row {
border-color: var(--border);
background: var(--surface);
}
body.theme-dark:not(.auth-required) .admin-detail-section,
body.theme-dark:not(.auth-required) .admin-detail-meta {
border-color: var(--border);
background: var(--surface-2);
}
body.theme-dark:not(.auth-required) .admin-account-avatar {
border-color: var(--border-strong);
background: var(--brand-soft);
color: var(--info);
}
body.theme-dark:not(.auth-required) .admin-account-role-badge {
background: var(--surface-3);
color: var(--muted);
}
body.theme-dark:not(.auth-required) .admin-account-role-badge.is-admin {
background: var(--brand-soft);
color: var(--text);
}
body.theme-dark:not(.auth-required) .admin-account-storage {
border-color: var(--border);
background: var(--surface-3);
}
@media (max-width: 980px) {
.admin-account-head,
.admin-account-head-actions,
.admin-account-grid,
.admin-redeem-grid,
.admin-redeem-row {
grid-template-columns: 1fr;
}
.admin-redeem-actions {
justify-content: stretch;
}
.admin-redeem-actions button {
flex: 1;
}
.admin-redeem-grid :is(.admin-redeem-group-title, .arc-offering, .arc-expiry, .arc-note, .admin-redeem-reward-preview, .arc-submit) {
grid-column: auto;
}
}
@media (max-width: 520px) {
body:not(.auth-required) .account-modal:not([hidden]) {
align-items: end;
padding: 10px;
}
body:not(.auth-required) .account-modal .account-auth-shell {
width: 100%;
}
body:not(.auth-required) .account-modal .account-modal-card {
padding: 22px;
border-radius: 20px;
}
}
.brand-text {
padding-left: 0 !important;
}
.brand-text::before,
.brand-text::after {
content: none !important;
display: none !important;
}
.brand-text h1 {
display: flex;
align-items: center;
min-height: 38px;
}
.brand-logo {
display: block;
object-fit: contain;
user-select: none;
-webkit-user-drag: none;
}
.brand-logo-full {
width: min(136px, 100%);
max-height: 40px;
}
.brand-logo-mark {
width: 36px;
height: 36px;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
body:not(.auth-required) .brand-text h1 {
font-size: 0;
line-height: 1;
}
body.sidebar-collapsed .brand-text {
display: grid;
justify-items: center;
width: 100%;
height: auto;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
body.sidebar-collapsed .brand-text h1 {
min-height: 38px;
justify-content: center;
}
body.sidebar-collapsed .brand-text .brand-full {
display: none !important;
}
body.sidebar-collapsed .brand-text .brand-short {
display: grid !important;
place-items: center;
width: 36px;
height: 36px;
overflow: visible;
}
body.sidebar-collapsed .brand-logo-mark {
width: 34px;
height: 34px;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
body.theme-dark:not(.auth-required) .brand-full {
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
body.theme-dark:not(.auth-required) .brand-logo-full {
content: url("assets/huiliu-logo-full-polished-dark.png");
opacity: 1;
}
body.theme-dark:not(.auth-required) .brand-logo-mark {
content: url("assets/huiliu-logo-mark-polished-dark.png");
opacity: 1 !important;
}
.account-auth-logo,
.account-form-brand > span,
body.auth-required .account-auth-logo,
body.auth-required .account-form-brand > span,
body:not(.auth-required) .account-modal .account-form-brand > span {
font-size: 0 !important;
color: transparent !important;
background:
url("assets/huiliu-logo-mark-polished-light.png") center / 78% auto no-repeat,
linear-gradient(135deg, #f7fbff, #ecfbff) !important;
border: 1px solid rgba(22, 119, 255, 0.12);
box-shadow: 0 14px 32px rgba(37, 99, 235, 0.16);
}
body.sidebar-collapsed .brand-text,
body.sidebar-collapsed .brand-short,
body.sidebar-collapsed .brand-logo-mark {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
body:not(.auth-required) .brand-block,
body.theme-dark:not(.auth-required) .brand-block,
body.sidebar-collapsed:not(.auth-required) .brand-block,
body.theme-dark.sidebar-collapsed:not(.auth-required) .brand-block {
background: transparent !important;
box-shadow: none !important;
}
body.theme-dark:not(.auth-required) .brand-block {
border-bottom-color: rgba(141, 149, 165, 0.22) !important;
}
body.auth-required .account-form-brand,
body:not(.auth-required) .account-modal .account-form-brand {
grid-template-columns: 42px minmax(0, 1fr) !important;
gap: 12px !important;
}
body.auth-required .account-form-brand > span,
body:not(.auth-required) .account-modal .account-form-brand > span {
display: grid !important;
place-items: center;
width: 42px !important;
height: 42px !important;
border-radius: 12px;
background:
url("assets/huiliu-logo-mark-polished-light.png") center / 78% auto no-repeat,
linear-gradient(135deg, #f7fbff, #ecfbff) !important;
border: 1px solid rgba(22, 119, 255, 0.12);
box-shadow: 0 12px 28px rgba(37, 99, 235, 0.14);
color: transparent !important;
font-size: 0 !important;
}
.account-form-brand > span > img {
display: none !important;
}
@media (max-width: 820px) {
:root {
--shell-padding: 8px;
--layout-padding: 8px;
--layout-gap: 8px;
--panel-padding: 12px;
--control-height: 40px;
--button-height: 40px;
--tab-height: 42px;
--font-ui: 13px;
}
html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
body:not(.auth-required) .topbar,
body:not(.auth-required).sidebar-collapsed .topbar {
position: sticky !important;
top: 0;
left: 0;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none;
z-index: 120;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 6px;
padding: 7px 10px;
border-right: 0;
border-bottom: 1px solid rgba(203, 213, 225, 0.88);
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
backdrop-filter: blur(14px);
overflow: visible;
}
body.theme-dark:not(.auth-required) .topbar,
body.theme-dark:not(.auth-required).sidebar-collapsed .topbar {
border-bottom-color: rgba(141, 149, 165, 0.28);
background: rgba(9, 11, 16, 0.96);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}
body:not(.auth-required) .brand-block {
padding-bottom: 5px;
border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}
body.theme-dark:not(.auth-required) .brand-block {
border-bottom-color: rgba(141, 149, 165, 0.2);
}
body:not(.auth-required) .brand-row,
body:not(.auth-required).sidebar-collapsed .brand-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: center;
}
body:not(.auth-required) .brand-text h1,
body:not(.auth-required).sidebar-collapsed .brand-text h1 {
min-height: 27px;
}
body:not(.auth-required) .brand-logo-full {
width: 102px;
max-height: 28px;
}
body:not(.auth-required) #providerLine {
display: none;
}
body:not(.auth-required) .sidebar-toggle,
body:not(.auth-required).sidebar-collapsed .sidebar-toggle {
min-width: 40px;
width: 40px;
min-height: 34px;
padding: 0;
border-radius: 12px;
font-size: 0;
}
body:not(.auth-required) .sidebar-toggle::before,
body:not(.auth-required).sidebar-collapsed .sidebar-toggle::before {
content: "☰";
font-size: 16px;
line-height: 1;
}
body:not(.auth-required) .module-nav,
body:not(.auth-required).sidebar-collapsed .module-nav {
display: flex !important;
grid-template-columns: none !important;
gap: 8px;
overflow-x: auto;
overflow-y: hidden;
padding: 0 2px 4px;
scroll-snap-type: x proximity;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
body:not(.auth-required) .module-tab,
body:not(.auth-required) .topbar .module-tab,
body:not(.auth-required).sidebar-collapsed .module-tab,
body:not(.auth-required).sidebar-collapsed .module-tab.has-ui-icon {
flex: 0 0 auto;
min-width: 92px;
min-height: 38px;
display: grid;
grid-template-columns: 24px minmax(0, 1fr);
grid-template-rows: 1fr;
align-items: center;
justify-items: start;
gap: 7px;
padding: 6px 9px;
border-radius: 13px;
scroll-snap-align: start;
}
body:not(.auth-required) .module-tab .ui-icon {
width: 20px;
height: 20px;
}
body:not(.auth-required) .module-tab strong,
body:not(.auth-required).sidebar-collapsed .module-tab.has-ui-icon strong {
display: block !important;
font-size: 13px;
line-height: 1.15;
}
body:not(.auth-required) .module-tab span:not(.ui-icon),
body:not(.auth-required).sidebar-collapsed .module-tab span:not(.ui-icon) {
display: none !important;
}
body:not(.auth-required) .topbar .top-actions {
display: flex;
gap: 6px;
margin: 0;
}
body:not(.auth-required) .topbar .state-pill,
body:not(.auth-required) .topbar .icon-button {
flex: 1 1 0;
min-height: 34px;
border-radius: 11px;
font-size: 12px;
}
body:not(.auth-required).sidebar-collapsed .topbar .state-pill,
body:not(.auth-required).sidebar-collapsed .topbar .icon-button {
font-size: 13px;
padding: 7px 8px;
}
body:not(.auth-required).sidebar-collapsed .topbar .state-pill::before,
body:not(.auth-required).sidebar-collapsed .topbar .icon-button::before {
display: none;
content: "";
}
body:not(.auth-required) .layout,
body:not(.auth-required) .module-panel,
body:not(.auth-required).sidebar-collapsed .layout {
width: 100% !important;
margin-left: 0 !important;
padding: 8px !important;
gap: 8px;
grid-template-columns: 1fr !important;
min-height: auto;
}
body:not(.auth-required) .layout > .panel,
body:not(.auth-required) .layout.media-tool-layout .workbench,
body:not(.auth-required) .layout.media-tool-layout .monitor {
min-height: auto;
height: auto;
}
body:not(.auth-required) .layout.media-tool-layout {
height: auto;
overflow: visible;
}
body:not(.auth-required) .panel {
border-radius: 16px;
}
body:not(.auth-required) .workbench,
body:not(.auth-required) .monitor {
overflow: visible;
}
body:not(.auth-required) .tabs {
position: sticky;
top: 0;
z-index: 3;
min-height: 42px;
border-radius: 14px 14px 0 0;
overflow: hidden;
background: #ffffff;
}
body:not(.auth-required) .tab {
min-height: 42px;
padding: 10px 8px;
font-size: 13px;
}
body:not(.auth-required) .tab-panel,
body:not(.auth-required) .layout.media-tool-layout .tool-panel.active {
padding: 12px !important;
}
body:not(.auth-required) .form-grid,
body:not(.auth-required) .options-grid,
body:not(.auth-required) .quick-options,
body:not(.auth-required) .stats-grid,
body:not(.auth-required) .model-category-fields,
body:not(.auth-required) .category-key-row,
body:not(.auth-required) .category-key-add-row {
grid-template-columns: 1fr !important;
}
body:not(.auth-required) input,
body:not(.auth-required) select,
body:not(.auth-required) textarea {
min-height: 40px;
border-radius: 11px;
font-size: 14px;
}
body:not(.auth-required) textarea {
min-height: 146px;
line-height: 1.55;
}
body:not(.auth-required) .drop-zone,
body:not(.auth-required) .upload-box,
body:not(.auth-required) .advanced,
body:not(.auth-required) .file-summary,
body:not(.auth-required) .plan-summary-inline {
border-radius: 14px;
}
body:not(.auth-required) .command-row,
body:not(.auth-required) .command-row.compact,
body:not(.auth-required) .monitor-actions,
body:not(.auth-required) .modal-tools,
body:not(.auth-required) .watermark-template-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
body:not(.auth-required) .command-row > button,
body:not(.auth-required) .command-row > .button-link {
flex: 1 1 128px;
justify-content: center;
}
body:not(.auth-required) .monitor {
padding: 12px;
}
body:not(.auth-required) .monitor-actions {
justify-content: stretch;
}
body:not(.auth-required) .monitor-actions button {
flex: 1 1 0;
}
body:not(.auth-required) .monitor-body,
body:not(.auth-required) .results-split {
grid-template-columns: 1fr !important;
}
body:not(.auth-required) .job-list,
body:not(.auth-required) .gallery,
body:not(.auth-required) .item-table {
max-height: none;
}
body:not(.auth-required) .selected-preview,
body:not(.auth-required) .reference-preview {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body:not(.auth-required) .gallery {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body:not(.auth-required) .light-result {
min-height: 240px;
}
}
body.theme-dark .account-page-role.is-viewing {
background: rgba(180, 35, 24, 0.18);
color: #f7877c;
border-color: rgba(180, 35, 24, 0.45);
}
body.theme-dark .account-page-quick.is-danger {
color: #f7877c;
border-color: rgba(180, 35, 24, 0.45);
}
body.theme-dark .account-page-quick.is-danger:hover {
background: rgba(180, 35, 24, 0.14);
}
.home-root{padding:6px 0 28px;max-width:1200px;margin:0 auto;width:100%}
.home-section{margin-bottom:26px}
.home-sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:12px;flex-wrap:wrap}
.home-sec-title{display:flex;align-items:center;gap:9px;font-size:20px;font-weight:850;color:#102b44;margin:0}
.home-sec-title::before{content:'';width:4px;height:19px;border-radius:3px;background:linear-gradient(180deg,#3b82d6,#2f6db7)}
.home-more{border:0;background:none;color:#2f6db7;font-size:13.5px;font-weight:750;cursor:pointer}
.home-more:hover{color:#255a9c}
.home-gtabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.home-gtab{height:34px;padding:0 16px;border-radius:999px;border:1px solid #dce6f1;background:#fff;color:#43607c;font-weight:650;font-size:13px;cursor:pointer;transition:.14s}
.home-gtab:hover{border-color:#9cc4ec;color:#1f4f7d}
.home-gtab.active{background:linear-gradient(135deg,#3b82d6,#2f6db7);color:#fff;border-color:transparent;box-shadow:0 4px 12px -2px rgba(47,109,183,.5)}
.home-gtabs-row{display:flex;align-items:center;justify-content:flex-start;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.home-gtabs-row .home-gtabs{margin-bottom:0}
.home-search{position:relative;display:flex;align-items:center}
.home-search-ico{position:absolute;left:11px;display:flex;color:#8aa0b8;pointer-events:none}
.home-search-ico svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.home-search input{height:34px;width:220px;max-width:100%;border:1px solid #dce6f1;border-radius:999px;padding:0 14px 0 32px;font-size:13px;background:#fff;color:#33485f;font-family:inherit;outline:none;transition:.14s}
.home-search input:focus{border-color:#9cc4ec;box-shadow:0 0 0 3px rgba(47,109,183,.12)}
.home-recent-grid{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 8px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.home-recent-grid::-webkit-scrollbar{height:8px}
.home-recent-grid::-webkit-scrollbar-thumb{background:#cdd9e6;border-radius:999px}
.home-recent-grid::-webkit-scrollbar-track{background:transparent}
.home-recent-item{position:relative;flex:0 0 134px;width:134px;height:134px;scroll-snap-align:start;border:1px solid #e8eef5;border-radius:14px;overflow:hidden;cursor:pointer;background:#eef3f8;padding:0;transition:transform .16s,box-shadow .16s,border-color .16s}
.home-recent-item:hover{transform:translateY(-3px);box-shadow:0 14px 28px -12px rgba(20,60,90,.28);border-color:#d6e4f2}
.home-recent-img{width:100%;height:100%;object-fit:cover;display:block}
.home-recent-ph{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(135deg,#3b82d6,#2f6db7);color:#fff}
.home-recent-ph-audio{background:linear-gradient(135deg,#14b8a6,#0ea5a4)}
.home-recent-ph svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.home-recent-badge{position:absolute;left:7px;top:7px;background:rgba(8,22,38,.55);color:#fff;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;backdrop-filter:blur(4px)}.home-gallery{display:flex;align-items:flex-start;gap:16px}
.home-gallery-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:16px}
.home-case{margin:0;background:#fff;border:1px solid #e8eef5;border-radius:16px;overflow:hidden;cursor:pointer;transition:transform .18s,box-shadow .18s,border-color .18s;display:block}
.home-case:hover{transform:translateY(-4px);box-shadow:0 18px 36px -12px rgba(20,60,90,.26);border-color:#d6e4f2}
.home-case-prevwrap{position:relative;background:#eef3f8;overflow:hidden;aspect-ratio:1/1}
.home-case-prev{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.home-case:hover .home-case-prev{transform:scale(1.05)}
.home-case-badge{position:absolute;left:9px;top:9px;background:rgba(8,22,38,.5);color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;backdrop-filter:blur(5px);z-index:2}
.home-case-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:rgba(8,22,38,.46);display:grid;place-items:center;z-index:2;pointer-events:none;backdrop-filter:blur(2px);transition:opacity .2s}
.home-case-play svg{width:20px;height:20px;fill:#fff;margin-left:2px}
.home-case:hover .home-case-play{opacity:0}
.home-case-hover{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:9px;padding:12px;background:linear-gradient(180deg,transparent 35%,rgba(8,22,38,.85));opacity:0;transition:opacity .2s;z-index:1}
.home-case:hover .home-case-hover,.home-case:focus-within .home-case-hover{opacity:1}
.home-case-prompt{margin:0;color:#eaf2fb;font-size:11.5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.home-case-fill{align-self:flex-start;border:0;background:#fff;color:#1f4f7d;font-size:12px;font-weight:800;border-radius:9px;padding:6px 14px;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.3)}
.home-case-fill:hover{background:#eaf2fb}
.home-case-title{width:100%;margin:0;border:0;border-radius:0;background:transparent;text-align:left;font-size:13px;font-weight:700;color:#16324c;padding:10px 12px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.home-case button:focus-visible,.home-gtab:focus-visible{outline:2px solid var(--accent,#2f6db7);outline-offset:-3px}
.home-empty{text-align:center;color:#8497ab;padding:46px;font-size:14px}
.home-loadmore-wrap{text-align:center;margin-top:20px}
.home-loadmore{border:1px solid #cfddeb;background:#fff;color:#2f5e88;font-size:14px;font-weight:750;border-radius:12px;padding:11px 34px;cursor:pointer;transition:.15s;box-shadow:0 4px 14px -6px rgba(20,60,90,.2)}
.home-loadmore:hover{border-color:#9cc4ec;background:#f4f9fe;transform:translateY(-1px)}
.home-gallery-sentinel{display:flex;align-items:center;justify-content:center;gap:8px;padding:22px;color:#8497ab;font-size:13px}
.home-gallery-sentinel[hidden]{display:none}
.home-gallery-spin{width:15px;height:15px;border-radius:50%;border:2px solid rgba(47,109,183,.25);border-top-color:#2f6db7;animation:home-gallery-spin .7s linear infinite;flex:none}
@keyframes home-gallery-spin{to{transform:rotate(360deg)}}body.theme-dark .home-gallery-sentinel{color:#9fb2c6}body.theme-dark .home-case{background:rgba(18,28,44,.78);border-color:rgba(126,148,174,.2)}body.theme-dark .home-case-title,body.theme-dark .home-sec-title{color:#eaf2fb}body.theme-dark .home-gtab{background:rgba(18,28,44,.7);border-color:rgba(126,148,174,.24);color:#aebed2}body.theme-dark .home-recent-item{background:rgba(18,28,44,.78);border-color:rgba(126,148,174,.2)}body.theme-dark .home-search input{background:rgba(18,28,44,.7);border-color:rgba(126,148,174,.24);color:#cfe0f0}body.theme-dark .home-loadmore{background:rgba(18,28,44,.78);border-color:rgba(126,148,174,.24);color:#cfe0f0}
@media(prefers-reduced-motion:reduce){.home-case,.home-case-prev,.home-case-hover,.home-recent-item{transition:none}
.home-gallery-spin{animation:none}}
@media (max-width:760px){.home-gallery{gap:12px}
.home-gallery-col{gap:12px}
.home-recent-grid{gap:10px}
.home-recent-item{flex-basis:108px;width:108px;height:108px}
.home-search{flex:1;min-width:160px}
.home-search input{width:100%}}


/* entry:styles.part3.css sha256:18c4e34255acf27953338bcf2143829d875f1575bdf97dcb67bbec972f1bed37 */
@media (max-width: 820px) {
body:not(.auth-required) .layout.workflow-layout,
body:not(.auth-required) .layout.canvas-layout {
padding: 0 !important;
}
body:not(.auth-required) .layout.workflow-layout .workbench,
body:not(.auth-required) .layout.canvas-layout .workbench {
border-radius: 0;
border-left: 0;
border-right: 0;
}
body:not(.auth-required) .layout.workflow-layout .workflow-shell {
display: grid;
grid-template-columns: 1fr;
height: 100%;
min-height: 0;
border-radius: 0;
border-left: 0;
border-right: 0;
}
body:not(.auth-required) .layout.workflow-layout .workflow-main {
min-height: 0;
height: 100%;
border-radius: 0;
}
body:not(.auth-required) .layout.workflow-layout .workflow-main > .workflow-stage-wrap.workflow-lite-wrap {
min-height: 100%;
border-radius: 0;
}
body:not(.auth-required) .layout.workflow-layout .workflow-inspector {
position: absolute;
right: 10px;
bottom: 58px;
left: 10px;
z-index: 25;
height: auto;
max-height: 32dvh;
padding: 12px;
border: 1px solid rgba(203, 213, 225, 0.82);
border-radius: 16px;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}
body.theme-dark:not(.auth-required) .layout.workflow-layout .workflow-inspector {
border-color: rgba(141, 149, 165, 0.3);
background: rgba(11, 14, 20, 0.92);
}
body:not(.auth-required) .layout.workflow-layout .workflow-inspector-body {
max-height: 24dvh;
overflow: auto;
}
body:not(.auth-required) .layout.workflow-layout .workflow-main > .workflow-status-row {
left: 10px;
right: 10px;
bottom: 10px;
max-width: none;
gap: 6px;
}
body:not(.auth-required) .layout.workflow-layout .workflow-main > .workflow-status-row .file-summary {
max-width: 40vw;
padding: 0 10px;
}
body:not(.auth-required) .workflow-minimap {
display: none !important;
}
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-shell,
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-main {
height: 100%;
min-height: 0;
border-radius: 0;
}
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-stage {
min-height: 100%;
}
body:not(.auth-required) .canvas-ai-composer {
position: absolute;
top: auto;
right: 10px;
bottom: 58px;
left: 10px;
width: auto;
max-width: none;
max-height: 46dvh;
overflow: auto;
padding: 12px;
border-radius: 18px;
}
body:not(.auth-required) .canvas-composer-head {
display: none;
}
body:not(.auth-required) .canvas-composer-ref-drop {
min-height: 88px;
grid-template-rows: auto minmax(42px, 1fr);
}
body:not(.auth-required) .canvas-composer-ref-drop > span {
display: none;
}
body:not(.auth-required) .canvas-composer-prompt textarea {
min-height: 112px;
}
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-status-row {
left: 10px;
right: 10px;
bottom: 10px;
max-width: none;
}
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-status-row .file-summary {
max-width: 38vw;
padding: 0 10px;
}
body:not(.auth-required) .layout.canvas-layout .canvas-empty-card,
body:not(.auth-required) .canvas-studio-shell .canvas-empty-card {
width: min(286px, calc(100vw - 72px)) !important;
padding: 18px 16px;
border-radius: 20px;
}
body:not(.auth-required) .layout.canvas-layout .canvas-empty-card > strong,
body:not(.auth-required) .canvas-studio-shell .canvas-empty-card > strong {
font-size: 18px;
line-height: 1.35;
text-wrap: balance;
}
body:not(.auth-required) .layout.canvas-layout .canvas-empty-actions,
body:not(.auth-required) .canvas-studio-shell .canvas-empty-actions {
grid-template-columns: 1fr 1fr;
gap: 7px;
}
body:not(.auth-required) .layout.canvas-layout .canvas-empty-actions button,
body:not(.auth-required) .canvas-studio-shell .canvas-empty-actions button {
min-height: 36px;
border-radius: 12px;
font-size: 12px;
}
}
@media (max-width: 640px) {
body:not(.auth-required) .modal-mask:not([hidden]) {
align-items: stretch;
justify-items: stretch;
padding: 8px;
overflow-y: auto;
}
body:not(.auth-required) .modal-panel:where(:not([data-ui-unmanaged])):not(.feed-detail-panel):not(.admin-account-detail-panel),
body:not(.auth-required) .preview-panel,
body:not(.auth-required) .media-preview-panel,
body:not(.auth-required) .watermark-panel,
body:not(.auth-required) .workflow-project-panel,
body:not(.auth-required) .workflow-media-library-panel,
body:not(.auth-required) .command-palette-panel {
width: 100% !important;
max-width: none !important;
max-height: calc(100dvh - 16px) !important;
border-radius: 18px !important;
overflow: auto;
position: relative;
}
body:not(.auth-required) .modal-head:where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
position: sticky;
top: 0;
z-index: 5;
gap: 8px;
margin: -2px -2px 10px;
padding: 2px 2px 10px;
background: inherit;
border-radius: 14px 14px 0 0;
}
body:not(.auth-required) .preview-tools,
body:not(.auth-required) .media-preview-tools,
body:not(.auth-required) .workflow-media-library-tools,
body:not(.auth-required) .workflow-project-tools,
body:not(.auth-required) .canvas-project-tools {
grid-template-columns: 1fr !important;
display: grid;
}
body:not(.auth-required) .preview-stage,
body:not(.auth-required) .media-preview-stage {
min-height: 260px;
max-height: calc(100dvh - 178px);
overflow: auto;
}
body:not(.auth-required) .modal-panel.media-preview-panel.is-video-preview {
width: 100% !important;
}
body:not(.auth-required) .modal-panel.media-preview-panel.is-video-preview .media-preview-stage {
min-height: 320px;
}
body:not(.auth-required) .media-preview-stage video,
body:not(.auth-required) .preview-stage img {
max-width: 100%;
max-height: calc(100dvh - 220px);
object-fit: contain;
}
body:not(.auth-required) .workflow-media-library-list {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body:not(.auth-required) .workflow-media-library-card {
min-width: 0;
}
body:not(.auth-required) .workflow-media-library-actions {
grid-template-columns: 1fr;
}
body:not(.auth-required) .watermark-layout,
body:not(.auth-required) .watermark-maker-grid,
body:not(.auth-required) .watermark-controls {
grid-template-columns: 1fr !important;
}
body:not(.auth-required) .watermark-stage-wrap {
min-height: 260px;
}
body:not(.auth-required) .admin-account-grid,
body:not(.auth-required) .admin-account-head,
body:not(.auth-required) .admin-account-head-actions,
body:not(.auth-required) .admin-redeem-grid,
body:not(.auth-required) .admin-redeem-row {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 420px) {
:root {
--font-ui: 12px;
}
body:not(.auth-required) .brand-logo-full {
width: 96px;
}
body:not(.auth-required) .module-tab,
body:not(.auth-required) .topbar .module-tab {
min-width: 80px;
grid-template-columns: 20px minmax(0, 1fr);
gap: 6px;
padding: 7px 8px;
}
body:not(.auth-required) .module-tab .ui-icon {
width: 18px;
height: 18px;
}
body:not(.auth-required) .module-tab strong {
font-size: 12px;
}
body:not(.auth-required) .selected-preview,
body:not(.auth-required) .reference-preview,
body:not(.auth-required) .gallery,
body:not(.auth-required) .workflow-media-library-list {
grid-template-columns: 1fr !important;
}
body:not(.auth-required) .infinite-inline-panel-body .infinite-card-fields {
grid-template-columns: 1fr;
}
body:not(.auth-required) .infinite-inline-reference-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 820px) {
body:not(.auth-required) {
--sidebar: 0px;
--mobile-topbar-expanded-offset: 122px;
}
body:not(.auth-required) .topbar,
body:not(.auth-required).sidebar-collapsed .topbar {
position: fixed !important;
inset: auto !important;
top: 0 !important;
left: 0 !important;
z-index: 120;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
padding: 10px 14px !important;
border-right: 0 !important;
border-bottom: 1px solid rgba(203, 213, 225, 0.88);
background: rgba(255, 255, 255, 0.97);
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
overflow: visible !important;
}
body.theme-dark:not(.auth-required) .topbar,
body.theme-dark:not(.auth-required).sidebar-collapsed .topbar {
border-bottom-color: rgba(141, 149, 165, 0.28);
background: rgba(9, 11, 16, 0.96);
}
body:not(.auth-required) .brand-block,
body:not(.auth-required).sidebar-collapsed .brand-block {
width: 100%;
padding-bottom: 7px;
border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}
body:not(.auth-required) .brand-row,
body:not(.auth-required).sidebar-collapsed .brand-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
justify-items: stretch;
}
body:not(.auth-required) .brand-text,
body:not(.auth-required).sidebar-collapsed .brand-text {
display: block;
width: auto;
height: auto;
min-width: 0;
padding: 0;
text-align: left;
place-items: initial;
}
body:not(.auth-required).sidebar-collapsed .brand-text h1 {
display: block !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
place-items: initial !important;
font-size: 19px;
line-height: 1.15;
}
body:not(.auth-required) .brand-full,
body:not(.auth-required).sidebar-collapsed .brand-full {
display: inline !important;
}
body:not(.auth-required) .brand-short,
body:not(.auth-required).sidebar-collapsed .brand-short {
display: none !important;
}
body:not(.auth-required) .brand-logo-full,
body:not(.auth-required).sidebar-collapsed .brand-logo-full {
width: 118px;
max-height: 32px;
}
body:not(.auth-required) .sidebar-toggle,
body:not(.auth-required).sidebar-collapsed .sidebar-toggle,
body:not(.auth-required) .sidebar-toggle.has-ui-icon,
body:not(.auth-required).sidebar-collapsed .sidebar-toggle.has-ui-icon {
display: inline-grid;
place-items: center;
position: absolute;
top: 10px;
right: 14px;
z-index: 3;
width: 40px;
min-width: 40px;
max-width: 40px;
height: 40px;
min-height: 40px;
padding: 0;
border-radius: 12px;
font-size: 0;
}
body:not(.auth-required) .sidebar-toggle .ui-icon,
body:not(.auth-required).sidebar-collapsed .sidebar-toggle .ui-icon {
width: 18px;
height: 18px;
margin: 0;
}
body:not(.auth-required) .sidebar-toggle-label,
body:not(.auth-required).sidebar-collapsed .sidebar-toggle-label,
body:not(.auth-required) .sidebar-toggle::before,
body:not(.auth-required).sidebar-collapsed .sidebar-toggle::before {
display: none !important;
content: none !important;
}
body:not(.auth-required) .module-nav,
body:not(.auth-required) .topbar .module-nav,
body:not(.auth-required).sidebar-collapsed .module-nav,
body:not(.auth-required).sidebar-collapsed .topbar .module-nav {
display: flex !important;
grid-template-columns: none !important;
gap: 8px;
width: 100%;
overflow-x: auto;
overflow-y: hidden;
padding: 0 2px 5px;
scroll-snap-type: x proximity;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
body:not(.auth-required) .module-tab,
body:not(.auth-required) .topbar .module-tab,
body:not(.auth-required) .module-tab.has-ui-icon,
body:not(.auth-required) .topbar .module-tab.has-ui-icon {
flex: 0 0 auto;
width: auto;
min-width: 96px;
max-width: 142px;
height: 44px;
min-height: 44px;
max-height: 44px;
display: grid;
grid-template-columns: 28px minmax(0, 1fr);
grid-template-rows: 1fr;
align-items: center;
justify-items: start;
gap: 8px;
padding: 6px 10px;
border-radius: 14px;
text-align: left;
scroll-snap-align: start;
}
body:not(.auth-required) .module-tab.has-ui-icon > .ui-icon,
body:not(.auth-required) .topbar .module-tab.has-ui-icon > .ui-icon {
width: 28px;
height: 28px;
padding: 6px;
border-radius: 10px;
}
body:not(.auth-required) .module-tab strong,
body:not(.auth-required) .topbar .module-tab strong {
display: block !important;
font-size: 13px;
line-height: 1.15;
}
body:not(.auth-required) .module-tab span:not(.ui-icon),
body:not(.auth-required) .topbar .module-tab span:not(.ui-icon) {
display: none !important;
}
body:not(.auth-required).sidebar-collapsed .module-tab,
body:not(.auth-required).sidebar-collapsed .topbar .module-tab,
body:not(.auth-required).sidebar-collapsed .module-tab.has-ui-icon,
body:not(.auth-required).sidebar-collapsed .topbar .module-tab.has-ui-icon {
width: 42px !important;
min-width: 42px !important;
max-width: 42px !important;
height: 42px !important;
min-height: 42px !important;
max-height: 42px !important;
grid-template-columns: 1fr !important;
gap: 0;
justify-items: center;
padding: 0 !important;
border-radius: 13px;
}
body:not(.auth-required).sidebar-collapsed .module-tab strong,
body:not(.auth-required).sidebar-collapsed .topbar .module-tab strong,
body:not(.auth-required).sidebar-collapsed .module-tab span:not(.ui-icon),
body:not(.auth-required).sidebar-collapsed .topbar .module-tab span:not(.ui-icon),
body:not(.auth-required).sidebar-collapsed .module-tab::before,
body:not(.auth-required).sidebar-collapsed .topbar .module-tab::before {
display: none !important;
content: none !important;
}
body:not(.auth-required).sidebar-collapsed .module-tab.has-ui-icon > .ui-icon,
body:not(.auth-required).sidebar-collapsed .topbar .module-tab.has-ui-icon > .ui-icon {
width: 32px;
height: 32px;
padding: 7px;
border-radius: 11px;
}
body:not(.auth-required) .topbar .top-actions,
body:not(.auth-required).sidebar-collapsed .topbar .top-actions {
display: flex;
gap: 7px;
align-items: center;
width: 100%;
margin: 0;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 2px;
}
body:not(.auth-required).sidebar-collapsed .account-bar {
display: flex !important;
flex: 0 0 auto;
width: auto !important;
justify-items: initial;
gap: 0;
}
body:not(.auth-required) .topbar .state-pill,
body:not(.auth-required) .topbar .icon-button {
flex: 0 0 auto;
width: auto !important;
min-width: 82px;
min-height: 36px;
padding: 0 12px;
border-radius: 12px;
}
body:not(.auth-required) #themeToggleBtn,
body:not(.auth-required) #refreshJobsBtn,
body:not(.auth-required) .topbar .sidebar-theme,
body:not(.auth-required) .topbar .sidebar-refresh {
width: auto !important;
min-width: 82px;
max-width: none;
}
body:not(.auth-required).sidebar-collapsed .topbar .state-pill,
body:not(.auth-required).sidebar-collapsed .topbar .icon-button,
body:not(.auth-required).sidebar-collapsed .account-summary,
body:not(.auth-required).sidebar-collapsed #themeToggleBtn,
body:not(.auth-required).sidebar-collapsed #refreshJobsBtn {
width: 42px !important;
min-width: 42px !important;
max-width: 42px !important;
height: 42px !important;
min-height: 42px !important;
padding: 0 !important;
border-radius: 13px;
font-size: 0;
}
body:not(.auth-required).sidebar-collapsed .topbar .state-pill::before,
body:not(.auth-required).sidebar-collapsed .topbar .icon-button::before,
body:not(.auth-required).sidebar-collapsed #themeToggleBtn::after,
body:not(.auth-required).sidebar-collapsed #refreshJobsBtn::after {
display: none !important;
content: none !important;
}
body:not(.auth-required) .layout,
body:not(.auth-required).sidebar-collapsed .layout,
body:not(.auth-required) .module-panel,
body:not(.auth-required).sidebar-collapsed .module-panel {
width: 100% !important;
margin-left: 0 !important;
margin-top: var(--mobile-topbar-offset) !important;
padding-top: 4px !important;
grid-template-columns: 1fr !important;
}
}
@media (max-width: 720px) {
body:not(.auth-required) .account-modal:not([hidden]) {
position: fixed;
inset: 0;
width: 100vw;
min-height: 100dvh;
display: grid;
place-items: center !important;
align-items: center !important;
justify-items: center !important;
align-content: center;
padding: 16px;
overflow-x: hidden;
overflow-y: auto;
}
body:not(.auth-required) .account-modal .account-auth-shell {
width: min(420px, calc(100vw - 24px));
min-height: auto;
margin: auto;
}
body:not(.auth-required) .account-modal .account-modal-card {
max-height: calc(100dvh - 32px);
overflow-x: hidden;
overflow-y: auto;
padding: 24px 22px;
border-radius: 22px;
}
body:not(.auth-required) .account-modal .account-form-brand {
grid-template-columns: 42px minmax(0, 1fr) !important;
gap: 12px !important;
}
body:not(.auth-required) .account-modal .account-form-brand > span {
display: grid !important;
}
}
@media (max-width: 820px) {
body:not(.auth-required) #appLayout.tool-layout .workbench > .tabs,
body:not(.auth-required) #appLayout.workflow-layout .workbench > .tabs,
body:not(.auth-required) #appLayout.canvas-layout .workbench > .tabs,
body:not(.auth-required) #appLayout.settings-layout .workbench > .tabs {
display: none !important;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .workbench > .tabs {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 0 !important;
min-height: 32px !important;
border-radius: 12px 12px 0 0;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .workbench > .tabs .tab {
min-height: 32px !important;
padding: 5px 8px !important;
font-size: 12px !important;
line-height: 1.15;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .tab-panel,
body:not(.auth-required) .layout.media-tool-layout .tool-panel.active {
padding: 10px !important;
}
body:not(.auth-required) .workbench {
padding-top: 4px !important;
}
body:not(.auth-required) #textTab > .form-grid:first-of-type,
body:not(.auth-required) #imageTab > .form-grid:first-of-type,
body:not(.auth-required) #videoToolTab .tool-card > .form-grid:first-of-type,
body:not(.auth-required) #speechToolPanel .tool-card > .form-grid:first-of-type,
body:not(.auth-required) #musicToolPanel .tool-card > .form-grid:first-of-type {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(86px, 0.34fr) !important;
gap: 8px !important;
align-items: end !important;
margin-bottom: 10px !important;
}
body:not(.auth-required) #textTab > .form-grid:first-of-type label,
body:not(.auth-required) #imageTab > .form-grid:first-of-type label,
body:not(.auth-required) #videoToolTab .tool-card > .form-grid:first-of-type label,
body:not(.auth-required) #speechToolPanel .tool-card > .form-grid:first-of-type label,
body:not(.auth-required) #musicToolPanel .tool-card > .form-grid:first-of-type label {
gap: 4px !important;
font-size: 12px !important;
line-height: 1.2;
}
body:not(.auth-required) #textTab > .form-grid:first-of-type input,
body:not(.auth-required) #imageTab > .form-grid:first-of-type input,
body:not(.auth-required) #videoToolTab .tool-card > .form-grid:first-of-type input,
body:not(.auth-required) #speechToolPanel .tool-card > .form-grid:first-of-type input,
body:not(.auth-required) #musicToolPanel .tool-card > .form-grid:first-of-type input {
min-height: 36px !important;
height: 36px;
padding: 0 10px !important;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .quick-options,
body:not(.auth-required) .layout.media-tool-layout .quick-options,
body:not(.auth-required) .layout.media-tool-layout #videoToolTab .quick-options,
body:not(.auth-required) .layout.media-tool-layout #audioToolTab .quick-options {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .quick-options label,
body:not(.auth-required) .layout.media-tool-layout .quick-options label {
gap: 4px !important;
font-size: 12px !important;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .quick-options select,
body:not(.auth-required) .layout.media-tool-layout .quick-options select,
body:not(.auth-required) .layout.media-tool-layout .quick-options input {
min-height: 36px !important;
height: 36px;
padding: 0 10px !important;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .upload-box,
body:not(.auth-required) .layout.media-tool-layout .upload-box {
padding: 10px !important;
margin-bottom: 10px !important;
border-radius: 14px;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .drop-zone,
body:not(.auth-required) .layout.media-tool-layout .drop-zone {
gap: 7px !important;
padding: 10px !important;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .drop-zone p,
body:not(.auth-required) .layout.media-tool-layout .drop-zone p {
margin: 0 !important;
line-height: 1.35;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .file-summary,
body:not(.auth-required) .layout.media-tool-layout .file-summary {
min-height: 34px !important;
padding: 8px 10px !important;
margin-top: 8px !important;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) textarea,
body:not(.auth-required) .layout.media-tool-layout textarea {
min-height: 128px !important;
padding: 11px 12px !important;
line-height: 1.45 !important;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .advanced,
body:not(.auth-required) .layout.media-tool-layout .advanced {
margin-top: 10px !important;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .advanced summary,
body:not(.auth-required) .layout.media-tool-layout .advanced summary {
min-height: 36px !important;
padding: 8px 10px !important;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .command-row,
body:not(.auth-required) .layout.media-tool-layout .command-row {
gap: 8px !important;
margin-top: 10px !important;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .command-row > button,
body:not(.auth-required) .layout.media-tool-layout .command-row > button,
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .command-row > .button-link,
body:not(.auth-required) .layout.media-tool-layout .command-row > .button-link {
min-height: 38px !important;
padding: 0 12px !important;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .plan-summary-inline,
body:not(.auth-required) .layout.media-tool-layout .plan-summary-inline {
min-height: 38px !important;
padding: 8px 10px !important;
}
body:not(.auth-required) .layout.media-tool-layout .tool-mode-tabs {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 0 !important;
min-height: 32px !important;
margin: 0 0 10px !important;
padding: 0 !important;
overflow: hidden !important;
border: 1px solid var(--border) !important;
border-radius: 12px 12px 0 0 !important;
background: var(--surface-2, #f9fafc) !important;
}
body:not(.auth-required) .layout.media-tool-layout .tool-mode-tab {
min-height: 32px !important;
padding: 5px 8px !important;
border: 0 !important;
border-right: 1px solid var(--border) !important;
border-radius: 0 !important;
background: var(--surface-2, #f9fafc) !important;
color: var(--muted) !important;
font-size: 12px !important;
line-height: 1.15 !important;
box-shadow: none !important;
}
body:not(.auth-required) .layout.media-tool-layout .tool-mode-tab:last-child {
border-right: 0 !important;
}
body:not(.auth-required) .layout.media-tool-layout .tool-mode-tab.active {
background: var(--surface, #ffffff) !important;
color: var(--text) !important;
font-weight: 800 !important;
box-shadow: inset 0 -3px 0 var(--accent) !important;
}
body:not(.auth-required) .layout.media-tool-layout .tool-page-head {
min-height: 40px !important;
padding: 0 10px !important;
margin-bottom: 10px !important;
}
}
@media (max-width: 430px) {
body:not(.auth-required) #textTab > .form-grid:first-of-type,
body:not(.auth-required) #imageTab > .form-grid:first-of-type,
body:not(.auth-required) #videoToolTab .tool-card > .form-grid:first-of-type,
body:not(.auth-required) #speechToolPanel .tool-card > .form-grid:first-of-type,
body:not(.auth-required) #musicToolPanel .tool-card > .form-grid:first-of-type {
grid-template-columns: minmax(0, 1fr) 82px !important;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .quick-options,
body:not(.auth-required) .layout.media-tool-layout .quick-options,
body:not(.auth-required) .layout.media-tool-layout #videoToolTab .quick-options,
body:not(.auth-required) .layout.media-tool-layout #audioToolTab .quick-options {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) textarea,
body:not(.auth-required) .layout.media-tool-layout textarea {
min-height: 116px !important;
}
}
@media (max-width: 820px) {
body.theme-dark:not(.auth-required) .brand-text,
body.theme-dark:not(.auth-required).sidebar-collapsed .brand-text,
body.theme-dark:not(.auth-required) .brand-text h1,
body.theme-dark:not(.auth-required).sidebar-collapsed .brand-text h1,
body.theme-dark:not(.auth-required) .brand-full,
body.theme-dark:not(.auth-required).sidebar-collapsed .brand-full {
min-height: 0 !important;
height: auto !important;
overflow: visible !important;
}
body.theme-dark:not(.auth-required) .brand-text h1,
body.theme-dark:not(.auth-required).sidebar-collapsed .brand-text h1 {
display: flex !important;
align-items: center;
justify-content: flex-start !important;
line-height: 1 !important;
text-align: left !important;
}
body.theme-dark:not(.auth-required) .brand-full,
body.theme-dark:not(.auth-required).sidebar-collapsed .brand-full {
display: inline-flex !important;
align-items: center;
margin-right: auto !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
}
.account-summary.account-summary-points {
gap: 6px;
}
.account-summary.account-summary-points .account-summary-text {
font-variant-numeric: tabular-nums;
font-weight: 800;
font-size: 13.5px;
letter-spacing: 0.01em;
}
.account-points-icon {
display: inline-grid;
place-items: center;
flex: 0 0 auto;
width: 18px;
height: 18px;
border-radius: 0;
color: #0b7cff;
background: transparent;
border: 0;
box-shadow: none;
filter: drop-shadow(0 2px 6px rgba(11, 124, 255, 0.28));
line-height: 0;
}
.account-points-icon svg {
display: block;
width: 16px;
height: 16px;
fill: currentColor;
stroke: none;
}
body.theme-dark:not(.auth-required) .account-points-icon {
color: #66c3ff;
filter: drop-shadow(0 2px 7px rgba(102, 195, 255, 0.28));
}
@media (max-width: 820px) {
body:not(.auth-required) .brand-block,
body:not(.auth-required).sidebar-collapsed .brand-block {
min-height: 42px;
padding-right: min(196px, calc(100vw - 166px));
}
body:not(.auth-required) .topbar .top-actions,
body:not(.auth-required).sidebar-collapsed .topbar .top-actions {
position: absolute;
top: 10px;
right: 62px;
z-index: 2;
display: flex !important;
width: auto !important;
max-width: calc(100vw - 176px);
gap: 6px;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
body:not(.auth-required) .topbar .account-bar,
body:not(.auth-required).sidebar-collapsed .topbar .account-bar {
display: flex !important;
flex: 0 0 auto;
align-items: center;
gap: 6px;
width: auto !important;
overflow: visible !important;
}
body:not(.auth-required) #accountRegisterBtn {
display: none !important;
}
body:not(.auth-required) .topbar .account-action,
body:not(.auth-required) .topbar #themeToggleBtn,
body:not(.auth-required) .topbar #refreshJobsBtn,
body:not(.auth-required).sidebar-collapsed .topbar .account-action,
body:not(.auth-required).sidebar-collapsed .topbar #themeToggleBtn,
body:not(.auth-required).sidebar-collapsed .topbar #refreshJobsBtn {
display: inline-grid !important;
place-items: center;
flex: 0 0 auto;
width: 38px !important;
min-width: 38px !important;
max-width: 38px !important;
height: 38px !important;
min-height: 38px !important;
padding: 0 !important;
border-radius: 12px !important;
font-size: 0 !important;
}
body:not(.auth-required) .topbar .account-action .sidebar-toggle-label,
body:not(.auth-required) .topbar #themeToggleBtn .sidebar-toggle-label,
body:not(.auth-required) .topbar #refreshJobsBtn .sidebar-toggle-label,
body:not(.auth-required).sidebar-collapsed .topbar .account-action .sidebar-toggle-label,
body:not(.auth-required).sidebar-collapsed .topbar #themeToggleBtn .sidebar-toggle-label,
body:not(.auth-required).sidebar-collapsed .topbar #refreshJobsBtn .sidebar-toggle-label {
display: none !important;
}
body:not(.auth-required) .topbar .account-action .ui-icon,
body:not(.auth-required) .topbar #themeToggleBtn .ui-icon,
body:not(.auth-required) .topbar #refreshJobsBtn .ui-icon,
body:not(.auth-required).sidebar-collapsed .topbar .account-action .ui-icon,
body:not(.auth-required).sidebar-collapsed .topbar #themeToggleBtn .ui-icon,
body:not(.auth-required).sidebar-collapsed .topbar #refreshJobsBtn .ui-icon {
display: inline-grid !important;
width: 17px !important;
height: 17px !important;
margin: 0 !important;
}
body:not(.sidebar-collapsed):not(.auth-required) .topbar .account-summary.account-summary-points {
display: inline-flex !important;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: auto !important;
min-width: 68px !important;
max-width: 92px !important;
height: 38px !important;
min-height: 38px !important;
padding: 0 9px !important;
border-radius: 12px !important;
font-size: 13px !important;
line-height: 1 !important;
}
body:not(.sidebar-collapsed):not(.auth-required) .topbar .account-summary.account-summary-points .account-summary-text {
display: inline !important;
max-width: 54px;
overflow: hidden;
text-overflow: ellipsis;
}
body:not(.sidebar-collapsed):not(.auth-required) .topbar .account-summary.account-summary-points .account-points-icon {
display: inline-grid !important;
}
body:not(.auth-required) .topbar [hidden],
body:not(.auth-required).sidebar-collapsed .topbar [hidden] {
display: none !important;
}
}
@media (max-width: 820px) {
body:not(.auth-required) {
--mobile-topbar-expanded-offset: 112px;
}
body:not(.auth-required) .module-panel,
body:not(.auth-required) .layout,
body:not(.auth-required).sidebar-collapsed .module-panel,
body:not(.auth-required).sidebar-collapsed .layout {
margin-top: var(--mobile-topbar-offset) !important;
padding: 2px 8px 8px !important;
gap: 8px !important;
}
body:not(.auth-required) .layout > .workbench,
body:not(.auth-required) .layout.media-tool-layout .workbench {
padding: 0 !important;
overflow: visible !important;
}
body:not(.auth-required) .layout > .panel,
body:not(.auth-required) .layout.media-tool-layout .workbench,
body:not(.auth-required) .layout.media-tool-layout .monitor {
min-height: auto !important;
height: auto !important;
}
body:not(.auth-required) .tabs:where(:not([data-ui-unmanaged] *)) {
position: static !important;
top: auto !important;
height: 32px !important;
min-height: 32px !important;
max-height: 32px !important;
padding: 0 !important;
border-radius: 14px 14px 0 0 !important;
overflow: hidden !important;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .workbench > .tabs {
height: 32px !important;
min-height: 32px !important;
max-height: 32px !important;
padding: 0 !important;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .workbench > .tabs .tab,
body:not(.auth-required) .layout.media-tool-layout .tool-mode-tab {
min-height: 32px !important;
height: 32px !important;
padding: 4px 8px !important;
font-size: 12px !important;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .tab-panel,
body:not(.auth-required) .layout.media-tool-layout .tool-panel.active {
padding: 10px !important;
}
body:not(.auth-required) .layout.media-tool-layout .tool-mode-tabs {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 0 !important;
height: 32px !important;
min-height: 32px !important;
max-height: 32px !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid var(--border) !important;
border-bottom: 0 !important;
border-radius: 14px 14px 0 0 !important;
background: #f9fafc !important;
overflow: hidden !important;
}
body:not(.auth-required) .layout.media-tool-layout .tool-mode-tab {
border: 0 !important;
border-right: 1px solid var(--border) !important;
border-radius: 0 !important;
background: #f9fafc !important;
color: var(--muted) !important;
box-shadow: none !important;
}
body:not(.auth-required) .layout.media-tool-layout .tool-mode-tab:last-child {
border-right: 0 !important;
}
body:not(.auth-required) .layout.media-tool-layout .tool-mode-tab.active {
background: #ffffff !important;
color: var(--text) !important;
font-weight: 800 !important;
box-shadow: inset 0 -3px 0 var(--accent) !important;
}
body:not(.auth-required) #textTab > .form-grid:first-of-type,
body:not(.auth-required) #imageTab > .form-grid:first-of-type,
body:not(.auth-required) #videoToolTab .tool-card > .form-grid:first-of-type,
body:not(.auth-required) #speechToolPanel .tool-card > .form-grid:first-of-type,
body:not(.auth-required) #musicToolPanel .tool-card > .form-grid:first-of-type {
grid-template-columns: minmax(0, 1fr) minmax(78px, 0.34fr) !important;
gap: 8px !important;
margin-bottom: 8px !important;
}
body:not(.auth-required) .upload-box {
padding: 10px !important;
margin-bottom: 10px !important;
}
body:not(.auth-required) .drop-zone {
padding: 10px !important;
gap: 7px !important;
}
body:not(.auth-required) .drop-zone .command-row.compact {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
width: 100%;
}
body:not(.auth-required) #mainDropZone .command-row.compact {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body:not(.auth-required) #mainDropZone .command-row.compact .danger {
grid-column: 1 / -1;
}
body:not(.auth-required) .quick-options,
body:not(.auth-required) .layout.media-tool-layout .quick-options,
body:not(.auth-required) .layout.media-tool-layout #videoToolTab .quick-options,
body:not(.auth-required) .layout.media-tool-layout #audioToolTab .quick-options,
body:not(.auth-required) .layout.media-tool-layout #audioToolTab .music-options,
body:not(.auth-required) .advanced .options-grid,
body:not(.auth-required) .layout.media-tool-layout .advanced .options-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
body:not(.auth-required) .quick-options label,
body:not(.auth-required) .advanced .options-grid label,
body:not(.auth-required) .layout.media-tool-layout .quick-options label,
body:not(.auth-required) .layout.media-tool-layout .advanced .options-grid label {
min-width: 0 !important;
gap: 5px !important;
font-size: 12px !important;
line-height: 1.2 !important;
}
body:not(.auth-required) select,
body:not(.auth-required) input {
min-height: 36px;
}
body:not(.auth-required) .advanced {
margin: 10px 0 !important;
}
body:not(.auth-required) .advanced summary {
min-height: 36px !important;
padding: 8px 10px !important;
}
body:not(.auth-required) .advanced .options-grid label:has(textarea),
body:not(.auth-required) .layout.media-tool-layout .advanced .options-grid label:has(textarea) {
grid-column: 1 / -1;
}
body:not(.auth-required) .tool-page-head {
min-height: 36px !important;
padding: 0 10px !important;
margin-bottom: 8px !important;
}
}
@media (max-width: 430px) {
body:not(.auth-required) #textTab > .form-grid:first-of-type,
body:not(.auth-required) #imageTab > .form-grid:first-of-type,
body:not(.auth-required) #videoToolTab .tool-card > .form-grid:first-of-type,
body:not(.auth-required) #speechToolPanel .tool-card > .form-grid:first-of-type,
body:not(.auth-required) #musicToolPanel .tool-card > .form-grid:first-of-type {
grid-template-columns: minmax(0, 1fr) 76px !important;
}
}
@media (max-width: 820px) {
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout),
body:not(.auth-required) #appLayout.media-tool-layout {
display: flex !important;
grid-template-columns: none !important;
align-items: stretch !important;
height: calc(100dvh - var(--mobile-topbar-offset, 112px) - 10px) !important;
min-height: 0 !important;
overflow: hidden !important;
scrollbar-width: none;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout)::-webkit-scrollbar,
body:not(.auth-required) #appLayout.media-tool-layout::-webkit-scrollbar {
display: none;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) > .workbench,
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) > .monitor,
body:not(.auth-required) #appLayout.media-tool-layout > .workbench,
body:not(.auth-required) #appLayout.media-tool-layout > .monitor {
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
min-height: 0 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) > .monitor,
body:not(.auth-required) #appLayout.media-tool-layout > .monitor {
display: block !important;
padding: 10px !important;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) > .workbench,
body:not(.auth-required) #appLayout.media-tool-layout > .workbench {
padding: 0 !important;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .tab-panel,
body:not(.auth-required) #appLayout.media-tool-layout .tool-panel.active {
min-height: auto !important;
}
}
.mobile-select-mask {
position: fixed;
inset: 0;
z-index: var(--z-select-mask);
display: grid;
align-items: end;
background: transparent; 
}
.mobile-select-mask[hidden] {
display: none !important;
}
.mobile-select-sheet {
width: 100%;
max-height: min(70dvh, 520px);
display: grid;
grid-template-rows: auto minmax(0, 1fr);
border-radius: 20px 20px 0 0;
border: 1px solid rgba(203, 213, 225, 0.94);
background: #ffffff;
box-shadow: 0 -20px 48px rgba(15, 23, 42, 0.18);
transform: translateY(18px);
opacity: 0;
overflow: hidden;
}
.mobile-select-mask.open .mobile-select-sheet {
animation: mobileSelectSheetIn 0.18s ease both;
}
.mobile-select-mask.closing .mobile-select-sheet {
animation: mobileSelectSheetOut 0.16s ease both;
}
@keyframes mobileSelectSheetIn {
from { transform: translateY(18px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes mobileSelectSheetOut {
from { transform: translateY(0); opacity: 1; }
to { transform: translateY(18px); opacity: 0; }
}
.mobile-select-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px 10px;
border-bottom: 1px solid rgba(226, 232, 240, 0.92);
}
.mobile-select-head strong {
color: var(--text);
font-size: 15px;
}
.mobile-select-close {
min-height: 32px;
padding: 0 12px;
}
.mobile-select-options {
display: grid;
gap: 7px;
padding: 10px 12px calc(14px + env(safe-area-inset-bottom));
overflow: auto;
}
.mobile-select-options.mobile-select-ratio-pair { grid-template-columns: 1fr 1fr; }
.mobile-select-options.mobile-select-ratio .mobile-select-option {
display: grid;
grid-template-columns: 17px minmax(0, 1fr) auto;
align-items: center;
}
.mobile-select-options.mobile-select-ratio-pair .mobile-select-option.ratio-span { grid-column: 1 / -1; }
.mobile-select-option {
justify-content: space-between;
min-height: 42px;
padding: 0 12px;
border-radius: 12px;
border-color: #d8e4f1;
background: #f8fbff;
color: var(--text);
font-weight: 760;
text-align: left;
}
.mobile-select-option.mobile-select-model-option {
display: flex;
align-items: center;
gap: 8px;
padding: 0 8px;
justify-content: flex-start; 
overflow: hidden;
}
.mobile-select-option-main {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 7px;
flex: 1 1 auto;
width: min(100%, 268px);
max-width: 268px;
min-width: 0;
}
.mobile-select-option-main > span:last-child {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mobile-select-option-main .model-logo {
width: 18px;
height: 18px;
border-radius: 6px;
}
.mobile-select-option small {
color: #255a9c;
font-size: 11px;
font-weight: 800;
}
.mobile-model-success-badge {
margin-left: auto;
}
.mobile-select-current { flex: 0 0 auto; }
.mobile-select-option.active {
border-color: rgba(47, 109, 183, 0.46);
background: #eaf2fb;
color: #1d4a83;
}
.mobile-select-option:disabled {
opacity: 0.42;
}
body.theme-dark:not(.auth-required) .mobile-select-sheet {
border-color: rgba(141, 149, 165, 0.34);
background: #101a2b;
box-shadow: 0 -20px 54px rgba(0, 0, 0, 0.38);
}
body.theme-dark:not(.auth-required) .mobile-select-head {
border-bottom-color: rgba(141, 149, 165, 0.28);
}
body.theme-dark:not(.auth-required) .mobile-select-option {
border-color: rgba(141, 149, 165, 0.32);
background: #142033;
color: #e5edf7;
}
body.theme-dark:not(.auth-required) .mobile-select-option.active {
border-color: rgba(90, 166, 232, 0.48);
background: rgba(47, 109, 183, 0.18);
color: #dceafc;
}
@media (max-width: 720px) {
body:not(.auth-required) .account-usage-panel {
width: min(100vw - 10px, 430px) !important;
max-height: calc(100dvh - 14px) !important;
padding: 14px !important;
}
body:not(.auth-required) .account-usage-summary {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
padding: 0 !important;
margin-bottom: 8px !important;
}
body:not(.auth-required) .account-usage-summary div {
min-height: 30px !important;
padding: 5px 9px !important;
border-radius: 999px !important;
}
body:not(.auth-required) .account-usage-summary strong {
font-size: 13px !important;
}
body:not(.auth-required) .account-usage-tab {
min-height: 32px !important;
padding: 6px 7px !important;
font-size: 12px !important;
}
body:not(.auth-required) .account-usage-tools {
grid-template-columns: 1fr !important;
gap: 7px !important;
margin-bottom: 8px !important;
}
body:not(.auth-required) .admin-account-list {
max-height: none;
}
body:not(.auth-required) .account-usage-filter {
width: 100%;
min-width: 0;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
body:not(.auth-required) .account-usage-filter button {
min-height: 30px !important;
padding: 5px 4px !important;
font-size: 12px !important;
}
body:not(.auth-required) .account-usage-table-wrap {
border-radius: 11px !important;
}
body:not(.auth-required) .account-usage-table {
min-width: 0 !important;
font-size: 11px !important;
}
body:not(.auth-required) .account-usage-table th,
body:not(.auth-required) .account-usage-table td {
padding: 7px 6px !important;
}
body:not(.auth-required) .account-usage-table th:nth-child(2),
body:not(.auth-required) .account-usage-table td:nth-child(2) {
display: none;
}
body:not(.auth-required) .account-usage-table th:nth-child(4),
body:not(.auth-required) .account-usage-table td:nth-child(4) {
display: none;
}
body:not(.auth-required) .account-usage-table th:nth-child(1),
body:not(.auth-required) .account-usage-table td:nth-child(1) {
width: 96px;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .advanced .options-grid,
body:not(.auth-required) .layout.media-tool-layout .advanced .options-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
align-items: start !important;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .advanced .options-grid label,
body:not(.auth-required) .layout.media-tool-layout .advanced .options-grid label {
min-width: 0 !important;
gap: 5px !important;
font-size: 12px !important;
line-height: 1.2 !important;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .advanced .options-grid label:has(textarea),
body:not(.auth-required) .layout.media-tool-layout .advanced .options-grid label:has(textarea) {
grid-column: 1 / -1;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .advanced .options-grid input,
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .advanced .options-grid select,
body:not(.auth-required) .layout.media-tool-layout .advanced .options-grid input,
body:not(.auth-required) .layout.media-tool-layout .advanced .options-grid select {
width: 100% !important;
min-height: 36px !important;
height: 36px !important;
padding: 0 9px !important;
font-size: 13px !important;
}
}
body:not(.auth-required) .canvas-board-row label:has(#canvasToolbarNote) {
display: none !important;
}
body:not(.auth-required) .layout.workflow-layout,
body:not(.auth-required) .layout.canvas-layout {
min-width: 0 !important;
}
body:not(.auth-required) .layout.workflow-layout .workbench,
body:not(.auth-required) .layout.canvas-layout .workbench,
body:not(.auth-required) .workflow-shell,
body:not(.auth-required) .infinite-canvas-shell,
body:not(.auth-required) .workflow-main,
body:not(.auth-required) .infinite-canvas-main {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
@media (min-width: 821px) {
body:not(.auth-required) .layout.workflow-layout,
body:not(.auth-required) .layout.canvas-layout {
transition: none !important;
}
body:not(.auth-required).layout-canvas .topbar,
body:not(.auth-required).layout-workflow .topbar {
transition: none !important;
}
}
@media (max-width: 640px) {
body:not(.auth-required) .modal-mask:not([hidden]) {
align-items: center !important;
justify-items: center !important;
position: fixed !important;
inset: 0 !important;
padding: 6px !important;
}
body:not(.auth-required) .modal-panel:where(:not([data-ui-unmanaged])):not(.feed-detail-panel):not(.admin-account-detail-panel),
body:not(.auth-required) .workflow-project-panel,
body:not(.auth-required) .workflow-media-library-panel,
body:not(.auth-required) .command-palette-panel,
body:not(.auth-required) .watermark-picker-panel,
body:not(.auth-required) .watermark-panel,
body:not(.auth-required) .account-usage-panel,
body:not(.auth-required) .canvas-image-edit-panel,
body:not(.auth-required) .canvas-image-crop-panel,
body:not(.auth-required) .canvas-image-split-panel,
body:not(.auth-required) .canvas-video-edit-panel,
body:not(.auth-required) .panorama-preview-panel {
width: min(100%, calc(100vw - 12px)) !important;
max-width: calc(100vw - 12px) !important;
max-height: calc(100dvh - 12px) !important;
padding: 12px !important;
border-radius: 18px !important;
overflow: auto !important;
}
body:not(.auth-required) .modal-head:where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
align-items: start !important;
gap: 8px !important;
margin-bottom: 8px !important;
padding-bottom: 8px !important;
}
body:not(.auth-required) .modal-head h2 {
font-size: 15px !important;
line-height: 1.25 !important;
}
body:not(.auth-required) .modal-head p,
body:not(.auth-required) .workflow-project-status {
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 11px !important;
line-height: 1.35 !important;
}
body:not(.auth-required) .modal-head .command-row,
body:not(.auth-required) .modal-head .modal-close-row {
flex: 0 0 auto;
}
body:not(.auth-required) .workflow-project-tools,
body:not(.auth-required) .canvas-project-tools,
body:not(.auth-required) .workflow-media-library-tools,
body:not(.auth-required) .account-usage-tools {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 7px !important;
align-items: center !important;
}
body:not(.auth-required) #workflowProjectSearch,
body:not(.auth-required) #canvasProjectSearch,
body:not(.auth-required) #workflowMediaLibrarySearch,
body:not(.auth-required) #accountUsageSearch {
grid-column: 1 / -1 !important;
}
body:not(.auth-required) .workflow-project-tools button,
body:not(.auth-required) .canvas-project-tools button,
body:not(.auth-required) .workflow-media-library-tools button,
body:not(.auth-required) .workflow-media-library-tools select,
body:not(.auth-required) .account-usage-tools button,
body:not(.auth-required) .account-usage-tools select {
min-height: 32px !important;
height: 32px !important;
padding: 0 9px !important;
border-radius: 10px !important;
font-size: 12px !important;
}
body:not(.auth-required) .workflow-project-list,
body:not(.auth-required) .canvas-project-list,
body:not(.auth-required) .case-list {
max-height: calc(100dvh - 150px) !important;
overflow: auto !important;
gap: 8px !important;
padding-right: 2px !important;
}
body:not(.auth-required) .workflow-project-card {
padding: 9px !important;
border-radius: 14px !important;
gap: 8px !important;
}
body:not(.auth-required) .workflow-project-card p,
body:not(.auth-required) .workflow-project-card small {
font-size: 11px !important;
line-height: 1.35 !important;
}
body:not(.auth-required) .workflow-project-actions,
body:not(.auth-required) .canvas-project-actions {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 5px !important;
}
body:not(.auth-required) .workflow-project-actions button,
body:not(.auth-required) .canvas-project-actions button {
min-height: 28px !important;
padding: 0 6px !important;
border-radius: 9px !important;
font-size: 11px !important;
}
body:not(.auth-required) .canvas-project-preview {
width: 100% !important;
height: 92px !important;
min-height: 92px !important;
border-radius: 11px !important;
}
body:not(.auth-required) .workflow-media-library-list {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
column-gap: 8px !important;
max-height: calc(100dvh - 150px) !important;
overflow: auto !important;
padding: 0 2px 0 0 !important;
}
body:not(.auth-required) .workflow-media-library-card {
min-height: 0 !important;
border-radius: 14px !important;
}
body:not(.auth-required) .workflow-media-library-preview {
min-height: 0 !important;
height: auto !important;
aspect-ratio: var(--workflow-media-preview-ratio, 1 / 1) !important;
border-radius: 12px 12px 0 0 !important;
}
body:not(.auth-required) .workflow-media-library-meta {
padding: 7px 8px 8px !important;
}
body:not(.auth-required) .workflow-media-library-title {
gap: 5px !important;
}
body:not(.auth-required) .workflow-media-library-title strong {
font-size: 11px !important;
line-height: 1.25 !important;
}
body:not(.auth-required) .workflow-media-library-title span {
font-size: 10px !important;
padding: 2px 5px !important;
}
body:not(.auth-required) .workflow-media-library-meta p,
body:not(.auth-required) .workflow-media-library-meta small:not(.workflow-media-library-review-owner) {
display: none !important;
}
body:not(.auth-required) .workflow-media-library-actions {
grid-template-columns: 1fr !important;
gap: 4px !important;
margin-top: 6px !important;
}
body:not(.auth-required) .workflow-media-library-actions button {
min-height: 24px !important;
height: 24px !important;
padding: 0 6px !important;
border-radius: 8px !important;
font-size: 10px !important;
}
body:not(.auth-required) .case-row {
grid-template-columns: minmax(0, 1fr) 62px 62px !important;
gap: 5px !important;
}
body:not(.auth-required) .case-select {
grid-template-columns: 42px minmax(0, 1fr) !important;
min-height: 54px !important;
padding: 6px !important;
border-radius: 12px !important;
}
body:not(.auth-required) .case-preview {
width: 42px !important;
height: 42px !important;
border-radius: 9px !important;
}
body:not(.auth-required) .case-info p {
display: none !important;
}
body:not(.auth-required) .case-row > button {
min-height: 32px !important;
padding: 0 6px !important;
font-size: 11px !important;
}
body:not(.auth-required) .canvas-image-edit-stage,
body:not(.auth-required) .canvas-image-crop-stage,
body:not(.auth-required) .canvas-video-edit-stage,
body:not(.auth-required) .panorama-preview-stage {
min-height: min(46dvh, 320px) !important;
max-height: min(48dvh, 340px) !important;
}
body:not(.auth-required) .canvas-image-edit-layout,
body:not(.auth-required) .canvas-image-crop-layout,
body:not(.auth-required) .canvas-video-edit-layout {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
}
@media (max-width: 340px) {
body:not(.auth-required) .workflow-media-library-list {
grid-template-columns: 1fr !important;
}
body:not(.auth-required) .workflow-project-actions,
body:not(.auth-required) .canvas-project-actions {
grid-template-columns: 1fr !important;
}
}
body:not(.auth-required) {
font-size: var(--font-ui);
}
body:not(.auth-required) h1,
body:not(.auth-required) h2:where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) h3,
body:not(.auth-required) strong,
body:not(.auth-required) label:where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) button:not([data-ui-compact-control]):where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) input,
body:not(.auth-required) select,
body:not(.auth-required) textarea {
letter-spacing: 0;
}
body:not(.auth-required) h2:where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) .tool-page-head h2:where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) .monitor-title h2:where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) .text-chat-brand strong:where(:not([data-ui-unmanaged] *)) {
font-size: var(--font-title) !important;
line-height: 1.25 !important;
}
body:not(.auth-required) label:where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) .field-title:where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) .drop-zone strong:where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) .monitor-title strong:where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) .tool-page-head strong:where(:not([data-ui-unmanaged] *)) {
font-size: var(--font-label) !important;
}
body:not(.auth-required) input:where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) select:where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) textarea:where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) button:where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) .button-link:where(:not([data-ui-unmanaged] *)) {
font-size: var(--font-ui) !important;
}
body:not(.auth-required) input:not([type="range"]):where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) select:where(:not([data-ui-unmanaged] *)) {
min-height: var(--control-height) !important;
height: var(--control-height) !important;
padding: 0 8px !important;
border-radius: 9px !important;
}
body:not(.auth-required) textarea:where(:not([data-ui-unmanaged] *)) {
min-height: 104px !important;
padding: 9px 10px !important;
border-radius: 10px !important;
line-height: 1.45 !important;
}
body:not(.auth-required) button:not([data-ui-compact-control]):not(.gen-icon-btn):not(.hl-float-btn):not(.hl-send-btn):not(.hl-like-pill):not(.hl-cta-primary):not(.hl-submit-btn):not(.hl-mod-chip):not(.hl-tool-btn):not(.hl-ref-del):not(.hl-cta-icon):not(.flow-mini-btn):not(.project-icon-btn):not(.canvas-edit-branch):not(.feed-detail-album-thumb):not(.preview-canvas-tool):not(.text-chat-delete-btn):not(.workflow-media-library-select):not(.app-more-id):not(.app-more-item):not(.account-page-row):not(.account-page-stat):not(.account-page-edit):not(.account-page-quick):not(.account-page-tab):not(.account-command-btn):not(.account-content-action):not(.account-resource-card):not(.account-card):not(.account-card-open):not(.account-card-more):not(.account-resource-more):not(.account-mini-item):not(.account-proj-pill):not(.account-page-project-open):not(.account-page-project-more):not(.account-page-projects-more):not(.infinite-card-run):not(.infinite-inline-reference-add):not(.infinite-inline-reference-pick):not(.infinite-inline-prompt-expand):not(.ob-rail-step):not(.hl-stage):where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) .button-link:not([data-ui-compact-control]):where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) .primary:not([data-ui-compact-control]):not(.infinite-card-run):where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) .secondary:not([data-ui-compact-control]):where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) .danger:not([data-ui-compact-control]):not(.gen-icon-btn):not(.hl-float-btn):not(.hl-send-btn):not(.hl-like-pill):not(.hl-cta-primary):not(.hl-submit-btn):not(.hl-mod-chip):not(.hl-tool-btn):not(.hl-ref-del):not(.hl-cta-icon):not(.flow-mini-btn):not(.project-icon-btn):not(.canvas-edit-branch):not(.feed-detail-album-thumb):not(.hl-stage):where(:not([data-ui-unmanaged] *)) {
min-height: var(--button-height) !important;
padding: 0 10px !important;
border-radius: 9px !important;
gap: 5px !important;
}
body:not(.auth-required) .icon-button,
body:not(.auth-required) .sidebar-toggle,
body:not(.auth-required) .account-action {
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
min-height: 32px !important;
padding: 0 !important;
}
body:not(.auth-required) .tabs:where(:not([data-ui-unmanaged] *)) {
min-height: var(--tab-height) !important;
height: var(--tab-height) !important;
border-radius: var(--radius-sm) !important;
}
body:not(.auth-required) .tabs .tab:where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) .tool-mode-tab:where(:not([data-ui-unmanaged] *)) {
min-height: var(--tab-height) !important;
height: var(--tab-height) !important;
padding: 0 8px !important;
font-size: var(--font-ui) !important;
border-radius: var(--radius-xs) !important;
}
body:not(.auth-required) .layout:not(.canvas-layout):not(.workflow-layout) .tab-panel:not(.account-page-panel),
body:not(.auth-required) .tool-panel.active,
body:not(.auth-required) .tool-card,
body:not(.auth-required) .monitor,
body:not(.auth-required) .layout:not(.canvas-layout):not(.workflow-layout) .workbench {
padding: var(--panel-padding) !important;
border-radius: 12px !important;
}
body:not(.auth-required) .form-grid,
body:not(.auth-required) .quick-options,
body:not(.auth-required) .options-grid,
body:not(.auth-required) .tool-grid {
gap: var(--form-gap) !important;
}
body:not(.auth-required) .quick-options,
body:not(.auth-required) .layout.media-tool-layout #videoToolTab .quick-options,
body:not(.auth-required) .layout.media-tool-layout #audioToolTab .quick-options,
body:not(.auth-required) .layout.media-tool-layout #audioToolTab .music-options {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body:not(.auth-required) .quick-options label,
body:not(.auth-required) .advanced .options-grid label,
body:not(.auth-required) .layout.media-tool-layout .quick-options label,
body:not(.auth-required) .layout.media-tool-layout .advanced .options-grid label {
min-width: 0 !important;
gap: 4px !important;
}
body:not(.auth-required) .upload-box,
body:not(.auth-required) .advanced,
body:not(.auth-required) .tool-card {
padding: 10px !important;
margin-bottom: 8px !important;
border-radius: 12px !important;
}
body:not(.auth-required) .drop-zone {
padding: 10px !important;
gap: 6px !important;
border-radius: 12px !important;
}
body:not(.auth-required) .drop-zone p:where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) .tool-page-head p:where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) .file-summary:where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) .plan-summary-inline:where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) .task-meta:where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) small:where(:not([data-ui-unmanaged] *)) {
font-size: 10.5px !important;
line-height: 1.35 !important;
}
body:not(.auth-required) .file-summary,
body:not(.auth-required) .plan-summary-inline {
min-height: 28px !important;
padding: 6px 8px !important;
border-radius: 9px !important;
}
body:not(.auth-required) .command-row {
gap: 6px !important;
}
body:not(.auth-required) .advanced summary {
min-height: 30px !important;
padding: 0 8px !important;
border-radius: 9px !important;
}
body:not(.auth-required) .selected-media-list,
body:not(.auth-required) .selected-thumbs,
body:not(.auth-required) .workflow-dropped-images {
gap: 6px !important;
}
body:not(.auth-required) .selected-thumb,
body:not(.auth-required) .workflow-dropped-images .selected-thumb {
width: 58px !important;
min-height: 68px !important;
border-radius: 9px !important;
}
body:not(.auth-required) .selected-thumb img,
body:not(.auth-required) .selected-thumb video,
body:not(.auth-required) .workflow-dropped-images .selected-thumb img,
body:not(.auth-required) .workflow-dropped-images .selected-thumb video {
height: 52px !important;
border-radius: 8px 8px 0 0 !important;
}
body:not(.auth-required) .status-grid,
body:not(.auth-required) .task-stats-grid {
gap: 8px !important;
}
body:not(.auth-required) .stat-card,
body:not(.auth-required) .monitor-stat {
min-height: 54px !important;
padding: 10px !important;
border-radius: 10px !important;
}
body:not(.auth-required) .stat-card strong,
body:not(.auth-required) .monitor-stat strong {
font-size: 19px !important;
line-height: 1 !important;
}
body:not(.auth-required) .task-list {
gap: 5px !important;
}
body:not(.auth-required) .task-row,
body:not(.auth-required) .task-list-row {
min-height: 38px !important;
padding: 9px 11px !important;
border-radius: 9px !important;
font-size: 12px !important;
}
body:not(.auth-required) .task-detail,
body:not(.auth-required) .result-detail,
body:not(.auth-required) .media-result-detail {
padding: 8px !important;
border-radius: 10px !important;
}
body:not(.auth-required) .media-preview-card,
body:not(.auth-required) .result-media-card {
border-radius: 10px !important;
}
body:not(.auth-required) .modal-panel:where(:not([data-ui-unmanaged])):not(.poser-studio-panel):not(.admin-account-detail-panel),
body:not(.auth-required) .workflow-project-panel,
body:not(.auth-required) .workflow-media-library-panel,
body:not(.auth-required) .command-palette-panel,
body:not(.auth-required) .watermark-picker-panel,
body:not(.auth-required) .watermark-panel,
body:not(.auth-required) .account-usage-panel,
body:not(.auth-required) .canvas-image-edit-panel,
body:not(.auth-required) .canvas-image-crop-panel,
body:not(.auth-required) .canvas-image-split-panel,
body:not(.auth-required) .canvas-video-edit-panel,
body:not(.auth-required) .panorama-preview-panel {
padding-block: var(--ui-panel-padding-block, 18px) !important;
padding-inline: var(--ui-panel-padding-inline, 18px) !important;
border-radius: 16px !important;
}
body:not(.auth-required) .modal-head:where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
gap: 10px !important;
margin-bottom: 12px !important;
padding-bottom: 12px !important;
}
body:not(.auth-required) .account-usage-summary {
gap: 8px !important;
}
body:not(.auth-required) .account-usage-summary div {
min-height: 30px !important;
padding: 5px 9px !important;
border-radius: 999px !important;
}
body:not(.auth-required) .account-usage-summary strong {
font-size: 13px !important;
}
body:not(.auth-required) .account-usage-tab {
min-height: 30px !important;
padding: 0 8px !important;
border-radius: 9px !important;
}
body:not(.auth-required) .workflow-media-library-list {
column-gap: 10px !important;
}
body:not(.auth-required) .workflow-media-library-preview {
height: auto !important;
min-height: 0 !important;
aspect-ratio: var(--workflow-media-preview-ratio, 1 / 1) !important;
}
body:not(.auth-required) .workflow-media-library-meta {
padding: 8px !important;
gap: 5px !important;
}
body:not(.auth-required) .workflow-media-library-actions {
gap: 5px !important;
}
body:not(.auth-required) .workflow-media-library-actions button {
min-height: 27px !important;
height: 27px !important;
font-size: 10px !important;
}
@media (min-width: 821px) {
body:not(.auth-required) .workbench > .tabs {
width: 100% !important;
max-width: 100% !important;
height: 38px !important;
min-height: 38px !important;
max-height: 38px !important;
padding: 4px !important;
box-sizing: border-box !important;
align-items: stretch !important;
overflow: hidden !important;
}
body:not(.auth-required) .workbench > .tabs .tab {
height: 30px !important;
min-height: 30px !important;
max-height: 30px !important;
padding: 0 8px !important;
box-sizing: border-box !important;
align-self: stretch !important;
}
body:not(.auth-required) .topbar {
position: fixed !important;
inset: 0 auto 0 0 !important;
width: var(--sidebar) !important;
height: 100dvh !important;
min-height: 100dvh !important;
max-height: 100dvh !important;
padding: 14px !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 12px !important;
border-right: 1px solid var(--border) !important;
border-bottom: 0 !important;
overflow: hidden !important;
}
body:not(.auth-required) .brand-block {
gap: 8px !important;
width: 100% !important;
min-height: 0 !important;
padding: 0 0 10px 0 !important;
border-bottom: 1px solid var(--border) !important;
}
body:not(.auth-required) .brand-row {
width: 100% !important;
display: flex !important;
grid-template-columns: none !important;
align-items: center !important;
justify-content: space-between !important;
justify-items: stretch !important;
gap: 8px !important;
}
body:not(.auth-required) .brand-text {
width: auto !important;
height: auto !important;
min-width: 0 !important;
padding: 0 !important;
display: block !important;
overflow: visible !important;
}
body:not(.auth-required) .brand-logo-full {
max-width: 126px !important;
max-height: 34px !important;
}
body:not(.auth-required) .topbar p {
font-size: 10.5px !important;
line-height: 1.2 !important;
}
body:not(.auth-required) .module-nav {
width: 100% !important;
display: flex !important;
flex-direction: column !important;
grid-template-columns: none !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 8px !important;
overflow: visible !important;
padding: 0 !important;
scroll-snap-type: none !important;
}
body:not(.auth-required) .module-tab,
body:not(.auth-required) .topbar .module-tab,
body:not(.auth-required) .module-tab.has-ui-icon,
body:not(.auth-required) .topbar .module-tab.has-ui-icon {
width: 100% !important;
max-width: none !important;
flex: 0 0 auto !important;
min-height: 44px !important;
height: 44px !important;
max-height: 44px !important;
padding: 7px 9px !important;
border-radius: 11px !important;
gap: 7px !important;
display: grid !important;
grid-template-columns: 28px minmax(0, 1fr) !important;
align-items: center !important;
justify-items: start !important;
overflow: hidden !important;
}
body:not(.auth-required) .module-tab .ui-icon,
body:not(.auth-required) .topbar .module-tab .ui-icon,
body:not(.auth-required) .module-tab.has-ui-icon > .ui-icon,
body:not(.auth-required) .topbar .module-tab.has-ui-icon > .ui-icon {
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
min-height: 28px !important;
padding: 6px !important;
border-radius: 10px !important;
}
body:not(.auth-required) .module-tab strong {
width: 100% !important;
min-width: 0 !important;
font-size: 12.5px !important;
line-height: 1.1 !important;
font-weight: 700 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
body:not(.auth-required) .module-tab span:not(.ui-icon) {
width: 100% !important;
min-width: 0 !important;
font-size: 9.5px !important;
line-height: 1.25 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
body:not(.auth-required) .top-actions,
body:not(.auth-required) .account-bar {
gap: 6px !important;
}
body:not(.auth-required):not(.sidebar-collapsed) .top-actions {
width: 100% !important;
margin-top: auto !important;
display: grid !important;
grid-template-columns: 1fr !important;
align-items: stretch !important;
justify-items: stretch !important;
gap: 7px !important;
overflow: visible !important;
padding: 0 !important;
}
body:not(.auth-required):not(.sidebar-collapsed) .account-bar {
width: 100% !important;
display: grid !important;
grid-template-columns: 1fr !important;
justify-items: stretch !important;
align-items: center !important;
gap: 6px !important;
overflow: visible !important;
padding: 0 !important;
}
body:not(.auth-required):not(.sidebar-collapsed) .account-bar .account-summary,
body:not(.auth-required):not(.sidebar-collapsed) .account-bar .account-action {
width: 100%;
justify-content: center;
}
body:not(.auth-required):not(.sidebar-collapsed) .topbar #accountSummary.account-summary.account-summary-points {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: 32px !important;
min-height: 32px !important;
padding: 0 10px !important;
justify-self: start !important;
border-radius: 10px !important;
}
body:not(.auth-required):not(.sidebar-collapsed) .topbar #themeToggleBtn,
body:not(.auth-required):not(.sidebar-collapsed) .topbar #refreshJobsBtn {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: 32px !important;
min-height: 32px !important;
padding: 0 10px !important;
display: grid !important;
grid-template-columns: 16px auto !important;
justify-content: center !important;
align-items: center !important;
gap: 7px !important;
font-size: 11px !important;
line-height: 1 !important;
border-radius: 10px !important;
overflow: hidden !important;
}
body:not(.auth-required):not(.sidebar-collapsed) .topbar #themeToggleBtn .sidebar-toggle-label,
body:not(.auth-required):not(.sidebar-collapsed) .topbar #refreshJobsBtn .sidebar-toggle-label {
display: inline-block !important;
min-width: 0 !important;
max-width: 64px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
font-size: 11px !important;
line-height: 1 !important;
}
body:not(.auth-required):not(.sidebar-collapsed) .topbar #themeToggleBtn .ui-icon,
body:not(.auth-required):not(.sidebar-collapsed) .topbar #refreshJobsBtn .ui-icon {
width: 15px !important;
height: 15px !important;
min-width: 15px !important;
min-height: 15px !important;
margin: 0 !important;
}
body.sidebar-collapsed:not(.auth-required) .topbar,
body:not(.auth-required).sidebar-collapsed .topbar {
width: var(--sidebar-collapsed) !important;
height: 100dvh !important;
min-height: 100dvh !important;
max-height: 100dvh !important;
padding: 9px 6px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 9px !important;
overflow: hidden !important;
transition:
width var(--sidebar-motion),
padding var(--sidebar-motion),
gap var(--sidebar-motion),
border-color var(--sidebar-motion),
box-shadow var(--sidebar-motion) !important;
}
body.sidebar-collapsed:not(.auth-required) .brand-block,
body:not(.auth-required).sidebar-collapsed .brand-block {
width: 100% !important;
min-height: 0 !important;
padding: 0 0 9px 0 !important;
border-bottom: 1px solid var(--border) !important;
display: grid !important;
justify-items: center !important;
gap: 7px !important;
}
body.sidebar-collapsed:not(.auth-required) .brand-row,
body:not(.auth-required).sidebar-collapsed .brand-row {
width: 100% !important;
display: grid !important;
grid-template-columns: 1fr !important;
justify-items: center !important;
align-items: center !important;
gap: 8px !important;
}
body.sidebar-collapsed:not(.auth-required) .brand-full,
body.sidebar-collapsed:not(.auth-required) .brand-text p,
body:not(.auth-required).sidebar-collapsed .brand-full,
body:not(.auth-required).sidebar-collapsed .brand-text p {
display: none !important;
}
body.sidebar-collapsed:not(.auth-required) .module-tab strong,
body.sidebar-collapsed:not(.auth-required) .module-tab span:not(.ui-icon),
body:not(.auth-required).sidebar-collapsed .module-tab strong,
body:not(.auth-required).sidebar-collapsed .module-tab span:not(.ui-icon) {
display: block !important;
grid-column: 1 !important;
grid-row: 1 !important;
width: 0 !important;
max-width: 0 !important;
opacity: 0 !important;
overflow: hidden !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translateX(-5px) !important;
}
body.sidebar-collapsed:not(.auth-required) .brand-short,
body:not(.auth-required).sidebar-collapsed .brand-short {
display: inline-grid !important;
place-items: center !important;
}
body.sidebar-collapsed:not(.auth-required) .brand-text,
body:not(.auth-required).sidebar-collapsed .brand-text {
width: 38px !important;
height: 32px !important;
padding: 0 !important;
display: grid !important;
place-items: center !important;
overflow: visible !important;
}
body.sidebar-collapsed:not(.auth-required) .brand-logo-mark,
body:not(.auth-required).sidebar-collapsed .brand-logo-mark {
width: 31px !important;
height: 28px !important;
object-fit: contain !important;
}
body.sidebar-collapsed:not(.auth-required) .topbar .account-summary .account-summary-text,
body:not(.auth-required).sidebar-collapsed .topbar .account-summary .account-summary-text {
display: none !important;
}
body.sidebar-collapsed:not(.auth-required) .topbar .account-summary > :is(.account-member-crown, .account-points-icon),
body:not(.auth-required).sidebar-collapsed .topbar .account-summary > :is(.account-member-crown, .account-points-icon) {
grid-area: 1 / 1 !important;
}
body.sidebar-collapsed:not(.auth-required) .topbar .account-summary > .account-member-crown,
body:not(.auth-required).sidebar-collapsed .topbar .account-summary > .account-member-crown {
align-self: start !important;
justify-self: center !important;
z-index: 1;
width: 13px;
height: 13px;
transform: translateY(-2px);
}
body.sidebar-collapsed:not(.auth-required) .topbar .account-summary > .account-member-crown svg,
body:not(.auth-required).sidebar-collapsed .topbar .account-summary > .account-member-crown svg {
width: 13px;
height: 13px;
}
body.sidebar-collapsed:not(.auth-required) .sidebar-toggle,
body.sidebar-collapsed:not(.auth-required) .module-tab,
body.sidebar-collapsed:not(.auth-required) .module-tab.has-ui-icon,
body.sidebar-collapsed:not(.auth-required) .topbar .module-tab,
body.sidebar-collapsed:not(.auth-required) .topbar .module-tab.has-ui-icon,
body.sidebar-collapsed:not(.auth-required) .topbar .icon-button,
body.sidebar-collapsed:not(.auth-required) .topbar .account-summary,
body:not(.auth-required).sidebar-collapsed .sidebar-toggle,
body:not(.auth-required).sidebar-collapsed .module-tab,
body:not(.auth-required).sidebar-collapsed .module-tab.has-ui-icon,
body:not(.auth-required).sidebar-collapsed .topbar .module-tab,
body:not(.auth-required).sidebar-collapsed .topbar .module-tab.has-ui-icon,
body:not(.auth-required).sidebar-collapsed .topbar .icon-button,
body:not(.auth-required).sidebar-collapsed .topbar .account-summary {
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
min-height: 38px !important;
max-width: 38px !important;
max-height: 38px !important;
padding: 0 !important;
gap: 0 !important;
column-gap: 0 !important;
row-gap: 0 !important;
border-radius: 12px !important;
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: 1fr !important;
place-items: center !important;
justify-content: center !important;
align-content: center !important;
overflow: visible !important;
border: 0 solid transparent !important;
background: transparent !important;
color: #31546b !important;
box-shadow: none !important;
transition:
width var(--sidebar-motion),
height var(--sidebar-motion),
min-width var(--sidebar-motion),
min-height var(--sidebar-motion),
color 180ms ease,
background-color 180ms ease,
border-color var(--sidebar-motion),
box-shadow 180ms ease,
transform 180ms ease !important;
}
body.sidebar-collapsed:not(.auth-required) .module-tab.active,
body.sidebar-collapsed:not(.auth-required) .topbar .module-tab.active,
body.sidebar-collapsed:not(.auth-required) .module-tab.has-ui-icon.active,
body.sidebar-collapsed:not(.auth-required) .topbar .module-tab.has-ui-icon.active,
body:not(.auth-required).sidebar-collapsed .module-tab.active,
body:not(.auth-required).sidebar-collapsed .topbar .module-tab.active,
body:not(.auth-required).sidebar-collapsed .module-tab.has-ui-icon.active,
body:not(.auth-required).sidebar-collapsed .topbar .module-tab.has-ui-icon.active,
body.sidebar-collapsed:not(.auth-required) .topbar .account-summary.account-summary-points,
body:not(.auth-required).sidebar-collapsed .topbar .account-summary.account-summary-points {
border-color: transparent !important;
background: transparent !important;
color: var(--account-summary-color, #255a9c) !important;
box-shadow: none !important;
}
body.theme-dark.sidebar-collapsed:not(.auth-required) .sidebar-toggle,
body.theme-dark.sidebar-collapsed:not(.auth-required) .module-tab,
body.theme-dark.sidebar-collapsed:not(.auth-required) .module-tab.has-ui-icon,
body.theme-dark.sidebar-collapsed:not(.auth-required) .topbar .module-tab,
body.theme-dark.sidebar-collapsed:not(.auth-required) .topbar .module-tab.has-ui-icon,
body.theme-dark.sidebar-collapsed:not(.auth-required) .topbar .icon-button,
body.theme-dark.sidebar-collapsed:not(.auth-required) .topbar .account-summary,
body.theme-dark:not(.auth-required).sidebar-collapsed .sidebar-toggle,
body.theme-dark:not(.auth-required).sidebar-collapsed .module-tab,
body.theme-dark:not(.auth-required).sidebar-collapsed .module-tab.has-ui-icon,
body.theme-dark:not(.auth-required).sidebar-collapsed .topbar .module-tab,
body.theme-dark:not(.auth-required).sidebar-collapsed .topbar .module-tab.has-ui-icon,
body.theme-dark:not(.auth-required).sidebar-collapsed .topbar .icon-button,
body.theme-dark:not(.auth-required).sidebar-collapsed .topbar .account-summary {
border-color: transparent !important;
background: transparent !important;
color: var(--sidebar-icon-color) !important;
box-shadow: none !important;
}
body.theme-dark.sidebar-collapsed:not(.auth-required) .module-tab.active,
body.theme-dark.sidebar-collapsed:not(.auth-required) .topbar .module-tab.active,
body.theme-dark:not(.auth-required).sidebar-collapsed .module-tab.active,
body.theme-dark:not(.auth-required).sidebar-collapsed .topbar .module-tab.active,
body.theme-dark.sidebar-collapsed:not(.auth-required) .topbar .account-summary.account-summary-points,
body.theme-dark:not(.auth-required).sidebar-collapsed .topbar .account-summary.account-summary-points {
border-color: transparent !important;
background: transparent !important;
color: var(--account-summary-color, var(--sidebar-icon-active-color)) !important;
box-shadow: none !important;
}
body.sidebar-collapsed:not(.auth-required) .module-nav,
body:not(.auth-required).sidebar-collapsed .module-nav,
body.sidebar-collapsed:not(.auth-required) .top-actions,
body:not(.auth-required).sidebar-collapsed .top-actions,
body.sidebar-collapsed:not(.auth-required) .account-bar,
body:not(.auth-required).sidebar-collapsed .account-bar {
width: 100% !important;
align-items: center !important;
justify-items: center !important;
}
body.sidebar-collapsed:not(.auth-required) .module-nav,
body:not(.auth-required).sidebar-collapsed .module-nav {
display: flex !important;
flex-direction: column !important;
grid-template-columns: none !important;
grid-template-rows: none !important;
gap: 7px !important;
overflow: visible !important;
padding: 0 !important;
}
body.sidebar-collapsed:not(.auth-required) .top-actions,
body:not(.auth-required).sidebar-collapsed .top-actions,
body.sidebar-collapsed:not(.auth-required) .account-bar,
body:not(.auth-required).sidebar-collapsed .account-bar {
position: static !important;
display: flex !important;
flex-direction: column !important;
gap: 7px !important;
overflow: visible !important;
padding: 0 !important;
margin-top: auto !important;
}
body.sidebar-collapsed:not(.auth-required) .module-tab::before,
body:not(.auth-required).sidebar-collapsed .module-tab::before {
display: none !important;
content: none !important;
}
body.sidebar-collapsed:not(.auth-required) .module-tab.has-ui-icon > .ui-icon,
body:not(.auth-required).sidebar-collapsed .module-tab.has-ui-icon > .ui-icon,
body.sidebar-collapsed:not(.auth-required) .topbar .module-tab.has-ui-icon > .ui-icon,
body:not(.auth-required).sidebar-collapsed .topbar .module-tab.has-ui-icon > .ui-icon,
body.sidebar-collapsed:not(.auth-required) .topbar .icon-button .ui-icon,
body:not(.auth-required).sidebar-collapsed .topbar .icon-button .ui-icon,
body.sidebar-collapsed:not(.auth-required) .topbar #accountSummary.account-summary.has-ui-icon:not(.account-summary-points) > .ui-icon,
body:not(.auth-required).sidebar-collapsed .topbar #accountSummary.account-summary.has-ui-icon:not(.account-summary-points) > .ui-icon,
body.sidebar-collapsed:not(.auth-required) .sidebar-toggle .ui-icon,
body:not(.auth-required).sidebar-collapsed .sidebar-toggle .ui-icon {
grid-row: 1 !important;
grid-column: 1 !important;
align-self: center !important;
justify-self: center !important;
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
min-height: 30px !important;
max-width: 30px !important;
max-height: 30px !important;
padding: 7px !important;
margin: 0 !important;
border: 1px solid var(--sidebar-icon-border, #dbe4ef) !important;
border-radius: 10px !important;
background: var(--sidebar-icon-bg, linear-gradient(180deg, #f8fafc, #eef4fb)) !important;
color: var(--sidebar-icon-color, #31546b) !important;
display: grid !important;
place-items: center !important;
line-height: 0 !important;
overflow: visible !important;
transform-origin: center center !important;
box-shadow: var(--sidebar-icon-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.85)) !important;
transition:
width var(--sidebar-motion),
height var(--sidebar-motion),
background-color 180ms ease,
border-color var(--sidebar-motion),
color 180ms ease,
box-shadow 180ms ease,
transform 180ms ease !important;
}
body.sidebar-collapsed:not(.auth-required) .module-tab.active.has-ui-icon > .ui-icon,
body.sidebar-collapsed:not(.auth-required) .topbar .module-tab.active.has-ui-icon > .ui-icon,
body:not(.auth-required).sidebar-collapsed .module-tab.active.has-ui-icon > .ui-icon,
body:not(.auth-required).sidebar-collapsed .topbar .module-tab.active.has-ui-icon > .ui-icon,
body.sidebar-collapsed:not(.auth-required) .topbar .account-summary.account-summary-points .ui-icon,
body:not(.auth-required).sidebar-collapsed .topbar .account-summary.account-summary-points .ui-icon {
border-color: var(--sidebar-icon-active-border, rgba(47, 109, 183, 0.3)) !important;
background: var(--sidebar-icon-active-bg, linear-gradient(180deg, #e3ecf7, #d7e2f3)) !important;
color: var(--sidebar-icon-active-color, var(--accent-strong)) !important;
box-shadow: var(--sidebar-icon-active-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.85)) !important;
}
body.sidebar-collapsed:not(.auth-required) .topbar .account-summary.account-summary-points .account-points-icon,
body:not(.auth-required).sidebar-collapsed .topbar .account-summary.account-summary-points .account-points-icon {
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
min-height: 30px !important;
max-width: 30px !important;
max-height: 30px !important;
margin: 0 !important;
border-radius: 10px !important;
border: 1px solid var(--sidebar-icon-active-border, rgba(47, 109, 183, 0.3)) !important;
background: var(--sidebar-icon-active-bg, linear-gradient(180deg, #e3ecf7, #d7e2f3)) !important;
color: var(--sidebar-icon-active-color, var(--accent-strong)) !important;
display: grid !important;
place-items: center !important;
line-height: 0 !important;
transform-origin: center center !important;
box-shadow: var(--sidebar-icon-active-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.85)) !important;
filter: none !important;
}
body.theme-dark.sidebar-collapsed:not(.auth-required) .topbar .account-summary.account-summary-points .account-points-icon,
body.theme-dark:not(.auth-required).sidebar-collapsed .topbar .account-summary.account-summary-points .account-points-icon {
border-color: var(--sidebar-icon-active-border) !important;
background: var(--sidebar-icon-active-bg) !important;
color: var(--sidebar-icon-active-color) !important;
box-shadow: var(--sidebar-icon-active-shadow) !important;
filter: none !important;
}
body.sidebar-collapsed:not(.auth-required) .module-tab.has-ui-icon > .ui-icon svg,
body:not(.auth-required).sidebar-collapsed .module-tab.has-ui-icon > .ui-icon svg,
body.sidebar-collapsed:not(.auth-required) .topbar .icon-button .ui-icon svg,
body:not(.auth-required).sidebar-collapsed .topbar .icon-button .ui-icon svg,
body.sidebar-collapsed:not(.auth-required) .topbar #accountSummary.account-summary.has-ui-icon:not(.account-summary-points) > .ui-icon svg,
body:not(.auth-required).sidebar-collapsed .topbar #accountSummary.account-summary.has-ui-icon:not(.account-summary-points) > .ui-icon svg,
body.sidebar-collapsed:not(.auth-required) .sidebar-toggle .ui-icon svg,
body:not(.auth-required).sidebar-collapsed .sidebar-toggle .ui-icon svg,
body.sidebar-collapsed:not(.auth-required) .topbar .account-summary.account-summary-points .account-points-icon svg,
body:not(.auth-required).sidebar-collapsed .topbar .account-summary.account-summary-points .account-points-icon svg {
width: 15.5px !important;
height: 15.5px !important;
min-width: 15.5px !important;
min-height: 15.5px !important;
display: block !important;
margin: auto !important;
stroke-width: 1.9 !important;
transform-origin: center center !important;
}
body:not(.auth-required) .layout {
margin-left: var(--sidebar) !important;
padding: var(--layout-padding) !important;
--layout-column-gap: 10px;
--layout-row-gap: 10px;
min-height: 100dvh !important;
}
body:not(.auth-required) .layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):not(.text-layout):not(.media-tool-layout):not(.tool-layout) {
grid-template-columns: minmax(360px, 0.78fr) minmax(0, 1.22fr) !important;
}
body:not(.auth-required) .layout.media-tool-layout {
grid-template-columns: minmax(360px, 0.78fr) minmax(0, 1.22fr) !important;
}
body:not(.auth-required) .layout > .panel,
body:not(.auth-required) .layout.media-tool-layout .workbench,
body:not(.auth-required) .layout.media-tool-layout .monitor {
min-height: calc(100dvh - 20px) !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .workbench,
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor {
min-height: 0 !important;
height: 100% !important;
max-height: 100% !important;
}
body:not(.auth-required) .layout.media-tool-layout .tool-panel.active {
gap: 8px !important;
}
body:not(.auth-required) .workflow-main,
body:not(.auth-required) .infinite-canvas-main {
min-height: 0 !important;
}
body:not(.auth-required) .workflow-inspector,
body:not(.auth-required) .infinite-canvas-inspector {
width: 260px !important;
}
}
@media (max-width: 820px) {
:root {
--font-ui: 10.5px;
--font-label: 10.5px;
--font-title: 15px;
--font-section-title: 12.5px;
--mobile-topbar-expanded-offset: 96px;
--panel-padding: 9px;
--tab-height: 29px;
--control-height: 30px;
--button-height: 31px;
--form-gap: 7px;
--topbar-btn: clamp(30px, 8.4vw, 32px);
--topbar-radius: calc(var(--topbar-btn) * 0.31);
}
body:not(.auth-required) .topbar,
body:not(.auth-required).sidebar-collapsed .topbar,
body.sidebar-collapsed:not(.auth-required) .topbar {
position: fixed !important;
inset: 0 0 auto 0 !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
padding: 7px 9px !important;
display: grid !important;
grid-template-columns: minmax(86px, 1fr) auto !important;
grid-template-rows: var(--topbar-btn) var(--topbar-btn) !important;
grid-template-areas: "brand actions" "nav nav" !important;
align-items: center !important;
row-gap: 6px !important;
column-gap: 6px !important;
overflow: hidden !important;
}
body:not(.auth-required) .brand-block,
body:not(.auth-required).sidebar-collapsed .brand-block,
body.sidebar-collapsed:not(.auth-required) .brand-block {
grid-area: brand !important;
width: 100% !important;
min-width: 0 !important;
height: var(--topbar-btn) !important;
min-height: var(--topbar-btn) !important;
padding: 0 !important;
border: 0 !important;
display: flex !important;
align-items: center !important;
}
body:not(.auth-required) .brand-row,
body:not(.auth-required).sidebar-collapsed .brand-row,
body.sidebar-collapsed:not(.auth-required) .brand-row {
width: 100% !important;
height: var(--topbar-btn) !important;
min-height: var(--topbar-btn) !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 0 !important;
}
body:not(.auth-required) .brand-full,
body:not(.auth-required).sidebar-collapsed .brand-full,
body.sidebar-collapsed:not(.auth-required) .brand-full {
display: inline-flex !important;
}
body:not(.auth-required) .brand-short,
body:not(.auth-required).sidebar-collapsed .brand-short,
body.sidebar-collapsed:not(.auth-required) .brand-short {
display: none !important;
}
body:not(.auth-required) .brand-logo-full,
body:not(.auth-required).sidebar-collapsed .brand-logo-full,
body.sidebar-collapsed:not(.auth-required) .brand-logo-full {
width: clamp(82px, 28vw, 106px) !important;
max-width: clamp(82px, 28vw, 106px) !important;
max-height: calc(var(--topbar-btn) - 5px) !important;
object-fit: contain !important;
}
body:not(.auth-required) .topbar p,
body:not(.auth-required).sidebar-collapsed .topbar p,
body.sidebar-collapsed:not(.auth-required) .topbar p {
display: none !important;
}
body:not(.auth-required) .topbar .top-actions,
body:not(.auth-required).sidebar-collapsed .topbar .top-actions,
body.sidebar-collapsed:not(.auth-required) .topbar .top-actions {
grid-area: actions !important;
position: static !important;
width: auto !important;
max-width: calc(100vw - clamp(82px, 28vw, 106px) - 26px) !important;
height: var(--topbar-btn) !important;
margin: 0 !important;
display: flex !important;
flex-flow: row nowrap !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 4px !important;
overflow: visible !important;
}
body:not(.auth-required) .sidebar-toggle,
body:not(.auth-required).sidebar-collapsed .sidebar-toggle,
body.sidebar-collapsed:not(.auth-required) .sidebar-toggle {
position: static !important;
width: var(--topbar-btn) !important;
height: var(--topbar-btn) !important;
min-width: var(--topbar-btn) !important;
min-height: var(--topbar-btn) !important;
max-width: var(--topbar-btn) !important;
padding: 0 !important;
margin-left: 4px !important;
border-radius: var(--topbar-radius) !important;
display: grid !important;
place-items: center !important;
font-size: 0 !important;
flex: 0 0 var(--topbar-btn) !important;
}
body:not(.auth-required) .topbar .module-nav,
body:not(.auth-required).sidebar-collapsed .topbar .module-nav,
body.sidebar-collapsed:not(.auth-required) .topbar .module-nav {
grid-area: nav !important;
width: 100% !important;
height: var(--topbar-btn) !important;
min-height: var(--topbar-btn) !important;
padding: 0 !important;
display: flex !important;
flex-flow: row nowrap !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 6px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scrollbar-width: none !important;
}
body:not(.auth-required) .topbar .module-nav::-webkit-scrollbar,
body:not(.auth-required).sidebar-collapsed .topbar .module-nav::-webkit-scrollbar,
body.sidebar-collapsed:not(.auth-required) .topbar .module-nav::-webkit-scrollbar {
display: none !important;
}
body:not(.auth-required) .topbar .module-tab,
body:not(.auth-required) .topbar .module-tab.has-ui-icon,
body:not(.auth-required).sidebar-collapsed .topbar .module-tab,
body:not(.auth-required).sidebar-collapsed .topbar .module-tab.has-ui-icon,
body.sidebar-collapsed:not(.auth-required) .topbar .module-tab,
body.sidebar-collapsed:not(.auth-required) .topbar .module-tab.has-ui-icon {
width: var(--topbar-btn) !important;
height: var(--topbar-btn) !important;
min-width: var(--topbar-btn) !important;
min-height: var(--topbar-btn) !important;
padding: 0 !important;
border-radius: var(--topbar-radius) !important;
flex: 0 0 var(--topbar-btn) !important;
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: 1fr !important;
place-items: center !important;
align-content: center !important;
justify-content: center !important;
text-align: center !important;
box-shadow: none !important;
}
body:not(.auth-required) .topbar .module-tab strong,
body:not(.auth-required) .topbar .module-tab span:not(.ui-icon),
body:not(.auth-required).sidebar-collapsed .topbar .module-tab strong,
body:not(.auth-required).sidebar-collapsed .topbar .module-tab span:not(.ui-icon),
body.sidebar-collapsed:not(.auth-required) .topbar .module-tab strong,
body.sidebar-collapsed:not(.auth-required) .topbar .module-tab span:not(.ui-icon),
body:not(.auth-required) .topbar .module-tab::before,
body:not(.auth-required).sidebar-collapsed .topbar .module-tab::before,
body.sidebar-collapsed:not(.auth-required) .topbar .module-tab::before {
display: none !important;
content: none !important;
}
body:not(.auth-required) .topbar .module-tab.has-ui-icon > .ui-icon,
body:not(.auth-required).sidebar-collapsed .topbar .module-tab.has-ui-icon > .ui-icon,
body.sidebar-collapsed:not(.auth-required) .topbar .module-tab.has-ui-icon > .ui-icon {
grid-row: auto !important;
grid-column: auto !important;
width: calc(var(--topbar-btn) - 11px) !important;
height: calc(var(--topbar-btn) - 11px) !important;
min-width: calc(var(--topbar-btn) - 11px) !important;
max-width: calc(var(--topbar-btn) - 11px) !important;
min-height: calc(var(--topbar-btn) - 11px) !important;
max-height: calc(var(--topbar-btn) - 11px) !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: #31546b !important;
opacity: 1 !important;
display: grid !important;
place-items: center !important;
overflow: visible !important;
}
body:not(.auth-required) .topbar .module-tab.has-ui-icon > .ui-icon svg,
body:not(.auth-required).sidebar-collapsed .topbar .module-tab.has-ui-icon > .ui-icon svg,
body.sidebar-collapsed:not(.auth-required) .topbar .module-tab.has-ui-icon > .ui-icon svg {
width: calc(var(--topbar-btn) - 17px) !important;
height: calc(var(--topbar-btn) - 17px) !important;
stroke-width: 2 !important;
opacity: 1 !important;
}
body:not(.auth-required) .topbar .module-tab.active,
body:not(.auth-required).sidebar-collapsed .topbar .module-tab.active,
body.sidebar-collapsed:not(.auth-required) .topbar .module-tab.active {
border-color: rgba(47, 109, 183, 0.45) !important;
background: rgba(47, 109, 183, 0.12) !important;
box-shadow: inset 0 0 0 1px rgba(47, 109, 183, 0.08) !important;
}
body:not(.auth-required) .topbar .module-tab.active > .ui-icon,
body:not(.auth-required).sidebar-collapsed .topbar .module-tab.active > .ui-icon,
body.sidebar-collapsed:not(.auth-required) .topbar .module-tab.active > .ui-icon {
color: #255a9c !important;
background: transparent !important;
}
body:not(.auth-required) .topbar #accountSummary.account-summary,
body:not(.auth-required).sidebar-collapsed .topbar #accountSummary.account-summary,
body.sidebar-collapsed:not(.auth-required) .topbar #accountSummary.account-summary,
body:not(.auth-required) .topbar #themeToggleBtn,
body:not(.auth-required) .topbar #refreshJobsBtn,
body:not(.auth-required).sidebar-collapsed .topbar #themeToggleBtn,
body:not(.auth-required).sidebar-collapsed .topbar #refreshJobsBtn,
body.sidebar-collapsed:not(.auth-required) .topbar #themeToggleBtn,
body.sidebar-collapsed:not(.auth-required) .topbar #refreshJobsBtn {
height: var(--topbar-btn) !important;
min-height: var(--topbar-btn) !important;
border-radius: var(--topbar-radius) !important;
display: grid !important;
place-items: center !important;
}
body:not(.auth-required) .topbar #accountSummary.account-summary:not(.account-summary-points),
body:not(.auth-required).sidebar-collapsed .topbar #accountSummary.account-summary:not(.account-summary-points),
body.sidebar-collapsed:not(.auth-required) .topbar #accountSummary.account-summary:not(.account-summary-points),
body:not(.auth-required) .topbar #themeToggleBtn,
body:not(.auth-required) .topbar #refreshJobsBtn,
body:not(.auth-required).sidebar-collapsed .topbar #themeToggleBtn,
body:not(.auth-required).sidebar-collapsed .topbar #refreshJobsBtn,
body.sidebar-collapsed:not(.auth-required) .topbar #themeToggleBtn,
body.sidebar-collapsed:not(.auth-required) .topbar #refreshJobsBtn {
width: var(--topbar-btn) !important;
min-width: var(--topbar-btn) !important;
max-width: var(--topbar-btn) !important;
padding: 0 !important;
flex: 0 0 var(--topbar-btn) !important;
}
body:not(.sidebar-collapsed):not(.auth-required) .topbar #accountSummary.account-summary.account-summary-points {
width: auto !important;
min-width: clamp(62px, 20vw, 72px) !important;
max-width: 76px !important;
padding: 0 7px !important;
font-size: 10px !important;
flex: 0 1 76px !important;
}
body:not(.sidebar-collapsed):not(.auth-required) .topbar .account-summary.account-summary-points .account-points-icon {
width: 14px !important;
height: 14px !important;
min-width: 14px !important;
}
body:not(.auth-required) .topbar .account-action .ui-icon,
body:not(.auth-required) .topbar #themeToggleBtn .ui-icon,
body:not(.auth-required) .topbar #refreshJobsBtn .ui-icon,
body:not(.auth-required) .sidebar-toggle .ui-icon,
body:not(.auth-required).sidebar-collapsed .topbar .account-action .ui-icon,
body:not(.auth-required).sidebar-collapsed .topbar #themeToggleBtn .ui-icon,
body:not(.auth-required).sidebar-collapsed .topbar #refreshJobsBtn .ui-icon,
body:not(.auth-required).sidebar-collapsed .sidebar-toggle .ui-icon,
body.sidebar-collapsed:not(.auth-required) .topbar .account-action .ui-icon,
body.sidebar-collapsed:not(.auth-required) .topbar #themeToggleBtn .ui-icon,
body.sidebar-collapsed:not(.auth-required) .topbar #refreshJobsBtn .ui-icon,
body.sidebar-collapsed:not(.auth-required) .sidebar-toggle .ui-icon {
width: 17px !important;
height: 17px !important;
margin: 0 !important;
}
body:not(.auth-required) .layout,
body:not(.auth-required).sidebar-collapsed .layout,
body.sidebar-collapsed:not(.auth-required) .layout,
body:not(.auth-required).sidebar-collapsed .module-panel,
body.sidebar-collapsed:not(.auth-required) .module-panel {
margin-left: 0 !important;
margin-top: var(--mobile-topbar-offset) !important;
padding: 6px !important;
gap: 7px !important;
}
body:not(.auth-required) .layout > .panel,
body:not(.auth-required) .layout.media-tool-layout .workbench,
body:not(.auth-required) .layout.media-tool-layout .monitor {
border-radius: 13px !important;
padding: 8px !important;
}
body:not(.auth-required) #appLayout.media-tool-layout {
height: calc(100dvh - var(--mobile-topbar-offset) - 7px) !important;
}
body:not(.auth-required) #appLayout.media-tool-layout > .workbench,
body:not(.auth-required) #appLayout.media-tool-layout > .monitor {
min-width: calc(100vw - 12px) !important;
max-width: calc(100vw - 12px) !important;
}
body:not(.auth-required) .tabs {
height: 29px !important;
min-height: 29px !important;
}
body:not(.auth-required) .tab-panel,
body:not(.auth-required) .tool-panel.active {
padding: 8px !important;
gap: 7px !important;
}
body:not(.auth-required) .upload-box,
body:not(.auth-required) .advanced,
body:not(.auth-required) .tool-card {
padding: 9px !important;
margin-bottom: 7px !important;
}
body:not(.auth-required) .drop-zone {
padding: 9px !important;
gap: 5px !important;
}
body:not(.auth-required) textarea {
min-height: 96px !important;
padding: 8px 9px !important;
}
body:not(.auth-required) #audioText,
body:not(.auth-required) #musicPrompt {
min-height: 114px !important;
}
body:not(.auth-required) .quick-options,
body:not(.auth-required) .layout.media-tool-layout .quick-options,
body:not(.auth-required) .advanced .options-grid,
body:not(.auth-required) .layout.media-tool-layout .advanced .options-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 7px !important;
}
body:not(.auth-required) .command-row {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 7px !important;
}
body:not(.auth-required) .command-row > .plan-summary-inline {
grid-column: 1 / -1 !important;
}
body:not(.auth-required) .status-grid,
body:not(.auth-required) .task-stats-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 6px !important;
}
body:not(.auth-required) .stat-card,
body:not(.auth-required) .monitor-stat {
min-height: 48px !important;
padding: 8px 6px !important;
}
body:not(.auth-required) .stat-card strong,
body:not(.auth-required) .monitor-stat strong {
font-size: 17px !important;
}
body:not(.auth-required) .workflow-stage-wrap,
body:not(.auth-required) .workflow-lite-wrap,
body:not(.auth-required) .infinite-canvas-stage {
min-height: calc(100dvh - var(--mobile-topbar-offset) - 118px) !important;
}
body:not(.auth-required) .modal-mask:not([hidden]) {
padding: 5px !important;
}
body:not(.auth-required) .modal-panel:where(:not([data-ui-unmanaged])):not(.feed-detail-panel):not(.admin-account-detail-panel),
body:not(.auth-required) .workflow-project-panel,
body:not(.auth-required) .workflow-media-library-panel,
body:not(.auth-required) .command-palette-panel,
body:not(.auth-required) .watermark-picker-panel,
body:not(.auth-required) .watermark-panel,
body:not(.auth-required) .account-usage-panel,
body:not(.auth-required) .canvas-image-edit-panel,
body:not(.auth-required) .canvas-image-crop-panel,
body:not(.auth-required) .canvas-image-split-panel,
body:not(.auth-required) .canvas-video-edit-panel,
body:not(.auth-required) .panorama-preview-panel {
width: min(100%, calc(100vw - 10px)) !important;
max-width: calc(100vw - 10px) !important;
max-height: calc(100dvh - 10px) !important;
padding: 10px !important;
border-radius: 15px !important;
}
body:not(.auth-required) .workflow-project-tools,
body:not(.auth-required) .canvas-project-tools,
body:not(.auth-required) .workflow-media-library-tools,
body:not(.auth-required) .account-usage-tools {
gap: 6px !important;
}
body:not(.auth-required) .workflow-media-library-list {
column-gap: 7px !important;
max-height: calc(100dvh - 132px) !important;
}
body:not(.auth-required) .workflow-media-library-preview {
height: auto !important;
min-height: 0 !important;
aspect-ratio: var(--workflow-media-preview-ratio, 1 / 1) !important;
}
body:not(.auth-required) .account-usage-summary {
display: flex !important;
flex-wrap: wrap !important;
}
body:not(.auth-required) .account-usage-summary div {
min-height: 28px !important;
padding: 4px 8px !important;
}
body:not(.auth-required) .account-usage-summary strong {
font-size: 12px !important;
}
}
body:not(.auth-required) .layout.media-tool-layout #audioToolTab > .tool-mode-tabs {
width: 100% !important;
max-width: 100% !important;
height: 38px !important;
min-height: 38px !important;
max-height: 38px !important;
margin: 0 0 10px 0 !important;
padding: 4px !important;
box-sizing: border-box !important;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 6px !important;
align-items: stretch !important;
border: 1px solid #dce6ef !important;
border-radius: var(--radius-sm) !important;
background: #f4f8fb !important;
overflow: hidden !important;
}
body:not(.auth-required) .layout.media-tool-layout #audioToolTab > .tool-mode-tabs .tool-mode-tab {
width: 100% !important;
height: 30px !important;
min-height: 30px !important;
max-height: 30px !important;
padding: 0 8px !important;
box-sizing: border-box !important;
align-self: stretch !important;
border: 0 !important;
border-radius: var(--radius-xs) !important;
background: transparent !important;
color: #475569 !important;
font-size: var(--font-ui) !important;
font-weight: 900 !important;
line-height: 1.15 !important;
box-shadow: none !important;
}
body:not(.auth-required) .layout.media-tool-layout #audioToolTab > .tool-mode-tabs .tool-mode-tab.active {
background: #ffffff !important;
color: var(--accent-strong) !important;
box-shadow: inset 0 -2px 0 var(--accent), 0 1px 2px rgba(16, 24, 40, 0.10) !important;
}
body.theme-dark:not(.auth-required) .layout.media-tool-layout #audioToolTab > .tool-mode-tabs {
border-color: rgba(141, 149, 165, 0.34) !important;
background: rgba(15, 27, 45, 0.72) !important;
}
body.theme-dark:not(.auth-required) .layout.media-tool-layout #audioToolTab > .tool-mode-tabs .tool-mode-tab {
color: #aebed2 !important;
background: transparent !important;
}
body.theme-dark:not(.auth-required) .layout.media-tool-layout #audioToolTab > .tool-mode-tabs .tool-mode-tab.active {
color: #f8fbff !important;
background: rgba(30, 42, 64, 0.95) !important;
box-shadow: inset 0 -2px 0 #5aa6e8 !important;
}
body:not(.auth-required) {
--ui-action-height: 30px;
--ui-action-radius: 9px;
--ui-action-gap: 5px;
--ui-field-radius: 9px;
--ui-card-radius: 12px;
--ui-content-font: 11px;
--ui-label-font: 11px;
--ui-caption-font: 10.5px;
}
body:not(.auth-required) :where(.workbench, .monitor, .tool-card, .upload-box, .advanced, .drop-zone, .modal-panel):where(:not([data-ui-unmanaged])) {
color: var(--text);
}
body:not(.auth-required) :where(label, .field-title, .drop-zone strong, .tool-page-head strong, .monitor-title strong, .workflow-inspector h3, .canvas-inspector h3):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
font-size: var(--ui-label-font) !important;
line-height: 1.35 !important;
}
body:not(.auth-required) :where(.drop-zone p, .tool-page-head p, .file-summary, .plan-summary-inline, .task-meta, .case-meta, .model-capability-hint, small):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
font-size: var(--ui-caption-font) !important;
line-height: 1.4 !important;
}
body:not(.auth-required) :where(input:not([type="range"]), select):where(:not([data-ui-unmanaged] *)) {
min-height: var(--ui-action-height) !important;
height: var(--ui-action-height) !important;
padding: 0 9px !important;
border-radius: var(--ui-field-radius) !important;
font-size: var(--ui-content-font) !important;
line-height: 1.2 !important;
}
body:not(.auth-required) :where(textarea):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
padding: 9px 10px !important;
border-radius: 10px !important;
font-size: var(--ui-content-font) !important;
line-height: 1.45 !important;
}
body:not(.auth-required) :where(button, .button-link):not([data-ui-compact-control]):not([hidden]):not(.module-tab):not(.sidebar-toggle):not(.icon-button):not(.gen-icon-btn):not(.hl-float-btn):not(.hl-send-btn):not(.hl-like-pill):not(.hl-cta-primary):not(.hl-submit-btn):not(.hl-mod-chip):not(.hl-tool-btn):not(.hl-ref-del):not(.hl-cta-icon):not(.flow-mini-btn):not(.project-icon-btn):not(.canvas-edit-branch):not(.feed-detail-album-thumb):not(.account-summary):not(.text-message-copy):not(.text-chat-delete-btn):not(.watermark-library-preview):not(.thumb-preview):not(.watermark-card):not(.watermark-layer-select):not(.text-chat-history-toggle):not(.infinite-inline-prompt-expand):not(.infinite-card-run):not(.preview-canvas-tool):not(.workflow-media-library-select):not(.ob-rail-step):not(.app-more-id):not(.app-more-item):not(.account-page-row):not(.account-page-stat):not(.account-page-edit):not(.account-page-quick):not(.account-page-tab):not(.account-command-btn):not(.account-content-action):not(.account-resource-card):not(.account-card):not(.account-card-open):not(.account-card-more):not(.account-resource-more):not(.account-mini-item):not(.account-proj-pill):not(.account-page-project-open):not(.account-page-project-more):not(.account-page-projects-more):not(.hl-stage):where(:not([data-ui-unmanaged] *)) {
min-height: var(--ui-action-height) !important;
height: var(--ui-action-height) !important;
padding: 0 10px !important;
border-radius: var(--ui-action-radius) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: var(--ui-action-gap) !important;
font-size: var(--ui-content-font) !important;
line-height: 1.15 !important;
font-weight: 760 !important;
white-space: nowrap !important;
}
body:not(.auth-required) :where(.primary, .secondary, .danger, .button-link):where(:not([data-ui-unmanaged] *)) svg,
body:not(.auth-required) :where(button:not([data-ui-compact-control])) > .ui-icon svg:where(:not([data-ui-unmanaged] *)) {
width: 14px !important;
height: 14px !important;
min-width: 14px !important;
min-height: 14px !important;
}
body:not(.auth-required) :where(.command-row, .command-row.compact, .tool-result-actions, .workflow-toolbar-actions, .canvas-board-actions, .workflow-media-library-actions, .account-usage-tools):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
gap: 6px !important;
}
body:not(.auth-required) :where(.workflow-toolbar-actions button, .canvas-board-actions button, .workflow-media-library-actions button, .account-usage-tools button):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
min-height: var(--ui-action-height) !important;
height: var(--ui-action-height) !important;
padding: 0 10px !important;
border-radius: 999px !important;
font-size: var(--ui-content-font) !important;
}
body:not(.auth-required) :where(.workflow-dirty-badge, .canvas-board-actions .workflow-dirty-badge):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
min-height: var(--ui-action-height) !important;
height: var(--ui-action-height) !important;
padding: 0 10px !important;
border-radius: 999px !important;
font-size: var(--ui-content-font) !important;
display: inline-flex !important;
align-items: center !important;
}
body:not(.auth-required) :where(.tabs, .tool-mode-tabs) {
box-sizing: border-box !important;
}
body:not(.auth-required) :where(.tab, .tool-mode-tab):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
font-size: var(--ui-content-font) !important;
line-height: 1.15 !important;
font-weight: 820 !important;
}
body:not(.auth-required) :where(.tool-card, .upload-box, .advanced, .drop-zone, .file-summary, .plan-summary-inline, .task-row, .task-list-row, .job-select, .case-select):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
border-radius: var(--ui-card-radius) !important;
}
body:not(.auth-required) :where(.stat-card, .monitor-stat) {
border-radius: 10px !important;
}
body:not(.auth-required) :where(.stat-card strong, .monitor-stat strong) {
font-size: 18px !important;
line-height: 1.05 !important;
}
body.theme-dark:not(.auth-required) :where(.secondary, .button-link, .text-message-copy, .workflow-toolbar-actions button, .canvas-board-actions button):where(:not([data-ui-unmanaged] *)) {
border-color: rgba(141, 149, 165, 0.36) !important;
}
body.theme-dark:not(.auth-required) .workflow-toolbar-actions button.danger:where(:not([data-ui-unmanaged] *)),
body.theme-dark:not(.auth-required) .canvas-board-actions button.danger:where(:not([data-ui-unmanaged] *)) {
border-color: rgba(248, 113, 113, 0.5) !important;
}
body.theme-dark:not(.auth-required) .workflow-toolbar-actions button:where(:not([data-ui-unmanaged] *)),
body.theme-dark:not(.auth-required) .canvas-board-actions button:where(:not([data-ui-unmanaged] *)) {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
@media (min-width: 821px) {
body:not(.auth-required) {
--ui-action-height: 30px;
--ui-content-font: 11px;
--ui-label-font: 11px;
--ui-caption-font: 10.5px;
}
body:not(.auth-required) :where(.workflow-toolbar-actions .secondary, .workflow-toolbar-actions .primary, .workflow-toolbar-actions .danger, .canvas-board-actions .secondary, .canvas-board-actions .primary, .canvas-board-actions .danger):where(:not([data-ui-unmanaged] *)) {
min-height: 30px !important;
height: 30px !important;
font-size: 11px !important;
}
}
@media (max-width: 820px) {
body:not(.auth-required) {
--ui-action-height: 30px;
--ui-content-font: 10.5px;
--ui-label-font: 10.5px;
--ui-caption-font: 10px;
}
body:not(.auth-required) :where(button, .button-link):not([data-ui-compact-control]):not([hidden]):not(.module-tab):not(.sidebar-toggle):not(.icon-button):not(.gen-icon-btn):not(.hl-float-btn):not(.hl-send-btn):not(.hl-like-pill):not(.hl-cta-primary):not(.hl-submit-btn):not(.hl-mod-chip):not(.hl-tool-btn):not(.hl-ref-del):not(.hl-cta-icon):not(.flow-mini-btn):not(.project-icon-btn):not(.canvas-edit-branch):not(.feed-detail-album-thumb):not(.hl-stage):not(.account-summary):not(.text-message-copy):not(.text-chat-delete-btn):not(.watermark-library-preview):not(.thumb-preview):not(.watermark-card):not(.watermark-layer-select):not(.text-chat-history-toggle):not(.infinite-inline-prompt-expand):not(.infinite-card-run):not(.preview-canvas-tool):not(.workflow-media-library-select):not(.ob-rail-step):not(.app-more-id):not(.app-more-item):not(.account-page-row):not(.account-page-stat):not(.account-page-edit):not(.account-page-quick):not(.account-page-tab):not(.account-command-btn):not(.account-content-action):not(.account-resource-card):not(.account-card):not(.account-card-open):not(.account-card-more):not(.account-resource-more):not(.account-mini-item):not(.account-proj-pill):not(.account-page-project-open):not(.account-page-project-more):not(.account-page-projects-more):where(:not([data-ui-unmanaged] *)) {
padding-inline: 8px !important;
}
body:not(.auth-required) :where(.workflow-toolbar-actions button, .canvas-board-actions button, .workflow-media-library-actions button, .account-usage-tools button):where(:not([data-ui-unmanaged] *)) {
min-height: 28px !important;
height: 28px !important;
padding-inline: 8px !important;
font-size: 10.5px !important;
}
}
body:not(.auth-required) [hidden] {
display: none !important;
}
body:not(.auth-required) .topbar .account-bar button[hidden],
body:not(.auth-required).sidebar-collapsed .topbar .account-bar button[hidden],
body.sidebar-collapsed:not(.auth-required) .topbar .account-bar button[hidden] {
display: none !important;
}
body:not(.auth-required) input[type="checkbox"],
body:not(.auth-required) input[type="radio"] {
width: 15px !important;
min-width: 15px !important;
max-width: 15px !important;
height: 15px !important;
min-height: 15px !important;
max-height: 15px !important;
padding: 0 !important;
border-radius: 4px !important;
flex: 0 0 15px !important;
}
@media (max-width: 820px) {
body:not(.auth-required) {
--mobile-menu-btn: 34px;
--mobile-menu-tile: 30px;
--mobile-menu-svg: 15.5px;
--mobile-menu-pad-x: 8px;
--mobile-menu-pad-y: 6px;
--mobile-menu-gap: 6px;
--mobile-menu-row: var(--mobile-menu-btn);
--mobile-menu-row-gap: 6px;
--mobile-topbar-expanded-offset: calc(
var(--mobile-menu-pad-y) + var(--mobile-menu-pad-y) + var(--mobile-menu-btn) + var(--mobile-menu-row) + var(--mobile-menu-row-gap) + 2px
);
}
body.sidebar-collapsed:not(.auth-required),
body:not(.auth-required).sidebar-collapsed {
--mobile-menu-row: 0px;
--mobile-menu-row-gap: 0px;
}
body:not(.auth-required) .topbar,
body.sidebar-collapsed:not(.auth-required) .topbar,
body:not(.auth-required).sidebar-collapsed .topbar {
position: fixed !important;
inset: 0 0 auto 0 !important;
width: 100% !important;
height: var(--mobile-topbar-offset) !important;
min-height: var(--mobile-topbar-offset) !important;
max-height: var(--mobile-topbar-offset) !important;
padding: var(--mobile-menu-pad-y) var(--mobile-menu-pad-x) !important;
box-sizing: border-box !important;
display: grid !important;
grid-template-columns: minmax(74px, 1fr) auto var(--mobile-menu-btn) !important;
grid-template-rows: var(--mobile-menu-btn) var(--mobile-menu-row) !important;
grid-template-areas: "brand actions toggle" "nav nav nav" !important;
align-items: center !important;
justify-items: stretch !important;
gap: var(--mobile-menu-row-gap) var(--mobile-menu-gap) !important;
overflow: hidden !important;
border-right: 0 !important;
border-bottom: 1px solid var(--border) !important;
transition:
height var(--sidebar-motion),
min-height var(--sidebar-motion),
max-height var(--sidebar-motion),
padding var(--sidebar-motion),
gap var(--sidebar-motion),
background-color 180ms ease,
border-color var(--sidebar-motion) !important;
}
body:not(.auth-required) .brand-block,
body.sidebar-collapsed:not(.auth-required) .brand-block,
body:not(.auth-required).sidebar-collapsed .brand-block,
body:not(.auth-required) .brand-row,
body.sidebar-collapsed:not(.auth-required) .brand-row,
body:not(.auth-required).sidebar-collapsed .brand-row {
display: contents !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
padding: 0 !important;
border: 0 !important;
}
body:not(.auth-required) .brand-text,
body.sidebar-collapsed:not(.auth-required) .brand-text,
body:not(.auth-required).sidebar-collapsed .brand-text {
grid-area: brand !important;
width: 100% !important;
min-width: 0 !important;
height: var(--mobile-menu-btn) !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
overflow: hidden !important;
}
body:not(.auth-required) .brand-full,
body.sidebar-collapsed:not(.auth-required) .brand-full,
body:not(.auth-required).sidebar-collapsed .brand-full {
display: inline-flex !important;
align-items: center !important;
min-width: 0 !important;
}
body:not(.auth-required) .brand-short,
body.sidebar-collapsed:not(.auth-required) .brand-short,
body:not(.auth-required).sidebar-collapsed .brand-short,
body:not(.auth-required) .topbar p,
body.sidebar-collapsed:not(.auth-required) .topbar p,
body:not(.auth-required).sidebar-collapsed .topbar p {
display: none !important;
}
body:not(.auth-required) .brand-logo-full,
body.sidebar-collapsed:not(.auth-required) .brand-logo-full,
body:not(.auth-required).sidebar-collapsed .brand-logo-full {
width: clamp(78px, 27vw, 104px) !important;
max-width: clamp(78px, 27vw, 104px) !important;
max-height: calc(var(--mobile-menu-btn) - 3px) !important;
object-fit: contain !important;
object-position: left center !important;
}
body:not(.auth-required) #sidebarToggleBtn.sidebar-toggle,
body.sidebar-collapsed:not(.auth-required) #sidebarToggleBtn.sidebar-toggle,
body:not(.auth-required).sidebar-collapsed #sidebarToggleBtn.sidebar-toggle {
grid-area: toggle !important;
}
body:not(.auth-required) .topbar .top-actions,
body.sidebar-collapsed:not(.auth-required) .topbar .top-actions,
body:not(.auth-required).sidebar-collapsed .topbar .top-actions {
grid-area: actions !important;
position: static !important;
width: auto !important;
max-width: none !important;
height: var(--mobile-menu-btn) !important;
min-height: var(--mobile-menu-btn) !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-flow: row nowrap !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 5px !important;
overflow: visible !important;
}
body:not(.auth-required) .topbar .module-nav,
body.sidebar-collapsed:not(.auth-required) .topbar .module-nav,
body:not(.auth-required).sidebar-collapsed .topbar .module-nav {
grid-area: nav !important;
width: 100% !important;
height: var(--mobile-menu-row) !important;
min-height: 0 !important;
max-height: var(--mobile-menu-row) !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-flow: row nowrap !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 6px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scrollbar-width: none !important;
opacity: 1 !important;
transform: translateY(0) !important;
pointer-events: auto !important;
transition:
height var(--sidebar-motion),
max-height var(--sidebar-motion),
opacity 160ms ease,
transform 160ms ease !important;
}
body.sidebar-collapsed:not(.auth-required) .topbar .module-nav,
body:not(.auth-required).sidebar-collapsed .topbar .module-nav {
overflow: hidden !important;
opacity: 0 !important;
transform: translateY(-4px) !important;
pointer-events: none !important;
}
body:not(.auth-required) .topbar .module-nav::-webkit-scrollbar,
body.sidebar-collapsed:not(.auth-required) .topbar .module-nav::-webkit-scrollbar,
body:not(.auth-required).sidebar-collapsed .topbar .module-nav::-webkit-scrollbar {
display: none !important;
}
body:not(.auth-required) .topbar .module-tab,
body:not(.auth-required) .topbar .module-tab.has-ui-icon,
body.sidebar-collapsed:not(.auth-required) .topbar .module-tab,
body.sidebar-collapsed:not(.auth-required) .topbar .module-tab.has-ui-icon,
body:not(.auth-required).sidebar-collapsed .topbar .module-tab,
body:not(.auth-required).sidebar-collapsed .topbar .module-tab.has-ui-icon,
body:not(.auth-required) .topbar .icon-button:not(.account-summary),
body:not(.auth-required) #sidebarToggleBtn.sidebar-toggle {
width: var(--mobile-menu-btn) !important;
min-width: var(--mobile-menu-btn) !important;
max-width: var(--mobile-menu-btn) !important;
height: var(--mobile-menu-btn) !important;
min-height: var(--mobile-menu-btn) !important;
max-height: var(--mobile-menu-btn) !important;
flex: 0 0 var(--mobile-menu-btn) !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: 1fr !important;
place-items: center !important;
align-items: center !important;
justify-items: center !important;
gap: 0 !important;
overflow: visible !important;
font-size: 0 !important;
color: #31546b !important;
transition:
width var(--sidebar-motion),
height var(--sidebar-motion),
color 180ms ease,
transform 180ms ease !important;
}
body:not(.auth-required) .topbar .module-tab strong,
body:not(.auth-required) .topbar .module-tab span:not(.ui-icon),
body.sidebar-collapsed:not(.auth-required) .topbar .module-tab strong,
body.sidebar-collapsed:not(.auth-required) .topbar .module-tab span:not(.ui-icon),
body:not(.auth-required).sidebar-collapsed .topbar .module-tab strong,
body:not(.auth-required).sidebar-collapsed .topbar .module-tab span:not(.ui-icon),
body:not(.auth-required) .topbar .module-tab::before,
body.sidebar-collapsed:not(.auth-required) .topbar .module-tab::before,
body:not(.auth-required).sidebar-collapsed .topbar .module-tab::before,
body:not(.auth-required) .topbar .icon-button .sidebar-toggle-label,
body:not(.auth-required) #sidebarToggleBtn.sidebar-toggle .sidebar-toggle-label {
display: block !important;
grid-column: 1 !important;
grid-row: 1 !important;
width: 0 !important;
max-width: 0 !important;
height: 0 !important;
max-height: 0 !important;
opacity: 0 !important;
overflow: hidden !important;
visibility: hidden !important;
pointer-events: none !important;
content: none !important;
}
body:not(.auth-required) .topbar .module-tab.has-ui-icon > .ui-icon,
body.sidebar-collapsed:not(.auth-required) .topbar .module-tab.has-ui-icon > .ui-icon,
body:not(.auth-required).sidebar-collapsed .topbar .module-tab.has-ui-icon > .ui-icon,
body:not(.auth-required) .topbar .icon-button:not(.account-summary) > .ui-icon,
body:not(.auth-required) .topbar #accountSummary.account-summary.has-ui-icon:not(.account-summary-points) > .ui-icon,
body:not(.auth-required) #sidebarToggleBtn.sidebar-toggle > .ui-icon {
grid-column: 1 !important;
grid-row: 1 !important;
align-self: center !important;
justify-self: center !important;
width: var(--mobile-menu-tile) !important;
min-width: var(--mobile-menu-tile) !important;
max-width: var(--mobile-menu-tile) !important;
height: var(--mobile-menu-tile) !important;
min-height: var(--mobile-menu-tile) !important;
max-height: var(--mobile-menu-tile) !important;
padding: 7px !important;
margin: 0 !important;
box-sizing: border-box !important;
border: 1px solid var(--sidebar-icon-border, #dbe4ef) !important;
border-radius: 10px !important;
background: var(--sidebar-icon-bg, linear-gradient(180deg, #f8fafc, #eef4fb)) !important;
color: var(--sidebar-icon-color, #31546b) !important;
display: grid !important;
place-items: center !important;
line-height: 0 !important;
opacity: 1 !important;
overflow: visible !important;
box-shadow: var(--sidebar-icon-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.86)) !important;
}
body:not(.auth-required) .topbar .module-tab.active,
body.sidebar-collapsed:not(.auth-required) .topbar .module-tab.active,
body:not(.auth-required).sidebar-collapsed .topbar .module-tab.active {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
color: var(--accent-strong) !important;
}
body:not(.auth-required) .topbar .module-tab.active.has-ui-icon > .ui-icon,
body.sidebar-collapsed:not(.auth-required) .topbar .module-tab.active.has-ui-icon > .ui-icon,
body:not(.auth-required).sidebar-collapsed .topbar .module-tab.active.has-ui-icon > .ui-icon {
border-color: var(--sidebar-icon-active-border, rgba(47, 109, 183, 0.3)) !important;
background: var(--sidebar-icon-active-bg, linear-gradient(180deg, #e3ecf7, #d7e2f3)) !important;
color: var(--sidebar-icon-active-color, var(--accent-strong)) !important;
box-shadow: var(--sidebar-icon-active-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.86)) !important;
}
body:not(.auth-required) .topbar .module-tab.has-ui-icon > .ui-icon svg,
body.sidebar-collapsed:not(.auth-required) .topbar .module-tab.has-ui-icon > .ui-icon svg,
body:not(.auth-required).sidebar-collapsed .topbar .module-tab.has-ui-icon > .ui-icon svg,
body:not(.auth-required) .topbar .icon-button:not(.account-summary) > .ui-icon svg,
body:not(.auth-required) .topbar #accountSummary.account-summary.has-ui-icon:not(.account-summary-points) > .ui-icon svg,
body:not(.auth-required) #sidebarToggleBtn.sidebar-toggle > .ui-icon svg {
width: var(--mobile-menu-svg) !important;
min-width: var(--mobile-menu-svg) !important;
height: var(--mobile-menu-svg) !important;
min-height: var(--mobile-menu-svg) !important;
display: block !important;
margin: auto !important;
stroke-width: 1.9 !important;
transform-origin: center center !important;
}
body:not(.auth-required) .topbar #accountSummary.account-summary {
height: var(--mobile-menu-btn) !important;
min-height: var(--mobile-menu-btn) !important;
max-height: var(--mobile-menu-btn) !important;
border-radius: 11px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
flex: 0 0 auto !important;
flex-wrap: nowrap !important;
white-space: nowrap !important;
}
body:not(.auth-required) .topbar #accountSummary.account-summary:not(.account-summary-points) {
width: var(--mobile-menu-btn) !important;
min-width: var(--mobile-menu-btn) !important;
max-width: var(--mobile-menu-btn) !important;
padding: 0 !important;
}
body:not(.sidebar-collapsed):not(.auth-required) .topbar #accountSummary.account-summary.account-summary-points {
width: auto !important;
min-width: 82px !important;
max-width: 96px !important;
padding: 0 7px !important;
font-size: 10px !important;
line-height: 1 !important;
white-space: nowrap !important;
display: grid !important;
grid-auto-flow: column !important;
grid-auto-columns: max-content !important;
place-content: center !important;
align-items: center !important;
justify-items: center !important;
column-gap: 5px !important;
}
body:not(.sidebar-collapsed):not(.auth-required) .topbar .account-summary.account-summary-points .account-summary-text {
display: block !important;
width: max-content !important;
min-width: max-content !important;
max-width: none !important;
overflow: visible !important;
white-space: nowrap !important;
line-height: 1 !important;
font-variant-numeric: tabular-nums !important;
}
body:not(.sidebar-collapsed):not(.auth-required) .topbar .account-summary.account-summary-points .account-points-icon {
width: 16px !important;
min-width: 16px !important;
max-width: 16px !important;
height: 16px !important;
min-height: 16px !important;
max-height: 16px !important;
display: grid !important;
place-items: center !important;
justify-self: center !important;
align-self: center !important;
}
body:not(.sidebar-collapsed):not(.auth-required) .topbar .account-summary.account-summary-points .account-points-icon svg {
width: 11px !important;
height: 11px !important;
min-width: 11px !important;
min-height: 11px !important;
}
body:not(.auth-required) .layout,
body.sidebar-collapsed:not(.auth-required) .layout,
body:not(.auth-required).sidebar-collapsed .layout,
body:not(.auth-required) .module-panel,
body.sidebar-collapsed:not(.auth-required) .module-panel,
body:not(.auth-required).sidebar-collapsed .module-panel {
margin-left: 0 !important;
margin-top: var(--mobile-topbar-offset) !important;
transition:
margin-top var(--sidebar-motion),
padding var(--sidebar-motion),
gap var(--sidebar-motion) !important;
}
body.theme-dark:not(.auth-required) .topbar .module-tab.has-ui-icon > .ui-icon,
body.theme-dark.sidebar-collapsed:not(.auth-required) .topbar .module-tab.has-ui-icon > .ui-icon,
body.theme-dark:not(.auth-required).sidebar-collapsed .topbar .module-tab.has-ui-icon > .ui-icon,
body.theme-dark:not(.auth-required) .topbar .icon-button:not(.account-summary) > .ui-icon,
body.theme-dark:not(.auth-required) #sidebarToggleBtn.sidebar-toggle > .ui-icon {
border-color: var(--sidebar-icon-border) !important;
background: var(--sidebar-icon-bg) !important;
color: var(--sidebar-icon-color) !important;
box-shadow: var(--sidebar-icon-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.05)) !important;
}
body.theme-dark:not(.auth-required) .topbar .module-tab.active.has-ui-icon > .ui-icon,
body.theme-dark.sidebar-collapsed:not(.auth-required) .topbar .module-tab.active.has-ui-icon > .ui-icon,
body.theme-dark:not(.auth-required).sidebar-collapsed .topbar .module-tab.active.has-ui-icon > .ui-icon {
border-color: var(--sidebar-icon-active-border) !important;
background: var(--sidebar-icon-active-bg) !important;
color: var(--sidebar-icon-active-color) !important;
box-shadow: var(--sidebar-icon-active-shadow) !important;
}
}
@media (max-width: 820px) {
body:not(.auth-required) {
--mobile-menu-btn: 32px;
--mobile-menu-tile: 28px;
--mobile-menu-svg: 14px;
--mobile-menu-pad-x: 8px;
--mobile-menu-pad-y: 5px;
--mobile-menu-gap: 5px;
--mobile-menu-row-gap: 5px;
--mobile-control-height: 32px;
--mobile-control-radius: 9px;
--mobile-card-pad: 8px;
--mobile-gap: 6px;
--mobile-font: 12px;
--mobile-label-font: 11px;
--mobile-caption-font: 10.5px;
}
body:not(.auth-required) .topbar {
grid-template-columns: minmax(72px, 1fr) auto var(--mobile-menu-btn) !important;
}
body:not(.auth-required) .topbar .top-actions {
gap: 4px !important;
}
body:not(.auth-required) .brand-logo-full,
body.sidebar-collapsed:not(.auth-required) .brand-logo-full,
body:not(.auth-required).sidebar-collapsed .brand-logo-full {
width: clamp(74px, 24vw, 98px) !important;
max-width: clamp(74px, 24vw, 98px) !important;
}
body:not(.sidebar-collapsed):not(.auth-required) .topbar #accountSummary.account-summary.account-summary-points {
min-width: 74px !important;
max-width: 88px !important;
padding: 0 6px !important;
column-gap: 4px !important;
font-size: 9.5px !important;
}
body:not(.sidebar-collapsed):not(.auth-required) .topbar .account-summary.account-summary-points .account-points-icon {
width: 15px !important;
min-width: 15px !important;
max-width: 15px !important;
height: 15px !important;
min-height: 15px !important;
max-height: 15px !important;
}
body:not(.auth-required) .layout,
body.sidebar-collapsed:not(.auth-required) .layout,
body:not(.auth-required).sidebar-collapsed .layout,
body:not(.auth-required) .module-panel,
body.sidebar-collapsed:not(.auth-required) .module-panel,
body:not(.auth-required).sidebar-collapsed .module-panel {
padding: 5px !important;
gap: 6px !important;
}
body:not(.auth-required) .layout > .panel,
body:not(.auth-required) .layout.media-tool-layout .workbench,
body:not(.auth-required) .layout.media-tool-layout .monitor {
padding: 7px !important;
border-radius: 12px !important;
}
body:not(.auth-required) .tab-panel,
body:not(.auth-required) .tool-panel.active {
padding: 7px !important;
gap: 6px !important;
}
body:not(.auth-required) .tabs,
body:not(.auth-required) .tool-mode-tabs,
body:not(.auth-required) .layout.media-tool-layout .tool-mode-tabs {
height: 28px !important;
min-height: 28px !important;
max-height: 28px !important;
border-radius: 12px 12px 0 0 !important;
}
body:not(.auth-required) .tab,
body:not(.auth-required) .tool-mode-tab {
min-height: 28px !important;
height: 28px !important;
font-size: 11px !important;
line-height: 1 !important;
}
body:not(.auth-required) :where(.tool-card, .upload-box, .advanced, .drop-zone):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
padding: var(--mobile-card-pad) !important;
margin-bottom: 6px !important;
border-radius: 11px !important;
}
body:not(.auth-required) .upload-box {
gap: 7px !important;
}
body:not(.auth-required) .drop-zone {
gap: 5px !important;
}
body:not(.auth-required) :where(.upload-box strong, .drop-zone strong, .tool-card h2, .advanced summary) {
font-size: 12px !important;
line-height: 1.25 !important;
}
body:not(.auth-required) :where(.drop-zone p, .file-summary, .plan-summary-inline, .model-capability-hint, small):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
font-size: var(--mobile-caption-font) !important;
line-height: 1.35 !important;
}
body:not(.auth-required) .file-summary,
body:not(.auth-required) .upload-box .file-summary {
min-height: 30px !important;
padding: 7px 9px !important;
border-radius: 10px !important;
}
body:not(.auth-required) .form-grid,
body:not(.auth-required) .quick-options,
body:not(.auth-required) .advanced .options-grid,
body:not(.auth-required) .layout.media-tool-layout .quick-options,
body:not(.auth-required) .layout.media-tool-layout .advanced .options-grid {
gap: var(--mobile-gap) !important;
}
body:not(.auth-required) :where(label, .form-grid label, .quick-options label, .advanced .options-grid label):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
gap: 4px !important;
font-size: var(--mobile-label-font) !important;
line-height: 1.18 !important;
}
body:not(.auth-required) :where(select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"])):where(:not([data-ui-unmanaged] *)) {
min-height: var(--mobile-control-height) !important;
height: var(--mobile-control-height) !important;
padding: 5px 8px !important;
border-radius: var(--mobile-control-radius) !important;
font-size: var(--mobile-font) !important;
line-height: 1.15 !important;
}
body:not(.auth-required) textarea {
min-height: 86px !important;
padding: 7px 8px !important;
border-radius: 10px !important;
font-size: var(--mobile-font) !important;
line-height: 1.38 !important;
}
body:not(.auth-required) #audioText,
body:not(.auth-required) #musicPrompt {
min-height: 108px !important;
}
body:not(.auth-required) :where(button, .button-link, .primary, .secondary, .danger):not([data-ui-compact-control]):not(.module-tab):not(.sidebar-toggle):not(.icon-button):not(.gen-icon-btn):not(.hl-float-btn):not(.hl-send-btn):not(.hl-like-pill):not(.hl-cta-primary):not(.hl-submit-btn):not(.hl-mod-chip):not(.hl-tool-btn):not(.hl-ref-del):not(.hl-cta-icon):not(.flow-mini-btn):not(.project-icon-btn):not(.canvas-edit-branch):not(.feed-detail-album-thumb):not(.hl-stage):not(.account-summary):not(.text-message-copy):not(.text-chat-delete-btn):not(.watermark-library-preview):not(.thumb-preview):not(.watermark-card):not(.watermark-layer-select):not(.infinite-card-run):not(.infinite-inline-reference-add):not(.infinite-inline-reference-pick):not(.infinite-inline-prompt-expand):not(.preview-canvas-tool):not(.workflow-media-library-select):not(.ob-rail-step):not(.app-more-id):not(.app-more-item):not(.account-page-row):not(.account-page-stat):not(.account-page-edit):not(.account-page-quick):not(.account-page-tab):not(.account-command-btn):not(.account-content-action):not(.account-resource-card):not(.account-card):not(.account-card-open):not(.account-card-more):not(.account-resource-more):not(.account-mini-item):not(.account-proj-pill):not(.account-page-project-open):not(.account-page-project-more):not(.account-page-projects-more):where(:not([data-ui-unmanaged] *)) {
min-height: var(--mobile-control-height) !important;
height: var(--mobile-control-height) !important;
padding: 0 9px !important;
border-radius: var(--mobile-control-radius) !important;
font-size: var(--mobile-font) !important;
line-height: 1 !important;
gap: 5px !important;
}
body:not(.auth-required) .command-row,
body:not(.auth-required) .command-row.compact,
body:not(.auth-required) .tool-result-actions,
body:not(.auth-required) .modal-tools {
gap: var(--mobile-gap) !important;
}
body:not(.auth-required) .drop-zone .command-row.compact > button,
body:not(.auth-required) .drop-zone .command-row.compact > .button-link,
body:not(.auth-required) .command-row > button,
body:not(.auth-required) .command-row > .button-link {
min-height: 32px !important;
height: 32px !important;
}
body:not(.auth-required) .advanced {
margin: 7px 0 !important;
}
body:not(.auth-required) .advanced summary {
min-height: 31px !important;
height: 31px !important;
padding: 0 9px !important;
}
body:not(.auth-required) .selected-preview {
gap: 6px !important;
padding: 6px !important;
max-height: 152px !important;
}
body:not(.auth-required) :where(.selected-thumb, .media-thumb, .workflow-media-library-card, .case-row, .case-select, .task-list-row, .task-row, .job-select, .media-library-card, .favorite-case-card) {
border-radius: 10px !important;
}
body:not(.auth-required) :where(.task-list-row, .task-row, .job-select, .case-select) {
min-height: 34px !important;
padding: 7px 8px !important;
gap: 6px !important;
font-size: 11px !important;
}
body:not(.auth-required) :where(.task-list-row strong, .task-row strong, .job-select strong, .case-select strong) {
font-size: 11.5px !important;
line-height: 1.2 !important;
}
body:not(.auth-required) :where(.task-list-row small, .task-row small, .job-select small, .case-select small) {
font-size: 10px !important;
line-height: 1.25 !important;
}
body:not(.auth-required) .status-grid,
body:not(.auth-required) .stats-grid,
body:not(.auth-required) .task-stats-grid {
gap: 5px !important;
}
body:not(.auth-required) :where(.stat-card, .monitor-stat, .stats-grid > div, .task-stats-grid > div) {
min-height: 40px !important;
padding: 6px !important;
border-radius: 9px !important;
}
body:not(.auth-required) :where(.stat-card strong, .monitor-stat strong, .stats-grid strong, .stats-grid b, .task-stats-grid strong, .task-stats-grid b) {
font-size: 15.5px !important;
line-height: 1.05 !important;
}
body:not(.auth-required) :where(.stat-card small, .monitor-stat small, .stats-grid small, .task-stats-grid small) {
font-size: 9.5px !important;
}
body:not(.auth-required) .workflow-media-library-card,
body:not(.auth-required) .media-library-card,
body:not(.auth-required) .favorite-case-card {
padding: 7px !important;
gap: 6px !important;
}
body:not(.auth-required) .workflow-media-library-preview {
height: auto !important;
min-height: 0 !important;
aspect-ratio: var(--workflow-media-preview-ratio, 1 / 1) !important;
border-radius: 8px !important;
}
body:not(.auth-required) .workflow-media-library-actions button,
body:not(.auth-required) .case-row > button,
body:not(.auth-required) .account-usage-tools button {
min-height: 28px !important;
height: 28px !important;
padding: 0 8px !important;
font-size: 10.5px !important;
border-radius: 8px !important;
}
body:not(.auth-required) .mobile-select-sheet {
border-radius: 16px 16px 0 0 !important;
}
body:not(.auth-required) .mobile-select-head {
padding: 10px 12px 8px !important;
}
body:not(.auth-required) .mobile-select-option {
min-height: 36px !important;
padding: 0 10px !important;
border-radius: 10px !important;
font-size: 12px !important;
}
}
@media (max-width: 360px) {
body:not(.auth-required) {
--mobile-menu-btn: 30px;
--mobile-menu-tile: 26px;
--mobile-menu-svg: 13.5px;
--mobile-menu-pad-x: 7px;
--mobile-menu-gap: 4px;
--mobile-control-height: 30px;
--mobile-font: 11.5px;
--mobile-label-font: 10.5px;
--mobile-caption-font: 10px;
}
body:not(.sidebar-collapsed):not(.auth-required) .topbar #accountSummary.account-summary.account-summary-points {
min-width: 68px !important;
max-width: 82px !important;
padding: 0 5px !important;
}
body:not(.auth-required) .brand-logo-full,
body.sidebar-collapsed:not(.auth-required) .brand-logo-full,
body:not(.auth-required).sidebar-collapsed .brand-logo-full {
width: clamp(68px, 23vw, 86px) !important;
max-width: clamp(68px, 23vw, 86px) !important;
}
body:not(.auth-required) #audioText,
body:not(.auth-required) #musicPrompt {
min-height: 100px !important;
}
}
@media (max-width: 820px) {
body:not(.auth-required) header.topbar .module-tab.has-ui-icon > .ui-icon,
body.sidebar-collapsed:not(.auth-required) header.topbar .module-tab.has-ui-icon > .ui-icon,
body:not(.auth-required).sidebar-collapsed header.topbar .module-tab.has-ui-icon > .ui-icon,
body:not(.auth-required) header.topbar .icon-button.has-ui-icon > .ui-icon,
body.sidebar-collapsed:not(.auth-required) header.topbar .icon-button.has-ui-icon > .ui-icon,
body:not(.auth-required).sidebar-collapsed header.topbar .icon-button.has-ui-icon > .ui-icon,
body:not(.auth-required) header.topbar #accountSummary.account-summary > .ui-icon,
body.sidebar-collapsed:not(.auth-required) header.topbar #accountSummary.account-summary > .ui-icon,
body:not(.auth-required).sidebar-collapsed header.topbar #accountSummary.account-summary > .ui-icon,
body:not(.auth-required) #sidebarToggleBtn.sidebar-toggle.has-ui-icon > .ui-icon,
body.sidebar-collapsed:not(.auth-required) #sidebarToggleBtn.sidebar-toggle.has-ui-icon > .ui-icon,
body:not(.auth-required).sidebar-collapsed #sidebarToggleBtn.sidebar-toggle.has-ui-icon > .ui-icon {
padding: 0 !important;
display: grid !important;
place-items: center !important;
place-content: center !important;
align-items: center !important;
justify-items: center !important;
line-height: 0 !important;
text-align: center !important;
}
body:not(.auth-required) header.topbar .module-tab.has-ui-icon > .ui-icon svg,
body.sidebar-collapsed:not(.auth-required) header.topbar .module-tab.has-ui-icon > .ui-icon svg,
body:not(.auth-required).sidebar-collapsed header.topbar .module-tab.has-ui-icon > .ui-icon svg,
body:not(.auth-required) header.topbar .icon-button.has-ui-icon > .ui-icon svg,
body.sidebar-collapsed:not(.auth-required) header.topbar .icon-button.has-ui-icon > .ui-icon svg,
body:not(.auth-required).sidebar-collapsed header.topbar .icon-button.has-ui-icon > .ui-icon svg,
body:not(.auth-required) header.topbar #accountSummary.account-summary > .ui-icon svg,
body.sidebar-collapsed:not(.auth-required) header.topbar #accountSummary.account-summary > .ui-icon svg,
body:not(.auth-required).sidebar-collapsed header.topbar #accountSummary.account-summary > .ui-icon svg,
body:not(.auth-required) #sidebarToggleBtn.sidebar-toggle.has-ui-icon > .ui-icon svg,
body.sidebar-collapsed:not(.auth-required) #sidebarToggleBtn.sidebar-toggle.has-ui-icon > .ui-icon svg,
body:not(.auth-required).sidebar-collapsed #sidebarToggleBtn.sidebar-toggle.has-ui-icon > .ui-icon svg {
display: block !important;
margin: 0 !important;
position: static !important;
transform: none !important;
align-self: center !important;
justify-self: center !important;
}
body:not(.auth-required) header.topbar .account-points-icon,
body.sidebar-collapsed:not(.auth-required) header.topbar .account-points-icon,
body:not(.auth-required).sidebar-collapsed header.topbar .account-points-icon {
display: inline-grid !important;
place-items: center !important;
place-content: center !important;
padding: 0 !important;
line-height: 0 !important;
}
body:not(.auth-required) header.topbar .account-points-icon svg,
body.sidebar-collapsed:not(.auth-required) header.topbar .account-points-icon svg,
body:not(.auth-required).sidebar-collapsed header.topbar .account-points-icon svg {
display: block !important;
margin: 0 !important;
transform: none !important;
}
body:not(.auth-required) header.topbar #accountSummary.account-summary.has-ui-icon:not(.account-summary-points) > .ui-icon,
body.sidebar-collapsed:not(.auth-required) header.topbar #accountSummary.account-summary.has-ui-icon:not(.account-summary-points) > .ui-icon,
body:not(.auth-required).sidebar-collapsed header.topbar #accountSummary.account-summary.has-ui-icon:not(.account-summary-points) > .ui-icon {
width: 28px !important;
min-width: 28px !important;
max-width: 28px !important;
height: 28px !important;
min-height: 28px !important;
max-height: 28px !important;
}
body:not(.auth-required) header.topbar #accountSummary.account-summary.has-ui-icon:not(.account-summary-points),
body.sidebar-collapsed:not(.auth-required) header.topbar #accountSummary.account-summary.has-ui-icon:not(.account-summary-points),
body:not(.auth-required).sidebar-collapsed header.topbar #accountSummary.account-summary.has-ui-icon:not(.account-summary-points) {
gap: 0 !important;
}
body:not(.auth-required) header.topbar #accountSummary.account-summary.has-ui-icon:not(.account-summary-points) .account-summary-text,
body.sidebar-collapsed:not(.auth-required) header.topbar #accountSummary.account-summary.has-ui-icon:not(.account-summary-points) .account-summary-text,
body:not(.auth-required).sidebar-collapsed header.topbar #accountSummary.account-summary.has-ui-icon:not(.account-summary-points) .account-summary-text {
display: none !important;
width: 0 !important;
min-width: 0 !important;
max-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
}
@media (max-width: 820px) {
body:not(.auth-required) #appLayout :is(select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"])):where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) #textTab > .form-grid:first-of-type input,
body:not(.auth-required) #imageTab > .form-grid:first-of-type input,
body:not(.auth-required) #videoToolTab .tool-card > .form-grid:first-of-type input,
body:not(.auth-required) #speechToolPanel .tool-card > .form-grid:first-of-type input,
body:not(.auth-required) #musicToolPanel .tool-card > .form-grid:first-of-type input,
body:not(.auth-required) #appLayout #text-model,
body:not(.auth-required) #appLayout #image-model,
body:not(.auth-required) #appLayout #videoToolModel,
body:not(.auth-required) #appLayout #speechModel,
body:not(.auth-required) #appLayout #musicModel {
height: var(--mobile-control-height) !important;
min-height: var(--mobile-control-height) !important;
max-height: var(--mobile-control-height) !important;
padding: 5px 8px !important;
border-radius: var(--mobile-control-radius) !important;
font-size: var(--mobile-font) !important;
line-height: 1.15 !important;
}
body:not(.auth-required) #appLayout .command-row > button,
body:not(.auth-required) #appLayout .command-row > .button-link,
body:not(.auth-required) #appLayout .command-row.compact > button,
body:not(.auth-required) #appLayout .command-row.compact > .button-link,
body:not(.auth-required) #appLayout .drop-zone .command-row.compact > button,
body:not(.auth-required) #appLayout .drop-zone .command-row.compact > .button-link,
body:not(.auth-required) #appLayout .command-row button.has-ui-icon,
body:not(.auth-required) #appLayout .tool-result-actions button.has-ui-icon,
body:not(.auth-required) #appLayout .monitor-actions button.has-ui-icon {
height: var(--mobile-control-height) !important;
min-height: var(--mobile-control-height) !important;
max-height: var(--mobile-control-height) !important;
padding: 0 9px !important;
border-radius: var(--mobile-control-radius) !important;
font-size: var(--mobile-font) !important;
line-height: 1 !important;
}
body:not(.auth-required) #appLayout .command-row button.has-ui-icon .ui-icon,
body:not(.auth-required) #appLayout .tool-result-actions button.has-ui-icon .ui-icon,
body:not(.auth-required) #appLayout .monitor-actions button.has-ui-icon .ui-icon {
width: 14px !important;
min-width: 14px !important;
height: 14px !important;
min-height: 14px !important;
}
body:not(.auth-required) #appLayout .tab-panel,
body:not(.auth-required) #appLayout .tool-panel.active {
padding: 7px !important;
}
body:not(.auth-required) #appLayout .upload-box,
body:not(.auth-required) #appLayout .drop-zone,
body:not(.auth-required) #appLayout .tool-card,
body:not(.auth-required) #appLayout .advanced {
padding: 8px !important;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .command-row > button,
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .command-row > .button-link,
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .command-row.compact > button,
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .command-row.compact > .button-link,
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .command-row button.has-ui-icon,
body:not(.auth-required) .layout.media-tool-layout .command-row > button,
body:not(.auth-required) .layout.media-tool-layout .command-row > .button-link,
body:not(.auth-required) .layout.media-tool-layout .command-row.compact > button,
body:not(.auth-required) .layout.media-tool-layout .command-row.compact > .button-link,
body:not(.auth-required) .layout.media-tool-layout .command-row button.has-ui-icon {
height: var(--mobile-control-height) !important;
min-height: var(--mobile-control-height) !important;
max-height: var(--mobile-control-height) !important;
padding: 0 9px !important;
border-radius: var(--mobile-control-radius) !important;
font-size: var(--mobile-font) !important;
line-height: 1 !important;
}
}
@media (max-width: 820px) {
body:not(.auth-required) {
--mobile-sub-control-height: 30px;
--mobile-sub-font: 11px;
--mobile-sub-label-font: 10.5px;
--mobile-sub-caption-font: 10px;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .advanced,
body:not(.auth-required) .layout.media-tool-layout .advanced {
padding: 7px !important;
margin: 6px 0 !important;
border-radius: 10px !important;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .advanced summary,
body:not(.auth-required) .layout.media-tool-layout .advanced summary {
min-height: 29px !important;
height: 29px !important;
padding: 0 8px !important;
border-radius: 9px !important;
font-size: 11px !important;
line-height: 1 !important;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .advanced .options-grid,
body:not(.auth-required) .layout.media-tool-layout .advanced .options-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 6px 7px !important;
margin: 7px 0 2px !important;
padding: 0 !important;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .advanced .options-grid label,
body:not(.auth-required) .layout.media-tool-layout .advanced .options-grid label {
min-height: 0 !important;
gap: 3px !important;
font-size: var(--mobile-sub-label-font) !important;
line-height: 1.16 !important;
letter-spacing: 0 !important;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .advanced .options-grid input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .advanced .options-grid select,
body:not(.auth-required) .layout.media-tool-layout .advanced .options-grid input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) .layout.media-tool-layout .advanced .options-grid select {
height: var(--mobile-sub-control-height) !important;
min-height: var(--mobile-sub-control-height) !important;
max-height: var(--mobile-sub-control-height) !important;
padding: 4px 7px !important;
border-radius: 8px !important;
font-size: var(--mobile-sub-font) !important;
line-height: 1.12 !important;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .advanced .options-grid input[type="checkbox"],
body:not(.auth-required) .layout.media-tool-layout .advanced .options-grid input[type="checkbox"],
body:not(.auth-required) .modal-panel input[type="checkbox"],
body:not(.auth-required) .account-usage-panel input[type="checkbox"],
body:not(.auth-required) .workflow-media-library-panel input[type="checkbox"],
body:not(.auth-required) .canvas-image-edit-panel input[type="checkbox"],
body:not(.auth-required) .canvas-video-edit-panel input[type="checkbox"] {
width: 14px !important;
min-width: 14px !important;
max-width: 14px !important;
height: 14px !important;
min-height: 14px !important;
max-height: 14px !important;
border-radius: 4px !important;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .advanced .options-grid label:has(input[type="checkbox"]),
body:not(.auth-required) .layout.media-tool-layout .advanced .options-grid label:has(input[type="checkbox"]) {
min-height: 25px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 5px !important;
font-size: var(--mobile-sub-label-font) !important;
}
body:not(.auth-required) :is(.modal-panel, .preview-panel, .media-preview-panel, .watermark-panel, .watermark-picker-panel, .workflow-project-panel, .workflow-media-library-panel, .canvas-project-panel, .command-palette-panel, .account-usage-panel, .canvas-image-edit-panel, .canvas-image-angle-panel, .canvas-image-crop-panel, .canvas-image-split-panel, .canvas-image-erase-panel, .canvas-video-edit-panel, .panorama-preview-panel):where(:not([data-ui-unmanaged], [data-ui-unmanaged] *)) {
padding-block: var(--ui-panel-padding-block, 8px) !important;
padding-inline: var(--ui-panel-padding-inline, 8px) !important;
border-radius: 13px !important;
gap: var(--ui-panel-gap, 7px) !important;
font-size: var(--mobile-sub-font) !important;
}
body:not(.auth-required) :is(.modal-panel, .preview-panel, .media-preview-panel, .watermark-panel, .watermark-picker-panel, .workflow-project-panel, .workflow-media-library-panel, .canvas-project-panel, .command-palette-panel, .account-usage-panel, .canvas-image-edit-panel, .canvas-image-angle-panel, .canvas-image-crop-panel, .canvas-image-split-panel, .canvas-image-erase-panel, .canvas-video-edit-panel, .panorama-preview-panel) :is(h2, h3, strong):where(:not([data-ui-unmanaged], [data-ui-unmanaged] *)) {
line-height: 1.2 !important;
}
body:not(.auth-required) :is(.modal-panel, .workflow-project-panel, .workflow-media-library-panel, .canvas-project-panel, .command-palette-panel, .account-usage-panel, .watermark-panel, .canvas-image-edit-panel, .canvas-image-angle-panel, .canvas-video-edit-panel) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select):where(:not([data-ui-unmanaged], [data-ui-unmanaged] *)) {
height: var(--mobile-sub-control-height) !important;
min-height: var(--mobile-sub-control-height) !important;
max-height: var(--mobile-sub-control-height) !important;
padding: 4px 7px !important;
border-radius: 8px !important;
font-size: var(--mobile-sub-font) !important;
}
body:not(.auth-required) :is(.modal-panel, .workflow-project-panel, .workflow-media-library-panel, .canvas-project-panel, .command-palette-panel, .account-usage-panel, .watermark-panel, .canvas-image-edit-panel, .canvas-image-angle-panel, .canvas-video-edit-panel) textarea:where(:not([data-ui-unmanaged], [data-ui-unmanaged] *)) {
min-height: 72px !important;
padding: 7px !important;
border-radius: 9px !important;
font-size: var(--mobile-sub-font) !important;
line-height: 1.34 !important;
}
body:not(.auth-required) :is(.modal-panel, .workflow-project-panel, .workflow-media-library-panel, .canvas-project-panel, .command-palette-panel, .account-usage-panel, .watermark-panel, .canvas-image-edit-panel, .canvas-image-angle-panel, .canvas-video-edit-panel) :is(button, .button-link, .primary, .secondary, .danger):not(.icon-button):not(.preview-canvas-tool):not(.feed-detail-album-thumb):not(.ob-rail-step):not(.hl-stage):where(:not([data-ui-unmanaged], [data-ui-unmanaged] *)) {
height: var(--mobile-sub-control-height) !important;
min-height: var(--mobile-sub-control-height) !important;
max-height: var(--mobile-sub-control-height) !important;
padding: 0 8px !important;
border-radius: 8px !important;
font-size: var(--mobile-sub-font) !important;
line-height: 1 !important;
}
body:not(.auth-required) :is(.workflow-project-tools, .canvas-project-tools, .workflow-media-library-tools, .account-usage-tools, .modal-tools, .watermark-library-actions, .watermark-template-actions) {
gap: 5px !important;
}
body:not(.auth-required) :is(.case-list, .favorite-case-list, .media-library-grid, .account-usage-history) {
gap: 6px !important;
}
body:not(.auth-required) .workflow-media-library-list {
column-gap: 6px !important;
}
body:not(.auth-required) :is(.workflow-media-library-card, .case-row, .favorite-case-card, .media-library-card, .account-usage-row) {
padding: 6px !important;
gap: 6px !important;
border-radius: 9px !important;
font-size: var(--mobile-sub-font) !important;
}
body:not(.auth-required) .mobile-select-option {
min-height: 32px !important;
padding: 0 9px !important;
font-size: var(--mobile-sub-font) !important;
}
body:not(.auth-required) :is(.canvas-image-angle-panel, .canvas-video-edit-panel, .canvas-image-erase-panel) input[type="range"] {
height: 22px !important;
min-height: 22px !important;
max-height: 22px !important;
padding: 0 !important;
}
body:not(.auth-required) :is(.canvas-image-angle-row, .canvas-image-angle-toggle, .canvas-image-erase-tools, .canvas-video-edit-tools) {
gap: 6px !important;
font-size: var(--mobile-sub-label-font) !important;
line-height: 1.2 !important;
}
}
@media (max-width: 360px) {
body:not(.auth-required) {
--mobile-sub-control-height: 28px;
--mobile-sub-font: 10.5px;
--mobile-sub-label-font: 10px;
--mobile-sub-caption-font: 9.5px;
}
}
body:not(.auth-required) {
--ui-action-height: var(--scale-button-height);
--ui-content-font: var(--scale-font-body);
--ui-label-font: var(--scale-font-label);
--ui-caption-font: var(--scale-font-caption);
--mobile-control-height: var(--scale-control-height);
--mobile-sub-control-height: var(--scale-control-height);
--mobile-font: var(--scale-font-body);
--mobile-label-font: var(--scale-font-label);
--mobile-caption-font: var(--scale-font-caption);
--mobile-sub-font: var(--scale-font-body);
--mobile-sub-label-font: var(--scale-font-label);
--mobile-sub-caption-font: var(--scale-font-caption);
font-size: var(--scale-font-body);
}
body:not(.auth-required) :where(.workbench, .monitor, .tool-card, .upload-box, .drop-zone, .advanced, .modal-panel:where(:not([data-ui-unmanaged])):not(.poser-studio-panel), .preview-panel, .media-preview-panel, .workflow-project-panel, .workflow-media-library-panel, .canvas-project-panel, .command-palette-panel, .account-usage-panel, .canvas-image-edit-panel, .canvas-image-angle-panel, .canvas-image-crop-panel, .canvas-image-split-panel, .canvas-image-erase-panel, .canvas-video-edit-panel, .panorama-preview-panel, .watermark-panel, .watermark-picker-panel):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
font-size: var(--scale-font-body) !important;
border-radius: var(--scale-radius-panel) !important;
}
body:not(.auth-required) :where(.workbench, .monitor, .tool-card, .upload-box, .drop-zone, .advanced):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
padding: var(--scale-panel-padding) !important;
gap: var(--scale-gap) !important;
}
body:not(.auth-required) :where(.modal-panel:where(:not([data-ui-unmanaged])):not(.poser-studio-panel), .preview-panel, .media-preview-panel, .workflow-project-panel, .workflow-media-library-panel, .canvas-project-panel, .command-palette-panel, .account-usage-panel, .canvas-image-edit-panel, .canvas-image-angle-panel, .canvas-image-crop-panel, .canvas-image-split-panel, .canvas-image-erase-panel, .canvas-video-edit-panel, .panorama-preview-panel, .watermark-panel, .watermark-picker-panel):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
padding-block: var(--ui-panel-padding-block, var(--scale-panel-padding)) !important;
padding-inline: var(--ui-panel-padding-inline, var(--scale-panel-padding)) !important;
gap: var(--ui-panel-gap, var(--scale-gap)) !important;
}
body:not(.auth-required) :where(.tool-page-head, .monitor-header, .modal-head, .workflow-toolbar, .infinite-canvas-toolbar, .workflow-project-tools, .canvas-project-tools, .workflow-media-library-tools, .account-usage-tools, .modal-tools, .watermark-editor-toolbar, .watermark-library-actions, .canvas-editor-toolbar):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
min-height: var(--scale-toolbar-height) !important;
gap: var(--scale-gap) !important;
}
body:not(.auth-required) :where(h2, .tool-page-head h2, .monitor-title h2, .modal-head h2, .account-usage-panel h2, .command-palette-panel h2, .workflow-inspector h3, .canvas-inspector h3, .text-chat-brand strong):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
font-size: var(--scale-font-title) !important;
line-height: 1.22 !important;
}
body:not(.auth-required) :where(h3, summary, .section-title, .field-title, .drop-zone strong, .upload-box strong, .monitor-title strong, .task-list-row strong, .case-info strong, .favorite-case-card strong, .media-library-card strong, .workflow-node-title, .canvas-node-title):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
font-size: var(--scale-font-section) !important;
line-height: 1.22 !important;
}
body:not(.auth-required) :where(label, .field-label, .mini-label, .task-meta-label, .setting-label, .option-label, .form-row label, .options-grid label):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
font-size: var(--scale-font-label) !important;
line-height: 1.2 !important;
}
body:not(.auth-required) :where(p, small, .muted, .hint, .subtle, .help-text, .drop-zone p, .upload-box p, .task-meta, .case-meta, .file-summary, .plan-summary-inline, .media-meta, .workflow-node-subtitle, .canvas-node-subtitle, .account-usage-row small):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
font-size: var(--scale-font-caption) !important;
line-height: 1.28 !important;
}
body:not(.auth-required) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select):where(:not([data-ui-unmanaged] *)) {
min-height: var(--scale-control-height) !important;
height: var(--scale-control-height) !important;
border-radius: var(--scale-radius-control) !important;
font-size: var(--scale-font-body) !important;
line-height: 1.15 !important;
padding: 0 8px !important;
text-indent: var(--hui-control-prefix-indent, 0) !important;
}
body:not(.auth-required) :where(textarea):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
border-radius: var(--scale-radius-control) !important;
font-size: var(--scale-font-body) !important;
line-height: 1.36 !important;
padding: 8px !important;
}
body:not(.auth-required) :where(button, .button-link, .primary, .secondary, .danger, .ghost-button):not([data-ui-compact-control]):not(.module-tab):not(.sidebar-toggle):not(.icon-button):not(.gen-icon-btn):not(.hl-float-btn):not(.hl-send-btn):not(.hl-like-pill):not(.hl-cta-primary):not(.hl-submit-btn):not(.hl-mod-chip):not(.hl-tool-btn):not(.hl-ref-del):not(.hl-cta-icon):not(.flow-mini-btn):not(.project-icon-btn):not(.canvas-edit-branch):not(.feed-detail-album-thumb):not(.account-summary):not(.text-message-copy):not(.text-chat-delete-btn):not(.watermark-library-preview):not(.thumb-preview):not(.watermark-card):not(.watermark-layer-select):not(.infinite-card-run):not(.infinite-inline-reference-add):not(.infinite-inline-reference-pick):not(.infinite-inline-prompt-expand):not(.preview-canvas-tool):not(.workflow-media-library-select):not(.app-more-id):not(.app-more-item):not(.account-page-row):not(.account-page-stat):not(.account-page-edit):not(.account-page-quick):not(.account-page-tab):not(.account-command-btn):not(.account-content-action):not(.account-resource-card):not(.account-card):not(.account-card-open):not(.account-card-more):not(.account-resource-more):not(.account-mini-item):not(.account-proj-pill):not(.account-page-project-open):not(.account-page-project-more):not(.account-page-projects-more):not(.ob-rail-step):not(.hl-stage):where(:not([data-ui-unmanaged] *)) {
min-height: var(--scale-button-height) !important;
height: var(--scale-button-height) !important;
border-radius: var(--scale-radius-control) !important;
font-size: var(--scale-font-body) !important;
line-height: 1 !important;
padding: 0 9px !important;
}
body:not(.auth-required) :where(.task-list-row, .task-row, .job-select, .case-select, .case-row, .favorite-case-card, .media-library-card, .workflow-media-library-card, .account-usage-row, .mobile-select-option):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
min-height: var(--scale-row-height) !important;
border-radius: var(--scale-radius-control) !important;
padding: var(--scale-card-padding) !important;
gap: var(--scale-gap) !important;
font-size: var(--scale-font-body) !important;
}
body:not(.auth-required) :where(.result-stats .stat, .usage-card, .summary-card, .metric-card, .account-usage-stat):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
min-height: var(--scale-row-height) !important;
padding: var(--scale-card-padding) !important;
border-radius: var(--scale-radius-control) !important;
}
body:not(.auth-required) :where(.result-stats .stat strong, .usage-card strong, .summary-card strong, .metric-card strong, .account-usage-stat strong):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
font-size: calc(var(--scale-font-title) + 1px) !important;
line-height: 1.12 !important;
}
body:not(.auth-required) :where(input[type="checkbox"]) {
width: 14px !important;
min-width: 14px !important;
height: 14px !important;
min-height: 14px !important;
border-radius: 4px !important;
}
@media (max-width: 820px) {
:root {
--scale-font-body: 10.8px;
--scale-font-label: 10px;
--scale-font-caption: 9.3px;
--scale-font-title: 13.5px;
--scale-font-section: 11.5px;
--scale-control-height: 28px;
--scale-button-height: 28px;
--scale-toolbar-height: 30px;
--scale-row-height: 31px;
--scale-panel-padding: 8px;
--scale-card-padding: 6px;
--scale-gap: 6px;
--scale-radius-panel: 11px;
--scale-radius-control: 8px;
}
body:not(.auth-required) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select):where(:not([data-ui-unmanaged] *)) {
padding: 0 7px !important;
}
body:not(.auth-required) :where(button, .button-link, .primary, .secondary, .danger, .ghost-button):not([data-ui-compact-control]):not(.module-tab):not(.sidebar-toggle):not(.icon-button):not(.gen-icon-btn):not(.hl-float-btn):not(.hl-send-btn):not(.hl-like-pill):not(.hl-cta-primary):not(.hl-submit-btn):not(.hl-mod-chip):not(.hl-tool-btn):not(.hl-ref-del):not(.hl-cta-icon):not(.flow-mini-btn):not(.project-icon-btn):not(.canvas-edit-branch):not(.feed-detail-album-thumb):not(.hl-stage):not(.account-summary):not(.text-message-copy):not(.text-chat-delete-btn):not(.watermark-library-preview):not(.thumb-preview):not(.watermark-card):not(.watermark-layer-select):not(.infinite-card-run):not(.infinite-inline-reference-add):not(.infinite-inline-reference-pick):not(.infinite-inline-prompt-expand):not(.preview-canvas-tool):not(.workflow-media-library-select):not(.ob-rail-step):not(.app-more-id):not(.app-more-item):not(.account-page-row):not(.account-page-stat):not(.account-page-edit):not(.account-page-quick):not(.account-page-tab):not(.account-command-btn):not(.account-content-action):not(.account-resource-card):not(.account-card):not(.account-card-open):not(.account-card-more):not(.account-resource-more):not(.account-mini-item):not(.account-proj-pill):not(.account-page-project-open):not(.account-page-project-more):not(.account-page-projects-more):where(:not([data-ui-unmanaged] *)) {
padding: 0 8px !important;
}
}
@media (max-width: 360px) {
:root {
--scale-font-body: 10.2px;
--scale-font-label: 9.6px;
--scale-font-caption: 9px;
--scale-font-title: 13px;
--scale-font-section: 11px;
--scale-control-height: 27px;
--scale-button-height: 27px;
--scale-row-height: 30px;
--scale-panel-padding: 7px;
--scale-gap: 5px;
}
}
@media (max-width: 820px) {
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .quick-options :is(select, input),
body:not(.auth-required) .layout.media-tool-layout .quick-options :is(select, input),
body:not(.auth-required) .layout.media-tool-layout #videoToolTab .quick-options :is(select, input),
body:not(.auth-required) .layout.media-tool-layout #audioToolTab .quick-options :is(select, input),
body:not(.auth-required) .layout.media-tool-layout #audioToolTab .music-options :is(select, input),
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .advanced .options-grid :is(select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"])):where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) .layout.media-tool-layout .advanced .options-grid :is(select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"])):where(:not([data-ui-unmanaged] *)) {
min-height: var(--scale-control-height) !important;
height: var(--scale-control-height) !important;
max-height: var(--scale-control-height) !important;
padding: 0 7px !important;
border-radius: var(--scale-radius-control) !important;
font-size: var(--scale-font-body) !important;
line-height: 1.15 !important;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .advanced summary,
body:not(.auth-required) .layout.media-tool-layout .advanced summary,
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .workbench > .tabs .tab,
body:not(.auth-required) .layout.media-tool-layout .tool-page-head {
min-height: var(--scale-toolbar-height) !important;
height: auto !important;
padding: 6px 8px !important;
border-radius: var(--scale-radius-control) !important;
font-size: var(--scale-font-body) !important;
line-height: 1.15 !important;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .advanced .options-grid label,
body:not(.auth-required) .layout.media-tool-layout .advanced .options-grid label,
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .quick-options label,
body:not(.auth-required) .layout.media-tool-layout .quick-options label {
font-size: var(--scale-font-label) !important;
line-height: 1.18 !important;
gap: 4px !important;
}
body:not(.auth-required) .mobile-select-option {
min-height: var(--scale-row-height) !important;
padding: 0 8px !important;
border-radius: var(--scale-radius-control) !important;
font-size: var(--scale-font-body) !important;
}
}
body:not(.auth-required) :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone).drop-zone {
padding: 0 !important;
min-height: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
gap: 0 !important;
}
body:not(.auth-required) :is(#chooseTextRefsBtn, #chooseMainImagesBtn, #chooseSharedRefsBtn, #chooseVideoRefsBtn, #chooseMusicAudioBtn)[hidden] {
display: none !important;
}
body:not(.auth-required) .upload-zone-head {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
min-height: 26px !important;
width: 100% !important;
}
body:not(.auth-required) .upload-zone-actions {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 6px !important;
min-width: 0 !important;
}
body:not(.auth-required) .upload-clear-btn:where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) .upload-zone-actions > button:where(:not([data-ui-unmanaged] *)) {
min-height: 24px !important;
height: 24px !important;
padding: 0 8px !important;
border-radius: 8px !important;
font-size: var(--scale-font-caption) !important;
line-height: 1 !important;
}
body:not(.auth-required) .file-summary-picker {
display: flex !important;
align-items: center !important;
min-height: 40px !important;
padding: 8px 10px !important;
cursor: var(--media-drop-cursor, pointer) !important;
border-style: dashed !important;
transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease !important;
}
body:not(.auth-required) .file-summary-picker:hover,
body:not(.auth-required) .file-summary-picker:focus-visible,
body:not(.auth-required) .file-summary-picker.drag-over {
border-color: var(--media-drop-border, rgba(47, 109, 183, 0.7)) !important;
background: var(--media-drop-surface, rgba(234, 242, 251, 0.9)) !important;
box-shadow: var(--media-drop-shadow, 0 0 0 2px rgba(47, 109, 183, 0.08)) !important;
outline: var(--media-drop-outline, none) !important;
}
body.theme-dark:not(.auth-required) .file-summary-picker:hover,
body.theme-dark:not(.auth-required) .file-summary-picker:focus-visible,
body.theme-dark:not(.auth-required) .file-summary-picker.drag-over {
background: var(--media-drop-surface, rgba(47, 109, 183, 0.18)) !important;
box-shadow: var(--media-drop-shadow, 0 0 0 2px rgba(90, 166, 232, 0.12)) !important;
}
body:not(.auth-required) :is(#audioText, #musicPrompt, #videoNegativePrompt) {
min-height: 68px !important;
height: 78px;
}
body:not(.auth-required) details.advanced {
width: 100% !important;
max-width: 100% !important;
margin: 8px 0 !important;
padding: 0 !important;
border: 1px solid var(--advanced-border, #dce6ef) !important;
border-radius: 12px !important;
background: var(--advanced-bg, #f8fbfd) !important;
box-shadow: var(--advanced-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.72)) !important;
overflow: hidden !important;
}
body:not(.auth-required) details.advanced[open] {
padding: 7px !important;
background: var(--advanced-open-bg, #ffffff) !important;
}
body:not(.auth-required) details.advanced summary,
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .advanced summary,
body:not(.auth-required) .layout.media-tool-layout .advanced summary {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
width: 100% !important;
min-width: 0 !important;
min-height: 30px !important;
height: 30px !important;
max-height: 30px !important;
margin: 0 !important;
padding: 0 10px !important;
border: 0 !important;
border-radius: 11px !important;
background: var(--advanced-summary-bg, #ffffff) !important;
color: var(--advanced-summary-color, #344054) !important;
box-shadow: var(--advanced-summary-shadow, 0 1px 2px rgba(16, 24, 40, 0.03)) !important;
font-size: 12px !important;
font-weight: 760 !important;
line-height: 1 !important;
letter-spacing: 0 !important;
list-style: none !important;
cursor: pointer !important;
user-select: none !important;
box-sizing: border-box !important;
}
body:not(.auth-required) details.advanced[open] summary {
margin: -7px -7px 7px !important;
width: calc(100% + 14px) !important;
border-bottom: 1px solid var(--advanced-border, #dce6ef) !important;
border-radius: 11px 11px 0 0 !important;
background: var(--advanced-summary-open-bg, #f9fafc) !important;
box-shadow: none !important;
}
body:not(.auth-required) details.advanced summary::-webkit-details-marker {
display: none !important;
}
body:not(.auth-required) details.advanced summary::marker {
content: "" !important;
}
body:not(.auth-required) details.advanced summary::after {
content: "" !important;
flex: 0 0 7px !important;
width: 7px !important;
height: 7px !important;
border-right: 1.5px solid var(--advanced-arrow, #64748b) !important;
border-bottom: 1.5px solid var(--advanced-arrow, #64748b) !important;
transform: rotate(45deg) translateY(-2px) !important;
transition: transform 0.14s ease !important;
}
body:not(.auth-required) details.advanced[open] summary::after {
transform: rotate(225deg) translate(-1px, -1px) !important;
}
body:not(.auth-required) details.advanced:not([open]) > summary {
background: var(--advanced-summary-bg, #ffffff) !important;
color: var(--advanced-summary-color, #344054) !important;
}
body:not(.auth-required) details.advanced:not([open]) > summary:hover {
color: var(--advanced-summary-hover-color, #255a9c) !important;
background: var(--advanced-summary-hover-bg, #f3f8fd) !important;
}
body.theme-dark:not(.auth-required) details.advanced {
border-color: var(--advanced-border) !important;
background: var(--advanced-bg) !important;
box-shadow: var(--advanced-shadow) !important;
}
body.theme-dark:not(.auth-required) details.advanced[open] {
background: var(--advanced-open-bg) !important;
}
body.theme-dark:not(.auth-required) details.advanced:not([open]) > summary {
background: var(--advanced-summary-bg) !important;
color: var(--advanced-summary-color) !important;
}
body.theme-dark:not(.auth-required) details.advanced:not([open]) > summary:hover {
background: var(--advanced-summary-hover-bg) !important;
color: var(--advanced-summary-hover-color) !important;
}
body.theme-dark:not(.auth-required) details.advanced[open] summary {
border-bottom-color: var(--advanced-border) !important;
background: var(--advanced-summary-open-bg) !important;
}
body.theme-dark:not(.auth-required) details.advanced summary::after {
border-color: var(--advanced-arrow) !important;
}
@media (max-width: 820px) {
body:not(.auth-required) .upload-box {
gap: 6px !important;
padding: 8px !important;
}
body:not(.auth-required) .upload-zone-head {
min-height: 22px !important;
}
body:not(.auth-required) .upload-clear-btn,
body:not(.auth-required) .upload-zone-actions > button {
min-height: 22px !important;
height: 22px !important;
padding: 0 7px !important;
}
body:not(.auth-required) .file-summary-picker {
min-height: 36px !important;
padding: 7px 9px !important;
}
body:not(.auth-required) :is(#audioText, #musicPrompt, #videoNegativePrompt) {
min-height: 58px !important;
height: 66px;
}
body:not(.auth-required) details.advanced summary,
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .advanced summary,
body:not(.auth-required) .layout.media-tool-layout .advanced summary {
min-height: 18px !important;
height: 18px !important;
padding: 0 7px !important;
font-size: var(--scale-font-caption) !important;
}
}
@media (max-width: 360px) {
body:not(.auth-required) .upload-box {
padding: 7px !important;
}
body:not(.auth-required) .file-summary-picker {
min-height: 34px !important;
padding: 6px 8px !important;
}
}
body:not(.auth-required) #appLayout :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone).drop-zone,
body:not(.auth-required) .layout.media-tool-layout #videoToolTab #videoRefDropZone.drop-zone {
padding: 0 !important;
min-height: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body:not(.auth-required) #appLayout :is(#clearTextRefsBtn, #clearMainImagesBtn, #clearSharedRefsBtn).upload-clear-btn,
body:not(.auth-required) #appLayout :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone) .ref-lib-btn,
body:not(.auth-required) #appLayout #chooseMainFolderBtn,
body:not(.auth-required) .layout.media-tool-layout #videoToolTab #videoRefDropZone .ref-lib-btn,
body:not(.auth-required) .layout.media-tool-layout #videoToolTab #clearVideoRefsBtn.upload-clear-btn {
min-height: 24px !important;
height: 24px !important;
max-height: 24px !important;
padding: 0 8px !important;
border-radius: 8px !important;
font-size: var(--scale-font-caption) !important;
line-height: 1 !important;
}
body:not(.auth-required) #appLayout :is(#textFileSummary, #fileSummary, #sharedFileSummary).file-summary-picker,
body:not(.auth-required) .layout.media-tool-layout #videoToolTab #videoFileSummary.file-summary-picker {
min-height: 40px !important;
padding: 8px 10px !important;
}
body:not(.auth-required) .layout.media-tool-layout #videoToolTab #videoNegativePrompt,
body:not(.auth-required) .layout.media-tool-layout #audioToolTab #audioText,
body:not(.auth-required) .layout.media-tool-layout #audioToolTab #musicPrompt {
min-height: 58px !important;
height: 68px;
}
body:not(.auth-required) #appLayout :is(#textTab, #imageTab) > details.advanced,
body:not(.auth-required) .layout.media-tool-layout :is(#videoToolTab, #audioToolTab) details.advanced {
padding: 0 !important;
margin: 8px 0 !important;
}
body:not(.auth-required) #appLayout :is(#textTab, #imageTab) > details.advanced[open],
body:not(.auth-required) .layout.media-tool-layout :is(#videoToolTab, #audioToolTab) details.advanced[open] {
padding: 7px !important;
}
body:not(.auth-required) #appLayout :is(#textTab, #imageTab) > details.advanced summary,
body:not(.auth-required) .layout.media-tool-layout :is(#videoToolTab, #audioToolTab) details.advanced summary {
min-height: 30px !important;
height: 30px !important;
max-height: 30px !important;
padding: 0 10px !important;
font-size: 12px !important;
line-height: 1 !important;
}
@media (max-width: 820px) {
body:not(.auth-required) #appLayout :is(#clearTextRefsBtn, #clearMainImagesBtn, #clearSharedRefsBtn).upload-clear-btn,
body:not(.auth-required) #appLayout :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone) .ref-lib-btn,
body:not(.auth-required) #appLayout #chooseMainFolderBtn,
body:not(.auth-required) .layout.media-tool-layout #videoToolTab #videoRefDropZone .ref-lib-btn,
body:not(.auth-required) .layout.media-tool-layout #videoToolTab #clearVideoRefsBtn.upload-clear-btn {
min-height: 22px !important;
height: 22px !important;
max-height: 22px !important;
padding: 0 7px !important;
}
body:not(.auth-required) #appLayout :is(#textFileSummary, #fileSummary, #sharedFileSummary).file-summary-picker,
body:not(.auth-required) .layout.media-tool-layout #videoToolTab #videoFileSummary.file-summary-picker {
min-height: 36px !important;
padding: 7px 9px !important;
}
body:not(.auth-required) .layout.media-tool-layout #videoToolTab #videoNegativePrompt,
body:not(.auth-required) .layout.media-tool-layout #audioToolTab #audioText,
body:not(.auth-required) .layout.media-tool-layout #audioToolTab #musicPrompt {
min-height: 52px !important;
height: 60px;
}
body:not(.auth-required) #appLayout :is(#textTab, #imageTab) > details.advanced summary,
body:not(.auth-required) .layout.media-tool-layout :is(#videoToolTab, #audioToolTab) details.advanced summary {
min-height: 28px !important;
height: 28px !important;
max-height: 28px !important;
padding: 0 9px !important;
}
}
body:not(.auth-required) :is(.context-menu, .canvas-add-menu, .canvas-item-menu) button,
body:not(.auth-required) .layout.canvas-layout :is(.context-menu, .canvas-add-menu, .canvas-item-menu) button {
height: auto !important;
max-height: none !important;
min-height: 36px !important;
align-items: center !important;
padding: 7px 9px !important;
border-radius: 10px !important;
font-size: 12px !important;
line-height: 1.25 !important;
}
body:not(.auth-required) :is(.context-menu, .canvas-add-menu, .canvas-item-menu) button.module-create,
body:not(.auth-required) .layout.canvas-layout :is(.context-menu, .canvas-add-menu, .canvas-item-menu) button.module-create {
min-height: 46px !important;
padding: 7px 9px !important;
}
body:not(.auth-required) .context-menu.canvas-add-menu {
width: min(340px, calc(100vw - 24px)) !important;
min-width: min(300px, calc(100vw - 24px)) !important;
max-width: calc(100vw - 24px) !important;
padding: 8px !important;
border-radius: 18px !important;
}
body:not(.auth-required) .context-menu.canvas-add-menu .context-label,
body:not(.auth-required) .context-menu.canvas-item-menu .context-label {
align-items: center !important;
gap: 10px !important;
width: 100% !important;
}
body:not(.auth-required) .context-menu.canvas-add-menu .context-copy,
body:not(.auth-required) .context-menu.canvas-item-menu .context-copy {
gap: 2px !important;
min-width: 0 !important;
}
body:not(.auth-required) .context-menu.canvas-add-menu .context-title-line,
body:not(.auth-required) .context-menu.canvas-item-menu .context-title-line {
font-size: 13px !important;
line-height: 1.2 !important;
min-width: 0 !important;
}
body:not(.auth-required) .context-menu.canvas-add-menu .context-description,
body:not(.auth-required) .context-menu.canvas-item-menu .context-description {
display: block !important;
overflow: hidden !important;
color: #667085 !important;
font-size: 11px !important;
line-height: 1.22 !important;
white-space: normal !important;
}
body:not(.auth-required) .context-menu.canvas-add-menu .context-color-badge,
body:not(.auth-required) .context-menu.canvas-item-menu .context-color-badge,
body:not(.auth-required) .context-menu.canvas-add-menu .context-icon,
body:not(.auth-required) .context-menu.canvas-item-menu .context-icon {
width: 28px !important;
height: 28px !important;
flex: 0 0 28px !important;
border-radius: 9px !important;
}
body:not(.auth-required) .context-menu.canvas-add-menu .context-color-badge svg,
body:not(.auth-required) .context-menu.canvas-item-menu .context-color-badge svg,
body:not(.auth-required) .context-menu.canvas-add-menu .context-icon svg,
body:not(.auth-required) .context-menu.canvas-item-menu .context-icon svg {
width: 14px !important;
height: 14px !important;
stroke-width: 1.6 !important;
}
body:not(.auth-required) .context-menu.canvas-add-menu .context-menu-heading {
height: auto !important;
min-height: 0 !important;
margin: 8px 4px 5px !important;
padding: 2px 2px 4px !important;
align-items: center !important;
font-size: 12px !important;
line-height: 1.2 !important;
}
body:not(.auth-required) .context-menu.canvas-add-menu .context-menu-heading:first-child {
margin-top: 2px !important;
font-size: 15px !important;
}
.litegraph.litecontextmenu .litemenu-entry,
.litegraph.litecontextmenu .litemenu-entry.submenu,
.litegraph.litecontextmenu .ai-lite-menu-node {
height: auto !important;
max-height: none !important;
}
.litegraph.litecontextmenu .ai-lite-menu-node {
min-height: 40px !important;
grid-template-columns: 28px minmax(0, 1fr) 12px !important;
gap: 10px !important;
padding: 7px 9px !important;
border-radius: 10px !important;
font-size: 13px !important;
line-height: 1.2 !important;
}
.litegraph.litecontextmenu .ai-lite-menu-badge,
.workflow-menu-drag-badge {
width: 28px !important;
height: 28px !important;
flex-basis: 28px !important;
border-radius: 9px !important;
}
.litegraph.litecontextmenu .ai-lite-menu-badge svg,
.workflow-menu-drag-badge svg {
width: 14px !important;
height: 14px !important;
stroke-width: 1.6 !important;
}
.graphdialog input.value,
.graphdialog textarea.value,
.graphdialog input,
.graphdialog textarea,
.graphdialog select {
height: auto !important;
max-height: none !important;
min-height: 34px !important;
padding: 7px 10px !important;
font-size: 13px !important;
line-height: 1.35 !important;
}
.graphdialog textarea.value,
.graphdialog textarea {
min-width: min(520px, calc(100vw - 72px)) !important;
min-height: 220px !important;
}
.graphdialog button,
.graphdialog button.rounded {
height: auto !important;
max-height: none !important;
min-height: 34px !important;
padding: 0 14px !important;
font-size: 13px !important;
line-height: 1 !important;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel :is(button, .infinite-card-run, .infinite-inline-reference-pick, .infinite-inline-reference-add):where(:not([data-ui-unmanaged])) {
max-height: none !important;
}
@media (max-width: 820px) {
body:not(.auth-required) .context-menu.canvas-add-menu {
width: min(312px, calc(100vw - 20px)) !important;
min-width: min(286px, calc(100vw - 20px)) !important;
padding: 7px !important;
}
body:not(.auth-required) .context-menu.canvas-add-menu button.module-create {
min-height: 42px !important;
}
body:not(.auth-required) .context-menu.canvas-add-menu .context-description {
font-size: 10.5px !important;
}
.graphdialog textarea.value,
.graphdialog textarea {
min-width: min(420px, calc(100vw - 54px)) !important;
min-height: 160px !important;
}
}
body:not(.auth-required) > .context-menu.context-menu button:not(.module-tab):not(.sidebar-toggle):not(.icon-button):not(.account-summary):not(.text-message-copy):not(.text-chat-delete-btn),
body:not(.auth-required) > .context-menu.context-menu.canvas-add-menu.canvas-add-menu button:not(.module-tab):not(.sidebar-toggle):not(.icon-button):not(.account-summary):not(.text-message-copy):not(.text-chat-delete-btn),
body:not(.auth-required) > .context-menu.context-menu.canvas-item-menu.canvas-item-menu button:not(.module-tab):not(.sidebar-toggle):not(.icon-button):not(.account-summary):not(.text-message-copy):not(.text-chat-delete-btn) {
height: auto !important;
max-height: none !important;
min-height: 38px !important;
padding: 7px 9px !important;
font-size: 12px !important;
line-height: 1.24 !important;
}
body:not(.auth-required) > .context-menu.context-menu.canvas-add-menu.canvas-add-menu button.module-create.module-create:not(.module-tab):not(.sidebar-toggle):not(.icon-button):not(.account-summary):not(.text-message-copy):not(.text-chat-delete-btn),
body:not(.auth-required) > .context-menu.context-menu.canvas-item-menu.canvas-item-menu button.module-create.module-create:not(.module-tab):not(.sidebar-toggle):not(.icon-button):not(.account-summary):not(.text-message-copy):not(.text-chat-delete-btn) {
min-height: 46px !important;
padding: 7px 9px !important;
}
body:not(.auth-required) > .context-menu.context-menu.canvas-add-menu.canvas-add-menu .context-color-badge,
body:not(.auth-required) > .context-menu.context-menu.canvas-add-menu.canvas-add-menu .context-icon,
body:not(.auth-required) > .context-menu.context-menu.canvas-item-menu.canvas-item-menu .context-color-badge,
body:not(.auth-required) > .context-menu.context-menu.canvas-item-menu.canvas-item-menu .context-icon {
width: 28px !important;
height: 28px !important;
flex: 0 0 28px !important;
}
body:not(.auth-required) > .graphdialog.graphdialog button:not(.module-tab):not(.sidebar-toggle):not(.icon-button):not(.account-summary):not(.text-message-copy):not(.text-chat-delete-btn),
body:not(.auth-required) > .litegraph.graphdialog.graphdialog button:not(.module-tab):not(.sidebar-toggle):not(.icon-button):not(.account-summary):not(.text-message-copy):not(.text-chat-delete-btn) {
height: auto !important;
max-height: none !important;
min-height: 34px !important;
padding: 0 14px !important;
font-size: 13px !important;
}
body:not(.auth-required) #appLayout.layout.canvas-layout .infinite-card-inline-panel.infinite-card-inline-panel button:not(.module-tab):not(.sidebar-toggle):not(.icon-button):not(.account-summary):not(.text-message-copy):not(.text-chat-delete-btn),
body:not(.auth-required) #appLayout.layout.canvas-layout .infinite-card-inline-panel.infinite-card-inline-panel .infinite-card-run:not(.module-tab):not(.sidebar-toggle):not(.icon-button):not(.account-summary):not(.text-message-copy):not(.text-chat-delete-btn) {
max-height: none !important;
}
body:not(.auth-required) #appLayout.layout.canvas-layout .infinite-card-inline-panel.infinite-card-inline-panel .infinite-inline-panel-body > .infinite-card-actions > .infinite-card-run:not(.module-tab):not(.sidebar-toggle):not(.icon-button):not(.account-summary):not(.text-message-copy):not(.text-chat-delete-btn) {
height: 30px !important;
min-height: 30px !important;
}
@media (max-width: 820px) {
body:not(.auth-required) > .context-menu.context-menu.canvas-add-menu.canvas-add-menu button.module-create.module-create:not(.module-tab):not(.sidebar-toggle):not(.icon-button):not(.account-summary):not(.text-message-copy):not(.text-chat-delete-btn) {
min-height: 42px !important;
}
}
@media (max-width: 820px) {
body:not(.auth-required) {
--mobile-topbar-expanded-offset: 106px;
--mobile-shell-x: 10px;
--mobile-shell-gap: 6px;
--mobile-icon-btn: 32px;
--mobile-control-h: 30px;
--mobile-control-radius: 9px;
--mobile-card-radius: 12px;
--mobile-panel-radius: 14px;
--mobile-pad-xs: 4px;
--mobile-pad-sm: 6px;
--mobile-pad-md: 8px;
--mobile-font: 11.5px;
--mobile-label: 10.5px;
--mobile-caption: 10px;
--mobile-title: 13px;
--font-ui: var(--mobile-font);
--font-label: var(--mobile-label);
--control-height: var(--mobile-control-h);
--button-height: var(--mobile-control-h);
--tab-height: 28px;
font-size: var(--mobile-font);
overflow-x: hidden;
}
body:not(.auth-required) .topbar {
position: fixed !important;
inset: 0 0 auto 0 !important;
z-index: var(--z-float-toolbar) !important;
width: 100vw !important;
height: var(--mobile-topbar-offset) !important;
min-height: var(--mobile-topbar-offset) !important;
padding: 7px 10px 6px !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto auto !important;
grid-template-rows: 38px 42px !important;
grid-template-areas:
"brand actions toggle"
"nav nav nav" !important;
gap: 5px 6px !important;
align-items: center !important;
overflow: hidden !important;
border-right: 0 !important;
border-bottom: 1px solid var(--border) !important;
box-shadow: 0 10px 22px rgba(15, 23, 42, 0.07) !important;
transition: none !important;
}
body:not(.auth-required) .brand-block {
grid-area: brand !important;
min-width: 0 !important;
height: 38px !important;
min-height: 38px !important;
padding: 0 !important;
border: 0 !important;
display: flex !important;
align-items: center !important;
}
body:not(.auth-required) .brand-row {
width: 100% !important;
display: block !important;
min-width: 0 !important;
}
body:not(.auth-required) .brand-text {
min-width: 0 !important;
display: flex !important;
align-items: center !important;
}
body:not(.auth-required) .brand-text h1 {
display: flex !important;
align-items: center !important;
min-width: 0 !important;
line-height: 1 !important;
}
body:not(.auth-required) .brand-logo-full,
body.sidebar-collapsed:not(.auth-required) .brand-logo-full,
body:not(.auth-required).sidebar-collapsed .brand-logo-full {
width: clamp(88px, 31vw, 114px) !important;
max-width: clamp(88px, 31vw, 114px) !important;
height: auto !important;
max-height: 32px !important;
object-fit: contain !important;
object-position: left center !important;
display: block !important;
}
body:not(.auth-required) .brand-logo-mark,
body:not(.auth-required) .brand-short {
display: none !important;
}
body:not(.auth-required) #providerLine {
display: none !important;
}
body:not(.auth-required) .sidebar-toggle {
grid-area: auto !important;
position: fixed !important;
right: 10px !important;
top: 10px !important;
z-index: calc(var(--z-float-toolbar) + 2) !important;
width: var(--mobile-icon-btn) !important;
min-width: var(--mobile-icon-btn) !important;
max-width: var(--mobile-icon-btn) !important;
height: var(--mobile-icon-btn) !important;
min-height: var(--mobile-icon-btn) !important;
max-height: var(--mobile-icon-btn) !important;
padding: 0 !important;
border-radius: 10px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 0 !important;
overflow: hidden !important;
}
body:not(.auth-required) .sidebar-toggle svg,
body:not(.auth-required) .sidebar-toggle .ui-icon {
width: 15px !important;
height: 15px !important;
margin: 0 !important;
}
body:not(.auth-required) .topbar .top-actions {
grid-area: auto !important;
position: fixed !important;
top: 10px !important;
right: 48px !important;
z-index: calc(var(--z-float-toolbar) + 1) !important;
margin: 0 !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 5px !important;
min-width: 0 !important;
height: var(--mobile-icon-btn) !important;
padding: 0 !important;
}
body:not(.auth-required) .topbar #accountSummary.account-summary,
body:not(.auth-required) .topbar .icon-button,
body:not(.auth-required) .topbar .sidebar-refresh,
body:not(.auth-required) .topbar .sidebar-theme {
width: var(--mobile-icon-btn) !important;
min-width: var(--mobile-icon-btn) !important;
max-width: var(--mobile-icon-btn) !important;
height: var(--mobile-icon-btn) !important;
min-height: var(--mobile-icon-btn) !important;
max-height: var(--mobile-icon-btn) !important;
padding: 0 !important;
border-radius: 10px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 0 !important;
line-height: 1 !important;
overflow: hidden !important;
}
body:not(.sidebar-collapsed):not(.auth-required) .topbar #accountSummary.account-summary.account-summary-points {
width: auto !important;
min-width: 78px !important;
max-width: 94px !important;
padding: 0 8px !important;
gap: 4px !important;
font-size: 11px !important;
font-weight: 760 !important;
white-space: nowrap !important;
}
body:not(.sidebar-collapsed):not(.auth-required) .topbar #accountSummary.account-summary.account-summary-points .account-points-icon {
width: 15px !important;
min-width: 15px !important;
height: 15px !important;
margin: 0 !important;
}
body:not(.auth-required) .topbar .icon-button svg,
body:not(.auth-required) .topbar .sidebar-refresh svg,
body:not(.auth-required) .topbar .sidebar-theme svg,
body:not(.auth-required) .module-tab svg,
body:not(.auth-required) .module-tab .ui-icon {
width: 14px !important;
height: 14px !important;
margin: 0 !important;
stroke-width: 1.8 !important;
}
body:not(.auth-required) .module-nav {
grid-area: auto !important;
position: absolute !important;
left: 10px !important;
right: 10px !important;
top: 55px !important;
width: auto !important;
height: 34px !important;
min-height: 34px !important;
max-height: 34px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 6px !important;
padding: 1px 0 !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: x proximity !important;
scrollbar-width: none !important;
}
body:not(.auth-required) .module-nav::-webkit-scrollbar {
display: none !important;
}
body:not(.auth-required) .module-tab,
body.sidebar-collapsed:not(.auth-required) .module-tab,
body:not(.auth-required).sidebar-collapsed .module-tab {
flex: 0 0 var(--mobile-icon-btn) !important;
width: var(--mobile-icon-btn) !important;
min-width: var(--mobile-icon-btn) !important;
max-width: var(--mobile-icon-btn) !important;
height: var(--mobile-icon-btn) !important;
min-height: var(--mobile-icon-btn) !important;
max-height: var(--mobile-icon-btn) !important;
padding: 0 !important;
border-radius: 10px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
scroll-snap-align: start !important;
box-shadow: none !important;
touch-action: manipulation !important;
-webkit-touch-callout: none !important;
}
body:not(.auth-required) .module-tab[draggable="true"] {
touch-action: pan-x !important;
}
body:not(.auth-required) .module-tab.active {
box-shadow: inset 3px 0 0 var(--accent) !important;
}
body:not(.auth-required) .module-tab.drag-ready,
body:not(.auth-required) .module-tab.dragging {
transform: translateY(-1px) scale(1.04) !important;
box-shadow: 0 8px 22px rgba(47, 109, 183, 0.18) !important;
}
body:not(.auth-required) .workflow-template-drag-ghost {
grid-template-columns: 30px minmax(0, 1fr);
min-width: 178px;
padding: 8px 10px;
border-radius: 13px;
}
body:not(.auth-required) .workflow-template-drag-icon {
width: 30px;
height: 30px;
border-radius: 10px;
}
body:not(.auth-required) .workflow-template-drag-copy b {
font-size: 12.5px;
}
body:not(.auth-required) .workflow-template-drag-copy small,
body:not(.auth-required) .app-tooltip-detail {
font-size: 11px;
}
body:not(.auth-required) .app-tooltip {
padding: 9px 10px;
border-radius: 12px;
}
body:not(.auth-required) .module-tab strong,
body:not(.auth-required) .module-tab span {
display: none !important;
}
body.sidebar-collapsed:not(.auth-required) .topbar,
body:not(.auth-required).sidebar-collapsed .topbar {
height: var(--mobile-topbar-offset) !important;
min-height: var(--mobile-topbar-offset) !important;
grid-template-rows: 40px !important;
grid-template-areas: "brand" !important;
padding: 7px 10px 7px !important;
}
body.sidebar-collapsed:not(.auth-required) .topbar .module-nav,
body:not(.auth-required).sidebar-collapsed .topbar .module-nav,
body.sidebar-collapsed:not(.auth-required) .topbar .module-tab,
body:not(.auth-required).sidebar-collapsed .topbar .module-tab {
display: none !important;
visibility: hidden !important;
width: 0 !important;
min-width: 0 !important;
max-width: 0 !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
pointer-events: none !important;
overflow: hidden !important;
}
body:not(.auth-required) .layout,
body.sidebar-collapsed:not(.auth-required) .layout,
body:not(.auth-required).sidebar-collapsed .layout,
body:not(.auth-required) .module-panel {
margin-left: 0 !important;
margin-top: var(--mobile-topbar-offset) !important;
width: 100vw !important;
max-width: 100vw !important;
min-height: calc(100dvh - var(--mobile-topbar-offset)) !important;
padding: var(--mobile-shell-x) !important;
gap: var(--mobile-shell-gap) !important;
overflow-x: hidden !important;
transition: none !important;
}
body:not(.auth-required) #appLayout[data-module-panel="batchModule"],
body:not(.auth-required) #appLayout[data-module-panel="videoModule"],
body:not(.auth-required) #appLayout[data-module-panel="audioModule"] {
display: flex !important;
flex-direction: row !important;
align-items: stretch !important;
gap: 0 !important;
height: calc(100dvh - var(--mobile-topbar-offset)) !important;
min-height: calc(100dvh - var(--mobile-topbar-offset)) !important;
overflow: hidden !important;
scrollbar-width: none !important;
}
body:not(.auth-required) #appLayout[data-module-panel="batchModule"]::-webkit-scrollbar,
body:not(.auth-required) #appLayout[data-module-panel="videoModule"]::-webkit-scrollbar,
body:not(.auth-required) #appLayout[data-module-panel="audioModule"]::-webkit-scrollbar {
display: none !important;
}
body:not(.auth-required) #appLayout[data-module-panel="batchModule"] > .panel,
body:not(.auth-required) #appLayout[data-module-panel="videoModule"] > .panel,
body:not(.auth-required) #appLayout[data-module-panel="audioModule"] > .panel {
flex: 0 0 100% !important;
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
height: 100% !important;
min-height: 0 !important;
padding: 7px !important;
border-radius: var(--mobile-panel-radius) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
overscroll-behavior: contain !important;
}
body:not(.auth-required) .tabs,
body:not(.auth-required) .tool-mode-tabs {
height: 28px !important;
min-height: 28px !important;
max-height: 28px !important;
border-radius: 12px 12px 0 0 !important;
overflow: hidden !important;
}
body:not(.auth-required) .tab,
body:not(.auth-required) .tool-mode-tab {
min-height: 28px !important;
height: 28px !important;
padding: 0 7px !important;
border-radius: 0 !important;
font-size: 11px !important;
line-height: 1 !important;
}
body:not(.auth-required) .tab-panel,
body:not(.auth-required) .tool-panel.active {
padding: 7px !important;
gap: 7px !important;
}
body:not(.auth-required) .upload-box,
body:not(.auth-required) .drop-zone,
body:not(.auth-required) .advanced,
body:not(.auth-required) .tool-card {
padding: 8px !important;
margin: 0 0 7px !important;
border-radius: var(--mobile-card-radius) !important;
}
body:not(.auth-required) .upload-box {
gap: 6px !important;
}
body:not(.auth-required) .drop-zone {
display: block !important;
min-height: 0 !important;
background: rgba(47, 109, 183, 0.055) !important;
}
body:not(.auth-required) .drop-zone > p,
body:not(.auth-required) .drop-zone > button.secondary[hidden],
body:not(.auth-required) .drop-zone > button.secondary[aria-hidden="true"] {
display: none !important;
}
body:not(.auth-required) .upload-zone-head {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 6px !important;
min-height: 24px !important;
margin: 0 !important;
}
body:not(.auth-required) .upload-zone-head strong,
body:not(.auth-required) .drop-zone strong,
body:not(.auth-required) .tool-card h2,
body:not(.auth-required) .advanced summary {
font-size: 12px !important;
line-height: 1.2 !important;
}
body:not(.auth-required) .upload-zone-actions {
display: flex !important;
gap: 5px !important;
flex-wrap: nowrap !important;
}
body:not(.auth-required) .upload-zone-head .upload-clear-btn,
body:not(.auth-required) .upload-zone-actions .upload-clear-btn,
body:not(.auth-required) .upload-zone-actions .secondary {
height: 26px !important;
min-height: 26px !important;
padding: 0 7px !important;
font-size: 10.5px !important;
border-radius: 8px !important;
}
body:not(.auth-required) .file-summary,
body:not(.auth-required) .file-summary-picker {
min-height: 34px !important;
padding: 7px 9px !important;
border-radius: 11px !important;
font-size: 10.5px !important;
line-height: 1.35 !important;
}
body:not(.auth-required) .file-summary-picker {
display: flex !important;
align-items: center !important;
cursor: var(--media-drop-cursor, pointer) !important;
}
body:not(.auth-required) .file-summary-picker:active {
transform: scale(0.995);
}
body:not(.auth-required) .selected-preview {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 6px !important;
padding: 5px !important;
max-height: 124px !important;
overflow-y: auto !important;
}
body:not(.auth-required) label,
body:not(.auth-required) .form-grid label,
body:not(.auth-required) .quick-options label,
body:not(.auth-required) .advanced .options-grid label,
body:not(.auth-required) .layout.media-tool-layout label {
gap: 4px !important;
font-size: var(--mobile-label) !important;
line-height: 1.18 !important;
}
body:not(.auth-required) .form-grid,
body:not(.auth-required) .quick-options,
body:not(.auth-required) .advanced .options-grid,
body:not(.auth-required) .layout.media-tool-layout .quick-options,
body:not(.auth-required) .layout.media-tool-layout .advanced .options-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 6px !important;
}
body:not(.auth-required) select:not(.account-projects-sort),
body:not(.auth-required) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) .mobile-select-trigger {
min-width: 0 !important;
width: 100% !important;
min-height: var(--mobile-control-h) !important;
height: var(--mobile-control-h) !important;
max-height: var(--mobile-control-h) !important;
padding: 4px 8px !important;
border-radius: var(--mobile-control-radius) !important;
font-size: var(--mobile-font) !important;
line-height: 1.15 !important;
}
body:not(.auth-required) textarea {
width: 100% !important;
min-height: 88px !important;
padding: 7px 8px !important;
border-radius: 10px !important;
font-size: var(--mobile-font) !important;
line-height: 1.36 !important;
}
body:not(.auth-required) #audioText,
body:not(.auth-required) #musicPrompt {
min-height: 104px !important;
height: 104px;
}
body:not(.auth-required) button:not([data-ui-compact-control]):not(.module-tab):not(.sidebar-toggle):not(.icon-button):not(.gen-icon-btn):not(.hl-float-btn):not(.hl-send-btn):not(.hl-like-pill):not(.hl-cta-primary):not(.hl-submit-btn):not(.hl-mod-chip):not(.hl-tool-btn):not(.hl-ref-del):not(.hl-cta-icon):not(.flow-mini-btn):not(.project-icon-btn):not(.canvas-edit-branch):not(.feed-detail-album-thumb):not(.hl-stage):not(.account-summary):not(.text-message-copy):not(.text-chat-delete-btn):not(.app-more-id):not(.app-more-item):not(.account-page-row):not(.account-page-stat):not(.account-page-edit):not(.account-page-quick):not(.account-page-tab):not(.account-command-btn):not(.account-content-action):not(.account-resource-card):not(.account-card):not(.account-card-open):not(.account-card-more):not(.account-resource-more):not(.account-mini-item):not(.account-proj-pill):not(.account-page-project-open):not(.account-page-project-more):not(.account-page-projects-more):not(.infinite-card-run):not(.infinite-inline-reference-add):not(.infinite-inline-reference-pick):not(.infinite-inline-prompt-expand):not(.preview-canvas-tool):not(.ob-rail-step):where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) .button-link:not([data-ui-compact-control]):where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) .primary:not([data-ui-compact-control]):not(.infinite-card-run):where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) .secondary:not([data-ui-compact-control]):where(:not([data-ui-unmanaged] *)),
body:not(.auth-required) .danger:not([data-ui-compact-control]):not(.gen-icon-btn):not(.hl-float-btn):not(.hl-send-btn):not(.hl-like-pill):not(.hl-cta-primary):not(.hl-submit-btn):not(.hl-mod-chip):not(.hl-tool-btn):not(.hl-ref-del):not(.hl-cta-icon):not(.flow-mini-btn):not(.project-icon-btn):not(.canvas-edit-branch):not(.feed-detail-album-thumb):not(.hl-stage):where(:not([data-ui-unmanaged] *)) {
min-height: var(--mobile-control-h) !important;
height: var(--mobile-control-h) !important;
max-height: var(--mobile-control-h) !important;
padding: 0 9px !important;
border-radius: var(--mobile-control-radius) !important;
font-size: var(--mobile-font) !important;
line-height: 1 !important;
gap: 5px !important;
}
body:not(.auth-required) .command-row,
body:not(.auth-required) .command-row.compact,
body:not(.auth-required) .monitor-actions,
body:not(.auth-required) .tool-result-actions,
body:not(.auth-required) .modal-tools {
display: flex !important;
gap: 6px !important;
flex-wrap: wrap !important;
align-items: center !important;
}
body:not(.auth-required) .command-row:not(.account-auth-actions) > button,
body:not(.auth-required) .command-row:not(.account-auth-actions) > .button-link {
flex: 0 0 auto !important;
width: auto !important;
min-width: 82px !important;
max-width: 100% !important;
}
body:not(.auth-required) .plan-summary-inline {
flex: 1 1 100% !important;
min-height: 26px !important;
padding: 5px 8px !important;
border-radius: 9px !important;
font-size: 10.5px !important;
line-height: 1.25 !important;
}
body:not(.auth-required) .advanced {
padding: 0 !important;
overflow: hidden !important;
}
body:not(.auth-required) .advanced summary {
height: 23px !important;
min-height: 23px !important;
max-height: 23px !important;
padding: 0 8px !important;
display: flex !important;
align-items: center !important;
font-size: 11px !important;
}
body:not(.auth-required) .advanced[open] {
padding: 7px !important;
}
body:not(.auth-required) .advanced[open] summary {
margin: -7px -7px 7px !important;
}
body:not(.auth-required) .toggle-row {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 6px !important;
margin-top: 6px !important;
}
body:not(.auth-required) .toggle-row label {
display: flex !important;
align-items: center !important;
gap: 5px !important;
min-height: 24px !important;
}
body:not(.auth-required) .status-grid,
body:not(.auth-required) .stats-grid,
body:not(.auth-required) .task-stats-grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 5px !important;
}
body:not(.auth-required) .stat-card,
body:not(.auth-required) .monitor-stat,
body:not(.auth-required) .stats-grid > *,
body:not(.auth-required) .task-stats-grid > * {
min-height: 38px !important;
padding: 6px !important;
border-radius: 9px !important;
}
body:not(.auth-required) .stat-card strong,
body:not(.auth-required) .monitor-stat strong,
body:not(.auth-required) .stats-grid strong,
body:not(.auth-required) .task-stats-grid strong,
body:not(.auth-required) .stats-grid b,
body:not(.auth-required) .task-stats-grid b {
font-size: 14px !important;
line-height: 1 !important;
}
body:not(.auth-required) .task-list-row,
body:not(.auth-required) .task-row,
body:not(.auth-required) .job-select,
body:not(.auth-required) .case-select {
min-height: 32px !important;
padding: 6px 7px !important;
gap: 5px !important;
border-radius: 9px !important;
font-size: 10.8px !important;
}
body:not(.auth-required) .task-list-row strong,
body:not(.auth-required) .task-row strong,
body:not(.auth-required) .job-select strong,
body:not(.auth-required) .case-select strong {
font-size: 11px !important;
line-height: 1.2 !important;
}
body:not(.auth-required) .task-list-row small,
body:not(.auth-required) .task-row small,
body:not(.auth-required) .job-select small,
body:not(.auth-required) .case-select small {
font-size: 9.8px !important;
line-height: 1.25 !important;
}
body:not(.auth-required) .modal-mask:not([hidden]) {
padding: calc(var(--mobile-topbar-offset) + 6px) 7px 8px !important;
align-items: flex-start !important;
justify-content: center !important;
overflow-y: auto !important;
}
body:not(.auth-required) :is(#feedDetailModal, #mediaLibraryDetailModal, #workflowMediaAlbumModal).modal-mask:not([hidden]) {
padding: 8px !important;
align-items: center !important;
justify-content: center !important;
justify-items: center !important;
overflow: hidden !important;
overflow-y: hidden !important;
}
body:not(.auth-required) #imagePreviewModal.modal-mask:not([hidden]) {
padding: 14px !important;
align-items: center !important;
justify-content: center !important;
justify-items: center !important;
}
body:not(.auth-required) .modal-panel:where(:not([data-ui-unmanaged])):not(.feed-detail-panel):not(.admin-account-detail-panel),
body:not(.auth-required) .workflow-project-panel,
body:not(.auth-required) .workflow-media-library-panel,
body:not(.auth-required) .case-panel,
body:not(.auth-required) .watermark-panel,
body:not(.auth-required) .account-panel,
body:not(.auth-required) .command-palette-panel {
width: min(430px, calc(100vw - 14px)) !important;
max-width: calc(100vw - 14px) !important;
max-height: calc(100dvh - var(--mobile-topbar-offset) - 14px) !important;
padding: 9px !important;
border-radius: 14px !important;
overflow: auto !important;
}
body:not(.auth-required) :is(.canvas-image-edit-panel, .canvas-image-crop-panel, .canvas-image-erase-panel, .canvas-image-split-panel, .canvas-cutout-panel):where(:not([data-ui-unmanaged])) {
width: min(430px, calc(100vw - 14px)) !important;
max-width: calc(100vw - 14px) !important;
height: calc(100dvh - var(--mobile-topbar-offset) - 14px) !important;
max-height: calc(100dvh - var(--mobile-topbar-offset) - 14px) !important;
display: grid !important;
grid-template-rows: auto minmax(0, 1fr) !important;
overflow: hidden !important;
}
body:not(.auth-required) :is(.canvas-image-edit-layout, .canvas-image-crop-layout, .canvas-image-split-body, .canvas-cutout-body) {
grid-template-columns: 1fr !important;
height: 100% !important;
min-height: 0 !important;
gap: 10px !important;
overflow: auto !important;
overscroll-behavior: contain !important;
-webkit-overflow-scrolling: touch !important;
}
body:not(.auth-required) :is(.canvas-image-crop-stage, .canvas-image-expand-stage, .canvas-image-erase-stage, .canvas-image-split-preview, .canvas-image-angle-preview, .canvas-cutout-preview) {
height: min(46dvh, 320px) !important;
min-height: min(46dvh, 320px) !important;
max-height: min(48dvh, 340px) !important;
}
body:not(.auth-required) :is(.canvas-image-crop-side, .canvas-image-edit-side, .canvas-cutout-options) {
max-height: none !important;
overflow: visible !important;
}
body:not(.auth-required) #imagePreviewModal .preview-canvas-tools:not([hidden]) {
flex: 0 0 auto !important;
display: flex !important;
gap: 6px !important;
margin: 0 0 10px !important;
padding: 6px !important;
border-radius: 18px !important;
overflow-x: auto !important;
overscroll-behavior-x: contain !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
}
body:not(.auth-required) #imagePreviewModal .preview-canvas-tools::-webkit-scrollbar {
display: none !important;
}
body:not(.auth-required) #imagePreviewModal .preview-canvas-tool {
flex: 0 0 126px !important;
min-height: 48px !important;
grid-template-columns: 30px minmax(0, 1fr) !important;
gap: 7px !important;
padding: 7px 10px 7px 7px !important;
border-radius: 14px !important;
}
body:not(.auth-required) #imagePreviewModal .preview-canvas-tool-icon {
width: 30px !important;
height: 30px !important;
border-radius: 11px !important;
}
body:not(.auth-required) #imagePreviewModal .preview-canvas-tool-text strong {
font-size: 12.5px !important;
}
body:not(.auth-required) #imagePreviewModal .preview-canvas-tool-text small {
font-size: 10.5px !important;
}
body:not(.auth-required) .modal-head:where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)),
body:not(.auth-required) .workflow-project-panel > .modal-head:where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)),
body:not(.auth-required) .workflow-media-library-panel > .modal-head:where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
position: sticky !important;
top: -9px !important;
z-index: 3 !important;
margin: -9px -9px 8px !important;
padding: 9px !important;
background: color-mix(in srgb, var(--panel) 94%, transparent) !important;
border-bottom: 1px solid rgba(148, 163, 184, 0.2) !important;
}
body.dark:not(.auth-required) .modal-head,
body.dark:not(.auth-required) .workflow-project-panel > .modal-head,
body.dark:not(.auth-required) .workflow-media-library-panel > .modal-head {
background: color-mix(in srgb, var(--panel) 94%, transparent) !important;
}
body:not(.auth-required) .modal-head h2,
body:not(.auth-required) .workflow-project-panel h2,
body:not(.auth-required) .workflow-media-library-panel h2 {
font-size: 15px !important;
line-height: 1.25 !important;
}
body:not(.auth-required) .modal-head p,
body:not(.auth-required) .workflow-project-status,
body:not(.auth-required) .workflow-media-library-panel p {
font-size: 10.5px !important;
line-height: 1.3 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
body:not(.auth-required) .workflow-project-tools,
body:not(.auth-required) .workflow-media-library-tools,
body:not(.auth-required) .case-toolbar,
body:not(.auth-required) .account-usage-tools {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 6px !important;
}
body:not(.auth-required) .workflow-project-tools input,
body:not(.auth-required) .workflow-media-library-tools input,
body:not(.auth-required) .case-toolbar input,
body:not(.auth-required) .account-usage-tools input {
grid-column: 1 / -1 !important;
}
body:not(.auth-required) .workflow-project-list,
body:not(.auth-required) .favorite-case-list,
body:not(.auth-required) .case-list {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 7px !important;
}
body:not(.auth-required) .workflow-media-library-list {
display: grid !important;
grid-template-columns: 1fr !important;
column-gap: 7px !important;
}
body:not(.auth-required) .workflow-project-card,
body:not(.auth-required) .workflow-media-library-card,
body:not(.auth-required) .favorite-case-card,
body:not(.auth-required) .case-row {
padding: 7px !important;
gap: 6px !important;
border-radius: 11px !important;
}
body:not(.auth-required) .workflow-media-library-preview {
height: auto !important;
min-height: 0 !important;
aspect-ratio: var(--workflow-media-preview-ratio, 1 / 1) !important;
border-radius: 9px !important;
}
body:not(.auth-required) .workflow-media-library-actions,
body:not(.auth-required) .workflow-project-actions,
body:not(.auth-required) .case-actions {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 5px !important;
}
body:not(.auth-required) .workflow-media-library-actions button,
body:not(.auth-required) .workflow-project-actions button,
body:not(.auth-required) .case-actions button,
body:not(.auth-required) .account-usage-tools button {
min-height: 28px !important;
height: 28px !important;
font-size: 10.5px !important;
padding: 0 7px !important;
}
body:not(.auth-required) > .context-menu,
body:not(.auth-required) .context-menu,
body:not(.auth-required) .litegraph.litecontextmenu {
width: min(312px, calc(100vw - 18px)) !important;
min-width: 0 !important;
max-width: calc(100vw - 18px) !important;
max-height: calc(100dvh - var(--mobile-topbar-offset) - 16px) !important;
padding: 7px !important;
border-radius: 14px !important;
overflow: auto !important;
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18) !important;
}
body:not(.auth-required) > .context-menu button,
body:not(.auth-required) .context-menu button,
body:not(.auth-required) .context-menu button.module-create,
body:not(.auth-required) .litegraph.litecontextmenu .ai-lite-menu-node {
min-height: 38px !important;
height: auto !important;
max-height: none !important;
padding: 6px 8px !important;
border-radius: 10px !important;
font-size: 11.5px !important;
line-height: 1.2 !important;
}
body:not(.auth-required) .context-menu .context-label,
body:not(.auth-required) .context-menu.canvas-add-menu .context-label,
body:not(.auth-required) .context-menu.canvas-item-menu .context-label {
display: grid !important;
grid-template-columns: 26px minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 8px !important;
min-width: 0 !important;
}
body:not(.auth-required) .context-menu .context-color-badge,
body:not(.auth-required) .context-menu .context-icon,
body:not(.auth-required) .command-palette-list .context-color-badge,
body:not(.auth-required) .litegraph.litecontextmenu .ai-lite-menu-badge,
body:not(.auth-required) .workflow-menu-drag-badge {
width: 26px !important;
min-width: 26px !important;
height: 26px !important;
border-radius: 8px !important;
}
body:not(.auth-required) .context-menu .context-color-badge svg,
body:not(.auth-required) .context-menu .context-icon svg,
body:not(.auth-required) .command-palette-list .context-color-badge svg,
body:not(.auth-required) .litegraph.litecontextmenu .ai-lite-menu-badge svg,
body:not(.auth-required) .workflow-menu-drag-badge svg {
width: 13px !important;
height: 13px !important;
stroke-width: 1.65 !important;
}
body:not(.auth-required) .context-menu .context-title-line,
body:not(.auth-required) .context-menu.canvas-add-menu .context-title-line,
body:not(.auth-required) .context-menu.canvas-item-menu .context-title-line {
min-width: 0 !important;
font-size: 11.5px !important;
line-height: 1.2 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
white-space: normal !important;
}
body:not(.auth-required) .context-menu .context-description,
body:not(.auth-required) .context-menu.canvas-add-menu .context-description,
body:not(.auth-required) .context-menu.canvas-item-menu .context-description {
font-size: 10px !important;
line-height: 1.2 !important;
display: -webkit-box !important;
-webkit-line-clamp: 1 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
white-space: normal !important;
}
body:not(.auth-required) .context-menu-heading {
min-height: 22px !important;
height: auto !important;
margin: 4px 2px !important;
padding: 2px 3px !important;
font-size: 11px !important;
line-height: 1.2 !important;
}
body:not(.auth-required) .command-palette-panel,
body:not(.auth-required) .quick-add-panel {
width: min(430px, calc(100vw - 16px)) !important;
}
body:not(.auth-required) .command-palette-list,
body:not(.auth-required) .quick-add-list {
gap: 6px !important;
}
body:not(.auth-required) .command-palette-item,
body:not(.auth-required) .quick-add-item {
min-height: 40px !important;
padding: 6px 8px !important;
border-radius: 10px !important;
}
body:not(.auth-required) #appLayout[data-module-panel="workflowModule"],
body:not(.auth-required) #appLayout[data-module-panel="canvasModule"] {
height: calc(100dvh - var(--mobile-topbar-offset)) !important;
min-height: calc(100dvh - var(--mobile-topbar-offset)) !important;
padding: 5px !important;
overflow: hidden !important;
}
body:not(.auth-required) .layout.workflow-layout > .workbench,
body:not(.auth-required) .layout.canvas-layout > .workbench,
body:not(.auth-required) .workflow-canvas-shell,
body:not(.auth-required) .infinite-canvas-shell,
body:not(.auth-required) .module-workflow-panel,
body:not(.auth-required) .infinite-canvas-panel {
min-height: 0 !important;
height: 100% !important;
border-radius: 14px !important;
overflow: hidden !important;
}
body:not(.auth-required) .workflow-topbar,
body:not(.auth-required) .canvas-topbar {
gap: 5px !important;
padding: 6px !important;
border-radius: 12px !important;
overflow-x: auto !important;
scrollbar-width: none !important;
}
body:not(.auth-required) .workflow-topbar::-webkit-scrollbar,
body:not(.auth-required) .canvas-topbar::-webkit-scrollbar {
display: none !important;
}
body:not(.auth-required) .workflow-topbar input,
body:not(.auth-required) .canvas-topbar input {
min-width: 110px !important;
max-width: 150px !important;
}
body:not(.auth-required) .workflow-topbar button,
body:not(.auth-required) .canvas-topbar button {
flex: 0 0 auto !important;
min-width: 0 !important;
height: 28px !important;
min-height: 28px !important;
padding: 0 8px !important;
font-size: 10.5px !important;
border-radius: 999px !important;
}
body:not(.auth-required) .workflow-side-panel,
body:not(.auth-required) .workflow-inspector,
body:not(.auth-required) .canvas-side-panel {
width: min(300px, calc(100vw - 20px)) !important;
max-width: calc(100vw - 20px) !important;
border-radius: 14px !important;
}
body:not(.auth-required) .infinite-card-inline-panel,
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel {
max-height: none !important;
overflow: visible !important;
border-radius: 16px !important;
}
body:not(.auth-required) .infinite-card-inline-panel:has(.infinite-card-run),
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) {
padding: var(--canvas-inline-panel-pad-y, 8px) var(--canvas-inline-panel-pad-x, 9px) var(--canvas-inline-panel-pad-bottom, 7px) !important;
overflow: visible !important;
border-width: 3px !important;
border-top-width: var(--canvas-inline-panel-border-top, 3px) !important;
border-radius: var(--canvas-inline-unified-radius, 9px) !important;
box-shadow: 0 14px 40px rgba(15, 23, 42, 0.14) !important; 
}
body:not(.auth-required) .infinite-card-inline-panel::before {
display: none !important;
}
body:not(.auth-required) .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body,
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body {
grid-template-columns: 1fr;
grid-template-areas:
"refs"
"prompt"
"bar";
gap: var(--canvas-inline-panel-gap, 6px) !important;
align-items: stretch !important;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .infinite-inline-references {
min-height: var(--canvas-inline-ref-min-h, 36px) !important;
padding: var(--canvas-inline-ref-pad-y, 4px) var(--canvas-inline-ref-pad-x, 7px) !important;
border-radius: var(--canvas-inline-unified-radius, 9px) !important;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-references-head {
top: var(--canvas-inline-ref-head-top, 6px) !important;
right: var(--canvas-inline-ref-head-right, 10px) !important;
font-size: var(--canvas-inline-ref-head-font, 13px) !important;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-reference-grid {
gap: var(--canvas-inline-ref-grid-gap, 7px) !important;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-reference-grid [data-canvas-panel-ref],
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-reference-grid .infinite-inline-reference-add {
flex-basis: var(--canvas-inline-ref-tile, 48px) !important;
width: var(--canvas-inline-ref-tile, 48px) !important;
height: var(--canvas-inline-ref-tile, 48px) !important;
min-height: var(--canvas-inline-ref-tile, 48px) !important;
border-radius: var(--canvas-inline-unified-radius, 9px) !important;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-reference-grid img,
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-reference-grid video {
width: var(--canvas-inline-ref-tile, 48px) !important;
height: var(--canvas-inline-ref-tile, 48px) !important;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-reference-grid .infinite-inline-reference-add span {
font-size: var(--canvas-inline-ref-plus-font, 20px) !important;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > textarea {
min-height: var(--canvas-inline-text-min-h, 104px) !important;
max-height: var(--canvas-inline-text-max-h, 320px) !important;
overflow-y: auto !important;
padding: var(--canvas-inline-text-pad-y, 7px) var(--canvas-inline-text-pad-x, 9px) calc(var(--canvas-inline-text-pad-bottom, 7px) + var(--canvas-inline-field-h, 32px)) var(--canvas-inline-text-pad-x, 9px) !important;
border-radius: var(--canvas-inline-unified-radius, 9px) !important;
font-size: var(--canvas-inline-text-font, 22px) !important;
line-height: 1.35 !important;
resize: none !important;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .infinite-inline-prompt-expand {
grid-area: prompt !important;
z-index: 4 !important;
align-self: end !important;
justify-self: end !important;
width: var(--canvas-inline-field-h, 32px) !important;
min-width: var(--canvas-inline-field-h, 32px) !important;
height: var(--canvas-inline-field-h, 32px) !important;
min-height: var(--canvas-inline-field-h, 32px) !important;
margin: var(--canvas-inline-text-pad-y, 7px) !important;
padding: 0 !important;
border-radius: var(--canvas-inline-unified-radius, 9px) !important;
}
body:not(.auth-required) .infinite-inline-panel-body .infinite-card-fields {
grid-template-columns: none;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .infinite-card-fields {
grid-area: bar !important;
z-index: 3 !important;
align-self: center !important;
justify-self: start !important;
display: flex !important;
flex-wrap: nowrap !important;
gap: var(--canvas-inline-fields-gap, 5px) !important;
width: max-content !important;
max-width: calc(100% - var(--canvas-inline-run-slot, 206px)) !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .infinite-card-actions {
grid-area: bar !important;
z-index: 4 !important;
align-self: center !important;
justify-self: end !important;
display: inline-flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: var(--canvas-inline-fields-gap, 5px) !important;
width: max-content !important;
max-width: calc(100% - var(--canvas-inline-fields-left, 10px)) !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field {
flex: 0 1 auto !important;
width: var(--canvas-inline-field-w, 148px) !important;
min-height: var(--canvas-inline-field-h, 32px) !important;
height: var(--canvas-inline-field-h, 32px) !important;
padding: 0 !important;
border-radius: var(--canvas-inline-unified-radius, 9px) !important;
--hui-control-font: var(--canvas-inline-field-font, 13px);
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field:has([data-canvas-config-key="model"]),
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field:has([data-canvas-config-key="imageModel"]),
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field:has([data-canvas-config-key="videoModel"]),
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field:has([data-canvas-config-key="audioModel"]),
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field:has([data-canvas-config-key="musicModel"]),
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field:has([data-canvas-config-key="textModel"]),
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field:has([data-canvas-config-key="visionModel"]) {
flex: 0 1 var(--canvas-inline-field-model-w, 150px) !important;
width: var(--canvas-inline-field-model-w, 150px) !important;
max-width: var(--canvas-inline-field-model-w, 150px) !important;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field:has([data-canvas-config-key="count"]) {
flex: 0 1 auto !important;
width: var(--canvas-inline-field-count-w, 80px) !important;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-qr {
width: var(--canvas-inline-qr-w, 132px) !important;
min-height: var(--canvas-inline-field-h, 32px) !important;
height: var(--canvas-inline-field-h, 32px) !important;
border-radius: var(--canvas-inline-unified-radius, 9px) !important;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field .infinite-card-cs-label,
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-qr-trigger {
font-size: var(--canvas-inline-control-font, 13px) !important;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field input,
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field select {
font-size: var(--canvas-inline-control-font, 13px) !important;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body .infinite-card-run {
min-width: var(--canvas-inline-run-w, 104px) !important;
min-height: var(--canvas-inline-run-h, 34px) !important;
height: var(--canvas-inline-run-h, 34px) !important;
padding: 0 var(--canvas-inline-run-pad-x, 12px) !important;
border-radius: var(--canvas-inline-unified-radius, 9px) !important;
font-size: var(--canvas-inline-run-font, 14px) !important;
}
body:not(.auth-required) .infinite-canvas-inline-panel-layer {
z-index: 200 !important;
}
body:not(.auth-required) .infinite-canvas-inline-panel-layer .infinite-card-inline-panel {
z-index: 200;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .infinite-card-actions > .infinite-card-run {
margin: 0 !important;
}
body:not(.auth-required) .infinite-inline-reference-grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
body:not(.auth-required) .mobile-select-sheet {
max-height: 58dvh !important;
border-radius: 14px 14px 0 0 !important;
}
body:not(.auth-required) .mobile-select-head {
padding: 8px 10px 6px !important;
}
body:not(.auth-required) .mobile-select-option {
min-height: 32px !important;
padding: 0 9px !important;
border-radius: 9px !important;
font-size: 11.5px !important;
}
}
@media (max-width: 360px) {
body:not(.auth-required) {
--mobile-topbar-expanded-offset: 100px;
--mobile-icon-btn: 30px;
--mobile-control-h: 28px;
--mobile-font: 11px;
--mobile-label: 10px;
--mobile-caption: 9.5px;
}
body:not(.auth-required) .topbar {
grid-template-rows: 36px 40px !important;
gap: 4px 5px !important;
padding: 6px 9px 5px !important;
}
body:not(.auth-required) .brand-block {
height: 36px !important;
min-height: 36px !important;
}
body:not(.auth-required) .brand-logo-full,
body.sidebar-collapsed:not(.auth-required) .brand-logo-full,
body:not(.auth-required).sidebar-collapsed .brand-logo-full {
width: clamp(78px, 29vw, 96px) !important;
max-width: clamp(78px, 29vw, 96px) !important;
}
body:not(.auth-required) .module-nav {
height: 40px !important;
min-height: 40px !important;
}
body.sidebar-collapsed:not(.auth-required) .topbar,
body:not(.auth-required).sidebar-collapsed .topbar {
grid-template-rows: 34px !important;
height: var(--mobile-topbar-offset) !important;
min-height: var(--mobile-topbar-offset) !important;
padding: 6px 9px !important;
}
body.sidebar-collapsed:not(.auth-required) .topbar .module-nav,
body:not(.auth-required).sidebar-collapsed .topbar .module-nav,
body.sidebar-collapsed:not(.auth-required) .topbar .module-tab,
body:not(.auth-required).sidebar-collapsed .topbar .module-tab {
display: none !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
}
body:not(.sidebar-collapsed):not(.auth-required) .topbar #accountSummary.account-summary.account-summary-points {
min-width: 70px !important;
max-width: 82px !important;
padding: 0 6px !important;
font-size: 10.5px !important;
}
body:not(.auth-required) #audioText,
body:not(.auth-required) #musicPrompt {
min-height: 94px !important;
height: 94px;
}
}
@media (max-width: 820px) {
body:not(.auth-required) #appLayout .upload-box:has(> :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone)) {
padding: 7px !important;
gap: 4px !important;
margin-bottom: 6px !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body:not(.auth-required) #appLayout :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone).drop-zone {
display: block !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body:not(.auth-required) #appLayout :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone) > p,
body:not(.auth-required) #appLayout :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone) > .compact {
display: none !important;
}
body:not(.auth-required) #appLayout :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone).drop-zone + .file-summary-picker {
min-height: 30px !important;
height: auto !important;
padding: 6px 8px !important;
margin: 2px 0 0 !important;
border-radius: 10px !important;
font-size: 10.5px !important;
line-height: 1.25 !important;
align-items: center !important;
overflow: hidden !important;
}
body:not(.auth-required) #appLayout :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone).drop-zone + .file-summary-picker.file-summary-empty {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
white-space: normal !important;
}
body:not(.auth-required) #appLayout :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone).drop-zone ~ .selected-preview:empty {
display: none !important;
padding: 0 !important;
margin: 0 !important;
}
body:not(.auth-required) #appLayout :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone).drop-zone,
body:not(.auth-required) #appLayout :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone).drop-zone + .file-summary-picker {
cursor: var(--media-drop-cursor, pointer) !important;
}
body:not(.auth-required) #appLayout :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone).drop-zone {
touch-action: manipulation !important;
}
body:not(.auth-required) #appLayout :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone).drop-zone .upload-zone-head {
height: 22px !important;
min-height: 22px !important;
max-height: 22px !important;
margin: 0 !important;
padding: 0 !important;
}
body:not(.auth-required) #appLayout :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone).drop-zone .upload-zone-head strong {
font-size: 11.5px !important;
line-height: 1 !important;
}
body:not(.auth-required) #appLayout :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone).drop-zone .upload-zone-actions > button {
height: 22px !important;
min-height: 22px !important;
max-height: 22px !important;
padding: 0 7px !important;
font-size: 10px !important;
border-radius: 8px !important;
}
body:not(.auth-required) #appLayout :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone).drop-zone:is(.drag-over, :hover) + .file-summary-picker {
border-color: rgba(47, 109, 183, 0.7) !important;
background: rgba(234, 242, 251, 0.9) !important;
}
}
@media (max-width: 360px) {
body:not(.auth-required) #appLayout .upload-box:has(> :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone)) {
padding: 6px !important;
gap: 3px !important;
}
body:not(.auth-required) #appLayout :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone).drop-zone .upload-zone-head {
height: 20px !important;
min-height: 20px !important;
max-height: 20px !important;
}
body:not(.auth-required) #appLayout :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone).drop-zone + .file-summary-picker {
min-height: 28px !important;
padding: 5px 7px !important;
font-size: 10px !important;
}
}


/* entry:styles.part4.css sha256:d86b50399710c9c757fad80abb07641410503fc6965386278982e8e207842393 */

@media (max-width: 820px) {
body:not(.auth-required) header.topbar > .brand-block {
margin-top: 4px !important;
}
body:not(.auth-required) header.topbar > .top-actions.top-actions,
body.sidebar-collapsed:not(.auth-required) header.topbar > .top-actions.top-actions,
body:not(.auth-required).sidebar-collapsed header.topbar > .top-actions.top-actions {
top: 12px !important;
}
body:not(.auth-required) #sidebarToggleBtn.sidebar-toggle.has-ui-icon,
body.sidebar-collapsed:not(.auth-required) #sidebarToggleBtn.sidebar-toggle.has-ui-icon,
body:not(.auth-required).sidebar-collapsed #sidebarToggleBtn.sidebar-toggle.has-ui-icon {
top: 12px !important;
}
body:not(.auth-required) header.topbar > nav.module-nav.module-nav {
top: 48px !important;
}
body:not(.auth-required) #appLayout.layout.workflow-layout[data-module-panel="workflowModule"],
body:not(.auth-required) #appLayout.layout.canvas-layout[data-module-panel="canvasModule"] {
box-sizing: border-box !important;
position: fixed !important;
inset: var(--mobile-topbar-offset) 0 auto 0 !important;
height: calc(var(--mobile-stable-viewport-h, 100dvh) - var(--mobile-topbar-offset)) !important;
min-height: calc(var(--mobile-stable-viewport-h, 100dvh) - var(--mobile-topbar-offset)) !important;
max-height: calc(var(--mobile-stable-viewport-h, 100dvh) - var(--mobile-topbar-offset)) !important;
margin: 0 !important;
padding: 5px !important;
overflow: hidden !important;
}
body:not(.auth-required) #appLayout[data-module-panel="workflowModule"] #workflowTab.active,
body:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasTab.active {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
body:not(.auth-required) #appLayout[data-module-panel="workflowModule"] #workflowTab.active > .workflow-shell,
body:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasTab.active > .infinite-canvas-shell.canvas-studio-shell {
box-sizing: border-box !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: minmax(0, 1fr) !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
border-radius: 12px !important;
}
body:not(.auth-required) #appLayout[data-module-panel="workflowModule"] #workflowTab.active .workflow-sidebar,
body:not(.auth-required) #appLayout[data-module-panel="workflowModule"] #workflowTab.active .workflow-inspector,
body:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasTab.active .infinite-canvas-inspector {
display: none !important;
}
body:not(.auth-required) #appLayout[data-module-panel="workflowModule"] #workflowTab.active .workflow-main,
body:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasTab.active .infinite-canvas-main {
box-sizing: border-box !important;
position: relative !important;
display: grid !important;
grid-template-rows: minmax(0, 1fr) !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
overflow: hidden !important;
border-radius: 12px !important;
}
body:not(.auth-required) #appLayout[data-module-panel="workflowModule"] #workflowTab.active .workflow-stage-wrap.workflow-lite-wrap,
body:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasTab.active #infiniteCanvasStage.infinite-canvas-stage {
box-sizing: border-box !important;
position: relative !important;
inset: auto !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
overflow: hidden !important;
border-radius: 12px !important;
}
body:not(.auth-required) #appLayout[data-module-panel="workflowModule"] #workflowTab.active .workflow-main > .workflow-status-row,
body:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasTab.active .infinite-canvas-status-row {
position: absolute !important;
width: 1px !important;
height: 1px !important;
min-width: 0 !important;
min-height: 0 !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
pointer-events: none !important;
}
body:not(.auth-required) #appLayout[data-module-panel="workflowModule"] #workflowTab.active .workflow-main > .workflow-status-row .file-summary,
body:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasTab.active .infinite-canvas-status-row .file-summary {
min-width: 0 !important;
min-height: 28px !important;
height: 28px !important;
padding: 0 8px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
body:not(.auth-required) #appLayout[data-module-panel="workflowModule"] #workflowTab.active .workflow-main > .workflow-status-row .workflow-history-actions,
body:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasTab.active .infinite-canvas-status-row .workflow-history-actions {
display: grid !important;
grid-template-columns: repeat(2, minmax(30px, auto)) !important;
align-items: center !important;
gap: 4px !important;
min-height: 28px !important;
height: 28px !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body:not(.auth-required) #appLayout[data-module-panel="workflowModule"] #workflowTab.active .workflow-main > .workflow-status-row .workflow-history-actions button,
body:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasTab.active .infinite-canvas-status-row .workflow-history-actions button {
width: auto !important;
min-width: 30px !important;
height: 27px !important;
min-height: 27px !important;
padding: 0 8px !important;
font-size: 10px !important;
border-radius: 999px !important;
}
body:not(.auth-required) > .context-menu.canvas-add-menu,
body:not(.auth-required) > .context-menu.canvas-item-menu,
body:not(.auth-required) .context-menu.canvas-add-menu,
body:not(.auth-required) .context-menu.canvas-item-menu {
width: min(300px, calc(100vw - 18px)) !important;
max-width: calc(100vw - 18px) !important;
max-height: min(430px, calc(100dvh - var(--mobile-topbar-offset) - 20px)) !important;
padding: 7px !important;
border-radius: 14px !important;
}
}
@media (max-width: 360px) {
body:not(.auth-required) header.topbar > .brand-block {
margin-top: 3px !important;
}
body:not(.auth-required) header.topbar > .top-actions.top-actions,
body.sidebar-collapsed:not(.auth-required) header.topbar > .top-actions.top-actions,
body:not(.auth-required).sidebar-collapsed header.topbar > .top-actions.top-actions,
body:not(.auth-required) #sidebarToggleBtn.sidebar-toggle.has-ui-icon,
body.sidebar-collapsed:not(.auth-required) #sidebarToggleBtn.sidebar-toggle.has-ui-icon,
body:not(.auth-required).sidebar-collapsed #sidebarToggleBtn.sidebar-toggle.has-ui-icon {
top: 11px !important;
}
body:not(.auth-required) header.topbar > nav.module-nav.module-nav {
top: 47px !important;
}
body:not(.auth-required) #appLayout[data-module-panel="workflowModule"] #workflowTab.active .workflow-main > .workflow-status-row,
body:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasTab.active .infinite-canvas-status-row {
grid-template-columns: minmax(0, 0.82fr) auto !important;
gap: 4px !important;
}
}
@media (max-width: 820px) {
body:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] {
box-sizing: border-box !important;
display: block !important;
height: calc(100dvh - var(--mobile-topbar-offset)) !important;
min-height: calc(100dvh - var(--mobile-topbar-offset)) !important;
max-height: calc(100dvh - var(--mobile-topbar-offset)) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding: 6px !important;
}
body:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] > .workbench {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 100% !important;
padding: 7px !important;
overflow: visible !important;
border-radius: 13px !important;
}
body:not(.auth-required) #settingsTab.settings-panel.active {
box-sizing: border-box !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
gap: 8px !important;
padding: 0 !important;
overflow: hidden !important;
}
body:not(.auth-required) #settingsTab.settings-panel.active *,
body:not(.auth-required) #settingsTab.settings-panel.active *::before,
body:not(.auth-required) #settingsTab.settings-panel.active *::after {
box-sizing: border-box !important;
}
body:not(.auth-required) #settingsTab.settings-panel.active > *,
body:not(.auth-required) #settingsTab.settings-panel.active :is(
.settings-advanced-direct,
.settings-advanced-body,
.settings-provider-card,
.settings-legacy-global,
.settings-provider-help,
.gateway-card,
.gateway-card-head,
.gateway-grid,
.gateway-key-manager,
.gateway-category-panel,
.gateway-category-card,
.gateway-actions,
.settings-section-title,
.model-route-toolbar,
.model-route-panel,
.model-route-card,
.model-route-head,
.model-route-grid,
.model-route-key-manager,
.category-key-add-row,
.model-route-key-list,
.model-route-key-row,
.model-route-actions,
.model-category-panel,
.model-category-card,
.model-category-fields
) {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
body:not(.auth-required) #settingsTab.settings-panel.active :is(
.settings-advanced-body,
.settings-provider-card,
.settings-legacy-global,
.gateway-grid,
.gateway-category-panel,
.gateway-category-card,
.model-route-panel,
.model-route-grid,
.model-category-panel,
.model-category-card,
.model-category-fields,
.model-route-key-manager,
.category-key-add-row,
.model-route-key-list
) {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
}
body:not(.auth-required) #settingsTab.settings-panel.active :is(.settings-provider-card, .gateway-card, .model-route-card) {
padding: 9px !important;
gap: 8px !important;
border-radius: 12px !important;
}
body:not(.auth-required) #settingsTab.settings-panel.active .settings-advanced-direct > summary {
min-height: 34px !important;
padding: 0 9px !important;
display: flex !important;
align-items: center !important;
font-size: 11.5px !important;
}
body:not(.auth-required) #settingsTab.settings-panel.active .settings-advanced-body {
padding: 8px !important;
gap: 8px !important;
}
body:not(.auth-required) #settingsTab.settings-panel.active .settings-section-title,
body:not(.auth-required) #settingsTab.settings-panel.active .gateway-card-head,
body:not(.auth-required) #settingsTab.settings-panel.active .model-route-head {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: start !important;
gap: 6px !important;
padding: 2px 0 !important;
}
body:not(.auth-required) #settingsTab.settings-panel.active .settings-section-title {
grid-template-columns: minmax(0, 1fr) !important;
}
body:not(.auth-required) #settingsTab.settings-panel.active .settings-section-title span,
body:not(.auth-required) #settingsTab.settings-panel.active .gateway-card-head span,
body:not(.auth-required) #settingsTab.settings-panel.active .model-route-head span {
max-width: 100% !important;
text-align: left !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
}
body:not(.auth-required) #settingsTab.settings-panel.active :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea) {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
body:not(.auth-required) #settingsTab.settings-panel.active .gateway-actions,
body:not(.auth-required) #settingsTab.settings-panel.active .model-route-toolbar,
body:not(.auth-required) #settingsTab.settings-panel.active .model-route-actions {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 5px !important;
}
body:not(.auth-required) #settingsTab.settings-panel.active :is(.gateway-actions, .model-route-toolbar, .model-route-actions) button {
width: 100% !important;
min-width: 0 !important;
padding: 0 6px !important;
font-size: 10px !important;
white-space: nowrap !important;
}
body:not(.auth-required) #settingsTab.settings-panel.active .model-route-enabled {
justify-self: start !important;
min-height: 26px !important;
padding: 0 7px !important;
border: 1px solid rgba(47, 109, 183, 0.22) !important;
border-radius: 999px !important;
background: rgba(234, 242, 251, 0.85) !important;
font-size: 10.5px !important;
}
body:not(.auth-required) #settingsTab.settings-panel.active .model-route-key-row {
display: grid !important;
grid-template-columns: 24px minmax(0, 1fr) 38px 38px !important;
gap: 4px !important;
align-items: center !important;
}
body:not(.auth-required) #settingsTab.settings-panel.active .model-route-key-row input {
min-width: 0 !important;
font-size: 10px !important;
}
body:not(.auth-required) #settingsTab.settings-panel.active .model-route-key-row button {
min-width: 0 !important;
width: 38px !important;
padding: 0 !important;
font-size: 10px !important;
}
body:not(.auth-required) #settingsTab.settings-panel.active .category-key-add-row {
gap: 5px !important;
}
body:not(.auth-required) #settingsTab.settings-panel.active .model-route-status {
max-width: 100% !important;
overflow-wrap: anywhere !important;
}
}
@media (max-width: 820px) {
body:not(.auth-required) #appLayout :is(#textTab, #imageTab, #videoToolTab, #audioToolTab) .command-row:not(.compact) {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
align-items: center !important;
}
body:not(.auth-required) #appLayout :is(#textTab, #imageTab, #videoToolTab, #audioToolTab) .command-row:not(.compact) > .plan-summary-inline {
flex: 1 1 170px !important;
width: auto !important;
min-width: min(100%, 160px) !important;
}
body:not(.auth-required) #appLayout :is(#textTab, #imageTab, #videoToolTab, #audioToolTab) .command-row:not(.compact) > button {
flex: 0 0 auto !important;
width: auto !important;
min-width: 82px !important;
max-width: 100% !important;
padding: 0 10px !important;
font-size: 11px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
body:not(.auth-required) #appLayout :is(#textTab, #imageTab, #videoToolTab, #audioToolTab) .command-row:not(.compact) > :is(button.primary, .primary) {
min-width: 106px !important;
}
body:not(.auth-required) #appLayout :is(#textTab, #imageTab, #videoToolTab, #audioToolTab) .command-row:not(.compact) > .hl-case-square-btn {
min-width: 96px !important;
}
body:not(.auth-required) #appLayout :is(#textTab, #imageTab, #videoToolTab, #audioToolTab) .command-row:not(.compact) > button.has-ui-icon:not(.hl-case-square-btn) > .ui-icon {
display: none !important;
}
body:not(.auth-required) #settingsTab.settings-panel.active .gateway-card-head {
grid-template-columns: minmax(0, 1fr) !important;
}
body:not(.auth-required) #settingsTab.settings-panel.active .gateway-card-head > div:first-child {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
body:not(.auth-required) #settingsTab.settings-panel.active .gateway-actions {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
body:not(.auth-required) #appLayout[data-module-panel="workflowModule"] #workflowTab.active .workflow-main > .workflow-status-row,
body:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasTab.active .infinite-canvas-status-row {
grid-template-columns: minmax(0, 1fr) auto !important;
}
body:not(.auth-required) #appLayout[data-module-panel="workflowModule"] #workflowTab.active .workflow-main > .workflow-status-row .workflow-history-actions,
body:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasTab.active .infinite-canvas-status-row .workflow-history-actions {
grid-template-columns: repeat(2, minmax(26px, auto)) !important;
width: auto !important;
max-width: none !important;
}
body:not(.auth-required) #appLayout[data-module-panel="workflowModule"] #workflowTab.active .workflow-main > .workflow-status-row .workflow-history-actions button,
body:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasTab.active .infinite-canvas-status-row .workflow-history-actions button {
width: auto !important;
min-width: 26px !important;
font-size: 10px !important;
}
}
@media (max-width: 820px) {
body:not(.auth-required) > #contextMenu.context-menu,
body:not(.auth-required) #contextMenu.context-menu {
box-sizing: border-box !important;
width: min(238px, calc(100vw - 22px)) !important;
min-width: 0 !important;
max-width: calc(100vw - 22px) !important;
max-height: min(44dvh, 268px) !important;
padding: 5px !important;
border-radius: 12px !important;
overflow: auto !important;
overscroll-behavior: contain !important;
box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16) !important;
}
body:not(.auth-required) > #contextMenu.context-menu.context-create-menu,
body:not(.auth-required) > #contextMenu.context-menu.context-edit-menu {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 4px !important;
width: min(252px, calc(100vw - 22px)) !important;
max-height: min(42dvh, 260px) !important;
}
body:not(.auth-required) > #contextMenu.context-menu .context-menu-heading,
body:not(.auth-required) > #contextMenu.context-menu .context-menu-divider {
grid-column: 1 / -1 !important;
}
body:not(.auth-required) > #contextMenu.context-menu .context-menu-heading {
min-height: 18px !important;
margin: 1px 1px 2px !important;
padding: 1px 3px 2px !important;
border-bottom: 0 !important;
gap: 5px !important;
font-size: 10.5px !important;
line-height: 1.15 !important;
}
body:not(.auth-required) > #contextMenu.context-menu .context-menu-heading:first-child {
min-height: 22px !important;
margin-top: 0 !important;
font-size: 12px !important;
}
body:not(.auth-required) > #contextMenu.context-menu .context-menu-divider {
height: 1px !important;
margin: 3px 1px !important;
}
body:not(.auth-required) > #contextMenu.context-menu button:not(.module-tab):not(.sidebar-toggle):not(.icon-button):not(.account-summary):not(.text-message-copy):not(.text-chat-delete-btn) {
min-height: 30px !important;
height: auto !important;
max-height: none !important;
padding: 5px 6px !important;
gap: 5px !important;
border-radius: 9px !important;
font-size: 10.8px !important;
line-height: 1.15 !important;
}
body:not(.auth-required) > #contextMenu.context-menu.context-create-menu button.module-create,
body:not(.auth-required) > #contextMenu.context-menu.context-edit-menu button.context-edit-action {
min-height: 34px !important;
padding: 5px !important;
border: 1px solid rgba(203, 213, 225, 0.86) !important;
border-left-width: 1px !important;
background: rgba(248, 251, 253, 0.94) !important;
}
body:not(.auth-required) > #contextMenu.context-menu.context-edit-menu button:not(.context-edit-action) {
min-height: 30px !important;
}
body:not(.auth-required) > #contextMenu.context-menu .context-label,
body:not(.auth-required) > #contextMenu.context-menu.canvas-add-menu .context-label,
body:not(.auth-required) > #contextMenu.context-menu.canvas-item-menu .context-label {
display: grid !important;
grid-template-columns: 21px minmax(0, 1fr) !important;
width: 100% !important;
gap: 5px !important;
align-items: center !important;
min-width: 0 !important;
}
body:not(.auth-required) > #contextMenu.context-menu .context-label:not(:has(.context-icon)):not(:has(.context-color-badge)) {
grid-template-columns: minmax(0, 1fr) !important;
}
body:not(.auth-required) > #contextMenu.context-menu .context-color-badge,
body:not(.auth-required) > #contextMenu.context-menu .context-icon {
width: 21px !important;
min-width: 21px !important;
height: 21px !important;
flex: 0 0 21px !important;
border-radius: 7px !important;
font-size: 10px !important;
}
body:not(.auth-required) > #contextMenu.context-menu .context-color-badge svg,
body:not(.auth-required) > #contextMenu.context-menu .context-icon svg {
width: 11.5px !important;
height: 11.5px !important;
stroke-width: 1.7 !important;
}
body:not(.auth-required) > #contextMenu.context-menu .context-copy {
min-width: 0 !important;
gap: 0 !important;
}
body:not(.auth-required) > #contextMenu.context-menu .context-title-line,
body:not(.auth-required) > #contextMenu.context-menu.canvas-add-menu .context-title-line,
body:not(.auth-required) > #contextMenu.context-menu.canvas-item-menu .context-title-line {
display: block !important;
min-width: 0 !important;
max-width: none !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
font-size: 10.8px !important;
line-height: 1.15 !important;
}
body:not(.auth-required) > #contextMenu.context-menu .context-description,
body:not(.auth-required) > #contextMenu.context-menu.canvas-add-menu .context-description,
body:not(.auth-required) > #contextMenu.context-menu.canvas-item-menu .context-description {
display: none !important;
}
body:not(.auth-required) > #contextMenu.context-menu:not(.context-create-menu):not(.context-edit-menu) .context-description {
display: block !important;
max-width: 145px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
font-size: 9.8px !important;
line-height: 1.15 !important;
}
body:not(.auth-required) > #contextMenu.context-menu .context-tag,
body:not(.auth-required) > #contextMenu.context-menu .shortcut-hint {
display: none !important;
}
body:not(.auth-required) .litegraph.litecontextmenu,
body:not(.auth-required) .litegraph.litecontextmenu.dark {
width: min(224px, calc(100vw - 22px)) !important;
min-width: 0 !important;
max-width: calc(100vw - 22px) !important;
max-height: min(42dvh, 260px) !important;
padding: 5px !important;
border-radius: 12px !important;
overflow: auto !important;
}
body:not(.auth-required) .litegraph.litecontextmenu .ai-lite-menu-drag-handle,
body:not(.auth-required) .litegraph.litecontextmenu .litemenu-title {
min-height: 20px !important;
padding: 2px 5px !important;
font-size: 10.5px !important;
touch-action: none !important;
-webkit-user-select: none !important;
user-select: none !important;
}
body:not(.auth-required) .litegraph.litecontextmenu .litemenu-entry,
body:not(.auth-required) .litegraph.litecontextmenu .litemenu-entry.submenu,
body:not(.auth-required) .litegraph.litecontextmenu .ai-lite-menu-node {
min-height: 29px !important;
padding: 4px 6px !important;
gap: 6px !important;
border-radius: 8px !important;
font-size: 10.8px !important;
line-height: 1.15 !important;
}
body:not(.auth-required) .litegraph.litecontextmenu .ai-lite-menu-node {
grid-template-columns: 21px minmax(0, 1fr) 8px !important;
}
body:not(.auth-required) .litegraph.litecontextmenu .ai-lite-menu-badge {
width: 21px !important;
height: 21px !important;
flex-basis: 21px !important;
border-radius: 7px !important;
}
body:not(.auth-required) .litegraph.litecontextmenu .ai-lite-menu-badge svg {
width: 11.5px !important;
height: 11.5px !important;
}
}
body:not(.auth-required) .command-palette-mask.command-palette-mask:not([hidden]) {
display: block !important;
padding: 0 !important;
background: rgba(15, 23, 42, 0.08) !important;
backdrop-filter: none !important;
overflow: hidden !important;
}
body:not(.auth-required) .command-palette-mask .command-palette-panel {
position: absolute !important;
left: var(--command-palette-x, 50%) !important;
top: var(--command-palette-y, 72px) !important;
display: grid !important;
grid-template-rows: auto minmax(0, 1fr) !important;
gap: 8px !important;
width: min(300px, calc(100vw - 24px)) !important;
max-width: calc(100vw - 24px) !important;
max-height: min(560px, calc(100dvh - 24px)) !important;
margin: 0 !important;
padding: 10px !important;
border-radius: 12px !important;
overflow: hidden !important;
box-sizing: border-box !important;
box-shadow: 0 18px 46px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(47, 109, 183, 0.06) !important;
}
body:not(.auth-required) .command-palette-mask:not(.is-anchored) .command-palette-panel {
transform: translateX(-50%) !important;
}
body:not(.auth-required) .command-palette-panel > .modal-head {
position: static !important;
top: auto !important;
z-index: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border-bottom: 0 !important;
background: transparent !important;
backdrop-filter: none !important;
}
body:not(.auth-required) .command-palette-panel > .modal-head h2 {
font-size: 13px !important;
line-height: 1.2 !important;
font-weight: 700 !important;
color: #475467 !important;
letter-spacing: 0 !important;
}
body:not(.auth-required) .command-palette-panel > .modal-head button {
min-height: 28px !important;
height: 28px !important;
padding: 0 10px !important;
border-radius: 8px !important;
font-size: 12px !important;
}
body:not(.auth-required) .command-palette-search.command-palette-search {
width: 100% !important;
min-width: 0 !important;
height: 34px !important;
min-height: 34px !important;
max-height: 34px !important;
margin: 0 !important;
padding: 0 10px !important;
border-radius: 8px !important;
box-sizing: border-box !important;
font-size: 12px !important;
line-height: 1.2 !important;
}
body:not(.auth-required) .command-palette-list.command-palette-list {
display: grid !important;
gap: 8px !important;
min-height: 0 !important;
max-height: none !important;
width: 100% !important;
min-width: 0 !important;
padding: 0 3px 4px 0 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
overscroll-behavior: contain !important;
box-sizing: border-box !important;
}
body:not(.auth-required) .command-palette-group.command-palette-group {
display: grid !important;
gap: 3px !important;
min-width: 0 !important;
}
body:not(.auth-required) .command-palette-category.command-palette-category {
min-height: 22px !important;
gap: 6px !important;
padding: 3px 2px !important;
border: 0 !important;
background: transparent !important;
color: #667085 !important;
font-size: 11.5px !important;
line-height: 1.15 !important;
font-weight: 850 !important;
}
body:not(.auth-required) .command-palette-category .context-color-badge {
width: 21px !important;
min-width: 21px !important;
height: 21px !important;
border-radius: 7px !important;
background: transparent !important;
color: var(--menu-accent, #2f6db7) !important;
}
body:not(.auth-required) .command-palette-group-items.command-palette-group-items {
display: grid !important;
gap: 2px !important;
min-width: 0 !important;
}
body:not(.auth-required) .command-palette-item.command-palette-item {
position: relative !important;
display: grid !important;
grid-template-columns: 24px minmax(0, 1fr) !important;
align-items: center !important;
gap: 8px !important;
width: 100% !important;
min-width: 0 !important;
min-height: 42px !important;
height: auto !important;
max-height: none !important;
padding: 6px 8px 6px 6px !important;
border: 1px solid transparent !important;
border-radius: 8px !important;
background: transparent !important;
box-shadow: none !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
body:not(.auth-required) .command-palette-item.command-palette-item::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
top: 8px !important;
bottom: 8px !important;
width: 2px !important;
border-radius: 999px !important;
background: var(--menu-accent, #2f6db7) !important;
opacity: 0 !important;
}
body:not(.auth-required) .command-palette-item.command-palette-item:hover,
body:not(.auth-required) .command-palette-item.command-palette-item.active {
border-color: color-mix(in srgb, var(--menu-accent, #2f6db7) 24%, #d9e2ee) !important;
background: color-mix(in srgb, var(--menu-accent, #2f6db7) 7%, #ffffff) !important;
}
body:not(.auth-required) .command-palette-item.command-palette-item:hover::before,
body:not(.auth-required) .command-palette-item.command-palette-item.active::before {
opacity: 1 !important;
}
body:not(.auth-required) .command-palette-item .context-color-badge {
width: 24px !important;
min-width: 24px !important;
height: 24px !important;
border-radius: 7px !important;
background: color-mix(in srgb, var(--menu-accent, #2f6db7) 12%, #ffffff) !important;
}
body:not(.auth-required) .command-palette-item .context-color-badge svg {
width: 12px !important;
height: 12px !important;
stroke-width: 1.6 !important;
}
body:not(.auth-required) .command-palette-item-main {
display: grid !important;
gap: 2px !important;
min-width: 0 !important;
overflow: hidden !important;
}
body:not(.auth-required) .command-palette-item-title {
display: flex !important;
align-items: center !important;
gap: 5px !important;
min-width: 0 !important;
}
body:not(.auth-required) .command-palette-item strong {
min-width: 0 !important;
max-width: 100% !important;
color: #1d2939 !important;
font-size: 12.5px !important;
line-height: 1.2 !important;
font-weight: 800 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
body:not(.auth-required) .command-palette-item small {
display: block !important;
min-width: 0 !important;
margin: 0 !important;
color: #667085 !important;
font-size: 11px !important;
line-height: 1.25 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
body.theme-dark:not(.auth-required) .command-palette-mask.command-palette-mask:not([hidden]) {
background: rgba(3, 7, 18, 0.24) !important;
}
body.theme-dark:not(.auth-required) .command-palette-mask .command-palette-panel {
background: rgba(18, 21, 29, 0.98) !important;
border-color: rgba(141, 149, 165, 0.34) !important;
box-shadow: 0 18px 46px rgba(0, 0, 0, 0.38) !important;
}
body.theme-dark:not(.auth-required) .command-palette-panel > .modal-head h2,
body.theme-dark:not(.auth-required) .command-palette-item strong {
color: #f4f8ff !important;
}
body.theme-dark:not(.auth-required) .command-palette-category.command-palette-category,
body.theme-dark:not(.auth-required) .command-palette-item small {
color: #a9b8cc !important;
}
body.theme-dark:not(.auth-required) .command-palette-search.command-palette-search {
background: rgba(9, 11, 16, 0.88) !important;
border-color: rgba(141, 149, 165, 0.36) !important;
color: #e7eef9 !important;
}
body.theme-dark:not(.auth-required) .command-palette-item.command-palette-item {
background: transparent !important;
border-color: transparent !important;
}
body.theme-dark:not(.auth-required) .command-palette-item.command-palette-item:hover,
body.theme-dark:not(.auth-required) .command-palette-item.command-palette-item.active {
background: color-mix(in srgb, var(--menu-accent, #5aa6e8) 14%, #111a29) !important;
border-color: color-mix(in srgb, var(--menu-accent, #5aa6e8) 34%, rgba(141, 149, 165, 0.26)) !important;
}
body.theme-dark:not(.auth-required) .command-palette-item .context-color-badge {
background: color-mix(in srgb, var(--menu-accent, #5aa6e8) 18%, #111a29) !important;
}
@media (max-width: 820px) {
body:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasStage.infinite-canvas-stage,
body:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasStage.infinite-canvas-stage :not(input):not(textarea):not([contenteditable="true"]),
body:not(.auth-required) #appLayout[data-module-panel="workflowModule"] .workflow-stage-wrap,
body:not(.auth-required) #appLayout[data-module-panel="workflowModule"] .workflow-stage-wrap :not(input):not(textarea):not([contenteditable="true"]),
body:not(.auth-required) :is(#workflowCommandModal, #canvasCommandModal) .command-palette-panel,
body:not(.auth-required) :is(#workflowCommandModal, #canvasCommandModal) .command-palette-panel :not(input):not(textarea):not([contenteditable="true"]) {
-webkit-user-select: none !important;
user-select: none !important;
-webkit-touch-callout: none !important;
}
body:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasStage.infinite-canvas-stage :is(input, textarea, [contenteditable="true"]),
body:not(.auth-required) #appLayout[data-module-panel="workflowModule"] .workflow-stage-wrap :is(input, textarea, [contenteditable="true"]),
body:not(.auth-required) :is(#workflowCommandModal, #canvasCommandModal) .command-palette-search {
-webkit-user-select: text !important;
user-select: text !important;
-webkit-touch-callout: default !important;
}
body:not(.auth-required) :is(#workflowCommandModal, #canvasCommandModal).command-palette-mask:not([hidden]) {
display: flex !important;
padding: calc(var(--mobile-topbar-offset) + 6px) 7px 8px !important;
align-items: flex-start !important;
justify-content: center !important;
background: rgba(15, 23, 42, 0.16) !important;
overflow-y: auto !important;
}
body:not(.auth-required) :is(#workflowCommandModal, #canvasCommandModal) .command-palette-panel {
position: relative !important;
left: auto !important;
top: auto !important;
transform: none !important;
display: grid !important;
grid-template-rows: auto minmax(0, 1fr) !important;
gap: 6px !important;
width: min(360px, calc(100vw - 14px)) !important;
max-width: calc(100vw - 14px) !important;
max-height: calc(100dvh - var(--mobile-topbar-offset) - 14px) !important;
padding: 8px !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
body:not(.auth-required) :is(#workflowCommandModal, #canvasCommandModal) .command-palette-panel > .modal-head {
top: -8px !important;
margin: -8px -8px 0 !important;
padding: 8px !important;
min-width: 0 !important;
}
body:not(.auth-required) :is(#workflowCommandModal, #canvasCommandModal) .command-palette-panel > .modal-head h2 {
font-size: 15px !important;
line-height: 1.2 !important;
}
body:not(.auth-required) :is(#workflowCommandModal, #canvasCommandModal) .command-palette-search {
width: 100% !important;
min-width: 0 !important;
height: 31px !important;
min-height: 31px !important;
max-height: 31px !important;
margin: 0 !important;
padding: 5px 8px !important;
border-radius: 10px !important;
box-sizing: border-box !important;
font-size: 11.5px !important;
line-height: 1.2 !important;
}
body:not(.auth-required) :is(#workflowCommandModal, #canvasCommandModal) .command-palette-list {
display: grid !important;
gap: 5px !important;
min-height: 0 !important;
max-height: none !important;
width: 100% !important;
min-width: 0 !important;
padding: 0 2px 8px 0 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
overscroll-behavior: contain !important;
box-sizing: border-box !important;
}
body:not(.auth-required) :is(#workflowCommandModal, #canvasCommandModal) .command-palette-group {
display: grid !important;
gap: 3px !important;
min-width: 0 !important;
}
body:not(.auth-required) :is(#workflowCommandModal, #canvasCommandModal) .command-palette-category {
min-height: 22px !important;
padding: 2px 1px 3px !important;
gap: 5px !important;
font-size: 11px !important;
line-height: 1.15 !important;
}
body:not(.auth-required) :is(#workflowCommandModal, #canvasCommandModal) .command-palette-category .context-color-badge {
width: 19px !important;
min-width: 19px !important;
max-width: 19px !important;
height: 19px !important;
min-height: 19px !important;
max-height: 19px !important;
border-radius: 7px !important;
aspect-ratio: 1 / 1 !important;
box-sizing: border-box !important;
}
body:not(.auth-required) :is(#workflowCommandModal, #canvasCommandModal) .command-palette-group-items {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 4px !important;
width: 100% !important;
min-width: 0 !important;
}
body:not(.auth-required) :is(#workflowCommandModal, #canvasCommandModal) .command-palette-item {
display: grid !important;
grid-template-columns: 20px minmax(0, 1fr) !important;
align-items: center !important;
gap: 7px !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 34px !important;
max-height: none !important;
padding: 4px 7px 4px 5px !important;
border-radius: 9px !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
body:not(.auth-required) :is(#workflowCommandModal, #canvasCommandModal) .command-palette-item-main {
display: block !important;
min-width: 0 !important;
overflow: hidden !important;
}
body:not(.auth-required) :is(#workflowCommandModal, #canvasCommandModal) .command-palette-item .context-color-badge {
width: 20px !important;
min-width: 20px !important;
max-width: 20px !important;
height: 20px !important;
min-height: 20px !important;
max-height: 20px !important;
flex: 0 0 20px !important;
aspect-ratio: 1 / 1 !important;
border-radius: 7px !important;
box-sizing: border-box !important;
line-height: 0 !important;
overflow: hidden !important;
}
body:not(.auth-required) :is(#workflowCommandModal, #canvasCommandModal) .command-palette-item .context-color-badge svg {
display: block !important;
width: 11px !important;
min-width: 11px !important;
max-width: 11px !important;
height: 11px !important;
min-height: 11px !important;
max-height: 11px !important;
flex: 0 0 auto !important;
transform: none !important;
}
body:not(.auth-required) :is(#workflowCommandModal, #canvasCommandModal) .command-palette-item strong {
min-width: 0 !important;
max-width: 100% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
font-size: 11.8px !important;
line-height: 1.15 !important;
}
body:not(.auth-required) :is(#workflowCommandModal, #canvasCommandModal) .command-palette-item small {
display: none !important;
min-width: 0 !important;
max-width: 100% !important;
margin: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
font-size: 10.5px !important;
line-height: 1.2 !important;
}
}
@media (max-width: 820px) {
body:not(.auth-required) #canvasProjectModal.modal-mask:not([hidden]) {
padding: calc(var(--mobile-topbar-offset) + 6px) 7px 8px !important;
align-items: flex-start !important;
justify-content: center !important;
overflow: hidden !important;
}
body:not(.auth-required) #canvasProjectModal .canvas-project-panel {
display: grid !important;
grid-template-rows: auto auto minmax(0, 1fr) !important;
gap: 8px !important;
width: min(380px, calc(100vw - 14px)) !important;
max-width: calc(100vw - 14px) !important;
max-height: calc(100dvh - var(--mobile-topbar-offset) - 14px) !important;
padding: 9px !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
body:not(.auth-required) #canvasProjectModal .canvas-project-panel > .modal-head {
top: -9px !important;
margin: -9px -9px 0 !important;
padding: 9px !important;
min-width: 0 !important;
}
body:not(.auth-required) #canvasProjectModal .canvas-project-panel > .modal-head h2 {
font-size: 16px !important;
line-height: 1.15 !important;
}
body:not(.auth-required) #canvasProjectModal .canvas-project-panel > .modal-head p {
margin-top: 3px !important;
font-size: 10.5px !important;
line-height: 1.28 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
body:not(.auth-required) #canvasProjectModal .canvas-project-tools {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 6px !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
}
body:not(.auth-required) #canvasProjectModal #canvasProjectSearch {
grid-column: 1 / -1 !important;
width: 100% !important;
min-width: 0 !important;
height: 32px !important;
min-height: 32px !important;
max-height: 32px !important;
padding: 5px 8px !important;
border-radius: 10px !important;
box-sizing: border-box !important;
font-size: 11.5px !important;
}
body:not(.auth-required) #canvasProjectModal .canvas-project-tools button {
width: 100% !important;
min-width: 0 !important;
height: 31px !important;
min-height: 31px !important;
max-height: 31px !important;
padding: 0 5px !important;
border-radius: 10px !important;
font-size: 11px !important;
line-height: 1 !important;
white-space: nowrap !important;
}
body:not(.auth-required) #canvasProjectModal .canvas-project-list {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
align-content: start !important;
gap: 8px !important;
width: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
max-height: none !important;
padding: 0 2px 10px 0 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
overscroll-behavior: contain !important;
box-sizing: border-box !important;
}
body:not(.auth-required) #canvasProjectModal .canvas-project-card {
display: grid !important;
grid-template-columns: 58px minmax(0, 1fr) !important;
grid-template-rows: auto auto !important;
align-items: center !important;
gap: 7px 8px !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
padding: 8px !important;
border-radius: 12px !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
body:not(.auth-required) #canvasProjectModal .canvas-project-card.active {
box-shadow: inset 3px 0 0 var(--accent), 0 8px 18px rgba(15, 23, 42, 0.06) !important;
}
body:not(.auth-required) #canvasProjectModal .canvas-project-preview {
grid-column: 1 !important;
grid-row: 1 !important;
width: 58px !important;
min-width: 58px !important;
max-width: 58px !important;
height: 48px !important;
min-height: 48px !important;
max-height: 48px !important;
padding: 0 !important;
border-radius: 10px !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
body:not(.auth-required) #canvasProjectModal .canvas-project-preview-node {
left: var(--preview-x, 8%) !important;
top: var(--preview-y, 10%) !important;
width: var(--preview-w, 28%) !important;
height: var(--preview-h, 18%) !important;
min-width: 11px !important;
min-height: 8px !important;
border-radius: 4px !important;
box-shadow: 0 3px 8px rgba(15, 23, 42, 0.14) !important;
}
body:not(.auth-required) #canvasProjectModal .canvas-project-preview-empty {
min-height: 0 !important;
height: 100% !important;
padding: 0 !important;
font-size: 10px !important;
line-height: 1 !important;
}
body:not(.auth-required) #canvasProjectModal .canvas-project-main {
grid-column: 2 !important;
grid-row: 1 !important;
display: grid !important;
gap: 3px !important;
min-width: 0 !important;
}
body:not(.auth-required) #canvasProjectModal .workflow-project-title-row {
gap: 5px !important;
min-width: 0 !important;
}
body:not(.auth-required) #canvasProjectModal .workflow-project-title-row strong {
font-size: 12px !important;
line-height: 1.18 !important;
}
body:not(.auth-required) #canvasProjectModal .workflow-project-current {
padding: 2px 6px !important;
border-radius: 999px !important;
font-size: 10px !important;
line-height: 1 !important;
}
body:not(.auth-required) #canvasProjectModal .canvas-project-main p,
body:not(.auth-required) #canvasProjectModal .canvas-project-main small {
margin: 0 !important;
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
font-size: 10.5px !important;
line-height: 1.2 !important;
}
body:not(.auth-required) #canvasProjectModal .canvas-project-actions {
grid-column: 1 / -1 !important;
grid-row: 2 !important;
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 5px !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
align-self: stretch !important;
}
body:not(.auth-required) #canvasProjectModal .canvas-project-actions button {
width: 100% !important;
min-width: 0 !important;
height: 28px !important;
min-height: 28px !important;
max-height: 28px !important;
padding: 0 4px !important;
border-radius: 9px !important;
font-size: 10.8px !important;
line-height: 1 !important;
white-space: nowrap !important;
}
}
@media (max-width: 820px) {
body:not(.auth-required) #appLayout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout) {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 8px !important;
width: 100% !important;
max-width: 100vw !important;
overflow-x: hidden !important;
}
body:not(.auth-required) #appLayout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout) > .panel {
grid-column: 1 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
body:not(.auth-required) #appLayout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout) > .monitor {
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
order: 2 !important;
max-height: none !important;
overflow: visible !important;
}
body:not(.auth-required) #appLayout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout) > .workbench {
order: 1 !important;
}
body:not(.auth-required) #appLayout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .monitor-actions,
body:not(.auth-required) #appLayout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .monitor .command-row.compact {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 5px !important;
width: 100% !important;
min-width: 0 !important;
}
body:not(.auth-required) #appLayout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .monitor-actions button,
body:not(.auth-required) #appLayout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .monitor .command-row.compact button {
width: 100% !important;
min-width: 0 !important;
height: 29px !important;
min-height: 29px !important;
max-height: 29px !important;
padding: 0 5px !important;
border-radius: 9px !important;
font-size: 10.5px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
body:not(.auth-required) #appLayout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .monitor .command-row.compact button.has-ui-icon > .ui-icon {
display: none !important;
}
body:not(.auth-required) #appLayout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .job-list,
body:not(.auth-required) #appLayout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .gallery {
overflow-x: hidden !important;
}
body:not(.auth-required) #settingsTab.settings-panel.active {
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
}
body:not(.auth-required) #settingsTab.settings-panel.active * {
min-width: 0;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
height: auto !important;
min-height: calc(100dvh - var(--mobile-topbar-offset, 84px)) !important;
overflow-x: hidden !important;
overflow-y: auto !important;
scroll-snap-type: none !important;
touch-action: auto !important;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) > .workbench,
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) > .monitor {
flex: initial !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
scroll-snap-align: none !important;
}
}
@media (max-width: 820px) {
body:not(.auth-required) #appLayout[data-module-panel="workflowModule"] #workflowTab.active .workflow-toolbar-actions button,
body:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasTab.active .canvas-board-actions button {
min-height: 30px !important;
height: 30px !important;
max-height: 30px !important;
padding: 0 8px !important;
border-radius: 9px !important;
font-size: 11px !important;
line-height: 1 !important;
}
body:not(.auth-required) #caseModal .modal-tools {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(92px, 0.55fr) !important;
gap: 6px !important;
}
body:not(.auth-required) #caseModal .modal-tools input {
grid-column: 1 / -1 !important;
}
body:not(.auth-required) #caseModal .modal-tools button,
body:not(.auth-required) #watermarkModal .watermark-library-actions button,
body:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-tools button {
min-width: 0 !important;
min-height: 30px !important;
height: 30px !important;
max-height: 30px !important;
padding: 0 7px !important;
border-radius: 9px !important;
font-size: 10.8px !important;
}
body:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-tools {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(74px, 0.62fr) minmax(66px, 0.54fr) !important;
align-items: stretch !important;
gap: 5px !important;
width: 100% !important;
min-width: 0 !important;
}
body:not(.auth-required) #workflowMediaLibraryModal #workflowMediaLibrarySearch {
grid-column: 1 / -1 !important;
width: 100% !important;
min-width: 0 !important;
}
body:not(.auth-required) #workflowMediaLibraryModal #workflowMediaLibraryKind,
body:not(.auth-required) #workflowMediaLibraryModal #workflowMediaLibraryDownloadBtn,
body:not(.auth-required) #workflowMediaLibraryModal #workflowMediaLibraryRefreshBtn {
grid-row: 2 !important;
width: 100% !important;
min-width: 0 !important;
}
body:not(.auth-required) #caseModal .case-list {
width: 100% !important;
min-width: 0 !important;
overflow-x: hidden !important;
padding: 0 2px 8px 0 !important;
}
body:not(.auth-required) #caseModal .case-row {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
align-items: stretch !important;
width: 100% !important;
min-width: 0 !important;
gap: 6px !important;
padding: 7px !important;
box-sizing: border-box !important;
}
body:not(.auth-required) #caseModal button.case-select {
grid-column: 1 / -1 !important;
display: grid !important;
grid-template-columns: 48px minmax(0, 1fr) !important;
align-items: center !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
min-height: 58px !important;
height: auto !important;
max-height: none !important;
padding: 7px !important;
border-radius: 10px !important;
overflow: hidden !important;
}
body:not(.auth-required) #caseModal .case-preview {
width: 48px !important;
min-width: 48px !important;
height: 48px !important;
min-height: 48px !important;
border-radius: 9px !important;
}
body:not(.auth-required) #caseModal .case-row > button:not(.case-select) {
width: 100% !important;
min-width: 0 !important;
min-height: 30px !important;
height: 30px !important;
max-height: 30px !important;
padding: 0 8px !important;
border-radius: 9px !important;
font-size: 11px !important;
}
body:not(.auth-required) #caseModal .case-param-list em {
max-width: 96px !important;
padding: 2px 6px !important;
font-size: 10px !important;
}
body:not(.auth-required) #watermarkModal .watermark-library {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 8px !important;
max-height: calc(100dvh - var(--mobile-topbar-offset, 84px) - 132px) !important;
overflow-x: hidden !important;
overflow-y: auto !important;
padding: 0 2px 8px 0 !important;
}
body:not(.auth-required) #watermarkModal .watermark-library-card {
display: grid !important;
grid-template-columns: 76px minmax(0, 1fr) !important;
grid-template-rows: auto auto !important;
align-items: center !important;
gap: 6px 8px !important;
padding: 7px !important;
border-radius: 10px !important;
overflow: hidden !important;
}
body:not(.auth-required) #watermarkModal button.watermark-library-preview {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
width: 76px !important;
min-width: 76px !important;
max-width: 76px !important;
height: 52px !important;
min-height: 52px !important;
max-height: 52px !important;
padding: 0 !important;
border-radius: 9px !important;
}
body:not(.auth-required) #watermarkModal .watermark-library-meta,
body:not(.auth-required) #watermarkModal .watermark-library-card-actions {
grid-column: 2 !important;
min-width: 0 !important;
}
body:not(.auth-required) #watermarkModal .watermark-library-card-actions {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 5px !important;
}
body:not(.auth-required) #watermarkModal .watermark-library-card-actions button,
body:not(.auth-required) #watermarkModal .watermark-template-actions button {
min-width: 0 !important;
min-height: 30px !important;
height: 30px !important;
max-height: 30px !important;
padding: 0 6px !important;
border-radius: 9px !important;
font-size: 10.5px !important;
white-space: nowrap !important;
}
body:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-list {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
justify-content: stretch !important;
align-content: start !important;
column-gap: 6px !important;
max-height: calc(100dvh - var(--mobile-topbar-offset, 84px) - 164px) !important;
overflow-x: hidden !important;
overflow-y: auto !important;
padding: 0 1px 0 0 !important;
}
body:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-card {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: auto minmax(0, 1fr) !important;
align-items: start !important;
min-width: 0 !important;
min-height: 0 !important;
padding: 5px !important;
gap: 4px !important;
border-radius: 10px !important;
}
body:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-preview {
grid-column: 1 !important;
grid-row: 1 !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
padding: 0 !important;
border-radius: 8px !important;
border: 1px solid rgba(148, 163, 184, 0.28) !important;
aspect-ratio: var(--workflow-media-preview-ratio, 1 / 1) !important;
}
body:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-select {
width: 24px !important;
min-width: 24px !important;
max-width: 24px !important;
height: 24px !important;
min-height: 24px !important;
max-height: 24px !important;
top: 8px !important;
left: 8px !important;
border-radius: 6px !important;
}
body:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-meta {
grid-column: 1 !important;
grid-row: 2 !important;
display: grid !important;
align-content: start !important;
gap: 3px !important;
min-width: 0 !important;
padding: 0 !important;
}
body:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-title {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 4px !important;
}
body:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-title strong {
font-size: 10.8px !important;
line-height: 1.12 !important;
}
body:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-title span {
padding: 1px 5px !important;
font-size: 9.5px !important;
line-height: 1.2 !important;
}
body:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-meta p {
display: -webkit-box !important;
min-height: 13px !important;
margin: 0 !important;
color: #64748b !important;
font-size: 9.5px !important;
line-height: 1.18 !important;
-webkit-line-clamp: 1 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
body:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-meta small:not(.workflow-media-library-review-owner) {
display: none !important;
}
body:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-taskline {
gap: 2px !important;
margin-top: 0 !important;
min-height: 14px !important;
flex-wrap: nowrap !important;
}
body:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-taskline span {
padding: 0 4px !important;
font-size: 8.8px !important;
line-height: 1.25 !important;
}
body:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-actions {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 3px !important;
margin-top: 0 !important;
}
body:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-actions button {
min-width: 0 !important;
min-height: 24px !important;
height: 24px !important;
max-height: 24px !important;
padding: 0 4px !important;
border-radius: 8px !important;
font-size: 9.8px !important;
line-height: 1 !important;
white-space: nowrap !important;
}
body:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-actions button.danger {
grid-column: 1 / -1 !important;
}
body:not(.auth-required) :is(#workflowProjectModal, #canvasProjectModal) :is(.workflow-project-list, .canvas-project-list) {
overflow-x: hidden !important;
}
body:not(.auth-required) :is(#workflowProjectModal, #canvasProjectModal) :is(.workflow-project-tools, .canvas-project-tools) button:not(.project-icon-btn) {
min-width: 0 !important;
min-height: 30px !important;
height: 30px !important;
max-height: 30px !important;
padding: 0 7px !important;
border-radius: 9px !important;
font-size: 10.8px !important;
}
body:not(.auth-required) #accountUsageModal .modal-head {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: start !important;
gap: 7px !important;
}
body:not(.auth-required) #accountUsageModal .modal-head-actions {
display: flex !important;
flex-wrap: wrap !important;
justify-content: flex-end !important;
gap: 6px !important;
width: auto !important;
justify-self: end !important;
}
body:not(.auth-required) :is(#caseModal, #watermarkModal, #workflowProjectModal, #canvasProjectModal, #workflowMediaLibraryModal, #workflowCommandModal, #canvasCommandModal, #accountUsageModal) .modal-head button {
min-height: 30px !important;
height: 30px !important;
max-height: 30px !important;
}
body:not(.auth-required) #accountUsageModal .account-usage-tab,
body:not(.auth-required) #accountUsageModal .account-usage-filter button,
body:not(.auth-required) #accountUsageModal .account-usage-tools > button {
width: 100% !important;
min-width: 0 !important;
min-height: 30px !important;
height: 30px !important;
max-height: 30px !important;
padding: 0 7px !important;
border-radius: 9px !important;
font-size: 11px !important;
}
body:not(.auth-required) #accountUsageModal .modal-head-actions button {
width: auto !important;
min-width: 64px !important;
min-height: 30px !important;
height: 30px !important;
max-height: 30px !important;
padding: 0 10px !important;
border-radius: 9px !important;
font-size: 11px !important;
white-space: nowrap !important;
}
body:not(.auth-required) #accountUsageModal .account-usage-tools {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 6px !important;
}
body:not(.auth-required) #accountUsageModal .account-usage-filter {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
width: 100% !important;
min-width: 0 !important;
gap: 4px !important;
}
body:not(.auth-required) #accountUsageModal .modal-head {
position: static !important;
top: auto !important;
z-index: auto !important;
margin: 0 0 12px !important;
padding: 0 0 12px !important;
background: transparent !important;
backdrop-filter: none !important;
}
}
@media (min-width: 430px) and (max-width: 820px) {
body:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-panel {
--workflow-media-card-min: 144px;
--workflow-media-card-max: 168px;
}
body:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-list {
grid-template-columns: repeat(auto-fill, minmax(var(--workflow-media-card-min), var(--workflow-media-card-max))) !important;
justify-content: center !important;
}
}
body:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-list {
grid-template-columns: repeat(auto-fill, minmax(var(--workflow-media-card-min, 176px), var(--workflow-media-card-max, 204px))) !important;
justify-content: center !important;
}
@media (max-width: 429px) {
body:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-list {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
justify-content: stretch !important;
}
}
body:not(.auth-required) :is(#caseModal, #workflowProjectModal, #canvasProjectModal, #watermarkModal) :is(.case-list, .workflow-project-list, .canvas-project-list, .watermark-library) {
display: grid !important;
align-content: start !important;
justify-content: center !important;
overflow-x: hidden !important;
}
body:not(.auth-required) #caseModal .case-list {
grid-template-columns: repeat(auto-fill, minmax(220px, 280px)) !important;
}
body:not(.auth-required) #workflowProjectModal .workflow-project-list {
grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)) !important;
justify-content: start !important;
}
body:not(.auth-required) #canvasProjectModal .canvas-project-list {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
justify-content: start !important;
}
body:not(.auth-required) #watermarkModal .watermark-library {
grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)) !important;
justify-content: start !important;
}
body:not(.auth-required) :is(#caseModal .case-row, #workflowProjectModal .workflow-project-card, #canvasProjectModal .canvas-project-card, #watermarkModal .watermark-library-card) {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
body:not(.auth-required) #caseModal .modal-tools {
display: grid !important;
align-items: stretch !important;
gap: 5px !important;
width: 100% !important;
min-width: 0 !important;
grid-template-columns: minmax(0, 1fr) minmax(82px, 0.48fr) !important;
}
body:not(.auth-required) #workflowProjectModal .workflow-project-tools,
body:not(.auth-required) #canvasProjectModal .canvas-project-tools {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 8px !important;
width: 100% !important;
min-width: 0 !important;
}
body:not(.auth-required) #workflowProjectModal .workflow-project-tools > input[type="search"],
body:not(.auth-required) #canvasProjectModal .canvas-project-tools > input[type="search"] {
flex: 1 1 100% !important;
width: 100% !important;
min-width: 0 !important;
}
body:not(.auth-required) #workflowProjectModal .workflow-project-tools > button,
body:not(.auth-required) #canvasProjectModal .canvas-project-tools > button {
flex: 0 0 auto !important;
width: auto !important;
min-width: 0 !important;
}
body:not(.auth-required) #caseModal .modal-tools input {
grid-column: 1 / -1 !important;
width: 100% !important;
min-width: 0 !important;
}
body:not(.auth-required) #caseModal .modal-tools select,
body:not(.auth-required) #caseModal .modal-tools button {
width: 100% !important;
min-width: 0 !important;
}
body:not(.auth-required) #watermarkModal .watermark-library-actions {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px !important;
}
body:not(.auth-required) #watermarkModal .watermark-library-actions button {
width: auto !important;
min-width: 92px !important;
max-width: none !important;
flex: 0 0 auto !important;
}
@media (max-width: 429px) {
body:not(.auth-required) #caseModal .case-list,
body:not(.auth-required) #workflowProjectModal .workflow-project-list,
body:not(.auth-required) #canvasProjectModal .canvas-project-list,
body:not(.auth-required) #watermarkModal .watermark-library {
grid-template-columns: minmax(0, 1fr) !important;
justify-content: stretch !important;
}
}
@media (min-width: 821px) {
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .workbench,
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor {
border-radius: 16px !important;
}
body:not(.auth-required) #appLayout.layout.media-tool-layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="videoModule"], [data-module-panel="audioModule"]) {
--layout-column-gap: 0px !important;
column-gap: 0 !important;
}
body:not(.auth-required) #appLayout.layout:is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) {
--media-form-gap: 10px;
--media-inline-gap: 8px;
--media-label-gap: 5px;
--media-control-size: var(--control-height);
--media-textarea-size: 98px;
--media-reference-size: 72px;
--media-hint-gap: 0px;
}
body:not(.auth-required) #appLayout.layout[data-module-panel="batchModule"] .tab-panel.active,
body:not(.auth-required) #appLayout.layout.media-tool-layout:is([data-module-panel="videoModule"], [data-module-panel="audioModule"]) :is(#videoToolTab, #audioToolTab).tool-panel.active {
padding: 8px 12px 12px !important;
}
body:not(.auth-required) #appLayout.layout[data-module-panel="batchModule"] > .workbench > .tabs,
body:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="videoModule"] #videoToolTab > .tool-page-head,
body:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #audioToolTab > #musicModeTabs.tabs,
body:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #audioToolTab > .tool-mode-tabs {
align-items: stretch !important;
justify-content: stretch !important;
gap: 4px !important;
width: 100% !important;
max-width: 100% !important;
min-height: calc(var(--tab-height) + 8px) !important;
height: calc(var(--tab-height) + 8px) !important;
margin: 0 0 4px !important;
padding: 4px !important;
box-sizing: border-box !important;
border: 1px solid rgba(211, 220, 233, 0.92) !important;
border-radius: 12px !important;
background: linear-gradient(180deg, rgba(249, 251, 255, 0.98), rgba(241, 246, 252, 0.96)) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 1px 2px rgba(16, 24, 40, 0.04) !important;
overflow: hidden !important;
}
body:not(.auth-required) #appLayout.layout[data-module-panel="batchModule"] > .workbench > .tabs,
body:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #audioToolTab > #musicModeTabs.tabs,
body:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #audioToolTab > .tool-mode-tabs {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #audioToolTab > #musicModeTabs.tabs,
body:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #audioToolTab > .tool-mode-tabs {
width: calc(100% + 24px) !important;
max-width: calc(100% + 24px) !important;
margin: -8px -12px 12px !important;
}
body:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="videoModule"] #videoToolTab > .tool-page-head {
display: flex !important;
width: calc(100% + 24px) !important;
max-width: calc(100% + 24px) !important;
margin: -8px -12px 12px !important;
}
body:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="videoModule"] #videoToolTab > .tool-page-head > div {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex: 1 1 100% !important;
min-width: 0 !important;
margin: 0 !important;
}
body:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="videoModule"] #videoToolTab > .tool-page-head h2 {
margin: 0 !important;
color: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
body:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="videoModule"] #videoToolTab > .tool-page-head p {
display: none !important;
}
body:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="videoModule"] #videoToolTab > .tool-page-head > div,
body:not(.auth-required) #appLayout.layout[data-module-panel="batchModule"] .tabs .tab,
body:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #audioToolTab > #musicModeTabs.tabs .tab,
body:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #audioToolTab > .tool-mode-tabs .tool-mode-tab {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-width: 0 !important;
min-height: var(--tab-height) !important;
height: var(--tab-height) !important;
max-height: var(--tab-height) !important;
padding: 0 12px !important;
border: 1px solid transparent !important;
border-radius: 9px !important;
background: transparent !important;
color: #526174 !important;
box-shadow: none !important;
font-size: 12.5px !important;
font-weight: 820 !important;
line-height: 1 !important;
transition: background var(--motion-fast) ease, color var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease !important;
}
body:not(.auth-required) #appLayout.layout[data-module-panel="batchModule"] .tabs .tab:hover,
body:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #audioToolTab > #musicModeTabs.tabs .tab:hover,
body:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #audioToolTab > .tool-mode-tabs .tool-mode-tab:hover {
background: rgba(255, 255, 255, 0.68) !important;
color: #344054 !important;
}
body:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="videoModule"] #videoToolTab > .tool-page-head > div,
body:not(.auth-required) #appLayout.layout[data-module-panel="batchModule"] .tabs .tab.active,
body:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #audioToolTab > #musicModeTabs.tabs .tab.active,
body:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #audioToolTab > .tool-mode-tabs .tool-mode-tab.active {
border-color: rgba(47, 109, 183, 0.18) !important;
background: linear-gradient(180deg, #ffffff, #fbfdff) !important;
color: var(--accent-strong) !important;
box-shadow: inset 0 -2px 0 var(--accent), 0 1px 3px rgba(16, 24, 40, 0.08) !important;
}
body.theme-dark:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="videoModule"] #videoToolTab > .tool-page-head {
background: linear-gradient(180deg, rgba(18, 30, 48, 0.92), rgba(13, 22, 37, 0.9)) !important;
border-color: rgba(141, 149, 165, 0.3) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
body.theme-dark:not(.auth-required) #appLayout.layout[data-module-panel="batchModule"] > .workbench > .tabs,
body.theme-dark:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #audioToolTab > #musicModeTabs.tabs,
body.theme-dark:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #audioToolTab > .tool-mode-tabs {
background: linear-gradient(180deg, rgba(18, 30, 48, 0.92), rgba(13, 22, 37, 0.9)) !important;
border-color: rgba(141, 149, 165, 0.3) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
body.theme-dark:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="videoModule"] #videoToolTab > .tool-page-head > div,
body.theme-dark:not(.auth-required) #appLayout.layout[data-module-panel="batchModule"] .tabs .tab,
body.theme-dark:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #audioToolTab > #musicModeTabs.tabs .tab,
body.theme-dark:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #audioToolTab > .tool-mode-tabs .tool-mode-tab {
color: #aebfd6 !important;
}
body.theme-dark:not(.auth-required) #appLayout.layout[data-module-panel="batchModule"] .tabs .tab:hover,
body.theme-dark:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #audioToolTab > #musicModeTabs.tabs .tab:hover,
body.theme-dark:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #audioToolTab > .tool-mode-tabs .tool-mode-tab:hover {
background: rgba(30, 42, 64, 0.62) !important;
color: #dbe7f5 !important;
}
body.theme-dark:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="videoModule"] #videoToolTab > .tool-page-head > div,
body.theme-dark:not(.auth-required) #appLayout.layout[data-module-panel="batchModule"] .tabs .tab.active,
body.theme-dark:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #audioToolTab > #musicModeTabs.tabs .tab.active,
body.theme-dark:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #audioToolTab > .tool-mode-tabs .tool-mode-tab.active {
border-color: rgba(90, 166, 232, 0.34) !important;
background: rgba(30, 42, 64, 0.95) !important;
color: #e7eef9 !important;
box-shadow: inset 0 -2px 0 #5aa6e8, 0 1px 3px rgba(0, 0, 0, 0.22) !important;
}
body:not(.auth-required) #appLayout.layout[data-module-panel="batchModule"] :is(#textTab, #imageTab).tab-panel.active.media-tool-form,
body:not(.auth-required) #appLayout.layout.media-tool-layout:is([data-module-panel="videoModule"], [data-module-panel="audioModule"]) :is(#videoToolTab, #speechToolPanel, #musicToolPanel) .tool-grid > .media-tool-form:not(.media-debug-card) {
display: grid !important;
width: 100% !important;
max-width: 100% !important;
row-gap: var(--media-form-gap) !important;
align-items: start !important;
align-content: start !important;
}
body:not(.auth-required) #appLayout.layout.media-tool-layout:is([data-module-panel="videoModule"], [data-module-panel="audioModule"]) :is(#videoToolTab, #speechToolPanel, #musicToolPanel) .tool-grid > .media-tool-form:not(.media-debug-card) {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #musicToolPanel .tool-grid > .media-tool-form:not(.media-debug-card) {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
column-gap: var(--media-inline-gap) !important;
}
body:not(.auth-required) #appLayout.layout.media-tool-layout :is(#videoToolTab, #audioToolTab, #musicToolPanel) .tool-grid > .media-debug-card {
display: none !important;
}
body:not(.auth-required) #appLayout.layout:is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) :is(#textTab, #imageTab, #videoToolTab, #musicToolPanel) .upload-box {
display: grid !important;
gap: var(--media-inline-gap) !important;
margin: 0 !important;
padding: 0 !important;
min-height: calc(var(--media-reference-size) + var(--control-height) + var(--media-inline-gap)) !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body:not(.auth-required) #appLayout.layout:is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) :is(#textTab, #imageTab, #videoToolTab, #speechToolPanel, #musicToolPanel) [hidden] {
display: none !important;
}
body:not(.auth-required) #appLayout.layout:is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) :is(#textTab, #imageTab, #videoToolTab, #speechToolPanel, #musicToolPanel) :is(label:not(.checkbox-line):not([hidden]), .quick-options label:not(.checkbox-line):not([hidden]), .music-options > label:not(.checkbox-line):not([hidden])) {
display: grid !important;
gap: var(--media-label-gap) !important;
align-content: start !important;
min-width: 0 !important;
margin: 0 !important;
}
body:not(.auth-required) #appLayout.layout:is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone).drop-zone {
display: block !important;
min-height: 30px !important;
height: auto !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body:not(.auth-required) #appLayout.layout:is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone) > p,
body:not(.auth-required) #appLayout.layout:is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone) > .compact {
display: none !important;
}
body:not(.auth-required) #appLayout.layout:is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone) .upload-zone-head {
min-height: 30px !important;
margin: 0 !important;
padding: 0 !important;
align-items: center !important;
}
body:not(.auth-required) #appLayout.layout:is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone) .upload-zone-head strong {
font-size: 13px !important;
line-height: 1 !important;
}
body:not(.auth-required) #appLayout.layout:is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone) .upload-zone-actions > button {
min-height: var(--control-height) !important;
height: var(--control-height) !important;
max-height: var(--control-height) !important;
padding: 0 10px !important;
border-radius: 9px !important;
font-size: 12px !important;
}
body:not(.auth-required) #appLayout.layout:is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) :is(#textFileSummary, #fileSummary, #sharedFileSummary, #videoFileSummary, #musicAudioFileSummary).file-summary-picker {
display: flex !important;
min-height: var(--media-reference-size, var(--reference-picker-empty-min, 64px)) !important;
height: auto !important;
max-height: none !important;
padding: 10px 12px !important;
align-items: center !important;
justify-content: flex-start !important;
border: 1px dashed var(--media-drop-border, #d2e5f0) !important;
border-radius: 12px !important;
background: var(--media-drop-surface, rgba(255, 255, 255, 0.72)) !important;
color: #607086 !important;
font-size: 12px !important;
line-height: 1.35 !important;
white-space: normal !important;
cursor: var(--media-drop-cursor, pointer) !important;
}
body:not(.auth-required) #appLayout.layout:is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) :is(#textFileSummary, #fileSummary, #sharedFileSummary, #videoFileSummary, #musicAudioFileSummary).file-summary-picker.has-reference-items {
min-height: 0 !important;
max-height: var(--reference-picker-filled-max, 286px) !important;
overflow-y: auto !important;
}
body:not(.auth-required) #appLayout.layout:is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone).drop-zone:is(:hover, .drag-over) + .file-summary-picker {
border-color: var(--media-drop-border, rgba(47, 109, 183, 0.68)) !important;
background: var(--media-drop-surface, rgba(234, 242, 251, 0.88)) !important;
}
body.theme-dark:not(.auth-required) #appLayout.layout:is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) :is(#textFileSummary, #fileSummary, #sharedFileSummary, #videoFileSummary, #musicAudioFileSummary).file-summary-picker {
border-color: var(--media-drop-border, rgba(141, 149, 165, 0.45)) !important;
background: var(--media-drop-surface, rgba(16, 18, 26, 0.8)) !important;
color: #a7b5c9 !important;
}
body.theme-dark:not(.auth-required) #appLayout.layout:is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone).drop-zone:is(:hover, .drag-over) + .file-summary-picker {
border-color: var(--media-drop-border, rgba(90, 166, 232, 0.5)) !important;
background: var(--media-drop-surface, rgba(47, 109, 183, 0.18)) !important;
}
body:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] :is(#audioText, #musicPrompt) {
min-height: var(--media-textarea-size) !important;
line-height: 1.45 !important;
padding: 9px 10px !important;
}
body:not(.auth-required) #appLayout.layout:is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) :is(#textTab, #imageTab, #videoToolTab, #speechToolPanel, #musicToolPanel) :is(.quick-options, .music-options) {
gap: var(--media-form-gap) var(--media-inline-gap) !important;
margin: 0 !important;
}
body:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #musicToolPanel .music-instrumental-row {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px !important;
align-self: end !important;
width: 100% !important;
min-width: 0 !important;
min-height: var(--media-control-size) !important;
height: var(--media-control-size) !important;
max-height: var(--media-control-size) !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
color: var(--text, #344054) !important;
font-size: 12.5px !important;
font-weight: 720 !important;
line-height: 1 !important;
cursor: pointer !important;
}
body:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #musicToolPanel #musicInstrumental {
flex: 0 0 auto !important;
width: 16px !important;
min-width: 16px !important;
max-width: 16px !important;
height: 16px !important;
min-height: 16px !important;
max-height: 16px !important;
margin: 0 !important;
padding: 0 !important;
accent-color: var(--accent) !important;
}
body:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #musicToolPanel :is(#musicAudioField, #musicPromptField, #musicStyleField, #musicTitleField, #musicLyricsField, #musicNegativeTagsField, .music-options, .command-row, #musicCapabilityHint) {
grid-column: 1 / -1 !important;
}
body:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #musicToolPanel :is(#musicPromptField, #musicStyleField, #musicTitleField) {
order: 20 !important;
}
body:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #musicToolPanel .music-options {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: var(--media-form-gap) var(--media-inline-gap) !important;
align-items: end !important;
order: 30 !important;
}
body:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #musicToolPanel .music-version-row {
display: grid !important;
grid-column: 1 / -1 !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: var(--media-form-gap) var(--media-inline-gap) !important;
align-items: end !important;
min-width: 0 !important;
}
body:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #musicToolPanel .music-version-row > #musicVersionField {
grid-column: 1 / 2 !important;
}
body:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #musicToolPanel .music-version-row > .music-instrumental-row {
grid-column: 2 / 3 !important;
}
body:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #musicToolPanel .music-version-row:has(#musicVersionField[hidden]) > .music-instrumental-row {
grid-column: 1 / -1 !important;
}
body:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #musicToolPanel .music-options > label:has(> #musicVocalGender) {
grid-column: 1 / 2 !important;
}
body:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #musicToolPanel .music-options > label:has(> #musicAudioWeight) {
grid-column: 2 / 3 !important;
}
body:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #musicToolPanel #musicLyricsField {
order: 40 !important;
}
body:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #musicToolPanel #musicNegativeTagsField {
order: 50 !important;
}
body:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #musicToolPanel .command-row {
order: 60 !important;
}
body:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #musicToolPanel #musicCapabilityHint {
order: 70 !important;
}
body:not(.auth-required) #appLayout.layout:is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) :is(#textTab, #imageTab, #videoToolTab, #speechToolPanel, #musicToolPanel) .command-row:not(.compact) {
display: flex !important;
flex-wrap: wrap !important;
gap: var(--media-inline-gap) !important;
align-items: center !important;
margin: 0 !important;
}
body:not(.auth-required) #appLayout.layout:is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) :is(#textTab, #imageTab, #videoToolTab, #speechToolPanel, #musicToolPanel) .command-row:not(.compact) > button,
body:not(.auth-required) #appLayout.layout:is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) :is(#textTab, #imageTab, #videoToolTab, #speechToolPanel, #musicToolPanel) .command-row:not(.compact) > .button-link {
flex: 0 0 auto !important;
width: auto !important;
min-width: 88px !important;
max-width: 100% !important;
min-height: var(--media-control-size) !important;
height: var(--media-control-size) !important;
max-height: var(--media-control-size) !important;
padding: 0 14px !important;
border-radius: 11px !important;
}
body:not(.auth-required) #appLayout.layout:is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) :is(#textTab, #imageTab, #videoToolTab, #speechToolPanel, #musicToolPanel) .command-row:not(.compact) > :is(button.primary, .primary) {
min-width: 112px !important;
}
body:not(.auth-required) #appLayout.layout:is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) :is(#textTab, #imageTab, #videoToolTab, #speechToolPanel, #musicToolPanel) .command-row:not(.compact) > .hl-case-square-btn {
min-width: 98px !important;
}
body:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #audioToolTab #startMusicToolBtn {
min-width: 132px !important;
}
body:not(.auth-required) #appLayout.layout:is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) :is(#textTab, #imageTab, #videoToolTab, #speechToolPanel, #musicToolPanel) .command-row:not(.compact) > .plan-summary-inline {
flex: 1 1 220px !important;
display: flex !important;
width: auto !important;
min-width: min(100%, 180px) !important;
min-height: 34px !important;
height: 34px !important;
padding: 7px 12px !important;
align-items: center !important;
border-radius: 12px !important;
font-size: 12px !important;
line-height: 1.3 !important;
}
body:not(.auth-required) #appLayout.layout:is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) :is(#textTab, #imageTab, #videoToolTab, #speechToolPanel, #musicToolPanel) .model-capability-hint {
margin: var(--media-hint-gap, 0px) 0 0 !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor .monitor-body {
grid-template-columns: minmax(300px, 0.52fr) minmax(300px, 0.48fr) !important;
gap: 12px !important;
align-items: start !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor .task-detail-panel {
container: media-result-panel / inline-size !important;
min-height: 250px !important;
padding: 10px !important;
border-radius: 14px !important;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 253, 0.9)) !important;
box-shadow: inset 0 0 0 1px rgba(203, 213, 225, 0.58) !important;
}
body.theme-dark:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor .task-detail-panel {
background: linear-gradient(180deg, rgba(17, 27, 43, 0.95), rgba(13, 21, 35, 0.92)) !important;
box-shadow: inset 0 0 0 1px rgba(141, 149, 165, 0.28) !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor .job-meta {
margin-bottom: 10px !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor #jobTitle {
display: none !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor #jobStatus {
display: none !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor .progress-meta {
justify-content: flex-start !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor .stats-grid {
gap: 4px !important;
margin: 6px 0 8px !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor .stats-grid > div {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
min-width: 0 !important;
min-height: 28px !important;
height: 28px !important;
max-height: 28px !important;
padding: 0 5px !important;
border-radius: 9px !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor .stats-grid span {
flex: 0 0 auto !important;
margin: 0 !important;
font-size: 12.5px !important;
line-height: 1 !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor .stats-grid small {
flex: 0 1 auto !important;
min-width: 0 !important;
margin: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
font-size: 10.5px !important;
line-height: 1 !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor #gallery {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
align-content: start !important;
max-height: 340px !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor #gallery .gallery-select-bar {
display: grid !important;
grid-column: 1 / -1 !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 6px !important;
padding: 7px !important;
border-radius: 10px !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor #gallery .gallery-select-bar button {
width: 100% !important;
min-width: 0 !important;
min-height: 28px !important;
height: 28px !important;
max-height: 28px !important;
padding: 0 7px !important;
border-radius: 9px !important;
font-size: 11px !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor #gallery .gallery-select-bar span {
grid-column: 1 / -1 !important;
font-size: 11px !important;
line-height: 1.3 !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor #gallery .thumb {
min-width: 0 !important;
border-radius: 10px !important;
overflow: hidden !important;
}
body:not(.auth-required) #appLayout.layout[data-module-panel="batchModule"] > .monitor #gallery .thumb :is(.thumb-watermark, .thumb-delete) {
min-width: 0 !important;
min-height: 24px !important;
height: 24px !important;
max-height: 24px !important;
padding: 0 6px !important;
border-radius: 8px !important;
font-size: 10.5px !important;
line-height: 1 !important;
}
body:not(.auth-required) #appLayout.layout:is([data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor #gallery .thumb.media-thumb {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: auto auto auto !important;
grid-template-areas:
"preview"
"footer"
"prompt" !important;
gap: 6px !important;
min-height: 0 !important;
padding: 8px !important;
border-radius: 10px !important;
overflow: hidden !important;
}
body:not(.auth-required) #appLayout.layout:is([data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor #gallery .thumb.media-thumb .thumb-preview {
grid-area: preview !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
min-height: 86px !important;
max-height: none !important;
aspect-ratio: 16 / 9 !important;
padding: 0 !important;
border-radius: 9px !important;
}
body:not(.auth-required) #appLayout.layout:is([data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor #gallery .thumb.media-thumb .media-thumb-footer {
grid-area: footer !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto auto !important;
gap: 4px !important;
align-items: center !important;
min-width: 0 !important;
padding: 0 !important;
}
body:not(.auth-required) #appLayout.layout:is([data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor #gallery .thumb.media-thumb .media-thumb-footer span {
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
font-size: 11px !important;
line-height: 1.15 !important;
}
body:not(.auth-required) #appLayout.layout:is([data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor #gallery .thumb.media-thumb .thumb-open,
body:not(.auth-required) #appLayout.layout:is([data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor #gallery .thumb.media-thumb .thumb-delete {
min-width: 0 !important;
min-height: 24px !important;
height: 24px !important;
max-height: 24px !important;
padding: 0 6px !important;
border-radius: 8px !important;
font-size: 10.5px !important;
line-height: 1 !important;
}
body:not(.auth-required) #appLayout.layout:is([data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor #gallery .thumb.media-thumb .media-thumb-prompt {
grid-area: prompt !important;
min-width: 0 !important;
margin: 0 !important;
font-size: 10.5px !important;
line-height: 1.25 !important;
-webkit-line-clamp: 2 !important;
}
body:not(.auth-required) #appLayout.layout:is([data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor #gallery .thumb.media-thumb .thumb-select {
top: 8px !important;
right: 8px !important;
}
@container media-result-panel (min-width: 450px) {
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor #gallery {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor #itemTable {
min-height: 96px !important;
max-height: 220px !important;
}
}
@media (min-width: 821px) and (max-width: 1280px) {
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor .monitor-body {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 820px) {
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout),
body:not(.auth-required) #appLayout.media-tool-layout {
display: flex !important;
grid-template-columns: none !important;
grid-auto-flow: initial !important;
align-items: stretch !important;
gap: 0 !important;
width: 100% !important;
max-width: 100vw !important;
height: calc(100dvh - var(--mobile-topbar-offset, 84px)) !important;
min-height: calc(100dvh - var(--mobile-topbar-offset, 84px)) !important;
max-height: calc(100dvh - var(--mobile-topbar-offset, 84px)) !important;
overflow: hidden !important;
scrollbar-width: none !important;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout)::-webkit-scrollbar,
body:not(.auth-required) #appLayout.media-tool-layout::-webkit-scrollbar {
display: none !important;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) > .workbench,
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) > .monitor,
body:not(.auth-required) #appLayout.media-tool-layout > .workbench,
body:not(.auth-required) #appLayout.media-tool-layout > .monitor {
flex: 0 0 100% !important;
grid-column: auto !important;
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
margin: 0 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
box-sizing: border-box !important;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) > .workbench,
body:not(.auth-required) #appLayout.media-tool-layout > .workbench {
order: 1 !important;
}
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) > .monitor,
body:not(.auth-required) #appLayout.media-tool-layout > .monitor {
position: relative !important;
inset: auto !important;
order: 2 !important;
}
body:not(.auth-required) #appLayout.media-tool-layout .tool-panel.active,
body:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .tab-panel.active {
min-height: 0 !important;
}
}
@media (max-width: 820px) {
body:not(.auth-required) #appLayout.layout.tool-layout.media-tool-layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout) {
display: flex !important;
grid-template-columns: none !important;
grid-auto-flow: initial !important;
align-items: stretch !important;
gap: 0 !important;
width: 100% !important;
max-width: 100vw !important;
height: calc(100dvh - var(--mobile-topbar-offset, 84px)) !important;
min-height: calc(100dvh - var(--mobile-topbar-offset, 84px)) !important;
max-height: calc(100dvh - var(--mobile-topbar-offset, 84px)) !important;
overflow: hidden !important;
scrollbar-width: none !important;
}
body:not(.auth-required) #appLayout.layout.tool-layout.media-tool-layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout) > .workbench,
body:not(.auth-required) #appLayout.layout.tool-layout.media-tool-layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout) > .monitor {
flex: 0 0 100% !important;
grid-column: auto !important;
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
margin: 0 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
box-sizing: border-box !important;
}
body:not(.auth-required) #appLayout.layout.tool-layout.media-tool-layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout) > .workbench {
order: 1 !important;
}
body:not(.auth-required) #appLayout.layout.tool-layout.media-tool-layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout) > .monitor {
position: relative !important;
inset: auto !important;
order: 2 !important;
}
}
@media (max-width: 820px) {
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) {
padding-left: var(--mobile-shell-x, 6px) !important;
padding-right: var(--mobile-shell-x, 6px) !important;
scroll-padding-left: var(--mobile-shell-x, 6px) !important;
scroll-padding-right: var(--mobile-shell-x, 6px) !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor #jobTitle,
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor #jobStatus {
display: none !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor .progress-meta {
justify-content: flex-start !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .panel {
flex: 0 0 100% !important;
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor .stats-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 4px !important;
margin: 6px 0 8px !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor .stats-grid > div {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
min-width: 0 !important;
min-height: 28px !important;
height: 28px !important;
max-height: 28px !important;
padding: 0 5px !important;
border-radius: 9px !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor .stats-grid span {
flex: 0 0 auto !important;
margin: 0 !important;
font-size: 12.5px !important;
line-height: 1 !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor .stats-grid small {
flex: 0 1 auto !important;
min-width: 0 !important;
margin: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
font-size: 10.5px !important;
line-height: 1 !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor #gallery {
grid-template-columns: minmax(0, 1fr) !important;
gap: 8px !important;
max-height: 300px !important;
padding-right: 3px !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor #gallery .gallery-select-bar {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 6px !important;
padding: 7px !important;
border-radius: 10px !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor #gallery .gallery-select-bar button {
width: 100% !important;
min-width: 0 !important;
min-height: 28px !important;
height: 28px !important;
max-height: 28px !important;
padding: 0 7px !important;
border-radius: 9px !important;
font-size: 11px !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor #gallery .gallery-select-bar span {
grid-column: 1 / -1 !important;
font-size: 11px !important;
line-height: 1.3 !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor #gallery .thumb.media-thumb {
display: grid !important;
grid-template-columns: 58px minmax(0, 1fr) !important;
grid-template-rows: auto auto !important;
grid-template-areas:
"preview footer"
"preview prompt" !important;
align-content: center !important;
align-items: center !important;
gap: 5px 8px !important;
min-height: 74px !important;
padding: 8px 34px 8px 8px !important;
border-radius: 10px !important;
overflow: hidden !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor #gallery .thumb.media-thumb[data-output-kind="video"] {
grid-template-columns: 82px minmax(0, 1fr) !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor #gallery .thumb.media-thumb .thumb-select {
top: 8px !important;
right: 8px !important;
width: 22px !important;
min-width: 22px !important;
max-width: 22px !important;
height: 22px !important;
min-height: 22px !important;
max-height: 22px !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor #gallery .thumb.media-thumb .thumb-select input {
min-height: 0 !important;
height: 100% !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor #gallery .thumb.media-thumb .thumb-select span {
width: 22px !important;
height: 22px !important;
border-radius: 6px !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor #gallery .thumb.media-thumb .thumb-preview {
grid-area: preview !important;
display: grid !important;
place-items: center !important;
width: 58px !important;
min-width: 58px !important;
max-width: 58px !important;
height: 58px !important;
min-height: 58px !important;
max-height: 58px !important;
aspect-ratio: auto !important;
padding: 0 !important;
border-radius: 9px !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor #gallery .thumb.media-thumb[data-output-kind="video"] .thumb-preview {
width: 82px !important;
min-width: 82px !important;
max-width: 82px !important;
height: 52px !important;
min-height: 52px !important;
max-height: 52px !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor #gallery .thumb.media-thumb .media-thumb-video {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor #gallery .thumb.media-thumb .media-thumb-icon {
width: 32px !important;
height: 32px !important;
font-size: 12px !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor #gallery .thumb.media-thumb .thumb-preview strong {
display: none !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor #gallery .thumb.media-thumb .media-play-badge {
left: 5px !important;
bottom: 5px !important;
padding: 2px 6px !important;
font-size: 10px !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor #gallery .thumb.media-thumb .media-thumb-footer {
grid-area: footer !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto auto !important;
align-items: center !important;
gap: 4px !important;
min-width: 0 !important;
padding: 0 !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor #gallery .thumb.media-thumb .media-thumb-footer span {
font-size: 11.5px !important;
line-height: 1.15 !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor #gallery .thumb.media-thumb .thumb-open,
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor #gallery .thumb.media-thumb .thumb-delete {
min-width: 0 !important;
min-height: 25px !important;
height: 25px !important;
max-height: 25px !important;
padding: 0 6px !important;
border-radius: 8px !important;
font-size: 10.5px !important;
line-height: 1 !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="videoModule"], [data-module-panel="audioModule"]) > .monitor #gallery .thumb.media-thumb .media-thumb-prompt {
grid-area: prompt !important;
min-width: 0 !important;
margin: 0 !important;
font-size: 10.5px !important;
line-height: 1.25 !important;
-webkit-line-clamp: 2 !important;
}
}
@media (max-width: 820px) {
body:not(.auth-required) #appLayout:is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) :is(#textFileSummary, #fileSummary, #sharedFileSummary, #videoFileSummary, #musicAudioFileSummary).file-summary-picker {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
min-height: var(--media-reference-size, 61px) !important;
height: auto !important;
max-height: none !important;
padding: 10px 12px !important;
border-radius: 12px !important;
font-size: 11.2px !important;
line-height: 1.35 !important;
white-space: normal !important;
-webkit-line-clamp: initial !important;
-webkit-box-orient: initial !important;
}
body:not(.auth-required) #appLayout:is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) :is(#textRefDropZone, #mainDropZone, #sharedRefDropZone, #videoRefDropZone, #musicAudioDropZone).drop-zone + :is(#textFileSummary, #fileSummary, #sharedFileSummary, #videoFileSummary, #musicAudioFileSummary).file-summary-picker.file-summary-empty {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
min-height: var(--media-reference-size, 61px) !important;
height: auto !important;
max-height: none !important;
padding: 10px 12px !important;
-webkit-line-clamp: initial !important;
-webkit-box-orient: initial !important;
}
body:not(.auth-required) #appLayout.layout.media-tool-layout:is([data-module-panel="videoModule"], [data-module-panel="audioModule"]) :is(#videoToolTab, #musicToolPanel) :is(#videoRefDropZone, #musicAudioDropZone).drop-zone + :is(#videoFileSummary, #musicAudioFileSummary).file-summary-picker.file-summary-empty {
min-height: var(--media-reference-size, 61px) !important;
height: auto !important;
max-height: none !important;
padding: 10px 12px !important;
}
}
@media (max-width: 820px) {
body:not(.auth-required) {
--mobile-shell-x: 10px;
}
body:not(.auth-required) .module-nav {
left: var(--mobile-shell-x) !important;
right: var(--mobile-shell-x) !important;
}
body:not(.auth-required) #appLayout.layout {
padding-left: var(--mobile-shell-x) !important;
padding-right: var(--mobile-shell-x) !important;
}
body:not(.auth-required) #appLayout.layout:not(.workflow-layout):not(.canvas-layout):not(.settings-layout):is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) {
scroll-padding-left: var(--mobile-shell-x) !important;
scroll-padding-right: var(--mobile-shell-x) !important;
}
body:not(.auth-required) #appLayout.layout.workflow-layout[data-module-panel="workflowModule"],
body:not(.auth-required) #appLayout.layout.canvas-layout[data-module-panel="canvasModule"],
body:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] {
padding-left: var(--mobile-shell-x) !important;
padding-right: var(--mobile-shell-x) !important;
}
body:not(.auth-required) #appLayout.layout,
body:not(.auth-required) #appLayout.layout > .workbench,
body:not(.auth-required) #appLayout.layout > .monitor,
body:not(.auth-required) #appLayout.layout .tab-panel.active,
body:not(.auth-required) #appLayout.layout .tool-panel.active {
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
body:not(.auth-required) #appLayout.layout::-webkit-scrollbar,
body:not(.auth-required) #appLayout.layout > .workbench::-webkit-scrollbar,
body:not(.auth-required) #appLayout.layout > .monitor::-webkit-scrollbar,
body:not(.auth-required) #appLayout.layout .tab-panel.active::-webkit-scrollbar,
body:not(.auth-required) #appLayout.layout .tool-panel.active::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
display: none !important;
}
}
@media (max-width: 820px) {
body:not(.auth-required) #appLayout details.advanced,
body:not(.auth-required) #appLayout :is(#textTab, #imageTab) > details.advanced,
body:not(.auth-required) #appLayout.layout.media-tool-layout :is(#videoToolTab, #audioToolTab) details.advanced {
width: 100% !important;
max-width: 100% !important;
margin: 8px 0 !important;
padding: 0 !important;
border: 1px solid var(--advanced-border, #dce6ef) !important;
border-radius: 12px !important;
background: var(--advanced-bg, #f8fbfd) !important;
box-shadow: var(--advanced-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.7)) !important;
overflow: hidden !important;
}
body:not(.auth-required) #appLayout details.advanced[open],
body:not(.auth-required) #appLayout :is(#textTab, #imageTab) > details.advanced[open],
body:not(.auth-required) #appLayout.layout.media-tool-layout :is(#videoToolTab, #audioToolTab) details.advanced[open] {
padding: 7px !important;
background: var(--advanced-open-bg, #ffffff) !important;
}
body:not(.auth-required) #appLayout details.advanced > summary,
body:not(.auth-required) #appLayout :is(#textTab, #imageTab) > details.advanced > summary,
body:not(.auth-required) #appLayout.layout.media-tool-layout :is(#videoToolTab, #audioToolTab) details.advanced > summary {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
width: 100% !important;
min-width: 0 !important;
min-height: var(--scale-control-height, 27px) !important;
height: var(--scale-control-height, 27px) !important;
max-height: var(--scale-control-height, 27px) !important;
margin: 0 !important;
padding: 0 8px !important;
border: 0 !important;
border-radius: var(--scale-radius-control, 9px) !important;
background: var(--advanced-summary-bg, #ffffff) !important;
color: var(--advanced-summary-color, #344054) !important;
font-size: var(--scale-font-body, 10.2px) !important;
font-weight: 760 !important;
line-height: 1 !important;
letter-spacing: 0 !important;
list-style: none !important;
cursor: pointer !important;
user-select: none !important;
box-sizing: border-box !important;
}
body:not(.auth-required) #appLayout details.advanced[open] > summary,
body:not(.auth-required) #appLayout :is(#textTab, #imageTab) > details.advanced[open] > summary,
body:not(.auth-required) #appLayout.layout.media-tool-layout :is(#videoToolTab, #audioToolTab) details.advanced[open] > summary {
margin: -7px -7px 7px !important;
width: calc(100% + 14px) !important;
border-bottom: 1px solid var(--advanced-border, #dce6ef) !important;
border-radius: var(--scale-radius-control, 9px) var(--scale-radius-control, 9px) 0 0 !important;
background: var(--advanced-summary-open-bg, #f9fafc) !important;
}
body:not(.auth-required) #appLayout details.advanced > summary::-webkit-details-marker,
body:not(.auth-required) #appLayout :is(#textTab, #imageTab) > details.advanced > summary::-webkit-details-marker,
body:not(.auth-required) #appLayout.layout.media-tool-layout :is(#videoToolTab, #audioToolTab) details.advanced > summary::-webkit-details-marker {
display: none !important;
}
body:not(.auth-required) #appLayout details.advanced > summary::after,
body:not(.auth-required) #appLayout :is(#textTab, #imageTab) > details.advanced > summary::after,
body:not(.auth-required) #appLayout.layout.media-tool-layout :is(#videoToolTab, #audioToolTab) details.advanced > summary::after {
content: "" !important;
flex: 0 0 6px !important;
width: 6px !important;
height: 6px !important;
border-right: 1.5px solid var(--advanced-arrow, #64748b) !important;
border-bottom: 1.5px solid var(--advanced-arrow, #64748b) !important;
transform: rotate(45deg) translateY(-2px) !important;
transition: transform 0.14s ease !important;
}
body:not(.auth-required) #appLayout details.advanced[open] > summary::after,
body:not(.auth-required) #appLayout :is(#textTab, #imageTab) > details.advanced[open] > summary::after,
body:not(.auth-required) #appLayout.layout.media-tool-layout :is(#videoToolTab, #audioToolTab) details.advanced[open] > summary::after {
transform: rotate(225deg) translate(-1px, -1px) !important;
}
}
.text-chat-topbar .text-chat-history-toggle,
.text-chat-history-backdrop {
display: none;
}
@media (max-width: 820px) {
body:not(.auth-required) .app-confirm-modal:not([hidden]) {
display: grid !important;
place-items: center !important;
padding: 12px !important;
}
body:not(.auth-required) .app-confirm-panel {
width: calc(100vw - 24px) !important;
max-width: 360px !important;
padding: 14px !important;
border-radius: 16px !important;
}
body:not(.auth-required) .app-confirm-head strong {
font-size: 16px !important;
}
body:not(.auth-required) .app-confirm-message {
font-size: 13px !important;
}
body:not(.auth-required) .app-confirm-actions {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
body:not(.auth-required) .app-confirm-actions button {
min-width: 0 !important;
width: 100% !important;
min-height: 38px !important;
height: 38px !important;
padding: 0 12px !important;
border-radius: 11px !important;
font-size: 13px !important;
}
}
@media (max-width: 820px) {
body:not(.auth-required) #appLayout {
--unified-mobile-title: 13px;
--unified-mobile-body: 11px;
--unified-mobile-label: 10px;
--unified-mobile-caption: 9.5px;
--unified-mobile-control: 29px;
--unified-mobile-toolbar-control: 27px;
--unified-mobile-radius: 11px;
--unified-mobile-frame: 14px;
}
body:not(.auth-required) #appLayout :is(.tab-panel.active, .tool-panel.active, .workflow-panel.active, .infinite-canvas-panel.active) {
color: var(--text) !important;
font-size: var(--unified-mobile-body) !important;
line-height: 1.28 !important;
letter-spacing: 0 !important;
}
body:not(.auth-required) #appLayout :is(
.tool-page-head h2,
.monitor-title h2,
.modal-head h2,
.workflow-head h2,
.workflow-inspector h2,
.canvas-board-title,
.workflow-canvas-title
) {
font-size: var(--unified-mobile-title) !important;
line-height: 1.18 !important;
font-weight: 820 !important;
letter-spacing: 0 !important;
}
body:not(.auth-required) #appLayout :is(
label,
.field-label,
.option-label,
.upload-zone-head strong,
.model-capability-hint,
.plan-summary-inline,
.file-summary,
.tool-page-head p,
.workflow-head p,
.workflow-status-row,
.canvas-composer-head small,
.canvas-composer-result
):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
font-size: var(--unified-mobile-label) !important;
line-height: 1.22 !important;
letter-spacing: 0 !important;
}
body:not(.auth-required) #appLayout :is(
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select
):not(.infinite-card-control):where(:not([data-ui-unmanaged] *)) {
min-height: var(--unified-mobile-control) !important;
height: var(--unified-mobile-control) !important;
max-height: var(--unified-mobile-control) !important;
border-radius: var(--unified-mobile-radius) !important;
font-size: var(--unified-mobile-body) !important;
line-height: 1.15 !important;
padding: 0 8px !important;
}
body:not(.auth-required) #appLayout textarea:not([data-canvas-text]) {
border-radius: var(--unified-mobile-radius) !important;
font-size: var(--unified-mobile-body) !important;
line-height: 1.42 !important;
padding: 8px !important;
}
body:not(.auth-required) #appLayout :is(
button.primary,
button.secondary,
button.danger,
.primary,
.secondary,
.danger
):not([data-ui-compact-control]):not(.module-tab):not(.sidebar-toggle):not(.icon-button):not(.gen-icon-btn):not(.account-summary):not(.text-message-copy):not(.text-chat-delete-btn):not(.infinite-card-run):where(:not([data-ui-unmanaged] *)) {
min-height: var(--unified-mobile-control) !important;
height: var(--unified-mobile-control) !important;
border-radius: var(--unified-mobile-radius) !important;
font-size: 10.8px !important;
line-height: 1 !important;
letter-spacing: 0 !important;
padding: 0 8px !important;
}
body:not(.auth-required) #appLayout :is(
.tool-card,
.upload-box,
.advanced,
.drop-zone,
.workflow-toolbar,
.infinite-canvas-toolbar,
.canvas-board-row,
.canvas-ai-composer,
.workflow-stage-wrap,
.infinite-canvas-stage
):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
border-radius: var(--unified-mobile-frame) !important;
border-color: #dce6ef !important;
}
body:not(.auth-required) #appLayout :is(
.quick-options,
.options-grid,
.form-grid,
.command-row,
.tool-mode-tabs,
.workflow-toolbar-actions,
.canvas-board-actions
):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
gap: 6px !important;
}
body:not(.auth-required) #appLayout[data-module-panel="workflowModule"] #workflowTab.active .workflow-main > .workflow-status-row,
body:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasTab.active .infinite-canvas-status-row {
font-size: var(--unified-mobile-caption) !important;
line-height: 1.2 !important;
}
}
body:not(.auth-required) :is(
button:not([data-ui-compact-control]),
.primary,
.secondary,
.danger,
.icon-button,
.module-tab,
.tool-mode-tab,
.tab,
.button-link,
.account-action,
.modal-close,
.canvas-dock-button,
.thumb-preview
):where(:not([data-ui-unmanaged] *)) {
transition:
box-shadow var(--motion-premium-fast) var(--motion-premium-in),
border-color var(--motion-premium-fast) var(--motion-premium-in),
background-color var(--motion-premium-fast) var(--motion-premium-in),
color var(--motion-premium-fast) var(--motion-premium-in),
opacity var(--motion-premium-fast) var(--motion-premium-in) !important;
}
body:not(.auth-required) :is(
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
textarea,
select,
.advanced,
.text-chat-shell,
.text-chat-composer,
.canvas-ai-composer,
.workflow-toolbar,
.infinite-canvas-toolbar,
.workflow-project-card,
.canvas-project-card,
.favorite-case-card,
.case-row,
.task-list-row,
.task-row,
.job-select,
.case-select,
.settings-provider-card,
.gateway-card,
.model-route-card,
.thumb
):where(:not([data-ui-unmanaged]):not([data-ui-unmanaged] *)) {
transition:
border-color var(--motion-premium-base) var(--motion-premium-in),
box-shadow var(--motion-premium-fast) var(--motion-premium-in),
background-color var(--motion-premium-base) var(--motion-premium-in),
opacity var(--motion-premium-base) var(--motion-premium-in) !important;
}
body:not(.auth-required) :is(
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
textarea,
select,
button:not([data-ui-compact-control]):not(.ob-rail-step),
[role="button"],
.module-tab,
.tool-mode-tab,
.account-action,
.thumb-preview
):where(:not([data-ui-unmanaged] *)):focus-visible {
outline: 0 !important;
border-color: color-mix(in srgb, var(--accent) 72%, #ffffff) !important;
box-shadow:
0 0 0 3px rgba(47, 109, 183, 0.14),
0 8px 22px rgba(15, 23, 42, 0.08) !important;
}
body:not(.auth-required) :is(button, .primary, .secondary, .danger, .icon-button, .module-tab, .tool-mode-tab):not([data-ui-compact-control]):where(:not([data-ui-unmanaged] *))[disabled],
body:not(.auth-required) :is(button, .primary, .secondary, .danger, .icon-button, .module-tab, .tool-mode-tab):not([data-ui-compact-control]):where(:not([data-ui-unmanaged] *))[aria-disabled="true"] {
transform: none !important;
filter: saturate(0.92);
}
@media (hover: hover) and (pointer: fine) {
body:not(.auth-required) #appLayout:not(.media-tool-layout):not([data-module-panel="batchModule"]) :is(button, .primary, .secondary, .danger, .icon-button, .module-tab, .tool-mode-tab, .account-action, .canvas-dock-button):not([data-ui-compact-control]):not(.feed-detail-arrow):not(.account-pw-toggle):not(.workflow-media-library-select):where(:not([data-ui-unmanaged] *)):not([disabled]):not([aria-disabled="true"]):hover {
border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
background-color: color-mix(in srgb, var(--accent) 6%, var(--panel));
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.07);
}
body:not(.auth-required) :is(
.advanced,
.workflow-project-card,
.canvas-project-card,
.favorite-case-card,
.case-row,
.task-list-row,
.task-row,
.job-select,
.case-select,
.settings-provider-card,
.gateway-card,
.model-route-card
):hover {
border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.1);
}
}
body:not(.auth-required) .module-tab.active .ui-icon,
body:not(.auth-required) .tool-mode-tab.active .ui-icon {
transform: none;
transition: color var(--motion-premium-base) var(--motion-premium-in), background-color var(--motion-premium-base) var(--motion-premium-in), border-color var(--motion-premium-base) var(--motion-premium-in);
}
body:not(.auth-required) :is(.tab-panel.active, .tool-panel.active):not(:where(
#textTab,
#imageTab,
#videoToolTab,
#audioToolTab,
#speechToolPanel,
#musicToolPanel,
.workflow-panel,
.infinite-canvas-panel
)) {
animation: hui-fade-up var(--motion-premium-base) var(--motion-premium-in) both;
}
body:not(.auth-required) :is(
.favorite-case-card,
.case-row,
.task-list-row,
.task-row,
.job-select,
.case-select,
.workflow-project-card,
.canvas-project-card,
.settings-provider-card,
.gateway-card,
.model-route-card,
.thumb,
.text-chat-history-item,
.text-chat-message
) {
animation: hui-fade-up var(--motion-premium-base) var(--motion-premium-in) both;
}
body:not(.auth-required) .modal-mask:not([hidden]) {
animation: hui-backdrop-in 160ms ease-out both;
}
body:not(.auth-required) .modal-mask:not([hidden]) .modal-panel {
animation: hui-scale-in var(--motion-premium-base) var(--motion-premium-in) both;
transform-origin: center center;
}
body:not(.auth-required) .command-palette-mask:not([hidden]) .command-palette-panel {
animation: hui-command-palette-in 120ms ease-out both !important;
transform-origin: top left !important;
}
body:not(.auth-required) .lp-drag-source-hidden,
body:not(.auth-required) .lp-drag-source-hidden .command-palette-panel,
body:not(.auth-required) .lp-drag-source-hidden .modal-panel {
opacity: 0 !important;
pointer-events: none !important;
animation: none !important;
}
@keyframes hui-command-palette-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
body:not(.auth-required) :is(.account-usage-modal, .canvas-image-crop-mask, .canvas-image-edit-mask, .canvas-video-edit-mask, .panorama-preview-mask):not([hidden]) .modal-panel {
animation-name: hui-sheet-in;
}
body:not(.auth-required) .context-menu:not([hidden]),
body:not(.auth-required) > .graphdialog:not([hidden]),
body:not(.auth-required) > .litegraph.graphdialog:not([hidden]) {
animation: hui-menu-in var(--motion-premium-base) var(--motion-premium-in) both;
transform-origin: top left;
}
body:not(.auth-required) .toast:not([hidden]) {
animation: hui-toast-in var(--motion-premium-base) var(--motion-premium-in) both;
}
body:not(.auth-required) :is(details.advanced, .settings-advanced-direct) > summary {
transition:
border-color var(--motion-premium-base) var(--motion-premium-in),
background-color var(--motion-premium-base) var(--motion-premium-in),
box-shadow var(--motion-premium-fast) var(--motion-premium-in);
}
body:not(.auth-required) :is(details.advanced, .settings-advanced-direct)[open] > summary {
border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
box-shadow: inset 0 -1px 0 rgba(47, 109, 183, 0.12);
}
body:not(.auth-required) .text-chat-shell.text-history-open .text-chat-sidebar,
body:not(.auth-required) .text-chat-history-backdrop:not([hidden]) {
animation: hui-sheet-in var(--motion-premium-base) var(--motion-premium-in) both;
}
body:not(.auth-required) :is(.workflow-node, .infinite-card, .workflow-media-overlay-thumb, .workflow-lite-canvas, .workflow-stage-wrap, .infinite-canvas-stage, .infinite-canvas-content) {
animation: none;
}
body:not(.auth-required) .infinite-card[data-canvas-dragging="1"] {
transition: none !important;
}
body:not(.auth-required) #infiniteCanvasStage {
overflow: hidden;
overflow: clip;
overscroll-behavior: none;
}
body:not(.auth-required) .workflow-lite-inline-editor {
position: fixed;
z-index: calc(var(--z-overlay) + 20);
display: block;
box-sizing: border-box;
min-width: 0 !important;
max-width: none !important;
min-height: 0 !important;
max-height: none !important;
margin: 0;
padding: 0 10px;
border: 1px solid rgba(47, 109, 183, 0.68);
border-radius: 10px;
outline: none;
background: #ffffff;
color: #111827;
box-shadow: 0 0 0 2px rgba(47, 109, 183, 0.14), 0 8px 18px rgba(15, 23, 42, 0.12);
font: 700 13px/1.2 var(--font-ui, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
body:not(.auth-required) textarea.workflow-lite-inline-editor {
padding: 8px 10px;
line-height: 1.45;
resize: none;
}
body.theme-dark:not(.auth-required) .workflow-lite-inline-editor {
border-color: rgba(92, 151, 218, 0.78);
background: #111827;
color: #dbe7f5;
box-shadow: 0 0 0 2px rgba(92, 151, 218, 0.22), 0 10px 24px rgba(0, 0, 0, 0.28);
}
@media (max-width: 820px) {
body:not(.auth-required) .modal-mask:not([hidden]) .modal-panel {
animation-name: hui-sheet-in;
animation-duration: 200ms;
}
body:not(.auth-required) :is(.favorite-case-card, .case-row, .task-list-row, .task-row, .workflow-project-card, .thumb, .text-chat-history-item, .text-chat-message) {
animation-duration: 180ms;
}
}
@media (prefers-reduced-motion: reduce) {
body:not(.auth-required) *,
body:not(.auth-required) *::before,
body:not(.auth-required) *::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 1ms !important;
}
}
body.mobile-ui {
--mobile-ui-title: 16px;
--mobile-ui-body: 14px;
--mobile-ui-small: 12.5px;
--mobile-ui-frame-radius: 18px;
--mobile-ui-control-radius: 13px;
--font-ui: var(--mobile-toolbar-font, 14px);
--font-label: var(--mobile-caption-font, 13px);
--control-height: var(--mobile-control-h, 38px);
--button-height: var(--mobile-control-h, 38px);
--tab-height: var(--mobile-toolbar-control, 38px);
}
body.mobile-ui #appLayout,
body.mobile-ui .account-modal {
font-size: var(--mobile-ui-body) !important;
}
body.mobile-ui :is(#appLayout, .account-modal) :is(label, .field-title, .drop-zone strong, .tool-page-head strong) {
font-size: var(--mobile-ui-body) !important;
}
body.mobile-ui :is(#appLayout, .account-modal) :is(p, small, .file-summary, .plan-summary-inline, .task-meta, .drop-zone p, .tool-page-head p) {
font-size: var(--mobile-ui-small) !important;
line-height: 1.35 !important;
}
body.mobile-ui:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] .settings-section-title,
body.mobile-ui:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] .gateway-card-head,
body.mobile-ui:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] .gateway-category-head {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
align-items: start !important;
gap: 5px !important;
padding: 0 3px !important;
text-align: left !important;
}
body.mobile-ui:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] :is(
.settings-section-title strong,
.gateway-card-head strong,
.gateway-category-head strong,
.gateway-category-card strong,
.model-route-head strong
) {
font-size: 16px !important;
line-height: 1.18 !important;
font-weight: 820 !important;
letter-spacing: 0 !important;
}
body.mobile-ui:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] :is(
.settings-section-title span,
.gateway-card-head span,
.gateway-category-head span,
.gateway-category-card span,
.model-route-head span,
.settings-provider-help
) {
margin-top: 0 !important;
color: var(--muted) !important;
font-size: var(--mobile-ui-small) !important;
line-height: 1.32 !important;
text-align: left !important;
}
body.mobile-ui:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] .settings-advanced-direct {
width: 100% !important;
max-width: 100% !important;
}
body.mobile-ui:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] .settings-advanced-direct > summary {
min-height: 36px !important;
padding: 0 13px !important;
border-radius: 13px !important;
font-size: 13px !important;
line-height: 1 !important;
}
body.mobile-ui:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] :is(.gateway-card, .settings-provider-card, .gateway-key-manager, .gateway-category-card) {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
padding: 13px !important;
border-radius: 18px !important;
gap: 10px !important;
}
body.mobile-ui:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] :is(.gateway-actions, .model-route-toolbar, .model-route-actions) {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
width: 100% !important;
}
body.mobile-ui:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] .gateway-actions select {
grid-column: 1 / -1 !important;
}
body.mobile-ui:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] :is(.gateway-actions button, .model-route-toolbar button, .model-route-actions button) {
min-width: 0 !important;
width: 100% !important;
min-height: 36px !important;
height: 36px !important;
padding: 0 9px !important;
border-radius: 13px !important;
font-size: 13px !important;
}
body.mobile-ui:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] .settings-panel {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
color: var(--text) !important;
font-size: var(--mobile-ui-body) !important;
line-height: 1.32 !important;
}
body.mobile-ui:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] .settings-panel :is(h2, h3, .model-route-head strong, .model-route-toolbar strong):not(.ops-overview-workbench *) {
font-size: var(--mobile-ui-title) !important;
line-height: 1.18 !important;
font-weight: 820 !important;
letter-spacing: 0 !important;
}
body.mobile-ui:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] .settings-panel :is(p, small, label, .model-route-head span, .model-route-status):not(.ops-overview-workbench *) {
font-size: var(--mobile-ui-small) !important;
line-height: 1.32 !important;
}
body.mobile-ui:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] :is(.model-route-panel, .model-route-card, .settings-provider-card, .key-manager) {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
body.mobile-ui:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] .model-route-card {
padding: 13px !important;
border-radius: var(--mobile-ui-frame-radius) !important;
gap: 10px !important;
}
body.mobile-ui:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] .model-route-head {
gap: 8px !important;
align-items: start !important;
}
body.mobile-ui:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] .model-route-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 9px !important;
}
body.mobile-ui:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] .model-route-grid .model-route-base,
body.mobile-ui:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] .model-route-note,
body.mobile-ui:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] .model-route-key-manager {
grid-column: 1 / -1 !important;
}
body.mobile-ui:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] .model-route-key-row {
grid-template-columns: minmax(0, 1fr) auto auto !important;
gap: 8px !important;
}
body.mobile-ui:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] :is(.model-route-key-value, .model-route-new-key, .model-route-base-url, .model-route-note-input) {
min-width: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
body.mobile-ui:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] .model-route-actions {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 8px !important;
}
body.mobile-ui:not(.auth-required) #appLayout :is(.workflow-status-row, .infinite-canvas-status-row) {
min-width: 0 !important;
}
body.mobile-ui:not(.auth-required) #appLayout :is(#workflowStatus, .workflow-status-row .file-summary, .infinite-canvas-status-row .file-summary) {
min-width: 0 !important;
max-width: 100% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
box-sizing: border-box !important;
}
body.mobile-ui {
--font-ui: var(--mobile-toolbar-font, 14px);
--font-label: var(--mobile-caption-font, 13px);
--control-height: var(--mobile-control-h, 38px);
--button-height: var(--mobile-control-h, 38px);
--tab-height: var(--mobile-toolbar-control, 38px);
}
body.mobile-ui:not(.auth-required),
body.mobile-ui.sidebar-collapsed:not(.auth-required) {
--sidebar: 0px !important;
overflow-x: hidden !important;
}
html.mobile-text-entry-active,
body.mobile-text-entry-active {
overflow: hidden !important;
overscroll-behavior: none !important;
}
body.mobile-ui :is(#appLayout, .account-modal) {
font-size: var(--mobile-ui-body) !important;
}
body.mobile-ui :is(#appLayout, .account-modal) :is(
button,
.primary,
.secondary,
.danger,
.button-link,
.tool-mode-tab,
.account-action,
.account-auth-tabs button
):not([data-ui-compact-control]):not(.gen-icon-btn):not(.text-chat-delete-btn):not(.infinite-card-run):not(.infinite-inline-reference-add):not(.infinite-inline-reference-pick):not(.account-card):not(.account-card-open):not(.account-card-more):where(:not([data-ui-unmanaged] *)) {
min-height: var(--button-height) !important;
font-size: var(--font-ui) !important;
line-height: 1.05 !important;
border-radius: var(--mobile-ui-control-radius) !important;
}
body.mobile-ui :is(#appLayout, .account-modal) :is(
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
select
) {
min-height: var(--control-height) !important;
height: var(--control-height) !important;
font-size: var(--font-ui) !important;
border-radius: var(--mobile-ui-control-radius) !important;
}
body.mobile-ui :is(#appLayout, .account-modal) textarea {
font-size: var(--font-ui) !important;
line-height: 1.45 !important;
border-radius: var(--mobile-ui-control-radius) !important;
}
body.mobile-ui :is(#appLayout, .account-modal) :is(label, .field-title, .drop-zone strong, .tool-page-head strong) {
font-size: var(--font-label) !important;
line-height: 1.24 !important;
}
body.mobile-ui :is(#appLayout, .account-modal) :is(p, small, .file-summary, .plan-summary-inline, .task-meta, .drop-zone p, .tool-page-head p) {
font-size: var(--mobile-ui-small) !important;
line-height: 1.35 !important;
}
body.mobile-ui.auth-required .account-modal:not([hidden]) {
min-height: 100dvh !important;
padding: var(--mobile-shell-gap) var(--mobile-shell-x) !important;
}
body.mobile-ui.auth-required .account-auth-shell {
width: min(560px, 100%) !important;
min-height: calc(100dvh - (var(--mobile-shell-gap) * 2)) !important;
grid-template-columns: 1fr !important;
align-items: center !important;
align-content: center !important;
gap: 12px !important;
}
body.mobile-ui.auth-required .account-auth-intro {
display: none !important;
}
body.mobile-ui.auth-required .account-modal-card {
min-height: 0 !important;
gap: 14px !important;
padding: 20px !important;
border-radius: var(--mobile-ui-frame-radius) !important;
}
body.mobile-ui.auth-required .account-modal-card h2 {
font-size: 20px !important;
line-height: 1.14 !important;
}
body.mobile-ui.auth-required .account-modal-card input,
body.mobile-ui.auth-required .account-auth-actions .primary {
min-height: var(--button-height) !important;
height: var(--button-height) !important;
font-size: var(--font-ui) !important;
border-radius: var(--mobile-ui-control-radius) !important;
}
body.mobile-ui:not(.auth-required) header.topbar,
body.mobile-ui.sidebar-collapsed:not(.auth-required) header.topbar {
position: fixed !important;
inset: 0 auto auto 0 !important;
z-index: var(--z-float-toolbar) !important;
box-sizing: border-box !important;
width: 100vw !important;
min-width: 100vw !important;
max-width: 100vw !important;
height: var(--mobile-topbar-offset) !important;
min-height: var(--mobile-topbar-offset) !important;
max-height: var(--mobile-topbar-offset) !important;
padding: var(--mobile-shell-gap) var(--mobile-shell-x) !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto auto !important;
grid-template-rows: var(--mobile-topbar-main-row) var(--mobile-topbar-nav-row) !important;
grid-template-areas:
"brand actions toggle"
"nav nav nav" !important;
gap: var(--mobile-toolbar-gap) !important;
align-items: center !important;
overflow: hidden !important;
border-right: 0 !important;
border-bottom: 1px solid var(--mobile-topbar-border, var(--border)) !important;
background: var(--mobile-topbar-bg, rgba(255, 255, 255, 0.96)) !important;
box-shadow: var(--mobile-topbar-shadow, 0 10px 22px rgba(15, 23, 42, 0.07)) !important;
transform: none !important;
}
body.mobile-ui:not(.auth-required) header.topbar > .brand-block,
body.mobile-ui:not(.auth-required) header.topbar > .brand-block > .brand-row {
display: contents !important;
position: static !important;
inset: auto !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
transform: none !important;
}
body.mobile-ui:not(.auth-required) header.topbar .brand-text {
grid-area: brand !important;
position: static !important;
align-self: center !important;
justify-self: stretch !important;
min-width: 0 !important;
width: auto !important;
height: var(--mobile-topbar-main-row) !important;
min-height: var(--mobile-topbar-main-row) !important;
max-height: var(--mobile-topbar-main-row) !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
transform: none !important;
}
body.mobile-ui:not(.auth-required) header.topbar .brand-row,
body.mobile-ui:not(.auth-required) header.topbar .brand-text,
body.mobile-ui:not(.auth-required) header.topbar .brand-text h1 {
display: flex !important;
align-items: center !important;
min-width: 0 !important;
width: 100% !important;
line-height: 1 !important;
}
body.mobile-ui:not(.auth-required) header.topbar .brand-full,
body.mobile-ui.sidebar-collapsed:not(.auth-required) header.topbar .brand-full {
display: inline-flex !important;
min-width: 0 !important;
}
body.mobile-ui:not(.auth-required) header.topbar .brand-logo-full,
body.mobile-ui.sidebar-collapsed:not(.auth-required) header.topbar .brand-logo-full {
display: block !important;
width: min(var(--mobile-brand-logo-width), 34vw) !important;
max-width: min(var(--mobile-brand-logo-width), 34vw) !important;
height: auto !important;
max-height: var(--mobile-icon-btn) !important;
object-fit: contain !important;
object-position: left center !important;
}
body.mobile-ui:not(.auth-required) header.topbar .brand-short,
body.mobile-ui:not(.auth-required) header.topbar .brand-logo-mark,
body.mobile-ui:not(.auth-required) header.topbar #providerLine {
display: none !important;
}
body.mobile-ui:not(.auth-required) header.topbar > .top-actions.top-actions,
body.mobile-ui.sidebar-collapsed:not(.auth-required) header.topbar > .top-actions.top-actions {
grid-area: actions !important;
position: static !important;
inset: auto !important;
align-self: center !important;
justify-self: end !important;
z-index: calc(var(--z-float-toolbar) + 1) !important;
width: auto !important;
max-width: none !important;
height: var(--mobile-icon-btn) !important;
min-height: var(--mobile-icon-btn) !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-flow: row nowrap !important;
align-items: center !important;
justify-content: flex-end !important;
gap: var(--mobile-toolbar-gap) !important;
overflow: visible !important;
}
body.mobile-ui:not(.auth-required) #sidebarToggleBtn.sidebar-toggle,
body.mobile-ui:not(.auth-required) #sidebarToggleBtn.sidebar-toggle.has-ui-icon,
body.mobile-ui.sidebar-collapsed:not(.auth-required) #sidebarToggleBtn.sidebar-toggle,
body.mobile-ui.sidebar-collapsed:not(.auth-required) #sidebarToggleBtn.sidebar-toggle.has-ui-icon {
grid-area: toggle !important;
position: static !important;
inset: auto !important;
align-self: center !important;
justify-self: end !important;
z-index: calc(var(--z-float-toolbar) + 2) !important;
margin: 0 !important;
transform: none !important;
}
body.mobile-ui:not(.auth-required) header.topbar > .top-actions.top-actions > button.icon-button,
body.mobile-ui:not(.auth-required) header.topbar > .top-actions.top-actions > button.icon-button.has-ui-icon,
body.mobile-ui:not(.auth-required) #sidebarToggleBtn.sidebar-toggle,
body.mobile-ui:not(.auth-required) #sidebarToggleBtn.sidebar-toggle.has-ui-icon {
width: var(--mobile-icon-btn) !important;
min-width: var(--mobile-icon-btn) !important;
max-width: var(--mobile-icon-btn) !important;
height: var(--mobile-icon-btn) !important;
min-height: var(--mobile-icon-btn) !important;
max-height: var(--mobile-icon-btn) !important;
padding: 0 !important;
border-radius: 10px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
font-size: 0 !important;
line-height: 1 !important;
}
body.mobile-ui:not(.auth-required) header.topbar #accountSummary.account-summary.account-summary-points {
width: auto !important;
min-width: var(--mobile-points-min) !important;
max-width: var(--mobile-points-max) !important;
height: var(--mobile-icon-btn) !important;
min-height: var(--mobile-icon-btn) !important;
max-height: var(--mobile-icon-btn) !important;
padding: 0 var(--mobile-toolbar-pad) !important;
gap: var(--mobile-toolbar-gap) !important;
border-radius: 10px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: var(--mobile-toolbar-font) !important;
font-weight: 760 !important;
white-space: nowrap !important;
}
body.mobile-ui:not(.auth-required) header.topbar > nav.module-nav.module-nav,
body.mobile-ui.sidebar-collapsed:not(.auth-required) header.topbar > nav.module-nav.module-nav {
grid-area: nav !important;
position: static !important;
inset: auto !important;
align-self: center !important;
justify-self: stretch !important;
width: 100% !important;
height: var(--mobile-topbar-nav-row) !important;
min-height: var(--mobile-topbar-nav-row) !important;
max-height: var(--mobile-topbar-nav-row) !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-flow: row nowrap !important;
align-items: center !important;
justify-content: flex-start !important;
gap: var(--mobile-toolbar-gap) !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: x proximity !important;
scrollbar-width: none !important;
touch-action: pan-x !important; 
-webkit-overflow-scrolling: touch !important; 
overscroll-behavior-x: contain !important;
visibility: visible !important;
opacity: 1 !important;
transform: none !important;
pointer-events: auto !important;
}
body.mobile-ui:not(.auth-required) header.topbar > nav.module-nav.module-nav::-webkit-scrollbar {
display: none !important;
}
body.mobile-ui:not(.auth-required) header.topbar nav.module-nav.module-nav > button.module-tab,
body.mobile-ui:not(.auth-required) header.topbar nav.module-nav.module-nav > button.module-tab.has-ui-icon,
body.mobile-ui.sidebar-collapsed:not(.auth-required) header.topbar nav.module-nav.module-nav > button.module-tab,
body.mobile-ui.sidebar-collapsed:not(.auth-required) header.topbar nav.module-nav.module-nav > button.module-tab.has-ui-icon {
flex: 0 0 var(--mobile-icon-btn) !important;
width: var(--mobile-icon-btn) !important;
min-width: var(--mobile-icon-btn) !important;
max-width: var(--mobile-icon-btn) !important;
height: var(--mobile-icon-btn) !important;
min-height: var(--mobile-icon-btn) !important;
max-height: var(--mobile-icon-btn) !important;
padding: 0 !important;
border-radius: 10px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
font-size: 0 !important;
line-height: 1 !important;
scroll-snap-align: start !important;
}
body.mobile-ui:not(.auth-required) header.topbar nav.module-nav.module-nav > button.module-tab strong,
body.mobile-ui:not(.auth-required) header.topbar nav.module-nav.module-nav > button.module-tab span:not(.ui-icon),
body.mobile-ui:not(.auth-required) header.topbar nav.module-nav.module-nav > button.module-tab::before {
display: none !important;
}
body.mobile-ui:not(.auth-required) header.topbar nav.module-nav.module-nav > button.module-tab > .ui-icon {
width: var(--mobile-nav-icon-size) !important;
height: var(--mobile-nav-icon-size) !important;
max-width: 62% !important;
max-height: 62% !important;
margin: 0 !important;
}
body.mobile-ui:not(.auth-required) header.topbar :is(.icon-button, .sidebar-toggle, .account-summary) > .ui-icon,
body.mobile-ui:not(.auth-required) header.topbar :is(.icon-button, .sidebar-toggle, .account-summary) > svg,
body.mobile-ui:not(.auth-required) header.topbar > .top-actions.top-actions > button.icon-button > .ui-icon,
body.mobile-ui:not(.auth-required) header.topbar > .top-actions.top-actions > button.icon-button > svg,
body.mobile-ui:not(.auth-required) #sidebarToggleBtn.sidebar-toggle > .ui-icon,
body.mobile-ui:not(.auth-required) #sidebarToggleBtn.sidebar-toggle > svg {
width: var(--mobile-icon-svg) !important;
height: var(--mobile-icon-svg) !important;
max-width: 62% !important;
max-height: 62% !important;
margin: 0 !important;
}
body.mobile-ui:not(.auth-required) #appLayout.layout,
body.mobile-ui:not(.auth-required) #appLayout.module-panel {
box-sizing: border-box !important;
margin-left: 0 !important;
margin-top: var(--mobile-topbar-offset) !important;
width: 100vw !important;
max-width: 100vw !important;
min-width: 0 !important;
min-height: calc(100dvh - var(--mobile-topbar-offset)) !important;
padding: var(--mobile-shell-x) !important;
gap: var(--mobile-shell-gap) !important;
overflow-x: hidden !important;
transition: none !important;
}
body.mobile-ui:not(.auth-required) #appLayout.layout.workflow-layout[data-module-panel="workflowModule"],
body.mobile-ui:not(.auth-required) #appLayout.layout.canvas-layout[data-module-panel="canvasModule"] {
position: fixed !important;
inset: var(--mobile-topbar-offset) 0 auto 0 !important;
display: block !important;
width: 100vw !important;
min-width: 100vw !important;
max-width: 100vw !important;
height: calc(var(--mobile-stable-viewport-h, 100dvh) - var(--mobile-topbar-offset)) !important;
min-height: calc(var(--mobile-stable-viewport-h, 100dvh) - var(--mobile-topbar-offset)) !important;
max-height: calc(var(--mobile-stable-viewport-h, 100dvh) - var(--mobile-topbar-offset)) !important;
margin-left: 0 !important;
margin-top: 0 !important;
padding: var(--mobile-toolbar-pad) !important;
overflow: hidden !important;
}
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="workflowModule"] #workflowTab.active,
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasTab.active {
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: calc(var(--mobile-stable-viewport-h, 100dvh) - var(--mobile-topbar-offset) - var(--mobile-layout-pad-total)) !important;
min-height: calc(var(--mobile-stable-viewport-h, 100dvh) - var(--mobile-topbar-offset) - var(--mobile-layout-pad-total)) !important;
max-height: calc(var(--mobile-stable-viewport-h, 100dvh) - var(--mobile-topbar-offset) - var(--mobile-layout-pad-total)) !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="workflowModule"] #workflowTab.active > .workflow-shell,
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasTab.active > .infinite-canvas-shell.canvas-studio-shell,
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="workflowModule"] #workflowTab.active .workflow-main,
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasTab.active .infinite-canvas-main {
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
overflow: hidden !important;
}
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="workflowModule"] #workflowTab.active > .workflow-shell,
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasTab.active > .infinite-canvas-shell.canvas-studio-shell {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: minmax(0, 1fr) !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 14px !important;
}
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="workflowModule"] #workflowTab.active .workflow-sidebar,
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="workflowModule"] #workflowTab.active .workflow-inspector,
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasTab.active .infinite-canvas-inspector {
display: none !important;
}
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="workflowModule"] #workflowTab.active .workflow-main,
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasTab.active .infinite-canvas-main {
display: grid !important;
grid-template-rows: minmax(0, 1fr) !important;
border-radius: 14px !important;
}
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasTab.active .infinite-canvas-toolbar.canvas-creator-bar {
position: absolute !important;
inset: 0 !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: auto !important;
max-width: none !important;
max-height: none !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
pointer-events: none !important;
}
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="workflowModule"] #workflowTab.active .workflow-stage-wrap.workflow-lite-wrap,
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasTab.active #infiniteCanvasStage.infinite-canvas-stage {
box-sizing: border-box !important;
position: relative !important;
inset: auto !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
overflow: hidden !important;
border-radius: 14px !important;
touch-action: none !important;
overscroll-behavior: none !important;
}
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="workflowModule"] #workflowTab.active #workflowLiteCanvas.workflow-lite-canvas,
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasTab.active .infinite-canvas-content,
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasTab.active .infinite-card {
touch-action: none !important;
}
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasTab.active .infinite-card :is(input, textarea, select, button, a, [contenteditable="true"]),
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasTab.active .infinite-card-inline-panel :is(input, textarea, select, button, a, [contenteditable="true"]) {
touch-action: manipulation !important;
}
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="workflowModule"] #workflowTab.active .workflow-main > .workflow-status-row,
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasTab.active .infinite-canvas-status-row {
position: absolute !important;
width: 1px !important;
height: 1px !important;
min-width: 0 !important;
min-height: 0 !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
pointer-events: none !important;
}
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="workflowModule"] #workflowTab.active .workflow-main > .workflow-status-row .file-summary,
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasTab.active .infinite-canvas-status-row .file-summary {
min-width: 0 !important;
min-height: var(--mobile-status-control) !important;
height: var(--mobile-status-control) !important;
padding: 0 var(--mobile-toolbar-pad) !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
font-size: var(--mobile-caption-font) !important;
}
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="workflowModule"] #workflowTab.active .workflow-main > .workflow-status-row,
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasTab.active .infinite-canvas-status-row {
grid-template-columns: minmax(0, 1fr) auto !important;
}
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="workflowModule"] #workflowTab.active .workflow-main > .workflow-status-row .workflow-history-actions,
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasTab.active .infinite-canvas-status-row .workflow-history-actions {
display: grid !important;
grid-template-columns: repeat(2, minmax(var(--mobile-status-control), auto)) !important;
align-items: center !important;
gap: var(--mobile-toolbar-gap) !important;
width: auto !important;
max-width: none !important;
min-height: var(--mobile-status-control) !important;
height: var(--mobile-status-control) !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="workflowModule"] #workflowTab.active .workflow-main > .workflow-status-row .workflow-history-actions button,
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasTab.active .infinite-canvas-status-row .workflow-history-actions button {
width: auto !important;
min-width: var(--mobile-status-control) !important;
height: var(--mobile-status-control) !important;
min-height: var(--mobile-status-control) !important;
padding: 0 9px !important;
border-radius: 999px !important;
font-size: var(--mobile-caption-font) !important;
line-height: 1 !important;
white-space: nowrap !important;
}
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="workflowModule"] #workflowTab.active .workflow-main > .workflow-status-row .workflow-history-actions button .ui-icon,
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasTab.active .infinite-canvas-status-row .workflow-history-actions button .ui-icon {
width: 14px !important;
height: 14px !important;
margin-right: 3px !important;
}
body.mobile-ui:not(.auth-required) #appLayout :is(
#textTab,
#imageTab,
#videoToolTab,
#audioToolTab,
#speechToolPanel,
#musicToolPanel
) :is(
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
select
) {
min-height: var(--control-height) !important;
height: var(--control-height) !important;
max-height: var(--control-height) !important;
padding: 0 10px !important;
border-radius: var(--mobile-ui-control-radius) !important;
font-size: var(--font-ui) !important;
line-height: 1.15 !important;
}
body.mobile-ui:not(.auth-required) #appLayout :is(
#textTab,
#imageTab,
#videoToolTab,
#audioToolTab,
#speechToolPanel,
#musicToolPanel
) .command-row {
flex-wrap: wrap !important;
align-items: center !important;
gap: var(--media-inline-gap) !important;
margin: 0 !important;
}
body.mobile-ui:not(.auth-required) #appLayout :is(
#textTab,
#imageTab,
#videoToolTab,
#audioToolTab,
#speechToolPanel,
#musicToolPanel
) .command-row > :is(button, .button-link) {
flex: 0 0 auto !important;
width: auto !important;
min-width: 82px !important;
max-width: 100% !important;
min-height: var(--button-height) !important;
height: var(--button-height) !important;
max-height: var(--button-height) !important;
padding: 0 12px !important;
border-radius: var(--mobile-ui-control-radius) !important;
font-size: var(--font-ui) !important;
line-height: 1.05 !important;
}
body.mobile-ui:not(.auth-required) #appLayout :is(
#textTab,
#imageTab,
#videoToolTab,
#audioToolTab,
#speechToolPanel,
#musicToolPanel
) :is(button.primary, button.secondary, button.danger, .primary, .secondary, .danger):not([data-ui-compact-control]):not(.module-tab):not(.sidebar-toggle):not(.icon-button):not(.gen-icon-btn):not(.account-summary):not(.text-message-copy):not(.text-chat-delete-btn):not(.infinite-card-run):not(.infinite-inline-reference-add):not(.infinite-inline-reference-pick) {
min-height: var(--button-height) !important;
height: var(--button-height) !important;
max-height: var(--button-height) !important;
padding: 0 12px !important;
border-radius: var(--mobile-ui-control-radius) !important;
font-size: var(--font-ui) !important;
line-height: 1.05 !important;
}
body.mobile-ui:not(.auth-required) #appLayout :is(
#textTab,
#imageTab,
#videoToolTab,
#audioToolTab,
#speechToolPanel,
#musicToolPanel
) .command-row > :is(button.primary, .primary) {
min-width: 106px !important;
}
body.mobile-ui:not(.auth-required) #appLayout :is(
#textTab,
#imageTab,
#videoToolTab,
#audioToolTab,
#speechToolPanel,
#musicToolPanel
) .command-row > :is(button.has-ui-icon, .button-link.has-ui-icon) .ui-icon {
width: var(--mobile-icon-svg) !important;
height: var(--mobile-icon-svg) !important;
}
.workflow-media-library-auto-more {
grid-column: 1 / -1;
justify-self: center;
margin-top: 6px;
min-height: 38px;
padding: 0 22px;
border: 1px solid #cfe0ee;
border-radius: 12px;
background: #f4f9ff;
color: #2f6db7;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
}
.workflow-media-library-preview [data-media-library-src] {
opacity: 0;
}
.workflow-media-library-preview .is-loading:not(.is-loaded) {
opacity: 0;
}
.workflow-media-library-preview .is-loaded {
opacity: 1;
transition: opacity 0.18s ease;
}
.workflow-media-library-preview .is-error {
opacity: 0.45;
}
#workflowMediaLibraryModal .workflow-media-library-taskline {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 5px;
min-height: 18px;
overflow: hidden;
}
#workflowMediaLibraryModal .workflow-media-library-taskline span {
max-width: 100%;
padding: 1px 6px;
border: 1px solid rgba(148, 163, 184, 0.24);
border-radius: 999px;
background: rgba(248, 250, 252, 0.92);
color: #64748b;
font-size: 10.5px;
font-weight: 760;
line-height: 1.35;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#workflowMediaLibraryModal .workflow-media-library-actions {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#workflowMediaLibraryModal .workflow-media-upload-pending-card .workflow-media-library-actions {
grid-template-columns: 1fr;
}
.media-detail-task-id code {
font-size: 11.5px;
}
.media-detail-refs {
max-height: 122px;
overflow: auto;
padding-right: 2px;
}
body:not(.auth-required) #appLayout .studio-command-surface {
box-sizing: border-box;
border: 1px solid var(--studio-command-border);
border-radius: var(--studio-command-radius);
background: var(--studio-command-surface);
color: var(--studio-command-ink);
box-shadow: var(--studio-command-shadow);
}
body:not(.auth-required) #appLayout .studio-command-surface button {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
min-width: var(--studio-command-control-size);
height: var(--studio-command-control-size);
min-height: var(--studio-command-control-size);
padding: 0 9px;
border: 0;
border-radius: var(--studio-command-control-radius);
background: transparent;
color: var(--studio-command-ink);
box-shadow: none;
font-size: 12px;
font-weight: 720;
line-height: 1;
white-space: nowrap;
cursor: pointer;
transition: background-color var(--motion-premium-fast) ease-out, color var(--motion-premium-fast) ease-out;
}
body:not(.auth-required) #appLayout .studio-command-surface button .ui-icon,
body:not(.auth-required) #appLayout .studio-command-surface button .ui-icon svg {
width: 15px;
height: 15px;
margin: 0;
flex: 0 0 15px;
}
body:not(.auth-required) #appLayout .studio-command-surface button > svg {
width: 15px;
height: 15px;
flex: 0 0 15px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
body:not(.auth-required) #appLayout .studio-command-surface button:hover:not(:disabled) {
background: var(--studio-command-hover);
color: var(--text);
}
body:not(.auth-required) #appLayout .studio-command-surface button:focus-visible {
outline: 2px solid color-mix(in srgb, var(--studio-command-accent) 38%, transparent);
outline-offset: 1px;
}
body:not(.auth-required) #appLayout .studio-command-surface button:disabled {
opacity: 0.38;
cursor: not-allowed;
}
body:not(.auth-required) #appLayout .studio-command-surface button.primary {
background: var(--studio-command-accent);
color: var(--studio-command-on-accent);
}
body:not(.auth-required) #appLayout .studio-command-surface button.primary:hover:not(:disabled) {
background: color-mix(in srgb, var(--studio-command-accent) 88%, var(--text));
color: var(--studio-command-on-accent);
}
body:not(.auth-required) #appLayout .studio-command-surface button.danger {
color: var(--danger);
}
body:not(.auth-required) #appLayout .studio-command-surface button.danger:hover:not(:disabled),
body:not(.auth-required) #appLayout .flow-mini-btn[data-flow-mini-target="#workflowClearStreamBtn"]:hover {
background: var(--danger-soft);
color: var(--danger);
}
body:not(.auth-required) .flow-toolbar-2row {
position: absolute;
top: 12px;
left: 16px;
right: auto;
z-index: 40;
display: flex !important;
flex-flow: row nowrap;
align-items: center;
width: fit-content;
max-width: calc(100% - 32px);
min-width: 0;
height: 42px;
min-height: 42px;
gap: 4px;
padding: 4px;
overflow: hidden;
pointer-events: auto;
clip-path: inset(0 round var(--studio-command-radius));
transition:
clip-path var(--motion-premium-base) var(--motion-premium-in),
opacity var(--motion-premium-fast) ease-out,
visibility 0s;
}
body:not(.auth-required) .flow-toolbar-row {
display: flex;
flex-flow: row nowrap;
align-items: center;
gap: 2px;
min-width: 0;
}
body:not(.auth-required) .flow-toolbar-secondary {
margin-left: 2px;
padding-left: 6px;
border-left: 1px solid var(--studio-command-divider);
overflow-x: auto;
scrollbar-width: none;
}
body:not(.auth-required) .flow-toolbar-secondary::-webkit-scrollbar {
display: none;
}
body:not(.auth-required) .flow-toolbar-name {
position: relative;
display: flex;
flex: 0 1 196px;
min-width: 132px;
max-width: 196px;
margin: 0;
}
body:not(.auth-required) .flow-toolbar-name > span {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
}
body:not(.auth-required) .flow-toolbar-name > input {
width: 100%;
height: var(--studio-command-control-size);
min-height: var(--studio-command-control-size);
padding: 0 10px;
border: 1px solid transparent;
border-radius: var(--studio-command-control-radius);
background: var(--surface-2);
color: var(--text);
font-size: 12px;
font-weight: 700;
outline: 0;
}
body:not(.auth-required) .flow-toolbar-name > input:focus {
border-color: color-mix(in srgb, var(--studio-command-accent) 54%, transparent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--studio-command-accent) 12%, transparent);
}
body:not(.auth-required) .flow-toolbar-primary > :is(.primary, .secondary, .workflow-dirty-badge, .workflow-run-estimate) {
flex: 0 0 auto;
}
body:not(.auth-required) .flow-toolbar-collapse,
body:not(.auth-required) .flow-mini-btn {
width: var(--studio-command-control-size);
padding: 0;
flex: 0 0 var(--studio-command-control-size);
}
body:not(.auth-required) #appLayout :is(.flow-toolbar-2row, .flow-toolbar-mini) button[aria-pressed="true"] {
color: var(--studio-command-accent);
}
body:not(.auth-required) .flow-toolbar-collapse .ui-icon {
transform: rotate(-90deg);
}
body:not(.auth-required) .flow-toolbar-mini {
position: absolute;
top: 12px;
left: 16px;
z-index: 40;
display: inline-flex;
align-items: center;
gap: 1px;
max-width: calc(100% - 32px);
height: 42px;
min-height: 42px;
padding: 4px;
overflow-x: auto;
scrollbar-width: none;
opacity: 0;
transform: translateX(4px);
transform-origin: left center;
visibility: hidden;
pointer-events: none;
transition:
opacity var(--motion-premium-fast) ease-out,
transform var(--motion-premium-base) var(--motion-premium-in),
visibility 0s linear var(--motion-premium-base);
}
body:not(.auth-required) .flow-toolbar-mini::-webkit-scrollbar {
display: none;
}
body:not(.auth-required) :is(.infinite-canvas-main, .workflow-main).flow-bar-collapsed .flow-toolbar-2row {
clip-path: inset(0 calc(100% - var(--flow-collapsed-width, 240px)) 0 0 round var(--studio-command-radius));
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
clip-path var(--motion-premium-base) var(--motion-premium-in),
opacity var(--motion-premium-fast) ease-out,
visibility 0s linear var(--motion-premium-base);
}
body:not(.auth-required) :is(.infinite-canvas-main, .workflow-main).flow-bar-collapsed > .flow-toolbar-mini {
opacity: 1;
transform: none;
visibility: visible;
pointer-events: auto;
transition-delay: 0s;
}
body:not(.auth-required) .flow-mini-name {
display: inline-flex;
align-items: center;
max-width: 156px;
min-height: var(--studio-command-control-size);
padding: 0 8px;
overflow: hidden;
color: var(--text);
font-size: 12px;
font-weight: 720;
text-overflow: ellipsis;
white-space: nowrap;
cursor: text;
flex: none;
}
body:not(.auth-required) .flow-mini-name-edit {
box-sizing: border-box;
width: 148px;
height: var(--studio-command-control-size);
min-height: var(--studio-command-control-size);
margin: 0;
padding: 0 8px;
border: 1px solid color-mix(in srgb, var(--studio-command-accent) 54%, transparent);
border-radius: var(--studio-command-control-radius);
background: var(--surface-2);
color: var(--text);
font-size: 12px;
font-weight: 700;
outline: 0;
}
body:not(.auth-required) .flow-mini-sep {
width: 1px;
height: 18px;
margin: 0 4px;
background: var(--studio-command-divider);
flex: none;
}
body:not(.auth-required) .flow-mini-expand .ui-icon {
transform: rotate(90deg);
}
body:not(.auth-required) .flow-toolbar-secondary .canvas-board-select-field,
body:not(.auth-required) .flow-toolbar-secondary .workflow-description-field {
display: none;
flex: 0 1 auto;
min-width: 0;
}
body:not(.auth-required) .layout.workflow-layout .workflow-shell {
grid-template-columns: minmax(0, 1fr) !important;
}
body:not(.auth-required) .layout.workflow-layout .workflow-main {
grid-column: 1 / -1 !important;
width: 100% !important;
}
.preset-case-mask { z-index: var(--z-tool-mask); }
.preset-case-panel { width: min(860px, calc(100vw - 32px)); max-height: min(82vh, 760px); display: flex; flex-direction: column; }
.preset-case-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 10px; }
.preset-case-search { flex: 1 1 220px; min-width: 0; height: 36px; padding: 0 12px; border: 1px solid #d9e2ee; border-radius: 10px; }
.preset-case-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.preset-case-tab { padding: 6px 12px; border: 1px solid #d9e2ee; border-radius: 999px; background: #f6f9fd; color: #2f6db7; font-weight: 700; cursor: pointer; }
.preset-case-tab.active { border-color: #2f6db7; background: #eaf2fb; color: #2f6db7; }
.preset-case-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 12px; overflow: auto; padding: 2px; }
.preset-case-card { display: flex; flex-direction: column; gap: 8px; padding: 13px; border: 1px solid #e2ecf4; border-radius: 14px; background: #ffffff; }
.preset-case-preview { width: 100%; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: #eef2f7; }
.preset-case-preview img, .preset-case-preview video { width: 100%; height: 100%; object-fit: cover; display: block; }
.preset-case-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.preset-case-card-head strong { font-size: 14px; color: #142033; }
.preset-case-type { flex: 0 0 auto; padding: 2px 9px; border-radius: 999px; background: #eef6f5; color: #2f6db7; font-size: 11px; font-weight: 800; }
.preset-case-prompt { margin: 0; color: #44546b; font-size: 12.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.preset-case-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.preset-case-meta em { font-style: normal; font-size: 11px; color: #5a6b82; background: #f3f7fb; border-radius: 7px; padding: 2px 7px; }
.preset-case-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.preset-case-tags i { font-style: normal; font-size: 10.5px; color: #2f6db7; background: #f0f6ff; border-radius: 6px; padding: 1px 6px; }
.preset-case-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 2px; }
.preset-case-actions button { min-height: 34px; border-radius: 10px; cursor: pointer; }
body.mobile-ui .preset-case-list { grid-template-columns: 1fr; }
.tools-panel { padding: 18px 20px 40px; overflow: auto; }
.tools-hub-view,
.tools-workspace-root { width: 100%; max-width: 1180px; margin-inline: auto; }
.tools-hub-view > .tool-page-head { margin-inline: auto; }
.tools-hub { display: flex; flex-direction: column; gap: 22px; max-width: 1180px; }
.tool-hub-group > h3 { margin: 0 0 11px; font-size: 15px; color: #142033; }
.tool-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 12px; }
.tool-hub-card { appearance: none; width: 100%; color: inherit; font: inherit; display: flex; align-items: flex-start; gap: 12px; text-align: left; padding: 14px; border: 1px solid #e4edf5; border-radius: 16px; background: #ffffff; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.tool-hub-card:hover { border-color: rgba(47,109,183,.45); box-shadow: 0 14px 30px rgba(15,23,42,.08); transform: translateY(-2px); }
.tool-hub-card:focus-visible { outline: 3px solid rgba(47,109,183,.28); outline-offset: 3px; }
.tool-hub-card.is-featured { grid-column: 1 / -1; min-height: 92px; border-color: rgba(47,109,183,.28); background: linear-gradient(135deg, #f4f9ff 0%, #ffffff 58%, #f5f3ff 100%); box-shadow: 0 12px 28px rgba(47,109,183,.08); }
.tool-hub-card.is-featured .tool-hub-icon { background: linear-gradient(135deg, #2f6db7, #6858d7); color: #fff; }
.tool-hub-icon { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; font-size: 21px; border-radius: 12px; background: linear-gradient(135deg, #eaf3ff, #eaf2fb); color: #2563a8; }
.tool-hub-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tool-hub-card:hover .tool-hub-icon { color: #2f6db7; }
.tool-hub-body { display: grid; gap: 4px; min-width: 0; }
.tool-hub-name { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: #142033; }
.tool-hub-status { font-style: normal; font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px; }
.tool-hub-status.soon { color: #b06a00; background: #fdf0d9; }
.tool-hub-featured { font-style: normal; font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px; color: #2f5fa3; background: rgba(47,109,183,.1); }
.tool-hub-desc { font-size: 12px; color: #5a6b82; line-height: 1.5; }
.tool-detail-mask { z-index: calc(var(--z-tool-mask) + 200); }
.tool-detail-panel { width: min(520px, calc(100vw - 32px)); }
.tool-detail-desc { margin: 4px 0 12px; color: #344256; line-height: 1.6; font-size: 13.5px; }
.tool-detail-row { display: grid; grid-template-columns: 76px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid #eef3f8; font-size: 13px; }
.tool-detail-row b { color: #2f6db7; font-weight: 800; }
.tool-detail-row span { color: #44546b; }
.tool-detail-note { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #f7fafd; color: #5f7287; font-size: 12px; }
body.mobile-ui .tool-hub-grid { grid-template-columns: 1fr; }
body.theme-dark .tool-hub-group > h3 { color: #e6edf6; }
body.theme-dark .tool-hub-card { background: rgba(18, 21, 29, 0.82); border-color: rgba(141, 149, 165, 0.24); }
body.theme-dark .tool-hub-card:hover { border-color: rgba(90, 166, 232, 0.5); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34); }
body.theme-dark .tool-hub-card.is-featured { background: linear-gradient(135deg, rgba(47,109,183,.2), rgba(18,21,29,.9) 58%, rgba(104,88,215,.14)); border-color: rgba(124,196,255,.34); }
body.theme-dark .tool-hub-icon { background: linear-gradient(135deg, rgba(45, 130, 212, 0.22), rgba(47, 109, 183, 0.18)); color: #7cc4ff; }
body.theme-dark .tool-hub-card:hover .tool-hub-icon { color: #9cc4ec; }
body.theme-dark .tool-hub-name { color: #eef4fb; }
body.theme-dark .tool-hub-desc { color: #9fb0c6; }
body.theme-dark .tool-hub-status.soon { color: #f4c986; background: rgba(176, 106, 0, 0.22); }
body.theme-dark .tool-hub-featured { color: #a8d5ff; background: rgba(90,166,232,.16); }
body.theme-dark .tool-detail-desc { color: #c4d1e2; }
body.theme-dark .tool-detail-row { border-top-color: rgba(141, 149, 165, 0.2); }
body.theme-dark .tool-detail-row b { color: #9cc4ec; }
body.theme-dark .tool-detail-row span { color: #b6c4d8; }
body.theme-dark .tool-detail-note { background: rgba(47, 109, 183, 0.1); color: #9fb0c6; }
.tool-detail-title { display: flex; align-items: center; gap: 11px; }
.tool-detail-icon { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(135deg, #eaf3ff, #eaf2fb); color: #2563a8; }
.tool-detail-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
body.theme-dark .tool-detail-icon { background: linear-gradient(135deg, rgba(45,130,212,.22), rgba(90,166,232,.18)); color: #7cc4ff; }
.tool-run-mask { z-index: calc(var(--z-tool-mask) + 300); }
.tool-run-panel { width: min(560px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 12px; }
.tool-run-preview { display: grid; place-items: center; max-height: 230px; overflow: hidden; border-radius: 12px; background: #f3f7fb; }
.tool-run-preview img { max-width: 100%; max-height: 230px; object-fit: contain; }
.tool-run-status { padding: 10px 12px; border-radius: 10px; background: #f7fafd; color: #45607a; font-size: 13px; }
.tool-run-status.is-loading { display: flex; align-items: center; gap: 9px; color: #2f6db7; background: #eef6ff; }
.tool-run-status.is-loading::before { content: ""; flex: none; width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(47,109,183,.28); border-top-color: #2f6db7; animation: tool-run-spin .7s linear infinite; }
body:not(.auth-required) #appLayout[data-module-panel="textModule"] .switch-row input[type="checkbox"] {
width: 18px !important;
min-width: 18px !important;
max-width: 18px !important;
height: 18px !important;
min-height: 18px !important;
max-height: 18px !important;
}
.tool-run-status.is-error { color: #c0392b; background: #fdeceb; }
@keyframes tool-run-spin { to { transform: rotate(360deg); } }
.tool-run-out-label { font-size: 12px; font-weight: 800; color: #44546b; margin: 2px 0 -4px; }
body.theme-dark .tool-run-status.is-loading { color: #9cc6ff; background: rgba(47,109,183,.16); }
body.theme-dark .tool-run-status.is-error { color: #ff9d92; background: rgba(192,57,43,.16); }
body.theme-dark .tool-run-out-label { color: #b6c4d8; }
.tool-run-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tool-run-row label { font-size: 12.5px; font-weight: 700; color: #44546b; }
.tool-run-row input.tool-run-translate { flex: 1 1 180px; min-width: 0; height: 34px; padding: 0 11px; border: 1px solid #d8e2ec; border-radius: 9px; font-size: 13px; background: #fff; color: #1f2937; }
.tool-run-output { width: 100%; box-sizing: border-box; resize: vertical; padding: 10px 12px; border: 1px solid #d8e2ec; border-radius: 10px; font-size: 13px; line-height: 1.55; color: #1f2937; background: #fff; font-family: inherit; }
.tool-run-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tool-modal-head { align-items: flex-start; }
.tool-modal-head-main { display: flex; align-items: center; gap: 11px; min-width: 0; }
.tool-modal-ic { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(135deg, #eaf3ff, #eaf2fb); color: #2563a8; }
.tool-modal-ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tool-modal-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tool-modal-head-text strong { font-size: 15px; color: #142033; }
.tool-modal-head-text small { font-size: 12px; color: #5a6b82; line-height: 1.45; }
.tool-detail-title > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tool-detail-title > div small { font-size: 12px; color: #5a6b82; }
body.theme-dark .tool-modal-ic { background: linear-gradient(135deg, rgba(45,130,212,.22), rgba(90,166,232,.18)); color: #7cc4ff; }
body.theme-dark .tool-modal-head-text strong { color: #eef4fb; }
body.theme-dark .tool-modal-head-text small, body.theme-dark .tool-detail-title > div small { color: #9fb0c6; }
body.theme-dark .tool-run-preview { background: rgba(13,21,34,.7); }
body.theme-dark .tool-run-status { background: rgba(90,166,232,.12); color: #a9bace; }
body.theme-dark .tool-run-row input.tool-run-translate,
body.theme-dark .tool-run-output { background: rgba(17,26,41,.8); border-color: rgba(126,148,174,.28); color: #e6edf6; }
body.theme-dark .tool-run-row label { color: #b6c4d8; }
.tool-wm-panel { width: min(640px, calc(100vw - 32px)); }
.tool-wm-pickers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tool-wm-slot { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid #e1e9f1; border-radius: 12px; background: #fbfdff; }
.tool-wm-slot-head { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #2c3e52; }
.tool-wm-step { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; }
.tool-wm-thumb { display: grid; place-items: center; height: 116px; border-radius: 10px; background: #eef3f9; overflow: hidden; }
.tool-wm-thumb img { max-width: 100%; max-height: 116px; object-fit: contain; display: block; }
.tool-wm-thumb-checker { background:
linear-gradient(45deg, rgba(148,163,184,.16) 25%, transparent 25%),
linear-gradient(-45deg, rgba(148,163,184,.16) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, rgba(148,163,184,.16) 75%),
linear-gradient(-45deg, transparent 75%, rgba(148,163,184,.16) 75%),
#f4f7fb;
background-position: 0 0, 0 9px, 9px -9px, -9px 0; background-size: 18px 18px; }
.tool-wm-empty { color: #93a4b8; font-size: 12.5px; padding: 8px; text-align: center; }
.tool-wm-slot-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tool-wm-slot:nth-child(2) .tool-wm-slot-actions { grid-template-columns: 1fr; }
.tool-wm-slot-actions button { min-height: 32px; padding: 5px 8px; font-size: 12.5px; }
.tool-wm-controls { display: flex; align-items: center; gap: 12px; }
.tool-wm-controls label { font-size: 12.5px; font-weight: 700; color: #44546b; white-space: nowrap; }
.tool-wm-controls input[type="range"] { flex: 1 1 auto; min-width: 0; accent-color: var(--accent); }
.tool-wm-op-val { font-size: 12.5px; font-weight: 700; color: var(--accent); min-width: 42px; text-align: right; }
.tool-wm-preview { min-height: 150px; }
.tool-wm-download { width: 100%; }
.tool-media-picker-mask { z-index: calc(var(--z-tool-mask) + 400); }
.tool-media-picker-panel { width: min(720px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 12px; }
.tool-media-picker-status { padding: 10px 12px; border-radius: 10px; background: #f7fafd; color: #45607a; font-size: 13px; }
.tool-media-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; max-height: min(60vh, 460px); overflow: auto; padding: 2px; }
.tool-media-pick { padding: 0; border: 1px solid #e1e9f1; border-radius: 10px; background: #f3f7fb; overflow: hidden; aspect-ratio: 1 / 1; cursor: pointer; transition: border-color .14s ease, transform .14s ease; }
.tool-media-pick:hover { border-color: var(--accent); transform: translateY(-1px); }
.tool-media-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.theme-dark .tool-wm-slot { background: rgba(17,26,41,.55); border-color: rgba(126,148,174,.24); }
body.theme-dark .tool-wm-slot-head { color: #d6e0ec; }
body.theme-dark .tool-wm-thumb { background: rgba(13,21,34,.7); }
body.theme-dark .tool-wm-controls label { color: #b6c4d8; }
body.theme-dark .tool-media-picker-status { background: rgba(90,166,232,.12); color: #a9bace; }
body.theme-dark .tool-media-pick { background: rgba(13,21,34,.7); border-color: rgba(126,148,174,.24); }
.workflow-media-library-pickbar { display: none; }
body.media-library-pick-mode #workflowMediaLibraryModal { z-index: var(--z-modal-pick) !important; }
body.media-library-pick-mode .workflow-media-library-panel {
display: flex; flex-direction: column;
max-height: calc(100dvh - 48px);
}
body.media-library-pick-mode .workflow-media-library-list {
flex: 1 1 auto; max-height: none; min-height: 140px;
}
body.media-library-pick-mode .workflow-media-library-pickbar {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex: 0 0 auto;
margin: 0; padding: 12px 16px; border-radius: 14px;
background: linear-gradient(180deg, #f4f9fc, #eef4fb); border: 1px solid #dde7f1;
box-shadow: 0 -6px 18px rgba(16, 24, 40, 0.05);
}
body.media-library-pick-mode #workflowMediaLibraryPickHint { flex: 1 1 220px; min-width: 0; font-size: 12.5px; color: #5a6b80; }
.workflow-media-library-pickbar-actions { display: flex; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; }
.workflow-media-library-pickbar-actions button { min-height: 36px; padding: 7px 16px; font-size: 13px; }
#workflowMediaLibraryPickConfirm:not(:disabled) { box-shadow: 0 6px 16px rgba(47, 109, 183, 0.26); }
body.media-library-pick-mode .workflow-media-library-preview { cursor: pointer; }
body.media-library-pick-mode .workflow-media-library-card.is-selected {
border-color: var(--accent, #2f6db7);
box-shadow: 0 0 0 3px rgba(47, 109, 183, 0.22), 0 18px 42px rgba(15, 23, 42, 0.1);
}
body.media-library-pick-mode .workflow-media-library-select {
width: 28px; height: 28px; font-size: 16px;
border-color: rgba(47, 109, 183, 0.5);
}
body.theme-dark.media-library-pick-mode .workflow-media-library-pickbar { background: rgba(17,26,41,.6); border-color: rgba(126,148,174,.24); }
body.theme-dark #workflowMediaLibraryPickHint { color: #a9bace; }
.tool-wm-targets { display: flex; gap: 8px; flex-wrap: wrap; align-content: flex-start; min-height: 78px; max-height: 168px; overflow-y: auto; padding: 4px; }
.tool-wm-target { position: relative; width: 72px; height: 72px; border-radius: 9px; overflow: hidden; border: 1px solid #e1e9f1; background: #f3f7fb; flex: 0 0 auto; }
.tool-wm-target img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tool-wm-target-remove { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 999px; background: rgba(15,23,42,.62); color: #fff; font-size: 14px; line-height: 18px; cursor: pointer; display: grid; place-items: center; }
.tool-wm-target-remove:hover { background: #ef4444; }
.tool-wm-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; max-height: 320px; overflow-y: auto; padding: 2px; }
.tool-wm-result { border: 1px solid #e1e9f1; border-radius: 10px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.tool-wm-result-img { background: #f3f7fb; display: grid; place-items: center; aspect-ratio: 1 / 1; }
.tool-wm-result-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tool-wm-result button { border: 0; border-top: 1px solid #eef2f7; background: #fff; color: var(--accent); font-size: 12px; padding: 6px; cursor: pointer; }
.tool-wm-result button:hover { background: #f4faf8; }
body.theme-dark .tool-wm-target { background: rgba(13,21,34,.7); border-color: rgba(126,148,174,.24); }
body.theme-dark .tool-wm-result { background: rgba(17,26,41,.55); border-color: rgba(126,148,174,.24); }
body.theme-dark .tool-wm-result-img { background: rgba(13,21,34,.7); }
body.theme-dark .tool-wm-result button { background: rgba(17,26,41,.55); border-top-color: rgba(126,148,174,.2); color: #9cc4ec; }
body:not(.auth-required) #appLayout.layout.tools-layout {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
overflow: visible !important;
}
body:not(.auth-required) #appLayout.layout.tools-layout .workbench > .tabs,
body:not(.auth-required) #appLayout.layout.tools-layout .monitor {
display: none !important;
}
body:not(.auth-required) #appLayout.layout.tools-layout .workbench {
display: block !important;
grid-column: 1 / -1 !important;
width: 100% !important;
min-width: 0 !important;
}
body:not(.auth-required) #appLayout.layout.tools-layout #toolsTab.tools-panel {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
}
body:not(.auth-required) #appLayout.layout.tools-layout .tools-hub {
max-width: 1180px;
width: 100%;
margin: 0 auto;
}
body:not(.auth-required) #appLayout.layout.tools-layout .tool-hub-grid {
max-width: 100% !important;
min-width: 0 !important;
}
body:not(.auth-required) #appLayout.layout.tools-layout .tool-hub-card {
max-width: 100% !important;
min-width: 0 !important;
justify-content: flex-start !important;
text-align: left !important;
}
body:not(.auth-required) #appLayout.layout.tools-layout .tool-hub-body {
flex: 1 1 auto !important;
min-width: 0 !important;
align-items: flex-start !important;
text-align: left !important;
}
body:not(.auth-required) #appLayout.layout.tools-layout .tool-hub-icon {
flex: 0 0 42px !important;
}
body:not(.auth-required) #appLayout.layout.tools-layout .tool-hub-card,
body:not(.auth-required) #appLayout.layout.tools-layout .tool-hub-name,
body:not(.auth-required) #appLayout.layout.tools-layout .tool-hub-desc {
white-space: normal !important;
word-break: break-word !important;
}
body:not(.auth-required) #appLayout.layout.tools-layout .tool-hub-name {
flex-wrap: wrap !important;
}
body:not(.auth-required) #appLayout.layout.tools-layout .tool-hub-desc {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
body:not(.mobile-ui):not(.auth-required) #appLayout.layout.tools-layout .tool-hub-grid {
grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)) !important;
gap: 14px !important;
align-items: stretch !important;
}
body:not(.auth-required) #appLayout.layout.tools-layout .tool-hub-card {
align-items: center !important;
padding: 14px 15px !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
}
body:not(.auth-required) #appLayout.layout.tools-layout .tools-hub {
gap: 26px !important;
}
body.mobile-ui:not(.auth-required) #appLayout.layout.tools-layout .tool-hub-grid {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
body.mobile-ui:not(.auth-required) #appLayout.layout.tools-layout .tool-hub-card {
padding: 12px 13px !important;
}
body.mobile-ui:not(.auth-required) #appLayout.layout.tools-layout .tool-hub-card.is-featured {
grid-column: auto;
min-height: 0 !important;
}
@media (prefers-reduced-motion: reduce) {
.tool-hub-card { transition: none; }
.tool-hub-card:hover { transform: none; }
}
@media (min-width: 821px) {
body:not(.auth-required):not(.sidebar-collapsed) .module-nav {
gap: 4px;
padding: 6px;
border: 1px solid var(--border-soft);
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, 0.5);
box-shadow: var(--shadow-soft);
}
body:not(.auth-required):not(.sidebar-collapsed) .module-tab {
border-color: transparent !important;
background: transparent !important;
box-shadow: none !important;
}
body:not(.auth-required):not(.sidebar-collapsed) .module-tab:hover {
background: rgba(47, 109, 183, 0.06) !important;
box-shadow: none !important;
}
body:not(.auth-required):not(.sidebar-collapsed) .module-tab.active {
background: var(--brand-gradient-soft) !important;
box-shadow: inset 0 0 0 1px rgba(79, 99, 221, 0.18), 0 6px 16px rgba(79, 99, 221, 0.14) !important;
}
body:not(.auth-required):not(.sidebar-collapsed) .module-tab.active::after {
content: "";
position: absolute;
left: 0;
top: 9px;
bottom: 9px;
width: 3px;
border-radius: 0 3px 3px 0;
background: var(--brand-gradient);
}
body:not(.auth-required):not(.sidebar-collapsed) .module-tab.active strong { color: var(--accent-strong); }
body:not(.theme-dark):not(.auth-required) .module-tab[data-module="batchModule"].active .ui-icon    { background: #e8f1fc; color: #2f6db7; border-color: rgba(47, 109, 183, 0.28); }
body:not(.theme-dark):not(.auth-required) .module-tab[data-module="videoModule"].active .ui-icon    { background: #ecebfd; color: #574bd4; border-color: rgba(87, 75, 212, 0.28); }
body:not(.theme-dark):not(.auth-required) .module-tab[data-module="audioModule"].active .ui-icon    { background: #f1ebfb; color: #7a59e0; border-color: rgba(122, 89, 224, 0.28); }
body:not(.theme-dark):not(.auth-required) .module-tab[data-module="textModule"].active .ui-icon     { background: #e6f3f6; color: #1f7a8c; border-color: rgba(31, 122, 140, 0.28); }
body:not(.theme-dark):not(.auth-required) .module-tab[data-module="workflowModule"].active .ui-icon { background: #fdf1e2; color: #d97a18; border-color: rgba(217, 122, 24, 0.28); }
body:not(.theme-dark):not(.auth-required) .module-tab[data-module="canvasModule"].active .ui-icon   { background: #eaeefb; color: #4554c8; border-color: rgba(69, 84, 200, 0.28); }
body:not(.theme-dark):not(.auth-required) .module-tab[data-module="toolsModule"].active .ui-icon    { background: #eef2f8; color: #475467; border-color: rgba(71, 84, 103, 0.28); }
body:not(.theme-dark):not(.auth-required) .module-tab[data-module="settingsModule"].active .ui-icon { background: #e9eef5; color: #344b6e; border-color: rgba(52, 75, 110, 0.28); }
}
@media (min-width: 821px) {
body.theme-dark:not(.auth-required):not(.sidebar-collapsed) .module-nav {
background: rgba(47, 109, 183, 0.07);
border-color: rgba(148, 163, 184, 0.16);
box-shadow: none;
}
body.theme-dark:not(.auth-required):not(.sidebar-collapsed) .module-tab:hover {
background: rgba(47, 109, 183, 0.12) !important;
}
body.theme-dark:not(.auth-required):not(.sidebar-collapsed) .module-tab.active {
background: rgba(47, 109, 183, 0.16) !important;
box-shadow: inset 0 0 0 1px rgba(90, 166, 232, 0.34) !important;
}
}
body:not(.auth-required) .account-modal-card .account-form-brand {
margin: -26px -24px 18px;
padding: 22px 24px 16px;
background: linear-gradient(135deg, rgba(47, 109, 183, 0.07), rgba(109, 94, 240, 0.05));
border-bottom: 1px solid rgba(47, 109, 183, 0.1);
}
body:not(.auth-required) .account-modal-card h2 {
position: relative;
padding-left: 13px;
}
body:not(.auth-required) .account-modal-card h2::before {
content: "";
position: absolute;
left: 0;
top: 3px;
bottom: 3px;
width: 4px;
border-radius: 3px;
background: var(--brand-gradient);
}
body.theme-dark:not(.auth-required) .account-modal-card .account-form-brand {
background: linear-gradient(135deg, rgba(47, 109, 183, 0.16), rgba(120, 112, 180, 0.14));
border-bottom-color: rgba(120, 112, 180, 0.22);
}
body:not(.auth-required) .account-modal .account-auth-meta {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
min-height: 24px !important;
margin: -2px 0 0 !important;
}
body:not(.auth-required) .account-modal .account-auth-meta[hidden],
body:not(.auth-required) .account-modal:not([data-mode="login"]) .account-auth-meta {
display: none !important;
}
body:not(.auth-required) .account-modal .account-auth-meta .account-remember-row {
display: inline-flex !important;
align-items: center !important;
flex: 0 1 auto !important;
gap: 8px !important;
min-width: 0 !important;
margin: 0 !important;
color: var(--muted) !important;
}
body:not(.auth-required) .account-modal .account-auth-meta .account-forgot-btn {
flex: 0 0 auto !important;
width: auto !important;
min-width: 0 !important;
min-height: 0 !important;
height: auto !important;
margin: 0 0 0 auto !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: var(--accent) !important;
box-shadow: none !important;
font-size: 12.5px !important;
font-weight: 800 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
}
body:not(.auth-required) .account-modal .account-auth-meta .account-forgot-btn[hidden],
body:not(.auth-required) .account-modal:not([data-mode="login"]) .account-forgot-btn,
body:not(.auth-required) .account-modal #accountCaptchaRow[hidden],
body:not(.auth-required) .account-modal #accountEmailCodeRow[hidden],
body:not(.auth-required) .account-modal #accountAgreeRow[hidden] {
display: none !important;
}
body:not(.auth-required) .account-modal .account-auth-meta .account-forgot-btn:hover {
text-decoration: underline !important;
}
body:not(.auth-required) .account-modal .account-modal-card .account-auth-actions {
margin: 0 !important;
}
body:not(.auth-required) .secondary:hover {
border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
color: var(--accent-strong);
}
.canvas-tool-pick-overlay {
position: absolute;
left: 12px;
right: 12px;
bottom: 12px;
display: grid;
place-items: center;
border-radius: var(--radius-lg);
background: rgba(238, 242, 247, 0.82);
backdrop-filter: blur(6px);
z-index: 6;
}
.canvas-tool-pick-overlay.over { background: rgba(234, 242, 251, 0.92); }
.canvas-tool-pick-card {
width: min(360px, 86%);
padding: 26px 24px;
display: grid;
justify-items: center;
gap: 8px;
text-align: center;
border: 1px dashed var(--border-strong);
border-radius: var(--radius-lg);
background: var(--panel);
box-shadow: var(--shadow-soft);
}
.canvas-tool-pick-ic {
display: grid;
place-items: center;
width: 48px;
height: 48px;
margin-bottom: 2px;
border-radius: 14px;
background: var(--brand-gradient-soft);
color: var(--accent);
}
.canvas-tool-pick-ic svg { width: 24px; height: 24px; }
.canvas-tool-pick-card strong { font-size: 15px; color: var(--text); }
.canvas-tool-pick-card p { margin: 0; font-size: 12.5px; color: var(--muted); }
.canvas-tool-pick-btns { display: flex; gap: 10px; margin-top: 8px; }
.canvas-tool-pick-btns button { min-height: 38px; padding: 0 18px; border-radius: 10px; }
.canvas-tool-pick-card small { color: var(--muted-2); font-size: 11.5px; }
body.theme-dark .canvas-tool-pick-overlay { background: rgba(11, 17, 29, 0.78); }
body.theme-dark .canvas-tool-pick-overlay.over { background: rgba(20, 30, 50, 0.86); }
body.theme-dark .canvas-tool-pick-card {
border-color: rgba(141, 149, 165, 0.4);
background: var(--panel);
}
body.theme-dark .canvas-tool-pick-ic { color: #9cc4ec; }
.tool-hub-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
padding: 12px 14px;
border: 1px solid var(--border-soft);
border-radius: var(--radius-lg);
background: var(--brand-gradient-soft);
}
.tool-hub-topbar strong { font-size: 14px; color: var(--text); }
.tool-hub-topbar small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.tool-hub-history-btn { flex: none; min-height: 36px; padding: 0 16px; border-radius: 10px; }
.tool-history-panel { width: min(620px, calc(100vw - 24px)); max-height: min(80vh, 760px); display: flex; flex-direction: column; }
.tool-history-list { overflow: auto; display: grid; gap: 10px; padding: 4px 2px; }
.tool-history-empty { padding: 40px 16px; text-align: center; color: var(--muted); font-size: 13px; }
.tool-history-item {
display: grid;
grid-template-columns: 64px minmax(0, 1fr);
gap: 12px;
padding: 10px;
border: 1px solid var(--border-soft);
border-radius: var(--radius-md);
background: var(--surface-2);
}
.tool-history-thumb {
width: 64px; height: 64px; border-radius: 10px; overflow: hidden;
display: grid; place-items: center; background: var(--surface-3); border: 1px solid var(--border-soft);
}
.tool-history-thumb img, .tool-history-thumb video { width: 100%; height: 100%; object-fit: cover; }
.tool-history-noimg { font-size: 11px; color: var(--muted-2); }
.tool-history-main { min-width: 0; display: grid; gap: 5px; align-content: start; }
.tool-history-row { display: flex; align-items: center; gap: 8px; }
.tool-history-row strong { font-size: 13px; color: var(--text); }
.tool-history-pt { font-size: 11px; font-weight: 800; color: var(--danger); }
.tool-history-when { margin-left: auto; font-size: 11px; color: var(--muted-2); }
.tool-history-text { margin: 0; font-size: 12px; line-height: 1.55; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tool-history-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.tool-history-acts .hl-copy { min-height: 28px; padding: 0 12px; font-size: 12px; }
.tool-history-acts .hl-copy.danger { color: var(--danger); }
body.theme-dark .tool-history-item { background: rgba(16, 18, 26, 0.6); border-color: rgba(141, 149, 165, 0.24); }
body.theme-dark .tool-history-thumb { background: rgba(16, 18, 26, 0.9); border-color: rgba(141, 149, 165, 0.24); }
.canvas-tool-pick-history {
margin-top: 4px;
padding: 4px 8px;
border: 0;
background: transparent;
color: var(--accent);
font-size: 12px;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
}
body.theme-dark .canvas-tool-pick-history { color: #9cc4ec; }
body.theme-dark:not(.auth-required) .infinite-card-run-progress-label {
background: rgba(9, 11, 16, 0.78);
color: #cbd5e1;
}
body.theme-dark:not(.auth-required) .watermark-stage-wrap {
background: rgba(16, 18, 26, 0.75);
border-color: var(--border);
}
body.theme-dark:not(.auth-required) .wm-inspector {
background: rgba(16, 18, 26, 0.85);
border-color: var(--border);
}
body.theme-dark:not(.auth-required) .wm-insp-head > b { color: #e7eef9; }
body.theme-dark:not(.auth-required) :is(.wm-slider, .wm-insp-label, .wm-stage-ctl, .wm-name-field, .wm-insp-textrow > label, .wm-grid > label) { color: #9fb0c8; }
body.theme-dark:not(.auth-required) .wm-slider > b { color: #cfe0ef; }
body.theme-dark:not(.auth-required) :is(.wm-toggle, .wm-layers-head, .wm-text-maker-title) { color: #c4d2e2; }
body.theme-dark:not(.auth-required) .wm-layer {
background: rgba(18, 21, 28, 0.72);
border-color: var(--border);
}
body.theme-dark:not(.auth-required) .wm-layer-meta > strong { color: #e7eef9; }
body.theme-dark:not(.auth-required) .wm-layer-icon {
background: rgba(32, 36, 46, 0.6);
border-color: var(--border);
color: #c4d2e2;
}
body.theme-dark:not(.auth-required) .wm-text-maker {
background: rgba(16, 18, 26, 0.8);
border-color: var(--border);
}
body.theme-dark:not(.auth-required) .wm-insp-group { border-top-color: var(--border); }
body.theme-dark:not(.auth-required) .wm-pos-grid > button {
background: rgba(32, 36, 46, 0.6);
border-color: var(--border);
}
body.theme-dark:not(.auth-required) .wm-pos-grid > button > i { background: #7e93ad; }
body.theme-dark:not(.auth-required) .wm-pos-grid > button.on { background: rgba(47, 109, 183, 0.28); border-color: var(--accent); }
body.theme-dark:not(.auth-required) .wm-pos-grid > button.on > i,
body.theme-dark:not(.auth-required) .wm-pos-grid > button:hover > i { background: #9cc4ec; }
body.theme-dark:not(.auth-required) .wm-layer-empty { color: var(--muted); border-color: var(--border); }
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-qr,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-qr {
background: rgba(9, 11, 16, 0.82) !important;
border-color: rgba(141, 149, 165, 0.36) !important;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28) !important;
}
body.theme-dark:not(.auth-required) .infinite-card-inline-panel .infinite-card-qr-trigger {
color: #e7eef9;
}
body.theme-dark:not(.auth-required) .infinite-card-inline-panel .infinite-card-qr-trigger .infinite-card-qr-dot,
body.theme-dark:not(.auth-required) .infinite-card-inline-panel .infinite-card-qr-caret {
color: #8aa0bb;
}
body.theme-dark:not(.auth-required) .infinite-card-inline-panel .infinite-card-qr-pop {
background: rgba(18, 21, 29, 0.99);
border-color: rgba(141, 149, 165, 0.34);
box-shadow: 0 22px 60px rgba(0, 0, 0, 0.5);
}
body.theme-dark:not(.auth-required) .infinite-card-inline-panel .infinite-card-qr-sec-label {
color: #9fb2c8;
}
body.theme-dark:not(.auth-required) .infinite-card-inline-panel .infinite-card-qr-seg {
background: rgba(9, 11, 16, 0.66);
}
body.theme-dark:not(.auth-required) .infinite-card-inline-panel .infinite-card-qr-seg [data-qr-set] {
color: #c4d3e6;
}
body.theme-dark:not(.auth-required) .infinite-card-inline-panel .infinite-card-qr-seg [data-qr-set].active {
background: rgba(47, 109, 183, 0.32);
color: #d7e8fb;
box-shadow: none;
}
body.theme-dark:not(.auth-required) .infinite-card-inline-panel .infinite-card-qr-grid [data-qr-set] {
background: rgba(9, 11, 16, 0.6);
color: #8aa0bb;
}
body.theme-dark:not(.auth-required) .infinite-card-inline-panel .infinite-card-qr-grid [data-qr-set]:hover {
background: rgba(47, 109, 183, 0.2);
}
body.theme-dark:not(.auth-required) .infinite-card-inline-panel .infinite-card-qr-grid [data-qr-set].active {
border-color: #5aa6e8;
background: rgba(47, 109, 183, 0.3);
color: #d7e8fb;
}
body.theme-dark:not(.auth-required) .infinite-card-inline-panel .infinite-card-qr-grid small {
color: #9fb2c8;
}
body.theme-dark:not(.auth-required) .infinite-card-inline-panel .infinite-card-qr-grid [data-qr-set].active small {
color: #d7e8fb;
}
body.theme-dark:not(.auth-required) .infinite-card-inline-panel .infinite-card-cs-trigger {
background: rgba(9, 11, 16, 0.86);
border-color: rgba(141, 149, 165, 0.36);
color: #e7eef9;
}
body.theme-dark:not(.auth-required) .infinite-card-inline-panel .infinite-card-cs-trigger:hover {
border-color: rgba(90, 166, 232, 0.6);
}
body.theme-dark:not(.auth-required) .infinite-card-inline-panel .infinite-card-cs.cs-open .infinite-card-cs-trigger {
border-color: #5aa6e8;
box-shadow: 0 0 0 2px rgba(90, 166, 232, 0.28);
}
body.theme-dark:not(.auth-required) .infinite-card-inline-panel .infinite-card-cs-caret {
color: #8aa0bb;
}
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field .infinite-card-cs-trigger,
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field .infinite-card-cs-trigger {
background: transparent;
border-color: transparent;
box-shadow: none;
}
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field:has(.infinite-card-cs.cs-open),
body.theme-dark:not(.auth-required) .canvas-studio-shell .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field:has(.infinite-card-cs.cs-open) {
border-color: rgba(90, 166, 232, 0.6) !important;
box-shadow: 0 0 0 2px rgba(90, 166, 232, 0.24) !important;
}
body.theme-dark:not(.auth-required) .infinite-card-inline-panel .infinite-card-cs-pop {
background: rgba(18, 21, 29, 0.99);
border-color: rgba(141, 149, 165, 0.34);
box-shadow: 0 22px 60px rgba(0, 0, 0, 0.5);
}
body.theme-dark:not(.auth-required) .infinite-card-inline-panel .infinite-card-cs-opt {
color: #cfe0f3;
}
body.theme-dark:not(.auth-required) .infinite-card-inline-panel .infinite-card-cs-opt:hover {
background: rgba(90, 166, 232, 0.16);
}
body.theme-dark:not(.auth-required) .infinite-card-inline-panel .infinite-card-cs-opt.active {
background: rgba(47, 109, 183, 0.34);
color: #e6f1fd;
}
body.theme-dark:not(.auth-required) .infinite-card .infinite-card-field {
color: #a9b8cc;
}
body.theme-dark:not(.auth-required) .infinite-card .infinite-card-qr-trigger {
color: #e7eef9;
}
body.theme-dark:not(.auth-required) .infinite-card .infinite-card-qr-trigger .infinite-card-qr-dot,
body.theme-dark:not(.auth-required) .infinite-card .infinite-card-qr-caret {
color: #8aa0bb;
}
body.theme-dark:not(.auth-required) .infinite-card .infinite-card-qr-pop {
background: #252a34;
border-color: #454c5c;
box-shadow: 0 22px 60px rgba(0, 0, 0, 0.5);
}
body.theme-dark:not(.auth-required) .infinite-card .infinite-card-qr-sec-label {
color: #9fb2c8;
}
body.theme-dark:not(.auth-required) .infinite-card .infinite-card-qr-seg {
background: #1b1f28;
}
body.theme-dark:not(.auth-required) .infinite-card .infinite-card-qr-seg [data-qr-set] {
color: #c4d3e6;
}
body.theme-dark:not(.auth-required) .infinite-card .infinite-card-qr-seg [data-qr-set].active {
background: rgba(47, 109, 183, 0.32);
color: #d7e8fb;
box-shadow: none;
}
body.theme-dark:not(.auth-required) .infinite-card .infinite-card-qr-grid [data-qr-set] {
background: #1b1f28;
border-color: #454c5c;
color: #8aa0bb;
}
body.theme-dark:not(.auth-required) .infinite-card .infinite-card-qr-grid [data-qr-set]:hover {
background: rgba(47, 109, 183, 0.2);
}
body.theme-dark:not(.auth-required) .infinite-card .infinite-card-qr-grid [data-qr-set].active {
border-color: #5aa6e8;
background: rgba(47, 109, 183, 0.3);
color: #d7e8fb;
}
body.theme-dark:not(.auth-required) .infinite-card .infinite-card-qr-grid small {
color: #9fb2c8;
}
body.theme-dark:not(.auth-required) .infinite-card .infinite-card-qr-grid [data-qr-set].active small {
color: #d7e8fb;
}
body.theme-dark:not(.auth-required) .infinite-card .infinite-card-cs-trigger {
background: #1b1f28;
border-color: #454c5c;
color: #e7eef9;
}
body.theme-dark:not(.auth-required) .infinite-card .infinite-card-cs-trigger:hover {
border-color: rgba(90, 166, 232, 0.6);
}
body.theme-dark:not(.auth-required) .infinite-card .infinite-card-cs.cs-open .infinite-card-cs-trigger {
border-color: #5aa6e8;
box-shadow: 0 0 0 2px rgba(90, 166, 232, 0.28);
}
body.theme-dark:not(.auth-required) .infinite-card .infinite-card-cs-caret {
color: #8aa0bb;
}
body.theme-dark:not(.auth-required) .infinite-card .infinite-card-cs-pop {
background: #252a34;
border-color: #454c5c;
box-shadow: 0 22px 60px rgba(0, 0, 0, 0.5);
}
body.theme-dark:not(.auth-required) .infinite-card .infinite-card-cs-opt {
color: #cfe0f3;
}
body.theme-dark:not(.auth-required) .infinite-card .infinite-card-cs-opt:hover {
background: rgba(90, 166, 232, 0.16);
}
body.theme-dark:not(.auth-required) .infinite-card .infinite-card-cs-opt.active {
background: rgba(47, 109, 183, 0.34);
color: #e6f1fd;
}
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card:not([data-canvas-type="section"]) .infinite-card-head,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card:not([data-canvas-type="section"]) .infinite-card-head strong,
body.theme-dark:not(.auth-required) .layout.canvas-layout .infinite-card:not([data-canvas-type="section"]) .infinite-card-badge {
color: color-mix(in srgb, var(--card-accent, #5aa6e8) 62%, #dbe7f5);
}
.infinite-card-num {
position: relative;
display: flex;
align-items: center;
width: 100%;
min-width: 0;
}
.infinite-card-num-input {
flex: 1 1 auto;
min-width: 0;
width: 100%;
-moz-appearance: textfield;
appearance: textfield;
}
.infinite-card-num-input::-webkit-outer-spin-button,
.infinite-card-num-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.infinite-card-num-steps {
display: flex;
flex-direction: column;
flex: 0 0 auto;
gap: 1px;
margin-left: 3px;
}
.infinite-card-num-step {
display: grid;
place-items: center;
width: 15px;
height: 12px;
border-radius: 4px;
color: #8497ab;
cursor: pointer;
user-select: none;
transition: background 120ms ease, color 120ms ease;
}
.infinite-card-num-step:hover {
background: rgba(47, 109, 183, 0.12);
color: var(--accent);
}
.infinite-card-num-step:active {
transform: translateY(0.5px);
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field .infinite-card-num {
height: 100%;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field .infinite-card-num-input {
height: 100%;
border: 0;
background: transparent;
font-weight: 700;
padding: 0;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field:has([data-canvas-config-key="count"]) {
width: 42px;
}
.infinite-card-slider {
--slider-accent: var(--card-accent, var(--accent, #2f6db7));
--slider-pos: 0%;
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: minmax(0, 1fr) auto;
align-items: center;
column-gap: 7px;
row-gap: 1px;
width: 100%;
height: 100%;
min-width: 0;
}
.infinite-card-slider-input {
grid-column: 1;
grid-row: 1;
width: 100%;
min-width: 0;
height: 16px;
margin: 0;
padding: 0 !important;
appearance: none;
-webkit-appearance: none;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
cursor: pointer;
}
.infinite-card-slider-input:disabled {
cursor: default;
}
.infinite-card-slider-input::-webkit-slider-runnable-track {
height: 4px;
border-radius: 999px;
background: linear-gradient(90deg, var(--slider-accent) 0 var(--slider-pos), rgba(132, 151, 171, 0.28) var(--slider-pos) 100%);
}
.infinite-card-slider-input::-webkit-slider-thumb {
width: 14px;
height: 14px;
margin-top: -5px;
border: 2px solid var(--slider-accent);
border-radius: 999px;
background: #fff;
box-shadow: 0 2px 7px rgba(31, 58, 91, 0.2);
-webkit-appearance: none;
}
.infinite-card-slider-input::-moz-range-track {
height: 4px;
border-radius: 999px;
background: rgba(132, 151, 171, 0.28);
}
.infinite-card-slider-input::-moz-range-progress {
height: 4px;
border-radius: 999px;
background: var(--slider-accent);
}
.infinite-card-slider-input::-moz-range-thumb {
width: 12px;
height: 12px;
border: 2px solid var(--slider-accent);
border-radius: 999px;
background: #fff;
box-shadow: 0 2px 7px rgba(31, 58, 91, 0.2);
}
.infinite-card-slider.fixed .infinite-card-slider-input::-webkit-slider-thumb {
opacity: 0;
}
.infinite-card-slider.fixed .infinite-card-slider-input::-moz-range-thumb {
opacity: 0;
}
.infinite-card-slider-value {
grid-column: 2;
grid-row: 1;
min-width: 26px;
color: #2f455f;
font-size: 11px;
font-weight: 850;
line-height: 1;
text-align: right;
white-space: nowrap;
}
.infinite-card-slider-ticks {
grid-column: 1 / -1;
grid-row: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 4px;
min-width: 0;
color: #8ba0b6;
font-size: 9px;
font-style: normal;
font-weight: 760;
line-height: 1;
pointer-events: none;
}
.infinite-card-slider-ticks i {
min-width: 0;
overflow: hidden;
color: inherit;
font-style: normal;
text-overflow: ellipsis;
white-space: nowrap;
}
.infinite-card-slider-ticks i.active {
color: var(--slider-accent);
font-weight: 900;
}
.infinite-card-slider.fixed .infinite-card-slider-ticks {
justify-content: flex-end;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-qr.video-params,
body:not(.auth-required) .canvas-studio-shell .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-qr.video-params {
width: 100px;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run):has(.infinite-card-qr.video-params) .infinite-card-field:has([data-canvas-config-key="count"]),
body:not(.auth-required) .canvas-studio-shell .infinite-card-inline-panel:has(.infinite-card-run):has(.infinite-card-qr.video-params) .infinite-card-field:has([data-canvas-config-key="count"]) {
width: 42px;
}
.infinite-card-qr.video-params .infinite-card-qr-pop {
width: 360px;
max-width: min(88vw, 420px);
}
.infinite-card-qr-duration-sec .infinite-card-slider {
grid-template-columns: minmax(0, 1fr) 34px;
grid-template-rows: 18px auto;
min-height: 42px;
height: auto;
padding: 8px 10px 7px;
border-radius: 11px;
background: #f5f8fb;
}
.infinite-card-qr-duration-sec .infinite-card-slider.fixed {
grid-template-rows: 18px;
}
.infinite-card-qr-duration-sec .infinite-card-slider-input {
height: 18px;
}
.infinite-card-qr-duration-sec .infinite-card-slider-value {
min-width: 30px;
font-size: 12px;
}
.infinite-card-qr-duration-sec .infinite-card-slider-ticks {
padding-top: 1px;
font-size: 10px;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field:has([data-canvas-config-key="count"]) .infinite-card-cs-pop,
body:not(.auth-required) .canvas-studio-shell .infinite-card-inline-panel:has(.infinite-card-run) .infinite-card-field:has([data-canvas-config-key="count"]) .infinite-card-cs-pop {
min-width: 112px;
}
body.theme-dark:not(.auth-required) .infinite-card-inline-panel .infinite-card-slider-value {
color: #dbe8f7;
}
body.theme-dark:not(.auth-required) .infinite-card-inline-panel .infinite-card-slider-ticks {
color: #8ea2ba;
}
body.theme-dark:not(.auth-required) .infinite-card-inline-panel .infinite-card-slider-input::-webkit-slider-runnable-track {
background: linear-gradient(90deg, #5aa6e8 0 var(--slider-pos), rgba(141, 149, 165, 0.3) var(--slider-pos) 100%);
}
body.theme-dark:not(.auth-required) .infinite-card-inline-panel .infinite-card-slider-input::-moz-range-track {
background: rgba(141, 149, 165, 0.3);
}
body.theme-dark:not(.auth-required) .infinite-card-inline-panel .infinite-card-slider-input::-moz-range-progress {
background: #5aa6e8;
}
body.theme-dark:not(.auth-required) .infinite-card-inline-panel .infinite-card-slider-input::-webkit-slider-thumb {
border-color: #5aa6e8;
background: #111827;
}
body.theme-dark:not(.auth-required) .infinite-card-inline-panel .infinite-card-slider-input::-moz-range-thumb {
border-color: #5aa6e8;
background: #111827;
}
body.theme-dark:not(.auth-required) .infinite-card-inline-panel .infinite-card-num-step {
color: #8aa0bb;
}
body.theme-dark:not(.auth-required) .infinite-card-inline-panel .infinite-card-num-step:hover {
background: rgba(90, 166, 232, 0.18);
color: #cfe0f3;
}
body:not(.auth-required) :is(#workflowProjectModal, #canvasProjectModal) .workflow-project-panel {
--workflow-project-card-min: 220px;
width: min(1120px, calc(100vw - (var(--modal-edge, 14px) * 2))) !important;
width: min(1120px, calc(100dvw - (var(--modal-edge, 14px) * 2))) !important;
height: min(780px, calc(100vh - (var(--modal-edge, 14px) * 2))) !important;
height: min(780px, calc(100dvh - (var(--modal-edge, 14px) * 2))) !important;
max-height: min(780px, calc(100vh - (var(--modal-edge, 14px) * 2))) !important;
max-height: min(780px, calc(100dvh - (var(--modal-edge, 14px) * 2))) !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
body:not(.auth-required) :is(#workflowProjectModal, #canvasProjectModal) .modal-head {
flex: 0 0 auto !important;
}
body:not(.auth-required) :is(#workflowProjectModal, #canvasProjectModal) .workflow-project-tools {
flex: 0 0 auto !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) repeat(3, minmax(92px, auto)) !important;
align-items: stretch !important;
gap: 8px !important;
margin: 0 0 12px !important;
}
body:not(.auth-required) #workflowProjectModal .workflow-project-tools {
grid-template-columns: minmax(0, 1fr) repeat(2, minmax(96px, auto)) !important;
}
body:not(.auth-required) :is(#workflowProjectModal, #canvasProjectModal) .workflow-project-tools > input[type="search"] {
width: 100% !important;
min-width: 0 !important;
grid-column: auto !important;
}
body:not(.auth-required) :is(#workflowProjectModal, #canvasProjectModal) .workflow-project-tools > button {
width: 100% !important;
min-width: 0 !important;
height: 36px !important;
}
body:not(.auth-required) :is(#workflowProjectModal, #canvasProjectModal) :is(.workflow-project-list, .canvas-project-list) {
flex: 1 1 auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: auto !important;
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(var(--workflow-project-card-min, 220px), 1fr)) !important;
grid-auto-rows: max-content !important;
align-items: start !important;
align-content: start !important;
justify-content: stretch !important;
gap: 14px !important;
padding: 2px 4px 14px 2px !important;
}
body:not(.auth-required) #canvasProjectModal .canvas-project-list {
grid-auto-rows: max-content !important;
}
body:not(.auth-required) :is(#workflowProjectModal, #canvasProjectModal) :is(.workflow-project-card, .canvas-project-card) {
width: 100% !important;
height: auto !important;
max-width: none !important;
min-width: 0 !important;
min-height: 0 !important;
align-self: start !important;
display: grid !important;
grid-template-rows: auto auto auto !important;
gap: 10px !important;
padding: 10px !important;
overflow: hidden !important;
border-radius: 14px !important;
}
body:not(.auth-required) :is(#workflowProjectModal, #canvasProjectModal) .canvas-project-preview {
width: 100% !important;
height: auto !important;
min-height: 0 !important;
aspect-ratio: 16 / 9 !important;
border-radius: 11px !important;
}
body:not(.auth-required) :is(#workflowProjectModal, #canvasProjectModal) .workflow-project-main {
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
overflow: hidden !important;
}
body:not(.auth-required) :is(#workflowProjectModal, #canvasProjectModal) .workflow-project-title-row {
min-height: 22px !important;
}
body:not(.auth-required) :is(#workflowProjectModal, #canvasProjectModal) .workflow-project-title-row strong {
line-height: 1.35 !important;
}
body:not(.auth-required) :is(#workflowProjectModal, #canvasProjectModal) .workflow-project-card p,
body:not(.auth-required) :is(#workflowProjectModal, #canvasProjectModal) .canvas-project-main p {
margin: 0 !important;
color: var(--muted) !important;
font-size: 12px !important;
line-height: 1.45 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
body:not(.auth-required) :is(#workflowProjectModal, #canvasProjectModal) .workflow-project-card small,
body:not(.auth-required) :is(#workflowProjectModal, #canvasProjectModal) .canvas-project-main small {
color: #667085 !important;
font-size: 12px !important;
line-height: 1.35 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
body:not(.auth-required) :is(#workflowProjectModal, #canvasProjectModal) .project-card-foot {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
min-width: 0 !important;
margin-top: 0 !important;
}
body:not(.auth-required) :is(#workflowProjectModal, #canvasProjectModal) :is(.workflow-project-actions, .canvas-project-actions) {
display: inline-flex !important;
align-items: center !important;
gap: 2px !important;
flex: none !important;
}
body:not(.auth-required) :is(#workflowProjectModal, #canvasProjectModal) button.project-icon-btn {
width: 28px !important;
min-width: 28px !important;
max-width: 28px !important;
height: 28px !important;
min-height: 28px !important;
max-height: 28px !important;
padding: 0 !important;
border-radius: 8px !important;
}
@media (max-width: 980px), (max-height: 760px) {
body:not(.auth-required) :is(#workflowProjectModal, #canvasProjectModal) .workflow-project-panel {
--workflow-project-card-min: 204px;
height: calc(100vh - (var(--modal-edge, 12px) * 2)) !important;
height: calc(100dvh - (var(--modal-edge, 12px) * 2)) !important;
max-height: calc(100vh - (var(--modal-edge, 12px) * 2)) !important;
max-height: calc(100dvh - (var(--modal-edge, 12px) * 2)) !important;
border-radius: 14px !important;
padding: 14px !important;
}
}
body:not(.auth-required) :is(#workflowProjectModal, #canvasProjectModal) .workflow-project-empty {
grid-column: 1 / -1 !important;
align-self: start !important;
justify-self: stretch !important;
min-height: 180px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
padding: 40px 18px !important;
text-align: center !important;
}
body:not(.auth-required) :is(#presetCaseModal, #presetCaseDetailModal, #communityGalleryModal) .hl-case-panel {
width: min(1360px, calc(100vw - 44px));
height: min(90vh, 960px);
max-height: min(90vh, 960px);
min-height: min(640px, calc(100vh - 42px));
display: flex;
flex-direction: column;
overflow: hidden;
}
body:not(.auth-required) #communityGalleryModal .hl-case-panel.hl-panel-upload {
width: min(1000px, calc(100vw - 44px));
height: auto;
min-height: 0;
max-height: min(88vh, 880px);
padding: 0;
border-radius: 16px;
}
body:not(.auth-required) #communityGalleryModal .hl-case-panel.hl-panel-upload.is-single {
width: min(720px, calc(100vw - 44px));
}
body:not(.auth-required) :is(#presetCaseModal, #presetCaseDetailModal, #communityGalleryModal).modal-mask:not([hidden]) {
z-index: var(--z-modal-priority);
opacity: 1;
}
body:not(.auth-required) :is(#presetCaseModal, #presetCaseDetailModal, #communityGalleryModal).modal-mask:not([hidden]) .hl-case-panel {
animation: none;
opacity: 1;
transform: none;
}
body:not(.auth-required) :is(#presetCaseModal, #presetCaseDetailModal, #communityGalleryModal) .hl-head,
body:not(.auth-required) :is(#presetCaseModal, #presetCaseDetailModal, #communityGalleryModal) .hl-toolbar {
flex: 0 0 auto;
}
body:not(.auth-required) :is(#presetCaseModal, #communityGalleryModal) .hl-list,
body:not(.auth-required) :is(#presetCaseDetailModal, #communityGalleryModal) .hl-detail-wrap,
body:not(.auth-required) #communityGalleryModal .hl-form {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
}
body:not(.auth-required) :is(#presetCaseModal, #communityGalleryModal) .hl-grid {
grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
gap: 20px;
grid-auto-rows: auto;
align-items: start;
align-content: start;
}
body:not(.auth-required) :is(#presetCaseModal, #communityGalleryModal) .hl-grid.is-empty {
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: minmax(118px, auto);
align-content: start;
}
body:not(.auth-required) :is(#presetCaseModal, #communityGalleryModal) .hl-empty {
grid-column: 1 / -1;
align-self: start;
text-align: left;
padding: 16px 2px;
}
body:not(.auth-required) :is(#presetCaseModal, #communityGalleryModal) .hl-card {
height: auto;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
body:not(.auth-required) :is(#presetCaseModal, #communityGalleryModal) .hl-grid > .hl-card {
animation: none;
opacity: 1;
transform: none;
}
body:not(.auth-required) :is(#presetCaseModal, #communityGalleryModal) .hl-card-prev {
aspect-ratio: 1 / 1;
min-height: 0;
}
body:not(.auth-required) :is(#presetCaseModal, #communityGalleryModal) .hl-card-body {
min-height: 0;
display: flex;
flex-direction: column;
flex: 0 0 auto;
overflow: hidden;
}
body:not(.auth-required) :is(#presetCaseModal, #communityGalleryModal) .hl-card-title,
body:not(.auth-required) :is(#presetCaseModal, #communityGalleryModal) .hl-source,
body:not(.auth-required) :is(#presetCaseModal, #communityGalleryModal) .hl-flow b {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body:not(.auth-required) :is(#presetCaseModal, #communityGalleryModal) .hl-tags,
body:not(.auth-required) :is(#presetCaseModal, #communityGalleryModal) .hl-meta {
max-height: 44px;
overflow: hidden;
}
body:not(.auth-required) :is(#presetCaseModal, #communityGalleryModal) .hl-actions {
margin-top: 4px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px;
}
body:not(.auth-required) :is(#presetCaseModal, #communityGalleryModal) .hl-actions button {
min-width: 0;
width: 100%;
}
@media (max-width: 720px) {
body:not(.auth-required) :is(#workflowProjectModal, #canvasProjectModal) .workflow-project-panel,
body:not(.auth-required) :is(#presetCaseModal, #presetCaseDetailModal, #communityGalleryModal) .hl-case-panel {
width: calc(100vw - 16px) !important;
height: calc(100dvh - 16px) !important;
max-height: calc(100dvh - 16px) !important;
min-height: 0 !important;
}
body:not(.auth-required) :is(#presetCaseModal, #presetCaseDetailModal, #communityGalleryModal, #workflowProjectModal, #canvasProjectModal).modal-mask:not([hidden]) {
padding: 8px !important;
align-items: center !important;
}
body:not(.auth-required) :is(#workflowProjectModal, #canvasProjectModal) .workflow-project-tools {
grid-template-columns: 1fr 1fr !important;
}
body:not(.auth-required) :is(#workflowProjectModal, #canvasProjectModal) .workflow-project-tools > input[type="search"] {
grid-column: 1 / -1 !important;
}
body:not(.auth-required) :is(#workflowProjectModal, #canvasProjectModal) :is(.workflow-project-list, .canvas-project-list) {
grid-template-columns: minmax(0, 1fr) !important;
grid-auto-rows: max-content !important;
align-items: start !important;
}
body:not(.auth-required) #canvasProjectModal .canvas-project-list {
grid-auto-rows: max-content !important;
}
}
textarea.huiliu-resizable-textarea {
--textarea-resize-grip-color: rgba(47, 109, 183, 0.28);
resize: vertical !important;
overflow: auto !important;
max-height: min(82dvh, 920px) !important;
scrollbar-gutter: stable;
padding-bottom: max(var(--control-padding-y, 10px), 14px) !important;
background-image:
linear-gradient(135deg, transparent 52%, var(--textarea-resize-grip-color) 52%, var(--textarea-resize-grip-color) 58%, transparent 58%),
linear-gradient(135deg, transparent 68%, var(--textarea-resize-grip-color) 68%, var(--textarea-resize-grip-color) 74%, transparent 74%) !important;
background-repeat: no-repeat !important;
background-size: 16px 16px !important;
background-position: right 6px bottom 5px !important;
}
textarea.huiliu-resizable-textarea.is-textarea-resizing {
cursor: ns-resize !important;
user-select: none;
}
body.textarea-resizing,
body.textarea-resizing * {
cursor: ns-resize !important;
user-select: none !important;
}
body.mobile-ui textarea.huiliu-resizable-textarea {
max-height: calc(100dvh - var(--mobile-topbar-offset, 92px) - 18px) !important;
padding-bottom: 18px !important;
}
body.theme-dark textarea.huiliu-resizable-textarea {
--textarea-resize-grip-color: rgba(156, 196, 236, 0.34);
}
body.theme-dark:not(.auth-required) #appLayout.layout.canvas-layout .canvas-ai-composer {
border-color: rgba(99, 156, 222, 0.24);
background: rgba(14, 19, 29, 0.94);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
}
body.theme-dark:not(.auth-required) #appLayout.layout.canvas-layout .canvas-composer-head {
border-bottom-color: rgba(99, 156, 222, 0.18);
}
body.theme-dark:not(.auth-required) #appLayout.layout.canvas-layout .canvas-composer-head strong,
body.theme-dark:not(.auth-required) #appLayout.layout.canvas-layout .canvas-prompt-box {
color: #e7eef9;
}
body.theme-dark:not(.auth-required) #appLayout.layout.canvas-layout .canvas-composer-head span,
body.theme-dark:not(.auth-required) #appLayout.layout.canvas-layout .canvas-composer-head small,
body.theme-dark:not(.auth-required) #appLayout.layout.canvas-layout .canvas-generate-options label,
body.theme-dark:not(.auth-required) #appLayout.layout.canvas-layout .canvas-composer-result,
body.theme-dark:not(.auth-required) #appLayout.layout.canvas-layout .canvas-composer-ref-drop > span {
color: #9fb0c7;
}
body.theme-dark:not(.auth-required) #appLayout.layout.canvas-layout .canvas-composer-ref-drop,
body.theme-dark:not(.auth-required) #appLayout.layout.canvas-layout .canvas-composer-result {
border-color: rgba(99, 156, 222, 0.22);
background: rgba(10, 16, 27, 0.88);
}
body.theme-dark:not(.auth-required) #appLayout.layout.canvas-layout .canvas-composer-ref-empty {
border-color: rgba(99, 156, 222, 0.28);
color: #8ea4bd;
}
body.theme-dark:not(.auth-required) #appLayout.layout.canvas-layout .canvas-composer-ref {
border-color: rgba(99, 156, 222, 0.26);
background: rgba(18, 28, 44, 0.96);
}
body.theme-dark:not(.auth-required) #appLayout.layout.canvas-layout .canvas-prompt-box textarea,
body.theme-dark:not(.auth-required) #appLayout.layout.canvas-layout .canvas-generate-options :is(input, select),
body.theme-dark:not(.auth-required) #appLayout.layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > textarea {
border-color: rgba(99, 156, 222, 0.34) !important;
background: rgba(8, 13, 23, 0.94) !important;
background-image: none !important;
color: #e7eef9 !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}
body.theme-dark:not(.auth-required) #appLayout.layout.canvas-layout .canvas-prompt-box textarea::placeholder,
body.theme-dark:not(.auth-required) #appLayout.layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > textarea::placeholder {
color: #7f93ae;
}
body.theme-dark:not(.auth-required) #appLayout.layout.canvas-layout .canvas-prompt-box textarea:focus,
body.theme-dark:not(.auth-required) #appLayout.layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > textarea:focus {
border-color: rgba(125, 183, 255, 0.72) !important;
box-shadow: 0 0 0 3px rgba(90, 166, 232, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
body.theme-dark:not(.auth-required) #appLayout.layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .infinite-inline-prompt-expand {
border-color: rgba(99, 156, 222, 0.3);
background: rgba(18, 28, 44, 0.9);
color: #9cc4ec;
}
body.theme-dark:not(.auth-required) #appLayout.layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .infinite-inline-prompt-expand:hover {
border-color: rgba(125, 183, 255, 0.55);
background: rgba(32, 54, 84, 0.92);
color: #dbeafe;
}
body.theme-dark:not(.auth-required) .app-more-panel {
width: min(252px, calc(100vw - 24px));
padding: 7px;
border-color: rgba(99, 156, 222, 0.24);
background: rgba(10, 15, 24, 0.96);
box-shadow: 0 22px 54px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
body.theme-dark:not(.auth-required) .app-more-id {
padding: 8px;
border: 1px solid rgba(99, 156, 222, 0.16);
background: rgba(17, 31, 51, 0.84);
}
body.theme-dark:not(.auth-required) .app-more-id:hover,
body.theme-dark:not(.auth-required) .app-more-item:hover {
background: rgba(36, 68, 106, 0.72);
}
body.theme-dark:not(.auth-required) .app-more-item {
min-height: 34px !important;
padding: 6px 8px !important;
color: #dce7f5;
}
body.theme-dark:not(.auth-required) .app-more-avatar {
width: 30px;
height: 30px;
border-radius: 9px;
}
body.theme-dark:not(.auth-required) .app-more-divider {
margin: 7px 5px;
background: rgba(99, 156, 222, 0.16);
}
body:not(.auth-required) #appLayout .account-page-panel,
body:not(.auth-required) .account-page-panel {
min-height: 100%;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: #ffffff;
box-shadow: none !important;
overflow: auto;
}
body:not(.auth-required) .account-page {
width: 100%;
min-height: 100%;
padding: 0;
}
body:not(.auth-required) .account-page-shell {
width: 100%;
max-width: none;
min-height: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
body:not(.auth-required) .account-page-hero {
width: 100%;
min-width: 0;
box-sizing: border-box;
padding: 28px 32px 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
body:not(.auth-required) .account-page-main {
flex: 1 1 auto;
width: 100%;
min-width: 0;
box-sizing: border-box;
margin-top: 18px;
padding: 18px 32px 32px;
border: 0;
border-top: 1px solid var(--border-soft);
border-radius: 0;
background: transparent;
box-shadow: none;
}
body:not(.auth-required) .account-page-editcard {
min-height: 100%;
margin: 0;
padding: 28px 32px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
@media (max-width: 760px) {
body:not(.auth-required) #appLayout .account-page-panel,
body:not(.auth-required) .account-page-panel,
body:not(.auth-required) .account-page,
body:not(.auth-required) .account-page-shell {
padding: 0 !important;
border-radius: 0 !important;
}
body:not(.auth-required) .account-page-hero {
padding: 16px 14px 0;
}
body:not(.auth-required) .account-page-main,
body:not(.auth-required) .account-page-editcard {
padding: 14px;
}
}
body.theme-dark:not(.auth-required) .account-page-panel {
border: 0 !important;
border-radius: 0 !important;
background: #0b111d !important;
box-shadow: none !important;
}
body.theme-dark:not(.auth-required) .account-page {
padding: 0;
}
body.theme-dark:not(.auth-required) .account-page-shell {
border: 0;
background: transparent;
box-shadow: none;
}
body.theme-dark:not(.auth-required) .account-page-hero,
body.theme-dark:not(.auth-required) .account-page-main,
body.theme-dark:not(.auth-required) .account-page-editcard,
body.theme-dark:not(.auth-required) .account-projects-panel,
body.theme-dark:not(.auth-required) .account-resource-panel {
border-color: transparent !important;
background: transparent !important;
box-shadow: none !important;
}
body.theme-dark:not(.auth-required) .account-page-stats {
border-top-color: rgba(99, 156, 222, 0.18);
background: transparent !important;
}
body.theme-dark:not(.auth-required) .account-page-stat {
border-color: rgba(99, 156, 222, 0.16);
background: transparent !important;
}
body.theme-dark:not(.auth-required) .account-page-project,
body.theme-dark:not(.auth-required) .account-card {
border-color: rgba(99, 156, 222, 0.18);
background: rgba(10, 18, 32, 0.92);
}
body.theme-dark:not(.auth-required) .account-page-project:hover,
body.theme-dark:not(.auth-required) .account-card:hover {
border-color: rgba(125, 183, 255, 0.32);
background: rgba(15, 27, 46, 0.96);
}
.monitor .monitor-body {
display: block;
overflow: visible;
}
.gen-feed-toolbar {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
gap: 8px;
padding: 2px 2px 0;
background: transparent;
border: 0;
box-shadow: none;
}
.gen-feed-toolbar[hidden] {
display: none;
}
.gen-feed-tool {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 11px;
border: 1px solid var(--border);
border-radius: 6px;
background: #fff;
color: #45546b;
font-size: 12px;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}
.gen-feed-tool[hidden] {
display: none;
}
.gen-feed-tool .ui-icon {
width: 16px;
height: 16px;
opacity: 0.92;
}
.gen-feed-tool:hover {
border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
background: color-mix(in srgb, var(--accent) 6%, #fff);
color: var(--accent-strong, var(--accent));
box-shadow: 0 1px 4px -3px color-mix(in srgb, var(--accent) 45%, transparent);
}
.gen-feed-tool:active {
background: color-mix(in srgb, var(--accent) 12%, #fff);
}
body:not(.auth-required) #appLayout .result-library-btn {
position: relative;
isolation: isolate;
min-height: 34px;
height: 34px;
padding: 0 13px 0 10px;
gap: 7px;
border-radius: 8px;
border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 251, 255, 0.92));
color: #234262;
font-size: 13px;
font-weight: 760;
line-height: 1;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.82),
0 8px 18px rgba(47, 109, 183, 0.07);
transform: translateZ(0);
transition:
transform var(--motion-fast, 140ms) var(--ease-ui, ease),
border-color var(--motion-fast, 140ms) var(--ease-ui, ease),
background var(--motion-fast, 140ms) var(--ease-ui, ease),
color var(--motion-fast, 140ms) var(--ease-ui, ease),
box-shadow var(--motion-fast, 140ms) var(--ease-ui, ease);
}
body:not(.auth-required) #appLayout .result-library-btn .ui-icon {
display: inline-grid;
place-items: center;
flex: 0 0 19px;
width: 19px;
height: 19px;
border-radius: 6px;
color: var(--accent);
background: color-mix(in srgb, var(--accent) 9%, #ffffff);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
opacity: 1;
}
body:not(.auth-required) #appLayout .result-library-btn .ui-icon svg {
width: 13px !important;
height: 13px !important;
min-width: 13px !important;
min-height: 13px !important;
}
body:not(.auth-required) #appLayout .result-library-btn:hover {
border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
background:
linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--accent) 7%, #ffffff));
color: var(--accent-strong);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 10px 22px rgba(47, 109, 183, 0.12);
transform: translateY(-1px);
}
body:not(.auth-required) #appLayout .result-library-btn:active {
transform: translateY(0);
background: color-mix(in srgb, var(--accent) 10%, #ffffff);
box-shadow: inset 0 1px 2px rgba(47, 109, 183, 0.14);
}
body:not(.auth-required) #appLayout .result-library-btn:focus-visible {
outline: 2px solid color-mix(in srgb, var(--accent) 48%, transparent);
outline-offset: 2px;
}
body.theme-dark:not(.auth-required) #appLayout .result-library-btn {
border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
background:
linear-gradient(180deg, rgba(31, 41, 55, 0.92), rgba(18, 21, 28, 0.9));
color: color-mix(in srgb, #ffffff 84%, var(--accent) 16%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 8px 18px rgba(0, 0, 0, 0.24);
}
body.theme-dark:not(.auth-required) #appLayout .result-library-btn .ui-icon {
color: color-mix(in srgb, var(--accent) 78%, #ffffff);
background: color-mix(in srgb, var(--accent) 18%, rgba(15, 23, 42, 0.88));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
}
body.theme-dark:not(.auth-required) #appLayout .result-library-btn:hover {
border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
background:
linear-gradient(180deg, rgba(37, 47, 63, 0.96), rgba(23, 33, 48, 0.94));
color: #ffffff;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 10px 24px rgba(0, 0, 0, 0.28);
}
@media (prefers-reduced-motion: reduce) {
body:not(.auth-required) #appLayout .result-library-btn {
transition: none;
}
body:not(.auth-required) #appLayout .result-library-btn:hover,
body:not(.auth-required) #appLayout .result-library-btn:active {
transform: none;
}
}
#genFeed.gen-feed {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
grid-auto-rows: max-content;
gap: 10px;
align-content: start;
align-items: start;
width: 100%;
min-width: 0;
padding: 0 2px 8px;
}
#genFeed.gen-feed[hidden] {
display: none;
}
.gen-feed-empty {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 56px 20px;
text-align: center;
color: var(--muted);
border: 1px dashed var(--border);
border-radius: 14px;
background: var(--surface-2, #f7fafd);
}
.gen-feed-empty-icon {
display: grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 14px;
background: rgba(47, 109, 183, 0.1);
color: var(--accent);
}
.gen-feed-empty-icon > .ui-icon {
width: 26px;
height: 26px;
}
.gen-feed-empty-icon .ui-icon svg,
.gen-feed-empty-icon svg {
width: 26px;
height: 26px;
}
.gen-feed-empty strong {
color: var(--text);
font-size: 14px;
}
.gen-feed-empty p {
margin: 0;
max-width: 300px;
font-size: 12.5px;
line-height: 1.55;
}
.gen-feed-auth-empty {
min-height: clamp(430px, calc(100dvh - 150px), 760px);
border-style: solid;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(247, 250, 253, 0.96)),
radial-gradient(circle at 50% 0, rgba(47, 109, 183, 0.12), transparent 48%);
}
.gen-feed-auth-empty .gen-feed-empty-icon,
.job-list-auth-icon,
.gen-media-state-inner,
.gen-pending-body {
display: inline-grid;
place-items: center;
line-height: 0;
}
.gen-feed-auth-empty .gen-feed-empty-icon {
background: linear-gradient(135deg, rgba(47, 109, 183, 0.14), rgba(106, 85, 200, 0.14));
box-shadow: inset 0 0 0 1px rgba(47, 109, 183, 0.12);
}
.gen-feed-auth-empty .guest-gate-login,
.job-list-auth-empty .guest-gate-login {
margin-top: 6px;
height: 34px;
padding: 0 22px;
border: none;
border-radius: 9px;
background: linear-gradient(135deg, #3d7bd4, #6a55c8);
color: #fff;
font-size: 12.5px;
font-weight: 800;
cursor: pointer;
box-shadow: 0 10px 18px -11px rgba(70, 92, 204, 0.66);
}
.gen-feed-auth-empty .guest-gate-login:hover,
.job-list-auth-empty .guest-gate-login:hover {
filter: brightness(1.06);
}
.gen-feed-auth-empty .guest-gate-login:active,
.job-list-auth-empty .guest-gate-login:active {
transform: translateY(1px);
}
.job-list-auth-empty {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
padding: 14px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--surface-2, #f7fafd);
color: var(--muted);
font-size: 12px;
line-height: 1.5;
}
.job-list-auth-empty strong {
color: var(--text);
font-size: 13px;
}
.job-list-auth-icon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 10px;
background: rgba(47, 109, 183, 0.1);
color: var(--accent);
}
.job-list-auth-icon > .ui-icon {
width: 18px;
height: 18px;
}
.job-list-auth-icon .ui-icon svg,
.job-list-auth-icon svg {
width: 18px;
height: 18px;
}
body.theme-dark:not(.auth-required) .gen-feed-auth-empty {
background:
linear-gradient(180deg, rgba(27, 31, 40, 0.9), rgba(20, 24, 32, 0.96)),
radial-gradient(circle at 50% 0, rgba(92, 151, 218, 0.18), transparent 48%);
border-color: #454c5c;
}
body.theme-dark:not(.auth-required) .job-list-auth-empty {
background: rgba(27, 31, 40, 0.92);
border-color: #454c5c;
}
.gen-feed-sentinel {
grid-column: 1 / -1;
height: 1px;
}
.gen-feed-sentinel.server-more {
display: flex;
align-items: center;
justify-content: center;
min-height: 34px;
height: auto;
color: var(--muted);
font-size: 12px;
line-height: 1.4;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface-2, #f7fafd);
}
.gen-card {
display: flex;
flex-direction: column;
min-width: 0;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 11px;
overflow: hidden;
box-shadow: 0 0 0 2px transparent, var(--shadow-card, 0 1px 2px rgba(38, 52, 92, 0.04), 0 4px 10px -5px rgba(38, 52, 92, 0.09));
transition: border-color 0.15s ease;
content-visibility: auto;
contain-intrinsic-size: 0 240px; 
contain-intrinsic-size: auto 240px; 
}
.result-card-media {
--result-card-chrome: hidden;
}
.result-card-media:hover,
.result-card:focus-within > .result-card-media,
.result-card:is(.selected, .actions-open) > .result-card-media {
--result-card-chrome: visible;
}
.result-card:is(.selected, .actions-open) {
border-color: var(--accent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent), var(--shadow-card, 0 1px 2px rgba(38, 52, 92, 0.04), 0 4px 10px -5px rgba(38, 52, 92, 0.09));
}
.gen-media {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background: var(--surface-2, #f1f5f9);
}
.gen-media::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.06) 0%,
rgba(0, 0, 0, 0) 38%,
rgba(0, 0, 0, 0.1) 78%,
rgba(0, 0, 0, 0.32) 100%
);
visibility: var(--result-card-chrome, hidden);
}
.gen-card-skeleton {
pointer-events: none;
}
.gen-card-skeleton .gen-media {
background: var(--surface-2, #f1f5f9);
position: relative;
overflow: hidden;
}
.gen-card-skeleton .gen-media::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
transform: translateX(-100%);
animation: gen-skeleton-shimmer 1.25s ease-in-out infinite;
}
.gen-card-skeleton::after {
content: "";
display: block;
height: 52px;
background: var(--panel);
border-top: 1px solid var(--border);
}
@keyframes gen-skeleton-shimmer {
to { transform: translateX(100%); }
}
.job-row-skeleton {
min-height: 44px;
border-radius: 10px;
background: var(--surface-2, #f1f5f9);
position: relative;
overflow: hidden;
pointer-events: none;
}
.job-row-skeleton + .job-row-skeleton {
margin-top: 6px;
}
.job-row-skeleton::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
transform: translateX(-100%);
animation: gen-skeleton-shimmer 1.25s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.gen-card-skeleton .gen-media::before { animation: none; }
.job-row-skeleton::before { animation: none; }
}
.gen-track {
position: absolute;
inset: 0;
display: flex;
width: 100%;
height: 100%;
transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.gen-slide {
position: relative;
flex: 0 0 100%;
width: 100%;
height: 100%;
}
.gen-slide img,
.gen-slide video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
-webkit-user-drag: element;
}
body.mobile-ui .gen-slide img,
body.mobile-ui .gen-slide video,
body.mobile-ui [data-mobile-drag-source],
body.mobile-ui [data-mobile-drag-source] *,
body.mobile-ui [data-media-drag-source="output"],
body.mobile-ui [data-media-drag-source="output"] * {
-webkit-touch-callout: none !important;
-webkit-user-select: none !important;
user-select: none !important;
-webkit-user-drag: none !important;
}
[data-media-drag-source="output"],
[data-media-drag-source="output"] * {
-webkit-touch-callout: none !important;
-webkit-user-select: none !important;
user-select: none !important;
}
@media (hover: none), (pointer: coarse) {
[data-media-drag-source="output"],
[data-media-drag-source="output"] *,
.workflow-media-library-card[data-media-library-draggable="true"],
.workflow-media-library-card[data-media-library-draggable="true"] * {
-webkit-touch-callout: none !important;
-webkit-user-select: none !important;
user-select: none !important;
-webkit-user-drag: none !important;
}
}
body.mobile-ui .module-tab[data-mobile-drag-source="module-template"] {
touch-action: none !important;
}
body.mobile-ui :is(.command-palette-item, .context-menu button)[data-mobile-drag-source="module-template"] {
touch-action: pan-y !important;
}
.gen-play {
position: absolute;
inset: 0;
margin: auto;
width: 46px;
height: 46px;
display: grid;
place-items: center;
border-radius: 50%;
background: rgba(15, 23, 42, 0.55);
color: #fff;
pointer-events: none;
}
.gen-audio {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
height: 100%;
padding: 16px;
background: var(--panel, #fff); 
color: var(--accent-strong, var(--accent));
}
.gen-audio-cover {
padding: 0;
gap: 0;
}
.gen-audio-cover > img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.gen-audio-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 44px;
height: 44px;
border-radius: 50%;
display: grid;
place-items: center;
background: rgba(10, 18, 30, 0.52);
color: #fff;
backdrop-filter: blur(4px);
pointer-events: none;
}
.gen-audio-dur {
position: absolute;
right: 8px;
bottom: 36px;
padding: 2px 8px;
border-radius: 999px;
background: rgba(10, 18, 30, 0.6);
color: #fff;
font-size: 11px;
font-weight: 700;
pointer-events: none;
}
.gen-audio:not(.gen-audio-cover) .gen-audio-dur {
position: static;
background: var(--surface-2, #eef3f9);
color: var(--muted);
}
.gen-audio-title {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 18px 10px 8px;
background: linear-gradient(to top, rgba(8, 14, 24, 0.72), transparent);
color: #fff;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
pointer-events: none;
}
.gen-audio-ico {
display: grid;
place-items: center;
width: 56px;
height: 56px;
border-radius: 16px;
background: var(--panel);
color: var(--accent);
box-shadow: var(--shadow-card, 0 6px 14px -5px rgba(38, 52, 92, 0.1));
}
.gen-audio-ico svg {
width: 30px;
height: 30px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.gen-audio-ico svg * {
fill: none;
stroke: currentColor;
}
.gen-audio-name {
max-width: 100%;
font-size: 12px;
color: var(--muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gen-media-state {
display: grid;
place-items: center;
width: 100%;
height: 100%;
color: var(--muted-2, var(--muted));
background: var(--surface-2, #f1f5f9);
}
.gen-media-state-inner {
width: 42px;
height: 42px;
}
.gen-media-state-inner > .ui-icon {
width: 34px;
height: 34px;
}
.gen-media-state .ui-icon svg,
.gen-media-state svg {
width: 34px;
height: 34px;
opacity: 0.7;
}
.gen-media-state.err {
background: rgba(214, 58, 46, 0.1);
}
.gen-media-fail {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px;
text-align: center;
color: #a8453b;
}
.gen-media-fail > .ui-icon,
.gen-media-fail > .ui-icon svg {
width: 40px;
height: 40px;
}
.gen-media-fail > .ui-icon svg { opacity: 1; }
.gen-media-fail-note {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.3px;
}
body.theme-dark .gen-media-fail { color: #e79c92; }
.gen-failure-mark {
position: absolute;
z-index: 2;
inset: 0;
border-radius: inherit;
pointer-events: none;
}
.gen-failure-mark.is-partial {
border: 1.5px solid rgba(217, 119, 6, 0.6);
}
.gen-media-bar {
position: absolute;
top: 7px;
right: 7px;
display: flex;
gap: 5px;
max-width: 62%;
pointer-events: none;
}
.gen-model-badge {
display: inline-flex;
align-items: center;
gap: 4px;
max-width: 100%;
padding: 2px 8px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.58);
color: #f4f7fb;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.2px;
line-height: 1.55;
backdrop-filter: blur(4px);
overflow: hidden;
white-space: nowrap;
}
.gen-model-badge .model-logo {
flex: none;
width: 12px;
height: 12px;
font-size: 9px;
}
.gen-model-badge .model-logo img { width: 100%; height: 100%; }
.gen-model-badge-name { overflow: hidden; text-overflow: ellipsis; }
.gen-check {
position: absolute;
top: 7px;
left: 7px;
display: inline-flex;
cursor: pointer;
z-index: 3;
visibility: var(--result-card-chrome, hidden); 
}
.gen-check[data-checked="1"] {
visibility: visible;
}
.gen-check input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
margin: 0;
}
.gen-check-box {
display: grid;
place-items: center;
width: 18px;
height: 18px;
border-radius: 5px;
border: 1.5px solid rgba(255, 255, 255, 0.9);
background: rgba(15, 23, 42, 0.45);
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3);
}
.gen-check[data-checked="1"] .gen-check-box {
background: var(--accent);
border-color: var(--accent);
}
.gen-check[data-checked="1"] .gen-check-box::after {
content: "";
width: 6px;
height: 10px;
margin-top: -2px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.gen-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
display: grid;
place-items: center;
border: none;
border-radius: 50%;
background: rgba(15, 23, 42, 0.5);
color: #fff;
font-size: 20px;
line-height: 1;
cursor: pointer;
visibility: var(--result-card-chrome, hidden); 
transition: background 0.15s ease;
z-index: 3;
}
body:not(.auth-required) #appLayout #genFeed .gen-nav,
body:not(.auth-required) #appLayout #genFeed .gen-nav:hover,
body:not(.auth-required) #appLayout #genFeed .gen-nav:active,
body:not(.auth-required) #appLayout #genFeed .gen-nav:focus-visible {
display: grid !important;
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
min-height: 30px !important;
max-height: 30px !important;
padding: 0 !important;
border-radius: 50% !important;
transform: translateY(-50%) !important;
}
.gen-nav:hover {
background: rgba(15, 23, 42, 0.72);
}
.gen-nav-prev {
left: 6px;
}
.gen-nav-next {
right: 6px;
}
.gen-index {
position: absolute;
bottom: 7px;
right: 7px;
padding: 1px 7px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.55);
color: #fff;
font-size: 10px;
font-weight: 600;
z-index: 1;
pointer-events: none;
}
.gen-actbar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
padding: 8px;
background: linear-gradient(to top, rgba(15, 23, 42, 0.62), rgba(15, 23, 42, 0));
visibility: var(--result-card-chrome, hidden);
z-index: 2;
}
.gen-actbar.is-start {
justify-content: flex-start;
}
.gen-tools {
display: inline-flex;
gap: 6px;
padding: 0;
border-radius: 0;
background: transparent;
}
.gen-tools button {
display: grid;
place-items: center;
flex: 0 0 auto;
box-sizing: border-box;
width: 30px;
height: 30px;
min-width: 30px;
min-height: 30px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.26);
border-radius: 8px;
background: rgba(255, 255, 255, 0.14);
color: #f4f7fb;
cursor: pointer;
-webkit-backdrop-filter: blur(10px) saturate(130%);
backdrop-filter: blur(10px) saturate(130%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 3px 10px rgba(0, 0, 0, 0.2);
transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.gen-tools button:hover {
background: rgba(255, 255, 255, 0.28);
border-color: rgba(255, 255, 255, 0.42);
}
.gen-tools button.danger:hover {
background: rgba(217, 45, 32, 0.28);
border-color: rgba(217, 45, 32, 0.42);
}
.gen-tools button .ui-icon svg,
.gen-tools button svg {
width: 16px;
height: 16px;
}
.gen-running {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
gap: 4px;
padding: 10px 10px 8px;
background: linear-gradient(to top, rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0));
color: #f4f7fb;
z-index: 2;
}
.gen-running span {
font-size: 11px;
font-weight: 600;
}
.gen-running > span:is([hidden], :empty) { display: none; }
.gen-foot {
display: flex;
flex-direction: column;
gap: 5px;
padding: 7px 8px 8px;
min-width: 0;
}
.gen-err {
font-size: 11px;
color: #d92d20;
background: var(--danger-soft, rgba(217, 45, 32, 0.08));
border-radius: 7px;
padding: 5px 7px;
}
.gen-prompt {
font-size: 11.5px;
line-height: 1.4;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-word;
}
.gen-prompt.is-name-fallback {
color: var(--muted-2, var(--muted));
font-style: italic;
}
.gen-foot-meta {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 5px;
min-width: 0;
}
.gen-chip {
display: inline-flex;
align-items: center;
padding: 1px 6px;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--surface-2, #f4f7fb);
color: var(--muted);
font-size: 9.5px;
font-weight: 600;
line-height: 1.6;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gen-time {
margin-left: auto;
flex: 0 0 auto;
font-size: 9.5px;
color: var(--muted-2, var(--muted));
white-space: nowrap;
}
.gen-drag-ghost {
position: fixed;
top: -999px;
left: -999px;
z-index: var(--z-drag-ghost); 
width: 88px;
height: 88px;
border-radius: 10px;
overflow: hidden;
background: var(--panel);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.32);
display: grid;
place-items: center;
font-size: 30px;
color: var(--accent);
pointer-events: none;
}
:root { --media-drag-ghost-size: 56px; }
.gen-drag-ghost,
.workflow-media-overlay-drag-ghost,
.workflow-media-library-card-ghost {
width: var(--media-drag-ghost-size);
height: var(--media-drag-ghost-size);
contain: layout paint;
will-change: transform;
}
.workflow-media-library-card-ghost {
top: 0;
left: 0;
transform: translate3d(-999px, -999px, 0) translate(-50%, -50%);
}
body:not(.auth-required) .selected-thumb.reference-dragging-live {
width: var(--reference-drag-size, var(--media-drag-ghost-size, 56px)) !important;
height: var(--reference-drag-size, var(--media-drag-ghost-size, 56px)) !important;
min-width: var(--reference-drag-size, var(--media-drag-ghost-size, 56px)) !important;
min-height: var(--reference-drag-size, var(--media-drag-ghost-size, 56px)) !important;
max-width: var(--reference-drag-size, var(--media-drag-ghost-size, 56px)) !important;
max-height: var(--reference-drag-size, var(--media-drag-ghost-size, 56px)) !important;
aspect-ratio: 1 / 1 !important;
box-sizing: border-box !important;
padding: 0 !important;
display: block !important;
line-height: 0 !important;
transform: scale(1) !important;
background: #eef3f9 !important;
}
.selected-thumb.reference-dragging-live > :not(img):not(video):not(.thumb-preview-plain):not(.reference-upload-media):not(.reference-media-placeholder):not(.reference-video-cover) {
display: none !important;
}
.selected-thumb.reference-dragging-live > :is(img, video, .thumb-preview-plain, .reference-upload-media, .reference-media-placeholder, .reference-video-cover) {
display: block !important;
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: 100% !important;
max-height: 100% !important;
aspect-ratio: auto !important;
object-fit: cover !important;
border-radius: 0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
.selected-thumb.reference-dragging-live > .reference-upload-media > :is(img, video, .reference-upload-source, .reference-upload-progress-image, .reference-media-placeholder, .reference-video-cover),
.selected-thumb.reference-dragging-live > .thumb-preview-plain :is(img, video) {
display: block !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
aspect-ratio: auto !important;
object-fit: cover !important;
border-radius: 0 !important;
filter: none !important;
opacity: 1 !important;
transform: none !important;
}
.selected-thumb.reference-dragging-live > .reference-media-placeholder,
.selected-thumb.reference-dragging-live > .reference-upload-media > .reference-media-placeholder,
.selected-thumb.reference-dragging-live > .reference-video-cover,
.selected-thumb.reference-dragging-live > .reference-upload-media > .reference-video-cover {
display: grid !important;
}
.selected-thumb.reference-dragging-live > .reference-upload-media > .reference-upload-overlay {
display: none !important;
}
.app-output-drag-ghost {
top: 0;
left: 0;
z-index: var(--z-drag-ghost);
transform: translate3d(-999px, -999px, 0);
transition: none;
contain: layout paint;
will-change: transform;
}
.app-output-drag-ghost > :is(img, video) {
width: 100%;
height: 100%;
object-fit: cover;
-webkit-user-drag: none;
}
.app-output-drag-count {
position: absolute;
right: 6px;
bottom: 6px;
min-width: 20px;
height: 20px;
display: grid;
place-items: center;
padding: 0 6px;
border-radius: 999px;
background: var(--accent);
color: #fff;
font-size: 12px;
font-weight: 850;
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.22);
}
body.app-output-dragging,
body.mobile-pager-dragging {
cursor: grabbing;
-webkit-user-select: none;
user-select: none;
}
body.media-long-press-dragging,
body.media-long-press-dragging * {
-webkit-touch-callout: none !important;
-webkit-user-select: none !important;
user-select: none !important;
}
.media-drag-source-concealed,
.media-drag-source-concealed .modal-panel {
opacity: 0 !important;
pointer-events: none !important;
animation: none !important;
transition: none !important;
}
.media-drag-source-concealed {
background: transparent !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
body.app-output-dragging #appLayout {
scroll-snap-type: none !important;
}
body.theme-dark:not(.auth-required) .upload-box {
background: transparent;
border-color: transparent;
}
.drag-droppable {
--media-drop-border: color-mix(in srgb, var(--media-drop-accent) 44%, transparent);
--media-drop-surface: color-mix(in srgb, var(--media-drop-accent) 3%, transparent);
--media-drop-shadow: 0 0 0 2px color-mix(in srgb, var(--media-drop-accent) 6%, transparent);
--media-drop-outline: 1px dashed var(--media-drop-border);
--media-drop-cursor: pointer;
border-color: var(--media-drop-border) !important;
background-color: var(--media-drop-surface) !important;
outline: var(--media-drop-outline);
outline-offset: -2px;
box-shadow: var(--media-drop-shadow);
cursor: var(--media-drop-cursor) !important;
}
.drag-droppable.drag-over {
--media-drop-border: color-mix(in srgb, var(--media-drop-accent) 78%, transparent);
--media-drop-surface: color-mix(in srgb, var(--media-drop-accent) 8%, transparent);
--media-drop-shadow: 0 0 0 3px color-mix(in srgb, var(--media-drop-accent) 10%, transparent);
--media-drop-outline: 1px solid var(--media-drop-border);
--media-drop-cursor: copy;
}
.feed-detail-mask {
z-index: var(--z-modal-priority);
}
body:not(.auth-required) :is(#feedDetailModal, #mediaLibraryDetailModal, #workflowMediaAlbumModal):not([hidden]) .modal-panel.feed-detail-panel {
animation: none;
}
.modal-panel.feed-detail-panel {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
grid-template-rows: minmax(0, 1fr);
align-items: stretch;
box-sizing: border-box;
width: min(1180px, calc(100vw - 32px));
max-width: calc(100vw - 32px);
height: min(760px, calc(100dvh - 32px));
max-height: calc(100dvh - 32px);
padding: 0;
border-radius: 14px;
overflow: hidden;
background: var(--panel);
contain: layout paint;
}
.feed-detail-preview {
position: relative;
min-width: 0;
min-height: 0;
width: 100%;
height: 100%;
flex: 1 1 auto;
align-self: stretch;
display: flex;
align-items: center;
justify-content: center;
padding: 22px;
box-sizing: border-box;
background: var(--panel);
cursor: zoom-in;
overflow: hidden;
touch-action: none;
user-select: none !important;
-webkit-user-select: none !important;
}
.feed-detail-panel:not(.is-audio-detail) .feed-detail-preview:not(.transparent) {
background: #f1f5f9;
}
.feed-detail-visual-layer {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
padding: inherit;
box-sizing: border-box;
overflow: hidden;
}
.feed-detail-hd {
position: absolute;
left: 50%;
top: 16px;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 9px;
padding: 6px 13px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.72);
color: #fff;
font-size: 12px;
line-height: 1;
white-space: nowrap;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.28);
pointer-events: none;
z-index: 4;
}
.feed-detail-hd-bar {
position: relative;
width: 64px;
height: 3px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.28);
overflow: hidden;
flex: 0 0 auto;
}
.feed-detail-hd-bar::after {
content: "";
position: absolute;
inset: 0 auto 0 0;
height: 100%;
width: var(--hd-progress, 6%);
border-radius: 2px;
background: #fff;
transition: width 0.2s ease;
}
.feed-detail-hd-center {
top: 50%;
bottom: auto;
transform: translate(-50%, -50%);
}
.feed-detail-hd.is-progress .feed-detail-hd-bar::after {
animation: none;
width: var(--hd-progress, 0%);
opacity: 0.92;
transition: width 0.18s ease;
}
.feed-detail-hd.is-indeterminate .feed-detail-hd-bar::after {
width: 42%;
transition: none;
animation: feedDetailHdPulse 1.15s ease-in-out infinite;
}
@keyframes feedDetailHdPulse {
0% { transform: translateX(-120%); }
100% { transform: translateX(340%); }
}
@media (prefers-reduced-motion: reduce) {
.feed-detail-hd.is-indeterminate .feed-detail-hd-bar::after { animation: none; width: 100%; opacity: 0.55; }
}
.feed-detail-album-host {
display: contents;
}
.feed-detail-preview * {
user-select: none !important;
-webkit-user-select: none !important;
}
.feed-detail-media,
.media-detail-zoom-target { transition: none; }
.feed-detail-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 4;
width: 42px;
height: 42px;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
background: rgba(15, 23, 42, 0.42);
color: #fff;
font-size: 26px;
line-height: 1;
cursor: pointer;
opacity: 0.82;
backdrop-filter: blur(6px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
transition: opacity 0.18s ease, background 0.18s ease, transform 0.12s ease;
}
.feed-detail-arrow.prev { left: 16px; }
.feed-detail-arrow.next { right: 16px; }
.feed-detail-preview:hover .feed-detail-arrow { opacity: 1; }
.feed-detail-arrow:hover { background: rgba(15, 23, 42, 0.62); }
.feed-detail-arrow:active { transform: translateY(-50%) scale(0.92); }
.feed-detail-arrow:disabled { opacity: 0 !important; pointer-events: none; }
.feed-detail-album-float {
position: absolute;
left: 50%;
bottom: 14px;
transform: translateX(-50%);
z-index: 4;
max-width: calc(100% - 28px);
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 9px 12px;
border-radius: 16px;
background: rgba(18, 21, 28, 0.46);
backdrop-filter: blur(14px) saturate(1.4);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
opacity: 0.92;
transition: opacity 0.18s ease;
}
.feed-detail-control-dock {
position: absolute;
left: 50%;
bottom: 14px;
z-index: 4;
width: min(640px, calc(100% - 28px));
max-width: calc(100% - 28px);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
transform: translateX(-50%);
}
.feed-detail-control-dock .feed-detail-audio-control-slot {
width: min(440px, 100%);
min-width: 0;
}
.feed-detail-control-dock .feed-detail-audio-control-slot[hidden] {
display: none;
}
.feed-detail-control-dock .vinyl-audio {
display: block;
width: 100%;
max-width: none;
margin: 0;
}
.feed-detail-control-dock > .feed-detail-album-float {
position: relative;
left: auto;
bottom: auto;
width: max-content;
max-width: 100%;
transform: none;
}
.feed-detail-preview:hover .feed-detail-album-float { opacity: 1; }
.feed-detail-preview.zoomed .feed-detail-arrow,
.feed-detail-preview.zoomed .feed-detail-album-float,
.feed-detail-preview.zoomed .feed-detail-control-dock {
opacity: 0 !important;
pointer-events: none;
}
.feed-detail-album-count { font-size: 11.5px; font-weight: 700; color: rgba(255, 255, 255, 0.92); letter-spacing: 0.3px; }
.feed-detail-album-track {
display: flex;
gap: 8px;
max-width: 100%;
overflow-x: auto;
padding: 2px;
scrollbar-width: none;
}
.feed-detail-album-track::-webkit-scrollbar { display: none; }
.feed-detail-album-thumb {
position: relative;
flex: 0 0 auto;
width: 58px;
height: 58px;
padding: 0;
border: 2px solid rgba(255, 255, 255, 0.16);
border-radius: 12px;
overflow: hidden;
cursor: pointer;
background: rgba(255, 255, 255, 0.08);
opacity: 0.8;
transform: scale(0.92);
transition: opacity 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
}
.feed-detail-album-thumb:hover { opacity: 1; transform: scale(1); border-color: rgba(255, 255, 255, 0.45); }
.feed-detail-album-thumb.is-active {
opacity: 1;
transform: scale(1.04);
border-color: #fff;
box-shadow: 0 0 0 2px rgba(99, 156, 222, 0.7), 0 4px 12px rgba(0, 0, 0, 0.3);
}
.feed-detail-album-thumb img,
.feed-detail-album-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.feed-album-badge { position: absolute; right: 3px; bottom: 2px; font-size: 10px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.feed-album-audio { display: grid; place-items: center; width: 100%; height: 100%; font-size: 22px; color: #fff; }
.feed-detail-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
height: 100%;
color: #93a1b3;
text-align: center;
padding: 16px;
}
.feed-detail-empty .ui-icon {
display: inline-grid;
place-items: center;
width: 52px;
height: 52px;
opacity: 0.45;
}
.feed-detail-empty .ui-icon svg {
width: 100%;
height: 100%;
}
.feed-detail-empty.err {
color: var(--danger);
}
.feed-detail-empty.err .ui-icon {
opacity: 0.6;
}
.feed-detail-empty.is-preview-pending {
color: var(--muted);
}
.feed-detail-error {
color: var(--danger);
white-space: pre-wrap;
}
.feed-detail-preview:has(.feed-detail-empty) {
cursor: default;
}
.feed-detail-preview.transparent {
background-color: #ffffff;
background-image:
linear-gradient(45deg, #d7dde6 25%, transparent 25%),
linear-gradient(-45deg, #d7dde6 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #d7dde6 75%),
linear-gradient(-45deg, transparent 75%, #d7dde6 75%);
background-size: 22px 22px;
background-position: 0 0, 0 11px, 11px -11px, -11px 0;
}
.feed-detail-preview img.feed-detail-media:not(.vinyl-cover),
.feed-detail-preview .media-detail-zoom-target {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 6px;
}
.feed-detail-preview video.feed-detail-media {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 6px;
}
.workflow-media-album-video-frame {
--media-transport-edge-inset: 12px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
overflow: hidden;
border-radius: 8px;
background: #0b1220;
}
.workflow-media-album-video-frame video.feed-detail-media {
width: 100%;
height: 100%;
border-radius: 0;
background: #0b1220;
pointer-events: none;
}
.workflow-media-album-video-frame .infinite-card-video-controls {
bottom: 12px;
}
.feed-detail-preview audio {
width: min(420px, 100%);
}
.feed-detail-side {
width: 360px;
min-width: 0;
height: 100%;
display: flex;
flex-direction: column;
border-left: 1px solid var(--border);
background: var(--panel);
min-height: 0;
overflow: hidden;
}
.feed-detail-scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
scrollbar-gutter: stable;
--detail-scroll-pad-y: 18px;
--detail-scroll-pad-x: 20px;
padding: 0 var(--detail-scroll-pad-x) var(--detail-scroll-pad-y);
display: flex;
flex-direction: column;
gap: 16px;
}
.feed-detail-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
position: sticky;
top: 0;
z-index: 4;
margin: 0 calc(var(--detail-scroll-pad-x, 20px) * -1);
padding: var(--detail-scroll-pad-y, 18px) var(--detail-scroll-pad-x, 20px) 10px;
background: var(--panel);
border-bottom: 1px solid var(--border);
}
.feed-detail-head strong {
font-size: 16px;
color: var(--text);
}
.feed-detail-close {
flex: 0 0 auto;
}
.feed-detail-pending {
position: relative;
display: grid;
gap: 8px;
padding: 11px 12px;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
border-radius: 10px;
background: color-mix(in srgb, var(--accent) 5%, var(--panel));
color: var(--muted);
font-size: 12px;
line-height: 1.35;
}
.feed-detail-pending[hidden] {
display: none;
}
.feed-detail-pending-copy {
position: relative;
z-index: 1;
}
.feed-detail-skeleton-line {
display: block;
width: 62%;
height: 7px;
overflow: hidden;
border-radius: 999px;
background: color-mix(in srgb, var(--accent) 10%, var(--border));
}
.feed-detail-skeleton-line.is-wide {
width: 88%;
}
.feed-detail-skeleton-line::after {
content: "";
display: block;
width: 45%;
height: 100%;
transform: translateX(-120%);
background: linear-gradient(90deg, transparent, color-mix(in srgb, #fff 72%, transparent), transparent);
animation: feed-detail-skeleton-sweep 1.15s ease-in-out infinite;
}
.feed-detail-pending.is-error {
border-color: color-mix(in srgb, var(--danger) 32%, var(--border));
background: color-mix(in srgb, var(--danger) 7%, var(--panel));
color: var(--danger);
}
.feed-detail-pending.is-error .feed-detail-skeleton-line {
display: none;
}
@keyframes feed-detail-skeleton-sweep {
to { transform: translateX(280%); }
}
.feed-detail-block {
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0;
}
.feed-detail-block > label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.3px;
color: var(--muted);
}
.feed-detail-block > span {
font-size: 13px;
color: var(--text);
word-break: break-word;
}
.feed-detail-prompt {
font-size: 13px;
line-height: 1.55;
color: var(--text);
white-space: pre-wrap;
word-break: break-word;
max-height: 160px;
overflow-y: auto;
padding: 9px 11px;
border: 1px solid var(--border);
border-radius: 9px;
background: var(--surface-2, #f7fafd);
}
.wf-album-hint {
margin-top: 4px;
font-size: 12px;
line-height: 1.5;
color: var(--text-muted, #94a3b8);
}
.feed-detail-refs {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.feed-detail-refs img {
width: 52px;
height: 52px;
object-fit: cover;
border-radius: 8px;
border: 1px solid var(--border);
cursor: zoom-in;
}
.feed-detail-ref-file {
position: relative;
width: 52px;
height: 52px;
display: grid;
place-items: center;
padding: 0;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--surface-3);
color: var(--muted);
cursor: pointer;
}
.feed-detail-ref-badge {
position: absolute;
right: 3px;
bottom: 3px;
min-width: 15px;
height: 15px;
padding: 0 3px;
display: grid;
place-items: center;
border-radius: 999px;
background: rgba(15, 23, 42, 0.62);
color: #fff;
font-size: 9px;
line-height: 1;
pointer-events: none;
}
.feed-detail-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.feed-detail-state {
display: inline-flex;
align-items: center;
align-self: flex-start;
padding: 2px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
border: 1px solid var(--border);
background: var(--surface-2, #f4f7fb);
color: var(--text);
}
.feed-detail-state.ok {
color: var(--ok, #12805c);
background: var(--ok-soft, rgba(18, 128, 92, 0.1));
border-color: var(--ok-border, rgba(18, 128, 92, 0.3));
}
.feed-detail-state.err {
color: #d92d20;
background: var(--danger-soft, rgba(217, 45, 32, 0.1));
border-color: var(--danger-border, rgba(217, 45, 32, 0.3));
}
.feed-detail-state.run {
color: var(--accent);
background: var(--brand-soft, rgba(47, 109, 183, 0.1));
border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
.feed-detail-id {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.feed-detail-id code {
flex: 1 1 auto;
min-width: 0;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12px;
color: var(--text);
padding: 6px 9px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface-2, #f7fafd);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.feed-detail-copyid {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 32px;
height: 32px;
padding: 0;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--panel);
color: var(--muted);
cursor: pointer;
}
.feed-detail-copyid:hover {
color: var(--accent);
border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.feed-detail-copyid .ui-icon svg,
.feed-detail-copyid svg {
width: 16px;
height: 16px;
}
.feed-detail-actions {
flex: 0 0 auto;
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 14px 20px;
border-top: 1px solid var(--border);
background: var(--panel);
}
.feed-detail-actions button {
display: inline-flex;
align-items: center;
gap: 6px;
}
.feed-detail-actions button .ui-icon svg,
.feed-detail-actions button svg {
width: 16px;
height: 16px;
}
body.theme-dark:not(.auth-required) .feed-detail-preview {
background-color: #0e1626;
}
body.theme-dark:not(.auth-required) .feed-detail-panel:not(.is-audio-detail) .feed-detail-preview:not(.transparent) {
background-color: #131a29;
}
body.theme-dark:not(.auth-required) .feed-detail-preview.transparent {
background-color: #0e1626;
background-image:
linear-gradient(45deg, #243248 25%, transparent 25%),
linear-gradient(-45deg, #243248 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #243248 75%),
linear-gradient(-45deg, transparent 75%, #243248 75%);
background-size: 22px 22px;
background-position: 0 0, 0 11px, 11px -11px, -11px 0;
}
@media (max-width: 900px) {
body:not(.auth-required) :is(#feedDetailModal, #mediaLibraryDetailModal, #workflowMediaAlbumModal).modal-mask:not([hidden]) {
position: fixed;
inset: 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
justify-items: center;
padding:
max(4px, env(safe-area-inset-top, 0px))
max(4px, env(safe-area-inset-right, 0px))
max(4px, env(safe-area-inset-bottom, 0px))
max(4px, env(safe-area-inset-left, 0px));
overflow: hidden;
}
body:not(.auth-required) :is(#feedDetailModal, #mediaLibraryDetailModal, #workflowMediaAlbumModal) .modal-panel.feed-detail-panel {
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: minmax(0, 64fr) minmax(0, 36fr) !important;
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
max-height: 100% !important;
padding: 0 !important;
border-radius: 12px !important;
overflow: hidden !important;
}
body:not(.auth-required) :is(#feedDetailModal, #mediaLibraryDetailModal, #workflowMediaAlbumModal) .feed-detail-preview {
min-height: 0 !important;
height: 100% !important;
padding: 0 !important;
}
body:not(.auth-required) :is(#feedDetailModal, #mediaLibraryDetailModal, #workflowMediaAlbumModal) .feed-detail-visual-layer {
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
}
body:not(.auth-required) :is(#feedDetailModal, #mediaLibraryDetailModal, #workflowMediaAlbumModal) .feed-detail-preview img:not(.vinyl-cover),
body:not(.auth-required) :is(#feedDetailModal, #mediaLibraryDetailModal, #workflowMediaAlbumModal) .feed-detail-preview video {
border-radius: 0 !important;
}
body:not(.auth-required) :is(#feedDetailModal, #mediaLibraryDetailModal, #workflowMediaAlbumModal) .feed-detail-side {
width: 100% !important;
height: 100% !important;
max-height: none !important;
min-height: 0 !important;
overflow: hidden !important;
border-left: none !important;
border-top: 1px solid var(--border) !important;
}
body:not(.auth-required) :is(#feedDetailModal, #mediaLibraryDetailModal, #workflowMediaAlbumModal) .feed-detail-scroll {
gap: 12px !important;
--detail-scroll-pad-y: 12px;
--detail-scroll-pad-x: 14px;
padding: 0 var(--detail-scroll-pad-x) 10px !important;
overscroll-behavior: contain !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-gutter: auto !important;
}
.feed-detail-actions {
align-items: center;
align-content: flex-start;
gap: 7px;
padding: 9px 14px;
}
}
@media (max-width: 700px) {
#genFeed.gen-feed {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
}
@media (max-width: 420px) {
#genFeed.gen-feed {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
}
.contact-panel .tool-page-head {
max-width: 940px;
margin-inline: auto;
}
.contact-panel .contact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
align-items: stretch;
max-width: 940px;
margin-inline: auto;
padding: 4px 2px 18px;
}
.contact-card {
display: flex;
flex-direction: column;
gap: 14px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 16px;
padding: 18px;
box-shadow: var(--shadow-card, 0 1px 2px rgba(38, 52, 92, 0.04), 0 6px 14px -8px rgba(38, 52, 92, 0.12));
transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.contact-card:hover {
border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
box-shadow: 0 2px 4px rgba(38, 52, 92, 0.06), 0 16px 30px -18px rgba(38, 52, 92, 0.32);
transform: translateY(-2px);
}
.contact-card-head {
display: flex;
align-items: center;
gap: 12px;
}
.contact-card-icon {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 44px;
height: 44px;
border-radius: 13px;
background: rgba(47, 109, 183, 0.12);
color: var(--accent);
}
.contact-card-icon svg {
width: 22px;
height: 22px;
}
.contact-card-title {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.contact-card-title strong {
color: var(--text);
font-size: 15px;
font-weight: 800;
}
.contact-card-title span {
color: var(--muted);
font-size: 12.5px;
line-height: 1.5;
}
.contact-qr,
.contact-copy-row,
.contact-action-btn {
margin-top: auto;
}
.contact-qr {
display: flex;
align-items: center;
justify-content: center;
padding: 4px 0 0;
}
.contact-qr img {
width: 100%;
max-width: 170px;
aspect-ratio: 1 / 1;
object-fit: contain;
border-radius: 12px;
background: #fff;
border: 1px solid var(--border);
}
.contact-qr-empty {
width: 100%;
max-width: 200px;
min-height: 128px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
text-align: center;
padding: 16px 14px;
color: var(--muted);
font-size: 12px;
line-height: 1.65;
border: 1px dashed var(--border);
border-radius: 12px;
background: var(--surface-2, #f7fafd);
}
.contact-qr-empty code {
font-size: 11.5px;
color: var(--accent);
}
.contact-copy-row {
display: flex;
align-items: center;
gap: 8px;
}
.contact-copy-value {
flex: 1 1 auto;
min-width: 0;
padding: 9px 12px;
border-radius: 9px;
background: var(--surface-2, #f1f5f9);
border: 1px solid var(--border);
color: var(--text);
font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
font-size: 14px;
letter-spacing: 0.5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.contact-copy-btn {
flex: 0 0 auto;
}
.contact-action-btn {
align-self: stretch;
}
.contact-admin-btn {
align-self: stretch;
margin-top: 10px;
}
.contact-edit-btn {
flex: 0 0 auto;
}
@media (min-width: 980px) {
.contact-panel .contact-grid {
grid-template-columns: minmax(280px, 0.92fr) minmax(300px, 1.08fr);
grid-auto-flow: row;
max-width: 940px;
}
.contact-card:first-child {
grid-column: 1;
grid-row: 1 / span 3;
}
.contact-card:first-child .contact-qr {
margin: auto 0;
}
}
@media (max-width: 760px) {
.contact-panel .contact-grid {
grid-template-columns: 1fr;
gap: 12px;
max-width: none;
padding: 2px 0 14px;
}
.contact-card {
gap: 12px;
padding: 16px;
border-radius: 14px;
}
.contact-card:hover {
transform: none;
}
.contact-qr img,
.contact-qr-empty {
max-width: 220px;
}
}
body.theme-dark .contact-card {
background: rgba(17, 27, 43, 0.92);
border-color: rgba(141, 149, 165, 0.3);
}
body.theme-dark .contact-card:hover {
border-color: rgba(120, 170, 224, 0.55);
box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.6);
}
body.theme-dark .contact-card-icon {
background: rgba(47, 109, 183, 0.22);
color: #9cc4ec;
}
body.theme-dark .contact-card-title strong {
color: #e7eef9;
}
body.theme-dark .contact-card-title span {
color: #8aa0bb;
}
body.theme-dark .contact-qr-empty {
background: rgba(13, 21, 35, 0.95);
border-color: rgba(141, 149, 165, 0.3);
color: #8aa0bb;
}
body.theme-dark .contact-qr-empty code {
color: #9cc4ec;
}
body.theme-dark .contact-copy-value {
background: rgba(15, 23, 42, 0.88);
border-color: rgba(141, 149, 165, 0.3);
color: #dbe7f5;
}
.recharge-packages-card {
margin: 0 0 12px;
padding: 16px;
border: 1px solid rgba(47, 109, 183, 0.16);
border-radius: 16px;
background:
radial-gradient(58% 70% at 6% -5%, rgba(47, 109, 183, 0.3), transparent 60%),
radial-gradient(52% 64% at 98% 8%, rgba(122, 89, 224, 0.28), transparent 60%),
radial-gradient(60% 72% at 72% 108%, rgba(79, 99, 221, 0.24), transparent 60%),
linear-gradient(135deg, #eef3fc, #f6f4fe);
}
.recharge-head-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.recharge-head-text strong {
display: block;
color: var(--text);
font-size: 14px;
}
.recharge-head-text span {
display: block;
margin-top: 3px;
color: var(--muted);
font-size: 12px;
line-height: 1.45;
}
.recharge-pkg-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
gap: 14px;
align-items: stretch;
}
.recharge-pkg {
position: relative;
display: flex;
flex-direction: column;
gap: 7px;
padding: 18px 16px;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.65);
background: linear-gradient(150deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.16));
box-shadow: 0 10px 30px -14px rgba(79, 99, 221, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -14px 26px -18px rgba(122, 89, 224, 0.14);
overflow: hidden;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.recharge-pkg::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.06) 30%, rgba(255, 255, 255, 0) 56%);
}
.recharge-pkg::after {
content: "";
position: absolute;
top: -45%;
right: -30%;
width: 76%;
height: 86%;
pointer-events: none;
background: radial-gradient(circle, rgba(122, 89, 224, 0.18), rgba(122, 89, 224, 0) 70%);
}
.recharge-pkg > * {
position: relative;
z-index: 1;
}
.recharge-pkg:hover {
transform: translateY(-4px);
border-color: rgba(255, 255, 255, 0.85);
box-shadow: 0 18px 42px -16px rgba(79, 99, 221, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -14px 26px -18px rgba(122, 89, 224, 0.24);
}
.recharge-pkg.featured {
border-color: rgba(79, 99, 221, 0.5);
background: linear-gradient(150deg, rgba(255, 255, 255, 0.48), rgba(124, 140, 255, 0.14) 60%, rgba(168, 140, 255, 0.16));
box-shadow: 0 0 0 1px rgba(79, 99, 221, 0.28), 0 16px 40px -16px rgba(79, 99, 221, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
#accountUsageModal .recharge-pkg {
-webkit-backdrop-filter: blur(22px) saturate(1.7) !important;
backdrop-filter: blur(22px) saturate(1.7) !important;
}
.recharge-pkg-save {
position: absolute;
top: 10px;
right: 10px;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
color: #fff;
background: linear-gradient(135deg, #ef6c4d, #f0913a);
}
.recharge-pkg-name {
color: #1f2b44;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.2px;
}
.recharge-pkg-desc {
color: var(--muted);
font-size: 12px;
line-height: 1.5;
min-height: 17px;
}
.recharge-pkg-points {
color: var(--muted);
font-size: 12.5px;
margin-top: 2px;
}
.recharge-pkg-points b {
font-size: 23px;
font-weight: 800;
margin-right: 3px;
background: linear-gradient(135deg, #2f6db7 0%, #4f63dd 52%, #7a59e0 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.recharge-pkg-bonus {
color: #e0792f;
font-size: 12px;
min-height: 16px;
}
.recharge-pkg-price {
color: #1f2b44;
font-size: 17px;
font-weight: 700;
}
.recharge-pkg-buy {
margin-top: auto;
width: 100%;
}
.membership-card {
--membership-copy: color-mix(in srgb, var(--member-surface-ink) 78%, var(--text));
margin: 0 0 12px;
padding: 18px;
border: 1px solid var(--member-surface-line);
border-radius: 16px;
background: var(--member-surface);
}
.membership-head { margin-bottom: 14px; }
.membership-title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px 12px;
flex-wrap: wrap;
}
.membership-title {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.membership-title strong {
color: var(--membership-copy);
font-size: 15px;
letter-spacing: 0.2px;
}
.membership-crown {
display: inline-flex;
width: 20px;
height: 20px;
color: var(--member-gold);
}
.membership-crown svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.membership-state {
padding: 2px 9px;
border: 1px solid var(--member-surface-line);
border-radius: 999px;
background: color-mix(in srgb, var(--member-gold-tint) 72%, var(--surface));
color: var(--membership-copy);
font-size: 11.5px;
font-weight: 700;
}
.membership-state.is-active {
border-color: var(--ok-border);
background: var(--ok-soft);
color: var(--ok);
}
.membership-copy {
min-width: 0;
padding: 15px 16px;
border: 1px solid color-mix(in srgb, var(--member-surface-line) 72%, transparent);
border-radius: 14px;
background: color-mix(in srgb, var(--member-gold-tint) 36%, transparent);
}
.membership-copy-title {
display: block;
color: var(--member-surface-ink);
font-size: 14px;
font-weight: 800;
letter-spacing: 0.2px;
}
.membership-copy-lead {
margin: 4px 0 0;
color: var(--membership-copy);
font-size: 11.5px;
line-height: 1.55;
}
.membership-benefits {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 7px 16px;
margin: 12px 0 0;
padding: 0;
list-style: none;
}
.membership-benefits li {
position: relative;
padding-left: 15px;
color: var(--membership-copy);
font-size: 12px;
line-height: 1.5;
}
.membership-benefits li::before {
content: "";
position: absolute;
left: 3px;
top: 8px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--member-gold);
}
.membership-benefits .membership-storage-benefit strong {
color: var(--member-surface-ink);
font-weight: 900;
}
.membership-card > .recharge-pkg-grid {
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
align-items: stretch;
}
.membership-card .membership-pkg.recharge-pkg {
border-color: var(--member-surface-line);
background: linear-gradient(150deg,
color-mix(in srgb, var(--member-gold-tint) 68%, var(--surface)),
color-mix(in srgb, var(--member-gold-tint) 44%, transparent));
box-shadow: var(--shadow-card);
}
.membership-card .membership-pkg.recharge-pkg::after {
background: radial-gradient(circle, color-mix(in srgb, var(--member-gold) 22%, transparent), transparent 70%);
}
.membership-card .membership-pkg.recharge-pkg .recharge-pkg-points b {
background-image: linear-gradient(135deg, var(--member-gold-strong), var(--member-gold), var(--member-gold-soft));
}
.membership-card .membership-pkg.recharge-pkg .recharge-pkg-bonus { color: var(--membership-copy); }
.membership-pkg-highlights {
display: grid;
gap: 5px;
margin: 1px 0 0;
padding: 0;
list-style: none;
}
.membership-pkg-highlights li {
position: relative;
padding-left: 14px;
color: var(--membership-copy);
font-size: 11.5px;
line-height: 1.4;
}
.membership-pkg-highlights li::before {
content: "";
position: absolute;
left: 2px;
top: 6px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--member-gold);
}
.membership-pkg-daily {
color: var(--membership-copy);
font-size: 11.5px;
font-weight: 650;
}
.membership-card .membership-pkg.recharge-pkg button.recharge-pkg-buy {
border-color: transparent;
background-color: var(--member-gold-strong);
background-image: linear-gradient(135deg, var(--member-gold-strong), var(--member-gold-soft));
color: var(--studio-command-on-accent);
}
.membership-card .membership-pkg.recharge-pkg button.recharge-pkg-buy:hover {
background-color: var(--member-gold);
background-image: linear-gradient(135deg, var(--member-gold), var(--member-gold-strong));
}
.membership-card .membership-pkg.recharge-pkg.featured {
border-color: var(--member-surface-line);
background: linear-gradient(150deg,
color-mix(in srgb, var(--member-gold-tint) 56%, var(--surface)),
color-mix(in srgb, var(--member-gold) 20%, transparent));
box-shadow: var(--brand-glow);
}
.membership-card .membership-pkg.recharge-pkg .recharge-pkg-save {
background: linear-gradient(135deg, var(--member-gold-strong), var(--member-gold-soft));
}
@media (min-width: 1040px) {
.membership-card {
display: grid;
grid-template-columns: minmax(0, 2.4fr) minmax(250px, 0.8fr);
gap: 14px 20px;
}
.membership-head { grid-column: 1 / -1; margin-bottom: 0; }
.membership-title-row { grid-column: 1 / -1; }
.membership-card > .recharge-pkg-grid { grid-column: 1; }
.membership-copy { grid-column: 2; align-self: stretch; }
.membership-copy .membership-benefits { grid-template-columns: minmax(0, 1fr); }
}
.account-member-crown {
display: inline-flex;
width: 14px;
height: 14px;
color: var(--member-gold);
}
.account-member-crown svg {
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.account-summary.account-summary-points.is-member {
--account-summary-color: var(--member-surface-ink);
--account-summary-line: var(--member-surface-line);
--account-summary-surface: var(--member-surface);
--sidebar-icon-active-bg: var(--member-surface);
--sidebar-icon-active-border: var(--member-surface-line);
--sidebar-icon-active-color: var(--member-surface-ink);
border-color: var(--account-summary-line);
background: var(--account-summary-surface);
color: var(--account-summary-color);
}
.account-summary.account-summary-points.is-member :is(.account-points-icon, .account-summary-text) {
color: var(--account-summary-color);
}
.recharge-custom {
display: flex;
gap: 8px;
margin-top: 12px;
}
.recharge-custom input {
flex: 1 1 auto;
min-width: 0;
}
body.theme-dark .recharge-packages-card {
border-color: rgba(148, 163, 184, 0.24);
background:
radial-gradient(58% 70% at 6% -5%, rgba(47, 109, 183, 0.45), transparent 60%),
radial-gradient(52% 64% at 98% 8%, rgba(122, 89, 224, 0.4), transparent 60%),
radial-gradient(60% 72% at 72% 108%, rgba(79, 99, 221, 0.36), transparent 62%),
rgba(12, 18, 33, 0.96);
}
body.theme-dark .recharge-head-text strong { color: #e8eef8; }
body.theme-dark .recharge-head-text span { color: #9fb0c7; }
body.theme-dark .recharge-pkg {
border-color: rgba(255, 255, 255, 0.18);
background: linear-gradient(150deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
box-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
body.theme-dark .recharge-pkg::before {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.04) 32%, rgba(255, 255, 255, 0) 58%);
}
body.theme-dark .recharge-pkg:hover {
border-color: rgba(124, 140, 255, 0.55);
background: linear-gradient(150deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
box-shadow: 0 18px 42px -16px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
body.theme-dark .recharge-pkg.featured {
border-color: rgba(124, 140, 255, 0.6);
background: linear-gradient(150deg, rgba(255, 255, 255, 0.16), rgba(124, 140, 255, 0.16) 60%, rgba(168, 140, 255, 0.18));
box-shadow: 0 0 0 1px rgba(124, 140, 255, 0.36), 0 16px 40px -16px rgba(0, 0, 0, 0.78), inset 0 1px 0 rgba(255, 255, 255, 0.26);
}
body.theme-dark .recharge-pkg-name { color: #e7eef9; }
body.theme-dark .recharge-pkg-desc { color: #8aa0bb; }
body.theme-dark .recharge-pkg-points { color: #dbe7f5; }
body.theme-dark .recharge-pkg-points b { color: #9cc4ec; }
body.theme-dark .recharge-pkg-price { color: #e7eef9; }
body:not(.auth-required) .workflow-main {
position: relative;
}
body:not(.auth-required) .infinite-canvas-stage:not(.snap-grid-enabled) {
background-image: none;
}
#infiniteCanvasStage.infinite-canvas-stage {
background-image: none !important;
}
body:not(.auth-required) .canvas-minimap[hidden],
body:not(.auth-required) .workflow-minimap[hidden] {
display: none !important;
}
body:not(.auth-required) .canvas-minimap::before,
body:not(.auth-required) .workflow-minimap::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--studio-command-divider) 1px, transparent 1px),
linear-gradient(90deg, var(--studio-command-divider) 1px, transparent 1px);
background-size: 18px 18px;
pointer-events: none;
}
body:not(.auth-required) .canvas-minimap-nodes,
body:not(.auth-required) .canvas-minimap-viewport,
body:not(.auth-required) .workflow-minimap-nodes,
body:not(.auth-required) .workflow-minimap-viewport {
position: absolute;
inset: 0;
}
body:not(.auth-required) .canvas-minimap-node,
body:not(.auth-required) .workflow-minimap-node {
position: absolute;
border-radius: 3px;
background: var(--muted-2); 
}
body:not(.auth-required) .canvas-minimap-node.section {
opacity: 0.5;
}
body:not(.auth-required) .canvas-minimap-node.selected,
body:not(.auth-required) .workflow-minimap-node.selected {
box-shadow: 0 0 0 1.5px var(--surface), 0 0 0 3px var(--studio-command-accent);
z-index: 1;
}
body:not(.auth-required) .workflow-minimap-node.disabled {
opacity: 0.38;
}
body:not(.auth-required) .canvas-minimap-viewport,
body:not(.auth-required) .workflow-minimap-viewport {
box-sizing: border-box;
border: var(--minimap-viewport-stroke, 1.5px) solid var(--studio-command-accent);
border-radius: 4px;
background: transparent;
box-shadow: none;
}
body:not(.auth-required) .infinite-canvas-selection-overlay,
body:not(.auth-required) .workflow-selection-overlay {
position: absolute;
z-index: 29;
transform-origin: 0 0;
will-change: auto;
border: var(--canvas-selection-frame-line-width) dashed var(--canvas-selection-frame-color);
border-radius: var(--canvas-selection-frame-radius);
background: var(--canvas-selection-frame-fill);
box-shadow: inset 0 0 0 1px var(--canvas-selection-frame-inset);
pointer-events: none;
overflow: visible;
contain: layout style;
backface-visibility: hidden;
}
body:not(.auth-required) .infinite-canvas-selection-overlay[hidden],
body:not(.auth-required) .workflow-selection-overlay[hidden] {
display: none;
}
body:not(.auth-required) .infinite-canvas-selection-overlay[data-selection-frame="group"],
body:not(.auth-required) .workflow-selection-overlay[data-selection-frame="group"] {
border-color: transparent;
background: transparent;
box-shadow: none;
}
body:not(.auth-required) .workflow-group-layer,
body:not(.auth-required) .infinite-canvas-group-layer {
position: absolute;
inset: 0;
overflow: visible;
transform-origin: 0 0;
will-change: auto;
pointer-events: none;
contain: layout style;
}
body:not(.auth-required) .infinite-canvas-stage.canvas-interacting > :is(.infinite-canvas-group-layer, .infinite-canvas-selection-overlay) {
will-change: transform;
}
body:not(.auth-required) .workflow-group-layer {
z-index: 4;
}
body:not(.auth-required) .infinite-canvas-group-layer {
z-index: 1;
}
body:not(.auth-required) .workflow-group-layer[hidden],
body:not(.auth-required) .infinite-canvas-group-layer[hidden] {
display: none;
}
body:not(.auth-required) .infinite-canvas-content {
pointer-events: none;
}
body:not(.auth-required) .infinite-card,
body:not(.auth-required) .infinite-card-inline-panel {
pointer-events: auto;
}
body:not(.auth-required) .infinite-card.result-grid-card {
pointer-events: none;
}
body:not(.auth-required) .infinite-card.result-grid-card .infinite-card-result-module,
body:not(.auth-required) .infinite-card.result-grid-card .infinite-card-results-toggle {
pointer-events: auto;
}
body:not(.auth-required) #infiniteCanvasStage.canvas-zoom-overview .infinite-card,
body:not(.auth-required) #infiniteCanvasContent.canvas-zoom-overview .infinite-card {
overflow: hidden !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
contain: layout style paint !important;
}
body:not(.auth-required) #infiniteCanvasStage.canvas-zoom-overview .infinite-card::after,
body:not(.auth-required) #infiniteCanvasContent.canvas-zoom-overview .infinite-card::after {
content: none !important;
display: none !important;
}
body:not(.auth-required) #infiniteCanvasStage.canvas-zoom-overview.picking-reference .infinite-card:not(.media-pickable):not(.media-pick-target)::after,
body:not(.auth-required) .picking-reference #infiniteCanvasContent.canvas-zoom-overview .infinite-card:not(.media-pickable):not(.media-pick-target)::after {
content: "" !important;
display: block !important;
}
body:not(.auth-required) #infiniteCanvasStage.canvas-zoom-overview .infinite-card :is(.infinite-card-link-zone, .infinite-card-run-progress),
body:not(.auth-required) #infiniteCanvasContent.canvas-zoom-overview .infinite-card :is(.infinite-card-link-zone, .infinite-card-run-progress) {
display: none !important;
}
body:not(.auth-required) #infiniteCanvasStage.canvas-zoom-overview .infinite-card-video-controls,
body:not(.auth-required) #infiniteCanvasContent.canvas-zoom-overview .infinite-card-video-controls {
display: none !important;
}
body:not(.auth-required) #infiniteCanvasStage.canvas-zoom-overview .infinite-card.result-grid-card,
body:not(.auth-required) #infiniteCanvasContent.canvas-zoom-overview .infinite-card.result-grid-card {
overflow: visible !important;
background: color-mix(in srgb, var(--panel, #ffffff) 92%, transparent) !important;
border-color: var(--line, #e2e8f0) !important;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.16) !important;
contain: layout style !important;
}
body.theme-dark #infiniteCanvasStage.canvas-zoom-overview .infinite-card.result-grid-card,
body.theme-dark #infiniteCanvasContent.canvas-zoom-overview .infinite-card.result-grid-card {
background: color-mix(in srgb, #1b1f28 94%, transparent) !important;
border-color: #454c5c !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.42) !important;
}
body:not(.auth-required) #infiniteCanvasStage.canvas-zoom-overview .infinite-card.result-grid-card > .infinite-card-body,
body:not(.auth-required) #infiniteCanvasContent.canvas-zoom-overview .infinite-card.result-grid-card > .infinite-card-body {
height: auto !important;
overflow: visible !important;
padding: 0 !important;
background: transparent !important;
}
body:not(.auth-required) #infiniteCanvasStage.canvas-zoom-overview .infinite-card.result-grid-card .infinite-card-result-grid,
body:not(.auth-required) #infiniteCanvasContent.canvas-zoom-overview .infinite-card.result-grid-card .infinite-card-result-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
column-gap: var(--result-col-gap, 18px) !important;
row-gap: var(--result-row-gap, 34px) !important;
align-items: start !important;
width: auto !important;
height: auto !important;
overflow: visible !important;
padding: 0 !important;
background: transparent !important;
}
body:not(.auth-required) #infiniteCanvasStage.canvas-zoom-overview .infinite-card.result-grid-card .infinite-card-result-module,
body:not(.auth-required) #infiniteCanvasContent.canvas-zoom-overview .infinite-card.result-grid-card .infinite-card-result-module {
display: block !important;
width: 100% !important;
height: auto !important;
overflow: visible !important;
}
body:not(.auth-required) #infiniteCanvasStage.canvas-zoom-overview .infinite-card.result-grid-card .infinite-card-result-module-body,
body:not(.auth-required) #infiniteCanvasContent.canvas-zoom-overview .infinite-card.result-grid-card .infinite-card-result-module-body {
display: grid !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
aspect-ratio: var(--result-cell-aspect, 1) !important;
}
body:not(.auth-required) #infiniteCanvasStage.canvas-zoom-overview .infinite-card img,
body:not(.auth-required) #infiniteCanvasStage.canvas-zoom-overview .infinite-card video,
body:not(.auth-required) #infiniteCanvasContent.canvas-zoom-overview .infinite-card img,
body:not(.auth-required) #infiniteCanvasContent.canvas-zoom-overview .infinite-card video {
opacity: 1 !important;
transition: none !important;
}
body:not(.auth-required) #infiniteCanvasStage.canvas-zoom-compact .infinite-card,
body:not(.auth-required) #infiniteCanvasContent.canvas-zoom-compact .infinite-card {
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1) !important;
contain: layout style paint !important;
}
body:not(.auth-required) #infiniteCanvasStage:is(.canvas-zoom-overview, .canvas-zoom-compact) .infinite-card.result-grid-card,
body:not(.auth-required) #infiniteCanvasContent:is(.canvas-zoom-overview, .canvas-zoom-compact) .infinite-card.result-grid-card {
contain: layout style !important;
overflow: visible !important;
}
body:not(.auth-required) #infiniteCanvasStage.canvas-zoom-compact .infinite-card .infinite-card-link-zone,
body:not(.auth-required) #infiniteCanvasContent.canvas-zoom-compact .infinite-card .infinite-card-link-zone {
display: none !important;
}
body:not(.auth-required) .workflow-group-frame,
body:not(.auth-required) .infinite-canvas-group-frame {
position: absolute;
box-sizing: border-box;
border: var(--canvas-selection-frame-line-width) dashed var(--canvas-selection-frame-color);
border-radius: var(--canvas-selection-frame-radius);
pointer-events: none;
overflow: visible;
transform: none;
will-change: auto;
contain: layout style;
backface-visibility: hidden;
}
body:not(.auth-required) .workflow-group-frame {
background: transparent;
box-shadow: none;
}
body:not(.auth-required) .infinite-canvas-group-frame {
background: var(--canvas-selection-frame-fill);
box-shadow: inset 0 0 0 1px var(--canvas-selection-frame-inset);
}
body:not(.auth-required) .workflow-group-frame.active,
body:not(.auth-required) .infinite-canvas-group-frame.active {
border-color: color-mix(in srgb, var(--accent, #2f6db7) 88%, #1857a1);
}
body:not(.auth-required) .workflow-group-frame.active {
background: transparent;
}
body:not(.auth-required) .infinite-canvas-group-frame.active {
background: color-mix(in srgb, var(--accent, #2f6db7) 8%, transparent);
}
body:not(.auth-required) .workflow-group-frame-label,
body:not(.auth-required) .infinite-canvas-group-frame-label {
position: absolute;
left: 12px;
top: -13px;
max-width: min(220px, calc(100% - 24px));
padding: 3px 9px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.94);
color: #36516f;
font-size: 12px;
font-weight: 850;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
pointer-events: auto;
box-shadow: 0 4px 14px rgba(38, 72, 112, 0.12);
z-index: 3;
}
body:not(.auth-required) .workflow-group-frame-label {
cursor: grab;
touch-action: manipulation;
user-select: none;
-webkit-user-select: none;
}
body:not(.auth-required) .infinite-canvas-group-frame-label {
cursor: grab;
}
body:not(.auth-required) .workflow-group-frame-edge,
body:not(.auth-required) .infinite-canvas-group-frame-edge {
position: absolute;
pointer-events: auto;
cursor: grab;
touch-action: none;
user-select: none;
-webkit-user-select: none;
z-index: 2;
}
body:not(.auth-required) .workflow-group-frame-edge-top,
body:not(.auth-required) .workflow-group-frame-edge-bottom,
body:not(.auth-required) .infinite-canvas-group-frame-edge-top,
body:not(.auth-required) .infinite-canvas-group-frame-edge-bottom {
left: -8px;
right: -8px;
height: 16px;
}
body:not(.auth-required) .workflow-group-frame-edge-left,
body:not(.auth-required) .workflow-group-frame-edge-right,
body:not(.auth-required) .infinite-canvas-group-frame-edge-left,
body:not(.auth-required) .infinite-canvas-group-frame-edge-right {
top: -8px;
bottom: -8px;
width: 16px;
}
body:not(.auth-required) .workflow-group-frame-edge-top,
body:not(.auth-required) .infinite-canvas-group-frame-edge-top {
top: -8px;
}
body:not(.auth-required) .workflow-group-frame-edge-right,
body:not(.auth-required) .infinite-canvas-group-frame-edge-right {
right: -8px;
}
body:not(.auth-required) .workflow-group-frame-edge-bottom,
body:not(.auth-required) .infinite-canvas-group-frame-edge-bottom {
bottom: -8px;
}
body:not(.auth-required) .workflow-group-frame-edge-left,
body:not(.auth-required) .infinite-canvas-group-frame-edge-left {
left: -8px;
}
body:not(.auth-required) .workflow-group-frame.dragging .workflow-group-frame-label,
body:not(.auth-required) .workflow-group-frame.dragging .workflow-group-frame-edge,
body:not(.auth-required) .infinite-canvas-group-frame.dragging .infinite-canvas-group-frame-label,
body:not(.auth-required) .infinite-canvas-group-frame.dragging .infinite-canvas-group-frame-edge {
cursor: grabbing;
}
body:not(.auth-required) #appLayout .canvas-selection-toolbar {
position: absolute;
left: 50%;
top: -44px;
display: inline-flex;
align-items: center;
gap: 1px;
max-width: min(560px, calc(100vw - 36px));
padding: 5px;
transform: translateX(-50%);
pointer-events: auto;
}
body:not(.auth-required) #appLayout .canvas-selection-toolbar button {
height: 30px;
min-height: 30px;
padding: 0 8px;
}
body:not(.auth-required) #appLayout .canvas-selection-toolbar button:disabled {
display: none;
}
body:not(.auth-required) #appLayout .canvas-selection-toolbar button.danger:not(:disabled) {
margin-left: 3px;
color: var(--danger);
}
body:not(.auth-required) #appLayout .canvas-selection-label {
position: absolute;
left: 12px;
top: 8px;
max-width: calc(100% - 24px);
padding: 3px 8px;
border-radius: 999px;
background: var(--studio-command-surface);
color: var(--studio-command-ink);
font-size: 12px;
font-weight: 720;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
pointer-events: none;
}
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-status-row {
left: auto;
right: 18px;
bottom: 18px;
}
body:not(.auth-required) .layout.canvas-layout .infinite-canvas-summary-text {
display: none;
}
body:not(.auth-required) .infinite-canvas-status-row .infinite-canvas-summary-text {
display: none !important;
}
body.theme-dark:not(.auth-required) {
--canvas-selection-frame-color: rgba(119, 166, 230, 0.92);
--canvas-selection-frame-fill: rgba(83, 153, 230, 0.06);
--canvas-selection-frame-inset: rgba(13, 19, 31, 0.72);
--canvas-selection-subtract-frame-color: rgba(248, 113, 113, 0.92);
--canvas-selection-subtract-frame-fill: rgba(248, 113, 113, 0.075);
}
body.theme-dark:not(.auth-required) .canvas-selection-label {
background: var(--studio-command-surface);
color: var(--studio-command-ink);
}
body.theme-dark:not(.auth-required) .infinite-canvas-selection-overlay,
body.theme-dark:not(.auth-required) .workflow-selection-overlay {
border-color: var(--canvas-selection-frame-color);
background: var(--canvas-selection-frame-fill);
box-shadow: inset 0 0 0 1px var(--canvas-selection-frame-inset);
}
body.theme-dark:not(.auth-required) .workflow-group-frame,
body.theme-dark:not(.auth-required) .infinite-canvas-group-frame {
border-color: var(--canvas-selection-frame-color);
}
body.theme-dark:not(.auth-required) .workflow-group-frame {
background: transparent;
box-shadow: none;
}
body.theme-dark:not(.auth-required) .infinite-canvas-group-frame {
background: var(--canvas-selection-frame-fill);
box-shadow: inset 0 0 0 1px var(--canvas-selection-frame-inset);
}
body.theme-dark:not(.auth-required) .workflow-group-frame-label,
body.theme-dark:not(.auth-required) .infinite-canvas-group-frame-label {
background: rgba(15, 23, 42, 0.9);
color: #d8e3f1;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
}
body.theme-dark:not(.auth-required) .infinite-canvas-selection-overlay[data-selection-frame="group"],
body.theme-dark:not(.auth-required) .workflow-selection-overlay[data-selection-frame="group"] {
border-color: transparent;
background: transparent;
box-shadow: none;
}
body.mobile-ui:not(.auth-required) .workflow-group-frame-label,
body.mobile-ui:not(.auth-required) .infinite-canvas-group-frame-label {
touch-action: none;
user-select: none;
-webkit-user-select: none;
}
@media (max-width: 760px) {
body:not(.auth-required) .canvas-selection-toolbar {
top: -42px;
max-width: calc(100vw - 24px);
overflow-x: auto;
}
}
body:not(.auth-required) #appLayout {
--canvas-hud-inset-x: 16px;
--canvas-hud-inset-y: 16px;
--canvas-hud-map-width: 190px;
--canvas-hud-map-height: 106px;
--canvas-hud-gap: 6px;
}
body:not(.auth-required) #appLayout[data-module-panel="workflowModule"] #workflowTab.active .workflow-main {
position: relative;
}
body:not(.auth-required) #appLayout .canvas-corner-hud {
position: absolute;
left: var(--canvas-hud-inset-x);
right: auto;
bottom: var(--canvas-hud-inset-y);
z-index: 30;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--canvas-hud-gap);
width: var(--canvas-hud-map-width);
max-width: calc(100% - (var(--canvas-hud-inset-x) * 2));
pointer-events: none;
}
body:not(.auth-required) #appLayout .canvas-corner-hud > .canvas-corner-map {
position: relative !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
z-index: auto !important;
display: block !important;
width: var(--canvas-hud-map-width) !important;
height: var(--canvas-hud-map-height) !important;
margin: 0 !important;
overflow: hidden;
cursor: pointer;
pointer-events: auto;
contain: layout paint;
}
body:not(.auth-required) #appLayout .canvas-corner-hud > .canvas-corner-map[hidden] {
display: none !important;
}
body:not(.auth-required) #appLayout .canvas-corner-actions {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 0;
width: 100%;
max-width: 100%;
min-height: 40px;
padding: 4px;
pointer-events: auto;
}
body:not(.auth-required) #appLayout .canvas-corner-hud .canvas-viewport-dock,
body:not(.auth-required) #appLayout .canvas-corner-hud .canvas-history-dock {
position: static !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
z-index: auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 1px !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
backdrop-filter: none !important;
pointer-events: auto !important;
}
body:not(.auth-required) #appLayout .canvas-corner-hud .canvas-history-dock {
margin-left: 4px !important;
padding-left: 5px !important;
border-left: 1px solid var(--studio-command-divider) !important;
}
body:not(.auth-required) #appLayout .canvas-corner-hud .canvas-viewport-dock > button {
width: var(--studio-command-control-size);
min-width: var(--studio-command-control-size);
padding: 0 !important;
}
body:not(.auth-required) #appLayout .canvas-corner-hud .canvas-history-dock > button {
width: var(--studio-command-control-size);
min-width: var(--studio-command-control-size);
padding: 0 !important;
font-size: 0;
}
body:not(.auth-required) #appLayout .canvas-corner-hud button:disabled {
opacity: 0.52;
cursor: not-allowed;
}
body:not(.auth-required) #appLayout .canvas-corner-hud button.active,
body:not(.auth-required) #appLayout .canvas-corner-hud button[aria-pressed="true"] {
background: var(--studio-command-active);
color: var(--studio-command-accent);
}
body:not(.auth-required) #appLayout[data-module-panel="workflowModule"] #workflowTab.active .workflow-main > .workflow-status-row,
body:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasTab.active .infinite-canvas-status-row {
position: absolute !important;
width: 1px !important;
height: 1px !important;
min-width: 0 !important;
min-height: 0 !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
pointer-events: none !important;
}
body.mobile-ui:not(.auth-required) #appLayout {
--canvas-hud-inset-x: 12px;
--canvas-hud-inset-y: 12px;
--canvas-hud-map-width: 176px;
--canvas-hud-map-height: 98px;
--studio-command-control-size: 34px;
}
@media (max-width: 420px) {
body:not(.auth-required) #appLayout {
--canvas-hud-map-width: min(176px, calc(100vw - 24px));
}
body:not(.auth-required) #appLayout .canvas-corner-actions {
max-width: calc(100vw - 24px);
}
}
body:not(.auth-required) #canvasAssetLibraryModal.modal-mask:not([hidden]),
body:not(.auth-required) #canvasAssetSaveModal.modal-mask:not([hidden]) {
display: flex;
align-items: center;
justify-content: center;
padding: 18px;
}
body:not(.auth-required) #canvasAssetLibraryModal .canvas-asset-panel {
width: min(920px, calc(100vw - 28px));
max-height: min(760px, calc(100vh - 32px));
}
body:not(.auth-required) #canvasAssetLibraryModal .canvas-asset-tools {
grid-template-columns: minmax(0, 1fr) 180px;
}
body:not(.auth-required) #canvasAssetLibraryModal .canvas-asset-list {
display: grid;
gap: 10px;
max-height: min(560px, calc(100vh - 230px));
overflow: auto;
padding-right: 4px;
}
body:not(.auth-required) #canvasAssetLibraryModal .canvas-asset-card {
grid-template-columns: 156px minmax(0, 1fr) 108px;
}
body:not(.auth-required) #canvasAssetLibraryModal .canvas-asset-preview {
min-height: 104px;
}
body:not(.auth-required) #canvasAssetLibraryModal .canvas-asset-preview .project-card-cover-glyph {
display: grid;
place-items: center;
width: 100%;
height: 100%;
color: #2f6db7;
}
body:not(.auth-required) #canvasAssetLibraryModal .canvas-asset-actions {
grid-template-columns: 1fr;
}
body:not(.auth-required) #canvasAssetLibraryModal .canvas-asset-actions button {
width: 100%;
}
body:not(.auth-required) #canvasAssetSaveModal .canvas-asset-save-panel {
width: min(520px, calc(100vw - 28px));
max-height: calc(100vh - 32px);
}
body:not(.auth-required) #canvasAssetSaveModal .canvas-asset-save-form {
display: grid;
gap: 12px;
}
body:not(.auth-required) #canvasAssetSaveModal .canvas-asset-save-form label {
display: grid;
gap: 6px;
color: #475569;
font-size: 13px;
font-weight: 800;
}
body:not(.auth-required) #canvasAssetSaveModal .canvas-asset-save-form :is(input, textarea),
body:not(.auth-required) #canvasAssetLibraryModal .canvas-asset-tools :is(input, select) {
width: 100%;
min-width: 0;
border: 1px solid #d7e2ef;
border-radius: 8px;
background: #ffffff;
color: #0f172a;
}
body:not(.auth-required) #canvasAssetSaveModal .canvas-asset-save-form textarea {
resize: vertical;
min-height: 82px;
}
body:not(.auth-required) #canvasAssetSaveModal .canvas-asset-save-summary {
margin: 0;
padding: 9px 10px;
border: 1px solid rgba(47, 109, 183, 0.18);
border-radius: 8px;
background: rgba(47, 109, 183, 0.07);
color: #475569;
font-size: 12px;
line-height: 1.45;
}
body.theme-dark:not(.auth-required) #canvasAssetSaveModal .canvas-asset-save-form label {
color: #cbd5e1;
}
body.theme-dark:not(.auth-required) #canvasAssetSaveModal .canvas-asset-save-form :is(input, textarea),
body.theme-dark:not(.auth-required) #canvasAssetLibraryModal .canvas-asset-tools :is(input, select) {
border-color: rgba(96, 165, 250, 0.28);
background: rgba(9, 11, 16, 0.88);
color: #e2e8f0;
}
body.theme-dark:not(.auth-required) #canvasAssetSaveModal .canvas-asset-save-summary {
border-color: rgba(96, 165, 250, 0.24);
background: rgba(59, 130, 246, 0.12);
color: #cbd5e1;
}
@media (max-width: 720px) {
body:not(.auth-required) #canvasAssetLibraryModal .canvas-asset-tools,
body:not(.auth-required) #canvasAssetLibraryModal .canvas-asset-card {
grid-template-columns: 1fr;
}
body:not(.auth-required) #canvasAssetLibraryModal .canvas-asset-preview {
min-height: 96px;
}
}
.workflow-media-library-select {
box-sizing: border-box !important;
width: 26px !important;
min-width: 26px !important;
max-width: 26px !important;
height: 26px !important;
min-height: 26px !important;
max-height: 26px !important;
padding: 0 !important;
border-radius: 7px !important;
aspect-ratio: 1 / 1 !important;
}
body:not(.auth-required) button.workflow-media-library-select {
box-sizing: border-box !important;
width: 26px !important;
min-width: 26px !important;
max-width: 26px !important;
height: 26px !important;
min-height: 26px !important;
max-height: 26px !important;
padding: 0 !important;
border-radius: 7px !important;
aspect-ratio: 1 / 1 !important;
}
body.media-library-pick-mode .workflow-media-library-select {
width: 28px !important;
min-width: 28px !important;
max-width: 28px !important;
height: 28px !important;
min-height: 28px !important;
max-height: 28px !important;
}
body.media-library-pick-mode button.workflow-media-library-select {
width: 28px !important;
min-width: 28px !important;
max-width: 28px !important;
height: 28px !important;
min-height: 28px !important;
max-height: 28px !important;
padding: 0 !important;
}
.model-center-panel {
display: grid;
gap: 8px;
margin: 10px 0 18px;
}
.model-center-card {
display: grid;
grid-template-columns: minmax(150px, 0.9fr) minmax(220px, 1.5fr) minmax(96px, auto);
gap: 12px;
align-items: center;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
}
.model-center-main,
.model-center-route,
.model-center-cost {
display: grid;
gap: 3px;
min-width: 0;
}
.model-center-main strong,
.model-center-route span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.model-center-main small,
.model-center-route small,
.model-center-cost small {
color: var(--muted);
font-size: 12px;
}
.model-center-cost {
justify-items: end;
text-align: right;
}
.model-center-price {
justify-content: flex-end;
}
.model-center-price-summary {
color: var(--primary);
font-size: 12px;
font-weight: 760;
line-height: 1.35;
overflow-wrap: anywhere;
}
@media (max-width: 760px) {
.model-center-card {
grid-template-columns: 1fr;
}
.model-center-cost {
justify-items: start;
text-align: left;
}
}
body:not(.auth-required) #appLayout .selected-thumb.reference-upload-thumb {
position: relative;
display: flex;
flex-direction: column;
border-color: rgba(47, 109, 183, 0.32);
background: #f7f9fc;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
isolation: isolate;
contain: layout paint;
}
body:not(.auth-required) #appLayout .selected-thumb.reference-upload-thumb.is-error {
border-color: rgba(185, 28, 28, 0.38);
background: #fff8f8;
}
body:not(.auth-required) #appLayout .selected-thumb.reference-upload-thumb .reference-upload-media {
position: relative;
display: block;
width: 100%;
min-width: 0;
flex: 1 1 auto;
aspect-ratio: 1 / 1;
overflow: hidden;
background: #e8edf3;
border-radius: inherit;
}
body:not(.auth-required) #appLayout .selected-thumb.reference-upload-thumb .reference-upload-media::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
background: linear-gradient(135deg, rgba(47, 109, 183, 0.62), rgba(88, 94, 214, 0.5));
opacity: 0;
pointer-events: none;
transition: opacity 160ms ease-out;
}
body:not(.auth-required) #appLayout .selected-thumb.reference-upload-thumb .reference-upload-media > :is(img, video, .reference-video-cover) {
position: relative;
z-index: 0;
display: block !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
aspect-ratio: auto !important;
object-fit: cover !important;
border-radius: inherit !important;
background: #e8edf3 !important;
filter: none !important;
opacity: 1 !important;
transform: translateZ(0);
transition: filter 160ms ease-out, opacity 160ms ease-out;
}
.reference-media-placeholder {
box-sizing: border-box;
position: relative;
display: grid !important;
place-items: center !important;
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
padding: 0 !important;
overflow: hidden;
border-radius: inherit;
background: linear-gradient(160deg, #eef5ff 0%, #e3ecfa 100%);
color: #2f6db7 !important;
line-height: 1 !important;
pointer-events: none;
}
.reference-media-icon {
box-sizing: border-box;
display: grid !important;
place-items: center;
width: 42%;
max-width: 38px;
min-width: 18px;
aspect-ratio: 1 / 1;
height: auto;
padding: clamp(3px, 8%, 8px) !important;
overflow: visible !important;
border: 1px solid rgba(47, 109, 183, 0.12);
border-radius: 30%;
background: rgba(255, 255, 255, 0.74);
color: inherit !important;
box-shadow: 0 6px 16px rgba(47, 109, 183, 0.10);
}
.reference-media-icon > .ui-icon,
.reference-media-icon > .ui-icon > svg {
display: block !important;
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
padding: 0 !important;
overflow: visible !important;
color: inherit !important;
}
.reference-media-placeholder[data-state="loading"] {
color: #5a7ca6 !important;
filter: saturate(0.72);
}
.reference-media-placeholder[data-state="error"] {
background: linear-gradient(160deg, #fff1f1 0%, #fbe3e3 100%);
color: #b42318 !important;
}
.selected-thumb > .reference-media-placeholder,
.reference-upload-media > .reference-media-placeholder {
flex: 1 1 100%;
align-self: stretch;
width: 100% !important;
height: 100% !important;
padding: 0 !important;
}
.prompt-mention-ico.reference-media-placeholder,
.infinite-card-audio-thumb.reference-media-placeholder {
width: 100%;
height: 100%;
}
.prompt-inline-mention-media .reference-media-placeholder .reference-media-icon {
width: 100%;
min-width: 0;
max-width: none;
height: 100%;
padding: 3px !important;
border: 0;
border-radius: inherit;
background: transparent;
box-shadow: none;
}
.infinite-inline-reference-grid .reference-media-placeholder .reference-media-icon {
width: 22px;
min-width: 22px;
max-width: 22px;
padding: 4px !important;
}
body.theme-dark .reference-media-placeholder {
background: linear-gradient(160deg, #1b2740 0%, #202c46 100%);
color: #8fb4e6 !important;
}
body.theme-dark .reference-media-icon {
border-color: rgba(143, 180, 230, 0.16);
background: rgba(12, 19, 32, 0.48);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}
body.theme-dark .reference-media-placeholder[data-state="error"] {
background: linear-gradient(160deg, #3a2023 0%, #45252a 100%);
color: #ffaaa3 !important;
}
.reference-video-cover {
box-sizing: border-box;
position: relative;
isolation: isolate;
display: grid !important;
place-items: stretch !important;
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
padding: 0 !important;
overflow: hidden;
border-radius: inherit;
background: #e8edf3;
line-height: 0 !important;
pointer-events: none;
}
.reference-video-cover > :is(.reference-video-cover-image, .reference-media-placeholder) {
grid-area: 1 / 1;
display: block !important;
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: inherit !important;
object-fit: cover !important;
}
body:not(.auth-required) .selected-thumb .reference-video-cover > .reference-video-cover-image {
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
aspect-ratio: auto !important;
border-radius: inherit !important;
}
.reference-video-cover > .reference-media-placeholder {
display: grid !important;
}
.reference-video-cover-badge {
grid-area: 1 / 1;
z-index: 2;
align-self: center;
justify-self: center;
box-sizing: border-box;
display: grid !important;
place-items: center;
width: clamp(18px, 34%, 30px);
height: auto;
aspect-ratio: 1 / 1;
padding: clamp(4px, 8%, 7px) !important;
border: 1px solid rgba(255, 255, 255, 0.48);
border-radius: 999px;
background: rgba(15, 23, 42, 0.62);
color: #fff !important;
box-shadow: 0 3px 10px rgba(15, 23, 42, 0.24);
backdrop-filter: blur(4px);
}
.reference-video-cover-badge > .ui-icon,
.reference-video-cover-badge > .ui-icon > svg {
display: block !important;
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
color: inherit !important;
}
.prompt-mention-item > .reference-video-cover,
.prompt-mention-video-cover {
width: 100%;
height: 100%;
}
.prompt-inline-mention-media > .reference-video-cover {
width: 100%;
height: 100%;
border-radius: inherit;
}
.prompt-inline-mention-media > .reference-video-cover .reference-video-cover-badge {
display: none !important;
}
.infinite-inline-reference-grid .reference-video-cover {
width: 100%;
height: 100%;
}
.infinite-inline-reference-grid .reference-video-cover-badge {
width: 20px;
padding: 5px !important;
}
.reference-upload-media > .reference-video-cover,
.selected-thumb > .reference-video-cover {
flex: 1 1 100%;
align-self: stretch;
width: 100% !important;
height: 100% !important;
}
body.theme-dark .reference-video-cover {
background: #1c2638;
}
body.theme-dark .reference-video-cover-badge {
border-color: rgba(255, 255, 255, 0.32);
background: rgba(7, 12, 22, 0.7);
}
body:not(.auth-required) #appLayout .selected-thumb.reference-upload-thumb .reference-upload-media .media-thumb-icon {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: 0.58;
filter: grayscale(1);
}
@property --upload-progress {
syntax: "<percentage>";
inherits: true;
initial-value: 0%;
}
body:not(.auth-required) #appLayout .selected-thumb.reference-upload-thumb {
transition: --upload-progress 460ms cubic-bezier(0.3, 0.7, 0.3, 1);
}
body:not(.auth-required) #appLayout .selected-thumb.reference-upload-thumb .reference-upload-pct {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 3;
padding: 2px 8px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.56);
color: #fff;
font-size: 11px;
font-weight: 750;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
pointer-events: none;
}
body:not(.auth-required) #appLayout .selected-thumb.reference-upload-thumb .reference-upload-pct[hidden] { display: none; }
body:not(.auth-required) #appLayout .selected-thumb.reference-upload-thumb .reference-upload-overlay {
position: absolute;
inset: 0;
z-index: 2;
display: block;
pointer-events: none;
overflow: hidden;
border-radius: inherit;
background: transparent;
mix-blend-mode: normal;
opacity: 1;
transition: opacity 160ms ease-out;
-webkit-mask: conic-gradient(from -90deg, #000 0 var(--upload-progress, 0%), transparent var(--upload-progress, 0%) 100%);
mask: conic-gradient(from -90deg, #000 0 var(--upload-progress, 0%), transparent var(--upload-progress, 0%) 100%);
}
body:not(.auth-required) #appLayout .selected-thumb.reference-upload-thumb .reference-upload-progress-image {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: inherit !important;
filter: none !important;
opacity: 1 !important;
}
body:not(.auth-required) #appLayout .selected-thumb.reference-upload-thumb:is(.is-queued, .is-checking, .is-uploading, .is-finalizing) .reference-upload-media > :is(img, video, .reference-video-cover) {
filter: grayscale(1) saturate(0.18) brightness(0.95) contrast(1.04) !important;
opacity: 0.72 !important;
}
body:not(.auth-required) #appLayout .selected-thumb.reference-upload-thumb:is(.is-queued, .is-checking, .is-uploading, .is-finalizing) .reference-upload-media::after {
opacity: 0.72;
}
body:not(.auth-required) #appLayout .selected-thumb.reference-upload-thumb .reference-upload-overlay::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 0 0 1px rgba(47, 109, 183, 0.2);
}
body:not(.auth-required) #appLayout .selected-thumb.reference-upload-thumb.is-indeterminate .reference-upload-overlay {
opacity: 0;
-webkit-mask: none;
mask: none;
}
body:not(.auth-required) #appLayout .selected-thumb.reference-upload-thumb.is-finalizing .reference-upload-media > :is(img, video, .reference-video-cover) {
filter: grayscale(0.35) saturate(0.78) brightness(1.02) contrast(1.02) !important;
opacity: 0.86 !important;
}
body:not(.auth-required) #appLayout .selected-thumb.reference-upload-thumb.is-finalizing .reference-upload-media::after {
opacity: 0.34;
}
body:not(.auth-required) #appLayout .selected-thumb.reference-upload-thumb.is-ready .reference-upload-media > :is(img, video, .reference-video-cover) {
filter: none !important;
opacity: 1 !important;
}
body:not(.auth-required) #appLayout .selected-thumb.reference-upload-thumb.is-ready .reference-upload-media::after {
opacity: 0;
transition: none;
}
body:not(.auth-required) #appLayout .selected-thumb.reference-upload-thumb.is-ready .reference-upload-overlay {
opacity: 0;
transition: none;
-webkit-mask: none;
mask: none;
}
body:not(.auth-required) #appLayout .selected-thumb.reference-upload-thumb.is-error .reference-upload-media > :is(img, video, .reference-video-cover) {
filter: grayscale(1) saturate(0.18) brightness(0.96) !important;
opacity: 0.54 !important;
}
body:not(.auth-required) #appLayout .selected-thumb.reference-upload-thumb.is-error .reference-upload-media::after {
background: rgba(180, 35, 24, 0.18);
opacity: 1;
}
body:not(.auth-required) #appLayout .selected-thumb.reference-upload-thumb.is-error .reference-upload-overlay {
background: rgba(180, 35, 24, 0.18);
opacity: 1;
-webkit-mask: none;
mask: none;
}
body:not(.auth-required) #appLayout .selected-thumb.reference-upload-thumb.is-error .reference-upload-overlay::before {
box-shadow: inset 0 0 0 1px rgba(180, 35, 24, 0.24);
}
body:not(.auth-required) #appLayout .selected-thumb.reference-upload-thumb .reference-upload-status {
display: block;
min-width: 0;
padding: 5px 6px;
color: #52677f;
}
body:not(.auth-required) #appLayout .selected-thumb.reference-upload-thumb.is-error .reference-upload-status {
color: #b42318;
}
body:not(.auth-required) button.is-reference-upload-blocked {
opacity: 0.72;
cursor: wait;
box-shadow: none;
}
body:not(.auth-required) button.is-reference-upload-blocked:active {
transform: none;
}
@media (prefers-reduced-motion: reduce) {
body:not(.auth-required) #appLayout .selected-thumb.reference-upload-thumb .reference-upload-overlay {
transition: none;
}
}
.hl-skeleton-block {
position: relative;
overflow: hidden;
background: var(--surface-2, rgba(148, 163, 184, 0.16));
border-radius: 10px;
}
.hl-skeleton-block::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
animation: hl-skeleton-sweep 1.2s ease-in-out infinite;
}
.hl-skeleton-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
gap: 10px;
padding: 4px;
}
.hl-skeleton-grid .hl-skeleton-tile {
aspect-ratio: 1 / 1;
}
.hl-skeleton-list {
display: flex;
flex-direction: column;
gap: 8px;
padding: 4px 2px;
}
.hl-skeleton-list .hl-skeleton-row {
height: 46px;
border-radius: 9px;
}
@keyframes hl-skeleton-sweep {
to { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
.hl-skeleton-block::after { animation: none; }
}
#jobList[data-loading],
#genFeed[data-loading] { position: relative; }
#jobList[data-loading]::before,
#genFeed[data-loading]::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 34%;
height: 2px;
border-radius: 2px;
z-index: 6;
background: linear-gradient(90deg, transparent, var(--accent, #3b82f6), transparent);
animation: hl-loading-sweep 1.1s ease-in-out infinite;
pointer-events: none;
}
@keyframes hl-loading-sweep {
from { transform: translateX(-100%); }
to { transform: translateX(394%); }
}
@media (prefers-reduced-motion: reduce) {
#jobList[data-loading]::before,
#genFeed[data-loading]::before { animation: none; opacity: 0.5; width: 100%; }
}
.gen-audio-cover.cover-broken > img { display: none; }
.gen-audio-cover.cover-broken { background: var(--surface-2, #eef3f9); }
.gen-audio-cover.cover-broken::before { content: "♪"; font-size: 34px; color: var(--muted); }
.feed-detail-vinyl {
width: min(560px, 92%);
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 22px;
padding: 24px 0;
}
.feed-detail-panel.is-audio-detail.has-album .feed-detail-visual-layer {
align-items: flex-start;
}
.feed-detail-panel.is-audio-detail.has-album .feed-detail-visual-layer .feed-detail-vinyl {
margin: 0 auto;
}
.vinyl-stage {
position: relative;
flex: 0 0 auto;
width: min(340px, 58vw);
aspect-ratio: 1;
}
.feed-detail-panel.is-audio-detail .vinyl-stage {
width: min(460px, 62vw, 56dvh);
}
.vinyl-disc {
position: absolute;
inset: 0;
border-radius: 50%;
background:
radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.14), transparent 46%),
repeating-radial-gradient(circle, #15171c 0, #15171c 2px, #23262e 3px, #15171c 4px);
box-shadow:
0 22px 44px -20px rgba(8, 12, 22, 0.6),
inset 0 0 0 1px rgba(255, 255, 255, 0.06);
animation: vinyl-spin 14s linear infinite;
animation-play-state: paused;
}
.feed-detail-vinyl.playing .vinyl-disc {
animation-play-state: running;
}
@keyframes vinyl-spin {
to { transform: rotate(360deg); }
}
.vinyl-grooves {
position: absolute;
inset: 5%;
border-radius: 50%;
background: repeating-radial-gradient(circle, transparent 0 3px, rgba(255, 255, 255, 0.04) 3px 4px);
pointer-events: none;
}
.vinyl-cover {
position: absolute;
inset: 27%;
width: 46%;
height: 46%;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.55), 0 0 0 5px rgba(255, 255, 255, 0.08);
}
.feed-detail-vinyl.no-cover .vinyl-cover {
display: none;
}
.vinyl-label-fallback {
display: none;
position: absolute;
inset: 27%;
border-radius: 50%;
background: radial-gradient(circle, #414a5e, #262b36);
color: #cfd8ea;
font-size: 38px;
place-items: center;
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.55), 0 0 0 5px rgba(255, 255, 255, 0.08);
}
.feed-detail-vinyl.no-cover .vinyl-label-fallback {
display: grid;
}
.vinyl-spindle {
position: absolute;
left: 50%;
top: 50%;
width: 12px;
height: 12px;
margin: -6px 0 0 -6px;
border-radius: 50%;
background: #e9e5db;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.55);
z-index: 2;
}
.vinyl-tonearm {
position: absolute;
top: -2%;
right: 5%;
width: 8%;
height: 54%;
transform-origin: 50% 10%;
transform: rotate(-26deg);
transition: transform 0.7s cubic-bezier(0.32, 0.72, 0.34, 1);
z-index: 3;
pointer-events: none;
}
.vinyl-tonearm::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 22px;
height: 22px;
margin-left: -11px;
border-radius: 50%;
background: linear-gradient(140deg, #dde2ec, #99a2b4);
box-shadow: 0 2px 6px rgba(10, 14, 22, 0.45);
}
.vinyl-tonearm::after {
content: "";
position: absolute;
top: 16px;
bottom: 16%;
left: 50%;
width: 4px;
margin-left: -2px;
border-radius: 2px;
background: linear-gradient(90deg, #ccd2de, #8d96a8);
}
.vinyl-tonearm-head {
position: absolute;
bottom: 4%;
left: 50%;
width: 14px;
height: 26px;
margin-left: -7px;
border-radius: 4px;
background: #3a4150;
box-shadow: 0 2px 5px rgba(10, 14, 22, 0.45);
}
.feed-detail-vinyl.playing .vinyl-tonearm {
transform: rotate(10deg);
}
.feed-detail-panel.has-album:not(.is-audio-detail) .feed-detail-vinyl {
padding-bottom: 108px;
}
.vinyl-meta {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
text-align: center;
max-width: 100%;
}
.vinyl-meta strong {
font-size: 17px;
color: var(--text);
overflow-wrap: anywhere;
}
.vinyl-meta span {
font-size: 12px;
color: var(--muted, #8a94a6);
font-variant-numeric: tabular-nums;
}
.vinyl-audio {
width: 100%;
max-width: 440px;
}
@media (prefers-reduced-motion: reduce) {
.vinyl-disc { animation: none; }
.vinyl-tonearm { transition: none; }
}
@media (max-width: 900px) {
.feed-detail-panel.is-audio-detail .feed-detail-preview,
.feed-detail-panel.media-detail-kind-audio .feed-detail-preview {
padding: 10px;
}
.feed-detail-panel.is-audio-detail .feed-detail-vinyl {
width: min(100%, 520px);
gap: 10px;
padding: 6px 0;
}
.feed-detail-panel.is-audio-detail .vinyl-stage {
width: min(92vw, 44dvh);
}
.feed-detail-panel.is-audio-detail.has-album .feed-detail-control-dock,
.feed-detail-panel.media-detail-kind-audio.has-album .feed-detail-control-dock {
bottom: 10px;
gap: 6px;
}
.feed-detail-panel.is-audio-detail.has-album .feed-detail-album-float,
.feed-detail-panel.media-detail-kind-audio.has-album .feed-detail-album-float {
padding: 6px 8px;
}
}
@media (max-width: 900px) and (max-height: 760px) {
.modal-panel.feed-detail-panel.is-audio-detail.has-album {
grid-template-rows: minmax(0, 75fr) minmax(0, 25fr);
}
.feed-detail-panel.is-audio-detail.has-album .vinyl-stage {
width: min(90vw, 40dvh);
}
}
body:not(.auth-required) :is(
.monitor .command-row.compact > button,
#genFeedToolbar .gen-feed-tool,
.feed-detail-actions button,
.feed-detail-head .feed-detail-close,
.feed-detail-copyid
) {
--task-action-accent: var(--accent, #2f6db7);
position: relative;
overflow: hidden;
isolation: isolate;
}
body:not(.auth-required) :is(
.monitor .command-row.compact > button.danger,
.feed-detail-actions button.danger
) {
--task-action-accent: #d92d20;
}
body:not(.auth-required) :is(
.monitor .command-row.compact > button,
#genFeedToolbar .gen-feed-tool,
.feed-detail-actions button,
.feed-detail-head .feed-detail-close,
.feed-detail-copyid
).is-task-action-press:not([disabled]):not([aria-disabled="true"]) {
transform: translate3d(0, 1px, 0) scale(0.965) !important;
transition-duration: 80ms !important;
transition-timing-function: var(--motion-premium-press, cubic-bezier(0.2, 0, 0.2, 1)) !important;
}
body:not(.auth-required) :is(
.monitor .command-row.compact > button,
#genFeedToolbar .gen-feed-tool,
.feed-detail-actions button,
.feed-detail-head .feed-detail-close,
.feed-detail-copyid
).is-task-action-flash:not([disabled]):not([aria-disabled="true"]) {
will-change: transform;
}
body:not(.auth-required) :is(
.monitor .command-row.compact > button,
#genFeedToolbar .gen-feed-tool,
.feed-detail-actions button,
.feed-detail-head .feed-detail-close,
.feed-detail-copyid
).is-task-action-flash .ui-icon,
body:not(.auth-required) :is(
.monitor .command-row.compact > button,
#genFeedToolbar .gen-feed-tool,
.feed-detail-actions button,
.feed-detail-head .feed-detail-close,
.feed-detail-copyid
).is-task-action-flash > svg {
animation: hui-task-action-icon-pop 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.task-action-ripple {
position: absolute;
z-index: 0;
pointer-events: none;
border-radius: 999px;
background:
radial-gradient(circle, color-mix(in srgb, var(--task-action-accent) 30%, #ffffff) 0%, color-mix(in srgb, var(--task-action-accent) 18%, transparent) 46%, transparent 72%);
opacity: 0.72;
transform: translate(-50%, -50%) scale(0.08);
animation: hui-task-action-ripple 620ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes hui-task-action-ripple {
0% {
opacity: 0.68;
transform: translate(-50%, -50%) scale(0.08);
}
72% {
opacity: 0.22;
}
100% {
opacity: 0;
transform: translate(-50%, -50%) scale(1);
}
}
@keyframes hui-task-action-icon-pop {
0% { transform: scale(1); }
48% { transform: scale(1.14); }
100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.task-action-ripple {
display: none;
}
body:not(.auth-required) :is(
.monitor .command-row.compact > button,
#genFeedToolbar .gen-feed-tool,
.feed-detail-actions button,
.feed-detail-head .feed-detail-close,
.feed-detail-copyid
).is-task-action-press:not([disabled]):not([aria-disabled="true"]) {
transform: none !important;
}
body:not(.auth-required) :is(
.monitor .command-row.compact > button,
#genFeedToolbar .gen-feed-tool,
.feed-detail-actions button,
.feed-detail-head .feed-detail-close,
.feed-detail-copyid
).is-task-action-flash:not([disabled]):not([aria-disabled="true"]),
body:not(.auth-required) :is(
.monitor .command-row.compact > button,
#genFeedToolbar .gen-feed-tool,
.feed-detail-actions button,
.feed-detail-head .feed-detail-close,
.feed-detail-copyid
).is-task-action-flash .ui-icon,
body:not(.auth-required) :is(
.monitor .command-row.compact > button,
#genFeedToolbar .gen-feed-tool,
.feed-detail-actions button,
.feed-detail-head .feed-detail-close,
.feed-detail-copyid
).is-task-action-flash > svg {
animation: none !important;
}
}
.storage-usage {
flex: 0 1 260px;
min-width: 180px;
max-width: 300px;
display: grid;
gap: 5px;
padding: 6px 9px;
border: 1px solid var(--border);
border-radius: 9px;
background: var(--surface-2, #f7fafd);
color: inherit;
text-align: left;
white-space: normal;
cursor: pointer;
}
button.storage-usage:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
button.storage-usage:focus-visible {
outline: 0;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(47, 109, 183, 0.14);
}
#workflowMediaLibraryModal .workflow-media-library-head-actions .storage-usage { margin: 0; }
.workflow-media-library-review-owner > strong {
color: var(--accent-strong);
font-weight: 800;
}
.storage-usage-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-width: 0;
color: var(--muted);
font-size: 10.5px;
line-height: 1.2;
}
.storage-usage-row strong {
color: var(--text);
font-size: 11px;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.storage-usage-track {
height: 5px;
overflow: hidden;
border-radius: 999px;
background: color-mix(in srgb, var(--border) 72%, transparent);
}
.storage-usage-track i {
display: block;
width: 0;
height: 100%;
border-radius: inherit;
background: var(--accent);
transition: width 180ms ease;
}
.storage-usage.is-warning .storage-usage-track i { background: #d97706; }
.storage-usage.is-danger .storage-usage-track i,
.storage-usage.is-error .storage-usage-track i { background: var(--danger, #d92d20); }
.storage-usage-recycle {
color: var(--muted);
font-size: 10px;
line-height: 1.2;
}
body:not(.auth-required) #infiniteCanvasStage.infinite-canvas-stage {
overflow: hidden !important;
overflow: clip !important;
}
.gen-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.feed-detail-label-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.feed-detail-label-row > label {
color: var(--muted);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.3px;
}
.feed-detail-label-row :is(.feed-detail-copyprompt, .media-detail-copy-prompt) {
display: inline-flex;
align-items: center;
gap: 4px;
min-height: 28px;
height: 28px;
padding: 0 9px;
border-radius: 7px;
font-size: 11px;
}
.feed-detail-label-row :is(.feed-detail-copyprompt, .media-detail-copy-prompt) svg {
width: 14px;
height: 14px;
}
.gen-slide-pending {
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(160deg, #f3f6fb, #e9eef7);
}
body.theme-dark .gen-slide-pending { background: linear-gradient(160deg, #1f2531, #262d3b); }
.gen-slide-pending .gen-pending-stack {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 68px;
min-height: 68px;
transform: translateY(-2px);
}
.gen-slide-pending .gen-pending-body { opacity: 0.42; }
.gen-slide-pending .gen-pending-body > .ui-icon { width: 34px; height: 34px; }
.gen-slide-pending .gen-pending-body svg { width: 34px; height: 34px; }
.gen-slide-pending .gen-pending-meta {
padding: 2px 9px; border-radius: 999px;
background: rgba(15, 23, 42, 0.42); color: #fff;
font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
body.theme-dark .gen-slide-pending .gen-pending-meta { background: rgba(255, 255, 255, 0.16); }
body:not(.auth-required) #projectInfoModal .modal-panel.project-info-panel {
width: min(452px, 100%);
padding: 20px 22px 18px;
}
#projectInfoModal .project-info-sub {
margin: 5px 0 0;
color: var(--muted, #667085);
font-size: 12px;
line-height: 1.5;
}
#projectInfoModal .project-info-body {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 18px;
}
#projectInfoModal .project-info-field {
display: flex;
flex-direction: column;
gap: 6px;
}
#projectInfoModal .project-info-label {
display: flex;
align-items: center;
gap: 6px;
color: var(--text, #101828);
font-size: 12.5px;
font-weight: 650;
letter-spacing: 0.01em;
}
#projectInfoModal .project-info-label em {
font-style: normal;
font-weight: 500;
font-size: 11px;
color: var(--muted, #667085);
padding: 1px 6px;
border-radius: 999px;
background: var(--surface-2, #f4f5f7);
}
body:not(.auth-required) #projectInfoModal textarea#projectInfoDesc {
min-height: 74px !important;
height: 74px !important;
resize: none !important;
line-height: 1.5 !important;
}
#projectInfoModal .modal-head.project-info-head {
display: block;
padding-bottom: 0;
border-bottom: 0;
}
#projectInfoModal .modal-head.project-info-head h2 {
margin: 0;
letter-spacing: 0.01em;
}
#projectInfoModal .project-info-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 20px;
}
body:not(.auth-required) .media-viewer {
--mv-shell: #ffffff;
--mv-stage: #eef2f7;
--mv-stage-veil: rgba(15, 35, 60, 0.035);
--mv-border: #dbe6f0;
--mv-shadow: 0 30px 90px rgba(14, 40, 68, 0.22);
--mv-bar: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.78) 55%, rgba(255, 255, 255, 0) 100%);
--mv-title: #12233a;
--mv-meta: #6a809a;
--mv-btn-bg: rgba(255, 255, 255, 0.92);
--mv-btn-border: #d8e3ee;
--mv-btn-ink: #33587c;
--mv-btn-hover: #eef5fd;
--mv-media-ring: rgba(15, 35, 60, 0.12);
--mv-media-shadow: 0 18px 44px rgba(15, 35, 60, 0.16);
position: relative;
padding: 0;
overflow: hidden;
border-radius: 16px;
background: var(--mv-shell);
border: 1px solid var(--mv-border);
box-shadow: var(--mv-shadow);
}
body.theme-dark:not(.auth-required) .media-viewer {
--mv-shell: #1b1f28;
--mv-stage: #171c25;
--mv-stage-veil: rgba(255, 255, 255, 0.04);
--mv-border: #454c5c;
--mv-shadow: 0 34px 96px rgba(0, 0, 0, 0.5);
--mv-bar: linear-gradient(180deg, rgba(20, 25, 34, 0.94) 0%, rgba(20, 25, 34, 0.7) 55%, rgba(20, 25, 34, 0) 100%);
--mv-title: #e8eef8;
--mv-meta: #93a6bd;
--mv-btn-bg: rgba(37, 42, 52, 0.86);
--mv-btn-border: #454c5c;
--mv-btn-ink: #cfe0f2;
--mv-btn-hover: rgba(79, 143, 212, 0.2);
--mv-media-ring: rgba(255, 255, 255, 0.1);
--mv-media-shadow: 0 22px 56px rgba(0, 0, 0, 0.46);
}
body:not(.auth-required) .media-viewer.preview-panel {
width: min(1320px, calc(100vw - 32px));
height: min(900px, calc(100dvh - 32px));
max-height: calc(100dvh - 32px);
display: grid;
grid-template-rows: minmax(0, 1fr);
}
body:not(.auth-required) .media-viewer.preview-panel.is-canvas-preview {
grid-template-rows: minmax(0, 1fr);
}
body:not(.auth-required) .media-viewer.media-preview-panel {
width: min(1320px, calc(100vw - 32px)) !important;
max-height: calc(100dvh - 32px);
display: flex;
flex-direction: column;
}
body:not(.auth-required) .media-viewer .preview-stage,
body:not(.auth-required) .media-viewer .media-preview-stage {
border: 0;
border-radius: 0;
background:
radial-gradient(120% 90% at 50% 0%, var(--mv-stage-veil), transparent 62%),
var(--mv-stage);
padding: 64px 24px 24px;
}
body:not(.auth-required) .media-viewer .preview-stage {
min-height: 0;
}
body:not(.auth-required) .media-viewer .media-preview-stage {
gap: 12px;
align-items: center;
justify-content: center;
}
body:not(.auth-required) .media-viewer #previewImage,
body:not(.auth-required) .media-viewer .media-preview-stage :is(img, video) {
border-radius: 10px;
box-shadow: 0 0 0 1px var(--mv-media-ring), var(--mv-media-shadow);
}
body:not(.auth-required) .media-viewer-bar {
position: absolute;
left: 0;
right: 0;
top: 0;
z-index: 4;
display: flex;
align-items: center;
gap: 12px;
padding: 11px 13px 22px;
background: var(--mv-bar);
pointer-events: none;
}
body:not(.auth-required) .media-viewer-id {
min-width: 0;
display: flex;
align-items: baseline;
gap: 10px;
}
body:not(.auth-required) .media-viewer-id h2 {
margin: 0;
font-size: 14px;
font-weight: 800;
color: var(--mv-title);
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body:not(.auth-required) .media-viewer-meta {
flex: 0 0 auto;
font-size: 11.5px;
font-weight: 700;
color: var(--mv-meta);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
body:not(.auth-required) .media-viewer-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: 6px;
pointer-events: auto;
}
body:not(.auth-required) .media-viewer-btn {
width: 32px;
height: 32px;
min-height: 32px;
padding: 0;
border-radius: 9px;
border: 1px solid var(--mv-btn-border);
background: var(--mv-btn-bg);
color: var(--mv-btn-ink);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
body:not(.auth-required) .media-viewer-btn:hover {
background: var(--mv-btn-hover);
}
body:not(.auth-required) .media-viewer-btn:focus-visible {
outline: 2px solid #2f6db7;
outline-offset: 2px;
}
body:not(.auth-required) .media-viewer-btn svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
body:not(.auth-required) .media-viewer .preview-canvas-tools {
position: absolute;
left: 50%;
bottom: 16px;
transform: translateX(-50%);
z-index: 4;
max-width: calc(100% - 32px);
overflow-x: auto;
border-color: var(--mv-btn-border);
background: var(--mv-btn-bg);
backdrop-filter: blur(10px);
box-shadow: 0 16px 36px rgba(15, 35, 60, 0.18);
}
body.theme-dark:not(.auth-required) .media-viewer .preview-canvas-tools {
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
@media (max-width: 640px) {
body:not(.auth-required) .media-viewer.preview-panel,
body:not(.auth-required) .media-viewer.media-preview-panel {
width: calc(100vw - 12px) !important;
height: min(94dvh, calc(100dvh - 12px));
max-height: calc(100dvh - 12px);
border-radius: 14px;
}
body:not(.auth-required) .media-viewer .preview-stage,
body:not(.auth-required) .media-viewer .media-preview-stage {
padding: 56px 10px 12px;
}
body:not(.auth-required) .media-viewer-bar {
padding: 9px 10px 20px;
}
body:not(.auth-required) .media-viewer-id {
flex-direction: column;
align-items: flex-start;
gap: 1px;
}
}
body:not(.auth-required) .model-center-price-edit {
display: inline-flex;
align-items: center;
gap: 4px;
justify-self: end;
}
body:not(.auth-required) .model-center-price-input {
width: 76px;
padding: 4px 8px;
border: 1px solid var(--line, #e2e8f0);
border-radius: 8px;
background: var(--panel, #fff);
color: var(--text);
font-size: 15px;
font-weight: 700;
text-align: right;
font-variant-numeric: tabular-nums;
}
body:not(.auth-required) .model-center-price-input:focus {
border-color: var(--accent, #2f6db7);
outline: none;
box-shadow: 0 0 0 3px rgba(47, 109, 183, 0.16);
}
body:not(.auth-required) .model-center-price-input:disabled {
opacity: 0.6;
}
body:not(.auth-required) .model-center-price-more {
margin-top: 4px;
padding: 3px 9px;
border: 1px solid var(--line, #e2e8f0);
border-radius: 999px;
background: var(--panel, #fff);
color: var(--muted, #64748b);
font-size: 12px;
white-space: nowrap;
}
body:not(.auth-required) .model-center-price-more:hover {
border-color: var(--accent, #2f6db7);
color: var(--accent, #2f6db7);
}
.model-price-group-name {
margin-bottom: 6px;
color: var(--muted, #64748b);
font-size: 12px;
font-weight: 600;
}
.model-price-group-fields {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 8px;
}
.model-price-field {
display: grid;
grid-template-columns: minmax(0, 1fr) 72px auto;
align-items: center;
gap: 6px;
}
.model-price-field-label {
color: var(--text);
font-size: 13px;
font-variant-numeric: tabular-nums;
}
.model-price-field-unit {
color: var(--muted, #64748b);
font-size: 11px;
white-space: nowrap;
}
.model-price-field .model-center-price-input {
width: 100%;
font-size: 14px;
}
body:not(.auth-required) .model-route-card-compact {
padding: 12px 14px;
}
body:not(.auth-required) .model-route-card-compact.is-paused {
opacity: 0.68;
border-style: dashed;
}
body:not(.auth-required) .model-route-card-compact .model-route-enabled {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
body:not(.auth-required) #settingsTab [hidden],
body:not(.auth-required) #settingsTab .model-admin-hidden,
body:not(.auth-required) #settingsTab .settings-legacy-general,
body:not(.auth-required) #settingsTab .settings-legacy-global {
display: none !important;
}
body:not(.auth-required) #settingsTab.settings-panel.active {
--ma-ink: #0e1c2c;
--ma-muted: #6a809a;
--ma-faint: #94a8bd;
--ma-line: #e1eaf4;
--ma-card: #ffffff;
--ma-bg: #f7fafd;
--ma-accent: #2f6db7;
--ma-soft: #eef5fd;
--ma-price: #14539e;
--ma-cost: #a8610b;
display: block;
min-height: 100%;
padding: 12px;
background: transparent;
color: var(--ma-ink);
}
body:not(.auth-required) .model-admin-workbench {
width: 100%;
min-width: 0;
overflow: hidden;
border: 1px solid var(--ma-line);
border-radius: 8px;
background: var(--ma-bg);
box-shadow: var(--shadow-soft);
}
body:not(.auth-required) .model-admin-tabs {
display: inline-flex;
gap: 3px;
margin: 0 0 10px;
padding: 4px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--surface-2);
}
body:not(.auth-required) .model-admin-tabs button {
height: 32px;
padding: 0 14px;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--muted);
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
body:not(.auth-required) .model-admin-tabs button.is-active {
color: var(--accent-text);
background: var(--surface);
box-shadow: var(--shadow-card);
}
body:not(.auth-required) .model-admin-tabs button:focus-visible,
body:not(.auth-required) .ops-range button:focus-visible,
body:not(.auth-required) .ops-model-tools button:focus-visible,
body:not(.auth-required) .ops-signal:focus-visible,
body:not(.auth-required) .ops-refresh:focus-visible,
body:not(.auth-required) .ops-export:focus-visible,
body:not(.auth-required) .ops-show-all:focus-visible {
outline: 0;
box-shadow: var(--focus-ring);
}
body:not(.auth-required) .ops-overview-workbench {
--ops-s1: var(--accent);
--ops-s2: var(--highlight);
--ops-critical: var(--danger-text);
--ops-s1-track: color-mix(in srgb, var(--accent) 13%, transparent);
--ops-grid-line: color-mix(in srgb, var(--text) 8%, transparent);
--ops-baseline: color-mix(in srgb, var(--text) 18%, transparent);
--ops-hover-wash: color-mix(in srgb, var(--accent) 5%, transparent);
border: 1px solid var(--border);
border-radius: 18px;
background: var(--surface-2);
color: var(--text);
overflow: hidden;
}
body:not(.auth-required) .ops-page-head {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 22px;
padding: 28px;
border-bottom: 1px solid var(--border-soft);
background: var(--surface);
}
body:not(.auth-required) .ops-eyebrow { display: block; color: var(--accent-text); font-size: 12px; font-weight: 750; letter-spacing: .08em; }
body:not(.auth-required) .ops-page-title h2 { margin: 7px 0 8px; font-size: clamp(24px, 2vw, 32px); line-height: 1.3; letter-spacing: -.03em; }
body:not(.auth-required) .ops-page-title p { margin: 0; font-size: 14px; color: var(--muted); }
body:not(.auth-required) .ops-head-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-left: auto; }
body:not(.auth-required) .ops-refresh-meta { flex-basis: 100%; text-align: right; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
body:not(.auth-required) :is(.ops-range, .ops-model-tools) { display: inline-flex; align-items: center; gap: 3px; padding: 4px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 11px; }
body:not(.auth-required) :is(.ops-range, .ops-model-tools) button { min-height: 34px; border: 0; border-radius: 7px; padding: 0 13px; font-size: 13px; font-weight: 700; background: transparent; color: var(--muted); cursor: pointer; }
body:not(.auth-required) :is(.ops-range, .ops-model-tools) button.is-active { color: var(--accent-text); background: var(--surface); box-shadow: var(--shadow-card); }
body:not(.auth-required) :is(.ops-refresh, .ops-export) { min-height: 44px; padding: 0 14px; border-radius: 10px; font-size: 13px; }
body:not(.auth-required) .ops-overview-workbench :is(button, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
body:not(.auth-required) .ops-overview-body { display: grid; gap: 22px; padding: 24px 28px 28px; transition: opacity var(--motion-fast) ease; }
body:not(.auth-required) .ops-overview-body.is-loading { opacity: .65; }
body:not(.auth-required) .ops-window-line { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; color: var(--muted); font-size: 12px; }
body:not(.auth-required) .ops-window-line > :first-child { color: var(--text); font-size: 14px; font-weight: 700; }
body:not(.auth-required) .ops-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
body:not(.auth-required) .ops-card { min-width: 0; padding: 20px; display: grid; align-content: space-between; gap: 15px; min-height: 168px; border: 1px solid var(--border-soft); border-radius: 14px; background: var(--surface); }
body:not(.auth-required) .ops-card-primary { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 27%, var(--border-soft)); }
body:not(.auth-required) .ops-card-label { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; font-size: 14px; font-weight: 650; color: var(--muted); }
body:not(.auth-required) .ops-card-main { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; min-width: 0; }
body:not(.auth-required) .ops-card-value { font-size: clamp(30px, 2.5vw, 44px); line-height: 1.05; letter-spacing: -.035em; font-weight: 800; font-variant-numeric: tabular-nums; }
body:not(.auth-required) .ops-card-primary .ops-card-value { color: var(--accent-text); }
body:not(.auth-required) .ops-card-warn .ops-card-value { color: var(--warning-text); }
body:not(.auth-required) .ops-card-sub { color: var(--muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
body:not(.auth-required) .ops-card-spark { width: 74px; height: 30px; flex: 0 1 74px; min-width: 0; opacity: .75; }
body:not(.auth-required) .ops-card-spark polyline { fill: none; stroke: var(--ops-s1); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body:not(.auth-required) .ops-card-spark-consumption polyline { stroke: var(--ops-s2); }
body:not(.auth-required) .ops-delta { display: inline-flex; align-items: center; border-radius: 6px; padding: 3px 6px; font-size: 11px; line-height: 1.2; color: var(--muted); background: var(--surface-2); white-space: nowrap; }
body:not(.auth-required) .ops-delta-up { color: var(--ok-text); background: color-mix(in srgb, var(--ok) 9%, transparent); }
body:not(.auth-required) .ops-delta-down { color: var(--danger-text); background: color-mix(in srgb, var(--danger) 9%, transparent); }
body:not(.auth-required) .ops-delta-new { color: var(--accent-text); background: var(--ops-s1-track); }
body:not(.auth-required) .ops-block { min-width: 0; padding: 24px; border: 1px solid var(--border-soft); border-radius: 16px; background: var(--surface); scroll-margin-top: 20px; }
body:not(.auth-required) .ops-block-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; margin-bottom: 22px; }
body:not(.auth-required) .ops-block-head h3 { margin: 5px 0 0; color: var(--text); font-size: 21px; line-height: 1.4; letter-spacing: -.015em; }
body:not(.auth-required) .ops-block-head p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
body:not(.auth-required) .ops-period { padding: 5px 9px; border-radius: 7px; font-size: 12px; font-weight: 650; background: var(--surface-2); color: var(--muted); }
body:not(.auth-required) .ops-decision-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(310px, 1fr); align-items: stretch; gap: 20px; }
body:not(.auth-required) .ops-attention { display: flex; flex-direction: column; }
body:not(.auth-required) .ops-status-badge { display: inline-flex; align-items: center; padding: 6px 9px; border-radius: 7px; font-size: 12px; font-weight: 650; background: color-mix(in srgb, var(--ok) 9%, transparent); color: var(--ok-text); }
body:not(.auth-required) .ops-status-warn { background: color-mix(in srgb, var(--warning) 10%, transparent); color: var(--warning-text); }
body:not(.auth-required) .ops-status-critical { background: color-mix(in srgb, var(--danger) 8%, transparent); color: var(--danger-text); }
body:not(.auth-required) .ops-signals { display: grid; gap: 9px; }
body:not(.auth-required) .ops-signal { display: grid; grid-template-columns: 6px minmax(0, 1fr) 16px; align-items: center; gap: 11px; width: 100%; padding: 12px; border: 1px solid var(--border-soft); border-radius: 11px; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; transition: background var(--motion-fast); }
body:not(.auth-required) .ops-signal:hover { background: var(--ops-hover-wash); }
body:not(.auth-required) .ops-signal > i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
body:not(.auth-required) .ops-signal-critical > i { background: var(--danger); }
body:not(.auth-required) .ops-signal-warn > i { background: var(--warning); }
body:not(.auth-required) .ops-signal strong { display: block; font-size: 14px; line-height: 1.5; font-weight: 750; }
body:not(.auth-required) .ops-signal small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
body:not(.auth-required) .ops-signal b { color: var(--muted); font-size: 15px; font-weight: 500; }
body:not(.auth-required) .ops-quick-actions { display: flex; gap: 10px; margin-top: auto; padding-top: 18px; }
body:not(.auth-required) .ops-quick-actions button { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 13px; min-height: 42px; border: 1px solid var(--border-soft); border-radius: 9px; background: var(--surface-2); color: var(--accent-text); font-size: 13px; font-weight: 700; cursor: pointer; }
body:not(.auth-required) .ops-text-action { min-height: 36px; padding: 6px 2px; border: 0; background: transparent; color: var(--accent-text); font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; }
body:not(.auth-required) .ops-service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
body:not(.auth-required) .ops-service-panel { min-width: 0; }
body:not(.auth-required) .ops-service-panel + .ops-service-panel { padding-left: 26px; border-left: 1px solid var(--border-soft); }
body:not(.auth-required) .ops-section-title { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 12px; }
body:not(.auth-required) .ops-section-title h4, body:not(.auth-required) .ops-subhead { margin: 0; font-size: 15px; line-height: 1.6; }
body:not(.auth-required) .ops-section-title > span { font-size: 12px; color: var(--muted); }
body:not(.auth-required) .ops-health-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
body:not(.auth-required) .ops-health-chip { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 6px; font-size: 12px; background: var(--surface-2); color: var(--muted); }
body:not(.auth-required) .ops-health-chip.is-ok { background: color-mix(in srgb, var(--ok) 8%, transparent); color: var(--ok-text); }
body:not(.auth-required) .ops-health-chip.is-warn { background: color-mix(in srgb, var(--warning) 10%, transparent); color: var(--warning-text); }
body:not(.auth-required) .ops-routes { display: grid; gap: 9px; }
body:not(.auth-required) .ops-route { min-width: 0; display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--border-soft); border-left: 3px solid var(--warning); border-radius: 10px; background: var(--surface-2); }
body:not(.auth-required) .ops-route-bad { border-left-color: var(--danger); }
body:not(.auth-required) .ops-route-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
body:not(.auth-required) .ops-route-head strong { font-size: 14px; overflow-wrap: anywhere; }
body:not(.auth-required) .ops-route > span, body:not(.auth-required) .ops-route em { color: var(--muted); font-size: 12px; font-style: normal; line-height: 1.6; overflow-wrap: anywhere; }
body:not(.auth-required) .ops-balance-grid { display: grid; gap: 9px; }
body:not(.auth-required) .ops-balance-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, .8fr); align-items: start; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
body:not(.auth-required) .ops-balance-row:last-child { border-bottom: 0; }
body:not(.auth-required) .ops-balance-site { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
body:not(.auth-required) .ops-balance-site > i { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
body:not(.auth-required) .ops-balance-unavailable .ops-balance-site > i { background: var(--warning); }
body:not(.auth-required) :is(.ops-balance-critical, .ops-balance-error) .ops-balance-site > i { background: var(--danger); }
body:not(.auth-required) .ops-balance-site > span, body:not(.auth-required) .ops-balance-value { min-width: 0; display: grid; gap: 5px; }
body:not(.auth-required) .ops-balance-site strong { font-size: 13px; overflow-wrap: anywhere; }
body:not(.auth-required) .ops-balance-value { text-align: right; }
body:not(.auth-required) .ops-balance-value strong { font-size: 17px; font-variant-numeric: tabular-nums; }
body:not(.auth-required) .ops-balance-site small, body:not(.auth-required) .ops-balance-value small { color: var(--muted); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
body:not(.auth-required) .ops-balance-unavailable .ops-balance-value strong { color: var(--warning-text); }
body:not(.auth-required) :is(.ops-balance-critical, .ops-balance-error) .ops-balance-value strong { color: var(--danger-text); }
body:not(.auth-required) .ops-chart-grid { position: relative; display: grid; gap: 18px; }
body:not(.auth-required) .ops-chart { min-width: 0; padding: 14px 14px 10px; border: 1px solid var(--border-soft); border-radius: 11px; background: var(--surface-2); }
body:not(.auth-required) .ops-panel-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
body:not(.auth-required) .ops-panel-title { margin-right: auto; color: var(--text); font-size: 13px; font-weight: 750; }
body:not(.auth-required) .ops-key { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); }
body:not(.auth-required) .ops-key i { width: 7px; height: 7px; border-radius: 2px; }
body:not(.auth-required) .ops-key-jobs { background: var(--ops-s1); }
body:not(.auth-required) .ops-key-failed { background: var(--ops-critical); }
body:not(.auth-required) .ops-trend-svg { width: 100%; height: auto; display: block; overflow: visible; }
body:not(.auth-required) .ops-mark-jobs { fill: var(--ops-s1); }
body:not(.auth-required) .ops-mark-failed { fill: var(--ops-critical); }
body:not(.auth-required) .ops-mark-area { fill: var(--ops-s2); opacity: .1; }
body:not(.auth-required) .ops-mark-line { fill: none; stroke: var(--ops-s2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
body:not(.auth-required) .ops-mark-dot { fill: var(--ops-s2); stroke: var(--surface); stroke-width: 2; }
body:not(.auth-required) .ops-grid { stroke: var(--ops-grid-line); stroke-width: 1; }
body:not(.auth-required) .ops-baseline { stroke: var(--ops-baseline); stroke-width: 1; }
body:not(.auth-required) .ops-axis { fill: var(--muted); font-size: 11px; }
body:not(.auth-required) .ops-end-label { fill: var(--text); font-size: 12px; font-weight: 750; }
body:not(.auth-required) .ops-hover-col { fill: transparent; }
body:not(.auth-required) .ops-hover-col:hover, body:not(.auth-required) .ops-hover-col:focus { fill: var(--ops-hover-wash); }
body:not(.auth-required) .ops-tip[hidden] { display: none; }
body:not(.auth-required) .ops-tip { position: absolute; z-index: 5; display: grid; gap: 4px; padding: 12px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-popover); font-size: 12px; line-height: 1.5; pointer-events: none; white-space: nowrap; }
body:not(.auth-required) .ops-tip b { color: var(--muted); }
body:not(.auth-required) .ops-tip-bad { color: var(--danger-text); font-style: normal; }
body:not(.auth-required) .ops-table-scroll { max-width: 100%; overflow: auto; border: 1px solid var(--border-soft); border-radius: 10px; }
body:not(.auth-required) .ops-table { width: 100%; border-collapse: collapse; font-size: 13px; }
body:not(.auth-required) .ops-table th { padding: 12px; text-align: left; white-space: nowrap; color: var(--muted); font-size: 12px; font-weight: 650; background: var(--surface-2); border-bottom: 1px solid var(--border-soft); }
body:not(.auth-required) .ops-table td { padding: 15px 12px; border-bottom: 1px solid var(--border-soft); overflow-wrap: anywhere; }
body:not(.auth-required) .ops-table .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
body:not(.auth-required) .ops-table tbody tr:last-child td { border-bottom: 0; }
body:not(.auth-required) .ops-table tbody tr:hover td { background: var(--ops-hover-wash); }
body:not(.auth-required) .ops-model-cell { display: grid; gap: 7px; min-width: 0; max-width: 340px; font-weight: 650; }
body:not(.auth-required) .ops-model-cell > span { white-space: normal; overflow-wrap: anywhere; }
body:not(.auth-required) .ops-cost-total { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; }
body:not(.auth-required) .ops-cost-total small { font-size: 11px; color: var(--muted); }
body:not(.auth-required) .ops-share { display: block; width: min(150px, 100%); height: 4px; border-radius: 999px; background: var(--ops-s1-track); overflow: hidden; }
body:not(.auth-required) .ops-share i { display: block; height: 100%; border-radius: inherit; background: var(--ops-s1); }
body:not(.auth-required) .ops-revenue-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; color: var(--muted); font-size: 12px; line-height: 1.6; }
body:not(.auth-required) .ops-profit-num { color: var(--ok-text); }
body:not(.auth-required) .ops-warn-text { color: var(--warning-text); }
body:not(.auth-required) .ops-muted { color: var(--muted); }
body:not(.auth-required) .ops-detail { margin-top: 16px; }
body:not(.auth-required) .ops-detail > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 0; font-size: 13px; font-weight: 700; cursor: pointer; list-style: none; }
body:not(.auth-required) .ops-detail > summary::-webkit-details-marker { display: none; }
body:not(.auth-required) .ops-detail > summary::after { content: "+"; color: var(--muted); font-size: 22px; font-weight: 400; }
body:not(.auth-required) .ops-detail[open] > summary::after { content: "−"; }
body:not(.auth-required) .ops-detail > summary > span:last-of-type { margin-left: auto; color: var(--muted); font-size: 12px; font-weight: 500; }
body:not(.auth-required) .ops-audience { margin-top: 0; }
body:not(.auth-required) .ops-audience > summary { padding: 0; }
body:not(.auth-required) .ops-audience > summary strong { display: block; margin-top: 5px; color: var(--text); font-size: 18px; }
body:not(.auth-required) .ops-audience[open] .ops-detail-hint { display: none; }
body:not(.auth-required) .ops-audience-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 24px; }
body:not(.auth-required) .ops-audience-grid > section { min-width: 0; }
body:not(.auth-required) .ops-dim-list { display: grid; gap: 16px; }
body:not(.auth-required) .ops-dim-row { display: grid; gap: 5px; }
body:not(.auth-required) .ops-dim-row-top { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
body:not(.auth-required) .ops-dim-row .ops-share { width: 100%; }
body:not(.auth-required) .ops-dim-sub { color: var(--muted); font-size: 12px; }
body:not(.auth-required) .ops-dim-sub i { font-style: normal; }
body:not(.auth-required) .ops-dim-list + .ops-subhead { margin: 24px 0 14px; }
body:not(.auth-required) .ops-fail-list, body:not(.auth-required) .ops-storage-list { display: grid; gap: 12px; }
body:not(.auth-required) .ops-fail-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 12px; border-radius: 9px; background: var(--surface-2); font-size: 12px; line-height: 1.6; }
body:not(.auth-required) .ops-fail-row em { min-width: 0; font-style: normal; overflow-wrap: anywhere; }
body:not(.auth-required) .ops-fail-row b { color: var(--danger-text); }
body:not(.auth-required) .ops-storage-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 12px; font-size: 12px; }
body:not(.auth-required) .ops-storage-name { font-size: 13px; font-weight: 650; overflow-wrap: anywhere; }
body:not(.auth-required) .ops-storage-num { color: var(--muted); grid-column: 2; grid-row: 1; }
body:not(.auth-required) .ops-storage-row .ops-share { grid-column: 1 / -1; width: 100%; }
body:not(.auth-required) .ops-footnote { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
body:not(.auth-required) .ops-clear { display: grid; gap: 7px; padding: 24px 16px; border: 1px dashed var(--border-soft); border-radius: 10px; }
body:not(.auth-required) .ops-clear strong { font-size: 14px; font-weight: 650; }
body:not(.auth-required) .ops-clear span { color: var(--muted); font-size: 12px; line-height: 1.6; }
body:not(.auth-required) .ops-empty { padding: 24px 14px; color: var(--muted); font-size: 13px; line-height: 1.7; text-align: center; }
body:not(.auth-required) .ops-load-error { display: grid; justify-items: center; gap: 14px; }
@media (min-width: 1700px) {
body:not(.auth-required) .ops-chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1150px) {
body:not(.auth-required) .ops-decision-grid { grid-template-columns: minmax(0, 1fr); }
body:not(.auth-required) .ops-chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body:not(.auth-required) .ops-signals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body:not(.auth-required) .ops-quick-actions { justify-content: flex-end; }
body:not(.auth-required) .ops-quick-actions button { flex: 0 1 180px; }
body:not(.auth-required) .ops-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body:not(.auth-required) .ops-audience-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
body:not(.auth-required) .ops-page-head { padding: 20px 16px; gap: 20px; }
body:not(.auth-required) .ops-page-title h2 { font-size: 24px; max-width: 12em; }
body:not(.auth-required) .ops-head-actions { width: 100%; justify-content: stretch; }
body:not(.auth-required) .ops-range { width: 100%; }
body:not(.auth-required) .ops-range button { flex: 1; min-height: 40px; }
body:not(.auth-required) :is(.ops-refresh, .ops-export) { flex: 1; }
body:not(.auth-required) .ops-refresh-meta { text-align: left; }
body:not(.auth-required) .ops-overview-body { padding: 18px 12px; gap: 16px; }
body:not(.auth-required) .ops-cards { gap: 10px; }
body:not(.auth-required) .ops-card { padding: 14px 12px; min-height: 160px; gap: 12px; }
body:not(.auth-required) .ops-card-label { align-items: flex-start; font-size: 13px; }
body:not(.auth-required) .ops-card-main { flex-wrap: wrap; }
body:not(.auth-required) .ops-card-value { font-size: 32px; }
body:not(.auth-required) .ops-card-spark { width: 40px; height: 20px; flex: 0 1 40px; }
body:not(.auth-required) .ops-card-sub { font-size: 11px; }
body:not(.auth-required) .ops-block { padding: 18px 14px; border-radius: 12px; }
body:not(.auth-required) .ops-block-head { margin-bottom: 18px; }
body:not(.auth-required) .ops-block-head h3 { font-size: 18px; }
body:not(.auth-required) .ops-decision-grid { gap: 16px; }
body:not(.auth-required) :is(.ops-chart-grid, .ops-signals, .ops-service-grid) { grid-template-columns: minmax(0, 1fr); }
body:not(.auth-required) .ops-chart { padding: 12px 8px 8px; }
body:not(.auth-required) .ops-axis { font-size: 15px; }
body:not(.auth-required) .ops-end-label { font-size: 16px; }
body:not(.auth-required) .ops-quick-actions button { flex: 1; min-height: 44px; }
body:not(.auth-required) .ops-service-panel + .ops-service-panel { padding: 22px 0 0; border-left: 0; border-top: 1px solid var(--border-soft); }
body:not(.auth-required) .ops-health-chips { justify-content: flex-start; }
body:not(.auth-required) .ops-model-tools { width: 100%; }
body:not(.auth-required) .ops-model-tools button { flex: 1; min-height: 38px; }
body:not(.auth-required) .ops-model-table, body:not(.auth-required) .ops-model-table tbody { display: block; }
body:not(.auth-required) .ops-model-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
body:not(.auth-required) .ops-model-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 14px; gap: 14px 10px; border-bottom: 1px solid var(--border-soft); }
body:not(.auth-required) .ops-model-table tr:last-child { border-bottom: 0; }
body:not(.auth-required) .ops-model-table td { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 0; border: 0; text-align: left; white-space: normal; font-size: 13px; }
body:not(.auth-required) .ops-model-table td:first-child { grid-column: 1 / -1; font-size: 15px; }
body:not(.auth-required) .ops-model-table td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 11px; }
body:not(.auth-required) .ops-model-table .ops-cost-total { align-items: flex-start; }
body:not(.auth-required) .ops-model-table .ops-model-cell { max-width: none; }
body:not(.auth-required) .ops-audience > summary strong { font-size: 16px; }
body:not(.auth-required) .ops-audience .ops-detail-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
body:not(.auth-required) .ops-overview-body, body:not(.auth-required) .ops-signal { transition: none; }
}
body:not(.auth-required) .model-admin-head {
display: flex;
align-items: center;
gap: 16px;
min-height: 56px;
padding: 10px 16px 8px;
}
body:not(.auth-required) .model-admin-head-title {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
}
body:not(.auth-required) .model-admin-head-title strong {
color: var(--ma-ink);
font-size: 17px;
font-weight: 900;
line-height: 1.2;
white-space: nowrap;
}
body:not(.auth-required) .model-admin-head-title > span:last-child {
overflow: hidden;
color: var(--ma-faint);
font-size: 11.5px;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
body:not(.auth-required) .model-admin-heading-icon {
width: 17px;
height: 17px;
flex: 0 0 17px;
color: var(--ma-accent);
}
body:not(.auth-required) .model-admin-heading-icon svg {
width: 17px;
height: 17px;
fill: currentColor;
stroke: none;
}
body:not(.auth-required) .model-admin-summary {
display: flex;
align-items: center;
gap: 6px;
margin-left: auto;
}
body:not(.auth-required) .model-admin-stat {
display: inline-flex;
align-items: baseline;
gap: 5px;
height: 30px;
padding: 0 10px;
border: 1px solid var(--ma-line);
border-radius: 8px;
background: var(--ma-card);
color: var(--ma-muted);
white-space: nowrap;
}
body:not(.auth-required) .model-admin-stat strong {
color: var(--ma-ink);
font-size: 14px;
font-weight: 900;
font-variant-numeric: tabular-nums;
}
body:not(.auth-required) .model-admin-stat span {
font-size: 11.5px;
font-weight: 750;
}
body:not(.auth-required) .model-admin-stat.is-enabled strong {
color: #087b59;
}
body:not(.auth-required) .model-admin-stat.is-disabled strong {
color: #b4474b;
}
body:not(.auth-required) .model-admin-toolbar {
display: flex;
align-items: center;
gap: 8px;
padding: 0 16px 10px;
border-bottom: 1px solid var(--ma-line);
}
body:not(.auth-required) .model-admin-search {
display: flex;
flex: 1 1 260px;
align-items: center;
gap: 7px;
min-width: 180px;
height: 32px;
padding: 0 10px;
border: 1px solid var(--ma-line);
border-radius: 8px;
background: var(--ma-card);
}
body:not(.auth-required) .model-admin-search:focus-within {
border-color: #a8cbec;
box-shadow: 0 0 0 3px rgba(47, 109, 183, 0.12);
}
body:not(.auth-required) .model-admin-search-icon {
display: flex;
width: 15px;
height: 15px;
flex: 0 0 15px;
color: var(--ma-faint);
}
body:not(.auth-required) .model-admin-search-icon svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
body:not(.auth-required) .model-admin-search input[type="search"] {
width: 100%;
min-width: 0;
height: 30px;
min-height: 30px;
padding: 0 !important;
border: 0 !important;
outline: 0;
background: transparent !important;
box-shadow: none !important;
color: var(--ma-ink);
font-size: 13px;
font-weight: 650;
}
body:not(.auth-required) .model-admin-search input::placeholder {
color: var(--ma-faint);
}
body:not(.auth-required) .model-admin-filters {
display: flex;
align-items: center;
gap: 6px;
}
body:not(.auth-required) button.model-admin-filter {
display: inline-flex;
align-items: center;
gap: 5px;
height: 30px;
min-height: 30px;
padding: 0 10px;
border: 1px solid var(--ma-line);
border-radius: 999px;
background: var(--ma-card);
color: #4a627c;
font-size: 12.5px;
font-weight: 800;
white-space: nowrap;
}
body:not(.auth-required) button.model-admin-filter::after {
content: attr(data-count);
color: var(--ma-faint);
font-size: 10.5px;
font-weight: 850;
font-variant-numeric: tabular-nums;
}
body:not(.auth-required) button.model-admin-filter:hover {
border-color: #c7dbef;
background: var(--ma-soft);
}
body:not(.auth-required) button.model-admin-filter.is-active {
border-color: var(--ma-accent);
background: var(--ma-accent);
color: #ffffff;
}
body:not(.auth-required) button.model-admin-filter.is-active::after {
color: rgba(255, 255, 255, 0.8);
}
body:not(.auth-required) .model-admin-toolbar-actions {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
}
body:not(.auth-required) .model-admin-price-mode {
display: inline-flex;
align-items: center;
gap: 2px;
height: 30px;
padding: 3px;
border: 1px solid var(--ma-line);
border-radius: 999px;
background: var(--ma-soft);
}
body:not(.auth-required) .model-admin-price-mode button {
height: 22px;
min-height: 22px;
padding: 0 9px;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--ma-muted);
font-size: 11.5px;
font-weight: 850;
}
body:not(.auth-required) .model-admin-price-mode button:hover {
background: color-mix(in srgb, var(--ma-card) 72%, transparent);
color: var(--ma-ink);
}
body:not(.auth-required) .model-admin-price-mode button.is-active {
background: var(--ma-card);
color: var(--ma-accent);
box-shadow: 0 1px 4px rgba(24, 52, 84, 0.14);
}
body:not(.auth-required) .model-admin-price-mode button:focus-visible {
outline: 0;
box-shadow: var(--focus-ring);
}
body:not(.auth-required) #modelAdminWorkbench[data-price-mode="cost"] .model-admin-price-mode button[data-model-price-mode="cost"].is-active {
background: var(--ma-cost);
color: #ffffff;
}
body:not(.auth-required) .model-admin-status-filter select {
width: auto;
min-width: 106px;
height: 30px;
min-height: 30px;
padding: 0 28px 0 11px !important;
border: 1px solid var(--ma-line);
border-radius: 999px;
background-color: var(--ma-card);
color: #4a627c;
font-size: 12px;
font-weight: 800;
}
body:not(.auth-required) .model-admin-status-filter > .sr-only,
body:not(.auth-required) #modelRouteSummary,
body:not(.auth-required) .model-route-price > .sr-only {
display: none !important;
}
body:not(.auth-required) .model-admin-body {
min-width: 0;
padding: 0 16px 16px;
}
body:not(.auth-required) .model-admin-section,
body:not(.auth-required) .model-admin-route-section,
body:not(.auth-required) .model-route-panel {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
body:not(.auth-required) .model-route-panel {
display: flex;
flex-direction: column;
gap: 13px;
}
body:not(.auth-required) .model-admin-group-label {
display: flex;
align-items: center;
gap: 7px;
min-height: 39px;
margin: 0;
padding: 10px 4px 6px;
color: var(--ma-muted);
font-size: 12.5px;
font-weight: 850;
}
body:not(.auth-required) .model-admin-group-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
color: var(--ma-accent);
}
body:not(.auth-required) .model-admin-group-icon .ui-icon,
body:not(.auth-required) .model-admin-group-icon svg {
width: 15px;
height: 15px;
}
body:not(.auth-required) .model-admin-group-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 6px;
border-radius: 999px;
background: var(--ma-soft);
color: var(--ma-muted);
font-size: 10.5px;
font-weight: 850;
font-variant-numeric: tabular-nums;
}
body:not(.auth-required) .model-admin-group-label small {
margin-left: auto;
color: var(--ma-faint);
font-size: 11.5px;
font-weight: 750;
}
body:not(.auth-required) .model-admin-default {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: 10px;
padding: 0 4px 0 9px;
border-radius: 999px;
background: var(--ma-soft);
color: var(--ma-muted);
font-size: 10.5px;
font-weight: 850;
white-space: nowrap;
}
body:not(.auth-required) .model-admin-default-select {
max-width: 168px;
height: 22px;
padding: 0 18px 0 4px;
border: 0;
border-radius: 999px;
background-color: transparent;
color: var(--ma-ink);
font-size: 11px;
font-weight: 850;
text-overflow: ellipsis;
}
body:not(.auth-required) .model-admin-default-select:focus-visible {
outline: 2px solid var(--ma-accent);
outline-offset: 1px;
}
body:not(.auth-required) .model-admin-default-select:disabled {
opacity: .6;
}
body:not(.auth-required) .model-admin-group-card {
overflow: hidden;
border: 1px solid var(--ma-line);
border-radius: 8px;
background: var(--ma-card);
}
body:not(.auth-required) .model-route-card.model-route-row {
position: relative;
display: grid;
grid-template-columns: 38px minmax(220px, 1fr) minmax(0, max-content) max-content;
gap: 12px;
align-items: center;
min-height: 68px;
margin: 0;
padding: 9px 14px;
border: 0;
border-top: 1px solid var(--ma-line);
border-radius: 0;
background: var(--ma-card);
box-shadow: none;
opacity: 1;
transition: background 140ms ease, transform 160ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
body:not(.auth-required) .model-route-drag {
position: absolute;
top: 1px;
bottom: 1px;
left: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 14px;
color: var(--ma-muted, #94a3b8);
opacity: 0.42;
cursor: grab;
touch-action: none;               
transition: opacity 140ms ease, color 140ms ease;
}
body:not(.auth-required) .model-route-row:hover .model-route-drag {
opacity: 1;
color: var(--ma-accent, #2f6db7);
}
body:not(.auth-required) .model-route-drag svg {
width: 14px;
height: 18px;
}
body:not(.auth-required) .model-route-card.model-route-row.dragging > * {
visibility: hidden;
}
body:not(.auth-required) .model-route-card.model-route-row.dragging {
background: var(--ma-soft);
outline: 1px dashed var(--ma-accent);   
outline-offset: -7px;
}
body:not(.auth-required) #modelRoutePanel[data-sorting="1"],
body:not(.auth-required) #modelRoutePanel[data-sorting="1"] .model-route-drag {
cursor: grabbing;
}
body:not(.auth-required) #modelRoutePanel[data-sorting="1"] .model-route-card.model-route-row:hover {
background: var(--ma-card);
}
body:not(.auth-required) #modelRoutePanel[data-sorting="1"] .model-route-card.model-route-row:hover .model-rate-tier {
border-color: var(--ma-line);
background: transparent;
}
body:not(.auth-required) .model-route-card.model-route-row.model-route-sort-ghost {
border-top: 0;
border-radius: 10px;
background: #ffffff;
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.22);
color: #0e1c2c;
opacity: 1;
cursor: grabbing;
transform: scale(1.012);                
transition: none;                       
}
body.theme-dark:not(.auth-required) .model-route-card.model-route-row.model-route-sort-ghost {
background: #252a34;
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
color: #e8eef8;
}
body:not(.auth-required) .model-admin-order-actions {
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: 10px;
}
body:not(.auth-required) .model-admin-order-actions em {
color: #b45309;
font-size: 11.5px;
font-style: normal;
font-weight: 700;
}
body:not(.auth-required) .model-admin-order-actions button {
height: 26px;
padding: 0 10px;
border: 1px solid var(--ma-line);
border-radius: 7px;
background: var(--ma-card);
color: var(--ma-ink);
font-size: 11.5px;
font-weight: 700;
}
body:not(.auth-required) .model-admin-order-save {
border-color: var(--ma-accent);
background: var(--ma-accent);
color: #fff;
}
body:not(.auth-required) .model-admin-order-actions button[disabled] {
opacity: 0.6;
}
body.theme-dark:not(.auth-required) .model-admin-order-actions em {
color: #f0b866;
}
body:not(.auth-required) .model-route-card.model-route-row:first-child {
border-top: 0;
}
body:not(.auth-required) .model-route-card.model-route-row:hover {
background: #f8fbff;
}
body:not(.auth-required) .model-route-card.model-route-row:hover .model-rate-tier {
border-color: #c9dcf0;
background: #e6f1fd;
}
body:not(.auth-required) .model-route-card.model-route-row.is-paused {
border-style: solid;
background: #fbfcfe;
}
body:not(.auth-required) .model-route-card.model-route-row.is-paused .model-route-logo,
body:not(.auth-required) .model-route-card.model-route-row.is-paused .model-route-copy,
body:not(.auth-required) .model-route-card.model-route-row.is-paused .model-route-price {
opacity: 0.58;
}
body:not(.auth-required) .model-route-logo {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
overflow: hidden;
border: 1px solid var(--ma-line);
border-radius: 8px;
background: var(--ma-soft);
color: var(--ma-accent);
}
body:not(.auth-required) .model-route-logo > .ui-icon,
body:not(.auth-required) .model-route-logo > .model-logo {
width: 100%;
height: 100%;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
body:not(.auth-required) .model-route-logo .ui-icon svg,
body:not(.auth-required) .model-route-logo > svg {
width: 19px;
height: 19px;
}
body:not(.auth-required) .model-route-logo .model-logo img {
width: 21px;
height: 21px;
object-fit: contain;
}
body:not(.auth-required) .model-route-copy {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
body:not(.auth-required) .model-route-copy strong {
overflow: hidden;
color: var(--ma-ink);
font-size: 14px;
font-weight: 820;
line-height: 1.3;
text-overflow: ellipsis;
white-space: nowrap;
}
body:not(.auth-required) .model-route-copy > span {
overflow: hidden;
color: var(--ma-faint);
font-size: 11.5px;
font-weight: 700;
line-height: 1.3;
text-overflow: ellipsis;
white-space: nowrap;
}
body:not(.auth-required) .model-route-price {
display: flex;
align-items: center;
justify-content: flex-end;
min-width: 0;
}
body:not(.auth-required) .model-rate-inline-fields,
body:not(.auth-required) .model-rate-preview {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
gap: 7px;
min-width: 0;
}
body:not(.auth-required) .model-rate-tier {
box-sizing: border-box;
display: inline-flex;
flex: 0 0 auto;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
width: 74px;
min-width: 74px;
height: 52px;
padding: 4px 7px;
overflow: hidden;
border: 1px solid #dfeaf7;
border-radius: 8px;
background: var(--ma-soft);
cursor: text;
}
body:not(.auth-required) .model-rate-tier.is-preview {
cursor: default;
}
body:not(.auth-required) .model-rate-tier-value {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 3px;
width: 100%;
min-width: 0;
color: var(--ma-price);
}
body:not(.auth-required) .model-rate-tier-value b,
body:not(.auth-required) .model-rate-tier .model-center-price-input {
width: 45px;
min-width: 0;
height: 24px !important;
min-height: 24px !important;
padding: 0 !important;
border: 0 !important;
outline: 0;
background: transparent !important;
box-shadow: none !important;
color: var(--ma-price);
font-size: 15.5px;
font-weight: 900;
line-height: 20px;
text-align: right;
font-variant-numeric: tabular-nums;
appearance: textfield;
}
body:not(.auth-required) .model-rate-tier .model-center-price-input::-webkit-inner-spin-button,
body:not(.auth-required) .model-rate-tier .model-center-price-input::-webkit-outer-spin-button {
margin: 0;
appearance: none;
}
body:not(.auth-required) .model-rate-tier:focus-within {
border-color: #a8cbec;
box-shadow: 0 0 0 3px rgba(47, 109, 183, 0.12);
}
body:not(.auth-required) #modelAdminWorkbench[data-price-mode="cost"] .model-rate-tier {
border-color: color-mix(in srgb, var(--ma-cost) 25%, var(--ma-line));
background: color-mix(in srgb, var(--ma-cost) 9%, var(--ma-card));
}
body:not(.auth-required) #modelAdminWorkbench[data-price-mode="cost"] .model-rate-tier-value,
body:not(.auth-required) #modelAdminWorkbench[data-price-mode="cost"] .model-rate-tier .model-center-price-input,
body:not(.auth-required) #modelAdminWorkbench[data-price-mode="cost"] .model-rate-tier-points {
color: var(--ma-cost);
}
body:not(.auth-required) #modelAdminWorkbench[data-price-mode="cost"] .model-rate-tier:focus-within {
border-color: color-mix(in srgb, var(--ma-cost) 62%, var(--ma-line));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ma-cost) 16%, transparent);
}
body:not(.auth-required) .model-rate-tier-points {
display: flex;
width: 12px;
height: 12px;
flex: 0 0 12px;
color: var(--ma-price);
}
body:not(.auth-required) .model-rate-tier-points svg {
width: 12px;
height: 12px;
fill: currentColor;
stroke: none;
}
body:not(.auth-required) .model-rate-tier em {
display: block;
width: 100%;
overflow: hidden;
color: var(--ma-muted);
font-size: 10px;
font-style: normal;
font-weight: 750;
line-height: 1.2;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
body:not(.auth-required) .model-rate-summary {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 7px;
min-width: 0;
}
body:not(.auth-required) button.model-center-price-more {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
height: 32px;
min-height: 32px;
margin: 0;
padding: 0 10px;
border: 1px solid #bdd4ec;
border-radius: 8px;
background: #f4f9ff;
color: var(--ma-accent);
font-size: 12px;
font-weight: 820;
white-space: nowrap;
}
body:not(.auth-required) button.model-center-price-more:hover {
border-color: #91b8df;
background: #e9f3fd;
color: #245f9f;
}
body:not(.auth-required) .model-center-price-more .ui-icon,
body:not(.auth-required) .model-center-price-more svg {
width: 14px;
height: 14px;
}
body:not(.auth-required) .model-rate-unavailable {
display: inline-flex;
flex-direction: column;
align-items: flex-end;
gap: 1px;
color: var(--ma-muted);
}
body:not(.auth-required) .model-rate-unavailable strong {
font-size: 12px;
}
body:not(.auth-required) .model-rate-unavailable small {
color: var(--ma-faint);
font-size: 10.5px;
}
body:not(.auth-required) .model-route-state {
display: flex;
align-items: center;
gap: 8px;
justify-content: flex-end;
}
body:not(.auth-required) .model-route-health {
grid-column: 2 / -1;
min-width: 0;
}
body:not(.auth-required) .model-route-row .model-route-enabled {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 7px;
min-height: 28px;
padding: 0;
color: #087b59;
font-size: 12px;
font-weight: 820;
cursor: pointer;
}
body:not(.auth-required) .model-route-row.is-paused .model-route-enabled {
color: #b4474b;
}
body:not(.auth-required) .model-route-row .model-route-enabled.err {
color: #b42318;
}
body:not(.auth-required) .model-route-row .model-route-enabled.muted {
color: var(--ma-muted);
}
body:not(.auth-required) .model-route-enabled-input {
position: absolute;
width: 1px !important;
height: 1px !important;
opacity: 0;
pointer-events: none;
}
body:not(.auth-required) .model-route-switch {
position: relative;
width: 42px;
height: 24px;
flex: 0 0 42px;
border-radius: 999px;
background: #b9c7d5;
box-shadow: inset 0 0 0 1px rgba(43, 67, 91, 0.08);
transition: background 150ms ease;
}
body:not(.auth-required) .model-route-switch::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
transition: transform 150ms ease;
}
body:not(.auth-required) .model-route-enabled-input:checked + .model-route-switch {
background: #0c9470;
}
body:not(.auth-required) .model-route-enabled-input:checked + .model-route-switch::after {
transform: translateX(18px);
}
body:not(.auth-required) .model-route-enabled-input:focus-visible + .model-route-switch {
outline: 2px solid var(--ma-accent);
outline-offset: 2px;
}
body:not(.auth-required) .model-route-status:empty {
display: none;
}
body:not(.auth-required) .model-route-status:not(:empty) {
grid-column: 2 / -1;
color: var(--ma-muted);
font-size: 11px;
}
body:not(.auth-required) .model-route-panel > .empty-row {
margin-top: 14px;
padding: 30px;
border: 1px dashed #d8e5f1;
border-radius: 8px;
background: var(--ma-card);
color: var(--ma-faint);
font-size: 13px;
font-weight: 700;
text-align: center;
}
body:not(.auth-required) .model-route-inline-editor {
grid-column: 1 / -1;
min-width: 0;
margin: 3px -14px -9px;
padding: 11px 14px 14px 64px;
border-top: 1px solid #dce8f4;
background: #f6faff;
}
body:not(.auth-required) .model-route-inline-editor[hidden] {
display: none !important;
}
body:not(.auth-required) .model-route-inline-editor-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 30px;
margin-bottom: 6px;
color: var(--ma-muted);
}
body:not(.auth-required) .model-route-inline-editor-head > div {
display: flex;
align-items: baseline;
gap: 8px;
}
body:not(.auth-required) .model-route-inline-editor-head strong {
color: var(--ma-ink);
font-size: 12px;
font-weight: 850;
}
body:not(.auth-required) .model-route-inline-editor-head span {
color: var(--ma-faint);
font-size: 10.5px;
font-weight: 700;
}
body:not(.auth-required) .model-route-inline-note {
overflow: hidden;
max-width: 45%;
text-overflow: ellipsis;
white-space: nowrap;
}
body:not(.auth-required) .model-route-manage {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border: 1px solid #d4e2f2;
border-radius: 8px;
background: #fff;
color: var(--ma-muted);
font-size: 11px;
font-weight: 800;
cursor: pointer;
}
body:not(.auth-required) .model-route-manage:hover {
border-color: #9fc2e8;
color: var(--ma-ink);
}
body:not(.auth-required) .model-route-manage-field {
display: grid;
gap: 4px;
margin-bottom: 8px;
}
body:not(.auth-required) .model-route-manage-field > span {
color: var(--ma-faint);
font-size: 10.5px;
font-weight: 700;
}
body:not(.auth-required) .model-route-manage-field input,
body:not(.auth-required) .model-route-manage-field select,
body:not(.auth-required) .model-route-manage-field textarea {
width: 100%;
min-width: 0;
padding: 7px 10px;
border: 1px solid #d4e2f2;
border-radius: 8px;
background: #fff;
color: var(--ma-ink);
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
font-size: 12px;
resize: vertical;
}
body:not(.auth-required) .model-route-manage-actions {
display: flex;
align-items: center;
gap: 10px;
}
body:not(.auth-required) .model-route-manage-danger {
border-color: #f3c2c2;
color: #c0392b;
}
body:not(.auth-required) .model-route-manage-danger:hover {
border-color: #e08a8a;
background: #fdf3f3;
}
body:not(.auth-required) .model-route-manage-status {
color: var(--ma-faint);
font-size: 11px;
font-weight: 700;
}
body:not(.auth-required) .model-route-inline-groups {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
border-top: 1px solid var(--ma-line);
}
body:not(.auth-required) .model-price-group {
min-width: 0;
padding: 8px 12px 0;
border-left: 1px solid var(--ma-line);
}
body:not(.auth-required) .model-price-group:first-child {
padding-left: 0;
border-left: 0;
}
body:not(.auth-required) .model-price-group-name {
display: flex;
align-items: center;
gap: 6px;
min-height: 26px;
color: var(--ma-muted);
}
body:not(.auth-required) .model-price-group-name strong {
color: var(--ma-ink);
font-size: 11.5px;
font-weight: 820;
}
body:not(.auth-required) .model-price-group-name span {
display: inline-flex;
align-items: center;
height: 18px;
padding: 0 6px;
border-radius: 999px;
background: #eef5fd;
color: #5a789a;
font-size: 10.5px;
font-weight: 800;
}
body:not(.auth-required) .model-price-group-fields {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 0;
}
body:not(.auth-required) .model-price-field {
display: grid;
align-items: center;
grid-template-columns: minmax(0, 1fr) minmax(92px, auto);
gap: 10px;
min-height: 42px;
padding: 6px 8px 6px 0;
border-top: 1px solid var(--ma-line);
}
body:not(.auth-required) .model-price-field-label {
overflow: hidden;
color: var(--ma-ink);
font-size: 12px;
font-weight: 750;
text-overflow: ellipsis;
white-space: nowrap;
}
body:not(.auth-required) .model-price-field-control {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 5px;
min-width: 0;
}
body:not(.auth-required) .model-price-field .model-center-price-input {
width: 72px;
height: 30px;
min-height: 30px;
padding: 0 8px !important;
border-color: var(--ma-line);
background: #f9fbfe;
color: #14539e;
font-size: 14px;
font-weight: 850;
}
body:not(.auth-required) .model-price-field .model-center-price-input:focus {
border-color: #75a8dc;
outline: 2px solid rgba(47, 109, 183, 0.12);
outline-offset: 0;
}
body:not(.auth-required) .model-price-field-unit {
color: var(--ma-faint);
font-size: 10.5px;
}
body.theme-dark:not(.auth-required) #settingsTab.settings-panel.active {
--ma-ink: #e8eef8;
--ma-muted: #93a6bd;
--ma-faint: #7b8da0;
--ma-line: #454c5c;
--ma-card: #252a34;
--ma-bg: #1b1f28;
--ma-accent: #4f8fd4;
--ma-soft: rgba(79, 143, 212, 0.14);
--ma-price: #8dc0f0;
--ma-cost: #f0b866;
}
body.theme-dark:not(.auth-required) .model-admin-workbench {
border-color: var(--ma-line);
box-shadow: 0 22px 60px rgba(0, 0, 0, 0.35);
}
body.theme-dark:not(.auth-required) .model-route-inline-editor {
border-color: var(--ma-line);
background: rgba(79, 143, 212, 0.08);
}
body.theme-dark:not(.auth-required) .model-route-manage,
body.theme-dark:not(.auth-required) .model-route-manage-field input,
body.theme-dark:not(.auth-required) .model-route-manage-field select,
body.theme-dark:not(.auth-required) .model-route-manage-field textarea {
border-color: var(--ma-line);
background: rgba(15, 23, 42, 0.55);
color: var(--ma-ink);
}
body.theme-dark:not(.auth-required) .model-route-manage-danger {
border-color: rgba(224, 138, 138, 0.55);
color: #e08a8a;
}
body.theme-dark:not(.auth-required) .model-route-manage-danger:hover {
background: rgba(192, 57, 43, 0.14);
}
body.theme-dark:not(.auth-required) .model-route-card.model-route-row:hover {
background: rgba(255, 255, 255, 0.04);
}
body.theme-dark:not(.auth-required) .model-route-card.model-route-row.is-paused {
background: rgba(255, 255, 255, 0.02);
}
body.theme-dark:not(.auth-required) .model-route-card.model-route-row:hover .model-rate-tier {
border-color: rgba(79, 143, 212, 0.42);
background: rgba(79, 143, 212, 0.22);
}
body.theme-dark:not(.auth-required) button.model-admin-filter,
body.theme-dark:not(.auth-required) .model-admin-stat,
body.theme-dark:not(.auth-required) .model-admin-search,
body.theme-dark:not(.auth-required) .model-admin-status-filter select {
background-color: var(--ma-card);
color: #b7c9dd;
border-color: var(--ma-line);
}
body.theme-dark:not(.auth-required) button.model-admin-filter.is-active {
border-color: var(--ma-accent);
background: var(--ma-accent);
color: #ffffff;
}
body.theme-dark:not(.auth-required) button.model-center-price-more {
border-color: rgba(79, 143, 212, 0.36);
background: rgba(79, 143, 212, 0.12);
color: #9cc4ec;
}
body.theme-dark:not(.auth-required) .model-price-field .model-center-price-input {
background: #20252e;
color: var(--ma-price);
}
@media (max-width: 1360px) {
body:not(.auth-required) .model-admin-toolbar {
flex-wrap: wrap;
}
body:not(.auth-required) .model-admin-search {
flex-basis: 100%;
}
body:not(.auth-required) .model-admin-toolbar-actions {
margin-left: auto;
}
body:not(.auth-required) .model-route-card.model-route-row {
grid-template-columns: 38px minmax(190px, 1fr) minmax(0, max-content) max-content;
}
}
@media (max-width: 980px) {
body:not(.auth-required) .model-admin-head-title > span:last-child {
display: none;
}
body:not(.auth-required) .model-route-card.model-route-row {
grid-template-columns: 38px minmax(0, 1fr) max-content;
row-gap: 8px;
}
body:not(.auth-required) .model-route-price {
grid-column: 2 / -1;
justify-content: flex-start;
}
body:not(.auth-required) .model-route-state {
grid-row: 1;
grid-column: 3;
}
body:not(.auth-required) .model-rate-inline-fields,
body:not(.auth-required) .model-rate-preview,
body:not(.auth-required) .model-rate-summary {
justify-content: flex-start;
}
}
@media (max-width: 700px) {
body:not(.auth-required) #settingsTab.settings-panel.active {
padding: 6px;
}
body:not(.auth-required) .model-admin-head {
flex-wrap: wrap;
padding: 10px 12px;
}
body:not(.auth-required) .model-admin-summary {
width: 100%;
margin-left: 0;
}
body:not(.auth-required) .model-admin-stat {
flex: 1;
justify-content: center;
padding: 0 5px;
}
body:not(.auth-required) .model-admin-toolbar,
body:not(.auth-required) .model-admin-body {
padding-right: 12px;
padding-left: 12px;
}
body:not(.auth-required) .model-admin-filters {
width: 100%;
overflow-x: auto;
padding-bottom: 2px;
scrollbar-width: none;
}
body:not(.auth-required) .model-admin-filters::-webkit-scrollbar {
display: none;
}
body:not(.auth-required) .model-admin-toolbar-actions {
margin-left: 0;
}
body:not(.auth-required) .model-admin-price-mode {
flex: 0 0 auto;
}
body:not(.auth-required) .model-route-card.model-route-row {
grid-template-columns: 38px minmax(0, 1fr);
padding: 10px;
}
body:not(.auth-required) .model-route-copy strong,
body:not(.auth-required) .model-route-copy > span {
overflow: visible;
overflow-wrap: anywhere;
white-space: normal;
}
body:not(.auth-required) .model-admin-group-label {
flex-wrap: wrap;
}
body:not(.auth-required) .model-admin-default {
flex: 1 0 100%;
min-width: 0;
margin-left: 0;
}
body:not(.auth-required) .model-admin-default-select {
flex: 1;
min-width: 0;
max-width: none;
height: 36px;
}
body:not(.auth-required) .model-route-drag {
width: 10px;
}
body:not(.auth-required) .model-route-price {
grid-row: 3;
grid-column: 1 / -1;
overflow-x: auto;
padding-top: 2px;
}
body:not(.auth-required) .model-route-health {
grid-column: 1 / -1;
}
body:not(.auth-required) .model-route-state {
grid-row: 2;
grid-column: 1 / -1;
justify-content: space-between;
}
body:not(.auth-required) .model-rate-tier {
width: 70px;
min-width: 70px;
}
body:not(.auth-required) .model-route-row .model-route-enabled {
flex-direction: row;
gap: 7px;
min-height: 44px;
font-size: 12px;
}
body:not(.auth-required) .model-route-inline-editor {
margin-right: -10px;
margin-left: -10px;
padding: 10px;
}
body:not(.auth-required) .model-route-inline-groups,
body:not(.auth-required) .model-price-group-fields {
grid-template-columns: 1fr;
}
body:not(.auth-required) .model-price-group {
padding: 8px 0 0;
border-left: 0;
}
body:not(.auth-required) .model-price-group + .model-price-group {
border-top: 1px solid var(--ma-line);
}
body:not(.auth-required) .model-price-field {
border-top: 1px solid var(--ma-line);
}
}
body.mobile-ui:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] #settingsTab .settings-provider-card,
body.mobile-ui:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] #settingsTab .settings-legacy-global,
body.mobile-ui:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] #settingsTab .model-admin-hidden,
body.mobile-ui:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] #settingsTab .model-route-toolbar {
display: none !important;
}
body.mobile-ui:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] #settingsTab .model-route-row .model-rate-tier .model-center-price-input {
height: 20px !important;
min-height: 20px !important;
padding: 0 !important;
}
body.mobile-ui:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] #settingsTab .model-route-row .model-rate-tier em {
height: 12px !important;
flex: 0 0 12px !important;
}
body.mobile-ui:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] #settingsTab .model-route-row .model-route-switch {
width: 36px !important;
height: 20px !important;
min-height: 20px !important;
flex: 0 0 36px !important;
}
body.mobile-ui:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] #settingsTab .model-route-row .model-route-switch::after {
top: 2px;
left: 2px;
width: 16px;
height: 16px;
}
body.mobile-ui:not(.auth-required) #appLayout.settings-layout[data-module-panel="settingsModule"] #settingsTab .model-route-row .model-route-enabled-input:checked + .model-route-switch::after {
transform: translateX(16px);
}
@media (prefers-reduced-motion: reduce) {
body:not(.auth-required) .model-route-card.model-route-row,
body:not(.auth-required) .model-route-switch,
body:not(.auth-required) .model-route-switch::after {
transition: none;
}
}


/* entry:responsive.css sha256:8d47f7e9a6e1e0387acf2be6c4135aba9facf4c9e42ef164356853753e6e8ebc */


body.mobile-ui {
--font-ui: var(--mobile-toolbar-font, 12px);
--font-label: var(--mobile-caption-font, 11px);
--control-height: var(--mobile-control-h, 32px);
--button-height: var(--mobile-control-h, 32px);
--tab-height: var(--mobile-toolbar-control, 32px);
--mobile-topbar-offset: var(--mobile-topbar-expanded-offset, 88px);
--mobile-top-icon-tile: calc(var(--mobile-icon-btn) - 4px);
--mobile-page-width: calc(100vw - (var(--mobile-shell-x) * 2));
--mobile-ui-title: calc(var(--font-ui) + 1px);
--mobile-ui-body: calc(var(--font-ui) - 0.5px);
--mobile-ui-small: var(--font-label);
--mobile-ui-frame-radius: 16px;
--mobile-ui-control-radius: 11px;
--media-form-gap: 8px;
--media-inline-gap: 6px;
--media-label-gap: 4px;
--media-control-size: var(--control-height);
--media-textarea-size: calc(var(--control-height) * 2.53);
--media-reference-size: calc(var(--control-height) * 1.8);
--media-panel-pad: calc(var(--mobile-shell-gap) + 2px);
}
body.mobile-ui.sidebar-collapsed {
--mobile-topbar-offset: calc(var(--mobile-topbar-main-row, 36px) + (var(--mobile-shell-gap, 5px) * 2));
}
body.mobile-compact-ui {
--mobile-ui-frame-radius: 14px;
--mobile-ui-control-radius: 10px;
}


body.mobile-ui :is(button, a[href], select, [role="button"], [role="tab"]) {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}


body.mobile-ui select:not(.infinite-card-cs-native):not(.infinite-card-qr-native) {
pointer-events: none;
}


body.mobile-ui .hl-grid > .hl-card {
contain-intrinsic-size: auto 240px;
}


html.mobile-ui {
overscroll-behavior-y: none;
}

body.mobile-ui :is(#appLayout, .account-modal) {
font-size: var(--mobile-ui-body) !important;
}

body.mobile-ui :is(#appLayout, .account-modal) :is(label, .field-title, .tool-page-head strong, .drop-zone strong) {
font-size: var(--font-label) !important;
line-height: 1.22 !important;
}

body.mobile-ui :is(#appLayout, .account-modal) :is(p, small, .file-summary, .file-summary-picker, .plan-summary-inline, .task-meta, .tool-page-head p, .drop-zone p) {
font-size: var(--mobile-ui-small) !important;
line-height: 1.34 !important;
}

body.mobile-ui :is(#appLayout, .account-modal) :is(
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
select
):not(.infinite-card-control) {
min-height: var(--control-height) !important;
height: var(--control-height) !important;
max-height: var(--control-height) !important;
padding: 0 10px !important;
border-radius: var(--mobile-ui-control-radius) !important;
font-size: var(--font-ui) !important;
line-height: 1.15 !important;
}

body.mobile-ui :is(#appLayout, .account-modal) textarea:not([data-canvas-text]) {
font-size: var(--font-ui) !important;
line-height: 1.44 !important;
border-radius: var(--mobile-ui-control-radius) !important;
}

body.mobile-ui :is(#appLayout, .account-modal) :is(button, .button-link, .primary, .secondary, .danger, .tool-mode-tab):not([data-ui-compact-control]):not(.module-tab):not(.sidebar-toggle):not(.icon-button):not(.account-summary):not(.text-chat-history-backdrop):not(.text-chat-delete-btn):not(.infinite-card-run):not(.infinite-inline-reference-add):not(.infinite-inline-reference-pick):not(.thumb-preview):not(.gen-icon-btn):not(.hl-float-btn):not(.hl-send-btn):not(.hl-like-pill):not(.hl-cta-primary):not(.hl-submit-btn):not(.hl-mod-chip):not(.hl-tool-btn):not(.hl-ref-del):not(.hl-cta-icon):not(.flow-mini-btn):not(.project-icon-btn):not(.canvas-edit-branch):not(.feed-detail-album-thumb):not(.gen-nav):not(.watermark-card):not(.watermark-library-preview):not(.watermark-layer-select):not(.account-card):not(.account-card-open):not(.account-card-more):not(.hl-stage):where(:not([data-ui-unmanaged] *)) {
min-height: var(--button-height) !important;
height: var(--button-height) !important;
max-height: var(--button-height) !important;
padding: 0 11px !important;
border-radius: var(--mobile-ui-control-radius) !important;
font-size: var(--font-ui) !important;
line-height: 1.05 !important;
}

body.mobile-ui:not(.auth-required) #appLayout .result-library-btn {
min-height: 32px !important;
height: 32px !important;
max-height: 32px !important;
padding: 0 10px 0 9px !important;
gap: 6px !important;
border-radius: 8px !important;
font-size: 12px !important;
}

body.mobile-ui:not(.auth-required) header.topbar {
height: var(--mobile-topbar-offset) !important;
min-height: var(--mobile-topbar-offset) !important;
max-height: var(--mobile-topbar-offset) !important;
box-sizing: border-box !important;
padding: var(--mobile-shell-gap) var(--mobile-shell-x) !important;
grid-template-columns: minmax(0, 1fr) auto auto !important;
grid-template-rows: var(--mobile-topbar-main-row) var(--mobile-topbar-nav-row) !important;
grid-template-areas:
"brand actions toggle"
"nav nav nav" !important;
gap: var(--mobile-toolbar-gap) !important;
align-items: center !important;
overflow: hidden !important;
}

body.mobile-ui.sidebar-collapsed:not(.auth-required) header.topbar {
height: var(--mobile-topbar-offset) !important;
min-height: var(--mobile-topbar-offset) !important;
max-height: var(--mobile-topbar-offset) !important;
grid-template-rows: var(--mobile-topbar-main-row) !important;
grid-template-areas: "brand actions toggle" !important;
}

body.mobile-ui:not(.auth-required) header.topbar > .brand-block,
body.mobile-ui:not(.auth-required) header.topbar > .brand-block > .brand-row {
display: contents !important;
position: static !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
}

body.mobile-ui:not(.auth-required) header.topbar .brand-text {
grid-area: brand !important;
align-self: center !important;
justify-self: start !important;
display: flex !important;
align-items: center !important;
width: auto !important;
min-width: 0 !important;
height: var(--mobile-topbar-main-row) !important;
min-height: var(--mobile-topbar-main-row) !important;
max-height: var(--mobile-topbar-main-row) !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
transform: none !important;
}

body.mobile-ui:not(.auth-required) header.topbar .brand-full {
display: inline-flex !important;
align-items: center !important;
min-width: 0 !important;
}

body.mobile-ui:not(.auth-required) header.topbar .brand-logo-full {
width: min(var(--mobile-brand-logo-width), 29vw) !important;
max-width: min(var(--mobile-brand-logo-width), 29vw) !important;
height: auto !important;
max-height: var(--mobile-icon-btn) !important;
object-fit: contain !important;
object-position: left center !important;
margin: 0 !important;
transform: none !important;
}

body.mobile-ui:not(.auth-required) header.topbar > .top-actions.top-actions {
grid-area: actions !important;
align-self: center !important;
justify-self: end !important;
max-width: calc(100vw - min(var(--mobile-brand-logo-width), 29vw) - var(--mobile-icon-btn) - (var(--mobile-shell-x) * 2) - 14px) !important;
height: var(--mobile-icon-btn) !important;
min-height: var(--mobile-icon-btn) !important;
max-height: var(--mobile-icon-btn) !important;
gap: var(--mobile-toolbar-gap) !important;
overflow: visible !important;
align-items: center !important;
justify-content: flex-end !important;
}

body.mobile-ui:not(.auth-required) header.topbar #sidebarToggleBtn.sidebar-toggle {
grid-area: toggle !important;
align-self: center !important;
justify-self: end !important;
margin: 0 !important;
transform: none !important;
}

body.mobile-ui:not(.auth-required) header.topbar .account-bar {
display: flex !important;
flex: 0 0 auto !important;
align-items: center !important;
min-width: 0 !important;
height: var(--mobile-icon-btn) !important;
min-height: var(--mobile-icon-btn) !important;
max-height: var(--mobile-icon-btn) !important;
}

body.mobile-ui:not(.auth-required) header.topbar :is(.icon-button, .sidebar-toggle, .module-tab, .account-summary),
body.mobile-ui.sidebar-collapsed:not(.auth-required) header.topbar :is(.icon-button, .sidebar-toggle, .module-tab, .account-summary) {
width: var(--mobile-icon-btn) !important;
min-width: var(--mobile-icon-btn) !important;
max-width: var(--mobile-icon-btn) !important;
height: var(--mobile-icon-btn) !important;
min-height: var(--mobile-icon-btn) !important;
max-height: var(--mobile-icon-btn) !important;
padding: 0 !important;
border-radius: 10px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 0 !important;
line-height: 1 !important;
}

body.mobile-ui:not(.auth-required) header.topbar :is(#themeToggleBtn.icon-button, #refreshJobsBtn.icon-button, #sidebarToggleBtn.sidebar-toggle, .module-tab.has-ui-icon),
body.mobile-ui.sidebar-collapsed:not(.auth-required) header.topbar :is(#themeToggleBtn.icon-button, #refreshJobsBtn.icon-button, #sidebarToggleBtn.sidebar-toggle, .module-tab.has-ui-icon) {
width: var(--mobile-icon-btn) !important;
min-width: var(--mobile-icon-btn) !important;
max-width: var(--mobile-icon-btn) !important;
height: var(--mobile-icon-btn) !important;
min-height: var(--mobile-icon-btn) !important;
max-height: var(--mobile-icon-btn) !important;
flex: 0 0 var(--mobile-icon-btn) !important;
flex-basis: var(--mobile-icon-btn) !important;
flex-shrink: 0 !important;
padding: 0 !important;
border-radius: 10px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 0 !important;
line-height: 1 !important;
overflow: hidden !important;
}

body.mobile-ui:not(.auth-required) header.topbar :is(
.module-tab.has-ui-icon,
.icon-button.has-ui-icon,
.sidebar-toggle.has-ui-icon,
#accountSummary.account-summary.has-ui-icon
) > .ui-icon,
body.mobile-ui.sidebar-collapsed:not(.auth-required) header.topbar :is(
.module-tab.has-ui-icon,
.icon-button.has-ui-icon,
.sidebar-toggle.has-ui-icon,
#accountSummary.account-summary.has-ui-icon
) > .ui-icon {
width: var(--mobile-top-icon-tile) !important;
min-width: var(--mobile-top-icon-tile) !important;
max-width: var(--mobile-top-icon-tile) !important;
height: var(--mobile-top-icon-tile) !important;
min-height: var(--mobile-top-icon-tile) !important;
max-height: var(--mobile-top-icon-tile) !important;
padding: 0 !important;
margin: 0 !important;
display: inline-grid !important;
place-items: center !important;
line-height: 0 !important;
}

body.mobile-ui:not(.auth-required) header.topbar :is(
.module-tab.has-ui-icon,
.icon-button.has-ui-icon,
.sidebar-toggle.has-ui-icon,
#accountSummary.account-summary.has-ui-icon
) > .ui-icon svg,
body.mobile-ui.sidebar-collapsed:not(.auth-required) header.topbar :is(
.module-tab.has-ui-icon,
.icon-button.has-ui-icon,
.sidebar-toggle.has-ui-icon,
#accountSummary.account-summary.has-ui-icon
) > .ui-icon svg {
width: var(--mobile-icon-svg) !important;
min-width: var(--mobile-icon-svg) !important;
max-width: var(--mobile-icon-svg) !important;
height: var(--mobile-icon-svg) !important;
min-height: var(--mobile-icon-svg) !important;
max-height: var(--mobile-icon-svg) !important;
margin: 0 !important;
stroke-width: 1.55 !important;
}

body.mobile-ui:not(.auth-required) header.topbar :is(
.module-tab.has-ui-icon,
.icon-button.has-ui-icon,
.sidebar-toggle.has-ui-icon,
#accountSummary.account-summary.has-ui-icon
) > .ui-icon svg *,
body.mobile-ui.sidebar-collapsed:not(.auth-required) header.topbar :is(
.module-tab.has-ui-icon,
.icon-button.has-ui-icon,
.sidebar-toggle.has-ui-icon,
#accountSummary.account-summary.has-ui-icon
) > .ui-icon svg * {
stroke-width: 1.55 !important;
}

body.mobile-ui:not(.auth-required) header.topbar #accountSummary.account-summary {
width: var(--mobile-icon-btn) !important;
min-width: var(--mobile-icon-btn) !important;
max-width: var(--mobile-icon-btn) !important;
height: var(--mobile-icon-btn) !important;
min-height: var(--mobile-icon-btn) !important;
max-height: var(--mobile-icon-btn) !important;
padding: 0 !important;
border-radius: 10px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
flex-shrink: 0 !important;
font-weight: 760 !important;
white-space: nowrap !important;
line-height: 1 !important;
overflow: hidden !important;
}

body.mobile-ui:not(.auth-required) header.topbar #accountSummary.account-summary.has-ui-icon:not(.account-summary-points),
body.mobile-ui.sidebar-collapsed:not(.auth-required) header.topbar #accountSummary.account-summary.has-ui-icon:not(.account-summary-points) {
width: var(--mobile-icon-btn) !important;
min-width: var(--mobile-icon-btn) !important;
max-width: var(--mobile-icon-btn) !important;
height: var(--mobile-icon-btn) !important;
min-height: var(--mobile-icon-btn) !important;
max-height: var(--mobile-icon-btn) !important;
flex: 0 0 var(--mobile-icon-btn) !important;
flex-basis: var(--mobile-icon-btn) !important;
padding: 0 !important;
font-size: 0 !important;
}

body.mobile-ui:not(.auth-required) header.topbar #accountSummary.account-summary.has-ui-icon:not(.account-summary-points) .account-summary-text {
display: none !important;
}

body.mobile-ui:not(.auth-required) header.topbar #accountSummary.account-summary.account-summary-points {
width: var(--mobile-points-max) !important;
min-width: var(--mobile-points-min) !important;
max-width: var(--mobile-points-max) !important;
flex: 0 0 var(--mobile-points-max) !important;
flex-basis: var(--mobile-points-max) !important;
flex-shrink: 0 !important;
padding: 0 var(--mobile-toolbar-pad) !important;
gap: calc(var(--mobile-toolbar-gap) - 1px) !important;
font-size: var(--mobile-toolbar-font) !important;
color: var(--account-summary-color, var(--accent-strong)) !important;
}

body.mobile-ui:not(.auth-required) header.topbar #accountSummary.account-summary.account-summary-points {
position: relative !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}

body.mobile-ui:not(.auth-required) header.topbar #accountSummary.account-summary.account-summary-points::before {
content: "" !important;
display: block !important;
position: absolute !important;
inset: 2px !important;
z-index: 0 !important;
pointer-events: none !important;
border: 1px solid var(--account-summary-line, color-mix(in srgb, var(--accent) 18%, var(--border))) !important;
border-radius: 8px !important;
background: var(--account-summary-surface, color-mix(in srgb, var(--accent) 8%, var(--panel))) !important;
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--panel) 82%, transparent), 0 1px 1px color-mix(in srgb, var(--accent) 10%, transparent) !important;
}

body.mobile-ui:not(.auth-required) header.topbar #accountSummary.account-summary.account-summary-points:hover::before {
border-color: color-mix(in srgb, var(--account-summary-color, var(--accent)) 30%, var(--border)) !important;
background: color-mix(in srgb, var(--account-summary-color, var(--accent)) 12%, var(--panel)) !important;
}

body.mobile-ui:not(.auth-required) header.topbar #accountSummary.account-summary.account-summary-points:focus-visible {
box-shadow: none !important;
}

body.mobile-ui:not(.auth-required) header.topbar #accountSummary.account-summary.account-summary-points:focus-visible::before {
box-shadow: var(--focus-ring) !important;
}

body.mobile-ui:not(.auth-required) header.topbar #accountSummary.account-summary.account-summary-points > * {
position: relative !important;
z-index: 1 !important;
}

body.mobile-ui:not(.auth-required) header.topbar #accountSummary.account-summary.account-summary-points .account-summary-text {
display: block !important;
width: max-content !important;
min-width: max-content !important;
max-width: none !important;
overflow: visible !important;
font-size: var(--mobile-toolbar-font) !important;
line-height: 1 !important;
font-variant-numeric: tabular-nums !important;
}

body.mobile-ui:not(.auth-required) header.topbar #accountSummary.account-summary.account-summary-points .account-points-icon,
body.mobile-ui:not(.auth-required) header.topbar #accountSummary.account-summary.account-summary-points .ui-icon {
width: var(--mobile-icon-svg) !important;
height: var(--mobile-icon-svg) !important;
min-width: var(--mobile-icon-svg) !important;
}

body.mobile-ui:not(.auth-required) header.topbar nav.module-nav.module-nav {
grid-area: nav !important;
height: var(--mobile-topbar-nav-row) !important;
min-height: var(--mobile-topbar-nav-row) !important;
max-height: var(--mobile-topbar-nav-row) !important;
gap: var(--mobile-toolbar-gap) !important;
align-self: center !important;
justify-self: stretch !important;
justify-content: flex-start !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scrollbar-width: none !important;
}

body.mobile-ui.sidebar-collapsed:not(.auth-required) header.topbar nav.module-nav.module-nav {
display: none !important;
width: 0 !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}

body.mobile-ui:not(.auth-required) header.topbar nav.module-nav.module-nav > button.module-tab {
flex: 0 0 var(--mobile-icon-btn) !important;
}

body.mobile-ui:not(.auth-required) header.topbar nav.module-nav.module-nav::-webkit-scrollbar {
display: none !important;
}

body.mobile-ui:not(.auth-required) #appLayout.layout {
margin-top: var(--mobile-topbar-offset) !important;
padding: var(--mobile-shell-x) !important;
gap: var(--mobile-shell-gap) !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] {
box-sizing: border-box !important;
display: block !important;
height: calc(100dvh - var(--mobile-topbar-offset)) !important;
min-height: calc(100dvh - var(--mobile-topbar-offset)) !important;
max-height: calc(100dvh - var(--mobile-topbar-offset)) !important;
overflow: hidden !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] > .workbench {
box-sizing: border-box !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
padding: var(--mobile-shell-x) !important;
overflow: hidden !important;
}

.mobile-tool-pager-link {
display: none;
}
body.mobile-ui:not(.auth-required) #appLayout[data-feed-scope]:not([data-feed-scope=""]) > :is(.workbench, .monitor) > .mobile-tool-pager-link {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 100%;
min-height: 38px;
margin: 0 0 8px;
border-radius: var(--mobile-ui-control-radius);
font-size: var(--font-ui);
}
body.mobile-ui:not(.auth-required) #appLayout:is(
[data-module-panel="batchModule"],
[data-module-panel="videoModule"],
[data-module-panel="audioModule"]
) {
box-sizing: border-box !important;
position: fixed !important;
inset: var(--mobile-topbar-offset) 0 auto 0 !important;
display: flex !important;
flex-flow: row nowrap !important;
align-items: stretch !important;
width: 100vw !important;
max-width: 100vw !important;
height: calc(100dvh - var(--mobile-topbar-offset)) !important;
min-height: calc(100dvh - var(--mobile-topbar-offset)) !important;
margin: 0 !important;
padding: var(--mobile-shell-x) !important;
gap: 0 !important;
overflow: hidden !important;
scrollbar-width: none !important;
}

body.mobile-ui:not(.auth-required) #appLayout:is(
[data-module-panel="batchModule"],
[data-module-panel="videoModule"],
[data-module-panel="audioModule"]
)::-webkit-scrollbar {
display: none !important;
}

body.mobile-ui:not(.auth-required) #appLayout:is(
[data-module-panel="batchModule"],
[data-module-panel="videoModule"],
[data-module-panel="audioModule"]
) > :is(.workbench, .monitor) {
box-sizing: border-box !important;
flex: 0 0 var(--mobile-page-width) !important;
width: var(--mobile-page-width) !important;
min-width: var(--mobile-page-width) !important;
max-width: var(--mobile-page-width) !important;
height: calc(100dvh - var(--mobile-topbar-offset) - (var(--mobile-shell-x) * 2)) !important;
min-height: calc(100dvh - var(--mobile-topbar-offset) - (var(--mobile-shell-x) * 2)) !important;
max-height: calc(100dvh - var(--mobile-topbar-offset) - (var(--mobile-shell-x) * 2)) !important;
overflow: hidden !important;
border-radius: var(--mobile-ui-frame-radius) !important;
touch-action: pan-y;

transform: translateX(0);
transition: transform var(--mobile-pager-duration) cubic-bezier(0.22, 0.61, 0.36, 1);

will-change: transform;
}


body.mobile-ui:not(.auth-required) #appLayout:is(
[data-module-panel="batchModule"],
[data-module-panel="videoModule"],
[data-module-panel="audioModule"]
)[data-mobile-page="results"] > :is(.workbench, .monitor) {
transform: translateX(-100%);
}


body.mobile-ui:not(.auth-required) #appLayout.mobile-pager-no-anim > :is(.workbench, .monitor) {
transition: none !important;
}


.gen-card.pager-prerender-card {
content-visibility: visible;
contain-intrinsic-size: auto;
}

body.mobile-ui:not(.auth-required) #appLayout:is(
[data-module-panel="batchModule"],
[data-module-panel="videoModule"],
[data-module-panel="audioModule"]
) :is(
.workbench,
.monitor,
.tab-panel.active,
.tool-panel.active,
.tool-card,
.upload-box,
.advanced,
.job-row,
.job-select,
.gallery-select-bar,
.thumb,
.thumb-preview,
.task-row,
.task-list-row
) {
animation: none !important;
}

body.mobile-ui:not(.auth-required) #appLayout #gallery .gallery-select-bar {
padding: 7px 9px !important;
}

body.mobile-ui:not(.auth-required) #watermarkPickerModal.modal-mask {
align-items: end !important;
place-items: end center !important;
padding: 8px !important;
padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
}

body.mobile-ui:not(.auth-required) #watermarkPickerModal .watermark-picker-panel {
display: grid !important;
grid-template-rows: auto minmax(0, 1fr) !important;
width: min(420px, calc(100vw - 16px)) !important;
max-height: min(74dvh, calc(100dvh - var(--mobile-topbar-offset) - 14px)) !important;
overflow: hidden !important;
}

body.mobile-ui:not(.auth-required) #watermarkPickerList.watermark-list {
max-height: none !important;
min-height: 0 !important;
gap: 8px !important;
overflow: auto !important;
padding: 2px !important;
}

body.mobile-ui:not(.auth-required) #watermarkPickerList .watermark-card {
display: grid !important;
grid-template-columns: 72px minmax(0, 1fr) !important;
gap: 9px !important;
width: 100% !important;
min-height: 78px !important;
height: auto !important;
max-height: none !important;
padding: 8px !important;
align-items: center !important;
justify-content: stretch !important;
}

body.mobile-ui:not(.auth-required) #watermarkPickerList .watermark-card img {
grid-column: 1 !important;
grid-row: 1 !important;
width: 72px !important;
height: 56px !important;
}

body.mobile-ui:not(.auth-required) #watermarkPickerList .watermark-card > span:not(.ui-icon) {
grid-column: 2 !important;
grid-row: 1 !important;
gap: 5px !important;
min-width: 0 !important;
}

body.mobile-ui:not(.auth-required) #watermarkPickerList .watermark-card > .ui-icon {
position: absolute !important;
top: 12px !important;
left: 12px !important;
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
min-height: 18px !important;
padding: 0 !important;
border-radius: 6px !important;
}

body.mobile-ui:not(.auth-required) #watermarkPickerList .watermark-card > .ui-icon svg {
width: 13px !important;
height: 13px !important;
}

body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout:is(
[data-module-panel="videoModule"],
[data-module-panel="audioModule"]
) > .workbench {
padding: 0 !important;
}


body.mobile-ui:not(.auth-required) #musicModeTabs.tabs,
body.mobile-ui:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .workbench > .tabs,
body.mobile-ui:not(.auth-required) .layout.media-tool-layout .tool-mode-tabs {
min-height: var(--mobile-toolbar-control) !important;
height: var(--mobile-toolbar-control) !important;
max-height: var(--mobile-toolbar-control) !important;
border-radius: var(--mobile-ui-frame-radius) var(--mobile-ui-frame-radius) 0 0 !important;
overflow: hidden !important;
box-shadow: none !important;
}


body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #audioToolTab > #musicModeTabs.tabs,
body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #audioToolTab > .tool-mode-tabs {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
min-height: var(--mobile-toolbar-control) !important;
height: var(--mobile-toolbar-control) !important;
max-height: var(--mobile-toolbar-control) !important;
width: calc(100% + var(--media-panel-pad) + var(--media-panel-pad)) !important;
max-width: calc(100% + var(--media-panel-pad) + var(--media-panel-pad)) !important;
margin: calc(-1 * var(--media-panel-pad)) calc(-1 * var(--media-panel-pad)) 0 !important;
padding: 0 !important;
gap: 0 !important;
border: 0 !important;
border-radius: var(--mobile-ui-frame-radius) var(--mobile-ui-frame-radius) 0 0 !important;
background: #ffffff !important;
box-shadow: none !important;
overflow: hidden !important;
}

body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="videoModule"] #videoToolTab > .tool-page-head {
display: flex !important;
align-items: stretch !important;
justify-content: stretch !important;
width: calc(100% + var(--media-panel-pad) + var(--media-panel-pad)) !important;
max-width: calc(100% + var(--media-panel-pad) + var(--media-panel-pad)) !important;
min-height: var(--mobile-toolbar-control) !important;
height: var(--mobile-toolbar-control) !important;
max-height: var(--mobile-toolbar-control) !important;
margin: calc(-1 * var(--media-panel-pad)) calc(-1 * var(--media-panel-pad)) 0 !important;
padding: 0 !important;
gap: 0 !important;
border: 0 !important;
border-radius: var(--mobile-ui-frame-radius) var(--mobile-ui-frame-radius) 0 0 !important;
background: #ffffff !important;
box-shadow: none !important;
overflow: hidden !important;
}

body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="videoModule"] #videoToolTab > .tool-page-head > div {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex: 1 1 100% !important;
min-width: 0 !important;
min-height: var(--mobile-toolbar-control) !important;
height: var(--mobile-toolbar-control) !important;
max-height: var(--mobile-toolbar-control) !important;
margin: 0 !important;
padding: 0 8px !important;
border: 0 !important;
border-radius: calc(var(--mobile-ui-frame-radius) - 2px) !important;
background: transparent !important;
color: var(--accent-strong) !important;
box-shadow: inset 0 -2px 0 var(--accent) !important;
font-size: var(--font-ui) !important;
font-weight: 820 !important;
line-height: 1 !important;
}

body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="videoModule"] #videoToolTab > .tool-page-head h2 {
margin: 0 !important;
color: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}

body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="videoModule"] #videoToolTab > .tool-page-head p {
display: none !important;
}


body.theme-dark.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #audioToolTab > #musicModeTabs.tabs,
body.theme-dark.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #audioToolTab > .tool-mode-tabs {
background: rgba(18, 21, 29, 0.86) !important;
border-color: rgba(141, 149, 165, 0.26) !important;
}

body.theme-dark.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="videoModule"] #videoToolTab > .tool-page-head {
background: rgba(18, 21, 29, 0.86) !important;
border-color: rgba(141, 149, 165, 0.26) !important;
}

body.theme-dark.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="videoModule"] #videoToolTab > .tool-page-head > div {
background: transparent !important;
color: #eaf4ff !important;
box-shadow: inset 0 -2px 0 #5aa6e8 !important;
}

body.theme-dark.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #audioToolTab > #musicModeTabs.tabs .tab.active,
body.theme-dark.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #audioToolTab > .tool-mode-tabs .tool-mode-tab.active {
background: transparent !important;
color: #eaf4ff !important;
box-shadow: inset 0 -2px 0 #5aa6e8 !important;
}

body.mobile-ui:not(.auth-required) #musicModeTabs.tabs .tab,
body.mobile-ui:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .workbench > .tabs .tab,
body.mobile-ui:not(.auth-required) .layout.media-tool-layout .tool-mode-tab {
min-height: var(--mobile-toolbar-control) !important;
height: var(--mobile-toolbar-control) !important;
max-height: var(--mobile-toolbar-control) !important;
padding: 0 8px !important;
border-radius: calc(var(--mobile-ui-frame-radius) - 2px) !important;
font-size: var(--font-ui) !important;
line-height: 1 !important;
}

body.mobile-ui:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .tab-panel,
body.mobile-ui:not(.auth-required) .layout.media-tool-layout .tool-panel.active {
box-sizing: border-box !important;
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
padding: calc(var(--mobile-shell-gap) + 2px) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}

body.mobile-ui:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .workbench > .tab-panel {
height: calc(100% - var(--mobile-toolbar-control)) !important;
min-height: 0 !important;
max-height: calc(100% - var(--mobile-toolbar-control)) !important;
}

body.mobile-ui:not(.auth-required) :is(.upload-box, .tool-card, .advanced, .file-summary, .plan-summary-inline) {
border-radius: var(--mobile-ui-frame-radius) !important;
}

body.mobile-ui:not(.auth-required) :is(.upload-box, .tool-card) {
padding: calc(var(--mobile-shell-gap) + 2px) !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="batchModule"] :is(#textTab, #imageTab).tab-panel.active.media-tool-form,
body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout:is([data-module-panel="videoModule"], [data-module-panel="audioModule"]) :is(#videoToolTab, #audioToolTab) .media-tool-form:not(.media-debug-card) {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-auto-rows: max-content !important;
width: 100% !important;
max-width: 100% !important;
row-gap: var(--media-form-gap) !important;
align-items: start !important;
align-content: start !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="batchModule"] :is(#textTab, #imageTab).tab-panel.active.media-tool-form {
padding: calc(var(--mobile-shell-gap) + 2px) !important;
}

body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout:is([data-module-panel="videoModule"], [data-module-panel="audioModule"]) :is(#videoToolTab, #audioToolTab) .media-tool-form:not(.media-debug-card) {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}

body.mobile-ui:not(.auth-required) #appLayout:is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) :is(#textTab, #imageTab, #videoToolTab, #speechToolPanel, #musicToolPanel) :is(.quick-options, .music-options) {
gap: var(--media-form-gap) var(--media-inline-gap) !important;
margin: 0 !important;
}

body.mobile-ui:not(.auth-required) #appLayout:is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) :is(#textTab, #imageTab, #videoToolTab, #speechToolPanel, #musicToolPanel) .media-tool-form textarea,
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="batchModule"] :is(#textTab, #imageTab).media-tool-form textarea {
min-height: var(--media-textarea-size) !important;
max-height: none !important;
padding: 8px !important;
line-height: 1.45 !important;
}
body.mobile-ui:not(.auth-required) #appLayout:is([data-module-panel="batchModule"], [data-module-panel="videoModule"]) .prompt-rich-shell {
height: var(--media-textarea-size);
min-height: var(--media-textarea-size);
max-height: none;
border-radius: var(--mobile-ui-control-radius);
}
body.mobile-ui:not(.auth-required) #appLayout:is([data-module-panel="batchModule"], [data-module-panel="videoModule"]) .prompt-rich-editor {
height: 100%;
min-height: 0;
padding: 8px;
font-size: max(16px, var(--font-ui));
line-height: 1.44;
}
body.mobile-ui:not(.auth-required) .prompt-inline-mention {
height: 24px;
min-height: 24px;
max-height: 24px;
max-width: 82%;
}
body.mobile-ui:not(.auth-required) .prompt-inline-mention-media {
flex-basis: 20px;
width: 20px;
height: 20px;
}

body.mobile-ui:not(.auth-required) #appLayout:is([data-module-panel="batchModule"], [data-module-panel="videoModule"], [data-module-panel="audioModule"]) :is(#textTab, #imageTab, #videoToolTab, #speechToolPanel, #musicToolPanel) .media-tool-form .model-capability-hint,
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="batchModule"] :is(#textTab, #imageTab).media-tool-form > .model-capability-hint {
margin: 0 !important;
}

body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #musicToolPanel .tool-grid > .media-tool-form:not(.media-debug-card) {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
column-gap: var(--media-inline-gap) !important;
row-gap: var(--media-form-gap) !important;
}

body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #musicToolPanel :is(#musicAudioField, #musicPromptField, #musicStyleField, #musicTitleField, #musicLyricsField, #musicNegativeTagsField, .command-row, #musicCapabilityHint) {
grid-column: 1 / -1 !important;
}

body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #musicToolPanel :is(#musicPromptField, #musicStyleField, #musicTitleField) {
order: 20 !important;
}

body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #musicToolPanel .music-options {
display: grid !important;
grid-column: 1 / -1 !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: var(--media-form-gap) var(--media-inline-gap) !important;
align-items: end !important;
order: 30 !important;
}

body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #musicToolPanel .music-version-row {
display: grid !important;
grid-column: 1 / -1 !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: var(--media-form-gap) var(--media-inline-gap) !important;
align-items: end !important;
min-width: 0 !important;
}
body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #musicToolPanel .music-version-row > .music-instrumental-row {
grid-column: 2 / 3 !important;
align-self: end !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px !important;
min-height: var(--media-control-size) !important;
height: var(--media-control-size) !important;
max-height: var(--media-control-size) !important;
margin: 0 !important;
padding: 0 !important;
}
body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #musicToolPanel .music-version-row:has(#musicVersionField[hidden]) > .music-instrumental-row {
grid-column: 1 / -1 !important;
}

body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #musicToolPanel #musicLyricsField {
order: 40 !important;
}

body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #musicToolPanel #musicNegativeTagsField {
order: 50 !important;
}

body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #musicToolPanel .command-row {
order: 60 !important;
}

body.mobile-ui:not(.auth-required) #appLayout.layout.media-tool-layout[data-module-panel="audioModule"] #musicToolPanel #musicCapabilityHint {
order: 70 !important;
}

body.mobile-ui:not(.auth-required) .layout.media-tool-layout .tool-page-head {
min-height: 0 !important;
margin: 0 0 calc(var(--mobile-toolbar-gap) + 2px) !important;
padding: calc(var(--mobile-shell-gap) + 2px) !important;
border-radius: var(--mobile-ui-frame-radius) !important;
}

body.mobile-ui:not(.auth-required) .layout.media-tool-layout .tool-page-head h2:not(#videoToolTab > .tool-page-head h2) {
font-size: var(--mobile-ui-title) !important;
line-height: 1.18 !important;
}

body.mobile-ui:not(.auth-required) .layout.media-tool-layout .tool-page-head p {
margin-top: 2px !important;
}

body.mobile-ui:not(.auth-required) :is(.form-grid, .quick-options, .music-options, .options-grid, .command-row) {
gap: var(--media-form-gap) var(--media-inline-gap) !important;
}

body.mobile-ui:not(.auth-required) :is(#textTab, #imageTab, #videoToolTab, #audioToolTab, #speechToolPanel, #musicToolPanel) [hidden] {
display: none !important;
}

body.mobile-ui:not(.auth-required) :is(#textTab, #imageTab, #videoToolTab, #audioToolTab, #speechToolPanel, #musicToolPanel) :is(label:not(.checkbox-line):not([hidden]), .field-title) {
gap: var(--media-label-gap) !important;
font-weight: 720 !important;
}

body.mobile-ui:not(.auth-required) :is(#textTab, #imageTab, #videoToolTab, #audioToolTab, #speechToolPanel, #musicToolPanel) label:not(.checkbox-line):not([hidden]) {
display: grid !important;
align-content: start !important;
margin: 0 !important;
}

body.mobile-ui:not(.auth-required) :is(.drop-zone, .file-summary-picker) {
min-height: var(--media-reference-size) !important;
padding: 8px 10px !important;
}

body.mobile-ui:not(.auth-required) :is(.drop-zone p, .file-summary, .plan-summary-inline) {
color: #607086 !important;
}

body.mobile-ui:not(.auth-required) #textFileSummary.file-summary-picker,
body.mobile-ui:not(.auth-required) #fileSummary.file-summary-picker,
body.mobile-ui:not(.auth-required) #sharedFileSummary.file-summary-picker,
body.mobile-ui:not(.auth-required) #videoFileSummary.file-summary-picker,
body.mobile-ui:not(.auth-required) #musicAudioFileSummary.file-summary-picker {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
line-height: 1.35 !important;
}

body.mobile-ui:not(.auth-required) #appLayout :is(#textTab, #imageTab, #videoToolTab, #audioToolTab, #speechToolPanel, #musicToolPanel) textarea {
min-height: var(--media-textarea-size) !important;
}

body.mobile-ui:not(.auth-required) #appLayout :is(#textTab, #imageTab, #videoToolTab, #audioToolTab, #speechToolPanel, #musicToolPanel) .command-row {
align-items: center !important;
flex-wrap: wrap !important;
margin: 0 !important;
}

body.mobile-ui:not(.auth-required) #appLayout :is(#textTab, #imageTab, #videoToolTab, #audioToolTab, #speechToolPanel, #musicToolPanel) .command-row > :is(button, .button-link) {
flex: 0 0 auto !important;
width: auto !important;
min-width: 82px !important;
max-width: 100% !important;
}

body.mobile-ui:not(.auth-required) #appLayout :is(#textTab, #imageTab, #videoToolTab, #audioToolTab, #speechToolPanel, #musicToolPanel) .command-row > :is(button.primary, .primary) {
flex-grow: 0 !important;
min-width: 106px !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] #textToolTab.tool-panel.active {
box-sizing: border-box !important;
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
padding: calc(var(--mobile-shell-gap) + 2px) !important;
overflow: hidden !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-shell {
position: relative !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: minmax(0, 1fr) !important;
height: 100% !important;
min-height: 0 !important;
border: 1px solid var(--mobile-chat-border, #dce6ef) !important;
border-radius: var(--mobile-ui-frame-radius) !important;
background: var(--mobile-chat-surface, #ffffff) !important;
overflow: hidden !important;
font-size: var(--font-ui) !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-main {
display: grid !important;
grid-template-rows: auto minmax(0, 1fr) auto !important;
min-height: 0 !important;
background: var(--mobile-chat-surface, #ffffff) !important;
overflow: hidden !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-topbar {
display: grid !important;
grid-template-columns: 52px minmax(0, 1fr) !important;
grid-template-rows: auto !important;
gap: 6px 8px !important;
padding: calc(var(--mobile-shell-gap) + 3px) !important;
border-bottom: 1px solid var(--mobile-chat-border, #dce6ef) !important;
background: var(--mobile-chat-surface-2, #fbfcfe) !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-history-toggle {
display: inline-flex !important;
grid-column: 1 !important;
grid-row: 1 !important;
align-items: center !important;
justify-content: center !important;
width: 52px !important;
min-width: 52px !important;
height: var(--mobile-toolbar-control) !important;
min-height: var(--mobile-toolbar-control) !important;
padding: 0 8px !important;
border-radius: var(--mobile-ui-control-radius) !important;
font-size: var(--mobile-ui-small) !important;
line-height: 1 !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-current {
grid-column: 2 !important;
grid-row: 1 !important;
align-self: center !important;
min-width: 0 !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] :is(.text-chat-current strong, .text-chat-brand strong) {
font-size: var(--mobile-ui-title) !important;
line-height: 1.16 !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] :is(.text-chat-current span, .text-chat-brand span, .text-chat-history-preview, .text-chat-history-count, .text-chat-history-item time, .text-chat-bubble) {
font-size: var(--mobile-ui-small) !important;
line-height: 1.38 !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-modelbar {
grid-column: 1 / -1 !important;
grid-row: auto !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 8px !important;
align-items: center !important;
min-width: 0 !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-modelbar > label:not(.switch-row) {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
width: auto !important;
min-width: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-model-label {
display: none !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] :is(.text-new-chat-btn, .text-chat-search input, .text-chat-modelbar select, .text-chat-tools button, .text-chat-tools .switch-row) {
min-height: var(--mobile-toolbar-control) !important;
height: var(--mobile-toolbar-control) !important;
max-height: var(--mobile-toolbar-control) !important;
border-radius: var(--mobile-ui-control-radius) !important;
font-size: var(--font-ui) !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-modelbar select {
width: 100% !important;
min-width: 0 !important;
padding: 0 10px !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-tools .switch-row {
min-width: 64px !important;
padding: 0 9px !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-messages {
min-height: 0 !important;
padding: calc(var(--mobile-shell-gap) + 5px) !important;
gap: 10px !important;
overflow-y: auto !important;
background: var(--mobile-chat-surface, #ffffff) !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-message {
max-width: 96% !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-role,
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-message-copy {
display: none !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-bubble {
padding: 10px 11px !important;
border-radius: 16px !important;
font-size: var(--font-ui) !important;
line-height: 1.45 !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-footer {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 0 !important;
padding: calc(var(--mobile-shell-gap) + 3px) !important;
border-top: 1px solid var(--mobile-chat-border, #dce6ef) !important;
background: var(--mobile-chat-surface, #ffffff) !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-tools {
display: flex !important;
grid-column: 1 !important;
grid-row: auto !important;
flex-wrap: wrap !important;
justify-content: flex-end !important;
align-items: center !important;
gap: 6px !important;
min-width: 0 !important;
margin-bottom: 8px !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-composer {
--text-chat-send-min-width: 80px;
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(var(--text-chat-send-min-width), auto) !important;
gap: 6px !important;
align-items: end !important;
padding: 6px !important;
border: 1px solid var(--mobile-chat-border, #dce6ef) !important;
border-radius: var(--mobile-ui-frame-radius) !important;
background: var(--mobile-chat-surface-2, #fbfcfe) !important;
box-shadow: none !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-composer textarea {
min-height: calc(var(--mobile-control-h) * 1.9) !important;
max-height: calc(var(--mobile-control-h) * 4.4) !important;
padding: 8px 7px !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
font-size: var(--font-ui) !important;
line-height: 1.38 !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-composer .primary {
align-self: end !important;
width: auto !important;
min-width: var(--text-chat-send-min-width) !important;
height: var(--mobile-toolbar-control) !important;
min-height: var(--mobile-toolbar-control) !important;
padding: 0 10px !important;
border-radius: var(--mobile-ui-control-radius) !important;
font-size: var(--mobile-ui-small) !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-sidebar {
position: fixed !important;
z-index: calc(var(--z-sidebar-drawer) + 1) !important;
top: 56px !important;
bottom: 10px !important;
left: 10px !important;
display: grid !important;

grid-template-rows: auto auto minmax(0, 1fr) !important;
gap: 9px !important;
right: 10px !important;
width: auto !important;
padding: calc(var(--mobile-shell-gap) + 4px) !important;
border: 1px solid var(--mobile-chat-border, #dce6ef) !important;
border-radius: var(--mobile-ui-frame-radius) !important;
background: var(--mobile-chat-sidebar-bg, #f8fbfa) !important;
box-shadow: var(--mobile-chat-sidebar-shadow, 0 22px 50px rgba(15, 23, 42, 0.22)) !important;
transform: translateX(calc(-100% - 18px)) !important;
transition: transform 0.18s ease !important;
overflow: hidden !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-shell.text-history-open .text-chat-sidebar {
transform: translateX(0) !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-history-backdrop:not([hidden]) {
box-sizing: border-box !important;
display: block !important;

position: fixed !important;
z-index: var(--z-sidebar-drawer) !important;
inset: 0 !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: rgba(15, 23, 42, 0.38) !important;
box-shadow: none !important;
transform: none !important;
appearance: none !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-search-row {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 74px !important;
gap: 8px !important;
align-items: stretch !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-new-chat-btn {
width: 74px !important;
min-width: 74px !important;
padding: 0 10px !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-history-head-actions {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-history-close {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 58px !important;
height: 30px !important;
min-height: 30px !important;
padding: 0 10px !important;
border: 1px solid var(--mobile-chat-border, #dce6ef) !important;
border-radius: var(--mobile-ui-control-radius) !important;
background: #ffffff !important;
color: var(--accent) !important;
font-size: var(--mobile-ui-small) !important;
font-weight: 800 !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-history {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 7px !important;
min-height: 0 !important;
overflow-y: auto !important;
padding: 0 2px 2px 0 !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-brand {
display: none !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-history-item {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
grid-template-columns: minmax(0, 1fr) 48px !important;
gap: 7px !important;
min-height: 66px !important;
padding: 8px 9px 8px 11px !important;
border-radius: var(--mobile-ui-control-radius) !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-history-main {
gap: 6px !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-history-count {
min-width: 30px !important;
height: 18px !important;
padding: 0 5px !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-history-meta {
gap: 6px !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .text-chat-delete-btn {
min-width: 40px !important;
height: 32px !important;
min-height: 32px !important;
max-height: 32px !important;
padding: 0 9px !important;
font-size: var(--mobile-ui-small) !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="textModule"] .switch-row input[type="checkbox"] {
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="workflowModule"] :is(.workflow-toolbar, .workflow-toolbar-actions button, .workflow-dirty-badge),
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="canvasModule"] :is(.infinite-canvas-toolbar, .canvas-board-actions button, .workflow-dirty-badge) {
font-size: var(--font-ui) !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="workflowModule"] :is(.workflow-toolbar input, .workflow-toolbar button),
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="canvasModule"] :is(.canvas-board-row input, .canvas-board-row select, .canvas-board-actions button) {
min-height: var(--mobile-toolbar-control) !important;
height: var(--mobile-toolbar-control) !important;
max-height: var(--mobile-toolbar-control) !important;
border-radius: var(--mobile-ui-control-radius) !important;
}

body.mobile-ui:not(.auth-required) #appLayout :is(
#textTab,
#imageTab,
#videoToolTab,
#audioToolTab,
#speechToolPanel,
#musicToolPanel
) :is(.quick-options, .music-options, .options-grid) {
gap: var(--mobile-toolbar-gap) !important;
}

body.mobile-ui:not(.auth-required) #appLayout :is(
#textTab,
#imageTab,
#videoToolTab,
#audioToolTab,
#speechToolPanel,
#musicToolPanel
) .command-row {
gap: var(--mobile-toolbar-gap) !important;
}

body.mobile-ui:not(.auth-required) #appLayout :is(
#textTab,
#imageTab,
#videoToolTab,
#audioToolTab,
#speechToolPanel,
#musicToolPanel
) .command-row > :is(button, .button-link),
body.mobile-ui:not(.auth-required) #appLayout :is(
#textTab,
#imageTab,
#videoToolTab,
#audioToolTab,
#speechToolPanel,
#musicToolPanel
) :is(button.primary, button.secondary, button.danger, .primary, .secondary, .danger):not(.module-tab):not(.sidebar-toggle):not(.icon-button):not(.account-summary):not(.text-message-copy):not(.text-chat-delete-btn):not(.infinite-card-run):not(.infinite-inline-reference-add):not(.infinite-inline-reference-pick) {
min-height: var(--button-height) !important;
height: var(--button-height) !important;
max-height: var(--button-height) !important;
font-size: var(--font-ui) !important;
}

body.mobile-ui:not(.auth-required) #appLayout :is(
#textTab,
#imageTab,
#videoToolTab,
#audioToolTab,
#speechToolPanel,
#musicToolPanel
) details.advanced > summary {
min-height: var(--mobile-toolbar-control) !important;
height: var(--mobile-toolbar-control) !important;
max-height: var(--mobile-toolbar-control) !important;
padding: 0 10px !important;
font-size: var(--font-label) !important;
border-radius: var(--mobile-ui-control-radius) !important;
}

body.mobile-compact-ui:not(.auth-required) #appLayout:not(.tool-layout):not(.tools-layout):not(.workflow-layout):not(.canvas-layout):not(.settings-layout) .tab-panel,
body.mobile-compact-ui:not(.auth-required) .layout.media-tool-layout .tool-panel.active {
padding: 8px !important;
}

body.mobile-compact-ui:not(.auth-required) #appLayout :is(#textTab, #imageTab, #videoToolTab, #audioToolTab, #speechToolPanel, #musicToolPanel) textarea {
min-height: 76px !important;
}
body.mobile-compact-ui:not(.auth-required) #appLayout .prompt-rich-shell {
height: 76px;
min-height: 76px;
}
body.mobile-compact-ui:not(.auth-required) #appLayout .prompt-rich-editor {
height: 100%;
min-height: 0;
}
body:not(.auth-required) #appLayout #textTab #text-prompts.prompt-rich-source.prompt-rich-source,
body:not(.auth-required) #appLayout #imageTab #image-prompt.prompt-rich-source.prompt-rich-source,
body:not(.auth-required) #appLayout #videoToolTab #videoPrompt.prompt-rich-source.prompt-rich-source {
position: absolute !important;
width: 1px !important;
height: 1px !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: 1px !important;
max-height: 1px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
opacity: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
body.mobile-ui *,
body.mobile-ui *::before,
body.mobile-ui *::after {
scroll-behavior: auto !important;
}
}


body:not(.auth-required) {
--hui-title-font: 16px;
--hui-subtitle-font: 12px;
--hui-section-font: 12.5px;
--hui-body-font: 12.5px;
--hui-caption-font: 11.5px;
--hui-control-font: 12.5px;
--hui-title-weight: 820;
--hui-section-weight: 740;
}

body.mobile-ui {
--hui-title-font: clamp(14px, calc(var(--font-ui) + 2px), 16px);
--hui-subtitle-font: clamp(11.5px, var(--font-label), 12.5px);
--hui-section-font: clamp(12px, calc(var(--font-ui) - 0.2px), 13px);
--hui-body-font: clamp(12px, calc(var(--font-ui) - 0.4px), 13px);
--hui-caption-font: clamp(11px, calc(var(--font-label) - 0.4px), 12px);
--hui-control-font: clamp(12px, calc(var(--font-ui) - 0.2px), 13px);
--mobile-ui-title: var(--hui-title-font);
--mobile-ui-body: var(--hui-body-font);
--mobile-ui-small: var(--hui-subtitle-font);
}

body:not(.auth-required) :is(
#appLayout .tool-page-head h2:not(#videoToolTab > .tool-page-head h2),
#appLayout .monitor-header h2,
#appLayout .tool-card h2,
#appLayout .workflow-head h2,
#appLayout .workflow-inspector h2,
#appLayout .infinite-canvas-head h2,
#appLayout .settings-section-title strong,
#appLayout .gateway-card-head strong,
#appLayout .gateway-category-head strong,
#appLayout .model-route-head strong,
#appLayout .text-chat-current strong,
#appLayout .text-chat-brand strong,
#appLayout .canvas-board-title,
#appLayout .workflow-canvas-title,
.modal-panel .modal-head h2
) {
font-size: var(--hui-title-font) !important;
line-height: 1.2 !important;
font-weight: var(--hui-title-weight) !important;
letter-spacing: 0 !important;
}

body:not(.auth-required) :is(
#appLayout .tool-page-head p,
#appLayout .monitor-header p,
#appLayout .workflow-head p,
#appLayout .infinite-canvas-head p,
#appLayout .settings-section-title span,
#appLayout .gateway-card-head span,
#appLayout .gateway-category-head span,
#appLayout .model-route-head span,
#appLayout .text-chat-current span,
#appLayout .text-chat-brand span,
#appLayout .text-chat-history-head small,
.modal-panel .modal-head p
) {
font-size: var(--hui-subtitle-font) !important;
line-height: 1.34 !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
color: var(--muted) !important;
}

body:not(.auth-required) #appLayout :is(
label,
.field-title,
.field-label,
.option-label,
.upload-zone-head strong,
.drop-zone strong,
.text-chat-history-head,
.workflow-toolbar > label,
.canvas-board-row > label,
details.advanced > summary,
.settings-panel h3,
.model-route-toolbar strong
) {
font-size: var(--hui-section-font) !important;
line-height: 1.24 !important;
font-weight: var(--hui-section-weight) !important;
letter-spacing: 0 !important;
}

body:not(.auth-required) :is(
#appLayout .file-summary,
#appLayout .file-summary-picker,
#appLayout .plan-summary-inline,
#appLayout .task-meta,
#appLayout .drop-zone p,
#appLayout .model-capability-hint,
#appLayout .settings-provider-help,
#appLayout .runtime-note,
#appLayout .text-chat-bubble,
#appLayout .text-chat-empty p,
#appLayout .text-chat-history-preview,
#appLayout .text-chat-history-count,
#appLayout .text-chat-history-item time,
#appLayout .workflow-status-row,
#appLayout .canvas-composer-result,
#appLayout .media-library-card p,
#appLayout .favorite-case-card p,
#appLayout .workflow-project-card p,
#appLayout .workflow-media-library-card p,
#appLayout .task-row p,
#appLayout .task-list-row p,
#appLayout small,
.modal-panel :is(p, small, .file-summary)
) {
font-size: var(--hui-body-font) !important;
line-height: 1.38 !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
}

body:not(.auth-required) :is(
#appLayout input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
#appLayout select,
#appLayout textarea,
#appLayout button:not(.module-tab):not(.sidebar-toggle):not(.icon-button):not(.account-summary):not(.text-chat-delete-btn):not(.infinite-card-run):not(.infinite-inline-reference-add):not(.infinite-inline-reference-pick),
.modal-panel input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
.modal-panel select,
.modal-panel textarea,
.modal-panel button
):not(#infiniteCanvasPromptEditorModal *):where(:not([data-ui-unmanaged] *)) {
font-size: var(--hui-control-font) !important;
letter-spacing: 0 !important;
}

body.mobile-ui:not(.auth-required) #appLayout#appLayout#appLayout :is(
.tool-page-head h2:not(#videoToolTab > .tool-page-head h2),
.monitor-header h2,
.tool-card h2,
.workflow-head h2,
.workflow-inspector h2,
.infinite-canvas-head h2,
.settings-section-title strong,
.gateway-card-head strong,
.gateway-category-head strong,
.model-route-head strong,
.text-chat-current strong,
.text-chat-brand strong,
.canvas-board-title,
.workflow-canvas-title
),
body.mobile-ui:not(.auth-required) .modal-panel.modal-panel :is(.modal-head h2) {
font-size: var(--hui-title-font) !important;
line-height: 1.2 !important;
font-weight: var(--hui-title-weight) !important;
}

body.mobile-ui:not(.auth-required) #appLayout#appLayout#appLayout :is(
.tool-page-head p,
.monitor-header p,
.workflow-head p,
.infinite-canvas-head p,
.settings-section-title span,
.gateway-card-head span,
.gateway-category-head span,
.model-route-head span,
.text-chat-current span,
.text-chat-brand span,
.text-chat-history-head small
) {
font-size: var(--hui-subtitle-font) !important;
line-height: 1.34 !important;
font-weight: 500 !important;
}

body.mobile-ui:not(.auth-required) #appLayout#appLayout#appLayout :is(
label,
.field-title,
.field-label,
.option-label,
.upload-zone-head strong,
.drop-zone strong,
.text-chat-history-head,
.workflow-toolbar > label,
.canvas-board-row > label,
details.advanced > summary,
.settings-panel h3,
.model-route-toolbar strong
) {
font-size: var(--hui-section-font) !important;
line-height: 1.24 !important;
font-weight: var(--hui-section-weight) !important;
}

body.mobile-ui:not(.auth-required) #appLayout#appLayout#appLayout :is(
.file-summary,
.file-summary-picker,
.plan-summary-inline,
.task-meta,
.drop-zone p,
.model-capability-hint,
.settings-provider-help,
.runtime-note,
.text-chat-bubble,
.text-chat-empty p,
.text-chat-history-preview,
.text-chat-history-count,
.text-chat-history-item time,
.workflow-status-row,
.canvas-composer-result,
.media-library-card p,
.favorite-case-card p,
.workflow-project-card p,
.workflow-media-library-card p,
.task-row p,
.task-list-row p,
small
),
body.mobile-ui:not(.auth-required) .modal-panel.modal-panel :is(p, small, .file-summary) {
font-size: var(--hui-body-font) !important;
line-height: 1.38 !important;
font-weight: 400 !important;
}

body.mobile-ui:not(.auth-required) #appLayout#appLayout#appLayout :is(
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
select,
textarea,
button:not(.module-tab):not(.sidebar-toggle):not(.icon-button):not(.account-summary):not(.text-chat-delete-btn)
):where(:not([data-ui-unmanaged] *)),
body.mobile-ui:not(.auth-required) .modal-panel.modal-panel :is(
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
select,
textarea,
button
):where(:not([data-ui-unmanaged] *)) {
font-size: var(--hui-control-font) !important;
}

body.mobile-ui:not(.auth-required) :is(
#caseModal,
#imagePreviewModal,
#mediaPreviewModal,
#watermarkModal,
#watermarkPickerModal,
#shortcutModal,
#workflowCommandModal,
#canvasCommandModal,
#workflowProjectModal,
#canvasProjectModal,
#workflowMediaLibraryModal,
#accountUsageModal
) .modal-panel.modal-panel > .modal-head h2 {
font-size: var(--hui-title-font) !important;
line-height: 1.2 !important;
font-weight: var(--hui-title-weight) !important;
letter-spacing: 0 !important;
}

body.mobile-ui:not(.auth-required) :is(
#caseModal,
#imagePreviewModal,
#mediaPreviewModal,
#watermarkModal,
#watermarkPickerModal,
#shortcutModal,
#workflowCommandModal,
#canvasCommandModal,
#workflowProjectModal,
#canvasProjectModal,
#workflowMediaLibraryModal,
#accountUsageModal
) .modal-panel.modal-panel > .modal-head :is(p, small) {
font-size: var(--hui-subtitle-font) !important;
line-height: 1.34 !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
}

body.mobile-ui:not(.auth-required) :is(
#caseModal,
#imagePreviewModal,
#mediaPreviewModal,
#watermarkModal,
#watermarkPickerModal,
#shortcutModal,
#workflowCommandModal,
#canvasCommandModal,
#workflowProjectModal,
#canvasProjectModal,
#workflowMediaLibraryModal,
#accountUsageModal
) .modal-panel.modal-panel :is(.file-summary, p, small, input, select, textarea, button) {
font-size: var(--hui-body-font) !important;
letter-spacing: 0 !important;
}



body:not(.auth-required) #appLayout .reference-picker.reference-picker {
--reference-thumb-size: 68px;
--reference-add-size: 58px;
--reference-picker-empty-min: 72px;
--reference-picker-filled-max: 288px;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: center !important;
gap: 8px !important;
min-height: var(--reference-picker-empty-min) !important;
height: auto !important;
max-height: none !important;
padding: 10px 12px !important;
white-space: normal !important;
overflow: hidden !important;
}

body:not(.auth-required) #appLayout .reference-picker.reference-picker.has-reference-items {
justify-content: flex-start !important;
min-height: 0 !important; 
max-height: var(--reference-picker-filled-max) !important;
overflow-y: auto !important;
}

body:not(.auth-required) #appLayout .reference-picker .reference-picker-hint {
display: block !important;
flex: 0 0 auto !important;
color: #607086 !important;
}

body:not(.auth-required) #appLayout .reference-picker.has-reference-items .reference-picker-hint {
color: #74849a !important;
font-size: var(--hui-caption-font, 11.5px) !important;
}

body:not(.auth-required) #appLayout .reference-picker .selected-preview {
display: none !important;
grid-template-columns: repeat(auto-fill, var(--reference-thumb-size)) !important;
justify-content: start !important;
align-items: start !important;
gap: 8px !important;
width: 100% !important;
max-height: none !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
overflow: visible !important;
}

body:not(.auth-required) #appLayout .reference-picker.has-reference-items .selected-preview {
display: grid !important;
}

body:not(.auth-required) #appLayout .reference-picker .selected-preview:empty {
display: none !important;
}

body:not(.auth-required) #appLayout .reference-picker .selected-thumb {
display: flex !important;
position: relative !important;
aspect-ratio: 1 / 1 !important;
justify-self: start !important;
width: var(--reference-thumb-size) !important;
min-width: 0 !important;
max-width: var(--reference-thumb-size) !important;
height: var(--reference-thumb-size) !important;
min-height: var(--reference-thumb-size) !important;
max-height: var(--reference-thumb-size) !important;
border-radius: 10px !important;
overflow: hidden !important;
background: #ffffff !important;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06) !important;
}

body:not(.auth-required) #appLayout .reference-picker .selected-thumb > :is(img, video),
body:not(.auth-required) #appLayout .reference-picker .thumb-preview-plain > :is(img, video) {
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
object-fit: cover !important;
}

body:not(.auth-required) #appLayout .reference-picker .thumb-preview-plain {
display: block !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
}

body:not(.auth-required) #appLayout .reference-picker .selected-thumb:not(.reference-add-tile) > span:not(.media-play-badge):not(.media-thumb-icon):not(.reference-media-placeholder):not(.reference-video-cover),
body:not(.auth-required) #appLayout .reference-picker .selected-thumb:not(.reference-add-tile) > strong {
display: none !important;
position: absolute !important;
left: 6px !important;
right: 6px !important;
bottom: 6px !important;
z-index: 1 !important;
min-width: 0 !important;
padding: 3px 5px !important;
border-radius: 7px !important;
background: rgba(255, 255, 255, 0.9) !important;
color: #213047 !important;
font-size: 10.5px !important;
line-height: 1.15 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}

body:not(.auth-required) #appLayout :is(.reference-picker .thumb-remove, .workflow-media-overlay-remove) {
top: 3px !important;
right: 3px !important;
z-index: 2 !important;
width: 18px !important;
min-width: 18px !important;
max-width: 18px !important;
min-height: 18px !important;
height: 18px !important;
max-height: 18px !important;
padding: 3px !important;
border: 0 !important;
border-radius: 999px !important;
line-height: 1 !important;
background: rgba(15, 23, 42, 0.62) !important;
color: #fff !important;
box-shadow: none !important;
transition: opacity 120ms ease !important;
}
body:not(.auth-required) #appLayout :is(.reference-picker .thumb-remove, .workflow-media-overlay-remove) svg {
display: block;
width: 100%;
height: 100%;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
}
@media (hover: hover) {
body:not(.auth-required) #appLayout :is(.reference-picker .thumb-remove, .workflow-media-overlay-remove) {
opacity: 0 !important;
pointer-events: none !important;
}
body:not(.auth-required) #appLayout :is(.reference-picker .selected-thumb, .workflow-media-overlay-thumb):is(:hover, :focus-within) > .thumb-remove {
opacity: 1 !important;
pointer-events: auto !important;
}
}

body:not(.auth-required) #appLayout .reference-picker .reference-add-tile {
display: grid !important;
place-items: center !important;
align-self: center !important;
justify-self: center !important;
width: var(--reference-add-size) !important;
min-width: 0 !important;
max-width: var(--reference-add-size) !important;
height: var(--reference-add-size) !important;
min-height: var(--reference-add-size) !important;
max-height: var(--reference-add-size) !important;
border: 1px dashed rgba(47, 109, 183, 0.42) !important;
background: rgba(234, 242, 251, 0.72) !important;
color: var(--info) !important;
cursor: pointer !important;
box-shadow: none !important;
padding: 0 !important;
}

body:not(.auth-required) #appLayout .reference-picker .reference-add-tile > span {
display: block !important;
position: static !important;
padding: 0 !important;
background: transparent !important;
color: inherit !important;
font-size: 21px !important;
line-height: 1 !important;
font-weight: 500 !important;
}

body.theme-dark:not(.auth-required) #appLayout .reference-picker .selected-thumb {
background: rgba(16, 18, 26, 0.94) !important;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22) !important;
}

body.theme-dark:not(.auth-required) #appLayout .reference-picker .selected-thumb:not(.reference-add-tile) > span:not(.media-play-badge):not(.media-thumb-icon):not(.reference-media-placeholder):not(.reference-video-cover),
body.theme-dark:not(.auth-required) #appLayout .reference-picker .selected-thumb:not(.reference-add-tile) > strong {
background: rgba(16, 18, 26, 0.86) !important;
color: #edf5ff !important;
}

body.theme-dark:not(.auth-required) #appLayout .reference-picker .reference-add-tile {
background: rgba(47, 109, 183, 0.18) !important;
}

body.mobile-ui:not(.auth-required) #appLayout .reference-picker.reference-picker {
--reference-thumb-size: 62px;
--reference-add-size: 50px;
--reference-picker-empty-min: calc(var(--mobile-control-h) * 2.15);
--reference-picker-filled-max: calc(var(--mobile-control-h) * 7.4);
min-height: var(--reference-picker-empty-min) !important;
padding: 10px 12px !important;
gap: 8px !important;
border-radius: 12px !important;
}

body.mobile-ui:not(.auth-required) #appLayout .reference-picker.reference-picker.has-reference-items {
min-height: 0 !important;
max-height: var(--reference-picker-filled-max) !important;
}

body.mobile-ui:not(.auth-required) #appLayout .reference-picker .selected-preview {
grid-template-columns: repeat(auto-fill, var(--reference-thumb-size)) !important;
justify-content: start !important;
gap: 7px !important;
}

body.mobile-ui:not(.auth-required) #appLayout .reference-picker .selected-thumb {
width: var(--reference-thumb-size) !important;
max-width: var(--reference-thumb-size) !important;
height: var(--reference-thumb-size) !important;
min-height: var(--reference-thumb-size) !important;
max-height: var(--reference-thumb-size) !important;
border-radius: 10px !important;
}

body.mobile-ui:not(.auth-required) #appLayout .reference-picker .reference-add-tile {
width: var(--reference-add-size) !important;
max-width: var(--reference-add-size) !important;
height: var(--reference-add-size) !important;
min-height: var(--reference-add-size) !important;
max-height: var(--reference-add-size) !important;
}

body.mobile-ui:not(.auth-required) #appLayout#appLayout#appLayout .reference-picker .thumb-remove.thumb-remove {
width: 20px !important;
min-width: 20px !important;
max-width: 20px !important;
min-height: 20px !important;
height: 20px !important;
max-height: 20px !important;
padding: 2px !important;
border-radius: 999px !important;
font-size: 9.5px !important;
line-height: 1 !important;
}

body.mobile-compact-ui:not(.auth-required) #appLayout .reference-picker .selected-preview {
grid-template-columns: repeat(auto-fill, var(--reference-thumb-size)) !important;
}

body.mobile-ui:not(.auth-required) #appLayout#appLayout :is(
#textFileSummary,
#fileSummary,
#sharedFileSummary,
#videoFileSummary,
#musicAudioFileSummary
).reference-picker.reference-picker {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: center !important;
min-height: var(--reference-picker-empty-min) !important;
height: auto !important;
max-height: none !important;
overflow: hidden !important;
}

body.mobile-ui:not(.auth-required) #appLayout#appLayout :is(
#textFileSummary,
#fileSummary,
#sharedFileSummary,
#videoFileSummary,
#musicAudioFileSummary
).reference-picker.reference-picker.has-reference-items {
justify-content: flex-start !important;
min-height: 0 !important;
max-height: min(230px, var(--reference-picker-filled-max)) !important;
overflow-y: auto !important;
}


body:not(.auth-required) #appLayout .reference-picker.has-reference-items {
cursor: default !important;
}

body:not(.auth-required) #appLayout .reference-picker .selected-thumb[data-ref-source] {
cursor: grab !important;
touch-action: none !important;
user-select: none !important;
transition: transform 150ms ease, box-shadow 150ms ease, opacity 150ms ease !important;
}

body:not(.auth-required) #appLayout .reference-picker .selected-thumb.reference-dragging-live {
position: fixed !important;
z-index: var(--z-drag-ghost) !important;
margin: 0 !important;
pointer-events: none !important;
cursor: grabbing !important;
transform: scale(1.04) !important;
opacity: 0.96 !important;
box-shadow: 0 16px 34px rgba(15, 23, 42, 0.22) !important;
transition: none !important;
}


body:not(.auth-required) #appLayout .reference-picker .reference-drag-placeholder {
border-color: transparent !important;
background: none !important;
box-shadow: none !important;
}

body:not(.auth-required) #appLayout .reference-picker.reference-delete-hover {
border-color: rgba(220, 38, 38, 0.72) !important;
background: rgba(254, 242, 242, 0.92) !important;
}

body:not(.auth-required) #appLayout .reference-picker.reference-delete-hover .reference-picker-hint {
color: #b91c1c !important;
}

body:not(.auth-required) #appLayout .reference-picker .selected-thumb.reference-dragging-delete {
opacity: 0.72 !important;
filter: saturate(0.85) !important;
}

body.mobile-ui:not(.auth-required) header.topbar #accountSummary.account-summary.account-summary-points .account-points-icon {
width: calc(var(--mobile-icon-svg) + 2px) !important;
height: calc(var(--mobile-icon-svg) + 2px) !important;
min-width: calc(var(--mobile-icon-svg) + 2px) !important;
min-height: calc(var(--mobile-icon-svg) + 2px) !important;
max-width: calc(var(--mobile-icon-svg) + 2px) !important;
max-height: calc(var(--mobile-icon-svg) + 2px) !important;
border-radius: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}

body.mobile-ui:not(.auth-required) header.topbar #accountSummary.account-summary.account-summary-points .account-points-icon svg {
width: var(--mobile-icon-svg) !important;
height: var(--mobile-icon-svg) !important;
min-width: var(--mobile-icon-svg) !important;
min-height: var(--mobile-icon-svg) !important;
max-width: var(--mobile-icon-svg) !important;
max-height: var(--mobile-icon-svg) !important;
}


body:not(.auth-required) #appLayout #workflowTab .flow-toolbar-2row,
body:not(.auth-required) #appLayout #infiniteCanvasTab .flow-toolbar-2row {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
grid-template-columns: none !important;
gap: 4px !important;
width: fit-content !important;
max-width: calc(100% - 32px) !important;
min-width: 0 !important;
max-height: none !important;
}

body.mobile-ui:not(.auth-required) #appLayout #infiniteCanvasTab .infinite-canvas-main,
body.mobile-ui:not(.auth-required) #appLayout #infiniteCanvasTab .infinite-canvas-toolbar,
body.mobile-ui:not(.auth-required) #appLayout #infiniteCanvasTab .canvas-creator-bar,
body.mobile-ui:not(.auth-required) #appLayout #workflowTab .workflow-main {
min-width: 0 !important;
max-width: 100% !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="canvasModule"] .infinite-canvas-main,
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="workflowModule"] .workflow-main {
box-sizing: border-box !important;
padding-bottom: 0 !important;
}
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="workflowModule"] #workflowTab.active .flow-toolbar-2row,
body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasTab.active .flow-toolbar-2row {
position: absolute !important;
top: 8px !important;
left: 8px !important;
right: auto !important;
bottom: auto !important;
width: calc(100vw - 16px) !important;
max-width: calc(100vw - 16px) !important;
height: auto !important;
max-height: var(--mobile-toolbar-max) !important;
align-items: stretch !important;
flex-direction: column !important;
gap: 4px !important;
}
body:not(.auth-required) #appLayout .flow-toolbar-2row .flow-toolbar-primary,
body:not(.auth-required) #appLayout .flow-toolbar-2row .flow-toolbar-secondary {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 2px !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
max-height: none !important;
}
body:not(.auth-required) #appLayout .flow-toolbar-2row .flow-toolbar-primary > .primary,
body:not(.auth-required) #appLayout .flow-toolbar-2row .flow-toolbar-primary > .secondary {
flex: 0 0 auto !important;
width: auto !important;
min-width: 0 !important;
}

body:not(.auth-required) #appLayout #workflowRunBtn {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
white-space: nowrap !important;
}
body:not(.auth-required) #appLayout #workflowRunBtn .run-inline-price {
display: inline-flex !important;
align-items: center !important;
}

body:not(.auth-required) #appLayout .flow-toolbar-2row .flow-toolbar-primary .flow-toolbar-name {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 0 !important;
flex: 0 1 196px !important;
min-width: 132px !important;
max-width: 196px !important;
margin: 0 !important;
}
body:not(.auth-required) #appLayout .flow-toolbar-2row .flow-toolbar-name > span {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
clip-path: inset(50%) !important;
}
body:not(.auth-required) #appLayout .flow-toolbar-2row .flow-toolbar-name > input {
flex: 1 1 auto !important;
min-width: 0 !important;
width: auto !important;
}

body.mobile-ui:not(.auth-required) #appLayout .flow-toolbar-2row .flow-toolbar-primary .flow-toolbar-name {
flex: 1 1 120px !important;
min-width: 96px !important;
max-width: none !important;
}
body.mobile-ui:not(.auth-required) #appLayout .flow-toolbar-2row .flow-toolbar-primary {
width: 100% !important;
padding-right: calc(var(--studio-command-control-size) + 3px);
}
body.mobile-ui:not(.auth-required) #appLayout .flow-toolbar-2row .flow-toolbar-secondary {
width: 100% !important;
max-width: 100% !important;
margin-left: 0;
padding: 4px 0 0;
border-top: 1px solid var(--studio-command-divider);
border-left: 0;
overflow-x: auto;
overflow-y: hidden;
}
body.mobile-ui:not(.auth-required) #appLayout .flow-toolbar-collapse {
position: absolute;
top: 5px;
right: 5px;
}

body.mobile-ui:not(.auth-required) .flow-toolbar-mini {
max-width: calc(100vw - 24px) !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scrollbar-width: none !important;
-webkit-overflow-scrolling: touch !important;
overscroll-behavior-x: contain !important;
}
body.mobile-ui:not(.auth-required) .flow-toolbar-mini::-webkit-scrollbar { display: none !important; }
body.mobile-ui:not(.auth-required) .flow-toolbar-mini .flow-mini-name { max-width: 40vw !important; }

body.mobile-ui:not(.auth-required) .canvas-board-actions,
body.mobile-ui:not(.auth-required) .workflow-toolbar-actions { scrollbar-width: none !important; }
body.mobile-ui:not(.auth-required) .canvas-board-actions::-webkit-scrollbar,
body.mobile-ui:not(.auth-required) .workflow-toolbar-actions::-webkit-scrollbar { display: none !important; }


body.mobile-ui:not(.auth-required) #accountUsageModal .account-usage-panel > * {
flex-shrink: 0 !important;
}

body.mobile-ui:not(.auth-required) #accountUsageModal :is(.admin-account-manager, .admin-audit-manager, .admin-recycle-manager, .admin-feedback-manager, .account-redeem-pane, .account-usage-history, .routing-health-monitor):not([hidden]) {
overflow: visible !important;
display: grid !important; 
align-content: start !important; 
}


@media (max-width: 720px) {
body:not(.auth-required) #accountUsageModal .account-usage-tools {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
}

body:not(.auth-required) #accountUsageModal .account-usage-tools > input[type="search"],
body:not(.auth-required) #accountUsageModal .account-usage-tools > .account-usage-filter {
flex: 1 1 100% !important;
width: 100% !important;
}

body:not(.auth-required) #accountUsageModal .account-usage-tools .account-usage-date {
flex: 1 1 0 !important;
min-width: 0 !important;
}

body:not(.auth-required) #accountUsageModal .account-usage-tools .account-usage-date input {
width: 100% !important;
min-width: 0 !important;
}

body:not(.auth-required) #accountUsageModal #refreshAccountUsageBtn {
flex: 0 0 auto !important;
}
}
body.mobile-ui:not(.auth-required) #accountUsageModal :is(#adminAccountList, #adminAuditList, #adminRecycleList, #adminFeedbackList, .account-usage-table-wrap) {
overflow: visible !important;
min-height: 0 !important;
}


body.mobile-ui:not(.auth-required) :is(#workflowProjectModal, #canvasProjectModal) :is(.workflow-project-card, .canvas-project-card) {
display: flex !important;
flex-direction: column !important;
height: auto !important;
gap: 9px !important;
grid-template-columns: none !important;
grid-template-rows: none !important;
align-items: stretch !important;
}

body.mobile-ui:not(.auth-required) #canvasProjectModal .canvas-project-preview {
grid-column: auto !important;
grid-row: auto !important;
width: 100% !important;
max-width: 100% !important;
height: 92px !important;
min-height: 92px !important;
max-height: 92px !important;
}

body.mobile-ui:not(.auth-required) :is(#workflowProjectModal, #canvasProjectModal) :is(.workflow-project-actions, .canvas-project-actions) {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
grid-auto-rows: auto !important;
align-content: start !important;
gap: 7px !important;
}




body.mobile-ui:not(.auth-required) #accountUsageModal .admin-redeem-head {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 8px !important;
}
body.mobile-ui:not(.auth-required) #accountUsageModal .admin-redeem-grid {
grid-template-columns: minmax(0, 1fr) !important;
gap: 9px !important;
}
body.mobile-ui:not(.auth-required) #accountUsageModal .admin-redeem-grid :is(.admin-redeem-group-title, .arc-offering, .arc-prefix, .arc-suffix, .arc-num, .arc-expiry, .arc-note, .admin-redeem-reward-preview, .arc-submit) {
grid-column: auto !important;
}
body.mobile-ui:not(.auth-required) #accountUsageModal .admin-redeem-grid :is(label, input, select),
body.mobile-ui:not(.auth-required) #accountUsageModal .admin-redeem-grid .admin-redeem-reward-preview,
body.mobile-ui:not(.auth-required) #accountUsageModal .admin-redeem-grid .arc-submit,
body.mobile-ui:not(.auth-required) #accountUsageModal .admin-redeem-head > button {
width: 100% !important;
max-width: 100% !important;
}
body.mobile-ui:not(.auth-required) #accountUsageModal .admin-redeem-grid .arc-submit {
height: 40px !important;
}

body.mobile-ui:not(.auth-required) #accountUsageModal .admin-redeem-row {
grid-template-columns: minmax(0, 1fr) !important;
gap: 8px !important;
}
body.mobile-ui:not(.auth-required) #accountUsageModal .admin-redeem-actions {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 7px !important;
}


body.mobile-ui:not(.auth-required) #accountUsageModal .recharge-pkg-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
}
body.mobile-ui:not(.auth-required) #accountUsageModal .membership-pkg:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
@media (max-width: 340px) {
body.mobile-ui:not(.auth-required) #accountUsageModal #membershipPackages {
grid-template-columns: minmax(0, 1fr) !important;
}
body.mobile-ui:not(.auth-required) #accountUsageModal #membershipPackages .membership-pkg {
grid-column: auto !important;
}
}
body.mobile-ui:not(.auth-required) #accountUsageModal .recharge-pkg {
padding: 13px 11px !important;
gap: 5px !important;
}
body.mobile-ui:not(.auth-required) #accountUsageModal .recharge-pkg-name {
font-size: 14.5px !important;
}
body.mobile-ui:not(.auth-required) #accountUsageModal .recharge-pkg-points b {
font-size: 20px !important;
}
body.mobile-ui:not(.auth-required) #accountUsageModal .recharge-pkg-price {
font-size: 15px !important;
}


body.mobile-ui:not(.auth-required) :is(#presetCaseModal, #communityGalleryModal) .hl-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
}


body.mobile-ui:not(.auth-required) #caseModal #caseList {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
align-content: start !important;
}

body.mobile-ui:not(.auth-required) :is(.hl-grid, #caseList) .hl-card-prev {
aspect-ratio: 4 / 3 !important;
}
body.mobile-ui:not(.auth-required) :is(.hl-grid, #caseList) .hl-card-prompt {
-webkit-line-clamp: 2 !important;
}


body.mobile-ui:not(.auth-required) :is(#workflowProjectList, #canvasProjectList) {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
grid-auto-rows: max-content !important;
align-items: start !important;
gap: 10px !important;
}

body.mobile-ui:not(.auth-required) :is(#workflowProjectModal, #canvasProjectModal) .project-card-cover {
height: 70px !important;
min-height: 70px !important;
max-height: 70px !important;
}
body.mobile-ui:not(.auth-required) #canvasProjectModal .canvas-project-preview {
height: 70px !important;
min-height: 70px !important;
max-height: 70px !important;
}
body.mobile-ui:not(.auth-required) :is(#workflowProjectModal, #canvasProjectModal) .project-card-cover-tags em {
font-size: 10px !important;
padding: 1px 5px !important;
}

body.mobile-ui:not(.auth-required) :is(#workflowProjectModal, #canvasProjectModal) .workflow-project-main p {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
body.mobile-ui:not(.auth-required) :is(#workflowProjectModal, #canvasProjectModal) :is(.workflow-project-actions, .canvas-project-actions) button {
font-size: 11.5px !important;
padding: 6px 4px !important;
min-height: 30px !important;
}

body.mobile-ui:not(.auth-required) #canvasProjectModal .canvas-project-actions button:last-child {
grid-column: 1 / -1 !important;
}

body.mobile-ui:not(.auth-required) #appLayout[data-module-panel="canvasModule"] #infiniteCanvasTab.active .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > button.infinite-card-run.infinite-card-run {
min-height: var(--canvas-inline-run-h, 40px) !important;
height: var(--canvas-inline-run-h, 40px) !important;
max-height: none !important;
padding: 0 var(--canvas-inline-run-pad-x, 18px) !important;
border-radius: 999px !important;
font-size: var(--canvas-inline-run-font, 15px) !important;
line-height: 1 !important;
}



@media (max-width: 640px) {
body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal.modal-mask:not([hidden]) {
align-items: stretch !important;
justify-items: stretch !important;
padding: 6px !important;
overflow: hidden !important;
}

body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-panel {
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
width: calc(100vw - 12px) !important;
width: calc(100dvw - 12px) !important;
max-width: calc(100vw - 12px) !important;
max-width: calc(100dvw - 12px) !important;
height: calc(100dvh - 12px) !important;
max-height: calc(100dvh - 12px) !important;
min-height: 0 !important;
padding-block: var(--ui-panel-padding-block, var(--scale-gap)) !important;
padding-inline: 10px !important;
overflow: hidden !important;
border-radius: 18px !important;
}

body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal .modal-head {
position: static !important;
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
flex: 0 0 auto !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border-radius: 0 !important;
}

body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-head-actions {
order: 2 !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: stretch !important;
gap: 8px !important;
width: 100% !important;
min-width: 0 !important;
margin-left: 0 !important;
}

body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-head-actions .storage-usage-library {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
}

body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-head-actions #closeWorkflowMediaLibraryBtn {
width: auto !important;
min-width: max-content !important;
}

body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal .modal-head h2 {
min-width: 0 !important;
margin: 0 !important;
}

body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal .workflow-project-status {
margin-top: 3px !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}

body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-switch {
width: 100% !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
flex: 0 0 auto !important;
margin: 0 0 8px !important;
}

body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-switch button {
min-width: 0 !important;
min-height: 32px !important;
height: 32px !important;
font-size: 12px !important;
}

body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-view.is-active {
overflow: hidden !important;
flex: 1 1 auto !important;
min-height: 0 !important;
}

body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-tools {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(74px, 0.62fr) minmax(68px, 0.56fr) !important;
align-items: stretch !important;
flex: 0 0 auto !important;
gap: 6px !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
}

body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal #workflowMediaLibrarySearch {
grid-column: 1 / -1 !important;
width: 100% !important;
min-width: 0 !important;
}

body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal :is(#workflowMediaLibraryKind, #workflowMediaLibraryDownloadBtn, #workflowMediaLibraryRefreshBtn) {
width: 100% !important;
min-width: 0 !important;
height: 32px !important;
min-height: 32px !important;
max-height: 32px !important;
}

body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-list {
flex: 1 1 auto !important;
min-height: 0 !important;
max-height: none !important;
overflow-x: hidden !important;
overflow-y: auto !important;
grid-auto-rows: max-content !important;
align-content: start !important;
padding: 0 2px 0 0 !important;
}

body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-list > .workflow-project-empty {
grid-column: 1 / -1 !important;
width: 100% !important;
min-height: 220px !important;
align-self: stretch !important;
}

body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal .workflow-media-upload-view {
gap: var(--ui-panel-gap) !important;
overflow: hidden !important;
}

body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal .workflow-media-upload-drop {
grid-template-columns: minmax(0, 1fr) !important;
min-height: 54px !important;
padding: 8px 9px !important;
border-radius: 12px !important;
text-align: left !important;
}

body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal .workflow-media-upload-drop strong {
grid-column: 1 !important;
font-size: 12.5px !important;
line-height: 1.15 !important;
}

body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal .workflow-media-upload-drop span {
grid-column: 1 !important;
font-size: 10.8px !important;
line-height: 1.25 !important;
}

body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal .workflow-media-upload-pending-badge {
right: 8px !important;
top: 8px !important;
min-height: 21px !important;
padding: 0 8px !important;
font-size: 10.5px !important;
}

body.mobile-ui:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-card {
grid-template-rows: auto max-content !important;
}

body.mobile-ui.media-library-pick-mode:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-pickbar {
display: flex !important;
flex: 0 0 auto !important;
align-items: stretch !important;
gap: 8px !important;
width: 100% !important;
padding: 9px !important;
border-radius: 14px !important;
}

body.mobile-ui.media-library-pick-mode:not(.auth-required) #workflowMediaLibraryPickHint {
flex: 1 1 100% !important;
font-size: 11.5px !important;
line-height: 1.35 !important;
}

body.mobile-ui.media-library-pick-mode:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-pickbar-actions {
display: grid !important;
grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr) !important;
gap: 6px !important;
width: 100% !important;
}

body.mobile-ui.media-library-pick-mode:not(.auth-required) #workflowMediaLibraryModal .workflow-media-library-pickbar-actions button {
width: 100% !important;
min-width: 0 !important;
min-height: 32px !important;
height: 32px !important;
padding: 0 8px !important;
border-radius: 10px !important;
font-size: 11px !important;
white-space: nowrap !important;
}
}

body.theme-switching:not(.auth-required) :where(*):not(#themeToggleBtn):not(#themeToggleBtn *) {
transition: none !important;
}


body {
-webkit-user-select: none;
user-select: none;
}
input, textarea, select, [contenteditable="true"],
.text-chat-bubble, .gen-prompt, .media-thumb-prompt,
.app-confirm-prompt, .feed-detail-prompt, .media-detail-prompt,
.feed-detail-panel, .feed-detail-panel *,
.feed-detail-preview, .feed-detail-preview * {
-webkit-user-select: text;
user-select: text;
}


@media (hover: none), (pointer: coarse) {
body {
-webkit-touch-callout: none;
}
.gen-slide img,
.gen-slide video,
.workflow-media-library-preview img,
.workflow-media-library-preview video,
.media-thumb img,
.media-thumb video,
.thumb .thumb-preview img,
.thumb .thumb-preview video {
pointer-events: none;
}

input, textarea, select, [contenteditable="true"],
.text-chat-bubble, .gen-prompt,
.app-confirm-prompt, .feed-detail-prompt, .media-detail-prompt {
-webkit-touch-callout: default;
}

.feed-detail-preview img,
.feed-detail-preview video {
pointer-events: auto;
}

.feed-detail-media,
.media-detail-zoom-target {
-webkit-touch-callout: default;
}
.feed-detail-preview img:not(.feed-detail-media):not(.media-detail-zoom-target),
.feed-detail-preview video:not(.feed-detail-media):not(.media-detail-zoom-target),
.vinyl-cover {
-webkit-touch-callout: none;
}

.gen-card, .gen-card *,
.workflow-media-library-card, .workflow-media-library-card *,
.media-thumb, .media-thumb * {
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}

.gen-drag-ghost,
.app-output-drag-ghost,
.workflow-media-library-card-ghost {
width: 60px;
height: 60px;
font-size: 22px;
}
}




body.mobile-ui #imageStudioModal.modal-mask,
body.mobile-ui #poserStudioModal.modal-mask {
padding: 0 !important; align-items: stretch !important; justify-content: stretch !important;
}
body.mobile-ui #imageStudioModal .image-studio-panel,
body.mobile-ui #poserStudioModal .poser-studio-panel {
width: 100% !important; max-width: none !important;
height: 100% !important; max-height: none !important; min-height: 0 !important;
margin: 0 !important; padding: 0 !important; border-radius: 0 !important; transform: none !important;
}



body.mobile-ui .image-studio-rail {
left: 6px; right: 6px; top: auto; bottom: 6px; transform: none;
flex-direction: row; gap: 2px; padding: 5px 6px; border-radius: 14px;
overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
body.mobile-ui .image-studio-rail::-webkit-scrollbar { display: none; }
body.mobile-ui .image-studio-tool { width: auto; min-width: 50px; flex: 0 0 auto; padding: 5px 7px; grid-template-rows: auto auto; }
body.mobile-ui .image-studio-tool-ico svg { width: 18px; height: 18px; }
body.mobile-ui .image-studio-tool-label { font-size: 10px; }

body.mobile-ui .image-studio-options {
left: 6px; right: 6px; top: 6px; transform: none; max-width: none;
justify-content: flex-start;
min-height: 38px; padding: 5px 10px; gap: 6px; border-radius: 12px;
overflow-x: auto; overflow-y: hidden; white-space: nowrap; flex-wrap: nowrap;
-webkit-overflow-scrolling: touch; scrollbar-width: none;
}
body.mobile-ui .image-studio-options::-webkit-scrollbar { display: none; }
body.mobile-ui .image-studio-options-hint { font-size: 12px; }

body.mobile-ui .image-studio-topright {
top: 62px; right: 6px; gap: 4px; padding: 4px; border-radius: 12px;
display: flex; flex-wrap: nowrap; width: auto;
}
body.mobile-ui .image-studio-topright .image-studio-sep { display: none; }
body.mobile-ui .image-studio-iconbtn { width: 32px; height: 32px; }
body.mobile-ui .image-studio-iconbtn svg { width: 17px; height: 17px; }

body.mobile-ui .image-studio-foot {
left: 6px; right: 6px; bottom: 66px; transform: none;
justify-content: space-between; gap: 8px;
}
body.mobile-ui .image-studio-zoom { padding: 4px 6px; }
body.mobile-ui .image-studio-save { padding: 0 16px; font-size: 13px; }

body.mobile-ui #imageStudioModal .image-studio { --studio-ai-drawer-h: 42dvh; }
body.mobile-ui .image-studio-aipanel {
left: 6px; right: 6px; top: auto; bottom: 120px; width: auto;
max-height: var(--studio-ai-drawer-h); border-radius: 16px; padding: 12px;
}

body.mobile-ui #imageStudioModal .image-studio-aipanel .image-studio-field { margin-bottom: 8px; }
body.mobile-ui #imageStudioModal .image-studio-aipanel .image-studio-ai-title { margin-bottom: 8px; }
body.mobile-ui #imageStudioModal .image-studio-aipanel textarea { min-height: 54px !important; }

body.mobile-ui #imageStudioModal .image-studio-3d {
top: 54px; bottom: calc(var(--studio-ai-drawer-h) + 132px);
}


body.mobile-ui #imageStudioModal .image-studio-tool {
min-height: 44px !important; height: auto !important; padding: 6px 8px !important;
}
body.mobile-ui #imageStudioModal .image-studio-iconbtn {
width: 34px !important; height: 34px !important; min-height: 34px !important;
}
body.mobile-ui #imageStudioModal .image-studio-zoom-btn {
min-height: 34px !important; height: 34px !important;
}
body.mobile-ui #imageStudioModal .image-studio-save {
min-height: 44px !important; height: 44px !important;
}

body.mobile-ui #imageStudioModal :is(.image-studio-opt-btn, .image-studio-chip, .image-studio-ai-run) {
min-height: 38px !important; height: auto !important;
}
body.mobile-ui #imageStudioModal .image-studio-aipanel select {
min-height: 40px !important; height: 40px !important;
}

body.mobile-ui #imageStudioModal .image-studio-options :is(.image-studio-field-inline input[type="number"], .image-studio-field-inline input[type="text"], .image-studio-ratio-input) {
min-width: 52px !important; min-height: 34px !important; height: 34px !important;
}

body.mobile-ui #imageStudioModal .image-studio-options .image-studio-field-inline input[type="range"] {
min-width: 96px !important; height: 34px !important;
}


body.ui-modal-open #globalGenFab,
body.mobile-ui.mobile-text-entry-active #globalGenFab {
display: none !important;
}


body.mobile-ui .poser-studio-main { display: flex; flex-direction: column; position: relative; overflow: hidden; min-height: 0; }
body.mobile-ui .poser-studio-stage { order: -1; flex: 1 1 auto; min-height: 30dvh; }
body.mobile-ui .poser-studio-left,
body.mobile-ui .poser-studio-right {
display: none;
order: 1;               
position: relative;     
flex: 0 1 auto;
max-height: 50dvh;      
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
border: 0;
border-top: 1px solid var(--border);
border-radius: 18px 18px 0 0;
background: var(--surface, #fff);
box-shadow: 0 -12px 28px rgba(15, 23, 42, 0.16);
padding: 2px 14px calc(14px + env(safe-area-inset-bottom, 0px));
transition: transform 0.2s ease;  
}
body.mobile-ui .poser-studio[data-mobile-tab="cast"] .poser-studio-left { display: flex; }
body.mobile-ui .poser-studio[data-mobile-tab="scene"] .poser-studio-right { display: flex; }

.poser-drawer-handle { display: none; }
body.mobile-ui .poser-drawer-handle {
display: block;
position: sticky;
top: 0;
flex: 0 0 auto;
align-self: center;
width: 46px;
height: 5px;
margin: 8px auto;
border-radius: 999px;
background: var(--border, #d7dde6);
touch-action: none;   
cursor: grab;
}
body.mobile-ui .poser-stage-hint { display: none; } 

body.mobile-ui .poser-studio-bar-right {
flex: 1 1 auto;
min-width: 0;
max-width: 100%;
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
justify-content: flex-end;
}
body.mobile-ui .poser-studio-bar-right::-webkit-scrollbar { display: none; }
body.mobile-ui .poser-studio-bar-right > * { flex: 0 0 auto; }

body.mobile-ui .poser-studio-tabs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 8px 10px;
border-top: 1px solid var(--border);
background: var(--surface, #fff);
}
body.mobile-ui .poser-studio-tab {
min-height: 36px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface-2, #f8fafc);
color: var(--text, #334155);
font-size: 13px;
font-weight: 750;
cursor: pointer;
}
body.mobile-ui .poser-studio-tab.active {
background: var(--poser-accent, #7c3aed);
border-color: var(--poser-accent, #7c3aed);
color: #fff;
box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

body.mobile-ui .poser-studio-bar { flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
body.mobile-ui .poser-studio-brandtext span { display: none; }
body.mobile-ui .poser-studio-modes { order: 3; width: 100%; justify-content: space-between; }
body.mobile-ui .poser-studio-modes .poser-mode { flex: 1 1 auto; justify-content: center; padding: 8px 6px; font-size: 12px; }
body.mobile-ui .poser-studio-modes .poser-mode-key { display: none; }

body.mobile-ui .poser-studio-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
body.mobile-ui .poser-studio-foot-hint { display: none; }
body.mobile-ui .poser-studio-foot-left:empty { display: none; }
body.mobile-ui .poser-frame { max-width: 100%; min-width: 0; }
body.mobile-ui .poser-frame-btns { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-wrap: nowrap; }
body.mobile-ui .poser-frame-btns::-webkit-scrollbar { display: none; }
body.mobile-ui .poser-frame-btn { flex: 0 0 auto; }
body.mobile-ui .poser-studio-foot-actions { width: 100%; }
body.mobile-ui .poser-studio-foot-actions .primary,
body.mobile-ui .poser-studio-foot-actions .secondary { flex: 1 1 auto; }

body.mobile-ui .poser-field-2 { grid-template-columns: 1fr; }



body.mobile-ui #panoramaPreviewModal.modal-mask { padding: 0 !important; align-items: stretch !important; justify-content: stretch !important; }
body.mobile-ui #panoramaPreviewModal .panorama-preview-panel {
width: 100% !important; max-width: none !important;
height: 100% !important; max-height: none !important; min-height: 0 !important;
margin: 0 !important; border-radius: 0 !important; padding: 10px !important; gap: 8px !important;
}
body.mobile-ui #panoramaPreviewModal .modal-head { gap: 8px; }
body.mobile-ui #panoramaPreviewModal .modal-head > div > p { display: none; }  
body.mobile-ui #panoramaPreviewModal .modal-head h2 { font-size: 15px; }
body.mobile-ui #panoramaPreviewModal .modal-head-actions { gap: 6px; flex-wrap: wrap; }
body.mobile-ui #panoramaPreviewModal .modal-head-actions .secondary { padding: 6px 12px; font-size: 13px; }

body.mobile-ui #panoramaPreviewModal .panorama-preview-stage { min-height: 0 !important; max-height: none !important; border-radius: 12px; }

body.mobile-ui #panoramaPreviewModal .panorama-preview-tools { flex-wrap: wrap; gap: 8px; }
body.mobile-ui #panoramaPreviewModal .panorama-ratio-bar { width: 100%; order: 3; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
body.mobile-ui #panoramaPreviewModal .panorama-ratio-bar::-webkit-scrollbar { display: none; }
body.mobile-ui #panoramaPreviewModal #resetPanoramaPreviewBtn,
body.mobile-ui #panoramaPreviewModal #capturePanoramaToCanvasBtn { flex: 1 1 auto; }

body.mobile-ui #panoramaPreviewModal .panorama-preview-hint { display: none; }
body.mobile-ui #panoramaPreviewModal .panorama-zoom-ctrl { right: 10px; bottom: 10px; }
body.mobile-ui #panoramaPreviewModal .panorama-zoom-ctrl button { width: 36px; height: 36px; font-size: 20px; }



body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run):has([data-canvas-config-key="panoType"]) .infinite-card-field {
width: 72px !important;
}

body.mobile-ui:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel[data-canvas-inline-mode="world"]:has(.infinite-card-run):has([data-canvas-config-key="panoType"]) .infinite-card-field {
width: var(--canvas-inline-field-count-w, 80px) !important;
}


#audioToolTab > .tool-mode-tabs[hidden] { display: none !important; }


body.mobile-ui #audioToolTab .music-instrumental-row {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
text-align: left;
margin: 2px 0;
}
body.mobile-ui #audioToolTab .music-instrumental-row input[type="checkbox"] {
margin: 0;
flex: none;
}
body.mobile-ui #audioToolTab label {
gap: 6px;
}


body.mobile-ui #infiniteCanvasPromptEditorModal.infinite-canvas-prompt-editor-mask {
align-items: stretch !important;
justify-content: stretch !important;
padding: 0 !important;
}

body.mobile-ui #infiniteCanvasPromptEditorModal .infinite-canvas-prompt-editor-panel {
width: 100% !important;
max-width: none !important;
height: 100dvh !important;
max-height: none !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
}

body.mobile-ui #infiniteCanvasPromptEditorModal .infinite-canvas-prompt-editor-head {
padding: max(12px, env(safe-area-inset-top)) 14px 12px !important;
}

body.mobile-ui #infiniteCanvasPromptEditorModal .infinite-canvas-prompt-editor-head h2 {
font-size: 17px;
}

body.mobile-ui #infiniteCanvasPromptEditorModal .infinite-canvas-prompt-editor-head p {
display: none;
}

body.mobile-ui #infiniteCanvasPromptEditorModal .infinite-canvas-prompt-editor-close {
width: 44px !important;
height: 44px !important;
min-height: 44px !important;
}

body.mobile-ui #infiniteCanvasPromptEditorModal .infinite-canvas-prompt-editor-stage {
padding: 10px;
}

body.mobile-ui #infiniteCanvasPromptEditorModal .infinite-canvas-prompt-editor-stage textarea {
padding: 15px !important;
font-size: 16px !important;
line-height: 1.6 !important;
}

body.mobile-ui #infiniteCanvasPromptEditorModal .infinite-canvas-prompt-editor-foot {
min-height: calc(68px + env(safe-area-inset-bottom));
padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
}

body.mobile-ui #infiniteCanvasPromptEditorModal .infinite-canvas-prompt-editor-foot button {
flex: 1 1 0;
min-height: 44px !important;
height: 44px !important;
}
body:not(.auth-required) .layout.canvas-layout .infinite-inline-panel-body > .canvas-prompt-rich-shell {
position: relative;
box-sizing: border-box;
width: 100%;
min-width: 0;
min-height: 120px;
overflow-y: auto;
resize: none;
border: 1px solid rgba(188, 204, 221, 0.95);
border-radius: var(--canvas-inline-unified-radius, 14px);
background: #fff;
color: #172435;
box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.02);
}
body:not(.auth-required) .layout.canvas-layout .infinite-inline-panel-body > .canvas-prompt-rich-shell:focus-within {
border-color: rgba(47, 109, 183, 0.62);
box-shadow: 0 0 0 3px rgba(47, 109, 183, 0.11), inset 0 1px 0 rgba(15, 23, 42, 0.02);
}
body:not(.auth-required) .layout.canvas-layout .infinite-inline-panel-body > .canvas-prompt-rich-shell > .canvas-prompt-rich-editor {
box-sizing: border-box;
width: 100%;
height: 100%;
min-height: 0;
padding: 13px 14px;
color: inherit;
font: inherit;
font-size: 14px;
line-height: 1.55;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .canvas-prompt-rich-shell {
grid-area: prompt;
z-index: 1;
height: var(--canvas-inline-text-min-h, 104px);
min-height: var(--canvas-inline-text-min-h, 104px);
max-height: var(--canvas-inline-text-max-h, 320px);
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:has(.infinite-card-run) .infinite-inline-panel-body > .canvas-prompt-rich-shell > .canvas-prompt-rich-editor {
padding:
var(--canvas-inline-text-pad-y, 10px)
var(--canvas-inline-text-pad-x, 11px)
calc(var(--canvas-inline-text-pad-bottom, 12px) + var(--canvas-inline-field-h, 32px))
var(--canvas-inline-text-pad-x, 11px);
font-size: var(--canvas-inline-text-font, 14px);
line-height: 1.35;
}
body:not(.auth-required) .layout.canvas-layout .infinite-card-inline-panel:not(:has(.infinite-card-run)) .infinite-inline-panel-body > .canvas-prompt-rich-shell {
width: 100%;
min-width: 420px;
height: 176px;
min-height: 176px;
}
#infiniteCanvasPromptEditorModal .infinite-canvas-prompt-editor-stage > .canvas-prompt-rich-shell {
box-sizing: border-box;
width: 100%;
min-width: 0;
height: 100%;
min-height: 0;
max-height: none;
overflow-y: auto;
resize: none;
border: 1px solid #cfdae6;
border-radius: 14px;
background: #fff;
color: #172435;
box-shadow: 0 8px 26px rgba(15, 23, 42, 0.06);
}
#infiniteCanvasPromptEditorModal .infinite-canvas-prompt-editor-stage > .canvas-prompt-rich-shell:focus-within {
border-color: rgba(47, 109, 183, 0.62);
box-shadow: 0 0 0 3px rgba(47, 109, 183, 0.11), 0 12px 30px rgba(15, 23, 42, 0.08);
}
#infiniteCanvasPromptEditorModal .canvas-prompt-rich-editor {
box-sizing: border-box;
width: 100%;
height: 100%;
min-height: 0;
padding: 18px 20px;
color: inherit;
font: inherit;
font-size: 16px;
line-height: 1.7;
}
body.mobile-ui #infiniteCanvasPromptEditorModal .canvas-prompt-rich-editor {
padding: 15px;
font-size: 16px;
line-height: 1.6;
}
body.theme-dark:not(.auth-required) #appLayout.layout.canvas-layout .canvas-prompt-rich-shell,
body.theme-dark #infiniteCanvasPromptEditorModal .canvas-prompt-rich-shell {
border-color: rgba(99, 156, 222, 0.34);
background: rgba(8, 13, 23, 0.94);
color: #e7eef9;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
body:not(.auth-required) .layout.canvas-layout .infinite-inline-panel-body > textarea.prompt-rich-source[data-prompt-mention-context="canvas"],
#infiniteCanvasPromptEditorModal .infinite-canvas-prompt-editor-stage > textarea.prompt-rich-source[data-prompt-mention-context="canvas"] {
position: absolute !important;
width: 1px !important;
height: 1px !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: 1px !important;
max-height: 1px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
opacity: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
resize: none !important;
}