:root { --vd-canvas: #f6f7f9; --vd-surface: #ffffff; --vd-surface-raised: #ffffff; --vd-surface-muted: #f2f4f7; --vd-surface-quiet: #eceff3; --vd-line: #dfe3e8; --vd-line-strong: #c8ced6; --vd-ink: #181a1d; --vd-ink-secondary: #565c65; --vd-ink-muted: #808894; --vd-brand: #d94b2b; --vd-brand-strong: #bd3d22; --vd-brand-soft: rgba(217, 75, 43, 0.08); --vd-success: #2f7d50; --vd-success-soft: #e7f2ea; --vd-warning: #b96a23; --vd-warning-soft: #fbefe3; --vd-danger: #c44234; --vd-danger-soft: #f9e8e5; --vd-info: #3975ba; --vd-info-soft: #e8f0f9; --vd-focus: rgba(217, 75, 43, 0.18); --vd-shadow-none: none; --vd-shadow-float: 0 18px 42px rgba(18, 24, 32, 0.12); --vd-shadow-soft: 0 4px 14px rgba(18, 24, 32, 0.06); --vd-radius-xs: 4px; --vd-radius-sm: 6px; --vd-radius-md: 8px; --vd-sidebar-width: 208px; --vd-topbar-height: 64px; --vd-control-height: 40px; --vd-content-gap: 18px; --vd-motion-fast: 120ms; --vd-motion-normal: 180ms; --vd-component-button-height: 40px; --vd-component-button-radius: 6px; --vd-component-input-height: 42px; --vd-component-input-radius: 6px; --vd-component-card-radius: 8px; --vd-component-card-padding: 16px; --vd-component-dialog-radius: 10px; --vd-component-focus-width: 3px; --vd-component-touch-target: 44px; --vd-accent: var(--vd-brand); --vd-accent-strong: var(--vd-brand-strong); --vd-accent-soft: var(--vd-brand-soft); --vd-primary: var(--vd-brand); --vd-text: var(--vd-ink); --vd-text-muted: var(--vd-ink-muted); --vd-on-accent: #ffffff; --vd-border: var(--vd-line); --vd-border-strong: var(--vd-line-strong); --vd-border-subtle: color-mix(in srgb, var(--vd-line) 72%, transparent); --vd-surface-hover: var(--vd-surface-muted); --vd-surface-subtle: var(--vd-surface-muted); --vd-surface-strong: var(--vd-surface-quiet); --vd-input-bg: var(--vd-surface-raised); --vd-code-bg: #171714; --vd-success-strong: color-mix(in srgb, var(--vd-success) 82%, #000000); --vd-warning-strong: color-mix(in srgb, var(--vd-warning) 82%, #000000); --vd-color-accent: var(--vd-brand); --vd-color-brand: var(--vd-brand); --vd-color-primary: var(--vd-brand); --vd-color-danger: var(--vd-danger); --vd-color-success: var(--vd-success); --vd-color-warning: var(--vd-warning); --vd-color-focus: var(--vd-brand); --vd-color-border: var(--vd-line); --vd-color-border-strong: var(--vd-line-strong); --vd-color-surface: var(--vd-surface); --vd-color-surface-raised: var(--vd-surface-raised); --vd-color-surface-muted: var(--vd-surface-muted); --vd-color-surface-hover: var(--vd-surface-muted); --vd-color-text: var(--vd-ink); --vd-color-text-secondary: var(--vd-ink-secondary); --vd-color-text-muted: var(--vd-ink-muted); --vd-radius-lg: 10px; --vd-radius-xl: 12px; --vd-shadow-xs: 0 1px 3px rgba(18, 24, 32, 0.05); --vd-shadow-sm: var(--vd-shadow-soft); --vd-shadow-md: 0 10px 28px rgba(18, 24, 32, 0.10); --vd-shadow-lg: var(--vd-shadow-float); --vd-shadow-card: 0 2px 8px rgba(18, 24, 32, 0.05); --vd-focus-ring: var(--vd-brand); --vd-motion-menu: 140ms; --vd-layer-base: 0; --vd-layer-content: 10; --vd-layer-sticky: 100; --vd-layer-dropdown: 900; --vd-layer-popover: 1100; --vd-layer-modal: 6000; --vd-layer-toast: 7000; --vd-anchor-offset: calc(var(--vd-topbar-height) + 52px); --vd-popover-min-width: 188px; --vd-popover-max-width: 420px; --vd-space-1: 4px; --vd-space-2: 8px; --vd-space-3: 12px; --vd-space-4: 16px; --vd-space-5: 20px; --vd-space-6: 24px; --vd-space-8: 32px; --vd-space-10: 40px; --vd-space-12: 48px; --vd-border-default: var(--vd-line); --vd-card-radius: var(--vd-radius-lg); --vd-card-shadow: var(--vd-shadow-card); --vd-status-danger: var(--vd-danger); --vd-status-success: var(--vd-success); --vd-status-warning: var(--vd-warning); --vd-surface-card: var(--vd-surface-raised); --vd-text-primary: var(--vd-ink); --vd-article-content-max: 1480px; --vd-article-command-height: 68px; --vd-article-summary-min-height: 190px; --vd-article-inspector-width: 320px; --vd-article-section-gap: 20px; --vd-article-field-gap: 16px; --vd-article-media-aspect: 4 / 3; --vd-article-anchor-offset: calc(var(--vd-anchor-offset) + var(--vd-article-command-height) + 56px); --vd-article-sticky-top: var(--vd-anchor-offset); --vd-article-copy-size: 14px; --vd-article-support-size: 13px; --vd-article-meta-size: 12px; --vd-paper: #ffffff; --vd-code-ink: #f3f0e7; --vd-scrim: rgba(15, 15, 13, 0.72); --vd-scrim-strong: rgba(9, 9, 8, 0.78); --vd-overlay-control: rgba(20, 20, 18, 0.70); --vd-overlay-control-strong: rgba(20, 20, 18, 0.86); --vd-on-accent-border: rgba(255, 255, 255, 0.58); --vd-on-accent-border-strong: rgba(255, 255, 255, 0.95); --vd-on-accent-surface: rgba(255, 255, 255, 0.08); --vd-media-favorite: #ffd15c; --vd-data-purple: #8054b3; --vd-print-ink: #1f1f1c; --vd-print-ink-secondary: #5f5b54; --vd-print-ink-muted: #77726a; --vd-print-line: #dfdcd5; --vd-print-surface: #f5f3ee; --vd-print-body: #45423d; --vd-print-brand: #e33a16; --vd-marketplace-black: #171717; --vd-marketplace-white: #ffffff; --vd-marketplace-gray: #8a8a8a; --vd-marketplace-silver-light: #f4f4f4; --vd-marketplace-silver-dark: #9a9a9a; --vd-marketplace-beige: #d9c7a6; --vd-marketplace-brown: #74452e; --vd-marketplace-gold: #d6a932; --vd-marketplace-yellow: #f0d838; --vd-marketplace-orange: #df7c2c; --vd-marketplace-red: #c53934; --vd-marketplace-bordeaux: #6e1f32; --vd-marketplace-pink: #e7a5bd; --vd-marketplace-purple: #7c55a3; --vd-marketplace-blue: #326ca8; --vd-marketplace-turquoise: #2eaaa5; --vd-marketplace-green: #4f874b; --vd-marketplace-khaki: #7b7950; --vd-marketplace-neutral: #d8d2ca; --vd-marketplace-checker-a: #dddddd; --vd-marketplace-checker-b: #ffffff; --vd-data-recommendation: #5181ba; --vd-role-manager: #6d28d9; --vd-role-publisher: #0369a1; --vd-role-viewer: #475569; } [data-theme="dark"] { --vd-canvas: #171714; --vd-surface: #1d1d19; --vd-surface-raised: #22221e; --vd-surface-muted: #292923; --vd-surface-quiet: #303029; --vd-line: #37372f; --vd-line-strong: #4a4940; --vd-ink: #f2efe8; --vd-ink-secondary: #c3beb4; --vd-ink-muted: #8f8a80; --vd-brand: #ff5a32; --vd-brand-strong: #ff744f; --vd-brand-soft: rgba(255, 90, 50, 0.12); --vd-success: #75bd8c; --vd-success-soft: #203629; --vd-warning: #e2a35f; --vd-warning-soft: #3b2e20; --vd-danger: #ed7568; --vd-danger-soft: #3b2523; --vd-info: #78a9df; --vd-info-soft: #202f40; --vd-focus: rgba(255, 90, 50, 0.26); --vd-shadow-none: none; --vd-shadow-float: 0 20px 56px rgba(0, 0, 0, 0.38); --vd-shadow-soft: 0 8px 26px rgba(0, 0, 0, 0.20); --vd-radius-xs: 5px; --vd-radius-sm: 8px; --vd-radius-md: 12px; --vd-sidebar-width: 148px; --vd-topbar-height: 60px; --vd-control-height: 40px; --vd-content-gap: 16px; --vd-motion-fast: 120ms; --vd-motion-normal: 180ms; --vd-component-button-height: 40px; --vd-component-button-radius: 8px; --vd-component-input-height: 42px; --vd-component-input-radius: 8px; --vd-component-card-radius: 12px; --vd-component-card-padding: 16px; --vd-component-dialog-radius: 16px; --vd-component-focus-width: 3px; --vd-component-touch-target: 44px; --vd-accent: var(--vd-brand); --vd-accent-strong: var(--vd-brand-strong); --vd-accent-soft: var(--vd-brand-soft); --vd-primary: var(--vd-brand); --vd-text: var(--vd-ink); --vd-text-muted: var(--vd-ink-muted); --vd-on-accent: #ffffff; --vd-border: var(--vd-line); --vd-border-strong: var(--vd-line-strong); --vd-border-subtle: color-mix(in srgb, var(--vd-line) 72%, transparent); --vd-surface-hover: var(--vd-surface-muted); --vd-surface-subtle: var(--vd-surface-muted); --vd-surface-strong: var(--vd-surface-quiet); --vd-input-bg: var(--vd-surface-raised); --vd-code-bg: #171714; --vd-success-strong: color-mix(in srgb, var(--vd-success) 82%, #000000); --vd-warning-strong: color-mix(in srgb, var(--vd-warning) 82%, #000000); --vd-color-accent: var(--vd-brand); --vd-color-brand: var(--vd-brand); --vd-color-primary: var(--vd-brand); --vd-color-danger: var(--vd-danger); --vd-color-success: var(--vd-success); --vd-color-warning: var(--vd-warning); --vd-color-focus: var(--vd-brand); --vd-color-border: var(--vd-line); --vd-color-border-strong: var(--vd-line-strong); --vd-color-surface: var(--vd-surface); --vd-color-surface-raised: var(--vd-surface-raised); --vd-color-surface-muted: var(--vd-surface-muted); --vd-color-surface-hover: var(--vd-surface-muted); --vd-color-text: var(--vd-ink); --vd-color-text-secondary: var(--vd-ink-secondary); --vd-color-text-muted: var(--vd-ink-muted); --vd-radius-lg: 16px; --vd-radius-xl: 20px; --vd-shadow-xs: 0 3px 12px rgba(35, 30, 24, 0.05); --vd-shadow-sm: var(--vd-shadow-soft); --vd-shadow-md: 0 16px 38px rgba(35, 30, 24, 0.14); --vd-shadow-lg: var(--vd-shadow-float); --vd-shadow-card: var(--vd-shadow-soft); --vd-focus-ring: var(--vd-brand); --vd-motion-menu: 140ms; --vd-layer-base: 0; --vd-layer-content: 10; --vd-layer-sticky: 100; --vd-layer-dropdown: 900; --vd-layer-popover: 1100; --vd-layer-modal: 6000; --vd-layer-toast: 7000; --vd-anchor-offset: calc(var(--vd-topbar-height) + 52px); --vd-popover-min-width: 188px; --vd-popover-max-width: 420px; --vd-space-1: 4px; --vd-space-2: 8px; --vd-space-3: 12px; --vd-space-4: 16px; --vd-space-5: 20px; --vd-space-6: 24px; --vd-space-8: 32px; --vd-space-10: 40px; --vd-space-12: 48px; --vd-border-default: var(--vd-line); --vd-card-radius: var(--vd-radius-lg); --vd-card-shadow: var(--vd-shadow-card); --vd-status-danger: var(--vd-danger); --vd-status-success: var(--vd-success); --vd-status-warning: var(--vd-warning); --vd-surface-card: var(--vd-surface-raised); --vd-text-primary: var(--vd-ink); --vd-article-content-max: 1480px; --vd-article-command-height: 68px; --vd-article-summary-min-height: 190px; --vd-article-inspector-width: 320px; --vd-article-section-gap: 20px; --vd-article-field-gap: 16px; --vd-article-media-aspect: 4 / 3; --vd-article-anchor-offset: calc(var(--vd-anchor-offset) + var(--vd-article-command-height) + 56px); --vd-article-sticky-top: var(--vd-anchor-offset); --vd-article-copy-size: 14px; --vd-article-support-size: 13px; --vd-article-meta-size: 12px; --vd-paper: #ffffff; --vd-code-ink: #f3f0e7; --vd-scrim: rgba(0, 0, 0, 0.78); --vd-scrim-strong: rgba(0, 0, 0, 0.88); --vd-overlay-control: rgba(0, 0, 0, 0.76); --vd-overlay-control-strong: rgba(0, 0, 0, 0.90); --vd-on-accent-border: rgba(255, 255, 255, 0.64); --vd-on-accent-border-strong: rgba(255, 255, 255, 0.98); --vd-on-accent-surface: rgba(255, 255, 255, 0.12); --vd-media-favorite: #ffd15c; --vd-data-purple: #a78bda; --vd-print-ink: #1f1f1c; --vd-print-ink-secondary: #5f5b54; --vd-print-ink-muted: #77726a; --vd-print-line: #dfdcd5; --vd-print-surface: #f5f3ee; --vd-print-body: #45423d; --vd-print-brand: #e33a16; --vd-marketplace-black: #171717; --vd-marketplace-white: #ffffff; --vd-marketplace-gray: #8a8a8a; --vd-marketplace-silver-light: #f4f4f4; --vd-marketplace-silver-dark: #9a9a9a; --vd-marketplace-beige: #d9c7a6; --vd-marketplace-brown: #74452e; --vd-marketplace-gold: #d6a932; --vd-marketplace-yellow: #f0d838; --vd-marketplace-orange: #df7c2c; --vd-marketplace-red: #c53934; --vd-marketplace-bordeaux: #6e1f32; --vd-marketplace-pink: #e7a5bd; --vd-marketplace-purple: #7c55a3; --vd-marketplace-blue: #326ca8; --vd-marketplace-turquoise: #2eaaa5; --vd-marketplace-green: #4f874b; --vd-marketplace-khaki: #7b7950; --vd-marketplace-neutral: #d8d2ca; --vd-marketplace-checker-a: #dddddd; --vd-marketplace-checker-b: #ffffff; --vd-data-recommendation: #5181ba; --vd-role-manager: #6d28d9; --vd-role-publisher: #0369a1; --vd-role-viewer: #475569; } [data-theme="contrast"] { --vd-canvas: #000000; --vd-surface: #090909; --vd-surface-raised: #111111; --vd-surface-muted: #1b1b1b; --vd-surface-quiet: #242424; --vd-line: #ffffff; --vd-line-strong: #ffffff; --vd-ink: #ffffff; --vd-ink-secondary: #ffffff; --vd-ink-muted: #f2f2f2; --vd-brand: #ffe600; --vd-brand-strong: #ffffff; --vd-brand-soft: rgba(255, 230, 0, 0.20); --vd-success: #66ff99; --vd-success-soft: #002d12; --vd-warning: #ffd000; --vd-warning-soft: #332a00; --vd-danger: #ff6b6b; --vd-danger-soft: #3a0000; --vd-info: #72c7ff; --vd-info-soft: #00253d; --vd-focus: rgba(255, 230, 0, 0.55); --vd-shadow-none: none; --vd-shadow-float: 0 0 0 2px #ffffff; --vd-shadow-soft: 0 0 0 1px #ffffff; --vd-radius-xs: 0px; --vd-radius-sm: 2px; --vd-radius-md: 4px; --vd-sidebar-width: 168px; --vd-topbar-height: 64px; --vd-control-height: 44px; --vd-content-gap: 18px; --vd-motion-fast: 0ms; --vd-motion-normal: 0ms; --vd-component-button-height: 46px; --vd-component-button-radius: 2px; --vd-component-input-height: 48px; --vd-component-input-radius: 2px; --vd-component-card-radius: 4px; --vd-component-card-padding: 18px; --vd-component-dialog-radius: 4px; --vd-component-focus-width: 4px; --vd-component-touch-target: 48px; --vd-accent: var(--vd-brand); --vd-accent-strong: var(--vd-brand-strong); --vd-accent-soft: var(--vd-brand-soft); --vd-primary: var(--vd-brand); --vd-text: var(--vd-ink); --vd-text-muted: var(--vd-ink-muted); --vd-on-accent: #000000; --vd-border: var(--vd-line); --vd-border-strong: var(--vd-line-strong); --vd-border-subtle: color-mix(in srgb, var(--vd-line) 72%, transparent); --vd-surface-hover: var(--vd-surface-muted); --vd-surface-subtle: var(--vd-surface-muted); --vd-surface-strong: var(--vd-surface-quiet); --vd-input-bg: var(--vd-surface-raised); --vd-code-bg: #171714; --vd-success-strong: color-mix(in srgb, var(--vd-success) 82%, #000000); --vd-warning-strong: color-mix(in srgb, var(--vd-warning) 82%, #000000); --vd-color-accent: var(--vd-brand); --vd-color-brand: var(--vd-brand); --vd-color-primary: var(--vd-brand); --vd-color-danger: var(--vd-danger); --vd-color-success: var(--vd-success); --vd-color-warning: var(--vd-warning); --vd-color-focus: var(--vd-brand); --vd-color-border: var(--vd-line); --vd-color-border-strong: var(--vd-line-strong); --vd-color-surface: var(--vd-surface); --vd-color-surface-raised: var(--vd-surface-raised); --vd-color-surface-muted: var(--vd-surface-muted); --vd-color-surface-hover: var(--vd-surface-muted); --vd-color-text: var(--vd-ink); --vd-color-text-secondary: var(--vd-ink-secondary); --vd-color-text-muted: var(--vd-ink-muted); --vd-radius-lg: 16px; --vd-radius-xl: 20px; --vd-shadow-xs: 0 3px 12px rgba(35, 30, 24, 0.05); --vd-shadow-sm: var(--vd-shadow-soft); --vd-shadow-md: 0 16px 38px rgba(35, 30, 24, 0.14); --vd-shadow-lg: var(--vd-shadow-float); --vd-shadow-card: var(--vd-shadow-soft); --vd-focus-ring: var(--vd-brand); --vd-motion-menu: 140ms; --vd-layer-base: 0; --vd-layer-content: 10; --vd-layer-sticky: 100; --vd-layer-dropdown: 900; --vd-layer-popover: 1100; --vd-layer-modal: 6000; --vd-layer-toast: 7000; --vd-anchor-offset: calc(var(--vd-topbar-height) + 52px); --vd-popover-min-width: 188px; --vd-popover-max-width: 420px; --vd-space-1: 4px; --vd-space-2: 8px; --vd-space-3: 12px; --vd-space-4: 16px; --vd-space-5: 20px; --vd-space-6: 24px; --vd-space-8: 32px; --vd-space-10: 40px; --vd-space-12: 48px; --vd-border-default: var(--vd-line); --vd-card-radius: var(--vd-radius-lg); --vd-card-shadow: var(--vd-shadow-card); --vd-status-danger: var(--vd-danger); --vd-status-success: var(--vd-success); --vd-status-warning: var(--vd-warning); --vd-surface-card: var(--vd-surface-raised); --vd-text-primary: var(--vd-ink); --vd-article-content-max: 1480px; --vd-article-command-height: 72px; --vd-article-summary-min-height: 196px; --vd-article-inspector-width: 340px; --vd-article-section-gap: 24px; --vd-article-field-gap: 18px; --vd-article-media-aspect: 4 / 3; --vd-article-anchor-offset: calc(var(--vd-anchor-offset) + var(--vd-article-command-height) + 60px); --vd-article-sticky-top: var(--vd-anchor-offset); --vd-article-copy-size: 15px; --vd-article-support-size: 14px; --vd-article-meta-size: 13px; --vd-paper: #ffffff; --vd-code-ink: #ffffff; --vd-scrim: rgba(0, 0, 0, 0.94); --vd-scrim-strong: rgba(0, 0, 0, 0.98); --vd-overlay-control: rgba(0, 0, 0, 0.94); --vd-overlay-control-strong: rgba(0, 0, 0, 1); --vd-on-accent-border: #ffffff; --vd-on-accent-border-strong: #ffffff; --vd-on-accent-surface: rgba(255, 255, 255, 0.20); --vd-media-favorite: #ffd15c; --vd-data-purple: #d8b4fe; --vd-print-ink: #1f1f1c; --vd-print-ink-secondary: #5f5b54; --vd-print-ink-muted: #77726a; --vd-print-line: #dfdcd5; --vd-print-surface: #f5f3ee; --vd-print-body: #45423d; --vd-print-brand: #e33a16; --vd-marketplace-black: #171717; --vd-marketplace-white: #ffffff; --vd-marketplace-gray: #8a8a8a; --vd-marketplace-silver-light: #f4f4f4; --vd-marketplace-silver-dark: #9a9a9a; --vd-marketplace-beige: #d9c7a6; --vd-marketplace-brown: #74452e; --vd-marketplace-gold: #d6a932; --vd-marketplace-yellow: #f0d838; --vd-marketplace-orange: #df7c2c; --vd-marketplace-red: #c53934; --vd-marketplace-bordeaux: #6e1f32; --vd-marketplace-pink: #e7a5bd; --vd-marketplace-purple: #7c55a3; --vd-marketplace-blue: #326ca8; --vd-marketplace-turquoise: #2eaaa5; --vd-marketplace-green: #4f874b; --vd-marketplace-khaki: #7b7950; --vd-marketplace-neutral: #d8d2ca; --vd-marketplace-checker-a: #dddddd; --vd-marketplace-checker-b: #ffffff; --vd-data-recommendation: #5181ba; --vd-role-manager: #6d28d9; --vd-role-publisher: #0369a1; --vd-role-viewer: #475569; } @media (prefers-reduced-motion: reduce) { :root { --vd-motion-fast: 0ms; --vd-motion-normal: 0ms; } } @layer vendoo.tokens, vendoo.foundation, vendoo.layout, vendoo.components, vendoo.pages, vendoo.interactions, vendoo.utilities, vendoo.legacy, vendoo.overrides; @layer vendoo.layout { [data-vd-view][data-vd-layout] { min-width: 0; } [data-vd-slot] { min-width: 0; } } @layer vendoo.interactions { [data-vd-action] > [data-vd-icon-id] { flex: 0 0 auto; } } @layer vendoo.components, vendoo.interactions, vendoo.overrides; @layer vendoo.components { .dashboard-operations { container-type:inline-size; container-name:dashboard-operations; display:grid; gap:var(--vd-content-gap); margin-bottom:var(--vd-content-gap); } .dashboard-operations-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:var(--vd-content-gap); } .dashboard-operations-heading h3 { margin:2px 0 4px; font-size:clamp(18px,2vw,28px); letter-spacing:-.025em; } .dashboard-operations-heading p:last-child { color:var(--vd-ink-muted); max-width:720px; } .dashboard-operations-state { flex:0 0 auto; padding:6px 9px; border:1px solid var(--vd-line); border-radius:var(--vd-radius-xl); background:var(--vd-surface-raised); color:var(--vd-ink-muted); font-size:10px; } .dashboard-operations-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(320px,.85fr); gap:12px; align-items:start; } .dashboard-operations-stack { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .dashboard-operations-card { min-width:0; border:1px solid var(--vd-line); border-radius:var(--vd-component-card-radius); background:var(--vd-surface-raised); box-shadow:var(--vd-shadow-card); overflow:hidden; } .dashboard-operations-card>header { min-height:50px; padding:11px 13px; display:flex; justify-content:space-between; align-items:center; gap:10px; border-bottom:1px solid var(--vd-line); } .dashboard-operations-card>header>div { min-width:0; display:grid; gap:2px; } .dashboard-operations-card>header span { color:var(--vd-ink); font-size:11px; font-weight:760; } .dashboard-operations-card>header strong { color:var(--vd-ink-muted); font-size:9px; font-weight:560; } .dashboard-recent-articles { display:grid; } .dashboard-recent-item { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; min-height:76px; border-bottom:1px solid var(--vd-line); } .dashboard-recent-item:last-child { border-bottom:0; } .dashboard-recent-main { min-width:0; display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:11px; align-items:center; padding:10px 8px 10px 12px; border:0; background:transparent; color:var(--vd-ink); text-align:left; cursor:pointer; } .dashboard-recent-main:hover { background:var(--vd-surface-muted); } .dashboard-recent-media,.dashboard-recent-media img { width:52px; height:52px; border-radius:var(--vd-radius-xs); object-fit:contain; background:var(--vd-surface-muted); } .dashboard-recent-media { display:grid; place-items:center; overflow:hidden; border:1px solid var(--vd-line); color:var(--vd-ink-muted); } .dashboard-recent-copy { min-width:0; display:grid; gap:3px; } .dashboard-recent-copy strong,.dashboard-recent-copy small,.dashboard-recent-copy em { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .dashboard-recent-copy strong { font-size:11px; } .dashboard-recent-copy small { color:var(--vd-ink-secondary); font-size:9px; } .dashboard-recent-copy em { color:var(--vd-ink-muted); font-size:8px; font-style:normal; } .dashboard-operation-status { min-height:22px; padding:3px 7px; border-radius:var(--vd-radius-xl); background:var(--vd-surface-muted); color:var(--vd-ink-secondary); font-size:8px; font-weight:750; white-space:nowrap; } .dashboard-operation-status.tone-published { background:var(--vd-success-soft); color:var(--vd-success); } .dashboard-operation-status.tone-draft { background:var(--vd-info-soft); color:var(--vd-info); } .dashboard-operation-status.tone-failed { background:var(--vd-danger-soft); color:var(--vd-danger); } .dashboard-recent-actions { display:grid; gap:4px; padding-right:10px; } .dashboard-recent-actions button { min-height:28px; padding:0 8px; border:1px solid var(--vd-line); border-radius:var(--vd-radius-xs); background:var(--vd-surface-raised); color:var(--vd-ink-secondary); font:inherit; font-size:8px; cursor:pointer; } .dashboard-recent-actions button:hover { border-color:var(--vd-brand); color:var(--vd-brand); } .dashboard-operation-list { display:grid; min-height:86px; } .dashboard-operation-row { min-width:0; min-height:44px; display:grid; grid-template-columns:8px minmax(0,1fr) auto; gap:8px; align-items:center; padding:8px 11px; border:0; border-bottom:1px solid var(--vd-line); background:transparent; color:var(--vd-ink); text-align:left; cursor:pointer; } .dashboard-operation-row:last-child { border-bottom:0; } .dashboard-operation-row:hover { background:var(--vd-surface-muted); } .dashboard-operation-row>span:nth-child(2) { min-width:0; display:grid; gap:2px; } .dashboard-operation-row strong,.dashboard-operation-row small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .dashboard-operation-row strong { font-size:9px; } .dashboard-operation-row small { color:var(--vd-ink-muted); font-size:8px; } .dashboard-operation-dot { width:7px; height:7px; border-radius:50%; background:var(--vd-info); } .dashboard-operation-dot.tone-danger,.dashboard-operation-dot.tone-failed { background:var(--vd-danger); } .dashboard-operation-dot.tone-warning,.dashboard-operation-dot.tone-active { background:var(--vd-warning); } .dashboard-operation-empty,.dashboard-operation-placeholder { min-height:86px; display:grid; place-content:center; gap:4px; padding:14px; text-align:center; color:var(--vd-ink-muted); } .dashboard-operation-empty strong { color:var(--vd-ink-secondary); font-size:10px; } .dashboard-operation-empty span,.dashboard-operation-placeholder { font-size:8px; } .dashboard-connection-card p { min-height:42px; padding:10px 12px 4px; color:var(--vd-ink-muted); font-size:9px; line-height:1.45; } .dashboard-system-indicator { width:10px; height:10px; border-radius:50%; background:var(--vd-warning); box-shadow:0 0 0 4px var(--vd-warning-soft); } .dashboard-system-indicator[data-state="healthy"] { background:var(--vd-success); box-shadow:0 0 0 4px var(--vd-success-soft); } .dashboard-system-facts { display:flex; flex-wrap:wrap; gap:5px; padding:4px 12px 11px; } .dashboard-system-facts span { padding:4px 6px; border-radius:var(--vd-radius-xs); background:var(--vd-surface-muted); color:var(--vd-ink-secondary); font-size:8px; } .dashboard-operations[data-state="loading"] .dashboard-operations-grid { opacity:.58; } .dashboard-operations[data-state="error"] .dashboard-operations-state { border-color:var(--vd-danger); color:var(--vd-danger); } .article-editor-mode { display:inline-flex; padding:2px; border:1px solid var(--vd-line); border-radius:var(--vd-radius-xl); background:var(--vd-surface-muted); } .article-editor-mode button { min-height:28px; padding:0 9px; border:0; border-radius:var(--vd-radius-xl); background:transparent; color:var(--vd-ink-muted); font:inherit; font-size:9px; font-weight:700; cursor:pointer; } .article-editor-mode button[aria-pressed="true"] { background:var(--vd-surface-raised); color:var(--vd-ink); box-shadow:var(--vd-shadow-card); } .article-workspace[data-editor-mode="compact"] #article-summary { display:none; } .article-workspace[data-editor-mode="compact"] [data-article-panel-trigger="platforms"], .article-workspace[data-editor-mode="compact"] [data-article-panel-trigger="quality"], .article-workspace[data-editor-mode="compact"] [data-article-panel-trigger="activity"] { display:none; } .article-workspace[data-editor-mode="compact"] .article-panel-inspector, .article-workspace[data-editor-mode="compact"] .detail-platform-workbench, .article-workspace[data-editor-mode="compact"] .article-profitability-card { display:none; } .article-workspace[data-editor-mode="compact"] .article-editor-layout { grid-template-columns:minmax(0,1fr); } } @layer vendoo.interactions { @media (prefers-reduced-motion: reduce) { .dashboard-recent-main,.dashboard-operation-row { transition:none; } } @media (forced-colors: active) { .dashboard-system-indicator,.dashboard-operation-dot { forced-color-adjust:none; border:1px solid CanvasText; } .dashboard-operation-status { border:1px solid CanvasText; } } } @layer vendoo.overrides { @container dashboard-operations (max-width:980px) { .dashboard-operations-grid { grid-template-columns:1fr; } } @container dashboard-operations (max-width:720px) { .dashboard-operations-stack { grid-template-columns:1fr; } .dashboard-recent-item { grid-template-columns:1fr; } .dashboard-recent-actions { grid-template-columns:1fr 1fr; padding:0 10px 10px; } } @container dashboard-operations (max-width:520px) { .dashboard-operations-heading { align-items:flex-start; flex-direction:column; } .dashboard-recent-main { grid-template-columns:44px minmax(0,1fr); } .dashboard-recent-media,.dashboard-recent-media img { width:44px; height:44px; } .dashboard-operation-status { grid-column:2; justify-self:start; } } @media (max-width:760px) { .article-command-actions { flex-wrap:wrap; } .article-editor-mode { order:-1; } } @media (pointer:coarse) { .dashboard-recent-actions button { min-height:44px; } } } :root { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } [data-theme="contrast"] { color-scheme: dark; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; background: var(--vd-canvas); color: var(--vd-ink); min-height: 100vh; display: flex; } .sidebar { width: 230px; background: var(--vd-surface-raised); border-right: 1px solid var(--vd-line); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 120; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; } .sidebar-header { padding: 20px 16px 16px; border-bottom: 1px solid var(--vd-line); } .sidebar-logo { display: flex; align-items: center; gap: 10px; } .logo-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--vd-brand); display: flex; align-items: center; justify-content: center; color: var(--vd-on-accent); font-weight: 700; font-size: 15px; flex-shrink: 0; } .logo-text { font-weight: 700; font-size: 17px; color: var(--vd-brand); letter-spacing: -0.3px; } .sidebar-nav { flex: 1; padding: 4px 0; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; } .sidebar-nav::-webkit-scrollbar { display: none; } .nav-group { padding: 10px 10px 2px; } .nav-group-label { font-size: 10px; font-weight: 600; color: var(--vd-ink-muted); text-transform: uppercase; letter-spacing: 0.7px; padding: 0 8px 6px; } .nav-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: var(--vd-radius-sm); border: none; background: none; font-size: 13px; font-weight: 500; color: var(--vd-ink-secondary); cursor: pointer; transition: all 0.15s; text-align: left; } .nav-item svg { flex-shrink: 0; opacity: 0.7; } .nav-item span { flex: 1; } .nav-item:hover { background: var(--vd-surface-hover); color: var(--vd-ink); } .nav-item:hover svg { opacity: 1; } .nav-item.active { background: var(--vd-brand-soft); color: var(--vd-brand); font-weight: 600; } .nav-item.active svg { opacity: 1; color: var(--vd-brand); } .nav-badge { font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 9px; padding: 0 5px; background: var(--vd-danger); color: var(--vd-on-accent); line-height: 1; } .sidebar-footer { margin-top: auto; padding: 10px; border-top: 1px solid var(--vd-line); display: flex; flex-direction: column; gap: 8px; } .sidebar-user { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--vd-radius-sm); } .sidebar-user-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--vd-brand); display: flex; align-items: center; justify-content: center; color: var(--vd-on-accent); font-size: 12px; font-weight: 700; flex-shrink: 0; } .sidebar-user-info { flex: 1; min-width: 0; } .sidebar-user-name { font-size: 13px; font-weight: 600; color: var(--vd-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-user-role { font-size: 11px; color: var(--vd-ink-muted); text-transform: capitalize; } .sidebar-logout { background: none; border: none; color: var(--vd-ink-muted); cursor: pointer; padding: 4px; border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: all 0.15s; } .sidebar-logout:hover { color: var(--vd-danger); background: var(--vd-danger-soft); } .sidebar-footer .theme-toggle { width: 100%; justify-content: center; border-radius: var(--vd-radius-sm); height: 32px; } .main-wrapper { flex: 1; margin-left: 230px; min-height: 100vh; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 28px; background: var(--vd-surface-raised); border-bottom: 1px solid var(--vd-line); position: sticky; top: 0; z-index: 100; min-height: 56px; } .topbar-title { font-size: 18px; font-weight: 700; color: var(--vd-ink); letter-spacing: -0.3px; } .topbar-actions { display: flex; gap: 8px; align-items: center; } .topbar-btn { display: flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--vd-radius-sm); border: 1px solid var(--vd-line); background: var(--vd-surface-raised); font-size: 13px; font-weight: 500; color: var(--vd-ink-secondary); cursor: pointer; transition: all 0.15s; } .topbar-btn:hover { border-color: var(--vd-brand); color: var(--vd-brand); } .topbar-btn.primary { background: var(--vd-brand); color: var(--vd-on-accent); border-color: var(--vd-brand); } .topbar-btn.primary:hover { background: var(--vd-brand-strong); } main { max-width: 960px; margin: 0 auto; padding: 24px 28px; width: 100%; } .tab-content { display: none; } .tab-content.active { display: block; } .dropzone { border: 2px dashed var(--vd-line); border-radius: var(--vd-radius-md); padding: 40px 24px; text-align: center; cursor: pointer; transition: all 0.2s; background: var(--vd-surface-raised); } .dropzone:hover, .dropzone.dragover { border-color: var(--vd-brand); background: var(--vd-brand-soft); } .dropzone p { color: var(--vd-ink-muted); font-size: 14px; line-height: 1.6; } .photo-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; margin-top: 12px; } .photo-preview .thumb { position: relative; aspect-ratio: 1; border-radius: var(--vd-radius-sm); overflow: hidden; box-shadow: var(--vd-shadow-none); } .photo-preview .thumb img { width: 100%; height: 100%; object-fit: cover; } .photo-preview .thumb .remove-photo { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--vd-overlay-control); color: var(--vd-on-accent); border: none; cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s; } .photo-preview .thumb .edit-photo { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--vd-brand); color: var(--vd-on-accent); border: 2px solid var(--vd-on-accent); cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center; transition: transform 0.15s, background 0.15s; z-index: 2; box-shadow: var(--vd-shadow-xs); } .photo-preview .thumb .edit-photo:hover { background: var(--vd-brand-strong); transform: scale(1.15); } .photo-preview .thumb:hover .remove-photo { opacity: 1; } .image-tools { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .config-section { display: flex; flex-direction: column; gap: 14px; } .config-group label { display: block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--vd-ink-muted); margin-bottom: 6px; } .button-group { display: flex; gap: 5px; flex-wrap: wrap; } .toggle-btn { background: var(--vd-surface-raised); border: 1.5px solid var(--vd-line); color: var(--vd-ink-secondary); padding: 6px 12px; border-radius: var(--vd-radius-sm); cursor: pointer; font-size: 12px; font-weight: 500; transition: all 0.15s; } .toggle-btn:hover { border-color: var(--vd-brand); color: var(--vd-brand); } .toggle-btn.active { background: var(--vd-brand); border-color: var(--vd-brand); color: var(--vd-on-accent); } .model-select, select { width: 100%; background: var(--vd-input-bg); border: 1.5px solid var(--vd-line); color: var(--vd-ink); padding: 7px 10px; border-radius: var(--vd-radius-sm); font-size: 13px; cursor: pointer; } .model-select:focus, select:focus { outline: none; border-color: var(--vd-brand); box-shadow: 0 0 0 3px var(--vd-brand-soft); } .primary-btn { background: var(--vd-brand); color: var(--vd-on-accent); border: none; padding: 10px 20px; border-radius: var(--vd-radius-sm); font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s; box-shadow: var(--vd-shadow-none); } .primary-btn:hover { background: var(--vd-brand-strong); } .primary-btn:disabled { opacity: 0.4; cursor: not-allowed; } .secondary-btn { background: var(--vd-surface-raised); color: var(--vd-ink); border: 1.5px solid var(--vd-line); padding: 8px 16px; border-radius: var(--vd-radius-sm); font-size: 13px; cursor: pointer; transition: all 0.15s; font-weight: 500; } .secondary-btn:hover { background: var(--vd-surface-hover); border-color: var(--vd-ink-muted); } .small-btn { background: var(--vd-surface-raised); color: var(--vd-ink-secondary); border: 1.5px solid var(--vd-line); padding: 5px 10px; border-radius: var(--vd-radius-sm); font-size: 12px; cursor: pointer; transition: all 0.15s; font-weight: 500; } .small-btn:hover { border-color: var(--vd-brand); color: var(--vd-brand); } .meta-section { margin-top: 20px; background: var(--vd-surface-raised); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-md); padding: 20px; box-shadow: var(--vd-shadow-none); } .meta-section h2 { font-size: 14px; margin-bottom: 12px; color: var(--vd-ink-muted); } .meta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; } .meta-grid-edit { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } .meta-edit-item { display: flex; flex-direction: column; gap: 3px; } .meta-item { display: flex; flex-direction: column; gap: 2px; } .meta-label { font-size: 10px; text-transform: uppercase; color: var(--vd-ink-muted); letter-spacing: 0.6px; font-weight: 600; } .meta-value { font-size: 14px; font-weight: 500; } .meta-input { background: var(--vd-input-bg); border: 1.5px solid var(--vd-line); color: var(--vd-ink); padding: 6px 8px; border-radius: var(--vd-radius-sm); font-size: 13px; width: 100%; } .meta-input:focus { outline: none; border-color: var(--vd-brand); box-shadow: 0 0 0 3px var(--vd-brand-soft); } .fee-info { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--vd-line); font-size: 13px; color: var(--vd-ink-muted); } .fee-info .fee-net { font-size: 16px; font-weight: 600; color: var(--vd-success); } .variant-tabs { display: flex; gap: 6px; margin: 16px 0 0; } .variant-tab { background: var(--vd-surface-raised); border: 1.5px solid var(--vd-line); color: var(--vd-ink-muted); padding: 6px 14px; border-radius: var(--vd-radius-sm); cursor: pointer; font-size: 13px; font-weight: 500; transition: all 0.15s; } .variant-tab.active { background: var(--vd-warning); border-color: var(--vd-warning); color: var(--vd-on-accent); } .result-section { margin-top: 16px; background: var(--vd-surface-raised); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-md); padding: 20px; box-shadow: var(--vd-shadow-none); } .result-section h2 { font-size: 15px; margin-bottom: 14px; } .result-field { margin-bottom: 14px; } .field-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; } .field-header label { font-size: 12px; font-weight: 600; color: var(--vd-ink-muted); } .copy-btn { background: none; border: 1.5px solid var(--vd-line); color: var(--vd-ink-muted); padding: 3px 8px; border-radius: 6px; font-size: 11px; cursor: pointer; transition: all 0.15s; font-weight: 500; } .copy-btn:hover { border-color: var(--vd-warning); color: var(--vd-warning); } .result-input, .result-textarea { width: 100%; background: var(--vd-input-bg); border: 1.5px solid var(--vd-line); color: var(--vd-ink); padding: 9px 11px; border-radius: var(--vd-radius-sm); font-size: 14px; font-family: inherit; resize: vertical; } .result-input:focus, .result-textarea:focus { outline: none; border-color: var(--vd-brand); box-shadow: 0 0 0 3px var(--vd-brand-soft); } .result-actions { display: flex; gap: 8px; margin-top: 8px; } .loading { text-align: center; padding: 48px; } .spinner { width: 36px; height: 36px; border: 3px solid var(--vd-line); border-top-color: var(--vd-warning); border-radius: 50%; margin: 0 auto 16px; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .loading p { color: var(--vd-ink-muted); font-size: 14px; } .danger-btn { color: var(--vd-danger); border-color: var(--vd-danger); } .danger-btn:hover { background: var(--vd-danger-soft); } .danger-btn:disabled { opacity: 0.4; } .detail-edit-group { margin-bottom: 14px; } .detail-edit-group label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--vd-ink-muted); margin-bottom: 4px; } .detail-edit-group input, .detail-edit-group textarea, .detail-edit-group select { width: 100%; background: var(--vd-input-bg); border: 1.5px solid var(--vd-line); color: var(--vd-ink); padding: 8px 10px; border-radius: var(--vd-radius-sm); font-size: 14px; font-family: inherit; resize: vertical; } .detail-edit-group input:focus, .detail-edit-group textarea:focus, .detail-edit-group select:focus { outline: none; border-color: var(--vd-brand); box-shadow: 0 0 0 3px var(--vd-brand-soft); } .detail-edit-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 480px) { .detail-edit-row { grid-template-columns: 1fr; } } .detail-actions { display: flex; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--vd-line); } .templates-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .templates-header h2 { font-size: 16px; } .template-list { display: flex; flex-direction: column; gap: 6px; } .template-item { display: flex; align-items: center; justify-content: space-between; background: var(--vd-surface-raised); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-sm); padding: 12px 16px; box-shadow: var(--vd-shadow-none); } .template-item .tpl-info { flex: 1; } .template-item .tpl-name { font-size: 14px; font-weight: 500; } .template-item .tpl-meta { font-size: 12px; color: var(--vd-ink-muted); margin-top: 2px; } .template-item .tpl-actions { display: flex; gap: 6px; } .template-form { background: var(--vd-surface-raised); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-md); padding: 20px; margin-top: 16px; box-shadow: var(--vd-shadow-none); } .template-form h3 { font-size: 15px; margin-bottom: 16px; } .fee-results { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; } .fee-card { background: var(--vd-surface-raised); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-sm); padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; box-shadow: var(--vd-shadow-none); } .fee-card .fee-platform { font-weight: 600; font-size: 14px; } .fee-card .fee-breakdown { font-size: 12px; color: var(--vd-ink-muted); margin-top: 2px; } .fee-card .fee-amounts { text-align: right; } .fee-card .fee-net-amount { font-size: 18px; font-weight: 700; color: var(--vd-success); } .fee-card .fee-deducted { font-size: 12px; color: var(--vd-ink-muted); } .inventory-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .inventory-header h2 { margin: 0; } .inventory-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; } .inv-stat-card { background: var(--vd-surface-raised); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-sm); padding: 16px; text-align: center; } .inv-stat-value { font-size: 24px; font-weight: 700; color: var(--vd-brand); } .inv-stat-label { font-size: 12px; color: var(--vd-ink-muted); margin-top: 2px; } .inventory-locations { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } .inv-location-card { background: var(--vd-surface-raised); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-sm); padding: 16px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; } .inv-location-card:hover { border-color: var(--vd-brand); box-shadow: var(--vd-shadow-xs); } .inv-loc-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .inv-loc-icon { color: var(--vd-brand); flex-shrink: 0; } .inv-loc-name { font-weight: 600; font-size: 15px; } .inv-loc-stats { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--vd-ink-muted); } .inv-loc-count { font-weight: 500; color: var(--vd-ink); } .inv-loc-sold { color: var(--vd-warning); } .inv-loc-reserved { color: var(--vd-brand); } .inv-loc-value { margin-top: 8px; font-size: 16px; font-weight: 600; color: var(--vd-brand); } .inv-unassigned { border-style: dashed; opacity: 0.8; } .inv-unassigned .inv-loc-icon { color: var(--vd-ink-muted); } .inventory-detail-actions { display: flex; gap: 8px; margin: 12px 0; } .inv-item-check { margin-right: 10px; } .settings-form { max-width: 500px; } .setting-group { margin-bottom: 18px; } .setting-group > label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; } .setting-group small { display: block; margin-top: 3px; color: var(--vd-ink-muted); font-size: 12px; } .setting-group input, .setting-group select, .setting-group textarea { width: 100%; background: var(--vd-input-bg); border: 1.5px solid var(--vd-line); color: var(--vd-ink); padding: 9px 11px; border-radius: var(--vd-radius-sm); font-size: 14px; font-family: inherit; resize: vertical; } .setting-group input:focus, .setting-group select:focus, .setting-group textarea:focus { outline: none; border-color: var(--vd-brand); box-shadow: 0 0 0 3px var(--vd-brand-soft); } .key-input-wrap { display: flex; gap: 6px; } .key-input-wrap input { flex: 1; } .toggle-visibility { background: var(--vd-surface-raised); border: 1.5px solid var(--vd-line); color: var(--vd-ink-muted); padding: 8px 12px; border-radius: var(--vd-radius-sm); cursor: pointer; font-size: 12px; white-space: nowrap; font-weight: 500; } .toggle-visibility:hover { border-color: var(--vd-brand); color: var(--vd-brand); } .toast { position: fixed; bottom: 24px; right: 24px; background: var(--vd-surface-raised); border: 1.5px solid var(--vd-success); color: var(--vd-ink); padding: 10px 18px; border-radius: var(--vd-radius-sm); font-size: 14px; font-weight: 500; transform: translateY(100px); opacity: 0; transition: all 0.3s; z-index: 1000; box-shadow: var(--vd-shadow-soft); } .toast.show { transform: translateY(0); opacity: 1; } .publish-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; } .publish-header h2 { font-size: 16px; } .publish-actions-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .publish-actions-bar span { font-size: 13px; color: var(--vd-ink-muted); font-weight: 500; } .publish-filters { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .publish-filters input, .publish-filters select { background: var(--vd-input-bg); border: 1.5px solid var(--vd-line); color: var(--vd-ink); padding: 8px 10px; border-radius: var(--vd-radius-sm); font-size: 13px; } .publish-filters input { flex: 1; min-width: 150px; } .publish-filters input:focus, .publish-filters select:focus { outline: none; border-color: var(--vd-brand); box-shadow: 0 0 0 3px var(--vd-brand-soft); } .publish-list { display: flex; flex-direction: column; gap: 6px; } .publish-item { display: flex; align-items: center; gap: 12px; background: var(--vd-surface-raised); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-sm); padding: 10px 14px; transition: all 0.15s; box-shadow: var(--vd-shadow-none); } .publish-item:hover { border-color: var(--vd-brand); } .publish-item input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--vd-brand); flex-shrink: 0; } .publish-item .thumb-small { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: var(--vd-surface-quiet); } .publish-item .item-info { flex: 1; min-width: 0; } .publish-item .item-title { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .publish-item .item-meta { font-size: 11px; color: var(--vd-ink-muted); margin-top: 2px; } .publish-item .item-publish-actions { display: flex; gap: 4px; align-items: center; flex-shrink: 0; } .publish-badges { display: flex; gap: 4px; margin-right: 8px; } .publish-badge { font-size: 9px; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; font-weight: 600; } .publish-badge.copied { background: var(--vd-warning-soft); color: var(--vd-warning); } .publish-badge.published { background: var(--vd-success-soft); color: var(--vd-success); } .modal-overlay { position: fixed; inset: 0; background: color-mix(in srgb, var(--vd-ink) 56%, transparent); z-index: var(--vd-layer-modal); display: flex; align-items: center; justify-content: center; padding: 24px; } .modal { background: var(--vd-surface-raised); border-radius: var(--vd-radius-md); box-shadow: var(--vd-shadow-md); max-width: 560px; width: 100%; max-height: 85vh; overflow-y: auto; } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--vd-line); position: sticky; top: 0; background: var(--vd-surface-raised); z-index: 1; } .modal-header h3 { font-size: 15px; } .modal-close { background: none; border: none; font-size: 22px; color: var(--vd-ink-muted); cursor: pointer; padding: 0 4px; line-height: 1; } .modal-close:hover { color: var(--vd-ink); } .modal-body { padding: 20px; } .smart-copy-field { margin-bottom: 14px; } .smart-copy-field .field-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; } .smart-copy-field label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--vd-ink-muted); } .smart-copy-field input, .smart-copy-field textarea { width: 100%; background: var(--vd-surface-quiet); border: 1.5px solid var(--vd-line); color: var(--vd-ink); padding: 8px 10px; border-radius: var(--vd-radius-sm); font-size: 13px; font-family: inherit; resize: vertical; } .smart-copy-field textarea { min-height: 80px; } .smart-copy-steps { background: var(--vd-brand-soft); border-radius: var(--vd-radius-sm); padding: 14px 16px; margin-bottom: 16px; } .smart-copy-steps h4 { font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--vd-brand); } .smart-copy-steps ol { padding-left: 18px; font-size: 13px; line-height: 1.8; color: var(--vd-ink-secondary); } .smart-copy-photos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .smart-copy-photos img { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; box-shadow: var(--vd-shadow-none); } .smart-copy-actions { display: flex; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--vd-line); } .etsy-connect-wrap { display: flex; align-items: center; gap: 10px; margin-top: 8px; } .etsy-status { font-size: 12px; font-weight: 600; } .etsy-status.connected { color: var(--vd-success); } .etsy-status.disconnected { color: var(--vd-ink-muted); } .html-preview { background: var(--vd-paper); border: 1.5px solid var(--vd-line); border-radius: var(--vd-radius-sm); padding: 20px; min-height: 80px; line-height: 1.6; font-size: 14px; box-shadow: inset 0 1px 3px color-mix(in srgb,var(--vd-ink) 4%,transparent); } .html-source { font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-size: 12px; line-height: 1.5; white-space: pre-wrap; tab-size: 2; background: var(--vd-code-bg); color: var(--vd-code-ink); border-radius: var(--vd-radius-sm); padding: 14px; } .ql-toolbar.ql-snow { border: 1.5px solid var(--vd-line); border-radius: var(--vd-radius-sm) var(--vd-radius-sm) 0 0; background: var(--vd-surface-quiet); font-family: inherit; } .ql-container.ql-snow { border: 1.5px solid var(--vd-line); border-top: none; border-radius: 0 0 var(--vd-radius-sm) var(--vd-radius-sm); font-family: inherit; font-size: 14px; min-height: 120px; background: var(--vd-input-bg); } .ql-editor { min-height: 100px; line-height: 1.7; color: var(--vd-ink); } .ql-editor.ql-blank::before { color: var(--vd-ink-muted); font-style: normal; } .ql-snow .ql-stroke { stroke: var(--vd-ink-secondary); } .ql-snow .ql-fill { fill: var(--vd-ink-secondary); } .ql-snow .ql-picker-label { color: var(--vd-ink-secondary); } .ql-snow .ql-active .ql-stroke { stroke: var(--vd-brand); } .ql-snow .ql-active .ql-fill { fill: var(--vd-brand); } .ql-snow .ql-active { color: var(--vd-brand); } .ql-snow .ql-picker-options { background: var(--vd-surface-raised); border-color: var(--vd-line); border-radius: var(--vd-radius-sm); } .ql-editor:focus { box-shadow: inset 0 0 0 1px var(--vd-brand); } .hidden { display: none !important; } .empty-state { text-align: center; padding: 40px; color: var(--vd-ink-muted); font-size: 14px; } .cat-picker-wrap { position: relative; } .cat-picker-wrap .cat-search { width: 100%; } .cat-dropdown { display: none; position: absolute; top: calc(100% + var(--vd-space-1)); left: 0; right: 0; background: var(--vd-surface-raised); border: 1px solid var(--vd-border-strong); border-radius: var(--vd-radius-md); box-shadow: var(--vd-shadow-lg); max-height: min(360px, 52vh); overflow-y: auto; z-index: var(--vd-layer-popover); scrollbar-width: thin; overscroll-behavior: contain; } .cat-dropdown[data-vd-menu][aria-hidden="false"]:not(.hidden) { display: block; } .cat-empty { padding: var(--vd-space-4); text-align: center; color: var(--vd-text-muted); font-size: 13px; } .cat-result-item, .cat-leaf, .cat-group-hd { appearance: none; -webkit-appearance: none; width: 100%; margin: 0; text-align: left; font: inherit; border-left: 0; border-right: 0; border-top: 0; } .cat-result-item { display: block; padding: var(--vd-space-2) var(--vd-space-3); cursor: pointer; color: var(--vd-text); background: transparent; border-bottom: 1px solid var(--vd-surface-hover); } .cat-result-item:hover, .cat-result-item:focus-visible { background: var(--vd-accent-soft); } .cat-result-name { font-weight: 600; font-size: 13px; color: var(--vd-ink); } .cat-result-path { font-size: 11px; color: var(--vd-ink-muted); margin-top: 2px; } .cat-group-hd { padding: 7px 10px; font-size: 13px; font-weight: 700; color: var(--vd-accent); cursor: pointer; background: var(--vd-surface-hover); border-bottom: 1px solid var(--vd-border); } .cat-group-hd:hover, .cat-group-hd:focus-visible { background: var(--vd-surface-subtle); } .cat-group-hd::before { content: '▸ '; font-size: 10px; color: var(--vd-ink-muted); } .cat-group-hd.expanded::before { content: '▾ '; } .cat-sub-hd { padding: 5px 10px 5px 18px; font-size: 12px; font-weight: 600; color: var(--vd-ink-secondary); background: var(--vd-canvas); } .cat-leaf { display: block; padding: 6px 10px 6px 28px; font-size: 12px; cursor: pointer; color: var(--vd-text); background: transparent; border-bottom: 1px solid var(--vd-border-subtle); } .cat-leaf:hover, .cat-leaf:focus-visible { background: var(--vd-accent-soft); color: var(--vd-accent); } .cat-selected-display { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--vd-brand-soft); border: 1px solid var(--vd-brand); font-size: 13px; color: var(--vd-brand); font-weight: 500; } .cat-sel-clear { margin-left: auto; cursor: pointer; font-size: 16px; line-height: 1; color: var(--vd-ink-muted); background: none; border: none; padding: 0 2px; } .cat-sel-clear:hover { color: var(--vd-danger); } .sku-badge { display: inline-block; font-size: 10px; font-weight: 700; background: var(--vd-brand-soft); color: var(--vd-brand); padding: 1px 5px; margin-right: 6px; letter-spacing: 0.3px; } .item-pub-badges { display: flex; gap: 4px; margin-top: 3px; flex-wrap: wrap; } .publish-badge { font-size: 9px; font-weight: 600; padding: 1px 6px; text-transform: uppercase; letter-spacing: 0.3px; } .pub-published { background: var(--vd-success-soft); color: var(--vd-brand); } .pub-copied { background: var(--vd-warning-soft); color: var(--vd-warning); } .pub-pending { background: var(--vd-surface-muted); color: var(--vd-ink-muted); } .pub-failed { background: var(--vd-danger-soft); color: var(--vd-danger); } .detail-header-row { display: flex; gap: 16px; align-items: flex-start; } .detail-header-row .detail-photos { flex: 1; } .detail-qr-wrap { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; background: var(--vd-canvas); border: 1px solid var(--vd-line); } .detail-sku-big { font-size: 14px; font-weight: 800; color: var(--vd-brand); letter-spacing: 0.5px; } [data-theme="dark"] .sidebar { background: var(--vd-surface); border-color: var(--vd-line); } [data-theme="dark"] .html-preview { background: var(--vd-input-bg); } [data-theme="dark"] .ql-editor { color: var(--vd-ink); } [data-theme="dark"] .ql-container.ql-snow { background: var(--vd-input-bg); } [data-theme="dark"] .ql-toolbar.ql-snow { background: var(--vd-surface-hover); } .theme-toggle { background: none; border: 1px solid var(--vd-line); color: var(--vd-ink-muted); height: 32px; border-radius: var(--vd-radius-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: all 0.15s; flex-shrink: 0; padding: 0 8px; gap: 6px; } .theme-toggle:hover { border-color: var(--vd-brand); color: var(--vd-brand); } .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 20px; } .stat-card { background: var(--vd-surface-raised); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-md); padding: 16px; box-shadow: var(--vd-shadow-none); } .stat-card .stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--vd-ink-muted); font-weight: 600; } .stat-card .stat-value { font-size: 28px; font-weight: 800; color: var(--vd-ink); margin-top: 4px; } .stat-card .stat-sub { font-size: 12px; color: var(--vd-ink-muted); margin-top: 2px; } .stat-card.accent .stat-value { color: var(--vd-brand); } .stat-card.orange .stat-value { color: var(--vd-warning); } .chart-card { background: var(--vd-surface-raised); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-md); padding: 20px; box-shadow: var(--vd-shadow-none); margin-bottom: 16px; } .chart-card h3 { font-size: 14px; margin-bottom: 12px; color: var(--vd-ink-muted); } .chart-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .chart-bar-label { font-size: 12px; min-width: 100px; color: var(--vd-ink-secondary); } .chart-bar-track { flex: 1; height: 22px; background: var(--vd-surface-hover); border-radius: 4px; overflow: hidden; } .chart-bar-fill { height: 100%; border-radius: 4px; transition: width 0.4s ease; display: flex; align-items: center; padding-left: 8px; font-size: 11px; font-weight: 600; color: var(--vd-on-accent); } .chart-bar-fill.green { background: var(--vd-brand); } .chart-bar-fill.orange { background: var(--vd-warning); } .chart-bar-fill.blue { background: var(--vd-info); } .photo-editor-overlay { position: fixed; inset: 0; z-index: 600; display: flex; align-items: center; justify-content: center; padding: 18px; background: var(--vd-scrim-strong); backdrop-filter: blur(8px); } .photo-editor { width: min(1420px, calc(100vw - 36px)); height: min(94vh, 960px); max-height: 94vh; overflow: hidden; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; background: var(--vd-surface); border: 1px solid var(--vd-line); border-radius: 16px; box-shadow: var(--vd-shadow-lg); } .photo-editor-header { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 15px 18px; border-bottom: 1px solid var(--vd-line); } .photo-editor-header > div { min-width: 0; } .photo-editor-header h3 { margin: 2px 0 0; color: var(--vd-ink); font-size: 18px; } .photo-editor-header small { display: block; margin-top: 4px; color: var(--vd-ink-muted); font-size: 11px; } .photo-editor-kicker { color: var(--vd-brand); font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; } .photo-editor-toolbar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 9px 18px; border-bottom: 1px solid var(--vd-line); background: var(--vd-surface-muted); } .photo-editor-toolbar .small-btn.active, .pe-button-grid .small-btn.active { background: var(--vd-brand); color: var(--vd-on-accent); border-color: transparent; } .pe-history-status { margin-left: auto; color: var(--vd-ink-muted); font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; } .photo-editor-workspace { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 360px; overflow: hidden; } .photo-editor-stage { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; gap: 10px; padding: 14px; overflow: hidden; background: linear-gradient(45deg, color-mix(in srgb,var(--vd-ink-muted) 6%,transparent) 25%, transparent 25%), linear-gradient(-45deg, color-mix(in srgb,var(--vd-ink-muted) 6%,transparent) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, color-mix(in srgb,var(--vd-ink-muted) 6%,transparent) 75%), linear-gradient(-45deg, transparent 75%, color-mix(in srgb,var(--vd-ink-muted) 6%,transparent) 75%); background-size: 24px 24px; background-position: 0 0, 0 12px, 12px -12px, -12px 0; } .photo-editor-stage:has(.pe-before-pane:not(.hidden)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pe-preview-pane { min-width: 0; min-height: 0; height: 100%; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 28px 12px 12px; border: 1px solid var(--vd-line); border-radius: 12px; background: var(--vd-scrim); } .pe-preview-pane > span { position: absolute; top: 8px; left: 10px; z-index: 2; padding: 4px 7px; border-radius: 999px; color: var(--vd-on-accent); background: var(--vd-overlay-control); font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; letter-spacing: .08em; } .pe-preview-pane canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 5px; box-shadow: var(--vd-shadow-lg); } .photo-editor-canvas-wrap { min-width: 0; min-height: 0; width: 100%; height: 100%; max-height: 100%; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; } .photo-editor-canvas-wrap .crop-overlay { position: absolute; z-index: 4; cursor: crosshair; touch-action: none; border-radius: 5px; box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--vd-on-accent) 20%,transparent); } .pe-stage-footer { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--vd-ink-muted); font-size: 10px; } .photo-editor-sidebar { min-height: 0; overflow-y: auto; padding: 12px; border-left: 1px solid var(--vd-line); background: var(--vd-surface-muted); } .pe-control-group { margin-bottom: 9px; border: 1px solid var(--vd-line); border-radius: 10px; background: var(--vd-surface); overflow: hidden; } .pe-control-group > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 10px 11px; color: var(--vd-ink); font-size: 11px; font-weight: 800; } .pe-control-group > summary::-webkit-details-marker { display: none; } .pe-control-group > summary::after { content: '⌄'; color: var(--vd-ink-muted); } .pe-control-group:not([open]) > summary::after { content: '›'; } .pe-control-body { display: grid; gap: 9px; padding: 10px 11px 12px; border-top: 1px solid var(--vd-line); } .pe-control-body .editor-row { display: grid; grid-template-columns: 88px minmax(0,1fr) 44px; gap: 8px; align-items: center; } .pe-control-body .editor-row label, .pe-export-grid > label, .pe-crop-controls > label { color: var(--vd-ink-muted); font-size: 10px; font-weight: 700; } .pe-control-body input[type="range"] { width: 100%; accent-color: var(--vd-brand); } .pe-control-body .range-val { min-width: 40px; color: var(--vd-ink-secondary); font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; } .pe-button-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; } .pe-button-grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); } .pe-button-grid .small-btn { justify-content: center; } .pe-crop-controls { display: grid; grid-template-columns: 88px minmax(0,1fr); gap: 8px; align-items: center; } .pe-crop-controls .pe-button-grid { grid-column: 1 / -1; } .pe-control-body select, .pe-control-body input[type="number"] { width: 100%; min-height: 34px; padding: 7px 9px; border: 1px solid var(--vd-line); border-radius: 7px; color: var(--vd-ink); background: var(--vd-surface); } .pe-export-grid { grid-template-columns: 88px minmax(0,1fr); align-items: center; } .pe-inline-control { display: grid; grid-template-columns: minmax(0,1fr) 40px; gap: 8px; align-items: center; } .pe-custom-size { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto 1fr; gap: 7px; align-items: center; } .pe-version-list { display: grid; gap: 6px; max-height: 210px; overflow-y: auto; } .pe-version-item { width: 100%; display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--vd-line); border-radius: 8px; color: var(--vd-ink); background: var(--vd-surface-muted); text-align: left; cursor: pointer; } .pe-version-item:hover, .pe-version-item.active { border-color: var(--vd-brand); background: color-mix(in srgb, var(--vd-brand) 9%, var(--vd-surface)); } .pe-version-item > span { display: grid; place-items: center; min-height: 30px; border-radius: 6px; color: var(--vd-brand); background: color-mix(in srgb, var(--vd-brand) 12%, transparent); font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; } .pe-version-item strong { display: block; font-size: 10px; } .pe-version-item small { display: block; margin-top: 3px; color: var(--vd-ink-muted); font-size: 8px; line-height: 1.35; } .photo-editor-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--vd-line); background: var(--vd-surface); } .photo-editor-actions > div { margin-right: auto; } .photo-editor-actions strong { display: block; color: var(--vd-ink); font-size: 10px; } .photo-editor-actions small { display: block; margin-top: 2px; color: var(--vd-ink-muted); font-size: 9px; } .pe-save-status { display: block; min-height: 18px; margin-top: 5px; color: var(--vd-ink-muted); font-size: 10px; font-weight: 650; line-height: 1.35; } .pe-save-status[data-tone="working"] { color: var(--vd-info); } .pe-save-status[data-tone="success"] { color: var(--vd-success); } .pe-save-status[data-tone="error"] { color: var(--vd-danger); } .photo-editor[aria-busy="true"] .photo-editor-workspace { cursor: progress; } @media (max-width: 980px) { .photo-editor { height: min(96vh, 980px); max-height: 96vh; } .photo-editor-workspace { grid-template-columns: 1fr; grid-template-rows: minmax(300px, 58vh) auto; overflow-y: auto; } .photo-editor-stage { min-height: 300px; } .photo-editor-sidebar { overflow: visible; border-left: 0; border-top: 1px solid var(--vd-line); } } @media (max-width: 680px) { .photo-editor-overlay { padding: 0; } .photo-editor { width: 100vw; height: 100dvh; max-height: 100dvh; min-height: 100dvh; border-radius: 0; } .photo-editor-toolbar { padding-inline: 10px; } .photo-editor-stage:has(.pe-before-pane:not(.hidden)) { grid-template-columns: 1fr; } .photo-editor-stage { padding: 9px; } .photo-editor-workspace { grid-template-rows: minmax(260px, 52dvh) auto; } .photo-editor-stage { min-height: 260px; } .pe-history-status { width: 100%; margin-left: 0; } .photo-editor-actions { flex-wrap: wrap; } .photo-editor-actions > div { width: 100%; margin-right: 0; } .photo-editor-actions button { flex: 1; } } .drag-handle { cursor: grab; color: var(--vd-ink-muted); font-size: 16px; padding: 0 4px; user-select: none; touch-action: none; } .drag-handle:active { cursor: grabbing; } .photo-preview .thumb.dragging { opacity: 0.4; } .photo-preview .thumb.drag-over { outline: 2px solid var(--vd-brand); outline-offset: 2px; } .schedule-wrap { display: flex; gap: 8px; align-items: center; margin-top: 8px; } .schedule-wrap input[type="datetime-local"] { background: var(--vd-input-bg); border: 1.5px solid var(--vd-line); color: var(--vd-ink); padding: 6px 10px; border-radius: var(--vd-radius-sm); font-size: 13px; } .backup-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--vd-line); } .backup-section h3 { font-size: 14px; margin-bottom: 12px; } .backup-actions { display: flex; gap: 8px; flex-wrap: wrap; } .role-badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 6px; } .role-badge.admin { background: var(--vd-warning-soft); color: var(--vd-warning); } .role-badge.editor { background: var(--vd-surface-muted); color: var(--vd-ink-secondary); } .admin-wrap { max-width: 900px; } .admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .admin-header h2 { font-size: 18px; } .admin-tabs { display: flex; gap: 2px; margin-bottom: 16px; } .admin-tab { padding: 8px 16px; background: var(--vd-canvas); border: 1px solid var(--vd-line); border-radius: 6px 6px 0 0; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--vd-ink-muted); transition: all 0.15s; border-bottom: none; } .admin-tab.active { background: var(--vd-surface-raised); color: var(--vd-ink); font-weight: 600; border-bottom: 2px solid var(--vd-brand); } .admin-panel { display: none; } .admin-panel.active { display: block; } .users-list { display: flex; flex-direction: column; gap: 8px; } .user-card { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--vd-surface-raised); border: 1px solid var(--vd-line); border-radius: 10px; transition: box-shadow 0.15s; } .user-card:hover { box-shadow: var(--vd-shadow-soft); } .user-card-avatar { width: 40px; height: 40px; border-radius: 50%; font-size: 14px; font-weight: 700; color: var(--vd-on-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .user-card-info { flex: 1; min-width: 0; } .user-card-info .name { font-weight: 600; font-size: 14px; color: var(--vd-ink); } .user-card-info .email { font-size: 12px; color: var(--vd-ink-muted); } .user-card-info .meta { font-size: 11px; color: var(--vd-ink-muted); margin-top: 3px; } .user-card-actions { display: flex; gap: 6px; align-items: center; } .user-card .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .user-card .status-dot.online { background: var(--vd-success); } .user-card .status-dot.offline { background: var(--vd-line-strong); } .user-card .status-dot.inactive { background: var(--vd-danger); } .admin-user-workspace, .admin-user-articles-workspace { max-width: 1480px; margin: 0 auto; } .admin-user-shell, .admin-user-articles-shell { display: grid; gap: 18px; } .admin-user-hero, .admin-user-articles-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 20px 0 16px; border-bottom: 1px solid var(--vd-line); } .admin-user-hero-main { display: grid; gap: 14px; min-width: 0; } .admin-user-back { align-items: center; background: var(--vd-surface-raised); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-md); color: var(--vd-ink); cursor: pointer; display: inline-flex; font: inherit; font-size: 13px; font-weight: 700; gap: 7px; min-height: var(--vd-component-touch-target); padding: 0 12px; width: fit-content; } .admin-user-back:hover { background: var(--vd-surface-muted); border-color: var(--vd-line-strong); } .admin-user-back:focus-visible { outline: var(--vd-component-focus-width) solid var(--vd-focus); outline-offset: 2px; } .admin-user-back svg { height: 16px; width: 16px; } .admin-user-identity { align-items: center; display: flex; gap: 14px; min-width: 0; } .admin-user-avatar { --vd-avatar-color: var(--vd-brand); align-items: center; background: var(--vd-avatar-color); border-radius: 50%; color: var(--vd-on-accent); display: flex; flex: 0 0 auto; font-size: 22px; font-weight: 750; height: 62px; justify-content: center; width: 62px; } .admin-user-identity-copy { min-width: 0; } .admin-user-title-line { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; } .admin-user-title-line h2, .admin-user-articles-hero h2 { font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -.025em; line-height: 1.08; margin: 2px 0 4px; } .admin-user-identity-copy > p:not(.eyebrow), .admin-user-articles-hero p:not(.eyebrow) { color: var(--vd-ink-muted); margin: 0; } .admin-user-identity-meta { align-items: center; color: var(--vd-ink-muted); display: flex; flex-wrap: wrap; font-size: 12px; gap: 6px 12px; margin-top: 8px; } .admin-user-identity-meta .role-badge { margin-top: 0; } .admin-user-state { border: 1px solid var(--vd-line); border-radius: 4px; color: var(--vd-ink-secondary); font-size: 11px; font-weight: 700; padding: 3px 7px; } .admin-user-state.is-active { background: var(--vd-success-soft); border-color: color-mix(in srgb, var(--vd-success) 25%, var(--vd-line)); color: var(--vd-success); } .admin-user-state.is-inactive { background: var(--vd-danger-soft); border-color: color-mix(in srgb, var(--vd-danger) 25%, var(--vd-line)); color: var(--vd-danger); } .admin-user-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .admin-user-kpis, .admin-user-articles-kpis { border: 1px solid var(--vd-line); border-radius: 5px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; } .admin-user-kpis article, .admin-user-articles-kpis article { background: var(--vd-surface-raised); border-left: 1px solid var(--vd-line); display: grid; gap: 4px; min-height: 92px; padding: 14px 16px; } .admin-user-kpis article:first-child, .admin-user-articles-kpis article:first-child { border-left: 0; } .admin-user-kpis span, .admin-user-articles-kpis span { color: var(--vd-ink-muted); font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; } .admin-user-kpis strong, .admin-user-articles-kpis strong { color: var(--vd-ink); font-size: 24px; line-height: 1; } .admin-user-kpis small { color: var(--vd-ink-muted); font-size: 11px; } .admin-user-articles-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 640px; } .admin-user-nav { border-bottom: 1px solid var(--vd-line); display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin; } .admin-user-nav button { background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--vd-ink-muted); cursor: pointer; flex: 0 0 auto; font: inherit; font-size: 13px; font-weight: 620; padding: 10px 10px 9px; } .admin-user-nav button:hover { color: var(--vd-ink); } .admin-user-nav button.is-active { border-bottom-color: var(--vd-brand); color: var(--vd-ink); } .admin-user-panel { display: none; } .admin-user-panel.is-active { display: block; } .admin-user-overview-grid, .admin-user-form-layout, .admin-user-security-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-user-overview-primary { grid-row: span 2; } .admin-user-section { background: var(--vd-surface-raised); border: 1px solid var(--vd-line); border-radius: 5px; min-width: 0; padding: 18px; } .admin-user-section > header { align-items: flex-start; display: flex; gap: 14px; justify-content: space-between; margin-bottom: 14px; } .admin-user-section > header h3 { font-size: 16px; letter-spacing: -.012em; margin: 2px 0 0; } .admin-user-section > header p:not(.eyebrow) { color: var(--vd-ink-muted); font-size: 12px; line-height: 1.55; margin: 6px 0 0; max-width: 760px; } .admin-user-facts { display: grid; margin: 0; } .admin-user-facts > div { align-items: baseline; border-top: 1px solid var(--vd-line); display: grid; gap: 12px; grid-template-columns: 130px minmax(0, 1fr); padding: 10px 0; } .admin-user-facts > div:first-child { border-top: 0; } .admin-user-facts dt { color: var(--vd-ink-muted); font-size: 11px; font-weight: 650; } .admin-user-facts dd { color: var(--vd-ink); font-size: 13px; margin: 0; overflow-wrap: anywhere; } .admin-user-article-preview, .admin-user-compact-list, .admin-user-session-list, .admin-user-login-list, .admin-user-activity-list { display: grid; gap: 6px; } .admin-user-preview-row, .admin-user-compact-row, .admin-user-session-row, .admin-user-login-row, .admin-user-activity-row { align-items: center; border-top: 1px solid var(--vd-line); display: grid; gap: 10px; padding: 10px 0; } .admin-user-preview-row:first-child, .admin-user-compact-row:first-child, .admin-user-session-row:first-child, .admin-user-login-row:first-child, .admin-user-activity-row:first-child { border-top: 0; } .admin-user-preview-row { grid-template-columns: minmax(0, 1fr) auto; } .admin-user-preview-row strong, .admin-user-compact-row strong, .admin-user-session-row strong, .admin-user-login-row strong, .admin-user-activity-row strong { font-size: 13px; } .admin-user-preview-row span, .admin-user-preview-row small, .admin-user-compact-row span, .admin-user-compact-row small, .admin-user-session-row span, .admin-user-session-row small, .admin-user-login-row span, .admin-user-login-row small, .admin-user-activity-row span, .admin-user-activity-row small { color: var(--vd-ink-muted); font-size: 11px; } .admin-user-form-layout { align-items: start; } .admin-user-form-layout > .admin-user-section:first-child { grid-row: span 2; } .admin-user-form-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-user-form-grid label, .admin-user-password-field, .admin-user-transfer label { display: grid; gap: 6px; } .admin-user-form-grid label > span, .admin-user-password-field > span, .admin-user-transfer label > span { color: var(--vd-ink-muted); font-size: 11px; font-weight: 650; } .admin-user-form-grid input, .admin-user-form-grid select, .admin-user-password-field input, .admin-user-transfer select { background: var(--vd-input-bg); border: 1px solid var(--vd-line); border-radius: 4px; color: var(--vd-ink); font: inherit; font-size: 13px; min-height: 42px; padding: 8px 10px; width: 100%; } .admin-user-form-grid input[type="color"] { min-height: 42px; padding: 4px; } .admin-user-form-grid input:focus, .admin-user-form-grid select:focus, .admin-user-password-field input:focus, .admin-user-transfer select:focus { border-color: var(--vd-brand); box-shadow: 0 0 0 3px var(--vd-focus); outline: none; } .admin-user-transfer { background: var(--vd-warning-soft); border: 1px solid color-mix(in srgb, var(--vd-warning) 30%, var(--vd-line)); border-radius: 5px; display: grid; gap: 8px; margin-top: 14px; padding: 12px; } .admin-user-transfer.hidden { display: none; } .admin-user-transfer p { color: var(--vd-ink-secondary); font-size: 11px; line-height: 1.5; margin: 0; } .admin-user-form-actions { display: flex; justify-content: flex-end; margin-top: 16px; } .admin-user-password-field small { color: var(--vd-ink-muted); font-size: 11px; } .admin-user-danger-zone { border-color: color-mix(in srgb, var(--vd-danger) 30%, var(--vd-line)); } .admin-user-danger-actions { display: flex; flex-wrap: wrap; gap: 8px; } .admin-user-permission-list { display: grid; gap: 12px; } .admin-user-permission-group { border-top: 1px solid var(--vd-line); padding-top: 12px; } .admin-user-permission-group:first-child { border-top: 0; padding-top: 0; } .admin-user-permission-group h4 { font-size: 12px; margin: 0 0 8px; } .admin-user-permission-items { display: grid; gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-user-permission-item { align-items: center; background: var(--vd-surface-muted); border-radius: 4px; display: flex; font-size: 12px; gap: 8px; min-height: 36px; padding: 7px 9px; } .admin-user-permission-item::before { color: var(--vd-success); content: '✓'; font-weight: 800; } .admin-user-security-grid { align-items: start; } .admin-user-session-row { grid-template-columns: minmax(0, 1fr) auto; } .admin-user-session-meta { display: grid; gap: 2px; min-width: 0; } .admin-user-session-meta code { color: var(--vd-ink-secondary); font-size: 11px; overflow-wrap: anywhere; } .admin-user-login-row { grid-template-columns: minmax(150px, .8fr) minmax(120px, .8fr) auto; } .admin-user-login-state { border-radius: 4px; font-size: 10px; font-weight: 700; padding: 3px 6px; } .admin-user-login-state.is-success { background: var(--vd-success-soft); color: var(--vd-success); } .admin-user-login-state.is-failed { background: var(--vd-danger-soft); color: var(--vd-danger); } .admin-user-activity-row { grid-template-columns: minmax(150px, .8fr) minmax(180px, 1fr) minmax(0, 1.6fr); } .admin-user-activity-row code { color: var(--vd-ink-secondary); font-size: 11px; overflow-wrap: anywhere; } .admin-user-articles-toolbar { align-items: center; display: grid; gap: 8px; grid-template-columns: minmax(260px, 1fr) 210px auto; } .admin-user-articles-search { align-items: center; background: var(--vd-input-bg); border: 1px solid var(--vd-line); border-radius: 4px; display: grid; grid-template-columns: 34px minmax(0, 1fr); min-height: 42px; } .admin-user-articles-search > span { align-items: center; color: var(--vd-ink-muted); display: flex; justify-content: center; } .admin-user-articles-search input { background: transparent; border: 0; color: var(--vd-ink); font: inherit; font-size: 13px; min-width: 0; outline: none; padding: 8px 10px 8px 0; } .admin-user-articles-toolbar select { background: var(--vd-input-bg); border: 1px solid var(--vd-line); border-radius: 4px; color: var(--vd-ink); font: inherit; font-size: 13px; min-height: 42px; padding: 8px 10px; } .admin-user-articles-summary { color: var(--vd-ink-muted); font-size: 12px; } .admin-user-articles-list { border: 1px solid var(--vd-line); border-radius: 5px; overflow: hidden; } .admin-user-article-row { align-items: center; background: var(--vd-surface-raised); border-top: 1px solid var(--vd-line); display: grid; gap: 12px; grid-template-columns: 64px minmax(0, 1fr) minmax(150px, .55fr) auto; min-height: 82px; padding: 10px 12px; } .admin-user-article-row:first-child { border-top: 0; } .admin-user-article-row:hover { background: var(--vd-surface-hover); } .admin-user-article-thumb { align-items: center; background: var(--vd-surface-muted); border-radius: 4px; display: flex; height: 58px; justify-content: center; overflow: hidden; width: 58px; } .admin-user-article-thumb img { height: 100%; object-fit: cover; width: 100%; } .admin-user-article-thumb span { color: var(--vd-ink-muted); font-size: 10px; text-align: center; } .admin-user-article-copy { min-width: 0; } .admin-user-article-copy strong { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .admin-user-article-copy span, .admin-user-article-copy small, .admin-user-article-commerce span { color: var(--vd-ink-muted); display: block; font-size: 11px; margin-top: 3px; } .admin-user-article-commerce { text-align: right; } .admin-user-article-commerce strong { display: block; font-size: 13px; } .admin-user-article-actions { display: flex; justify-content: flex-end; } .admin-user-articles-pagination { align-items: center; display: flex; gap: 12px; justify-content: flex-end; } .admin-user-articles-pagination span { color: var(--vd-ink-muted); font-size: 12px; min-width: 100px; text-align: center; } .article-owner-link { background: none; border: 0; color: var(--vd-brand); cursor: pointer; font: inherit; font-size: 13px; font-weight: 650; padding: 0; text-align: left; } .article-owner-link:hover { text-decoration: underline; } @media (max-width: 980px) { .admin-user-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-user-kpis article:nth-child(3) { border-left: 0; border-top: 1px solid var(--vd-line); } .admin-user-kpis article:nth-child(4) { border-top: 1px solid var(--vd-line); } .admin-user-overview-grid, .admin-user-form-layout, .admin-user-security-grid { grid-template-columns: 1fr; } .admin-user-overview-primary, .admin-user-form-layout > .admin-user-section:first-child { grid-row: auto; } .admin-user-activity-row { grid-template-columns: minmax(120px, .8fr) minmax(0, 1fr); } .admin-user-activity-row > :last-child { grid-column: 1 / -1; } .admin-user-article-row { grid-template-columns: 58px minmax(0, 1fr) auto; } .admin-user-article-commerce { display: none; } } @media (max-width: 680px) { .admin-user-hero, .admin-user-articles-hero { flex-direction: column; } .admin-user-hero-actions { justify-content: flex-start; width: 100%; } .admin-user-kpis, .admin-user-articles-kpis { grid-template-columns: 1fr 1fr; } .admin-user-kpis article, .admin-user-articles-kpis article { border-left: 0; border-top: 1px solid var(--vd-line); } .admin-user-kpis article:nth-child(even), .admin-user-articles-kpis article:nth-child(even) { border-left: 1px solid var(--vd-line); } .admin-user-kpis article:nth-child(-n+2), .admin-user-articles-kpis article:nth-child(-n+2) { border-top: 0; } .admin-user-articles-kpis article:last-child { grid-column: 1 / -1; } .admin-user-form-grid, .admin-user-permission-items { grid-template-columns: 1fr; } .admin-user-articles-toolbar { grid-template-columns: 1fr; } .admin-user-login-row, .admin-user-activity-row { grid-template-columns: 1fr; gap: 4px; } .admin-user-activity-row > :last-child { grid-column: auto; } .admin-user-section { padding: 14px; } .admin-user-article-row { grid-template-columns: 52px minmax(0, 1fr) auto; padding: 9px; } .admin-user-article-thumb { height: 48px; width: 48px; } } .sessions-list .session-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--vd-surface-raised); border: 1px solid var(--vd-line); border-radius: 8px; margin-bottom: 6px; font-size: 13px; } .session-row .session-info { flex: 1; } .session-row .session-info .session-ua { font-size: 11px; color: var(--vd-ink-muted); } .session-row .session-info .session-ip { font-size: 11px; color: var(--vd-ink-muted); } .session-row .session-meta { font-size: 11px; color: var(--vd-ink-muted); text-align: right; min-width: 100px; } .audit-list { max-height: 600px; overflow-y: auto; } .audit-row { display: flex; gap: 10px; padding: 8px 12px; font-size: 12px; border-bottom: 1px solid var(--vd-line); align-items: center; } .audit-row:hover { background: var(--vd-surface-hover); } .audit-row .audit-time { min-width: 130px; color: var(--vd-ink-muted); font-size: 11px; } .audit-row .audit-user { min-width: 120px; font-weight: 500; } .audit-row .audit-action { flex: 1; } .audit-action-badge { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; } .audit-action-badge.login { background: var(--vd-info-soft); color: var(--vd-info); } .audit-action-badge.user { background: var(--vd-danger-soft); color: var(--vd-danger); } .audit-action-badge.listing { background: var(--vd-success-soft); color: var(--vd-success); } .audit-action-badge.session { background: var(--vd-warning-soft); color: var(--vd-warning); } .modal-overlay { position: fixed; inset: 0; background: color-mix(in srgb, var(--vd-ink) 56%, transparent); z-index: var(--vd-layer-modal); display: flex; align-items: center; justify-content: center; padding: 20px; } .modal-overlay.hidden { display: none; } .modal { background: var(--vd-surface-raised); border-radius: 12px; width: 100%; box-shadow: var(--vd-shadow-lg); overflow: hidden; } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--vd-line); } .modal-header h3 { font-size: 15px; } .modal-body { padding: 20px; } .modal-footer { padding: 14px 20px; border-top: 1px solid var(--vd-line); display: flex; gap: 8px; justify-content: flex-end; } .form-group { margin-bottom: 14px; } .form-group label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--vd-ink-muted); margin-bottom: 5px; } .form-group input, .form-group select { width: 100%; padding: 10px 12px; border: 1px solid var(--vd-line); border-radius: 6px; font-size: 13px; background: var(--vd-input-bg); } .form-group input:focus { outline: none; border-color: var(--vd-brand); box-shadow: 0 0 0 3px var(--vd-success-soft); } .smtp-config-form { max-width: 500px; } .smtp-status-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 18px; background: var(--vd-canvas); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-sm); font-size: 13px; font-weight: 500; } .smtp-status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; } .smtp-status-dot.configured { background: var(--vd-success); } .smtp-status-dot.not-configured { background: var(--vd-ink-muted); } .smtp-actions { display: flex; gap: 8px; margin-top: 16px; } .system-info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; } .system-info-card { background: var(--vd-surface-raised); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-md); padding: 16px; box-shadow: var(--vd-shadow-none); } .system-info-card .sys-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--vd-ink-muted); font-weight: 600; } .system-info-card .sys-value { font-size: 22px; font-weight: 700; color: var(--vd-ink); margin-top: 4px; } .system-info-card .sys-value.accent { color: var(--vd-brand); } .pw-status-badge { display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: 11px; font-weight: 600; } .pw-status-badge.has-pw { background: var(--vd-success-soft); color: var(--vd-success); } .pw-status-badge.no-pw { background: var(--vd-warning-soft); color: var(--vd-warning); } .login-history-list { max-height: 200px; overflow-y: auto; margin-top: 8px; border: 1px solid var(--vd-line); border-radius: var(--vd-radius-sm); } .login-history-item { display: flex; gap: 8px; align-items: center; padding: 6px 10px; font-size: 11px; border-bottom: 1px solid var(--vd-line); } .login-history-item:last-child { border-bottom: none; } .login-history-item .lh-time { min-width: 110px; color: var(--vd-ink-muted); } .login-history-item .lh-ip { color: var(--vd-ink-secondary); min-width: 90px; } .login-history-item .lh-status { font-weight: 600; } .login-history-item .lh-status.success { color: var(--vd-success); } .login-history-item .lh-status.failed { color: var(--vd-danger); } .user-card .pw-indicator { font-size: 10px; padding: 1px 6px; border-radius: 3px; font-weight: 600; display: inline-block; margin-left: 6px; } .pw-indicator.has-pw { background: var(--vd-success-soft); color: var(--vd-success); } .pw-indicator.no-pw { background: var(--vd-warning-soft); color: var(--vd-warning); } .pagination-bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; background: var(--vd-surface-raised); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-sm); margin-bottom: 8px; box-shadow: var(--vd-shadow-none); flex-wrap: wrap; gap: 8px; } #publish-pagination-bottom { margin-top: 8px; margin-bottom: 0; } .pagination-sizes { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--vd-ink-muted); } .page-size-btn { background: none; border: 1px solid var(--vd-line); color: var(--vd-ink-muted); padding: 3px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 500; transition: all 0.15s; } .page-size-btn:hover { border-color: var(--vd-brand); color: var(--vd-brand); } .page-size-btn.active { background: var(--vd-brand); border-color: var(--vd-brand); color: var(--vd-on-accent); } .pagination-nav { display: flex; align-items: center; gap: 8px; } .page-nav-btn { background: var(--vd-surface-raised); border: 1px solid var(--vd-line); color: var(--vd-ink); padding: 4px 12px; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 500; transition: all 0.15s; } .page-nav-btn:hover:not(:disabled) { border-color: var(--vd-brand); color: var(--vd-brand); } .page-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; } .page-info { font-size: 12px; color: var(--vd-ink-muted); font-weight: 500; min-width: 100px; text-align: center; } .trash-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; } .trash-header h2 { font-size: 16px; } .trash-actions-bar { display: flex; align-items: center; gap: 12px; } .trash-info-text { font-size: 12px; color: var(--vd-ink-muted); } .trash-list { display: flex; flex-direction: column; gap: 6px; } .trash-item { display: flex; align-items: center; gap: 12px; background: var(--vd-surface-raised); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-sm); padding: 10px 14px; transition: all 0.15s; box-shadow: var(--vd-shadow-none); opacity: 0.7; } .trash-item:hover { opacity: 1; border-color: var(--vd-line); } .trash-item .thumb-small { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: var(--vd-surface-quiet); filter: grayscale(40%); } .trash-item .item-info { flex: 1; min-width: 0; } .trash-item .item-title { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .trash-item .item-meta { font-size: 11px; color: var(--vd-ink-muted); margin-top: 2px; } .trash-item .trash-actions { display: flex; gap: 4px; align-items: center; flex-shrink: 0; } .trash-item .restore-btn { background: none; border: 1px solid var(--vd-brand); color: var(--vd-brand); padding: 3px 10px; border-radius: var(--vd-radius-sm); cursor: pointer; font-size: 11px; font-weight: 500; transition: all 0.15s; } .trash-item .restore-btn:hover { background: var(--vd-brand); color: var(--vd-on-accent); } .trash-item .perm-delete-btn { background: none; border: 1px solid var(--vd-danger); color: var(--vd-danger); padding: 3px 8px; border-radius: var(--vd-radius-sm); cursor: pointer; font-size: 11px; font-weight: 500; transition: all 0.15s; } .trash-item .perm-delete-btn:hover { background: var(--vd-danger); color: var(--vd-on-accent); } .trash-badge { display: inline-flex; align-items: center; justify-content: center; background: var(--vd-danger); color: var(--vd-on-accent); font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px; margin-left: 4px; line-height: 1; } .invite-method-radios { display: flex; flex-direction: column; gap: 8px; } .radio-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--vd-ink); } .radio-label input[type="radio"] { accent-color: var(--vd-brand); width: 16px; height: 16px; } .radio-label small { color: var(--vd-ink-muted); } .duplicate-btn { background: none; border: 1px solid var(--vd-line); color: var(--vd-ink-muted); padding: 3px 6px; border-radius: var(--vd-radius-sm); cursor: pointer; font-size: 11px; transition: all 0.15s; } .duplicate-btn:hover { color: var(--vd-brand); border-color: var(--vd-brand); } .bulk-status-options { display: flex; gap: 8px; margin-top: 12px; } .sidebar-toggle { display: none; background: none; border: none; color: var(--vd-ink); cursor: pointer; padding: 4px; } @media (max-width: 768px) { .sidebar { transform: translateX(-100%); transition: transform 0.25s ease; box-shadow: none; } .sidebar.open { transform: translateX(0); box-shadow: var(--vd-shadow-md); } .main-wrapper { margin-left: 0; } .sidebar-toggle { display: flex; } .sidebar-overlay { position: fixed; inset: 0; background: color-mix(in srgb,var(--vd-ink) 30%,transparent); z-index: 110; display: none; } .sidebar-overlay.show { display: block; } } @media (max-width: 480px) { main { padding: 14px; } .dashboard-grid { grid-template-columns: 1fr 1fr; } .admin-header { flex-direction: column; gap: 10px; align-items: flex-start; } .user-card { flex-direction: column; text-align: center; } .system-info-grid { grid-template-columns: 1fr 1fr; } .admin-tabs { flex-wrap: wrap; } .pagination-bar { flex-direction: column; } .topbar-actions { gap: 4px; } .topbar-btn span { display: none; } } .admin-user-directory-toolbar { align-items: end; display: grid; gap: 10px; grid-template-columns: minmax(260px, 1fr) minmax(150px, 190px) minmax(150px, 190px) auto; margin-bottom: 8px; } .admin-user-directory-toolbar > label { display: grid; gap: 5px; min-width: 0; } .admin-user-directory-toolbar > label > span { color: var(--vd-ink-muted); font-size: 11px; font-weight: 650; } .admin-user-directory-toolbar select { background: var(--vd-input-bg); border: 1px solid var(--vd-line); border-radius: 4px; color: var(--vd-ink); font: inherit; font-size: 13px; min-height: 42px; padding: 8px 10px; } .admin-user-directory-toolbar > .admin-user-directory-search { align-items: center; background: var(--vd-input-bg); border: 1px solid var(--vd-line); border-radius: 4px; display: grid; gap: 0; grid-template-columns: 36px minmax(0, 1fr); min-height: 42px; } .admin-user-directory-search > span { align-items: center; display: flex; justify-content: center; } .admin-user-directory-search input { background: transparent; border: 0; color: var(--vd-ink); font: inherit; font-size: 13px; min-width: 0; outline: 0; padding: 8px 10px 8px 0; } .admin-user-directory-toolbar select:focus, .admin-user-directory-search:focus-within { border-color: var(--vd-brand); box-shadow: 0 0 0 3px var(--vd-focus); outline: none; } .admin-user-directory-summary { color: var(--vd-ink-muted); font-size: 11px; margin: 0 0 10px; min-height: 17px; } .user-card { cursor: pointer; } .user-card:focus-visible { border-color: var(--vd-brand); box-shadow: 0 0 0 3px var(--vd-focus); outline: none; } .user-card-actions { flex: 0 0 auto; } @media (max-width: 900px) { .admin-user-directory-toolbar { grid-template-columns: minmax(0, 1fr) minmax(140px, .45fr) minmax(140px, .45fr); } .admin-user-directory-toolbar > .vd-button { grid-column: 1 / -1; justify-self: start; } } @media (max-width: 680px) { .admin-user-directory-toolbar { grid-template-columns: 1fr; } .admin-user-directory-toolbar > .vd-button { grid-column: auto; width: 100%; } .user-card { align-items: flex-start; text-align: left; } .user-card-actions { justify-content: flex-start; width: 100%; } } html { background: var(--vd-canvas); } body { background: var(--vd-canvas); color: var(--vd-ink); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -0.008em; } button, input, select, textarea { font: inherit; } button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--vd-focus); outline-offset: 2px; } .sidebar { width: var(--vd-sidebar-width); background: var(--vd-surface); border-right: 1px solid var(--vd-line); padding: 0; overflow: hidden; } .sidebar-header { height: var(--vd-topbar-height); padding: 0 22px; display: flex; align-items: center; border-bottom: 1px solid var(--vd-line); } .sidebar-logo { gap: 9px; color: var(--vd-brand); } .logo-mark { flex: 0 0 auto; } .logo-text { color: var(--vd-ink); font-size: 18px; font-weight: 750; letter-spacing: -0.045em; } .sidebar-nav { padding: 14px 10px 8px; } .nav-group { padding: 0; } .nav-group-primary { display: flex; flex-direction: column; gap: 5px; } .nav-group-tools { margin-top: 14px; display: flex; flex-direction: column; gap: 3px; } .nav-divider { height: 1px; background: var(--vd-line); margin: 2px 10px 12px; } .nav-item { gap: 11px; min-height: 42px; padding: 0 12px; border-radius: var(--vd-radius-sm); color: var(--vd-ink-secondary); font-size: 13px; font-weight: 540; position: relative; } .nav-item::before { content: ""; position: absolute; left: -10px; width: 2px; height: 22px; border-radius: 2px; background: transparent; } .nav-item svg { opacity: .78; } .nav-item:hover { background: var(--vd-surface-muted); color: var(--vd-ink); } .nav-item.active { color: var(--vd-brand); background: var(--vd-brand-soft); font-weight: 650; } .nav-item.active::before { background: var(--vd-brand); } .nav-item.active svg { color: var(--vd-brand); } .nav-item-quiet { min-height: 36px; font-size: 12px; } .nav-badge { margin-left: auto; background: var(--vd-danger); } .sidebar-footer { padding: 10px; border-top: 1px solid var(--vd-line); background: var(--vd-surface); gap: 6px; } .sidebar-user { padding: 6px; gap: 8px; } .sidebar-user-avatar, .topbar-avatar { background: var(--vd-ink); color: var(--vd-surface-raised); } .sidebar-user-info { display: none; } .sidebar-logout { margin-left: auto; } .sidebar-footer .theme-toggle { height: 34px; justify-content: flex-start; padding: 0 9px; gap: 9px; border: 0; background: transparent; color: var(--vd-ink-muted); font-size: 12px; } .sidebar-footer .theme-toggle:hover { background: var(--vd-surface-muted); color: var(--vd-ink); } .main-wrapper { margin-left: var(--vd-sidebar-width); } .topbar { min-height: var(--vd-topbar-height); height: var(--vd-topbar-height); padding: 0 22px 0 26px; background: color-mix(in srgb, var(--vd-surface) 94%, transparent); border-bottom: 1px solid var(--vd-line); backdrop-filter: blur(14px); gap: 22px; } .topbar-context { display: flex; align-items: center; gap: 10px; min-width: 185px; } .topbar-context-icon { width: 28px; height: 28px; display: grid; place-items: center; color: var(--vd-ink-secondary); } .topbar-heading { display: flex; align-items: baseline; gap: 9px; } .topbar-title { font-size: 14px; font-weight: 700; letter-spacing: -0.025em; white-space: nowrap; } .topbar-kicker { font-size: 11px; color: var(--vd-ink-muted); white-space: nowrap; } .command-search { width: min(470px, 42vw); height: 36px; border: 1px solid var(--vd-line); border-radius: var(--vd-radius-sm); background: var(--vd-surface-muted); color: var(--vd-ink-muted); display: flex; align-items: center; gap: 9px; padding: 0 9px 0 12px; cursor: pointer; text-align: left; } .command-search:hover { border-color: var(--vd-line-strong); color: var(--vd-ink-secondary); } .command-search span { flex: 1; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .command-search kbd { min-width: 34px; padding: 2px 5px; border: 1px solid var(--vd-line); border-radius: var(--vd-radius-xs); background: var(--vd-surface-raised); color: var(--vd-ink-muted); font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; } .topbar-actions { margin-left: auto; gap: 7px; } .topbar-btn { height: 36px; border-radius: var(--vd-radius-sm); padding: 0 14px; border-color: var(--vd-line); background: var(--vd-surface-raised); color: var(--vd-ink-secondary); } .topbar-btn.primary { background: var(--vd-brand); border-color: var(--vd-brand); box-shadow: 0 5px 14px var(--vd-brand-soft); } .topbar-btn.primary:hover { background: var(--vd-brand-strong); border-color: var(--vd-brand-strong); } .topbar-icon-btn { width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: transparent; color: var(--vd-ink-secondary); border-radius: 50%; position: relative; cursor: pointer; } .topbar-icon-btn:hover { background: var(--vd-surface-muted); color: var(--vd-ink); } .topbar-dot { position: absolute; top: 6px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--vd-brand); box-shadow: 0 0 0 2px var(--vd-surface); } .topbar-avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 750; } main { max-width: none; margin: 0; padding: 20px 24px 28px; } .page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 14px; } .page-heading h2 { font-size: 22px; line-height: 1.15; letter-spacing: -0.045em; } .page-heading p { margin-top: 5px; color: var(--vd-ink-secondary); font-size: 12px; } .eyebrow { margin: 0 0 7px; color: var(--vd-brand); font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .12em; } .studio-flow-page { min-width: 0; } .studio-summary { display: flex; align-items: center; gap: 14px; color: var(--vd-ink-muted); font-size: 11px; } .studio-summary strong { color: var(--vd-ink); font-size: 13px; } .studio-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; } .studio-workspace { min-width: 0; } .flow-board-wrap { overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; scrollbar-color: var(--vd-line-strong) transparent; } .flow-board { min-width: 1010px; display: grid; grid-template-columns: repeat(6, minmax(150px, 1fr)); gap: 10px; } .flow-column { min-width: 0; } .flow-column-header { min-height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 4px 7px; border-bottom: 1px solid var(--vd-line); position: relative; } .flow-column:not(:last-child) .flow-column-header::after { content: "→"; position: absolute; right: -10px; top: 7px; color: var(--vd-ink-muted); font-size: 10px; z-index: 2; } .flow-column-title { font-size: 11px; font-weight: 720; color: var(--vd-ink); } .flow-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center; background: var(--vd-surface-muted); color: var(--vd-ink-muted); font-size: 10px; font-weight: 700; } .flow-column-list { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; } .flow-card { width: 100%; padding: 6px; border: 1px solid var(--vd-line); border-radius: var(--vd-radius-sm); background: var(--vd-surface-raised); color: var(--vd-ink); text-align: left; cursor: pointer; transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; } .flow-card:hover { border-color: var(--vd-line-strong); transform: translateY(-1px); box-shadow: var(--vd-shadow-soft); } .flow-card.selected { border-color: var(--vd-brand); box-shadow: 0 0 0 2px var(--vd-brand-soft); } .flow-card-media { aspect-ratio: 1.45; overflow: hidden; border-radius: 6px; background: var(--vd-surface-muted); margin-bottom: 7px; position: relative; } .flow-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .flow-card-placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: var(--vd-ink-muted); } .flow-card-title { min-height: 30px; font-size: 11px; line-height: 1.32; font-weight: 680; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .flow-card-sku { margin-top: 4px; color: var(--vd-ink-muted); font: 9px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; overflow: hidden; text-overflow: ellipsis; } .flow-card-footer { margin-top: 7px; display: flex; align-items: center; gap: 5px; min-height: 20px; } .flow-platform { font-size: 9px; font-weight: 780; text-transform: uppercase; letter-spacing: .025em; } .flow-price { margin-left: auto; font-size: 10px; font-weight: 730; white-space: nowrap; } .flow-state { margin-left: auto; min-height: 19px; padding: 2px 7px; border-radius: 10px; background: var(--vd-surface-muted); color: var(--vd-ink-secondary); font-size: 9px; font-weight: 700; white-space: nowrap; } .flow-state.success { background: var(--vd-success-soft); color: var(--vd-success); } .flow-state.warning { background: var(--vd-warning-soft); color: var(--vd-warning); } .flow-state.brand { background: var(--vd-brand-soft); color: var(--vd-brand); } .flow-progress { --progress: 0%; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--vd-brand) var(--progress), var(--vd-surface-muted) 0); position: relative; } .flow-progress::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--vd-surface-raised); } .flow-progress span { position: relative; z-index: 1; font-size: 8px; font-weight: 760; } .flow-empty { min-height: 116px; border: 1px dashed var(--vd-line); border-radius: var(--vd-radius-sm); display: grid; place-items: center; color: var(--vd-ink-muted); font-size: 10px; text-align: center; padding: 12px; } .studio-bottom-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 12px; margin-top: 14px; } .work-panel { border: 1px solid var(--vd-line); border-radius: var(--vd-radius-sm); background: var(--vd-surface-raised); min-width: 0; } .work-panel-header { min-height: 44px; padding: 0 13px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--vd-line); } .work-panel-header > div { display: flex; align-items: center; gap: 8px; } .work-panel-header h3 { font-size: 12px; letter-spacing: -0.02em; } .panel-icon { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 800; } .panel-icon-warning { color: var(--vd-danger); border: 1px solid var(--vd-danger); } .panel-count { min-width: 22px; height: 20px; border-radius: 10px; background: var(--vd-surface-muted); display: grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--vd-ink-muted); } .text-action { border: 0; background: transparent; color: var(--vd-brand); font-size: 10px; cursor: pointer; } .attention-list, .activity-list { padding: 5px 12px; } .attention-item { min-height: 47px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; border-bottom: 1px solid var(--vd-line); } .attention-item:last-child, .activity-item:last-child { border-bottom: 0; } .attention-thumb { width: 34px; height: 34px; border-radius: 5px; background: var(--vd-surface-muted); object-fit: cover; } .attention-copy { min-width: 0; } .attention-title { font-size: 10px; font-weight: 680; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .attention-meta { margin-top: 2px; font-size: 9px; color: var(--vd-ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .attention-action { height: 26px; padding: 0 9px; border: 1px solid var(--vd-line); border-radius: 6px; background: var(--vd-surface-raised); color: var(--vd-ink-secondary); font-size: 9px; font-weight: 650; cursor: pointer; } .attention-action:hover { border-color: var(--vd-brand); color: var(--vd-brand); } .activity-item { min-height: 39px; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; border-bottom: 1px solid var(--vd-line); } .activity-icon { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--vd-surface-muted); color: var(--vd-ink-secondary); font-size: 9px; } .activity-copy { font-size: 10px; color: var(--vd-ink-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .activity-time { font-size: 9px; color: var(--vd-ink-muted); white-space: nowrap; } .studio-inspector { position: sticky; top: calc(var(--vd-topbar-height) + 20px); max-height: calc(100vh - var(--vd-topbar-height) - 40px); overflow-y: auto; border: 1px solid var(--vd-line); border-radius: var(--vd-radius-sm); background: var(--vd-surface-raised); scrollbar-width: thin; } .inspector-empty { min-height: 520px; display: grid; place-content: center; justify-items: center; text-align: center; padding: 28px; color: var(--vd-ink-muted); } .inspector-empty-mark { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--vd-surface-muted); margin-bottom: 14px; } .inspector-empty h3 { color: var(--vd-ink); font-size: 14px; } .inspector-empty p { margin-top: 7px; max-width: 210px; font-size: 11px; line-height: 1.5; } .inspector-content { padding: 10px; } .inspector-hero { aspect-ratio: 1.42; border-radius: 7px; overflow: hidden; background: var(--vd-surface-muted); } .inspector-hero img { width: 100%; height: 100%; object-fit: cover; display: block; } .inspector-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 6px; } .inspector-thumbs img { width: 100%; aspect-ratio: 1; border-radius: 5px; object-fit: cover; background: var(--vd-surface-muted); } .inspector-title-row { padding: 14px 2px 10px; } .inspector-title-row h3 { font-size: 15px; line-height: 1.35; letter-spacing: -0.025em; } .inspector-sku { margin-top: 5px; color: var(--vd-ink-muted); font: 9px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; } .inspector-price-row { display: flex; align-items: center; gap: 8px; padding: 0 2px 12px; } .inspector-platform { font-size: 10px; font-weight: 800; text-transform: uppercase; } .inspector-price { margin-left: auto; font-size: 18px; font-weight: 760; letter-spacing: -0.04em; } .inspector-card { margin-top: 8px; padding: 12px; border: 1px solid var(--vd-line); border-radius: 7px; } .inspector-card h4 { margin-bottom: 9px; font-size: 10px; color: var(--vd-ink-secondary); } .confidence-row { display: flex; align-items: center; gap: 10px; } .confidence-ring { --vd-runtime-confidence: 0%; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--vd-success) var(--vd-runtime-confidence), var(--vd-surface-muted) 0); position: relative; } .confidence-ring::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--vd-surface-raised); } .confidence-ring span { position: relative; z-index: 1; font-size: 10px; font-weight: 780; } .confidence-copy strong { display: block; color: var(--vd-success); font-size: 10px; } .confidence-copy span { display: block; margin-top: 2px; color: var(--vd-ink-muted); font-size: 9px; line-height: 1.4; } .attribute-list { display: grid; grid-template-columns: 72px 1fr; gap: 6px 9px; font-size: 9px; } .attribute-list dt { color: var(--vd-ink-muted); } .attribute-list dd { color: var(--vd-ink-secondary); overflow-wrap: anywhere; } .price-range { font-size: 15px; font-weight: 730; letter-spacing: -0.03em; } .recommended-price { display: flex; justify-content: space-between; margin-top: 7px; color: var(--vd-ink-muted); font-size: 9px; } .recommended-price strong { color: var(--vd-ink); font-size: 12px; } .inspector-actions { display: grid; gap: 6px; margin-top: 9px; } .inspector-action { min-height: 36px; border: 1px solid var(--vd-line); border-radius: 7px; background: var(--vd-surface-raised); color: var(--vd-ink-secondary); font-size: 11px; font-weight: 650; cursor: pointer; } .inspector-action:hover { border-color: var(--vd-brand); color: var(--vd-brand); } .inspector-action.primary { background: var(--vd-brand); border-color: var(--vd-brand); color: var(--vd-on-accent); } .inspector-action.primary:hover { background: var(--vd-brand-strong); color: var(--vd-on-accent); } .dropzone, .meta-section, .result-section, .chart-card, .stat-card, .admin-card, .settings-card { box-shadow: none; } input, select, textarea, .model-select, .result-input, .result-textarea, .meta-input { border-color: var(--vd-line); background: var(--vd-surface-raised); } input:focus, select:focus, textarea:focus, .model-select:focus, .result-input:focus, .result-textarea:focus, .meta-input:focus { border-color: var(--vd-brand); box-shadow: 0 0 0 3px var(--vd-focus); } .primary-btn { background: var(--vd-brand); box-shadow: none; } .primary-btn:hover { background: var(--vd-brand-strong); } .secondary-btn, .small-btn { background: var(--vd-surface-raised); border-color: var(--vd-line); } @media (max-width: 1180px) { .studio-layout { grid-template-columns: minmax(0, 1fr); } .studio-inspector { position: static; max-height: none; } .inspector-empty { min-height: 180px; } .inspector-content { display: grid; grid-template-columns: minmax(240px, .85fr) 1.15fr; gap: 12px; } .inspector-content > * { min-width: 0; } } @media (max-width: 860px) { :root { --vd-sidebar-width: 148px; } .command-search { width: min(320px, 38vw); } .topbar-kicker { display: none; } .studio-bottom-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .main-wrapper { margin-left: 0; } .topbar { padding: 0 12px; gap: 8px; } .topbar-context { min-width: 0; } .topbar-context-icon { display: none; } .command-search { flex: 1; width: auto; } .command-search span { display: none; } .command-search kbd { display: none; } .topbar-icon-btn, .topbar-avatar { display: none; } main { padding: 16px 14px 24px; } .studio-heading { align-items: flex-start; flex-direction: column; } .flow-board { min-width: 940px; } .inspector-content { display: block; } } @media (max-width: 520px) { .topbar-btn.primary { width: 36px; padding: 0; justify-content: center; } .topbar-btn.primary span { display: none; } .topbar-title { max-width: 112px; overflow: hidden; text-overflow: ellipsis; } .page-heading h2 { font-size: 20px; } .studio-summary { flex-wrap: wrap; } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .flow-card-media, .inspector-hero, .attention-thumb { background: linear-gradient(145deg, var(--vd-surface-raised), var(--vd-surface-muted)); } .flow-card-media { display: grid; place-items: center; padding: 7px; } .flow-card-media img, .inspector-hero img { width: 100%; height: 100%; object-fit: contain; object-position: center; } .inspector-hero { display: grid; place-items: center; padding: 12px; } .attention-thumb { object-fit: contain; object-position: center; padding: 3px; } body.print-studio-open { overflow: hidden; } body.print-studio-active { --vd-print-page-width: 210mm; --vd-print-page-height: 297mm; --vd-print-page-padding: 10mm; } body.print-studio-active[data-print-format="a5"] { --vd-print-page-width: 148mm; --vd-print-page-height: 210mm; --vd-print-page-padding: 8mm; } .print-studio { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 22px; } .print-studio-backdrop { position: absolute; inset: 0; background: color-mix(in srgb,var(--vd-ink) 56%,transparent); backdrop-filter: blur(9px); } .print-studio-shell { position: relative; width: min(1380px, 96vw); height: min(900px, 94vh); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border: 1px solid var(--vd-line); border-radius: 18px; background: var(--vd-surface-raised); box-shadow: var(--vd-shadow-lg); } .print-studio-header, .print-studio-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 20px; border-color: var(--vd-line); background: var(--vd-surface-raised); } .print-studio-header { border-bottom: 1px solid var(--vd-line); } .print-studio-footer { border-top: 1px solid var(--vd-line); justify-content: flex-end; } .print-studio-kicker { display: block; margin-bottom: 2px; color: var(--vd-brand); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .print-studio-header h2 { margin: 0; font-size: 20px; letter-spacing: -.03em; } .print-studio-close { width: 36px; height: 36px; border: 1px solid var(--vd-line); border-radius: 50%; background: var(--vd-surface); color: var(--vd-ink-secondary); font-size: 23px; line-height: 1; cursor: pointer; } .print-studio-close:hover { border-color: var(--vd-line-strong); color: var(--vd-ink); } .print-studio-layout { min-height: 0; display: grid; grid-template-columns: 260px minmax(0, 1fr); } .print-studio-controls { padding: 20px; overflow-y: auto; border-right: 1px solid var(--vd-line); background: var(--vd-surface); } .print-control-group { display: flex; align-items: center; gap: 11px; padding: 13px; margin-bottom: 20px; border: 1px solid var(--vd-line); border-radius: 11px; background: var(--vd-surface-raised); } .print-control-group > div { min-width: 0; display: grid; gap: 2px; } .print-control-group strong { font-size: 13px; } .print-control-group span:not(.print-summary-icon) { color: var(--vd-ink-muted); font-size: 10px; } .print-summary-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; background: var(--vd-brand-soft); color: var(--vd-brand); font-size: 18px; font-weight: 800; } .print-mode-options { display: grid; gap: 7px; margin-bottom: 20px; } .print-mode-options button { min-height: 46px; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid var(--vd-line); border-radius: 9px; background: var(--vd-surface-raised); color: var(--vd-ink-secondary); font: inherit; text-align: left; cursor: pointer; } .print-mode-options button > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--vd-surface-muted); color: var(--vd-ink-muted); font-size: 9px; font-weight: 900; letter-spacing: .04em; } .print-mode-options button > strong { font-size: 11px; } .print-mode-options button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--vd-brand) 45%, var(--vd-line)); background: var(--vd-brand-soft); color: var(--vd-brand); } .print-mode-options button[aria-pressed="true"] > span { background: var(--vd-brand); color: var(--vd-surface-raised); } .print-control-field { display: grid; gap: 7px; margin-bottom: 16px; } .print-control-field > span, .print-control-check > span { color: var(--vd-ink-secondary); font-size: 10px; font-weight: 700; } .print-control-field select, .print-control-field input { width: 100%; min-height: 40px; border: 1px solid var(--vd-line); border-radius: 8px; background: var(--vd-surface-raised); color: var(--vd-ink); padding: 0 11px; font: inherit; font-size: 11px; } .print-control-field select:focus, .print-control-field input:focus { outline: 2px solid var(--vd-brand-soft); border-color: var(--vd-brand); } .print-control-check { display: flex; align-items: center; gap: 9px; padding: 11px 0; cursor: pointer; } .print-control-check input { width: 16px; height: 16px; accent-color: var(--vd-brand); } .print-unsaved-note { display: grid; gap: 4px; margin-top: 14px; padding: 12px; border: 1px solid color-mix(in srgb, var(--vd-warning) 36%, var(--vd-line)); border-radius: 9px; background: color-mix(in srgb, var(--vd-warning-soft) 76%, var(--vd-surface)); } .print-unsaved-note strong { color: var(--vd-warning); font-size: 10px; } .print-unsaved-note span { color: var(--vd-ink-secondary); font-size: 9px; line-height: 1.45; } .print-hint { display: grid; gap: 5px; margin-top: 24px; padding: 13px; border-left: 3px solid var(--vd-brand); background: var(--vd-brand-soft); } .print-hint strong { font-size: 11px; } .print-hint span { color: var(--vd-ink-secondary); font-size: 10px; line-height: 1.5; } .print-preview-pane { min-width: 0; overflow: auto; padding: 0 24px 36px; background: linear-gradient(90deg, transparent 23px, color-mix(in srgb,var(--vd-ink-muted) 8%,transparent) 24px, transparent 25px), linear-gradient(0deg, transparent 23px, color-mix(in srgb,var(--vd-ink-muted) 8%,transparent) 24px, transparent 25px), var(--vd-surface-muted); background-size: 24px 24px; } .print-preview-toolbar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; margin: 0 -24px 24px; padding: 12px 24px; border-bottom: 1px solid var(--vd-line); background: color-mix(in srgb, var(--vd-surface-muted) 90%, transparent); backdrop-filter: blur(10px); color: var(--vd-ink-muted); font-size: 10px; } .print-preview-toolbar span:first-child { color: var(--vd-ink); font-weight: 700; } .print-preview-pages { display: grid; justify-items: center; gap: 28px; } .print-page { width: 794px; min-height: 1123px; padding: 38px; overflow: hidden; background: var(--vd-paper); color: var(--vd-print-ink); box-shadow: var(--vd-shadow-md); } .print-page.flyer-page-a5 { width: 560px; min-height: 794px; padding: 30px; } .print-label-grid { display: grid; width: 100%; height: 100%; align-content: start; } .standard-labels .print-label-grid { grid-template-columns: repeat(2, 340px); grid-auto-rows: 177px; gap: 23px 34px; } .compact-labels .print-label-grid { grid-template-columns: repeat(3, 217px); grid-auto-rows: 101px; gap: 8px 18px; } .print-label-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 15px; overflow: hidden; border: 1px solid var(--vd-print-line); background: var(--vd-paper); padding: 15px 16px 15px 21px; } .print-label-accent { position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--vd-print-brand); } .print-label-qr img { display: block; width: 106px; height: 106px; } .print-label-copy { min-width: 0; display: grid; align-content: center; gap: 4px; } .print-label-brand { color: var(--vd-print-brand); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .print-label-sku { font-size: 21px; font-weight: 850; letter-spacing: -.035em; } .print-label-title { min-height: 31px; overflow: hidden; font-size: 11px; font-weight: 650; line-height: 1.35; } .print-label-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--vd-print-ink-muted); font-size: 9px; } .print-label-meta strong { color: var(--vd-print-ink); font-size: 12px; } .compact-labels .print-label-card { gap: 7px; padding: 7px 8px 7px 11px; } .compact-labels .print-label-accent { width: 3px; } .compact-labels .print-label-qr img { width: 62px; height: 62px; } .compact-labels .print-label-brand { font-size: 6px; } .compact-labels .print-label-sku { font-size: 12px; } .compact-labels .print-label-title { min-height: 20px; font-size: 7px; } .compact-labels .print-label-meta { font-size: 6px; } .compact-labels .print-label-meta strong { font-size: 8px; } .print-datasheet { min-height: 100%; display: grid; align-content: start; gap: 24px; } .print-datasheet-header { display: flex; justify-content: space-between; gap: 30px; padding-bottom: 22px; border-bottom: 4px solid var(--vd-print-brand); } .print-datasheet-brand { display: block; margin-bottom: 7px; color: var(--vd-print-brand); font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; } .print-datasheet h1 { max-width: 570px; margin: 0; font-size: 29px; line-height: 1.15; letter-spacing: -.04em; } .print-datasheet-sku { margin-top: 9px; color: var(--vd-print-ink-secondary); font-size: 16px; font-weight: 750; } .print-datasheet-qr { width: 118px; height: 118px; } .print-datasheet-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .print-datasheet-photos > div { aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--vd-print-line); background: var(--vd-print-surface); padding: 8px; } .print-datasheet-photos img { width: 100%; height: 100%; object-fit: contain; } .print-datasheet-description { padding: 17px 19px; border-left: 4px solid var(--vd-print-brand); background: var(--vd-print-surface); } .print-datasheet-description h2 { margin: 0 0 7px; font-size: 13px; } .print-datasheet-description p { margin: 0; color: var(--vd-print-body); font-size: 11px; line-height: 1.65; } .print-datasheet-meta { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--vd-print-line); } .print-datasheet-meta > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--vd-print-line); } .print-datasheet-meta > div:nth-child(odd) { padding-right: 20px; } .print-datasheet-meta > div:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--vd-print-line); } .print-datasheet-meta span { color: var(--vd-print-ink-muted); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } .print-datasheet-meta strong { font-size: 11px; } .print-sales-flyer { min-height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto; gap: 18px; } .print-flyer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 13px; border-bottom: 1px solid var(--vd-print-line); } .print-flyer-header > div { display: grid; gap: 3px; } .print-flyer-brand { color: var(--vd-print-brand); font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; } .print-flyer-reference, .print-flyer-platform { color: var(--vd-print-ink-muted); font-size: 9px; font-weight: 700; } .print-flyer-platform { padding: 5px 9px; border: 1px solid var(--vd-print-line); border-radius: 999px; } .print-flyer-visual { position: relative; min-height: 0; display: grid; place-items: center; overflow: hidden; border-radius: 4px; background: var(--vd-print-surface); } .print-flyer-visual > img { width: 100%; height: 100%; max-height: 560px; object-fit: contain; padding: 18px; } .print-flyer-placeholder { color: var(--vd-print-ink-muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .print-flyer-price { position: absolute; right: 14px; bottom: 14px; padding: 9px 13px; border-radius: 999px; background: var(--vd-print-ink); color: var(--vd-paper); font-size: 20px; letter-spacing: -.04em; } .print-flyer-copy { display: grid; gap: 8px; } .print-flyer-eyebrow { color: var(--vd-print-brand); font-size: 9px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; } .print-flyer-copy h1 { margin: 0; font-size: 29px; line-height: 1.08; letter-spacing: -.045em; } .print-flyer-facts { display: flex; flex-wrap: wrap; gap: 6px; } .print-flyer-facts span { padding: 5px 8px; border: 1px solid var(--vd-print-line); border-radius: 999px; color: var(--vd-print-ink-secondary); font-size: 8px; font-weight: 700; } .print-flyer-description { margin: 0; color: var(--vd-print-body); font-size: 10px; line-height: 1.55; } .print-flyer-supporting { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .print-flyer-supporting img { width: 100%; height: 126px; object-fit: contain; padding: 7px; background: var(--vd-print-surface); } .print-flyer-footer { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding-top: 13px; border-top: 3px solid var(--vd-print-brand); } .print-flyer-footer > div:first-child { display: grid; gap: 3px; } .print-flyer-footer span { color: var(--vd-print-ink-muted); font-size: 8px; font-weight: 700; } .print-flyer-footer strong { font-size: 13px; } .print-flyer-code { display: flex; align-items: center; gap: 8px; } .print-flyer-code img { width: 48px; height: 48px; } .flyer-page-a5 .print-sales-flyer { gap: 12px; } .flyer-page-a5 .print-flyer-visual > img { max-height: 360px; padding: 12px; } .flyer-page-a5 .print-flyer-copy h1 { font-size: 23px; } .flyer-page-a5 .print-flyer-price { right: 10px; bottom: 10px; font-size: 17px; } .flyer-page-a5 .print-flyer-supporting { display: none; } .flyer-page-a5 .print-flyer-description { font-size: 8px; } .flyer-page-a5 .print-flyer-code img { width: 40px; height: 40px; } .print-inventory-sheet { min-height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 20px; } .print-inventory-header { display: flex; justify-content: space-between; gap: 24px; padding-bottom: 17px; border-bottom: 4px solid var(--vd-print-brand); } .print-inventory-header > div { display: grid; align-content: start; gap: 4px; } .print-inventory-header > div:last-child { justify-items: end; text-align: right; } .print-inventory-header span { color: var(--vd-print-ink-muted); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .print-inventory-header h1 { margin: 0; font-size: 26px; letter-spacing: -.04em; } .print-inventory-header p { margin: 0; color: var(--vd-print-body); font-size: 9px; } .print-inventory-header strong { font-size: 14px; } .print-inventory-table { align-self: start; border: 1px solid var(--vd-print-line); border-bottom: 0; } .print-inventory-row { min-height: 43px; display: grid; grid-template-columns: 48px 92px minmax(0, 1fr) 72px 74px 100px; align-items: center; border-bottom: 1px solid var(--vd-print-line); } .print-inventory-row > * { min-width: 0; padding: 7px 8px; overflow: hidden; border-left: 1px solid var(--vd-print-line); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; } .print-inventory-row > *:first-child { border-left: 0; } .print-inventory-table-head { min-height: 30px; background: var(--vd-print-surface); } .print-inventory-table-head span { color: var(--vd-print-ink-muted); font-size: 7px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; } .print-inventory-check { width: 12px; height: 12px; justify-self: center; padding: 0; border: 1px solid var(--vd-print-ink-muted); } .print-inventory-footer { display: flex; justify-content: space-between; gap: 20px; padding-top: 10px; border-top: 1px solid var(--vd-print-line); color: var(--vd-print-ink-muted); font-size: 8px; } @media (max-width: 1050px) { .print-studio { padding: 10px; } .print-studio-shell { width: 100%; height: 100%; border-radius: 12px; } .print-studio-layout { grid-template-columns: 220px minmax(0, 1fr); } .print-page { transform: scale(.78); transform-origin: top center; margin-bottom: -247px; } .print-page.flyer-page-a5 { margin-bottom: -175px; } } @media (max-width: 720px) { .print-studio-layout { grid-template-columns: 1fr; } .print-studio-controls { border-right: 0; border-bottom: 1px solid var(--vd-line); max-height: 220px; } .print-preview-pane { min-height: 0; } .print-page { transform: scale(.55); margin-bottom: -505px; } .print-page.flyer-page-a5 { margin-bottom: -355px; } } @media print { @page { size: A4 portrait; margin: 0; } body.print-studio-active { display: block !important; background: var(--vd-paper) !important; } body.print-studio-active > *:not(#print-studio) { display: none !important; } body.print-studio-active #print-studio { position: static !important; display: block !important; padding: 0 !important; background: var(--vd-paper) !important; } body.print-studio-active .print-studio-backdrop, body.print-studio-active .print-studio-header, body.print-studio-active .print-studio-controls, body.print-studio-active .print-preview-toolbar, body.print-studio-active .print-studio-footer { display: none !important; } body.print-studio-active .print-studio-shell, body.print-studio-active .print-studio-layout, body.print-studio-active .print-preview-pane, body.print-studio-active .print-preview-pages { display: block !important; width: auto !important; height: auto !important; overflow: visible !important; padding: 0 !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; background: var(--vd-paper) !important; } body.print-studio-active .print-page { width: var(--vd-print-page-width) !important; min-height: var(--vd-print-page-height) !important; padding: var(--vd-print-page-padding) !important; margin: 0 !important; transform: none !important; box-shadow: none !important; break-after: page; page-break-after: always; } body.print-studio-active .print-page:last-child { break-after: auto; page-break-after: auto; } body.print-studio-active .standard-labels .print-label-grid { grid-template-columns: repeat(2, 90mm) !important; grid-auto-rows: 50mm !important; gap: 5mm 5mm !important; } body.print-studio-active .compact-labels .print-label-grid { grid-template-columns: repeat(3, 62mm) !important; grid-auto-rows: 29mm !important; gap: 1.6mm 2mm !important; } } .quality-spark { color: var(--vd-brand); } .field-count { color: var(--vd-ink-muted); font-size: 8px; } .publish-center-page { padding-bottom: 22px; } .publish-center-heading { align-items: flex-end; } .publish-heading-actions { display: flex; align-items: center; gap: 7px; } .publish-view-tabs { display: flex; align-items: flex-end; gap: 2px; margin: 10px 0 0; padding: 0 2px; overflow-x: auto; border-bottom: 1px solid var(--vd-line); scrollbar-width: none; } .publish-view-tabs::-webkit-scrollbar { display: none; } .publish-view-tab { min-height: 42px; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--vd-ink-muted); font-size: 10px; font-weight: 680; white-space: nowrap; cursor: pointer; } .publish-view-tab:hover { color: var(--vd-ink); background: var(--vd-surface-muted); } .publish-view-tab.active { color: var(--vd-ink); border-bottom-color: var(--vd-brand); background: var(--vd-surface-raised); } .publish-tab-count, .publish-tab-badge { min-width: 18px; height: 18px; display: inline-grid; place-items: center; padding: 0 5px; border-radius: 999px; background: var(--vd-surface-muted); color: var(--vd-ink-secondary); font-size: 8px; font-weight: 760; } .publish-tab-badge { background: var(--vd-brand-soft); color: var(--vd-brand); } .publish-view-tab.active .publish-tab-count { background: var(--vd-brand-soft); color: var(--vd-brand); } .publish-center-grid { min-height: 680px; display: grid; grid-template-columns: 264px minmax(0, 1fr) 282px; border: 1px solid var(--vd-line); border-top: 0; border-radius: 0 0 var(--vd-radius-md) var(--vd-radius-md); overflow: hidden; background: var(--vd-surface-raised); } .publish-list-panel, .publish-status-rail, .publish-workspace-panel { min-width: 0; min-height: 0; } .publish-list-panel { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; border-right: 1px solid var(--vd-line); background: var(--vd-surface); } .publish-list-panel-head, .publish-rail-heading, .publish-operation-header, .publish-workspace-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .publish-list-panel-head { padding: 14px 14px 11px; } .publish-panel-kicker { display: block; margin-bottom: 2px; color: var(--vd-ink-muted); font-size: 7.5px; font-weight: 780; letter-spacing: .1em; text-transform: uppercase; } .publish-list-panel-head h3, .publish-rail-heading h3, .publish-operation-header h3, .publish-workspace-header h3 { margin: 0; color: var(--vd-ink); font-size: 13px; letter-spacing: -.015em; } .publish-list-panel-head h3 span { color: var(--vd-ink-muted); font-weight: 560; } .publish-list-panel-head select { max-width: 112px; min-height: 30px; padding: 0 24px 0 8px; border: 1px solid var(--vd-line); border-radius: 7px; background: var(--vd-surface-raised); color: var(--vd-ink-secondary); font-size: 8px; } .publish-list-filters { padding: 0 12px 11px; display: grid; gap: 7px; border-bottom: 1px solid var(--vd-line); } .publish-search-field { min-height: 36px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--vd-line); border-radius: 8px; background: var(--vd-surface-raised); color: var(--vd-ink-muted); } .publish-search-field:focus-within { border-color: var(--vd-brand); box-shadow: 0 0 0 3px var(--vd-focus); } .publish-search-field input { min-width: 0; border: 0; outline: 0; background: transparent; color: var(--vd-ink); font: 9px/1 inherit; } .publish-filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .publish-filter-row select { min-width: 0; min-height: 32px; padding: 0 22px 0 8px; border: 1px solid var(--vd-line); border-radius: 7px; background: var(--vd-surface-raised); color: var(--vd-ink-secondary); font-size: 8px; } .publish-selection-bar { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--vd-line); color: var(--vd-ink-muted); font-size: 8px; } .publish-selection-bar label { display: inline-flex; align-items: center; gap: 6px; color: var(--vd-ink-secondary); cursor: pointer; } .publish-selection-bar input, .publish-card-check input { accent-color: var(--vd-brand); } .publish-center-page .publish-list { display: flex; flex-direction: column; gap: 5px; padding: 8px; overflow-y: auto; scrollbar-width: thin; } .publish-list-card { position: relative; display: grid; grid-template-columns: 16px 54px minmax(0, 1fr); gap: 8px; align-items: center; min-height: 76px; padding: 8px; border: 1px solid transparent; border-radius: 9px; background: var(--vd-surface-raised); cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; } .publish-list-card:hover { border-color: var(--vd-line-strong); transform: translateY(-1px); } .publish-list-card.is-active { border-color: var(--vd-brand); background: var(--vd-brand-soft); } .publish-card-check { align-self: start; padding-top: 4px; cursor: pointer; } .publish-card-media { width: 54px; height: 58px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--vd-line); border-radius: 7px; background: var(--vd-surface-muted); color: var(--vd-ink-muted); font-size: 7px; } .publish-card-media img { width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 3px; } .publish-card-copy { min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding-right: 4px; } .publish-card-copy > strong { color: var(--vd-ink); font-size: 9px; line-height: 1.25; font-weight: 720; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .publish-card-sku { margin-top: 3px; color: var(--vd-ink-muted); font: 7.5px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; } .publish-card-meta { margin-top: 7px; display: flex; align-items: center; justify-content: space-between; gap: 7px; color: var(--vd-ink-muted); font-size: 7.5px; } .publish-card-meta b { color: var(--vd-ink); font-size: 8.5px; font-weight: 720; } .publish-card-status { position: absolute; right: 7px; bottom: 7px; min-height: 17px; display: inline-flex; align-items: center; padding: 0 5px; border-radius: 5px; background: var(--vd-surface-muted); color: var(--vd-ink-secondary); font-size: 7px; font-weight: 720; } .publish-card-status.status-published { background: var(--vd-success-soft); color: var(--vd-success); } .publish-card-status.status-failed { background: var(--vd-danger-soft); color: var(--vd-danger); } .publish-card-status.status-pending, .publish-card-status.status-uploading { background: var(--vd-warning-soft); color: var(--vd-warning); } .publish-card-status.status-copied { background: var(--vd-info-soft); color: var(--vd-info); } .publish-card-status.status-prepared { background: var(--vd-brand-soft); color: var(--vd-brand); } .publish-batch-bar { display: flex; flex-wrap: wrap; gap: 5px; padding: 9px; border-top: 1px solid var(--vd-line); background: var(--vd-surface-raised); } .publish-batch-bar .vd-button { flex: 1 1 auto; min-width: 68px; } .publish-workspace-panel { background: var(--vd-surface-raised); } .publish-workspace { min-height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; } .publish-workspace-header { min-height: 68px; padding: 11px 14px; border-bottom: 1px solid var(--vd-line); } .publish-workspace-product { min-width: 0; display: flex; align-items: center; gap: 10px; } .publish-workspace-thumb { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--vd-line); border-radius: 8px; background: var(--vd-surface-muted); color: var(--vd-ink-muted); font-size: 7px; } .publish-workspace-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 2px; } .publish-workspace-product > div:last-child { min-width: 0; } .publish-workspace-product h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; } .publish-workspace-product p { margin-top: 3px; color: var(--vd-ink-muted); font: 8px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; } .publish-workspace-header-actions { display: flex; align-items: center; gap: 5px; } .publish-workspace-state { min-height: 22px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: 999px; background: var(--vd-success-soft); color: var(--vd-success); font-size: 8px; font-weight: 720; } .icon-button { width: 30px; height: 30px; display: inline-grid; place-items: center; border: 1px solid var(--vd-line); border-radius: 7px; background: var(--vd-surface-raised); color: var(--vd-ink-secondary); cursor: pointer; } .icon-button:hover { border-color: var(--vd-line-strong); color: var(--vd-ink); } .icon-button.danger { color: var(--vd-danger); } .icon-button.is-loading, .vd-button.is-loading { opacity: .72; cursor: wait; pointer-events: none; } @keyframes vd-publish-spin { to { transform: rotate(360deg); } } .publish-workspace-loading, .publish-workspace-empty, .publish-workspace-error { min-height: 440px; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 32px; text-align: center; color: var(--vd-ink-muted); } .publish-workspace-loading span { width: 22px; height: 22px; border: 2px solid var(--vd-line); border-top-color: var(--vd-brand); border-radius: 50%; animation: vd-publish-spin .8s linear infinite; } .publish-workspace-empty > span, .publish-workspace-error > span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: var(--vd-brand-soft); color: var(--vd-brand); font-size: 18px; } .publish-workspace-empty h3, .publish-workspace-error strong { color: var(--vd-ink); font-size: 13px; } .publish-workspace-empty p, .publish-workspace-error p { max-width: 340px; font-size: 9px; line-height: 1.55; } .publish-workspace-empty.compact { min-height: 320px; } .publish-smart-grid, .publish-direct-grid { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 226px; overflow-y: auto; } .publish-editor-column { min-width: 0; padding: 13px; display: grid; align-content: start; gap: 10px; } .publish-editor-section { padding-bottom: 10px; border-bottom: 1px solid var(--vd-line); } .publish-editor-section:last-child { border-bottom: 0; } .publish-field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .publish-field-head label { color: var(--vd-ink-secondary); font-size: 8.5px; font-weight: 720; } .publish-field-head span { color: var(--vd-ink-muted); font-size: 7.5px; } .publish-field-head > div { display: flex; gap: 4px; } .publish-field-head button, .publish-copy-field button { min-height: 26px; padding: 0 8px; border: 1px solid var(--vd-line); border-radius: 6px; background: var(--vd-surface); color: var(--vd-ink-secondary); font-size: 7.5px; font-weight: 680; cursor: pointer; } .publish-copy-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; } .publish-copy-field input, .publish-editor-section > input, .publish-editor-section textarea, .publish-meta-form input { width: 100%; min-width: 0; border: 1px solid var(--vd-line); border-radius: 7px; background: var(--vd-surface); color: var(--vd-ink); font: 9px/1.45 inherit; } .publish-copy-field input, .publish-editor-section > input, .publish-meta-form input { min-height: 34px; padding: 0 9px; } .publish-editor-section textarea { min-height: 190px; padding: 9px; resize: vertical; } .publish-copy-field input[readonly], .publish-editor-section textarea[readonly] { color: var(--vd-ink-secondary); background: var(--vd-surface-muted); } .publish-meta-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; } .publish-meta-form.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } .publish-meta-form label { min-width: 0; display: grid; gap: 4px; } .publish-meta-form label > span { color: var(--vd-ink-muted); font-size: 7.5px; font-weight: 680; } .publish-meta-form.compact .publish-copy-field { grid-template-columns: minmax(0, 1fr); } .publish-meta-form.compact .publish-copy-field button { display: none; } .publish-readiness-column { min-width: 0; padding: 13px; display: grid; align-content: start; gap: 10px; border-left: 1px solid var(--vd-line); background: var(--vd-surface); } .publish-readiness-card, .publish-photo-section { padding: 10px; border: 1px solid var(--vd-line); border-radius: 9px; background: var(--vd-surface-raised); } .publish-readiness-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .publish-readiness-head h4 { margin: 0; font-size: 12px; } .publish-platform-wordmark { color: var(--vd-brand); font-size: 9px; font-weight: 800; } .integration-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--vd-danger); box-shadow: 0 0 0 4px var(--vd-danger-soft); } .integration-dot.is-connected { background: var(--vd-success); box-shadow: 0 0 0 4px var(--vd-success-soft); } .publish-integration-message { margin: 8px 0 4px; color: var(--vd-ink-muted); font-size: 8px; line-height: 1.5; } .publish-readiness-card ul { list-style: none; margin: 10px 0; display: grid; gap: 6px; } .publish-readiness-card li { display: flex; align-items: center; gap: 7px; color: var(--vd-ink-secondary); font-size: 8.5px; } .publish-readiness-card li > span { width: 15px; height: 15px; display: grid; place-items: center; border-radius: 50%; font-size: 8px; font-weight: 800; } .publish-readiness-card li.is-ready > span { background: var(--vd-success-soft); color: var(--vd-success); } .publish-readiness-card li.is-missing > span { background: var(--vd-warning-soft); color: var(--vd-warning); } .publish-ready-message { padding: 9px; border-radius: 7px; background: var(--vd-warning-soft); color: var(--vd-warning); } .publish-ready-message.is-ready { background: var(--vd-success-soft); color: var(--vd-success); } .publish-ready-message strong, .publish-ready-message small { display: block; } .publish-ready-message strong { font-size: 9px; } .publish-ready-message small { margin-top: 2px; color: inherit; opacity: .8; font-size: 7.5px; line-height: 1.4; } .publish-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } .publish-photo-grid img, .publish-photo-grid > span { width: 100%; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--vd-line); border-radius: 6px; background: var(--vd-surface-muted); color: var(--vd-ink-muted); font-size: 7px; object-fit: contain; padding: 2px; } .publish-no-photos { min-height: 70px; display: grid; place-items: center; border: 1px dashed var(--vd-line-strong); border-radius: 7px; color: var(--vd-ink-muted); font-size: 8px; } .vd-button.full { width: 100%; margin-top: 7px; justify-content: center; } .publish-workspace-footer { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 13px; border-top: 1px solid var(--vd-line); background: var(--vd-surface-raised); } .publish-workspace-footer > div { display: flex; gap: 6px; } .publish-status-rail { overflow-y: auto; border-left: 1px solid var(--vd-line); background: var(--vd-surface); scrollbar-width: thin; } .publish-rail-section { padding: 14px; border-bottom: 1px solid var(--vd-line); } .publish-rail-heading { margin-bottom: 10px; } .publish-status-list { display: grid; } .publish-status-row { width: 100%; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--vd-line); background: transparent; color: var(--vd-ink); text-align: left; cursor: pointer; } .publish-status-row:last-child { border-bottom: 0; } .publish-status-row:hover strong { color: var(--vd-brand); } .publish-status-icon { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--vd-line); border-radius: 50%; font-size: 9px; font-weight: 800; } .publish-status-icon.pending { color: var(--vd-ink-muted); } .publish-status-icon.processing { color: var(--vd-info); border-color: var(--vd-info); } .publish-status-icon.success { color: var(--vd-success); border-color: var(--vd-success); } .publish-status-icon.danger { color: var(--vd-danger); border-color: var(--vd-danger); } .publish-status-icon.scheduled { color: var(--vd-warning); border-color: var(--vd-warning); } .publish-status-row strong, .publish-status-row small { display: block; } .publish-status-row strong { font-size: 8.5px; } .publish-status-row small { margin-top: 2px; color: var(--vd-ink-muted); font-size: 7px; } .publish-status-row b { color: var(--vd-ink); font-size: 10px; } .publish-quick-actions { display: grid; gap: 7px; } .publish-quick-action { width: 100%; min-height: 45px; display: grid; align-content: center; padding: 8px 10px; border: 1px solid var(--vd-line); border-radius: 8px; background: var(--vd-surface-raised); color: var(--vd-ink); text-align: left; cursor: pointer; } .publish-quick-action:hover { border-color: var(--vd-line-strong); } .publish-quick-action.primary { border-color: var(--vd-brand); background: var(--vd-brand); color: var(--vd-on-accent); } .publish-quick-action strong, .publish-quick-action small { display: block; } .publish-quick-action strong { font-size: 8.5px; } .publish-quick-action small { margin-top: 2px; color: inherit; opacity: .72; font-size: 7px; } .publish-activity-list { display: grid; gap: 8px; } .publish-activity-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; } .publish-activity-icon { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--vd-surface-muted); color: var(--vd-ink-muted); font-size: 8px; } .publish-activity-icon.type-published, .publish-activity-icon.type-sold { background: var(--vd-success-soft); color: var(--vd-success); } .publish-activity-icon.type-failed { background: var(--vd-danger-soft); color: var(--vd-danger); } .publish-activity-icon.type-scheduled { background: var(--vd-warning-soft); color: var(--vd-warning); } .publish-activity-row strong, .publish-activity-row small { display: block; } .publish-activity-row strong { color: var(--vd-ink-secondary); font-size: 7.8px; line-height: 1.35; font-weight: 620; } .publish-activity-row small { margin-top: 2px; color: var(--vd-ink-muted); font-size: 7px; } .publish-rail-empty { color: var(--vd-ink-muted); font-size: 8px; } .publish-empty-state { min-height: 180px; display: grid; place-content: center; justify-items: center; gap: 4px; padding: 20px; text-align: center; } .publish-empty-state strong { color: var(--vd-ink); font-size: 10px; } .publish-empty-state span { color: var(--vd-ink-muted); font-size: 8px; } .publish-operation-header { min-height: 74px; padding: 13px 15px; border-bottom: 1px solid var(--vd-line); } .publish-operation-header p { margin-top: 3px; color: var(--vd-ink-muted); font-size: 8px; } .publish-operation-header > div:last-child { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; } .publish-operation-list, .publish-schedule-list { min-height: 0; padding: 10px 13px; overflow-y: auto; } .publish-operation-row { min-height: 64px; display: grid; grid-template-columns: minmax(180px, 1.5fr) 100px 64px minmax(100px, 1fr) auto; gap: 10px; align-items: center; padding: 8px; border-bottom: 1px solid var(--vd-line); } .publish-operation-row:hover { background: var(--vd-surface); } .publish-operation-product { min-width: 0; display: flex; align-items: center; gap: 8px; } .publish-operation-mark { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; background: var(--vd-surface-muted); color: var(--vd-ink-muted); font: 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace; } .publish-operation-product strong, .publish-operation-product small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .publish-operation-product strong { color: var(--vd-ink); font-size: 8.5px; } .publish-operation-product small { margin-top: 3px; color: var(--vd-ink-muted); font: 7px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; } .publish-operation-meta span, .publish-operation-meta b { display: block; } .publish-operation-meta span { color: var(--vd-ink-muted); font-size: 7px; } .publish-operation-meta b { margin-top: 3px; color: var(--vd-ink); font-size: 8px; } .operation-status { display: inline-flex; width: fit-content; min-height: 19px; align-items: center; padding: 0 6px; border-radius: 5px; background: var(--vd-surface-muted); color: var(--vd-ink-secondary); } .operation-status.status-published { background: var(--vd-success-soft); color: var(--vd-success); } .operation-status.status-failed { background: var(--vd-danger-soft); color: var(--vd-danger); } .operation-status.status-uploading, .operation-status.status-pending, .operation-status.status-scheduled { background: var(--vd-warning-soft); color: var(--vd-warning); } .publish-operation-error { min-width: 0; color: var(--vd-ink-muted); font-size: 7.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .publish-operation-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; } .publish-operation-footer { min-height: 55px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 13px; border-top: 1px solid var(--vd-line); color: var(--vd-ink-muted); font-size: 8px; } .publish-operation-footer strong { color: var(--vd-ink); } .publish-schedule-row { min-height: 62px; display: grid; grid-template-columns: 135px minmax(190px, 1fr) 90px minmax(80px, .7fr) 30px; gap: 10px; align-items: center; padding: 8px; border-bottom: 1px solid var(--vd-line); } .publish-schedule-date strong, .publish-schedule-date span { display: block; } .publish-schedule-date strong { color: var(--vd-ink); font-size: 8.5px; } .publish-schedule-date span { margin-top: 3px; color: var(--vd-ink-muted); font-size: 7px; } .publish-schedule-error { min-width: 0; color: var(--vd-danger); font-size: 7.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .publish-schedule-dialog { width: min(620px, 94vw); max-width: 620px; } .publish-schedule-summary { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 13px; } .publish-schedule-summary span, .publish-schedule-summary b { padding: 4px 7px; border-radius: 999px; background: var(--vd-surface-muted); color: var(--vd-ink-secondary); font-size: 7.5px; font-weight: 620; } .publish-schedule-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .publish-schedule-grid label { display: grid; gap: 5px; color: var(--vd-ink-secondary); font-size: 8px; font-weight: 680; } .publish-schedule-grid select, .publish-schedule-grid input { min-height: 40px; padding: 0 10px; border: 1px solid var(--vd-line); border-radius: 8px; background: var(--vd-surface-raised); color: var(--vd-ink); font-size: 9px; } .publish-schedule-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 16px; } @media (max-width: 1320px) { .publish-center-grid { grid-template-columns: 245px minmax(0, 1fr); } .publish-status-rail { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1fr; border-left: 0; border-top: 1px solid var(--vd-line); } .publish-rail-section { border-bottom: 0; border-right: 1px solid var(--vd-line); } .publish-rail-section:last-child { border-right: 0; } } @media (max-width: 960px) { .publish-center-heading { align-items: flex-start; flex-direction: column; } .publish-center-grid { grid-template-columns: 1fr; } .publish-list-panel { max-height: 470px; border-right: 0; border-bottom: 1px solid var(--vd-line); } .publish-smart-grid, .publish-direct-grid { grid-template-columns: 1fr; } .publish-readiness-column { border-left: 0; border-top: 1px solid var(--vd-line); } .publish-status-rail { grid-template-columns: 1fr; } .publish-rail-section { border-right: 0; border-bottom: 1px solid var(--vd-line); } .publish-operation-row { grid-template-columns: minmax(170px, 1fr) 90px 60px auto; } .publish-operation-error { display: none; } } @media (max-width: 620px) { .publish-heading-actions { width: 100%; } .publish-heading-actions .vd-button { flex: 1; } .publish-view-tab { padding: 0 10px; } .publish-list-panel-head { align-items: flex-start; } .publish-filter-row, .publish-schedule-grid, .publish-meta-form, .publish-meta-form.compact { grid-template-columns: 1fr; } .publish-workspace-header { align-items: flex-start; } .publish-workspace-header-actions { flex-wrap: wrap; justify-content: flex-end; } .publish-workspace-footer, .publish-operation-footer { align-items: stretch; flex-direction: column; } .publish-workspace-footer > div { display: grid; grid-template-columns: 1fr 1fr; } .publish-workspace-footer .vd-button { justify-content: center; } .publish-operation-header { align-items: flex-start; flex-direction: column; } .publish-operation-header > div:last-child { width: 100%; justify-content: stretch; } .publish-operation-header .vd-button { flex: 1; } .publish-operation-row { grid-template-columns: minmax(0, 1fr) auto; gap: 7px; } .publish-operation-meta, .publish-operation-error { display: none; } .publish-schedule-row { grid-template-columns: 1fr auto; } .publish-schedule-row > :nth-child(3), .publish-schedule-row > :nth-child(4) { display: none; } } .detail-pane-head, .detail-html-preview-head { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--vd-line); background: var(--vd-surface); } .detail-pane-head strong, .detail-html-preview-head strong { color: var(--vd-ink); font-size: 8px; } .detail-pane-head span, .detail-html-preview-head span { color: var(--vd-ink-muted); font-size: 7px; } .detail-html-preview-head span[data-tone="working"] { color: var(--vd-warning); } .detail-html-preview-head span[data-tone="ok"] { color: var(--vd-success); } .detail-html-preview-head span[data-tone="warning"] { color: var(--vd-warning); } .html-preview-frame { display: block; width: 100%; min-height: 240px; margin: 0; border: 0; background: var(--vd-paper); } .listing-editor-shell { padding: 0 14px 16px; } .listing-editor-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 17px 0 14px; border-bottom: 1px solid var(--vd-line); } .listing-editor-kicker { display: block; margin-bottom: 4px; color: var(--vd-brand); font-size: 7px; font-weight: 720; letter-spacing: .08em; text-transform: uppercase; } .listing-editor-header h2 { margin: 0; color: var(--vd-ink); font-size: 18px; line-height: 1.2; text-transform: none; letter-spacing: -.02em; } .listing-editor-header p { margin: 5px 0 0; color: var(--vd-ink-muted); font: 7px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: normal; } .listing-editor-header-actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; } .listing-editor-grid { display: grid; grid-template-columns: minmax(220px, .78fr) minmax(420px, 1.65fr) minmax(190px, .62fr); gap: 12px; align-items: start; padding-top: 13px; } .listing-media-editor, .listing-content-editor, .listing-context-panel { min-width: 0; } .listing-media-editor, .listing-editor-section, .listing-context-card { border: 1px solid var(--vd-line); border-radius: 10px; background: var(--vd-surface-raised); } .listing-media-editor { padding: 10px; position: sticky; top: 74px; } .listing-content-editor { display: grid; gap: 10px; } .listing-editor-section { padding: 11px; } .listing-context-panel { display: grid; gap: 9px; position: sticky; top: 74px; } .listing-context-card { padding: 11px; } .listing-context-card h3, .listing-section-heading h3 { margin: 0; color: var(--vd-ink); font-size: 9px; text-transform: none; letter-spacing: 0; } .listing-section-heading { min-height: 28px; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .listing-section-heading > div { display: flex; align-items: center; gap: 7px; } .listing-section-heading > div > span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: var(--vd-brand-soft); color: var(--vd-brand); font-size: 7px; font-weight: 760; } .listing-section-heading > b { color: var(--vd-ink-muted); font-size: 7px; font-weight: 600; } .detail-photo-stage { aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--vd-line); border-radius: 9px; background: var(--vd-surface-muted); } .detail-photo-stage img { width: 100%; height: 100%; object-fit: contain; object-position: center; } .detail-photo-empty { color: var(--vd-ink-muted); font-size: 8px; } .detail-photo-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin-top: 7px; } .detail-photo-thumb { position: relative; aspect-ratio: 1; overflow: hidden; padding: 0; border: 1px solid var(--vd-line); border-radius: 7px; background: var(--vd-surface-muted); cursor: pointer; } .detail-photo-thumb:hover, .detail-photo-thumb.is-active { border-color: var(--vd-brand); box-shadow: 0 0 0 2px var(--vd-brand-soft); } .detail-photo-thumb.is-dragging { opacity: .45; } .detail-photo-thumb img { width: 100%; height: 100%; object-fit: contain; object-position: center; } .detail-photo-thumb span { position: absolute; left: 3px; bottom: 3px; padding: 2px 4px; border-radius: 4px; background: var(--vd-scrim-strong); color: var(--vd-on-accent); font-size: 5.5px; font-weight: 720; } .detail-photo-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 8px; } .detail-photo-actions .vd-button { justify-content: center; min-width: 0; padding-inline: 6px; } .detail-photo-help { margin: 8px 0 0; color: var(--vd-ink-muted); font-size: 6.5px; line-height: 1.5; white-space: normal; } .listing-form-grid { display: grid; gap: 8px; } .listing-form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .listing-form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .listing-form-grid label, .listing-full-field { min-width: 0; display: grid; gap: 5px; color: var(--vd-ink-secondary); font-size: 7px; font-weight: 680; text-transform: none; letter-spacing: 0; } .listing-full-field { position: relative; margin-top: 9px; } .listing-full-field > span { position: absolute; right: 1px; top: 0; color: var(--vd-ink-muted); font-size: 6.5px; font-weight: 500; } .listing-form-grid input, .listing-form-grid select, .listing-full-field input, .listing-full-field textarea { width: 100%; min-height: 38px; padding: 0 9px; border: 1px solid var(--vd-line); border-radius: 7px; background: var(--vd-surface); color: var(--vd-ink); font: inherit; font-size: 8px; text-transform: none; letter-spacing: 0; } .listing-full-field textarea { min-height: 76px; padding-block: 9px; resize: vertical; } .listing-form-grid input:focus, .listing-form-grid select:focus, .listing-full-field input:focus, .listing-full-field textarea:focus, .detail-description-pane textarea:focus { outline: none; border-color: var(--vd-brand); box-shadow: 0 0 0 3px var(--vd-brand-soft); } .detail-description-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; } .detail-description-pane { min-width: 0; overflow: hidden; border: 1px solid var(--vd-line); border-radius: 8px; background: var(--vd-surface); } .detail-description-pane #detail-description-editor { min-height: 245px; } .detail-description-pane .ql-toolbar { border: 0; border-bottom: 1px solid var(--vd-line); } .detail-description-pane .ql-container { border: 0; min-height: 201px; font-size: 9px; } .detail-description-pane textarea { display: block; width: 100%; min-height: 245px; padding: 10px; border: 0; resize: vertical; background: var(--vd-code-bg); color: var(--vd-code-ink); font: 7.5px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 2; } .detail-html-preview-head { margin-top: 8px; border: 1px solid var(--vd-line); border-bottom: 0; border-radius: 8px 8px 0 0; } .detail-html-preview { display: block; width: 100%; min-height: 280px; border: 1px solid var(--vd-line); border-radius: 0 0 8px 8px; background: var(--vd-paper); } .listing-context-card canvas { display: block; width: 118px; height: 118px; margin: 2px auto 8px; padding: 7px; border: 1px solid var(--vd-line); border-radius: 8px; background: var(--vd-paper); } .listing-context-card > strong { display: block; overflow-wrap: anywhere; color: var(--vd-ink); text-align: center; font: 8px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; } .listing-context-card .vd-button.full { width: 100%; justify-content: center; margin-top: 6px; } .listing-context-card.danger-zone { border-color: color-mix(in srgb, var(--vd-danger) 35%, var(--vd-line)); } @media (max-width: 1280px) { .listing-editor-grid { grid-template-columns: 230px minmax(0, 1fr); } .listing-context-panel { grid-column: 1 / -1; position: static; grid-template-columns: repeat(4, minmax(0, 1fr)); } .listing-context-card { min-height: 120px; } } @media (max-width: 920px) { .detail-description-split { grid-template-columns: 1fr; } .listing-editor-grid { grid-template-columns: 1fr; } .listing-media-editor, .listing-context-panel { position: static; } .listing-context-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); } .detail-photo-stage { max-height: 470px; aspect-ratio: 4 / 3; } } @media (max-width: 620px) { .listing-editor-header { flex-direction: column; } .listing-editor-header-actions { width: 100%; } .listing-editor-header-actions .vd-button { flex: 1; justify-content: center; } .listing-form-grid.three, .listing-form-grid.two, .listing-context-panel { grid-template-columns: 1fr; } .detail-photo-actions { grid-template-columns: 1fr; } } html, body, .main-wrapper, main, .tab-content { min-width: 0; } img, video, canvas, iframe { max-width: 100%; } .mobile-upload-trigger { width: calc(100% - 24px); min-height: 52px; margin: 8px 12px 0; padding: 8px 10px; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 9px; border: 1px solid var(--vd-line); border-radius: 8px; background: var(--vd-surface); color: var(--vd-ink-secondary); text-align: left; cursor: pointer; } .mobile-upload-trigger:hover { border-color: var(--vd-brand); background: var(--vd-brand-soft); } .mobile-upload-trigger-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: var(--vd-brand-soft); color: var(--vd-brand); font-size: 18px; font-weight: 800; } .mobile-upload-trigger span:nth-child(2) { min-width: 0; display: grid; gap: 2px; } .mobile-upload-trigger strong { color: var(--vd-ink); font-size: 9px; } .mobile-upload-trigger small { color: var(--vd-ink-muted); font-size: 7px; line-height: 1.35; } .mobile-upload-trigger b { padding: 4px 6px; border-radius: 5px; background: var(--vd-ink); color: var(--vd-surface); font-size: 7px; } .html-view-toolbar { min-height: 43px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border-top: 1px solid var(--vd-line); border-bottom: 1px solid var(--vd-line); background: var(--vd-surface); } .html-view-tabs { display: inline-flex; gap: 3px; padding: 3px; border-radius: 7px; background: var(--vd-surface-muted); } .html-view-tab { min-height: 28px; padding: 0 9px; border: 0; border-radius: 5px; background: transparent; color: var(--vd-ink-muted); font-size: 8px; font-weight: 720; cursor: pointer; } .html-view-tab.is-active { background: var(--vd-surface-raised); color: var(--vd-ink); box-shadow: var(--vd-shadow-xs); } .html-switch-stage { min-width: 0; } .html-switch-view { display: none; min-width: 0; } .html-switch-view.is-active { display: block; } .html-switch-view .html-source, .detail-html-switch-stage textarea { display: block; width: 100%; min-height: 290px; margin: 0; padding: 12px; border: 0; border-radius: 0; resize: vertical; background: var(--vd-code-bg); color: var(--vd-code-ink); font: 8px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 2; } .html-switch-view .html-preview-frame { min-height: 320px; } .detail-platform-workbench { margin-top: 9px; overflow: hidden; border: 1px solid var(--vd-line); border-radius: 8px; } .detail-html-toolbar { border: 0; border-bottom: 1px solid var(--vd-line); } .detail-html-toolbar > span { color: var(--vd-ink-muted); font-size: 7px; } .detail-html-switch-stage .detail-html-preview { min-height: 340px; border: 0; border-radius: 0; } .detail-wysiwyg-pane { width: 100%; } .detail-wysiwyg-pane #detail-description-editor { min-height: 270px; } .detail-photo-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mobile-upload-overlay { z-index: 2500; padding: 18px; } .mobile-upload-dialog { width: min(760px, 100%); max-height: min(760px, calc(100dvh - 36px)); overflow: auto; border: 1px solid var(--vd-line); border-radius: 16px; background: var(--vd-surface-raised); box-shadow: var(--vd-shadow-float); } .mobile-upload-dialog > header, .mobile-upload-dialog > footer { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; } .mobile-upload-dialog > header { border-bottom: 1px solid var(--vd-line); } .mobile-upload-dialog > footer { justify-content: flex-end; border-top: 1px solid var(--vd-line); } .mobile-upload-dialog-brand { display: flex; align-items: center; gap: 10px; } .mobile-upload-dialog-brand > div { display: grid; gap: 2px; } .mobile-upload-dialog-brand span { color: var(--vd-brand); font-size: 7px; font-weight: 760; text-transform: uppercase; letter-spacing: .08em; } .mobile-upload-dialog-brand h3 { margin: 0; color: var(--vd-ink); font-size: 15px; } .mobile-upload-dialog-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--vd-brand); color: var(--vd-on-accent); font-size: 9px; } .mobile-upload-dialog-grid { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 22px; padding: 22px; } .mobile-upload-qr-card { display: grid; justify-items: center; align-content: center; padding: 18px; border: 1px solid var(--vd-line); border-radius: 13px; background: var(--vd-paper); } .mobile-upload-qr-card canvas { width: 240px; height: 240px; padding: 8px; background: var(--vd-paper); } .mobile-upload-session-state { min-height: 28px; display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 0 9px; border-radius: 999px; background: var(--vd-surface-muted); color: var(--vd-ink-muted); font-size: 8px; font-weight: 720; } .mobile-upload-session-state i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .mobile-upload-session-state[data-tone="ready"] { background: var(--vd-success-soft); color: var(--vd-success); } .mobile-upload-session-state[data-tone="warning"] { background: var(--vd-warning-soft); color: var(--vd-warning); } .mobile-upload-session-state[data-tone="error"] { background: var(--vd-danger-soft); color: var(--vd-danger); } .mobile-upload-dialog-copy { min-width: 0; align-self: center; } .mobile-upload-dialog-copy h4 { margin: 4px 0 12px; color: var(--vd-ink); font-size: 21px; line-height: 1.15; letter-spacing: -.04em; } .mobile-upload-dialog-copy ol { display: grid; gap: 9px; margin: 0 0 16px; padding-left: 22px; color: var(--vd-ink-secondary); font-size: 10px; line-height: 1.45; } .mobile-upload-link-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; overflow: hidden; border: 1px solid var(--vd-line); border-radius: 8px; } .mobile-upload-link-wrap input { min-width: 0; height: 38px; border: 0; border-radius: 0; padding: 0 9px; background: var(--vd-surface); color: var(--vd-ink-secondary); font: 7px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; } .mobile-upload-link-wrap button { border: 0; border-left: 1px solid var(--vd-line); padding: 0 10px; background: var(--vd-surface-muted); color: var(--vd-brand); font-size: 8px; font-weight: 720; cursor: pointer; } .mobile-upload-dialog-copy > p { margin: 9px 0 0; color: var(--vd-ink-muted); font-size: 8px; line-height: 1.5; } .mobile-upload-live { display: flex; justify-content: space-between; gap: 10px; margin-top: 15px; padding: 10px; border-radius: 8px; background: var(--vd-surface-muted); } .mobile-upload-live strong { color: var(--vd-ink); font-size: 9px; } .mobile-upload-live span { color: var(--vd-ink-muted); font-size: 8px; } .main-wrapper { width: calc(100% - var(--vd-sidebar-width)); max-width: 100%; } main { width: 100%; overflow-x: clip; } .publish-workspace, .storage-main, .admin-grid, .settings-form { min-width: 0; } .work-panel, .listing-editor-section, .listing-media-editor, .listing-context-card { max-width: 100%; } @media (max-width: 1440px) { main { padding-inline: 18px; } } @media (max-width: 1180px) { .topbar-context { min-width: 150px; } .command-search { width: min(390px, 34vw); } .listing-editor-grid { grid-template-columns: 230px minmax(0,1fr); } .listing-context-panel { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width: 1024px) { :root { --vd-sidebar-width: 74px; } .sidebar-header { justify-content: center; padding-inline: 10px; } .logo-text, .nav-item span, .nav-group-label, .sidebar-footer .theme-toggle span { display: none; } .nav-item { justify-content: center; padding: 0; } .nav-item::before { left: -10px; } .sidebar-footer .theme-toggle { justify-content: center; padding: 0; } .main-wrapper { width: calc(100% - var(--vd-sidebar-width)); } .topbar { padding-inline: 14px; } .studio-layout { grid-template-columns: 1fr; } .studio-inspector { position: static; } .publish-center-layout { grid-template-columns: minmax(0,1fr); } .mobile-upload-dialog-grid { grid-template-columns: 250px minmax(0,1fr); gap: 16px; } } @media (max-width: 768px) { :root { --vd-sidebar-width: 0px; } body { display: block; } .main-wrapper { width: 100%; margin-left: 0; } .topbar { position: sticky; top: 0; z-index: 100; } .topbar-context { flex: 0 1 auto; } .topbar-actions { gap: 3px; } main { padding: 13px 10px 22px; } .page-heading { align-items: flex-start; flex-direction: column; gap: 10px; } .listing-editor-grid { grid-template-columns: 1fr; } .listing-media-editor, .listing-context-panel { position: static; max-height: none; } .listing-context-panel { grid-template-columns: 1fr 1fr; } .studio-bottom-grid { grid-template-columns: 1fr; } .flow-board { min-width: 860px; } .mobile-upload-dialog-grid { grid-template-columns: 1fr; padding: 15px; } .mobile-upload-qr-card canvas { width: 210px; height: 210px; } .mobile-upload-dialog-copy { text-align: left; } .html-view-toolbar { align-items: flex-start; flex-direction: column; } } @media (max-width: 560px) { .topbar { min-height: 54px; height: 54px; } .topbar-title { max-width: 105px; } .command-search { max-width: 42px; padding: 0; justify-content: center; } .command-search svg { margin: 0; } .listing-context-panel, .listing-form-grid.two, .listing-form-grid.three { grid-template-columns: 1fr; } .detail-photo-actions { grid-template-columns: 1fr; } .mobile-upload-overlay { padding: 7px; align-items: flex-end; } .mobile-upload-dialog { max-height: calc(100dvh - 14px); border-radius: 16px 16px 8px 8px; } .mobile-upload-dialog > header, .mobile-upload-dialog > footer { padding-inline: 12px; } .mobile-upload-dialog > footer { display: grid; grid-template-columns: 1fr 1fr; } .mobile-upload-dialog > footer button { min-width: 0; } .mobile-upload-live { align-items: flex-start; flex-direction: column; } .html-view-tabs { width: 100%; } .html-view-tab { flex: 1; } } .dashboard-page,.studio-flow-v2{min-width:0} .dashboard-heading{align-items:center}.dashboard-controls{display:flex;align-items:center;gap:8px}.dashboard-controls select{height:34px;padding:0 34px 0 10px;border:1px solid var(--vd-line);border-radius:var(--vd-radius-xs);background:var(--vd-surface-raised);color:var(--vd-ink);font:inherit;font-size:11px} .dashboard-layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:14px;align-items:start}.dashboard-main{min-width:0}.dashboard-rail{display:grid;gap:12px;min-width:0}.dashboard-card{min-width:0;border:1px solid var(--vd-line);border-radius:var(--vd-radius-sm);background:var(--vd-surface-raised);box-shadow:none;overflow:hidden}.dashboard-card>header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 13px 9px}.dashboard-card>header>div{display:grid;gap:3px}.dashboard-card>header span{font-size:12px;font-weight:750;color:var(--vd-ink)}.dashboard-card>header strong{font-size:10px;font-weight:500;color:var(--vd-ink-muted)} .dashboard-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:12px}.dashboard-kpi{position:relative;min-width:0;min-height:116px;padding:12px;border:1px solid var(--vd-line);border-radius:var(--vd-radius-sm);background:var(--vd-surface-raised);overflow:hidden}.dashboard-kpi-icon{width:24px;height:24px;display:grid;place-items:center;border-radius:var(--vd-radius-xs);background:var(--vd-success-soft);color:var(--vd-success);font-size:11px;font-weight:800}.dashboard-kpi>div{display:grid;gap:3px;margin-top:7px}.dashboard-kpi small{font-size:9px;color:var(--vd-ink-secondary)}.dashboard-kpi strong{font-size:17px;letter-spacing:-.035em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dashboard-kpi em{font-size:8px;font-style:normal;color:var(--vd-ink-muted)}.dashboard-kpi svg{position:absolute;left:12px;right:12px;bottom:8px;width:calc(100% - 24px);height:25px;color:var(--vd-success)}.dashboard-kpi svg[data-tone="blue"]{color:var(--vd-info)}.dashboard-kpi svg[data-tone="purple"]{color:var(--vd-data-purple)}.dashboard-kpi svg[data-tone="orange"]{color:var(--vd-brand)} .dashboard-chart-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:12px;margin-bottom:12px}.dashboard-chart{height:250px;padding:0 8px 8px}.dashboard-chart svg{width:100%;height:100%;overflow:visible}.chart-grid line{stroke:var(--vd-line);stroke-width:1}.chart-grid text{fill:var(--vd-ink-muted);font-size:10px}.chart-area{fill:var(--vd-brand-soft)}.chart-line{fill:none;stroke:var(--vd-brand);stroke-width:2.5;vector-effect:non-scaling-stroke}.chart-point{fill:var(--vd-surface-raised);stroke:var(--vd-brand);stroke-width:2;cursor:pointer}.dashboard-bar-chart{height:250px;display:flex;align-items:end;justify-content:space-around;gap:12px;padding:16px 14px 12px}.dashboard-bar-item{height:100%;min-width:0;flex:1;display:grid;grid-template-rows:18px 1fr 18px;gap:5px;text-align:center}.dashboard-bar-item>strong{font-size:9px;color:var(--vd-ink-secondary);white-space:nowrap}.dashboard-bar-item>div{display:flex;align-items:end;justify-content:center;border-bottom:1px solid var(--vd-line)}.dashboard-bar-item i{display:block;width:min(44px,72%);min-height:5px;background:var(--vd-info);border-radius:var(--vd-radius-xs) var(--vd-radius-xs) 0 0}.dashboard-bar-item:nth-child(2) i{background:var(--vd-success)}.dashboard-bar-item:nth-child(3) i{background:var(--vd-ink)}.dashboard-bar-item:nth-child(4) i{background:var(--vd-brand)}.dashboard-bar-item span{font-size:9px;color:var(--vd-ink-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dashboard-category-chart{min-height:250px;display:grid;grid-template-columns:145px minmax(0,1fr);gap:14px;align-items:center;padding:12px 14px}.dashboard-donut{width:138px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center}.dashboard-donut>div{width:72%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;align-content:center;background:var(--vd-surface-raised);text-align:center}.dashboard-donut strong{font-size:13px}.dashboard-donut span{font-size:9px;color:var(--vd-ink-muted)}.dashboard-category-legend{display:grid;gap:8px}.dashboard-category-legend>div{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:7px;align-items:center;font-size:9px}.dashboard-category-legend i{width:7px;height:7px;border-radius:50%}.dashboard-category-legend span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dashboard-category-legend strong{font-size:9px} .dashboard-focus-card{margin-bottom:12px}.dashboard-focus-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:0 12px 12px}.dashboard-focus-item{min-height:108px;padding:11px;border:1px solid var(--vd-line);border-radius:var(--vd-radius-sm);background:var(--vd-surface);color:var(--vd-ink);display:grid;grid-template-rows:auto 1fr auto;gap:6px;text-align:left;cursor:pointer}.dashboard-focus-item:hover{border-color:var(--vd-brand);transform:translateY(-1px)}.dashboard-focus-item strong{font-size:18px}.dashboard-focus-item span{font-size:10px;line-height:1.35}.dashboard-focus-item em{font-size:9px;font-style:normal;color:var(--vd-brand)}.dashboard-focus-item.tone-ready{background:color-mix(in srgb,var(--vd-success-soft) 72%,var(--vd-surface))}.dashboard-focus-item.tone-failed{background:color-mix(in srgb,var(--vd-danger-soft) 72%,var(--vd-surface))}.dashboard-focus-item.tone-uploads{background:color-mix(in srgb,var(--vd-info-soft) 72%,var(--vd-surface))} .dashboard-lower-grid{display:grid;grid-template-columns:minmax(0,1fr) 255px;gap:12px}.dashboard-table-wrap{overflow:auto}.dashboard-table{width:100%;border-collapse:collapse;font-size:9px}.dashboard-table th,.dashboard-table td{padding:8px 10px;border-top:1px solid var(--vd-line);text-align:left;white-space:nowrap}.dashboard-table th{color:var(--vd-ink-muted);font-weight:600}.dashboard-table tbody tr{cursor:pointer}.dashboard-table tbody tr:hover{background:var(--vd-surface-muted)}.dashboard-product{display:flex;align-items:center;gap:8px;min-width:210px}.dashboard-product img,.dashboard-product>span{width:34px;height:34px;object-fit:contain;border:1px solid var(--vd-line);border-radius:var(--vd-radius-xs);background:var(--vd-surface-muted)}.dashboard-product>div{display:grid;gap:2px}.dashboard-product strong{font-size:9px}.dashboard-product small{font-size:8px;color:var(--vd-ink-muted)}.dashboard-status{padding:3px 6px;background:var(--vd-success-soft);color:var(--vd-success);font-size:8px}.dashboard-actions{display:grid;gap:7px;padding:0 12px 12px}.dashboard-actions button{min-height:34px;padding:0 10px;border:1px solid var(--vd-line);border-radius:var(--vd-radius-xs);background:var(--vd-surface-raised);color:var(--vd-ink);font:inherit;font-size:10px;font-weight:700;text-align:left;cursor:pointer}.dashboard-actions button:hover{border-color:var(--vd-brand);color:var(--vd-brand)}.dashboard-actions button.primary{border-color:var(--vd-brand);background:var(--vd-brand);color:var(--vd-on-accent);text-align:center}.dashboard-quality{display:grid;grid-template-columns:58px minmax(0,1fr);gap:11px;align-items:center;padding:0 13px 12px}.dashboard-quality .confidence-ring{width:56px;height:56px}.dashboard-quality>div:last-child{display:grid;gap:3px}.dashboard-quality strong{font-size:11px;color:var(--vd-success)}.dashboard-quality p{font-size:9px;line-height:1.4;color:var(--vd-ink-muted)}.dashboard-card>.vd-button.full{width:calc(100% - 26px);margin:0 13px 13px}.dashboard-feed{display:grid;padding:0 12px 12px}.dashboard-feed button{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;align-items:start;padding:8px 0;border:0;border-top:1px solid var(--vd-line);background:transparent;color:var(--vd-ink);text-align:left;cursor:pointer}.dashboard-feed button:first-child{border-top:0}.dashboard-feed-icon{width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:var(--vd-success-soft);color:var(--vd-success);font-size:9px;font-weight:800}.dashboard-feed-icon.tone-danger,.dashboard-feed-icon.tone-failed{background:var(--vd-danger-soft);color:var(--vd-danger)}.dashboard-feed button>span:last-child{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 6px}.dashboard-feed strong{font-size:9px;line-height:1.35}.dashboard-feed small{font-size:8px;color:var(--vd-ink-muted);white-space:nowrap}.dashboard-system p{padding:0 13px 12px;font-size:9px;line-height:1.45;color:var(--vd-ink-muted)}.dashboard-empty{padding: 18px;text-align:center;color: var(--vd-ink-muted);font-size: 10px} .today-summary-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:12px}.today-summary-grid>button{min-height:78px;padding:12px;border:1px solid var(--vd-line);border-radius:var(--vd-radius-sm);background:var(--vd-surface-raised);color:var(--vd-ink);display:grid;grid-template-columns:28px 42px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;gap:2px 9px;text-align:left;cursor:pointer}.today-summary-grid>button:hover{border-color:var(--vd-brand)}.today-summary-grid>button>span{grid-row:1/3;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--vd-success-soft);color:var(--vd-success);font-size:15px}.today-summary-grid>button:last-child>span{background:var(--vd-danger-soft);color:var(--vd-danger)}.today-summary-grid strong{grid-row:1/3;font-size:20px}.today-summary-grid small{font-size:10px;font-weight:700}.today-summary-grid em{font-size:8px;font-style:normal;color:var(--vd-ink-muted)}.today-filterbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.today-filter-tabs{display:flex;align-items:center;gap:5px}.today-filter-tabs button,.today-filterbar select{height:32px;padding:0 12px;border:1px solid transparent;border-radius:var(--vd-radius-xs);background:var(--vd-surface-muted);color:var(--vd-ink-secondary);font:inherit;font-size:10px;cursor:pointer}.today-filter-tabs button.active{border-color:var(--vd-brand);background:var(--vd-surface-raised);color:var(--vd-brand)}.today-filterbar select{border-color:var(--vd-line);background:var(--vd-surface-raised)}.studio-layout-v2{grid-template-columns:minmax(0,1fr) 300px}.today-ready-panel{margin-bottom:12px}.today-ready-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:0 12px 12px}.today-product-card{min-width:0;padding:0;border:1px solid var(--vd-line);border-radius:var(--vd-radius-sm);overflow:hidden;background:var(--vd-surface-raised);color:var(--vd-ink);text-align:left;cursor:pointer}.today-product-card:hover,.today-product-card.selected{border-color:var(--vd-brand);box-shadow:0 0 0 1px var(--vd-brand)}.today-product-media{height:135px;position:relative;display:grid;place-items:center;background:linear-gradient(145deg,var(--vd-surface),var(--vd-surface-muted));overflow:hidden}.today-product-media img{width:100%;height:100%;object-fit:contain;padding:8px}.today-product-media>b{position:absolute;right:6px;top:6px;padding:3px 5px;background:color-mix(in srgb,var(--vd-surface-raised) 92%,transparent);font-size:8px}.today-product-copy{display:grid;gap:4px;padding:9px}.today-product-copy>strong{font-size:10px;line-height:1.35;min-height:27px}.today-product-copy>span{font-size:8px;color:var(--vd-ink-muted)}.today-product-copy>div{display:flex;align-items:center;justify-content:space-between;gap:8px}.today-product-copy em{font-size:11px;font-style:normal;font-weight:750}.today-product-copy small{font-size:8px;color:var(--vd-success)}.today-middle-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(235px,.65fr);gap:12px;margin-bottom:12px}.today-table-wrap{overflow:auto}.today-table{width:100%;border-collapse:collapse;font-size:9px}.today-table th,.today-table td{padding:7px 10px;border-top:1px solid var(--vd-line);text-align:left;white-space:nowrap}.today-table th{color:var(--vd-ink-muted);font-weight:600}.today-table td:first-child button{display:flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--vd-ink);text-align:left;cursor:pointer}.today-table td:first-child button>span{width:34px;height:28px;display:grid;place-items:center}.today-table td:first-child img{width:34px;height:28px;object-fit:contain}.today-table td:first-child div{display:grid;gap:2px}.today-table td:first-child strong{font-size:9px}.today-table td:first-child small{font-size:8px;color:var(--vd-ink-muted)}.today-status{padding:3px 6px;background:var(--vd-warning-soft);color:var(--vd-warning);font-size:8px}.attention-list.compact{padding:0 10px}.attention-list.compact .attention-item{width:100%;display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 0;border:0;border-top:1px solid var(--vd-line);background:transparent;color:var(--vd-ink);text-align:left;cursor:pointer}.attention-list.compact .attention-item:first-child{border-top:0}.attention-symbol{width:18px;height:18px;display:grid;place-items:center;color:var(--vd-brand);font-size:10px}.attention-copy{display:grid;gap:2px}.attention-copy strong{font-size:9px}.attention-copy small{font-size:8px;color:var(--vd-ink-muted)}.attention-list.compact .attention-item>b{font-size:9px}.today-panel-footer{display:block;margin:8px auto 10px}.today-activity-panel{margin-bottom:0}.today-activity-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:0 12px 12px}.today-activity-grid>div{min-width:0}.today-activity-grid h4{margin-bottom:6px;font-size:9px}.today-activity-grid .activity-item{width:100%;display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:7px;align-items:center;padding:7px 0;border:0;border-top:1px solid var(--vd-line);background:transparent;color:var(--vd-ink);text-align:left;cursor:pointer}.today-activity-grid .activity-item:first-child{border-top:0}.today-activity-grid .activity-copy{font-size:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.today-activity-grid .activity-time{font-size:8px;color:var(--vd-ink-muted);white-space:nowrap}.inspector-photo-count{position:absolute;left:8px;bottom:8px;padding:4px 6px;background:var(--vd-overlay-control);color:var(--vd-on-accent);font-size:8px}.inspector-title-row{display:flex;align-items:start;justify-content:space-between;gap:8px}.inspector-title-row>div{min-width:0}.inspector-thumbs>span{display:grid;place-items:center;border:1px solid var(--vd-line);font-size:9px;color:var(--vd-ink-muted)} .publish-loading-state{min-height:250px;display:grid;place-items:center;align-content:center;gap:10px;color:var(--vd-ink-muted)}.publish-loading-state>span{width:28px;height:28px;border:2px solid var(--vd-line);border-top-color:var(--vd-brand);border-radius:50%;animation:spin .8s linear infinite}.publish-loading-state strong{font-size:11px}@keyframes spin{to{transform:rotate(360deg)}} @media(max-width:1450px){.dashboard-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.dashboard-chart-grid{grid-template-columns:1.35fr 1fr}.dashboard-chart-grid>.dashboard-card:last-child{grid-column:1/-1}.dashboard-category-chart{grid-template-columns:180px minmax(0,1fr)}.today-ready-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.today-ready-grid>.today-product-card:nth-child(n+4){display:none}} @media(max-width:1180px){.dashboard-layout{grid-template-columns:1fr}.dashboard-rail{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-chart-grid{grid-template-columns:1fr 1fr}.dashboard-line-card{grid-column:1/-1}.dashboard-lower-grid{grid-template-columns:1fr}.studio-layout-v2{grid-template-columns:1fr}.studio-layout-v2 .studio-inspector{position:relative;top:auto;max-height:none;display:none}.studio-layout-v2 .studio-inspector:has(.inspector-content:not(.hidden)){display:block}.today-middle-grid{grid-template-columns:1fr}.today-ready-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.today-ready-grid>.today-product-card:nth-child(n){display:block}} @media(max-width:900px){.dashboard-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-chart-grid{grid-template-columns:1fr}.dashboard-chart-grid>.dashboard-card{grid-column: auto}.dashboard-focus-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-rail{grid-template-columns:1fr}.today-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.today-summary-grid>button:last-child{grid-column:1/-1}.today-ready-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.today-filterbar{align-items:stretch;flex-direction:column}.today-filter-tabs{overflow:auto;padding-bottom:2px}.today-filter-tabs button{flex:0 0 auto}.today-activity-grid{grid-template-columns:1fr}.dashboard-heading{align-items:flex-start}.dashboard-controls{width:100%}.dashboard-controls select{flex:1}} @media(max-width:620px){.dashboard-kpis{grid-template-columns:1fr}.dashboard-kpi{min-height:105px}.dashboard-focus-grid{grid-template-columns:1fr}.dashboard-category-chart{grid-template-columns:1fr;justify-items:center}.dashboard-category-legend{width:100%}.dashboard-line-card .dashboard-chart{height:220px;overflow-x:auto}.dashboard-line-card svg{min-width:620px}.dashboard-lower-grid{display:block}.dashboard-actions-card{margin-top:12px}.today-summary-grid{grid-template-columns:1fr}.today-summary-grid>button:last-child{grid-column:auto}.today-ready-grid{grid-template-columns:1fr}.today-product-card{display:grid;grid-template-columns:115px minmax(0,1fr)}.today-product-media{height:108px}.today-table{min-width:650px}.today-activity-grid{padding-inline:10px}.dashboard-controls{flex-direction:column;align-items:stretch}.dashboard-controls .vd-button{width:100%}} .dashboard-page, .dashboard-layout, .dashboard-main, .dashboard-chart-grid, .dashboard-kpis, .today-ready-grid, .today-product-card { min-width: 0; } .dashboard-kpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); align-items: stretch; } .dashboard-kpi { min-height: 132px; display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: minmax(62px, auto) 32px; column-gap: 10px; row-gap: 8px; align-content: start; padding: 12px; } .dashboard-kpi-icon { grid-column: 1; grid-row: 1; align-self: start; flex: none; } .dashboard-kpi > div { grid-column: 2; grid-row: 1; min-width: 0; margin: 0; align-content: start; } .dashboard-kpi small, .dashboard-kpi em { overflow-wrap: anywhere; } .dashboard-kpi strong { font-size: clamp(16px, 1.2vw, 20px); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dashboard-kpi svg { position: static; grid-column: 1 / -1; grid-row: 2; align-self: end; width: 100%; height: 30px; max-width: none; overflow: visible; } .dashboard-chart-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } .dashboard-line-card { grid-column: span 5; } .dashboard-chart-grid > .dashboard-card:nth-child(2) { grid-column: span 4; } .dashboard-chart-grid > .dashboard-card:nth-child(3) { grid-column: span 3; } .dashboard-chart, .dashboard-bar-chart, .dashboard-category-chart { min-width: 0; width: 100%; } .dashboard-chart { overflow: hidden; } .dashboard-chart svg { display: block; width: 100%; max-width: 100%; } .dashboard-bar-chart { gap: clamp(5px, 1vw, 12px); } .dashboard-bar-item { min-width: 42px; } .dashboard-category-chart { grid-template-columns: minmax(112px, 42%) minmax(0, 1fr); } .dashboard-donut { width: min(100%, 150px); } .today-ready-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); align-items: stretch; } .today-ready-grid > .today-product-card:nth-child(n) { display: grid; } .today-product-card { grid-template-rows: auto 1fr; height: 100%; } .today-product-media { width: 100%; height: auto; min-height: 150px; aspect-ratio: 4 / 3; padding: 9px; overflow: hidden; background: linear-gradient(145deg, var(--vd-surface-raised), var(--vd-surface-muted)); } .today-product-media img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; padding: 0; margin: auto; object-fit: contain; object-position: center; } .today-product-copy { align-content: start; } .today-product-copy > strong { min-height: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } @media (max-width: 1550px) { .dashboard-chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dashboard-line-card { grid-column: 1 / -1; } .dashboard-chart-grid > .dashboard-card:nth-child(2), .dashboard-chart-grid > .dashboard-card:nth-child(3) { grid-column: auto; } .today-ready-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } } .ai-operations-card { display: grid; gap: 12px; } .ai-operations-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .ai-operations-summary > div { padding: 10px 12px; border: 1px solid var(--vd-line); border-radius: 5px; background: var(--vd-surface-raised); } .ai-operations-summary span, .ai-operations-summary strong { display: block; } .ai-operations-summary span { color: var(--vd-ink-muted); font-size: 11px; } .ai-operations-summary strong { margin-top: 3px; font-size: 18px; font-variant-numeric: tabular-nums; } .ai-operations-qualification { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 10px 12px; border-left: 3px solid var(--vd-accent); background: var(--vd-surface-muted); } .ai-operations-qualification span { color: var(--vd-ink-muted); font-size: 12px; line-height: 1.45; text-align: right; } .ai-operations-profile { display: grid; gap: 7px; } .ai-ops-profile-slot { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 11px; border: 1px solid var(--vd-line); border-radius: 5px; background: var(--vd-surface-raised); } .ai-ops-profile-slot > div:nth-child(2) strong, .ai-ops-profile-slot > div:nth-child(2) span { display: block; } .ai-ops-profile-slot > div:nth-child(2) span { margin-top: 2px; color: var(--vd-ink-muted); font-size: 11px; } .ai-ops-profile-slot.is-good { border-color: color-mix(in srgb, var(--vd-success) 42%, var(--vd-line)); } .ai-ops-profile-slot.is-bad { border-color: color-mix(in srgb, var(--vd-danger) 42%, var(--vd-line)); } .ai-ops-profile-slot.is-pending { border-style: dashed; } .ai-ops-table { display: grid; border: 1px solid var(--vd-line); border-radius: 5px; overflow: hidden; } .ai-ops-table-row { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(90px, .7fr)); gap: 8px; align-items: center; padding: 9px 10px; border-top: 1px solid var(--vd-line); } .ai-ops-table-row:first-child { border-top: 0; } .ai-ops-table-row.is-head { background: var(--vd-surface-muted); color: var(--vd-ink-muted); font-size: 11px; font-weight: 700; } .ai-ops-table-row span { min-width: 0; } .ai-ops-table-row strong, .ai-ops-table-row small { display: block; overflow: hidden; text-overflow: ellipsis; } .ai-ops-table-row small { margin-top: 2px; color: var(--vd-ink-muted); font-size: 10px; white-space: nowrap; } .ai-operations-events { margin-top: 14px; } .ai-operations-events h4 { margin: 0 0 7px; font-size: 12px; } .ai-ops-event { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 7px 0; border-top: 1px solid var(--vd-line); } .ai-ops-event-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vd-ink-muted); } .ai-ops-event-dot.is-good { background: var(--vd-success); } .ai-ops-event-dot.is-bad { background: var(--vd-danger); } .ai-ops-event-dot.is-pending { background: var(--vd-warning); } .ai-ops-event strong, .ai-ops-event small { display: block; } .ai-ops-event small, .ai-ops-event time { color: var(--vd-ink-muted); font-size: 10px; } @media (max-width: 1180px) { .dashboard-chart-grid { grid-template-columns: 1fr; } .dashboard-chart-grid > .dashboard-card { grid-column: auto; } .dashboard-category-chart { grid-template-columns: minmax(130px, 32%) minmax(0, 1fr); } .today-ready-grid { grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); } } @media (max-width: 760px) { .dashboard-kpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr)); } .dashboard-kpi { min-height: 126px; } .dashboard-category-chart { grid-template-columns: 1fr; justify-items: center; } .dashboard-category-legend { width: 100%; } .dashboard-line-card .dashboard-chart { height: 220px; overflow: hidden; } .dashboard-line-card svg { min-width: 0; width: 100%; } .today-ready-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding-inline: 9px; } .today-product-media { min-height: 125px; padding: 7px; } } @media (max-width: 520px) { .dashboard-kpis { grid-template-columns: 1fr; } .dashboard-kpi { min-height: 112px; grid-template-columns: 26px minmax(0, 1fr) minmax(90px, 34%); grid-template-rows: auto; align-items: center; } .dashboard-kpi-icon { grid-column: 1; grid-row: 1; } .dashboard-kpi > div { grid-column: 2; grid-row: 1; } .dashboard-kpi svg { grid-column: 3; grid-row: 1; height: 44px; } .today-ready-grid { grid-template-columns: 1fr; } .today-product-card { display: grid; grid-template-columns: minmax(112px, 36%) minmax(0, 1fr); grid-template-rows: 1fr; } .today-product-media { height: 100%; min-height: 125px; aspect-ratio: auto; } } .today-image-placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: var(--vd-ink-muted); font-size: 9px; text-align: center; } @media (max-width: 760px) and (min-width: 521px) { .today-product-card { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } } .sidebar-logo{width:100%;display:flex;align-items:center;justify-content:flex-start;min-width:0} .brand-logo-full{display:block;width:124px;max-width:100%;height:auto;object-fit:contain;object-position:left center} .brand-logo-icon{display:none;width:34px;height:34px;object-fit:contain} @media(max-width:1024px){ .sidebar-logo{justify-content:center} .brand-logo-full{display:none} .brand-logo-icon{display:block} } .ai-model-card { margin-top: 16px; padding: 14px; border: 1px solid var(--vd-line); border-radius: 5px; background: var(--vd-surface-raised); display: grid; gap: 12px; } .ai-model-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .ai-model-card-head > div:first-child { display: flex; gap: 12px; } .ai-model-card h4 { margin: 0 0 4px; font-size: 15px; } .ai-model-card p { margin: 0; color: var(--vd-ink-muted); font-size: 12px; line-height: 1.45; } .ai-model-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; } .ai-model-controls label { display: grid; gap: 6px; font-size: 12px; color: var(--vd-ink-muted); } .ai-model-controls .small-btn { height: 40px; justify-content: center; } .ai-model-status { font-size: 12px; padding: 9px 10px; border: 1px solid var(--vd-line); border-radius: 5px; background: var(--vd-surface); color: var(--vd-ink); } .ai-model-status.is-working { border-color: color-mix(in srgb, var(--vd-warning) 38%, var(--vd-line)); } .ai-model-status.is-success { border-color: color-mix(in srgb, var(--vd-success) 42%, var(--vd-line)); } .ai-model-status.is-danger { border-color: color-mix(in srgb, var(--vd-danger) 42%, var(--vd-line)); } .ai-model-grid { display: grid; gap: 12px; } .ai-model-grid-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .ai-model-grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .ai-model-shot-card { border: 1px solid var(--vd-line); border-radius: 5px; padding: 8px; background: var(--vd-surface); display: grid; gap: 8px; } .ai-model-shot-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 5px; border: 1px solid var(--vd-line); background: var(--vd-paper); } .ai-model-shot-copy { display: flex; justify-content: space-between; gap: 8px; align-items: center; } .ai-model-shot-copy strong, .ai-model-shot-copy span { font-size: 12px; } .detail-ai-model-card { margin-top: 14px; } @media (max-width: 980px) { .ai-model-controls { grid-template-columns: 1fr; } .ai-model-grid-head { flex-direction: column; align-items: stretch; } } .settings-form { max-width: 920px; } .ai-settings-card { border: 1px solid var(--vd-line); border-radius: 5px; padding: 16px; background: var(--vd-surface-raised); } .ai-settings-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 14px; } .ai-settings-head h3 { margin: 0 0 4px; font-size: 16px; } .ai-settings-head p { margin: 0; color: var(--vd-ink-muted); font-size: 12px; } .ai-settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; } .ai-settings-grid > div { min-width: 0; } .setting-inline-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin-bottom: 14px; } .setting-inline-checks label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; cursor: pointer; } .setting-inline-checks input { margin: 0; } .inline-input-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; } .compact-inline { white-space: nowrap; height: 40px; } .ai-models-status { font-size: 12px; border: 1px solid var(--vd-line); border-radius: 5px; background: var(--vd-surface); padding: 10px 12px; color: var(--vd-ink); } .openrouter-models-preview { margin-top: 12px; display: grid; gap: 10px; } .openrouter-model-card { border: 1px solid var(--vd-line); border-radius: 5px; background: var(--vd-surface); padding: 12px; display: grid; gap: 8px; } .openrouter-model-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; } .openrouter-model-top strong { display: block; font-size: 13px; } .openrouter-model-top span { display: block; color: var(--vd-ink-muted); font-size: 12px; margin-top: 2px; } .openrouter-model-badges { display: flex; gap: 6px; flex-wrap: wrap; } .openrouter-badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 5px; font-size: 11px; border: 1px solid var(--vd-line); background: var(--vd-surface-raised); } .openrouter-badge.is-free { border-color: color-mix(in srgb, var(--vd-success) 45%, var(--vd-line)); } .openrouter-model-description { margin: 0; color: var(--vd-ink-muted); font-size: 12px; line-height: 1.45; } @media (max-width: 960px) { .ai-settings-grid, .setting-inline-checks { grid-template-columns: 1fr; } .inline-input-actions { grid-template-columns: 1fr; } } .openrouter-listing-selector { display: grid; gap: 12px; } .openrouter-selection-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .openrouter-selection-head label, .openrouter-model-search span { display: block; font-weight: 650; color: var(--vd-ink); } .openrouter-selection-head small { display: block; margin-top: 4px; color: var(--vd-ink-muted); line-height: 1.45; } .openrouter-selection-head > strong { flex: 0 0 auto; min-width: 54px; text-align: center; border: 1px solid var(--vd-line); border-radius: 5px; background: var(--vd-surface-raised); padding: 7px 9px; font-size: 12px; } .openrouter-selected-models { display: grid; gap: 8px; } .openrouter-selected-empty { border: 1px dashed var(--vd-line-strong); border-radius: 5px; padding: 12px; color: var(--vd-ink-muted); font-size: 12px; background: var(--vd-surface-muted); } .openrouter-selected-model { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--vd-line); border-radius: 5px; padding: 10px 12px; background: var(--vd-surface-raised); } .openrouter-selected-priority { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 5px; background: var(--vd-ink); color: var(--vd-canvas); font-size: 12px; font-weight: 750; } .openrouter-selected-copy { min-width: 0; } .openrouter-selected-copy strong, .openrouter-selected-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .openrouter-selected-copy strong { font-size: 13px; } .openrouter-selected-copy span { margin-top: 2px; color: var(--vd-ink-muted); font-size: 11px; } .openrouter-selected-actions { display: inline-flex; align-items: center; gap: 4px; } .openrouter-selected-actions button { width: 32px; height: 32px; border: 1px solid var(--vd-line); border-radius: 5px; background: var(--vd-surface); color: var(--vd-ink); cursor: pointer; } .openrouter-selected-actions button:hover:not(:disabled) { background: var(--vd-surface-hover); } .openrouter-selected-actions button:disabled { opacity: .35; cursor: default; } .openrouter-catalog-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; } .openrouter-model-search { display: grid; gap: 6px; } .openrouter-model-search span { font-size: 12px; } .openrouter-listing-status { color: var(--vd-ink-muted); font-size: 12px; line-height: 1.45; } .openrouter-model-preview { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .openrouter-model-card.is-selectable { position: relative; cursor: pointer; transition: border-color var(--vd-motion-fast), background var(--vd-motion-fast); } .openrouter-model-card.is-selectable:hover { border-color: var(--vd-line-strong); } .openrouter-model-card.is-selected { border-color: var(--vd-brand); background: var(--vd-brand-soft); } .openrouter-model-choice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; } .openrouter-model-choice input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--vd-brand); } .openrouter-model-choice-copy { min-width: 0; } .openrouter-model-priority-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; padding: 0 7px; border-radius: 5px; background: var(--vd-ink); color: var(--vd-canvas); font-size: 11px; font-weight: 750; } .openrouter-model-limit-note { color: var(--vd-warning); font-size: 11px; font-weight: 650; } @media (max-width: 760px) { .openrouter-model-preview { grid-template-columns: 1fr; } .openrouter-catalog-toolbar { grid-template-columns: 1fr; } .openrouter-selection-head { align-items: stretch; } .openrouter-selected-model { grid-template-columns: auto minmax(0, 1fr); } .openrouter-selected-actions { grid-column: 1 / -1; justify-content: flex-end; } } .ai-generation-history-wrap { display: grid; gap: 10px; } .ai-generation-history-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; } .ai-generation-history-head strong, .ai-generation-history-head span, .ai-generation-empty { font-size: 12px; } .ai-generation-history-head span, .ai-generation-empty { color: var(--vd-ink-muted); } .ai-generation-history { display: grid; gap: 10px; } .ai-generation-card { border: 1px solid var(--vd-line); border-radius: 5px; padding: 10px; background: var(--vd-surface); display: grid; gap: 10px; } .ai-generation-card header { display: flex; justify-content: space-between; gap: 8px; align-items: center; } .ai-generation-card header strong, .ai-generation-card header span { font-size: 12px; } .ai-generation-mini-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .ai-generation-thumb { border: 1px solid var(--vd-line); border-radius: 5px; background: var(--vd-surface-raised); padding: 0; overflow: hidden; cursor: pointer; } .ai-generation-thumb img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; } .sidebar-close { display: none; width: 36px; height: 36px; align-items: center; justify-content: center; border: 1px solid var(--vd-line); border-radius: 5px; background: var(--vd-surface-muted); color: var(--vd-ink); cursor: pointer; } @media (max-width: 900px) { body.mobile-nav-open { overflow: hidden; overscroll-behavior: none; } .sidebar { display: flex; width: min(86vw, 310px); max-width: 310px; transform: translate3d(-105%, 0, 0); transition: transform .22s ease; z-index: 320; box-shadow: none; overflow-y: auto; visibility: visible; pointer-events: none; } .sidebar.open { transform: translate3d(0, 0, 0); box-shadow: 10px 0 34px color-mix(in srgb,var(--vd-ink) 24%,transparent); visibility: visible; pointer-events: auto; } .sidebar-header { min-height: var(--vd-topbar-height); height: auto; padding: 10px 12px 10px 16px; justify-content: space-between; gap: 12px; } .sidebar-logo { justify-content: flex-start; min-width: 0; } .brand-logo-full { display: block; max-width: 150px; height: 34px; object-fit: contain; object-position: left center; } .brand-logo-icon { display: none; } .sidebar-close { display: inline-flex; flex: 0 0 auto; } .sidebar-nav { padding: 12px 10px 8px; } .nav-item, .nav-item-quiet { justify-content: flex-start; min-height: 44px; padding: 0 12px; gap: 12px; font-size: 14px; } .nav-item span, .nav-group-label, .sidebar-footer .theme-toggle span, .sidebar-user-info { display: block; } .nav-item .nav-badge { display: inline-flex; flex: 0 0 auto; margin-left: auto; } .sidebar-footer .theme-toggle { justify-content: flex-start; padding: 0 10px; } .sidebar-user { text-align: left; } .sidebar-overlay { position: fixed; inset: 0; z-index: 310; display: block; opacity: 0; visibility: hidden; pointer-events: none; background: color-mix(in srgb,var(--vd-ink) 46%,transparent); backdrop-filter: blur(2px); transition: opacity .18s ease, visibility .18s ease; } .sidebar-overlay.show { display: block; opacity: 1; visibility: visible; pointer-events: auto; } .sidebar-toggle { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border: 1px solid var(--vd-line); border-radius: 5px; background: var(--vd-surface); position: relative; z-index: 2; touch-action: manipulation; } } .local-flux-install-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; } .local-flux-install-options label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--vd-ink); } .local-flux-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .local-flux-progress { display: grid; gap: 8px; margin-top: 12px; } .local-flux-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; } .local-flux-progress-track { height: 10px; border-radius: 5px; background: var(--vd-surface); border: 1px solid var(--vd-line); overflow: hidden; } .local-flux-progress-track > div { height: 100%; width: 0; background: var(--vd-brand); transition: width .25s ease; } @media (max-width: 980px) { .local-flux-install-options { grid-template-columns: 1fr; } .local-flux-actions { display: grid; grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .local-flux-actions { grid-template-columns: 1fr; } } .local-flux-status-panel { margin-top: 12px; border: 1px solid var(--vd-line); border-radius: 5px; background: var(--vd-surface); padding: 12px; display: grid; gap: 12px; } .local-flux-status-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .local-flux-status-head > div { display: grid; gap: 3px; } .local-flux-status-head strong { font-size: 13px; } .local-flux-status-head span { font-size: 11px; color: var(--vd-ink-muted); } .local-flux-checks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .local-flux-check { border: 1px solid var(--vd-line); border-radius: 5px; background: var(--vd-surface-raised); padding: 9px; display: grid; gap: 4px; min-width: 0; } .local-flux-check strong { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .local-flux-check span { font-size: 11px; color: var(--vd-ink-muted); } .local-flux-check.is-ok { border-color: color-mix(in srgb, var(--vd-success) 42%, var(--vd-line)); } .local-flux-check.is-missing { border-color: color-mix(in srgb, var(--vd-warning) 40%, var(--vd-line)); } .local-flux-error { border: 1px solid color-mix(in srgb, var(--vd-danger) 45%, var(--vd-line)); background: color-mix(in srgb, var(--vd-danger) 7%, var(--vd-surface-raised)); border-radius: 5px; padding: 10px; font-size: 12px; line-height: 1.45; white-space: pre-wrap; } .local-flux-log-details { border-top: 1px solid var(--vd-line); padding-top: 8px; } .local-flux-log-details summary { cursor: pointer; font-size: 12px; font-weight: 600; } .local-flux-log-details pre { margin: 10px 0 0; max-height: 260px; overflow: auto; border: 1px solid var(--vd-line); border-radius: 5px; padding: 10px; background: var(--vd-surface-raised); font-size: 11px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; } @media (max-width: 1100px) { .local-flux-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .local-flux-checks { grid-template-columns: 1fr; } .local-flux-status-head { flex-direction: column; } } .local-flux-live-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .local-flux-live-metrics > div { border: 1px solid var(--vd-line); border-radius: 5px; padding: 9px 10px; background: var(--vd-surface-raised); display: grid; gap: 3px; min-width: 0; } .local-flux-live-metrics span { color: var(--vd-ink-muted); font-size: 11px; } .local-flux-live-metrics strong { font-size: 12px; overflow-wrap: anywhere; } .local-flux-state-value.is-running { color: var(--vd-brand); } .local-flux-state-value.is-completed { color: var(--vd-success); } .local-flux-state-value.is-failed, .local-flux-state-value.is-stalled { color: var(--vd-danger); } .local-flux-progress-track > div.is-stalled { animation: local-flux-pulse 1s ease-in-out infinite alternate; } .local-flux-progress-track > div.is-failed { background: var(--vd-danger); } @keyframes local-flux-pulse { from { opacity: .45; } to { opacity: 1; } } @media (max-width: 980px) { .local-flux-live-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .local-flux-live-metrics { grid-template-columns: 1fr; } } .settings-workspace { padding-bottom: 96px; } .settings-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px; margin-bottom: 18px; border: 1px solid var(--vd-line); border-radius: 10px; background: radial-gradient(circle at 92% 16%, color-mix(in srgb, var(--vd-brand) 16%, transparent), transparent 38%), linear-gradient(135deg, var(--vd-surface-raised), var(--vd-surface)); overflow: hidden; } .settings-hero-copy { max-width: 720px; } .settings-eyebrow { display: inline-block; margin-bottom: 6px; color: var(--vd-brand); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .settings-hero h2 { margin: 0 0 8px; font-size: clamp(24px, 3vw, 38px); letter-spacing: -.04em; } .settings-hero p { margin: 0; color: var(--vd-ink-muted); line-height: 1.55; } .settings-hero-status { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 10px; min-width: min(390px, 100%); } .settings-status-chip { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 12px 14px; border: 1px solid var(--vd-line); border-radius: 8px; background: color-mix(in srgb, var(--vd-surface-raised) 90%, transparent); } .settings-status-chip > div { display: grid; gap: 2px; } .settings-status-chip small { color: var(--vd-ink-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; } .settings-status-chip strong { font-size: 12px; } .settings-status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--vd-ink-muted); box-shadow: 0 0 0 5px color-mix(in srgb, var(--vd-ink-muted) 12%, transparent); } .settings-status-chip.is-running .settings-status-dot { background: var(--vd-success); box-shadow: 0 0 0 5px color-mix(in srgb, var(--vd-success) 14%, transparent); } .settings-status-chip.is-stopped .settings-status-dot { background: var(--vd-warning); box-shadow: 0 0 0 5px color-mix(in srgb, var(--vd-warning) 14%, transparent); } .settings-status-chip.is-disabled .settings-status-dot, .settings-status-chip.is-not-installed .settings-status-dot { background: var(--vd-ink-muted); } .settings-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; align-items: start; } .settings-nav { position: sticky; top: 14px; display: grid; gap: 8px; padding: 10px; border: 1px solid var(--vd-line); border-radius: 10px; background: var(--vd-surface-raised); } .settings-nav-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; width: 100%; min-height: 62px; padding: 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--vd-ink); text-align: left; cursor: pointer; transition: .18s ease; } .settings-nav-item:hover { background: var(--vd-surface); border-color: var(--vd-line); } .settings-nav-item.active { background: color-mix(in srgb, var(--vd-brand) 10%, var(--vd-surface)); border-color: color-mix(in srgb, var(--vd-brand) 32%, var(--vd-line)); } .settings-nav-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 7px; background: var(--vd-surface); color: var(--vd-brand); font-size: 16px; } .settings-nav-item.active .settings-nav-icon { background: var(--vd-brand); color: var(--vd-on-accent); } .settings-nav-item > span:last-child { display: grid; gap: 2px; min-width: 0; } .settings-nav-item strong { font-size: 13px; } .settings-nav-item small { color: var(--vd-ink-muted); font-size: 10px; } .settings-panels { min-width: 0; } .settings-panel { display: none; gap: 14px; } .settings-panel.active { display: grid; } .settings-panel-head { padding: 4px 2px 2px; } .settings-panel-head > div { display: grid; grid-template-columns: 36px minmax(0,1fr); column-gap: 10px; align-items: center; } .settings-panel-head span { grid-row: 1 / 3; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: color-mix(in srgb, var(--vd-brand) 12%, var(--vd-surface)); color: var(--vd-brand); font-size: 11px; font-weight: 800; } .settings-panel-head h3 { margin: 0; font-size: 20px; letter-spacing: -.02em; } .settings-panel-head p { margin: 2px 0 0; color: var(--vd-ink-muted); font-size: 12px; } .settings-card, .flux-command-card { border: 1px solid var(--vd-line); border-radius: 10px; background: var(--vd-surface-raised); padding: 18px; box-shadow: var(--vd-shadow-soft); } .settings-card-grid { display: grid; gap: 14px; } .settings-card-grid.two-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .settings-card-grid.three-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } .settings-field-grid { display: grid; gap: 12px; } .settings-field-grid.four-cols { grid-template-columns: repeat(4, minmax(0,1fr)); } .settings-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .settings-card-head > div { display: grid; gap: 3px; } .settings-card-head strong { font-size: 14px; } .settings-card-head small { color: var(--vd-ink-muted); font-size: 11px; line-height: 1.4; } .settings-card-head.split { align-items: center; } .settings-card .setting-group { margin: 0; } .settings-card .setting-group + .setting-group { margin-top: 12px; } .compact-top { max-width: 520px; margin-top: 14px; } .full-span { grid-column: 1 / -1; } .checkbox-line { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 12px; } .checkbox-line input { width: 16px; height: 16px; accent-color: var(--vd-brand); } .premium-switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; } .premium-switch input { position: absolute; opacity: 0; pointer-events: none; } .premium-switch span { position: relative; width: 42px; height: 23px; border-radius: 999px; background: var(--vd-surface); border: 1px solid var(--vd-line); transition: .2s ease; } .premium-switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--vd-ink-muted); transition: .2s ease; } .premium-switch input:checked + span { background: color-mix(in srgb, var(--vd-success) 18%, var(--vd-surface)); border-color: color-mix(in srgb, var(--vd-success) 55%, var(--vd-line)); } .premium-switch input:checked + span::after { left: 22px; background: var(--vd-success); } .premium-switch b { font-size: 12px; } .premium-switch.large span { width: 54px; height: 29px; } .premium-switch.large span::after { width: 21px; height: 21px; } .premium-switch.large input:checked + span::after { left: 28px; } .reference-control-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; margin: 16px 0; padding: 15px; border: 1px solid color-mix(in srgb, var(--vd-brand) 30%, var(--vd-line)); border-radius: 9px; background: color-mix(in srgb, var(--vd-brand) 6%, var(--vd-surface)); } .reference-control-copy { display: flex; align-items: flex-start; gap: 12px; } .reference-control-copy > div { display: grid; gap: 4px; } .reference-control-copy strong { font-size: 13px; } .reference-control-copy small { color: var(--vd-ink-muted); font-size: 11px; line-height: 1.45; } .reference-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 7px; background: var(--vd-brand); color: var(--vd-on-accent); } .reference-strength-row { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(140px, 1fr) 46px; align-items: center; gap: 10px; } .reference-strength-row label, .reference-strength-row output { font-size: 11px; font-weight: 700; } .reference-strength-row input[type="range"] { width: 100%; accent-color: var(--vd-brand); } .reference-strength-row output { text-align: right; color: var(--vd-brand); } .modern-checks { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; } .modern-checks label { min-height: 44px; padding: 10px 11px; border: 1px solid var(--vd-line); border-radius: 8px; background: var(--vd-surface); font-size: 11px; } .modern-checks input { accent-color: var(--vd-brand); } .settings-disclosure { border: 1px solid var(--vd-line); border-radius: 9px; background: var(--vd-surface); overflow: hidden; } .settings-disclosure summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; } .settings-disclosure summary::-webkit-details-marker { display: none; } .settings-disclosure summary span { font-size: 12px; font-weight: 700; } .settings-disclosure summary small { color: var(--vd-ink-muted); font-size: 10px; } .settings-disclosure[open] summary { border-bottom: 1px solid var(--vd-line); } .disclosure-body { padding: 16px; } .flux-command-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px; align-items: center; background: radial-gradient(circle at 8% 20%, color-mix(in srgb, var(--vd-brand) 15%, transparent), transparent 34%), var(--vd-surface-raised); } .flux-command-main { display: flex; align-items: center; gap: 16px; min-width: 0; } .flux-orb { display: grid; place-items: center; width: 72px; height: 72px; flex: 0 0 auto; border-radius: 22px; background: var(--vd-surface); border: 1px solid var(--vd-line); color: var(--vd-ink-muted); font-size: 11px; font-weight: 900; letter-spacing: .08em; box-shadow: inset 0 0 24px color-mix(in srgb,var(--vd-ink) 6%,transparent); } .flux-orb.is-running { color: var(--vd-on-accent); background: linear-gradient(145deg, var(--vd-brand), color-mix(in srgb, var(--vd-brand) 58%, var(--vd-data-purple))); border-color: transparent; box-shadow: 0 0 0 8px color-mix(in srgb, var(--vd-brand) 10%, transparent), 0 12px 30px color-mix(in srgb, var(--vd-brand) 24%, transparent); } .flux-orb.is-stopped { color: var(--vd-warning); border-color: color-mix(in srgb, var(--vd-warning) 45%, var(--vd-line)); } .flux-command-copy { min-width: 0; } .flux-command-copy > span { color: var(--vd-ink-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; } .flux-command-copy h3 { margin: 4px 0 5px; font-size: 22px; } .flux-command-copy p { margin: 0; color: var(--vd-ink-muted); font-size: 12px; line-height: 1.45; } .flux-command-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 2px; } .flux-health-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; } .flux-health-grid > div { display: grid; gap: 5px; min-height: 72px; padding: 13px; border: 1px solid var(--vd-line); border-radius: 9px; background: var(--vd-surface-raised); } .flux-health-grid span { color: var(--vd-ink-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; } .flux-health-grid strong { font-size: 13px; } .flux-state-badge { display: inline-flex; align-items: center; min-height: 27px; padding: 0 10px; border-radius: 999px; background: var(--vd-surface); border: 1px solid var(--vd-line); font-size: 10px; font-weight: 800; } .flux-state-badge.is-running { color: var(--vd-success); border-color: color-mix(in srgb, var(--vd-success) 45%, var(--vd-line)); background: color-mix(in srgb, var(--vd-success) 8%, var(--vd-surface)); } .flux-state-badge.is-stopped { color: var(--vd-warning); border-color: color-mix(in srgb, var(--vd-warning) 45%, var(--vd-line)); } .flux-state-badge.is-disabled, .flux-state-badge.is-not-installed { color: var(--vd-ink-muted); } .command-actions { margin-top: 14px; } .settings-savebar { position: sticky; bottom: 12px; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--vd-brand) 30%, var(--vd-line)); border-radius: 10px; background: color-mix(in srgb, var(--vd-surface-raised) 92%, transparent); backdrop-filter: blur(14px); box-shadow: var(--vd-shadow-md); } .settings-savebar > div { display: grid; gap: 2px; } .settings-savebar strong { font-size: 12px; } .settings-savebar small { color: var(--vd-ink-muted); font-size: 10px; } .ai-job-progress-card { display: grid; gap: 8px; padding: 12px; } .ai-job-progress-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; } .ai-job-progress-head strong { font-size: 12px; line-height: 1.35; } .ai-job-progress-head span { color: var(--vd-brand); font-size: 12px; font-weight: 800; } .ai-job-progress-track { height: 9px; border-radius: 999px; background: var(--vd-surface); border: 1px solid var(--vd-line); overflow: hidden; } .ai-job-progress-track > div { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--vd-brand), color-mix(in srgb, var(--vd-brand) 60%, var(--vd-data-purple))); transition: width .35s ease; } .ai-job-progress-card small { color: var(--vd-ink-muted); font-size: 10px; } .ai-operations-card { display: grid; gap: 12px; } .ai-operations-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .ai-operations-summary > div { padding: 10px 12px; border: 1px solid var(--vd-line); border-radius: 5px; background: var(--vd-surface-raised); } .ai-operations-summary span, .ai-operations-summary strong { display: block; } .ai-operations-summary span { color: var(--vd-ink-muted); font-size: 11px; } .ai-operations-summary strong { margin-top: 3px; font-size: 18px; font-variant-numeric: tabular-nums; } .ai-operations-qualification { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 10px 12px; border-left: 3px solid var(--vd-accent); background: var(--vd-surface-muted); } .ai-operations-qualification span { color: var(--vd-ink-muted); font-size: 12px; line-height: 1.45; text-align: right; } .ai-operations-profile { display: grid; gap: 7px; } .ai-ops-profile-slot { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 11px; border: 1px solid var(--vd-line); border-radius: 5px; background: var(--vd-surface-raised); } .ai-ops-profile-slot > div:nth-child(2) strong, .ai-ops-profile-slot > div:nth-child(2) span { display: block; } .ai-ops-profile-slot > div:nth-child(2) span { margin-top: 2px; color: var(--vd-ink-muted); font-size: 11px; } .ai-ops-profile-slot.is-good { border-color: color-mix(in srgb, var(--vd-success) 42%, var(--vd-line)); } .ai-ops-profile-slot.is-bad { border-color: color-mix(in srgb, var(--vd-danger) 42%, var(--vd-line)); } .ai-ops-profile-slot.is-pending { border-style: dashed; } .ai-ops-table { display: grid; border: 1px solid var(--vd-line); border-radius: 5px; overflow: hidden; } .ai-ops-table-row { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(90px, .7fr)); gap: 8px; align-items: center; padding: 9px 10px; border-top: 1px solid var(--vd-line); } .ai-ops-table-row:first-child { border-top: 0; } .ai-ops-table-row.is-head { background: var(--vd-surface-muted); color: var(--vd-ink-muted); font-size: 11px; font-weight: 700; } .ai-ops-table-row span { min-width: 0; } .ai-ops-table-row strong, .ai-ops-table-row small { display: block; overflow: hidden; text-overflow: ellipsis; } .ai-ops-table-row small { margin-top: 2px; color: var(--vd-ink-muted); font-size: 10px; white-space: nowrap; } .ai-operations-events { margin-top: 14px; } .ai-operations-events h4 { margin: 0 0 7px; font-size: 12px; } .ai-ops-event { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 7px 0; border-top: 1px solid var(--vd-line); } .ai-ops-event-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vd-ink-muted); } .ai-ops-event-dot.is-good { background: var(--vd-success); } .ai-ops-event-dot.is-bad { background: var(--vd-danger); } .ai-ops-event-dot.is-pending { background: var(--vd-warning); } .ai-ops-event strong, .ai-ops-event small { display: block; } .ai-ops-event small, .ai-ops-event time { color: var(--vd-ink-muted); font-size: 10px; } @media (max-width: 1180px) { .settings-shell { grid-template-columns: 1fr; } .settings-nav { position: static; grid-template-columns: repeat(4, minmax(0,1fr)); } .settings-nav-item { grid-template-columns: 30px minmax(0,1fr); } .settings-field-grid.four-cols { grid-template-columns: repeat(2, minmax(0,1fr)); } .settings-card-grid.three-cols { grid-template-columns: 1fr; } } @media (max-width: 820px) { .settings-hero { align-items: flex-start; flex-direction: column; } .settings-hero-status { width: 100%; min-width: 0; } .settings-nav { display: flex; overflow-x: auto; } .settings-nav-item { flex: 0 0 190px; } .settings-card-grid.two-cols, .settings-field-grid.four-cols, .modern-checks, .flux-health-grid { grid-template-columns: 1fr; } .flux-command-card { grid-template-columns: 1fr; } .flux-command-card > .premium-switch { justify-self: start; } } @media (max-width: 560px) { .settings-hero { padding: 18px; } .settings-hero-status { grid-template-columns: 1fr; } .settings-card, .flux-command-card { padding: 14px; } .reference-control-card { grid-template-columns: 1fr; } .reference-strength-row { grid-template-columns: 1fr auto; } .reference-strength-row input { grid-column: 1 / -1; grid-row: 2; } .settings-savebar { align-items: stretch; flex-direction: column; } .settings-savebar button { width: 100%; } .flux-command-main { align-items: flex-start; } .flux-orb { width: 58px; height: 58px; border-radius: 18px; } } body.ai-prompt-open { overflow: hidden; } .ai-prompt-modal { position: fixed; inset: 0; z-index: 10020; display: grid; place-items: center; padding: 20px; } .ai-prompt-backdrop { position: absolute; inset: 0; background: color-mix(in srgb,var(--vd-ink) 56%,transparent); backdrop-filter: blur(8px); } .ai-prompt-shell { position: relative; width: min(760px, 96vw); max-height: min(86vh, 780px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border: 1px solid var(--vd-line); border-radius: 18px; background: var(--vd-surface-raised); box-shadow: var(--vd-shadow-lg); } .ai-prompt-header, .ai-prompt-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; } .ai-prompt-header { border-bottom: 1px solid var(--vd-line); } .ai-prompt-header h2 { margin: 0; font-size: 20px; } .ai-prompt-header p { margin: 4px 0 0; color: var(--vd-ink-muted); font-size: 12px; } .ai-prompt-body { padding: 20px; overflow: auto; display: grid; gap: 16px; } .ai-prompt-summary { display: flex; flex-wrap: wrap; gap: 10px; } .ai-prompt-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--vd-line); border-radius: 999px; background: var(--vd-surface); font-size: 12px; font-weight: 700; } .ai-prompt-field { display: grid; gap: 8px; } .ai-prompt-field > span { font-weight: 700; } .ai-prompt-field textarea { width: 100%; resize: vertical; min-height: 160px; padding: 14px; border: 1px solid var(--vd-line); border-radius: 12px; background: var(--vd-surface); color: var(--vd-ink); font: inherit; } .ai-prompt-field small { color: var(--vd-ink-muted); } .ai-prompt-check { padding: 12px 14px; border: 1px solid var(--vd-line); border-radius: 12px; background: var(--vd-surface); } .ai-prompt-footer-actions { display: flex; align-items: center; gap: 10px; } @media (max-width: 760px) { .ai-prompt-shell { width: 100%; } .ai-prompt-header, .ai-prompt-footer { padding: 14px; } .ai-prompt-body { padding: 14px; } .ai-prompt-footer { flex-direction: column; align-items: stretch; } .ai-prompt-footer-actions { width: 100%; justify-content: stretch; } .ai-prompt-footer-actions > .vd-button, .ai-prompt-footer > .vd-button { flex: 1 1 auto; } } .flux-studio-page { padding-bottom: 36px; } .flux-studio-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; } .flux-studio-engine-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; } .flux-studio-layout { display:grid; grid-template-columns:minmax(340px,.88fr) minmax(420px,1.12fr); gap:18px; align-items:start; } .flux-studio-card { min-width:0; padding:20px; border:1px solid var(--vd-line); border-radius:16px; background:var(--vd-surface-raised); box-shadow:var(--vd-shadow-sm); } .flux-studio-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:16px; } .flux-studio-card-head>div { display:flex; align-items:center; gap:9px; min-width:0; } .flux-studio-card-head>div>span { display:grid; place-items:center; width:26px; height:26px; flex:0 0 auto; border-radius:8px; background:var(--vd-brand-soft); color:var(--vd-brand); font-size:10px; font-weight:850; } .flux-studio-card-head h3 { margin:0; font-size:15px; } .flux-studio-card-head small { color:var(--vd-ink-muted); font-size:10px; text-align:right; } .flux-studio-prompt-field { display:grid; gap:8px; } .flux-studio-prompt-field>span { font-size:11px; font-weight:800; } .flux-studio-prompt-field textarea { width:100%; min-height:210px; resize:vertical; padding:14px; border:1px solid var(--vd-line); border-radius:12px; background:var(--vd-surface); color:var(--vd-ink); font:inherit; line-height:1.55; } .flux-studio-prompt-field textarea:focus { outline:2px solid color-mix(in srgb,var(--vd-brand) 28%,transparent); border-color:var(--vd-brand); } .flux-studio-prompt-field small { justify-self:end; color:var(--vd-ink-muted); font-size:9px; } .flux-studio-template-row { display:flex; gap:7px; flex-wrap:wrap; margin:12px 0 16px; } .flux-studio-template-row button { min-height:30px; padding:6px 10px; border:1px solid var(--vd-line); border-radius:999px; background:var(--vd-surface); color:var(--vd-ink); font-size:9px; font-weight:750; cursor:pointer; } .flux-studio-template-row button:hover { border-color:var(--vd-brand); color:var(--vd-brand); } .flux-studio-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .flux-studio-fields label { display:grid; gap:6px; font-size:10px; font-weight:750; } .flux-studio-fields select,.flux-studio-fields input { width:100%; min-height:38px; } .flux-seed-input { display:grid; grid-template-columns:minmax(0,1fr) 38px; gap:6px; } .flux-seed-input button { border:1px solid var(--vd-line); border-radius:9px; background:var(--vd-surface); color:var(--vd-ink); cursor:pointer; font-size:17px; } .flux-studio-run-row { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:18px; } #flux-studio-status { min-width:0; color:var(--vd-ink-muted); font-size:10px; text-align:right; } #flux-studio-status[data-tone="success"] { color:var(--vd-success); } #flux-studio-status[data-tone="error"] { color:var(--vd-danger); } .flux-studio-progress { display:grid; gap:7px; margin-top:14px; } .flux-studio-progress>div:first-child { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--vd-ink-muted); font-size:10px; } #flux-studio-progress-bar { width:0; height:100%; background:var(--vd-brand); transition:width .25s ease; } .flux-studio-preview-card { position:sticky; top:18px; } .flux-studio-preview { min-height:520px; display:grid; place-items:center; overflow:hidden; border:1px solid var(--vd-line); border-radius:14px; background:linear-gradient(135deg,var(--vd-surface-muted),var(--vd-surface)); } .flux-studio-preview img { display:block; width:100%; max-height:680px; object-fit:contain; } .flux-studio-preview-empty { display:grid; justify-items:center; gap:7px; padding:34px; text-align:center; color:var(--vd-ink-muted); } .flux-studio-preview-empty b { font-size:34px; color:var(--vd-brand); } .flux-studio-preview-empty strong { color:var(--vd-ink); font-size:14px; } .flux-studio-preview-empty span { font-size:10px; } .flux-studio-preview-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; } .flux-studio-preview-actions .danger { margin-left:auto; } .flux-studio-history-section { margin-top:22px; } .flux-studio-history-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:13px; } .flux-studio-history-head h3 { margin:2px 0 0; } .flux-studio-history { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; } .flux-history-card { min-width:0; overflow:hidden; border:1px solid var(--vd-line); border-radius:14px; background:var(--vd-surface-raised); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; } .flux-history-card:hover { transform:translateY(-2px); box-shadow:var(--vd-shadow-sm); } .flux-history-card.is-selected { border-color:var(--vd-brand); box-shadow:0 0 0 2px color-mix(in srgb,var(--vd-brand) 12%,transparent); } .flux-history-image { width:100%; height:190px; padding:0; border:0; background:var(--vd-surface-muted); cursor:pointer; } .flux-history-image img { display:block; width:100%; height:100%; object-fit:cover; } .flux-history-copy { display:grid; gap:5px; padding:11px 12px 7px; } .flux-history-copy strong { overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:10px; line-height:1.4; } .flux-history-copy small { color:var(--vd-ink-muted); font-size:8px; } .flux-history-actions { display:flex; gap:6px; padding:7px 12px 12px; } .flux-history-actions .small-btn { min-height:28px; padding:5px 8px; font-size:8px; } .flux-history-actions .danger { color:var(--vd-danger); } @media(max-width:1180px){.flux-studio-layout{grid-template-columns:1fr}.flux-studio-preview-card{position:static}.flux-studio-history{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:820px){.flux-studio-heading{flex-direction:column}.flux-studio-engine-actions{justify-content:flex-start}.flux-studio-history{grid-template-columns:repeat(2,minmax(0,1fr))}.flux-studio-preview{min-height:380px}} @media(max-width:560px){.flux-studio-card{padding:14px}.flux-studio-fields{grid-template-columns:1fr}.flux-studio-run-row{align-items:stretch;flex-direction:column}.flux-studio-run-row .vd-button{width:100%}#flux-studio-status{text-align:left}.flux-studio-preview-actions{display:grid;grid-template-columns:1fr}.flux-studio-preview-actions .danger{margin-left:0}.flux-studio-history{grid-template-columns:1fr}.flux-history-image{height:240px}.flux-studio-engine-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.flux-studio-engine-actions .settings-status-chip{grid-column:1/-1}} .settings-workspace { --settings-radius: 16px; } .settings-hero { border-radius: var(--settings-radius); padding: 22px 24px; box-shadow: var(--vd-shadow-sm); } .settings-shell { display: block; } .settings-nav { position: sticky; top: 10px; z-index: 15; display: flex; gap: 6px; width: 100%; margin-bottom: 18px; padding: 6px; overflow-x: auto; scrollbar-width: thin; border: 1px solid var(--vd-line); border-radius: 14px; background: color-mix(in srgb, var(--vd-surface-raised) 92%, transparent); box-shadow: var(--vd-shadow-sm); backdrop-filter: blur(18px); } .settings-nav-item { flex: 1 1 0; min-width: 150px; min-height: 54px; grid-template-columns: 32px minmax(0,1fr); padding: 8px 12px; border: 1px solid transparent; border-radius: 10px; } .settings-nav-item:hover { transform: translateY(-1px); } .settings-nav-item.active { background: var(--vd-surface-raised); box-shadow: var(--vd-shadow-sm); } .settings-nav-item small { display: none; } .settings-nav-icon { width: 30px; height: 30px; border-radius: 9px; } .settings-panel { animation: settings-panel-in .22s ease both; } @keyframes settings-panel-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } .settings-panel-head { padding: 6px 2px 10px; border-bottom: 1px solid var(--vd-line); margin-bottom: 2px; } .settings-card, .flux-command-card, .local-flux-status-panel, .settings-disclosure { border-radius: 14px; border-color: color-mix(in srgb, var(--vd-line) 88%, var(--vd-brand)); box-shadow: var(--vd-shadow-soft); } .settings-card:hover { border-color: color-mix(in srgb, var(--vd-brand) 24%, var(--vd-line)); } .settings-savebar { position: sticky; bottom: 12px; z-index: 20; border-radius: 14px; } .settings-inline-note { display:flex; align-items:flex-start; gap:10px; margin-top:14px; padding:11px 12px; border:1px solid var(--vd-line); border-radius:10px; background:var(--vd-surface); color:var(--vd-ink-muted); font-size:10px; line-height:1.45; } .settings-inline-note strong { color:var(--vd-brand); } .flux-studio-heading { padding: 22px 24px; margin-bottom: 18px; border: 1px solid var(--vd-line); border-radius: 18px; background: radial-gradient(circle at 88% 12%, color-mix(in srgb,var(--vd-brand) 18%,transparent), transparent 34%), linear-gradient(135deg,var(--vd-surface-raised),var(--vd-surface)); box-shadow:var(--vd-shadow-sm); } .flux-studio-card { border-radius:18px; } .flux-studio-controls { background: linear-gradient(180deg, color-mix(in srgb,var(--vd-brand) 3%,var(--vd-surface-raised)), var(--vd-surface-raised)); } .flux-prompt-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:12px 0 10px; } .flux-prompt-toolbar .flux-studio-template-row { margin:0; } .flux-optimize-button { flex:0 0 auto; min-height:32px; color:var(--vd-brand); border-color:color-mix(in srgb,var(--vd-brand) 38%,var(--vd-line)); } .flux-prompt-quality { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:15px; padding:10px 12px; border:1px solid var(--vd-line); border-radius:11px; background:var(--vd-surface); } .flux-prompt-quality > span { display:flex; align-items:center; gap:7px; flex:0 0 auto; font-size:9px; } .flux-prompt-quality i { width:8px; height:8px; border-radius:50%; background:var(--vd-ink-muted); box-shadow:0 0 0 4px color-mix(in srgb,var(--vd-ink-muted) 12%,transparent); } .flux-prompt-quality p { margin:0; color:var(--vd-ink-muted); font-size:9px; text-align:right; } .flux-prompt-quality[data-level="weak"] i { background:var(--vd-danger); } .flux-prompt-quality[data-level="good"] i { background:var(--vd-warning); } .flux-prompt-quality[data-level="strong"] i { background:var(--vd-success); } .flux-profile-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:14px; } .flux-profile-strip button { display:grid; gap:3px; min-width:0; padding:10px; text-align:left; border:1px solid var(--vd-line); border-radius:11px; background:var(--vd-surface); color:var(--vd-ink); cursor:pointer; transition:.18s ease; } .flux-profile-strip button:hover { transform:translateY(-1px); border-color:var(--vd-brand); } .flux-profile-strip button.active { border-color:var(--vd-brand); background:var(--vd-brand-soft); box-shadow:0 0 0 2px color-mix(in srgb,var(--vd-brand) 10%,transparent); } .flux-profile-strip strong { font-size:10px; } .flux-profile-strip small { color:var(--vd-ink-muted); font-size:8px; line-height:1.35; } .flux-studio-preview { position:relative; background-image: linear-gradient(45deg,color-mix(in srgb,var(--vd-line) 35%,transparent) 25%,transparent 25%),linear-gradient(-45deg,color-mix(in srgb,var(--vd-line) 35%,transparent) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,color-mix(in srgb,var(--vd-line) 35%,transparent) 75%),linear-gradient(-45deg,transparent 75%,color-mix(in srgb,var(--vd-line) 35%,transparent) 75%); background-size:20px 20px; background-position:0 0,0 10px,10px -10px,-10px 0; } .flux-studio-preview img { position:relative; z-index:1; background:var(--vd-surface); } .flux-studio-preview-actions { padding-top:12px; border-top:1px solid var(--vd-line); } .flux-studio-preview-actions .primary { box-shadow:0 7px 20px color-mix(in srgb,var(--vd-brand) 22%,transparent); } .flux-history-card { border-radius:16px; } @media(max-width:900px){ .settings-nav-item { flex:0 0 165px; } .flux-profile-strip { grid-template-columns:repeat(2,minmax(0,1fr)); } .flux-prompt-toolbar { align-items:stretch; flex-direction:column; } .flux-optimize-button { width:100%; } } @media(max-width:560px){ .settings-nav { top:6px; padding:5px; } .settings-nav-item { flex-basis:138px; min-width:138px; min-height:48px; padding:7px 9px; } .settings-nav-icon { display:none; } .settings-nav-item { grid-template-columns:1fr; } .flux-studio-heading { padding:17px; border-radius:14px; } .flux-profile-strip { grid-template-columns:1fr 1fr; } .flux-prompt-quality { align-items:flex-start; flex-direction:column; } .flux-prompt-quality p { text-align:left; } } .flux-studio-pro-layout { grid-template-columns:minmax(390px,.9fr) minmax(440px,1.1fr); } .flux-studio-side-stack { display:grid; gap:18px; min-width:0; } .flux-order-options { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; margin:14px 0; } .flux-option-block { display:grid; gap:7px; } .flux-option-label { font-size:10px; font-weight:800; color:var(--vd-ink); } .flux-segmented { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; padding:4px; border:1px solid var(--vd-line); border-radius:12px; background:var(--vd-surface-muted); } .flux-segmented button { min-height:34px; border:0; border-radius:8px; background:transparent; color:var(--vd-ink-muted); font-size:10px; font-weight:800; cursor:pointer; } .flux-segmented button:hover { color:var(--vd-ink); } .flux-segmented button.active { background:var(--vd-surface-raised); color:var(--vd-brand); box-shadow:var(--vd-shadow-sm); } .flux-lock-toggle { display:flex; align-items:center; gap:10px; min-height:58px; padding:10px 12px; border:1px solid var(--vd-line); border-radius:12px; background:var(--vd-surface); cursor:pointer; } .flux-lock-toggle input { width:18px; height:18px; accent-color:var(--vd-brand); } .flux-lock-toggle span { display:grid; gap:2px; } .flux-lock-toggle strong { font-size:10px; } .flux-lock-toggle small { color:var(--vd-ink-muted); font-size:9px; line-height:1.35; } .flux-indeterminate-track { position:relative; height:6px; overflow:hidden; border-radius:999px; background:var(--vd-surface-muted); } .flux-indeterminate-track i { position:absolute; inset:0 auto 0 -35%; width:35%; border-radius:999px; background:var(--vd-brand); animation:flux-indeterminate 1.25s ease-in-out infinite; } .flux-studio-progress[data-state="done"] .flux-indeterminate-track i { left:0; width:100%; animation:none; background:var(--vd-success); } .flux-studio-progress[data-state="error"] .flux-indeterminate-track i,.flux-studio-progress[data-state="cancelled"] .flux-indeterminate-track i { left:0; width:100%; animation:none; background:var(--vd-danger); } @keyframes flux-indeterminate { 0%{transform:translateX(0)} 50%{transform:translateX(285%)} 100%{transform:translateX(0)} } .flux-variant-results { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:12px; } .flux-variant-tile { min-width:0; padding:4px; border:1px solid var(--vd-line); border-radius:11px; background:var(--vd-surface); color:var(--vd-ink); cursor:pointer; text-align:left; } .flux-variant-tile.active { border-color:var(--vd-brand); box-shadow:0 0 0 2px color-mix(in srgb,var(--vd-brand) 18%,transparent); } .flux-variant-tile img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px; display:block; } .flux-variant-tile span,.flux-variant-tile small { display:block; padding:4px 4px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .flux-variant-tile span { font-size:9px; font-weight:800; } .flux-variant-tile small { padding-top:1px; color:var(--vd-ink-muted); font-size:8px; } .flux-runtime-card { position:relative; } .flux-runtime-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .flux-runtime-grid>div { display:grid; gap:3px; min-width:0; padding:11px; border:1px solid var(--vd-line); border-radius:12px; background:var(--vd-surface); } .flux-runtime-grid span { color:var(--vd-ink-muted); font-size:9px; font-weight:750; } .flux-runtime-grid strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; } .flux-runtime-grid small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--vd-ink-muted); font-size:8px; } .flux-job-center { margin-top:22px; padding:20px; border:1px solid var(--vd-line); border-radius:18px; background:var(--vd-surface-raised); box-shadow:var(--vd-shadow-sm); } .flux-job-center-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:14px; } .flux-job-center-head h3 { margin:2px 0 3px; } .flux-job-center-head p:last-child { margin:0; color:var(--vd-ink-muted); font-size:10px; } .flux-job-center-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; } .flux-job-center-actions select { min-height:38px; border:1px solid var(--vd-line); border-radius:10px; background:var(--vd-surface); color:var(--vd-ink); padding:0 10px; } .flux-job-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:14px; } .flux-job-summary>div { display:grid; gap:3px; padding:11px 12px; border:1px solid var(--vd-line); border-radius:12px; background:var(--vd-surface); } .flux-job-summary span { color:var(--vd-ink-muted); font-size:9px; } .flux-job-summary strong { font-size:16px; } .flux-job-list { display:grid; gap:10px; } .flux-job-card { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:14px; align-items:center; padding:14px; border:1px solid var(--vd-line); border-radius:14px; background:var(--vd-surface); } .flux-job-card-main { min-width:0; } .flux-job-status-line { display:flex; align-items:center; gap:8px; margin-bottom:7px; } .flux-job-status-line small { color:var(--vd-ink-muted); font-size:8px; } .flux-job-status { display:inline-flex; align-items:center; min-height:22px; padding:3px 8px; border-radius:999px; background:var(--vd-surface-muted); color:var(--vd-ink-muted); font-size:8px; font-weight:850; } .flux-job-status.is-running,.flux-job-status.is-queued { background:color-mix(in srgb,var(--vd-brand) 12%,var(--vd-surface)); color:var(--vd-brand); } .flux-job-status.is-completed { background:color-mix(in srgb,var(--vd-success) 13%,var(--vd-surface)); color:var(--vd-success); } .flux-job-status.is-failed,.flux-job-status.is-cancelled { background:color-mix(in srgb,var(--vd-danger) 12%,var(--vd-surface)); color:var(--vd-danger); } .flux-job-status.is-completed_with_errors,.flux-job-status.is-cancelling { background:color-mix(in srgb,var(--vd-warning) 13%,var(--vd-surface)); color:var(--vd-warning); } .flux-job-prompt { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; } .flux-job-params { display:flex; gap:5px; flex-wrap:wrap; margin-top:7px; } .flux-job-params span { padding:3px 7px; border-radius:999px; background:var(--vd-surface-muted); color:var(--vd-ink-muted); font-size:8px; } .flux-job-card-main p { margin:7px 0 0; color:var(--vd-ink-muted); font-size:9px; line-height:1.45; } .flux-job-card-main p b { color:var(--vd-danger); font-weight:700; } .flux-job-variants { display:flex; gap:6px; flex-wrap:wrap; max-width:220px; justify-content:flex-end; } .flux-job-thumb { position:relative; display:grid; place-items:center; width:48px; height:48px; padding:0; overflow:hidden; border:1px solid var(--vd-line); border-radius:9px; background:var(--vd-surface-muted); color:var(--vd-ink-muted); cursor:pointer; } .flux-job-thumb img { width:100%; height:100%; object-fit:cover; } .flux-job-thumb>span { position:absolute; right:3px; bottom:3px; display:grid; place-items:center; min-width:16px; height:16px; border-radius:999px; background:var(--vd-overlay-control-strong); color:var(--vd-on-accent); font-size:8px; } .flux-job-thumb.is-placeholder { cursor:default; } .flux-job-thumb.is-placeholder span { position:static; background:transparent; color:var(--vd-ink); font-weight:800; } .flux-job-thumb.is-placeholder small { font-size:7px; } .flux-job-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; max-width:190px; } .flux-library-actions { display:flex; align-items:center; gap:10px; } .flux-library-actions label { display:flex; align-items:center; gap:6px; color:var(--vd-ink-muted); font-size:9px; } .flux-history-image { position:relative; } .flux-history-image>span { position:absolute; top:7px; right:7px; color:var(--vd-media-favorite); font-size:18px; text-shadow:0 1px 4px color-mix(in srgb,var(--vd-ink) 45%,transparent); } @media(max-width:1180px){ .flux-studio-pro-layout{grid-template-columns:1fr} .flux-job-card{grid-template-columns:minmax(0,1fr) auto} .flux-job-actions{grid-column:1/-1;justify-content:flex-start;max-width:none} } @media(max-width:820px){ .flux-order-options,.flux-runtime-grid{grid-template-columns:1fr} .flux-job-center-head{align-items:stretch;flex-direction:column} .flux-job-center-actions{justify-content:flex-start} .flux-job-summary{grid-template-columns:repeat(2,minmax(0,1fr))} .flux-job-card{grid-template-columns:1fr} .flux-job-variants{justify-content:flex-start;max-width:none} .flux-job-actions{grid-column:auto} } @media(max-width:560px){ .flux-variant-results{grid-template-columns:repeat(2,minmax(0,1fr))} .flux-job-center{padding:14px} .flux-job-center-actions{display:grid;grid-template-columns:1fr} .flux-job-center-actions>*{width:100%} .flux-job-summary{grid-template-columns:1fr} .flux-library-actions{align-items:flex-start;flex-direction:column} } .flux-job-variant-ledger { display: grid; gap: .38rem; min-width: 0; } .flux-job-variant-ledger > div { display: grid; grid-template-columns: 2.2rem minmax(6.5rem,auto) minmax(6rem,1fr) minmax(7rem,auto); align-items: center; gap: .5rem; padding: .42rem .55rem; border: 1px solid var(--vd-line); border-radius: .65rem; background: color-mix(in srgb, var(--vd-surface) 82%, transparent); font-size: .75rem; } .flux-job-variant-ledger b { color: var(--vd-ink); } .flux-job-variant-ledger span { color: var(--vd-ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .flux-job-variant-ledger code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--vd-ink-muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; } .flux-job-thumb small { display: block; max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 760px) { .flux-job-variant-ledger > div { grid-template-columns: 2rem 1fr; } .flux-job-variant-ledger code { grid-column: 1 / -1; } } .flux-studio-left-stack { display:grid; gap:18px; min-width:0; align-content:start; } .flux-studio-left-stack .flux-runtime-card { position:static; } .flux-job-center-body.hidden { display:none !important; } .flux-job-center-toggle { white-space:nowrap; } .flux-job-card { display:block; padding:0; overflow:hidden; } .flux-job-card-toggle { width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 14px; border:0; color:var(--vd-ink); background:transparent; cursor:pointer; text-align:left; } .flux-job-card-toggle:hover { background:var(--vd-surface-muted); } .flux-job-card-toggle-main { min-width:0; display:flex; align-items:center; gap:9px; flex:1; } .flux-job-card-toggle-main .flux-job-prompt { min-width:0; } .flux-job-card-toggle-meta { display:flex; align-items:center; gap:9px; flex:0 0 auto; color:var(--vd-ink-muted); font-size:8px; } .flux-job-card-toggle-meta i { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:999px; background:var(--vd-surface-muted); color:var(--vd-ink); font-style:normal; font-size:15px; transition:transform .18s ease; } .flux-job-card.is-expanded .flux-job-card-toggle-meta i { transform:rotate(180deg); } .flux-job-card-body { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 14px; align-items:start; padding:0 14px 14px; border-top:1px solid var(--vd-line); } .flux-job-card.is-collapsed .flux-job-card-body { display:none; } .flux-job-card-body .flux-job-card-main { padding-top:11px; } .flux-job-card-body .flux-job-variants { padding-top:11px; } .flux-job-card-body .flux-job-variant-ledger { grid-column:1/-1; } .flux-job-card-body .flux-job-actions { grid-column:1/-1; max-width:none; justify-content:flex-start; } .pe-special-tools { gap:11px; } .pe-tool-toggle { display:flex; align-items:flex-start; gap:9px; padding:9px; border:1px solid var(--vd-line); border-radius:8px; background:var(--vd-surface-muted); cursor:pointer; } .pe-tool-toggle input { width:17px; height:17px; margin-top:1px; accent-color:var(--vd-brand); } .pe-tool-toggle span { display:grid; gap:3px; min-width:0; } .pe-tool-toggle strong { font-size:10px; color:var(--vd-ink); } .pe-tool-toggle small { color:var(--vd-ink-muted); font-size:8px; line-height:1.4; } .pe-watermark-tools { display:grid; grid-template-columns:88px minmax(0,1fr); gap:8px; align-items:center; } .pe-watermark-tools .pe-tool-toggle { grid-column:1/-1; } .pe-watermark-tools > label:not(.pe-tool-toggle) { color:var(--vd-ink-muted); font-size:10px; font-weight:700; } .pe-control-body input[type="text"] { width:100%; min-height:34px; padding:7px 9px; border:1px solid var(--vd-line); border-radius:7px; color:var(--vd-ink); background:var(--vd-surface); } @media(max-width:820px){ .flux-job-card-toggle { align-items:flex-start; } .flux-job-card-toggle-main { align-items:flex-start; flex-direction:column; } .flux-job-card-toggle-meta { padding-top:1px; } .flux-job-card-body { grid-template-columns:1fr; } .flux-job-card-body .flux-job-variants,.flux-job-card-body .flux-job-variant-ledger,.flux-job-card-body .flux-job-actions { grid-column:auto; } } .openrouter-selected-copy small { display: block; margin-top: 4px; color: var(--vd-ink-muted); font-size: 10px; line-height: 1.35; } .openrouter-model-card.is-incompatible { cursor: default; opacity: .72; background: var(--vd-surface-muted); } .openrouter-model-card.is-incompatible:hover { border-color: var(--vd-line); } .openrouter-badge.is-compatible { border-color: color-mix(in srgb, var(--vd-success) 46%, var(--vd-line)); color: var(--vd-success); } .openrouter-badge.is-incompatible { border-color: color-mix(in srgb, var(--vd-danger) 40%, var(--vd-line)); color: var(--vd-danger); } .openrouter-badge.is-warning, .openrouter-badge.is-unknown { border-color: color-mix(in srgb, var(--vd-warning) 46%, var(--vd-line)); color: var(--vd-warning); } .openrouter-model-compat-note { display: block; margin-top: 7px; color: var(--vd-ink-muted); font-size: 10px; line-height: 1.4; } .ai-access-primary > .setting-group { max-width: 720px; } .ai-provider-grid { display: grid; gap: 10px; } .ai-provider-row { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(220px, 1.4fr) auto auto minmax(120px, .7fr); gap: 12px; align-items: end; padding: 12px; border: 1px solid var(--vd-line); border-radius: 5px; background: var(--vd-surface-raised); } .ai-provider-row[data-ai-provider-row="cloudflare"] { grid-template-columns: minmax(150px, .7fr) minmax(180px, 1fr) minmax(180px, .8fr) auto auto minmax(120px, .7fr); } .ai-provider-identity { align-self: center; min-width: 0; } .ai-provider-identity strong, .ai-provider-identity small { display: block; } .ai-provider-identity small { margin-top: 3px; color: var(--vd-ink-muted); } .ai-provider-row .setting-group { margin: 0; } .ai-provider-row .premium-switch { align-self: center; white-space: nowrap; } .ai-provider-test-btn { min-height: 38px; } .ai-provider-row-status { align-self: center; color: var(--vd-ink-muted); font-size: 12px; line-height: 1.35; } .ai-provider-option { grid-column: 2 / -1; display: flex; gap: 9px; align-items: flex-start; padding-top: 6px; color: var(--vd-ink); } .ai-provider-option > span strong, .ai-provider-option > span small { display: block; } .ai-provider-option > span small { color: var(--vd-ink-muted); margin-top: 2px; } .ai-catalog-toolbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; } .ai-catalog-toolbar .setting-group { margin: 0; } .ai-model-catalog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; } .ai-catalog-pagination { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--vd-line); } .ai-catalog-pagination[hidden] { display: none; } .ai-catalog-page-summary { display: inline-flex; gap: 5px; align-items: baseline; color: var(--vd-ink-muted); font-size: 12px; white-space: nowrap; } .ai-catalog-page-summary strong { color: var(--vd-ink); font-variant-numeric: tabular-nums; } .ai-catalog-page-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 7px; } .ai-catalog-page-size { display: inline-flex; align-items: center; gap: 6px; color: var(--vd-ink-muted); font-size: 12px; } .ai-catalog-page-size select { min-width: 68px; } .ai-catalog-page-buttons { display: inline-flex; align-items: center; gap: 4px; } .ai-catalog-page-button { min-width: 34px; min-height: 34px; padding: 5px 8px; border: 1px solid var(--vd-line); border-radius: 5px; background: var(--vd-surface-raised); color: var(--vd-ink); font: inherit; cursor: pointer; } .ai-catalog-page-button:hover { border-color: color-mix(in srgb, var(--vd-accent) 38%, var(--vd-line)); } .ai-catalog-page-button.is-active { border-color: var(--vd-accent); background: color-mix(in srgb, var(--vd-accent) 9%, var(--vd-surface-raised)); font-weight: 700; } .ai-catalog-page-gap { min-width: 18px; text-align: center; color: var(--vd-ink-muted); } .ai-model-card { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--vd-line); border-radius: 5px; background: var(--vd-surface-raised); min-width: 0; } .ai-model-card.is-selected { border-color: var(--vd-accent); background: color-mix(in srgb, var(--vd-accent) 4%, var(--vd-surface-raised)); } .ai-model-card.is-incompatible { opacity: .72; } .ai-model-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; } .ai-model-card-head > div { min-width: 0; } .ai-model-card-head strong, .ai-model-card-head span { display: block; overflow: hidden; text-overflow: ellipsis; } .ai-model-card-head span { margin-top: 3px; color: var(--vd-ink-muted); font-size: 11px; white-space: nowrap; } .ai-model-card p { margin: 0; color: var(--vd-ink-muted); font-size: 12px; line-height: 1.45; } .ai-generation-profile-slots { display: grid; gap: 8px; margin-top: 12px; } .ai-profile-slot { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--vd-line); border-radius: 5px; background: var(--vd-surface-raised); } .ai-profile-slot.is-unavailable { border-style: dashed; } .ai-profile-slot-badges { display: inline-flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; } .ai-profile-count { min-width: 56px; text-align: center; border: 1px solid var(--vd-line); border-radius: 5px; padding: 7px 9px; background: var(--vd-surface-raised); font-size: 12px; } .ai-profile-footnote { display: block; margin-top: 10px; color: var(--vd-ink-muted); line-height: 1.45; } .ai-operations-card { display: grid; gap: 12px; } .ai-operations-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .ai-operations-summary > div { padding: 10px 12px; border: 1px solid var(--vd-line); border-radius: 5px; background: var(--vd-surface-raised); } .ai-operations-summary span, .ai-operations-summary strong { display: block; } .ai-operations-summary span { color: var(--vd-ink-muted); font-size: 11px; } .ai-operations-summary strong { margin-top: 3px; font-size: 18px; font-variant-numeric: tabular-nums; } .ai-operations-qualification { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 10px 12px; border-left: 3px solid var(--vd-accent); background: var(--vd-surface-muted); } .ai-operations-qualification span { color: var(--vd-ink-muted); font-size: 12px; line-height: 1.45; text-align: right; } .ai-operations-profile { display: grid; gap: 7px; } .ai-ops-profile-slot { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 11px; border: 1px solid var(--vd-line); border-radius: 5px; background: var(--vd-surface-raised); } .ai-ops-profile-slot > div:nth-child(2) strong, .ai-ops-profile-slot > div:nth-child(2) span { display: block; } .ai-ops-profile-slot > div:nth-child(2) span { margin-top: 2px; color: var(--vd-ink-muted); font-size: 11px; } .ai-ops-profile-slot.is-good { border-color: color-mix(in srgb, var(--vd-success) 42%, var(--vd-line)); } .ai-ops-profile-slot.is-bad { border-color: color-mix(in srgb, var(--vd-danger) 42%, var(--vd-line)); } .ai-ops-profile-slot.is-pending { border-style: dashed; } .ai-ops-table { display: grid; border: 1px solid var(--vd-line); border-radius: 5px; overflow: hidden; } .ai-ops-table-row { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(90px, .7fr)); gap: 8px; align-items: center; padding: 9px 10px; border-top: 1px solid var(--vd-line); } .ai-ops-table-row:first-child { border-top: 0; } .ai-ops-table-row.is-head { background: var(--vd-surface-muted); color: var(--vd-ink-muted); font-size: 11px; font-weight: 700; } .ai-ops-table-row span { min-width: 0; } .ai-ops-table-row strong, .ai-ops-table-row small { display: block; overflow: hidden; text-overflow: ellipsis; } .ai-ops-table-row small { margin-top: 2px; color: var(--vd-ink-muted); font-size: 10px; white-space: nowrap; } .ai-operations-events { margin-top: 14px; } .ai-operations-events h4 { margin: 0 0 7px; font-size: 12px; } .ai-ops-event { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 7px 0; border-top: 1px solid var(--vd-line); } .ai-ops-event-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vd-ink-muted); } .ai-ops-event-dot.is-good { background: var(--vd-success); } .ai-ops-event-dot.is-bad { background: var(--vd-danger); } .ai-ops-event-dot.is-pending { background: var(--vd-warning); } .ai-ops-event strong, .ai-ops-event small { display: block; } .ai-ops-event small, .ai-ops-event time { color: var(--vd-ink-muted); font-size: 10px; } @media (max-width: 1180px) { .ai-provider-row, .ai-provider-row[data-ai-provider-row="cloudflare"] { grid-template-columns: minmax(160px, .8fr) minmax(220px, 1.4fr) auto auto; } .ai-provider-row-status { grid-column: 2 / -1; } .ai-provider-option { grid-column: 2 / -1; } } @media (max-width: 820px) { .ai-provider-row, .ai-provider-row[data-ai-provider-row="cloudflare"] { grid-template-columns: 1fr; align-items: stretch; } .ai-provider-row-status, .ai-provider-option { grid-column: 1; } .ai-provider-row .premium-switch { justify-self: start; } .ai-catalog-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ai-model-catalog { grid-template-columns: 1fr; } .ai-profile-slot { grid-template-columns: auto minmax(0, 1fr) auto; } .ai-profile-slot-badges { grid-column: 2 / -1; justify-content: flex-start; } .ai-profile-slot .openrouter-selected-actions { grid-column: 3; grid-row: 1; } .ai-operations-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ai-ops-table-row { grid-template-columns: minmax(180px, 1.5fr) repeat(2, minmax(80px, .7fr)); } .ai-ops-table-row > span:nth-child(4), .ai-ops-table-row > span:nth-child(5) { display: none; } } @media (max-width: 560px) { .ai-catalog-toolbar { grid-template-columns: 1fr; } .ai-catalog-pagination { align-items: stretch; flex-direction: column; } .ai-catalog-page-controls { justify-content: flex-start; } .ai-catalog-page-size { width: 100%; justify-content: space-between; } .ai-model-card-head { display: grid; } .ai-model-card-head button { width: 100%; } .ai-profile-slot { grid-template-columns: auto minmax(0, 1fr); } .ai-profile-slot .openrouter-selected-actions, .ai-profile-slot-badges { grid-column: 2; } .ai-operations-summary { grid-template-columns: 1fr 1fr; } .ai-operations-qualification { align-items: flex-start; flex-direction: column; } .ai-operations-qualification span { text-align: left; } .ai-ops-profile-slot { grid-template-columns: auto minmax(0, 1fr); } .ai-ops-profile-slot .openrouter-model-badges { grid-column: 2; } .ai-ops-table-row { grid-template-columns: minmax(0, 1fr) 80px; } .ai-ops-table-row > span:nth-child(3), .ai-ops-table-row > span:nth-child(4), .ai-ops-table-row > span:nth-child(5) { display: none; } .ai-ops-event { grid-template-columns: auto minmax(0, 1fr); } .ai-ops-event time { grid-column: 2; } } .ai-benchmark-workspace { padding: clamp(18px, 2.2vw, 30px); } .ai-benchmark-page-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin: 0 auto 18px; max-width: 1480px; padding: 18px 20px; border: 1px solid var(--vd-line); border-radius: 5px; background: var(--vd-surface-raised); } .ai-benchmark-page-copy { min-width: 0; max-width: 900px; } .ai-benchmark-page-eyebrow { display: block; margin-bottom: 5px; color: var(--vd-accent); font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .ai-benchmark-page-copy h2 { margin: 0; font-size: clamp(24px, 3vw, 36px); letter-spacing: -.03em; } .ai-benchmark-page-copy p { margin: 8px 0 0; max-width: 850px; color: var(--vd-ink-muted); line-height: 1.55; } .ai-benchmark-page-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .ai-benchmark-page-shell { display: grid; gap: 14px; max-width: 1480px; margin: 0 auto; } .ai-benchmark-execution, .ai-benchmark-results { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--vd-line); border-radius: 5px; background: var(--vd-surface-raised); } .ai-benchmark-review-disclosure { border: 1px solid var(--vd-line); border-radius: 5px; background: var(--vd-surface); overflow: hidden; } .ai-benchmark-review-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; cursor: pointer; font-weight: 650; } .ai-benchmark-review-disclosure > summary small { color: var(--vd-ink-muted); font-weight: 500; } .ai-benchmark-review-disclosure > .disclosure-body { padding: 0 12px 12px; } .ai-benchmark-section-heading > div { display: flex; align-items: center; gap: 9px; } .ai-benchmark-section-heading > div > span { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--vd-line); border-radius: 4px; color: var(--vd-accent); font-size: 10px; font-weight: 700; } .ai-benchmark-section-heading strong, .ai-benchmark-section-heading small { display: block; } .ai-benchmark-section-heading small { margin-top: 2px; color: var(--vd-ink-muted); font-size: 11px; } .ai-benchmark-contract { display: flex; justify-content: space-between; gap: 14px; padding: 11px 12px; border-left: 3px solid var(--vd-accent); background: var(--vd-surface-muted); } .ai-benchmark-contract span { max-width: 760px; color: var(--vd-ink-muted); font-size: 12px; line-height: 1.45; text-align: right; } .ai-benchmark-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .ai-benchmark-panel { min-width: 0; display: grid; gap: 10px; padding: 12px; border: 1px solid var(--vd-line); border-radius: 5px; background: var(--vd-surface-raised); } .ai-benchmark-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .ai-benchmark-panel-head strong, .ai-benchmark-panel-head small { display: block; } .ai-benchmark-panel-head small { margin-top: 2px; color: var(--vd-ink-muted); line-height: 1.4; } .ai-benchmark-articles { display: grid; gap: 6px; max-height: 310px; overflow: auto; padding-right: 2px; } .ai-benchmark-article { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 9px; align-items: center; padding: 9px 10px; border: 1px solid var(--vd-line); border-radius: 4px; background: var(--vd-surface); cursor: pointer; } .ai-benchmark-article.is-selected { border-color: var(--vd-accent); background: var(--vd-accent-soft); } .ai-benchmark-article span strong, .ai-benchmark-article span small { display: block; } .ai-benchmark-article span small, .ai-benchmark-article em { color: var(--vd-ink-muted); font-size: 11px; font-style: normal; } .ai-benchmark-selection-summary { display: flex; justify-content: space-between; gap: 10px; color: var(--vd-ink-muted); font-size: 11px; } .ai-benchmark-selection-summary strong { color: var(--vd-ink); } .ai-benchmark-candidate-picker { display: grid; grid-template-columns: minmax(130px,.75fr) minmax(220px,1.5fr) auto; gap: 8px; align-items: end; } .ai-benchmark-candidates { display: grid; gap: 6px; } .ai-benchmark-candidate { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 9px; align-items: center; padding: 8px 9px; border: 1px solid var(--vd-line); border-radius: 4px; background: var(--vd-surface); } .ai-benchmark-candidate strong, .ai-benchmark-candidate small { display: block; } .ai-benchmark-candidate small { color: var(--vd-ink-muted); font-size: 11px; margin-top: 2px; } .ai-benchmark-runbar { display: grid; grid-template-columns: minmax(180px,240px) auto minmax(220px,1fr); gap: 12px; align-items: end; padding: 12px; border: 1px solid var(--vd-line); border-radius: 5px; background: var(--vd-surface-muted); } .ai-benchmark-run-actions { display: flex; gap: 8px; align-items: center; } .ai-benchmark-progress { display: grid; gap: 5px; align-self: center; } .ai-benchmark-progress progress { width: 100%; height: 8px; } .ai-benchmark-progress span { color: var(--vd-ink-muted); font-size: 11px; line-height: 1.4; } .ai-benchmark-summary { display: grid; gap: 8px; } .ai-benchmark-summary-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; } .ai-benchmark-summary-head span { color: var(--vd-ink-muted); font-size: 11px; } .ai-benchmark-summary-table { display: grid; gap: 6px; } .ai-benchmark-summary-row { display: grid; grid-template-columns: minmax(190px,1.7fr) repeat(5,minmax(70px,.6fr)) minmax(150px,.9fr); gap: 8px; align-items: center; padding: 9px 10px; border: 1px solid var(--vd-line); border-left-width: 3px; border-radius: 4px; background: var(--vd-surface); } .ai-benchmark-summary-row.is-good { border-left-color: var(--vd-success); } .ai-benchmark-summary-row.is-bad { border-left-color: var(--vd-danger); } .ai-benchmark-summary-row.is-pending { border-left-color: var(--vd-warning); } .ai-benchmark-summary-row > div > span, .ai-benchmark-summary-row > div > small { display: block; color: var(--vd-ink-muted); font-size: 10px; } .ai-benchmark-summary-row > div > strong { display: block; font-size: 12px; } .ai-benchmark-status strong { font-size: 11px; } .ai-benchmark-reviews { display: grid; gap: 10px; } .ai-benchmark-review { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--vd-line); border-radius: 5px; background: var(--vd-surface-raised); } .ai-benchmark-review-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .ai-benchmark-review-head strong, .ai-benchmark-review-head small { display: block; } .ai-benchmark-review-head small { margin-top: 2px; color: var(--vd-ink-muted); } .ai-benchmark-compare { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; } .ai-benchmark-compare section { min-width: 0; padding: 10px; border: 1px solid var(--vd-line); border-radius: 4px; background: var(--vd-surface); } .ai-benchmark-compare h5 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--vd-ink-muted); } .ai-benchmark-compare section > div { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 8px; padding: 3px 0; } .ai-benchmark-compare section > div > span { color: var(--vd-ink-muted); font-size: 10px; } .ai-benchmark-compare section > div > strong { font-size: 11px; overflow-wrap: anywhere; } .ai-benchmark-compare .ai-benchmark-description { display: block; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--vd-line); } .ai-benchmark-description p { margin: 4px 0 0; max-height: 120px; overflow: auto; white-space: pre-wrap; font-size: 11px; line-height: 1.45; } .ai-benchmark-review-fields { display: grid; grid-template-columns: repeat(4,minmax(110px,.6fr)) minmax(220px,1.4fr) auto; gap: 8px; align-items: end; } .ai-benchmark-review-fields > label > span { display: block; margin-bottom: 4px; font-size: 10px; color: var(--vd-ink-muted); } .ai-benchmark-critical { display: flex; gap: 7px; align-items: flex-start; padding: 8px; border: 1px solid var(--vd-warning); border-radius: 4px; } .ai-benchmark-critical span strong, .ai-benchmark-critical span small { display: block; } .ai-benchmark-critical span small { color: var(--vd-ink-muted); font-size: 10px; margin-top: 2px; } .ai-benchmark-review-note { grid-column: 1 / -2; } .ai-benchmark-review-note textarea { width: 100%; resize: vertical; } @container settings-panel (max-width: 900px) { .ai-benchmark-grid, .ai-benchmark-compare { grid-template-columns: 1fr; } .ai-benchmark-runbar { grid-template-columns: 1fr 1fr; } .ai-benchmark-progress { grid-column: 1 / -1; } .ai-benchmark-summary-row { grid-template-columns: minmax(180px,1.5fr) repeat(3,minmax(70px,.6fr)); } .ai-benchmark-summary-row > div:nth-child(5), .ai-benchmark-summary-row > div:nth-child(6), .ai-benchmark-summary-row > div:nth-child(7) { grid-column: auto; } .ai-benchmark-review-fields { grid-template-columns: repeat(2,minmax(120px,1fr)); } .ai-benchmark-critical, .ai-benchmark-review-note { grid-column: 1 / -1; } } @media (max-width: 720px) { .ai-benchmark-contract, .ai-benchmark-panel-head, .ai-benchmark-review-head, .ai-benchmark-selection-summary { align-items: flex-start; flex-direction: column; } .ai-benchmark-contract span { text-align: left; } .ai-benchmark-candidate-picker, .ai-benchmark-runbar, .ai-benchmark-review-fields { grid-template-columns: 1fr; } .ai-benchmark-run-actions { flex-wrap: wrap; } .ai-benchmark-summary-row { grid-template-columns: 1fr 1fr; } .ai-benchmark-summary-row > div:first-child, .ai-benchmark-status { grid-column: 1 / -1; } .ai-benchmark-review-note, .ai-benchmark-critical { grid-column: auto; } } .ai-benchmark-promotion { border: 1px solid var(--vd-line); border-radius: var(--vd-radius-sm); background: var(--vd-surface-raised); display: grid; gap: 12px; padding: 14px; } .ai-benchmark-promotion.is-empty { border-style: dashed; color: var(--vd-ink-muted); } .ai-benchmark-promotion.is-empty > div { display: grid; gap: 3px; } .ai-benchmark-promotion-head { align-items: flex-start; display: flex; gap: 16px; justify-content: space-between; } .ai-benchmark-promotion-head > div { display: grid; gap: 3px; } .ai-benchmark-promotion-head span, .ai-benchmark-promotion.is-empty span { color: var(--vd-brand); font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } .ai-benchmark-promotion-head strong, .ai-benchmark-promotion.is-empty strong { font-size: 16px; } .ai-benchmark-promotion-head small, .ai-benchmark-promotion.is-empty small { color: var(--vd-ink-muted); line-height: 1.45; } .ai-benchmark-profile-compare { display: grid; gap: 10px; grid-template-columns: repeat(2,minmax(0,1fr)); } .ai-benchmark-profile-compare > div { background: var(--vd-surface); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-xs); display: grid; gap: 6px; padding: 10px; } .ai-benchmark-profile-compare > div > span { color: var(--vd-ink-muted); font-size: 10px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; } .ai-benchmark-profile-compare small { display: grid; gap: 2px; line-height: 1.35; } .ai-benchmark-profile-compare small em { color: var(--vd-ink-muted); font-size: 10px; font-style: normal; } .ai-benchmark-promotion-note { color: var(--vd-ink-muted); font-size: 10px; line-height: 1.45; margin: 0; } @media (max-width: 720px) { .ai-benchmark-promotion-head { flex-direction: column; } .ai-benchmark-promotion-head .vd-button { width: 100%; } .ai-benchmark-profile-compare { grid-template-columns: 1fr; } } #generator .generator-ai-evidence { background: var(--vd-surface-raised); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-md); display: grid; gap: 14px; margin: 14px 0 18px; padding: 16px; } #generator .generator-ai-evidence.hidden { display: none; } #generator .generator-ai-evidence-head { align-items: flex-start; display: flex; gap: 18px; justify-content: space-between; } #generator .generator-ai-evidence-head > div:first-child { display: grid; gap: 3px; } #generator .generator-ai-evidence-head > div:first-child > span { color: var(--vd-ink-muted); font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; } #generator .generator-ai-evidence-head strong { font-size: 17px; } #generator .generator-ai-evidence-head small { color: var(--vd-ink-muted); line-height: 1.45; } #generator .generator-ai-evidence-summary { align-items: flex-end; display: grid; gap: 4px; justify-items: end; } #generator .generator-ai-evidence-summary b { font-size: 24px; letter-spacing: -.03em; } #generator .generator-ai-evidence-summary span { background: var(--vd-warning-soft); border-radius: var(--vd-radius-xs); color: var(--vd-warning-strong); font-size: 12px; font-weight: 700; padding: 4px 7px; } #generator .generator-ai-evidence-summary span[data-state="confirmed"] { background: var(--vd-success-soft); color: var(--vd-success-strong); } #generator .generator-ai-evidence-fields { display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); } #generator .generator-ai-evidence-field { border: 1px solid var(--vd-line); border-radius: var(--vd-radius-sm); display: grid; gap: 5px; min-width: 0; padding: 10px; } #generator .generator-ai-evidence-field > div { align-items: center; display: flex; gap: 8px; justify-content: space-between; } #generator .generator-ai-evidence-field > div span, #generator .ai-confidence-badge { border-radius: var(--vd-radius-xs); font-size: 10px; font-weight: 750; line-height: 1.2; padding: 3px 5px; } #generator .generator-ai-evidence-field b { font-size: 13px; overflow-wrap: anywhere; } #generator .generator-ai-evidence-field small { color: var(--vd-ink-muted); line-height: 1.35; } #generator .generator-ai-evidence-field.is-confirmed > div span, #generator .ai-confidence-badge.is-confirmed { background: var(--vd-success-soft); color: var(--vd-success-strong); } #generator .generator-ai-evidence-field.is-review > div span, #generator .ai-confidence-badge.is-review { background: var(--vd-warning-soft); color: var(--vd-warning-strong); } #generator .generator-ai-evidence-field.is-manual > div span, #generator .ai-confidence-badge.is-manual { background: var(--vd-info-soft); color: var(--vd-info); } #generator .generator-ai-evidence-field.is-empty > div span, #generator .ai-confidence-badge.is-empty { background: var(--vd-surface-muted); color: var(--vd-ink-muted); } #generator .ai-confidence-badge { display: inline-flex; margin-inline-start: 4px; vertical-align: middle; } #generator .generator-ai-evidence-details { border-top: 1px solid var(--vd-line); display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 12px; } #generator .generator-ai-evidence-details.hidden { display: none; } #generator .generator-ai-evidence-details > div { min-width: 0; } #generator .generator-ai-evidence-details strong { font-size: 12px; } #generator .generator-ai-evidence-details ul { color: var(--vd-ink-muted); font-size: 12px; line-height: 1.45; margin: 6px 0 0; padding-inline-start: 18px; } @media (max-width: 1100px) { #generator .generator-ai-evidence-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { #generator .generator-ai-evidence-head { align-items: stretch; flex-direction: column; } #generator .generator-ai-evidence-summary { justify-items: start; } #generator .generator-ai-evidence-fields, #generator .generator-ai-evidence-details { grid-template-columns: 1fr; } } @media (max-width: 760px) { .ai-benchmark-workspace { padding: 12px; } .ai-benchmark-page-hero { flex-direction: column; padding: 14px; } .ai-benchmark-page-actions { width: 100%; justify-content: stretch; } .ai-benchmark-page-actions .vd-button { flex: 1 1 180px; } } .main-wrapper, main, .tab-content, .page-heading, .flux-studio-pro-layout, .flux-studio-left-stack, .flux-job-center, .flux-job-center-body, .media-library-page, .media-toolbar, .media-grid, .settings-shell, .publish-workspace, .storage-main, .admin-grid { min-width: 0; max-width: 100%; } .page-heading > *, .flux-job-center-head > *, .media-library-heading > * { min-width: 0; } .flux-job-view-switch, .media-view-switch { display:inline-flex; align-items:center; gap:3px; padding:3px; border:1px solid var(--vd-line); border-radius:10px; background:var(--vd-surface-muted); } .flux-job-view-switch button, .media-view-switch button { min-height:30px; padding:0 10px; border:0; border-radius:7px; background:transparent; color:var(--vd-ink-muted); font-size:9px; font-weight:760; cursor:pointer; } .flux-job-view-switch button.active, .media-view-switch button.active { background:var(--vd-surface-raised); color:var(--vd-ink); box-shadow:var(--vd-shadow-xs); } .flux-job-view-switch span { display:inline-grid; min-width:18px; height:18px; place-items:center; margin-left:3px; padding:0 5px; border-radius:999px; background:var(--vd-surface-muted); font-size:8px; } .flux-job-bulkbar, .media-batchbar { min-height:46px; display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; padding:8px 10px; border:1px solid var(--vd-line); border-radius:11px; background:var(--vd-surface); } .flux-job-bulkbar > label, .media-batchbar > label, .media-check { display:flex; align-items:center; gap:7px; color:var(--vd-ink-secondary); font-size:9px; font-weight:680; } .flux-job-bulkbar input, .media-batchbar input, .media-check input, .media-card-select input { accent-color:var(--vd-brand); } .flux-job-bulkbar > div, .media-batchbar > div { display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .flux-job-pagination, .media-pagination { display:flex; align-items:center; justify-content:center; gap:10px; min-height:48px; margin-top:12px; color:var(--vd-ink-muted); font-size:9px; } .flux-job-pagination .page-nav-btn, .media-pagination .page-nav-btn { width:34px; height:34px; border:1px solid var(--vd-line); border-radius:8px; background:var(--vd-surface-raised); color:var(--vd-ink); cursor:pointer; } .flux-job-pagination .page-nav-btn:disabled, .media-pagination .page-nav-btn:disabled { opacity:.42; cursor:not-allowed; } .flux-job-card-select { display:inline-grid; place-items:center; flex:0 0 auto; width:26px; height:26px; border-radius:7px; background:var(--vd-surface-muted); } .flux-job-card-select input { width:15px; height:15px; accent-color:var(--vd-brand); } .flux-job-card.is-selected { border-color:var(--vd-brand); box-shadow:0 0 0 2px color-mix(in srgb,var(--vd-brand) 15%,transparent); } .media-library-page { padding-bottom:24px; } .media-library-heading { align-items:center; } .media-heading-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .media-summary { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; margin-bottom:12px; } .media-summary button { min-width:0; min-height:72px; display:grid; align-content:center; gap:4px; padding:11px 13px; border:1px solid var(--vd-line); border-radius:13px; background:var(--vd-surface-raised); color:var(--vd-ink); text-align:left; cursor:pointer; } .media-summary button:hover, .media-summary button.active { border-color:var(--vd-brand); background:var(--vd-brand-soft); } .media-summary span { color:var(--vd-ink-muted); font-size:9px; font-weight:680; } .media-summary strong { font-size:19px; line-height:1; } .media-toolbar { display:grid; grid-template-columns:minmax(220px,1fr) repeat(2,minmax(130px,auto)) auto auto auto; align-items:center; gap:8px; margin-bottom:10px; padding:10px; border:1px solid var(--vd-line); border-radius:13px; background:var(--vd-surface-raised); } .media-toolbar select, .media-search { min-width:0; min-height:38px; border:1px solid var(--vd-line); border-radius:9px; background:var(--vd-surface); color:var(--vd-ink); } .media-toolbar select { padding:0 30px 0 10px; font-size:9px; } .media-search { display:grid; grid-template-columns:28px minmax(0,1fr); align-items:center; } .media-search > span { display:grid; place-items:center; color:var(--vd-ink-muted); } .media-search input { min-width:0; width:100%; height:36px; padding:0 9px 0 0; border:0; outline:0; background:transparent; color:var(--vd-ink); font-size:10px; } .media-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr)); gap:12px; } .media-card { min-width:0; overflow:hidden; display:grid; grid-template-rows:auto minmax(0,1fr) auto; border:1px solid var(--vd-line); border-radius:14px; background:var(--vd-surface-raised); transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease; } .media-card:hover { transform:translateY(-1px); border-color:var(--vd-line-strong); box-shadow:var(--vd-shadow-sm); } .media-card.is-selected { border-color:var(--vd-brand); box-shadow:0 0 0 2px color-mix(in srgb,var(--vd-brand) 15%,transparent); } .media-card-image { position:relative; min-height:180px; aspect-ratio:4/3; overflow:hidden; background:var(--vd-surface-muted); } .media-card-image img { width:100%; height:100%; display:block; object-fit:contain; } .media-card-select { position:absolute; top:8px; left:8px; display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:var(--vd-overlay-control); } .media-card-select input { width:16px; height:16px; } .media-card-favorite-mark { position:absolute; top:9px; right:10px; color:var(--vd-media-favorite); font-size:18px; text-shadow:0 1px 5px color-mix(in srgb,var(--vd-ink) 50%,transparent); } .media-card-preview { position:absolute; inset:auto 8px 8px auto; min-height:28px; padding:0 9px; border:1px solid color-mix(in srgb,var(--vd-on-accent) 35%,transparent); border-radius:7px; background:var(--vd-scrim); color:var(--vd-on-accent); font-size:8px; font-weight:760; cursor:pointer; } .media-card-content { min-width:0; display:grid; align-content:start; gap:6px; padding:11px 12px; } .media-card-content > strong { overflow:hidden; color:var(--vd-ink); font-size:10px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; } .media-card-content > span, .media-card-content > small { overflow:hidden; color:var(--vd-ink-muted); font-size:8px; line-height:1.4; text-overflow:ellipsis; white-space:nowrap; } .media-card-sources { display:flex; align-items:center; gap:4px; flex-wrap:wrap; } .media-source-chip { display:inline-flex; min-height:19px; align-items:center; padding:2px 6px; border-radius:999px; background:var(--vd-surface-muted); color:var(--vd-ink-secondary); font-size:7px; font-weight:780; } .media-source-chip.is-flux { background:color-mix(in srgb,var(--vd-brand) 13%,var(--vd-surface)); color:var(--vd-brand); } .media-source-chip.is-edited { background:color-mix(in srgb,var(--vd-info) 13%,var(--vd-surface)); color:var(--vd-info); } .media-source-chip.is-ai { background:color-mix(in srgb,var(--vd-warning) 14%,var(--vd-surface)); color:var(--vd-warning); } .media-source-chip.is-listing { background:color-mix(in srgb,var(--vd-success) 13%,var(--vd-surface)); color:var(--vd-success); } .media-card-actions { display:flex; gap:5px; flex-wrap:wrap; padding:0 12px 12px; } .media-card-actions .small-btn { flex:1 1 auto; min-width:0; } .media-grid.is-list { grid-template-columns:1fr; } .media-grid.is-list .media-card { grid-template-columns:128px minmax(0,1fr) auto; grid-template-rows:1fr; align-items:center; } .media-grid.is-list .media-card-image { min-height:96px; height:100%; aspect-ratio:auto; } .media-grid.is-list .media-card-actions { max-width:350px; justify-content:flex-end; padding:10px 12px 10px 0; } .media-empty { grid-column:1/-1; min-height:260px; display:grid; place-items:center; align-content:center; gap:8px; padding:30px; border:1px dashed var(--vd-line); border-radius:14px; color:var(--vd-ink-muted); text-align:center; } .media-empty strong { color:var(--vd-ink); font-size:14px; } .media-empty span { font-size:9px; } .media-lightbox { position:fixed; inset:0; z-index:var(--vd-layer-modal); display:grid; place-items:center; padding:22px; } .media-lightbox.hidden { display:none; } .media-lightbox-backdrop { position:absolute; inset:0; width:100%; height:100%; border:0; background:var(--vd-scrim-strong); cursor:pointer; } .media-lightbox-dialog { position:relative; width:min(1180px,100%); max-height:calc(100dvh - 44px); overflow:auto; border:1px solid var(--vd-line); border-radius:18px; background:var(--vd-surface-raised); box-shadow:var(--vd-shadow-float); } .media-lightbox-dialog > header, .media-lightbox-dialog > footer { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 16px; } .media-lightbox-dialog > header { border-bottom:1px solid var(--vd-line); } .media-lightbox-dialog > footer { justify-content:flex-end; flex-wrap:wrap; border-top:1px solid var(--vd-line); } .media-lightbox-dialog h3 { margin:2px 0 0; overflow:hidden; max-width:min(700px,70vw); text-overflow:ellipsis; white-space:nowrap; } .media-lightbox-body { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(250px,.55fr); min-height:480px; } .media-lightbox-stage { min-width:0; display:grid; place-items:center; padding:18px; background:repeating-conic-gradient(var(--vd-marketplace-checker-a) 0 25%,var(--vd-marketplace-checker-b) 0 50%) 50%/20px 20px; } .media-lightbox-stage img { max-width:100%; max-height:70dvh; object-fit:contain; } #media-lightbox-meta { min-width:0; overflow:auto; padding:18px; border-left:1px solid var(--vd-line); } #media-lightbox-meta dl { display:grid; grid-template-columns:90px minmax(0,1fr); gap:8px 10px; margin:14px 0; font-size:9px; } #media-lightbox-meta dt { color:var(--vd-ink-muted); } #media-lightbox-meta dd { min-width:0; margin:0; overflow-wrap:anywhere; color:var(--vd-ink); } .media-lightbox-prompt { display:grid; gap:6px; padding:10px; border-radius:10px; background:var(--vd-surface-muted); } .media-lightbox-prompt strong { font-size:9px; } .media-lightbox-prompt p { margin:0; color:var(--vd-ink-secondary); font-size:9px; line-height:1.5; } .pe-sensitivity-help { display:block; margin-top:4px; color:var(--vd-ink-muted); font-size:8px; line-height:1.4; } @media (max-width: 1180px) { .media-summary { grid-template-columns:repeat(3,minmax(0,1fr)); } .media-toolbar { grid-template-columns:1fr 1fr; } .media-search { grid-column:1/-1; } .media-view-switch { justify-self:end; } .media-lightbox-body { grid-template-columns:1fr; } #media-lightbox-meta { border-top:1px solid var(--vd-line); border-left:0; } .media-grid.is-list .media-card { grid-template-columns:110px minmax(0,1fr); } .media-grid.is-list .media-card-actions { grid-column:1/-1; max-width:none; padding:0 10px 10px; } .flux-job-center-head { align-items:stretch; } .flux-job-center-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; } .flux-job-center-actions > * { width:100%; } .flux-job-view-switch { grid-column:1/-1; } .flux-job-bulkbar, .media-batchbar { align-items:flex-start; flex-direction:column; } } @media (max-width: 620px) { main { padding-inline: 10px; } .media-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } .media-summary button:first-child { grid-column:1/-1; } .media-toolbar { grid-template-columns:1fr; } .media-search { grid-column:auto; } .media-view-switch { justify-self:start; } .media-grid { grid-template-columns:1fr 1fr; gap:8px; } .media-card-image { min-height:130px; } .media-card-content { padding:9px; } .media-card-actions { padding:0 9px 9px; } .media-card-actions .small-btn { flex:1 1 calc(50% - 4px); } .media-grid.is-list { grid-template-columns:1fr; } .media-grid.is-list .media-card { grid-template-columns:92px minmax(0,1fr); } .media-lightbox { padding:8px; } .media-lightbox-dialog { max-height:calc(100dvh - 16px); border-radius:12px; } .media-lightbox-dialog > header { align-items:flex-start; } .media-lightbox-dialog > footer .vd-button { flex:1 1 calc(50% - 6px); justify-content:center; } .media-lightbox-stage { padding:8px; } #media-lightbox-meta { padding:12px; } .flux-job-center { padding:12px; } .flux-job-center-actions { grid-template-columns:1fr; } .flux-job-view-switch { grid-column:auto; } .flux-job-summary { grid-template-columns:1fr 1fr; } .flux-job-card-toggle { gap:8px; padding:10px; } .flux-job-card-toggle-meta { flex-direction:column; align-items:flex-end; } .flux-job-card-body { padding:0 10px 10px; } .flux-job-bulkbar > div, .media-batchbar > div { width:100%; } .flux-job-bulkbar .vd-button, .media-batchbar .vd-button { flex:1 1 calc(50% - 4px); } } @media (max-width: 430px) { .media-grid { grid-template-columns:1fr; } .media-summary { grid-template-columns:1fr 1fr; } .flux-job-summary { grid-template-columns:1fr; } } body.modal-open { overflow:hidden; } .listing-editor-shell, .listing-editor-grid, .listing-content-editor, .listing-media-editor, .listing-context-panel, .listing-editor-section, .listing-description-workbench, .detail-platform-workbench, .detail-description-pane, .detail-html-switch-stage, .detail-html-switch-stage > *, .detail-html-preview, #detail-description-editor, #detail-html-source { min-width:0; max-width:100%; box-sizing:border-box; } .listing-editor-grid { width:100%; grid-template-columns:minmax(190px,.78fr) minmax(0,1.65fr) minmax(170px,.62fr); } .listing-editor-header > div:first-child { min-width:0; } .listing-editor-header h2, .listing-editor-header p, .listing-section-heading h3, .listing-context-card strong { overflow-wrap:anywhere; word-break:break-word; } .listing-form-grid > label, .detail-photo-actions > *, .listing-editor-header-actions > * { min-width:0; } .detail-description-pane .ql-toolbar.ql-snow { display:flex; flex-wrap:wrap; gap:2px; overflow:visible; } .detail-description-pane .ql-toolbar .ql-formats { margin-right:5px; } .detail-platform-workbench iframe, .detail-html-preview { width:100%; } @container listing-editor (max-width: 1080px) { .listing-editor-grid { grid-template-columns:minmax(210px,260px) minmax(0,1fr); } .listing-context-panel { grid-column:1/-1; position:static; grid-template-columns:repeat(4,minmax(0,1fr)); } .listing-media-editor { top:64px; } } @container listing-editor (max-width: 760px) { .listing-editor-shell { padding-inline:10px; } .listing-editor-grid { grid-template-columns:minmax(0,1fr); } .listing-media-editor,.listing-context-panel { position:static; } .listing-context-panel { grid-template-columns:repeat(2,minmax(0,1fr)); } .listing-form-grid.three { grid-template-columns:repeat(2,minmax(0,1fr)); } .detail-photo-stage { aspect-ratio:4/3; max-height:460px; } } @container listing-editor (max-width: 500px) { .listing-editor-header { flex-direction:column; } .listing-editor-header-actions { width:100%; display:grid; grid-template-columns:1fr 1fr; } .listing-form-grid.three,.listing-form-grid.two,.listing-context-panel { grid-template-columns:1fr; } .detail-photo-actions { grid-template-columns:1fr 1fr; } .listing-section-heading { align-items:flex-start; } } @media(max-width:620px) { .listing-editor-shell { padding-inline:8px; } .listing-editor-header-actions { display:grid; grid-template-columns:1fr 1fr; } .detail-photo-actions { grid-template-columns:1fr 1fr; } } @media(max-width:390px) { .listing-editor-header-actions,.detail-photo-actions { grid-template-columns:1fr; } } .media-grid { align-items:stretch; } .media-card { isolation:isolate; } .media-card-image { min-height:190px; } .media-card-image::after { content:""; position:absolute; inset:auto 0 0; height:64px; pointer-events:none; background:linear-gradient(transparent,color-mix(in srgb,var(--vd-ink) 28%,transparent)); } .media-card-select { top:10px; left:10px; width:32px; height:32px; padding:0; z-index:4; border:1px solid var(--vd-on-accent-border); border-radius:10px; background:var(--vd-overlay-control); box-shadow:var(--vd-shadow-sm); backdrop-filter:blur(8px); cursor:pointer; } .media-card-select { display:grid; place-items:center; } .media-card-select input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; } .media-card-select span { width:18px; height:18px; display:grid; place-items:center; pointer-events:none; border:2px solid var(--vd-on-accent-border-strong); border-radius:5px; background:var(--vd-on-accent-surface); transition:background .15s ease,border-color .15s ease,transform .15s ease; } .media-card-select input:focus-visible + span { outline:2px solid var(--vd-on-accent); outline-offset:2px; } .media-card-select input:checked + span { border-color:var(--vd-on-accent); background:var(--vd-brand); transform:scale(1.03); } .media-card-select input:checked + span::after { content:""; width:8px; height:4px; margin-top:-2px; border-left:2px solid var(--vd-on-accent); border-bottom:2px solid var(--vd-on-accent); transform:rotate(-45deg); } .media-card-favorite-toggle { position:absolute; top:10px; right:10px; z-index:4; width:32px; height:32px; display:grid; place-items:center; padding:0; border:1px solid var(--vd-on-accent-border); border-radius:10px; background:var(--vd-overlay-control); color:var(--vd-on-accent); font-size:17px; cursor:pointer; backdrop-filter:blur(8px); } .media-card-favorite-toggle.is-active { color:var(--vd-media-favorite); background:var(--vd-overlay-control-strong); } .media-card-preview { inset:auto 10px 10px 10px; z-index:3; min-height:34px; display:flex; align-items:center; justify-content:center; gap:6px; border:1px solid color-mix(in srgb,var(--vd-on-accent) 50%,transparent); border-radius:10px; background:var(--vd-overlay-control); box-shadow:var(--vd-shadow-sm); backdrop-filter:blur(9px); font-size:9px; } .media-card-preview span { font-size:13px; line-height:1; } .media-card-content { min-height:116px; padding:12px 14px 10px; } .media-card-content > strong { display:-webkit-box; min-height:2.7em; overflow:hidden; white-space:normal; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:10px; line-height:1.35; } .media-card-content > span,.media-card-content > small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .media-card-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; padding:0 14px 14px; } .media-card-actions .small-btn { width:100%; min-height:34px; display:flex; align-items:center; justify-content:center; margin:0; border-radius:9px; text-align:center; text-decoration:none; } .media-grid.is-list .media-card-actions { display:grid; grid-template-columns:repeat(2,minmax(120px,1fr)); width:min(360px,100%); } @media(max-width:620px) { .media-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .media-card-image { min-height:150px; } .media-card-content { min-height:112px; } .media-card-actions { padding-inline:10px; } } @media(max-width:470px) { .media-grid { grid-template-columns:1fr; } .media-card-image { min-height:220px; } } #publish-refresh[aria-busy="true"],#publish-status-refresh[aria-busy="true"] { opacity:.72; cursor:wait; transform: none; animation:none; } .smart-copy-launcher { min-height:360px; display:grid; grid-template-columns:56px minmax(0,1fr) auto; align-items:center; gap:18px; padding:28px; border:1px dashed var(--vd-line-strong); border-radius:14px; background:var(--vd-surface-muted); } .smart-copy-launcher-icon { width:52px; height:52px; display:grid; place-items:center; border-radius:14px; background:var(--vd-brand); color:var(--vd-on-accent); font-size:25px; } .smart-copy-launcher h3 { margin:4px 0 7px; } .smart-copy-launcher p { max-width:650px; color:var(--vd-ink-muted); line-height:1.55; } .smart-copy-launcher-score { display:grid; min-width:105px; gap:2px; padding:12px; border:1px solid var(--vd-line); border-radius:11px; background:var(--vd-surface-raised); text-align:center; } .smart-copy-launcher-score strong { font-size:20px; color:var(--vd-brand); } .smart-copy-launcher-score span { font-size:8px; color:var(--vd-ink-muted); } .smart-copy-launcher > .vd-button { grid-column:2/-1; justify-self:start; } .smart-copy-modal,.flux-prompt-lab { position:fixed; inset:0; z-index:var(--vd-layer-modal); display:grid; place-items:center; padding:20px; } .smart-copy-modal.hidden,.flux-prompt-lab.hidden { display:none; } .smart-copy-modal-backdrop,.flux-prompt-lab-backdrop { position:absolute; inset:0; width:100%; height:100%; border:0; background:var(--vd-scrim-strong); backdrop-filter:blur(4px); } .smart-copy-modal-dialog,.flux-prompt-lab-dialog { position:relative; width:min(1180px,100%); max-height:calc(100dvh - 40px); overflow:auto; border:1px solid var(--vd-line); border-radius:18px; background:var(--vd-surface-raised); box-shadow:var(--vd-shadow-float); } .smart-copy-modal-dialog > header,.flux-prompt-lab-dialog > header { position:sticky; top:0; z-index:5; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:16px 18px; border-bottom:1px solid var(--vd-line); background:color-mix(in srgb,var(--vd-surface-raised) 94%,transparent); backdrop-filter:blur(12px); } .smart-copy-modal-dialog > header h2,.flux-prompt-lab-dialog > header h2 { margin:2px 0 4px; } .smart-copy-modal-dialog > header p:last-child,.flux-prompt-lab-dialog > header p:last-child { margin:0; color:var(--vd-ink-muted); font-size:9px; } .smart-copy-modal-content { padding:14px 18px 18px; } .smart-copy-modal-content .publish-workspace-header { border:1px solid var(--vd-line); border-radius:12px; padding:11px; margin-bottom:12px; } .smart-copy-modal-content .publish-smart-grid { grid-template-columns:minmax(0,1.5fr) minmax(250px,.62fr); } @media(max-width:850px) { .smart-copy-launcher { grid-template-columns:48px minmax(0,1fr); } .smart-copy-launcher-score { grid-column:1/-1; width:100%; } .smart-copy-launcher > .vd-button { grid-column:1/-1; width:100%; justify-content:center; } .smart-copy-modal-content .publish-smart-grid { grid-template-columns:1fr; } } @media(max-width:560px) { .smart-copy-modal,.flux-prompt-lab { padding:7px; } .smart-copy-modal-dialog,.flux-prompt-lab-dialog { max-height:calc(100dvh - 14px); border-radius:12px; } .smart-copy-modal-content { padding:9px; } .smart-copy-launcher { min-height:0; padding:18px; grid-template-columns:1fr; text-align:center; } .smart-copy-launcher-icon { margin:auto; } } .flux-prompt-lab-dialog { width:min(920px,100%); } .flux-prompt-lab-body { display:grid; gap:13px; padding:16px 18px; } .flux-prompt-lab-provider { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid var(--vd-line); border-radius:10px; background:var(--vd-surface-muted); } .flux-prompt-lab-provider span { color:var(--vd-ink-muted); font-size:8px; } .flux-prompt-lab-provider strong { color:var(--vd-brand); font-size:9px; overflow-wrap:anywhere; text-align:right; } .flux-prompt-lab-field { display:grid; gap:6px; color:var(--vd-ink-secondary); font-size:8px; font-weight:720; } .flux-prompt-lab-field textarea { width:100%; min-height:120px; resize:vertical; padding:11px; border:1px solid var(--vd-line); border-radius:10px; background:var(--vd-surface); color:var(--vd-ink); font:inherit; font-size:10px; line-height:1.55; } .flux-prompt-lab-options { display:grid; grid-template-columns:minmax(220px,1fr) 1fr 1fr; gap:10px; } .flux-prompt-lab-options > label { min-width:0; } .flux-prompt-lab-options select { width:100%; min-height:40px; margin-top:5px; } .flux-prompt-lab-check { display:flex; align-items:flex-start; gap:8px; padding:10px; border:1px solid var(--vd-line); border-radius:10px; background:var(--vd-surface-muted); color:var(--vd-ink-secondary); font-size:8px; line-height:1.45; } .flux-prompt-lab-check input { width:17px; height:17px; flex:0 0 auto; accent-color:var(--vd-brand); } .flux-prompt-lab-actions { display:flex; gap:9px; flex-wrap:wrap; } .flux-prompt-lab-status { min-height:34px; display:flex; align-items:center; padding:8px 10px; border-radius:9px; background:var(--vd-brand-soft); color:var(--vd-brand); font-size:8px; } .flux-prompt-lab-notes { min-height:18px; margin:0; color:var(--vd-ink-muted); font-size:8px; line-height:1.45; } .flux-prompt-lab-dialog > footer { position:sticky; bottom:0; display:flex; justify-content:flex-end; gap:9px; padding:13px 18px; border-top:1px solid var(--vd-line); background:var(--vd-surface-raised); } .flux-optimize-button { display:inline-flex; align-items:center; gap:6px; } .flux-optimize-button > span { color:var(--vd-brand); font-size:14px; } @media(max-width:760px) { .flux-prompt-lab-options { grid-template-columns:1fr; } } .flux-library-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; } .flux-library-actions select { min-height:34px; } .flux-history-pagination { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:13px; } .flux-history-pagination span { color:var(--vd-ink-muted); font-size:8px; } .flux-studio-history-section { min-width:0; } @media(max-width:620px) { .flux-studio-history-head { align-items:flex-start; flex-direction:column; gap:10px; } .flux-library-actions { width:100%; justify-content:flex-start; } .flux-library-actions > * { flex:1 1 auto; } } .publish-center-page,.media-library-page,.flux-studio-page,.settings-workspace,.publish-center-grid,.publish-workspace-panel,.publish-workspace,.media-toolbar,.media-batchbar,.flux-job-center,.flux-job-center-head,.flux-job-center-body,.flux-studio-layout { min-width:0; max-width:100%; box-sizing:border-box; } img,video,canvas,iframe { max-width:100%; } button,input,select,textarea { max-width:100%; } .media-library-page { min-width:0; container-type:inline-size; container-name:media-library; } .media-grid { width:100%; min-width:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,clamp(214px,19vw,286px)),1fr)); gap:clamp(12px,1.35vw,20px); align-items:start; } .media-card { container-type:inline-size; container-name:media-card; min-width:0; overflow:hidden; display:grid; grid-template-rows:auto auto auto; border:1px solid var(--vd-line); border-radius:clamp(12px,5cqi,18px); background:var(--vd-surface-raised); box-shadow:var(--vd-shadow-xs); transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease; } .media-card:hover { transform:translateY(-2px); border-color:var(--vd-line-strong); box-shadow:var(--vd-shadow-md); } .media-card.is-selected { border-color:var(--vd-brand); box-shadow:0 0 0 2px color-mix(in srgb,var(--vd-brand) 17%,transparent),var(--vd-shadow-md); } .media-card-image { position:relative; min-width:0; min-height:0; aspect-ratio:4/3; overflow:hidden; background:var(--vd-surface-muted); } .media-card-image::after { content:none; } .media-card-open { position:absolute; inset:0; z-index:1; width:100%; height:100%; display:block; margin:0; padding:0; overflow:hidden; border:0; border-radius:0; background:transparent; cursor:zoom-in; } .media-card-open img { width:100%; height:100%; display:block; object-fit:contain; transition:transform .22s ease,filter .22s ease; } .media-card-open::before { content:"⌕"; position:absolute; inset:50% auto auto 50%; z-index:2; width:clamp(34px,15cqi,48px); height:clamp(34px,15cqi,48px); display:grid; place-items:center; border:1px solid var(--vd-on-accent-border); border-radius:999px; background:var(--vd-overlay-control); color:var(--vd-on-accent); font-size:clamp(17px,7cqi,23px); opacity:0; transform:translate(-50%,-44%) scale(.92); box-shadow:var(--vd-shadow-md); backdrop-filter:blur(8px); pointer-events:none; transition:opacity .16s ease,transform .16s ease; } .media-card-open:hover img, .media-card-open:focus-visible img { transform:none; filter:brightness(.94); } .media-card-open:hover::before, .media-card-open:focus-visible::before { opacity:1; transform:translate(-50%,-50%) scale(1); } .media-card-open:focus-visible { outline:3px solid var(--vd-brand); outline-offset:-3px; } .media-card.is-selected .media-card-image { box-shadow:inset 0 0 0 3px var(--vd-brand); } .media-card-select, .media-card-favorite-toggle { position:absolute; top:clamp(8px,4cqi,12px); z-index:5; width:clamp(30px,12cqi,38px); height:clamp(30px,12cqi,38px); display:grid; place-items:center; margin:0; padding:0; border:1px solid var(--vd-on-accent-border); border-radius:clamp(9px,4cqi,12px); background:var(--vd-overlay-control); box-shadow:var(--vd-shadow-sm); backdrop-filter:blur(9px); } .media-card-select { left:clamp(8px,4cqi,12px); cursor:pointer; } .media-card-favorite-toggle { right:clamp(8px,4cqi,12px); color:var(--vd-on-accent); font-size:clamp(16px,7cqi,21px); line-height:1; cursor:pointer; transition:transform .15s ease,background .15s ease,color .15s ease; } .media-card-favorite-toggle:hover { transform:scale(1.06); background:var(--vd-overlay-control-strong); } .media-card-favorite-toggle:focus-visible { outline:2px solid var(--vd-on-accent); outline-offset:2px; } .media-card-favorite-toggle.is-active { color:var(--vd-media-favorite); background:var(--vd-overlay-control-strong); } .media-card-select input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; } .media-card-select span { width:clamp(16px,6.5cqi,21px); height:clamp(16px,6.5cqi,21px); display:grid; place-items:center; border:2px solid var(--vd-on-accent-border-strong); border-radius:clamp(4px,2cqi,6px); background:var(--vd-on-accent-surface); pointer-events:none; transition:background .15s ease,border-color .15s ease,transform .15s ease; } .media-card-select input:focus-visible + span { outline:2px solid var(--vd-on-accent); outline-offset:3px; } .media-card-select input:checked + span { border-color:var(--vd-on-accent); background:var(--vd-brand); transform:scale(1.04); } .media-card-select input:checked + span::after { content:""; width:45%; height:24%; margin-top:-9%; border-left:2px solid var(--vd-on-accent); border-bottom:2px solid var(--vd-on-accent); transform:rotate(-45deg); } .media-card-content { min-width:0; min-height:0; display:grid; align-content:start; gap:clamp(5px,2.4cqi,8px); padding:clamp(11px,5cqi,16px) clamp(12px,5.5cqi,17px) clamp(9px,4cqi,13px); } .media-card-content > strong { min-width:0; min-height:2.7em; display:-webkit-box; overflow:hidden; color:var(--vd-ink); font-size:clamp(12px,5.2cqi,15px); font-weight:760; line-height:1.35; white-space:normal; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .media-card-content > span, .media-card-content > small { min-width:0; overflow:hidden; color:var(--vd-ink-muted); font-size:clamp(10px,4cqi,12px); line-height:1.4; text-overflow:ellipsis; white-space:nowrap; } .media-card-sources { gap:clamp(4px,2cqi,7px); } .media-source-chip { min-height:clamp(20px,8cqi,25px); padding:2px clamp(7px,3cqi,10px); font-size:clamp(9px,3.7cqi,11px); } .media-card-actions { min-width:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(5px,2.2cqi,8px); padding:0 clamp(10px,5cqi,16px) clamp(11px,5cqi,16px); } .media-action { min-width:0; min-height:clamp(40px,16cqi,48px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; margin:0; padding:5px 4px; overflow:hidden; border:1px solid var(--vd-line); border-radius:clamp(8px,3.7cqi,11px); background:var(--vd-surface); color:var(--vd-ink-secondary); font:inherit; text-align:center; text-decoration:none; cursor:pointer; transition:border-color .15s ease,background .15s ease,color .15s ease,transform .15s ease; } .media-action:hover { border-color:var(--vd-line-strong); background:var(--vd-surface-muted); color:var(--vd-ink); transform:translateY(-1px); } .media-action:focus-visible { outline:2px solid var(--vd-brand); outline-offset:2px; } .media-action.danger:hover { border-color:color-mix(in srgb,var(--vd-danger) 50%,var(--vd-line)); color:var(--vd-danger); } .media-action-icon { font-size:clamp(16px,6cqi,20px); line-height:1; } .media-action-label { max-width:100%; overflow:hidden; font-size:clamp(8px,3.5cqi,10px); font-weight:700; line-height:1.1; text-overflow:ellipsis; white-space:nowrap; } .media-pagination { width:100%; min-width:0; min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0; padding:8px 2px; color:var(--vd-ink-muted); font-size:11px; } .media-pagination-top { margin:4px 0 12px; border-bottom:1px solid var(--vd-line); } .media-pagination-bottom { margin:12px 0 0; border-top:1px solid var(--vd-line); } .media-pagination-summary { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .media-pagination-controls { display:flex; align-items:center; justify-content:flex-end; gap:8px; } .media-page-jump { display:flex; align-items:center; gap:6px; white-space:nowrap; } .media-page-jump select { min-width:64px; height:34px; padding:0 26px 0 10px; border:1px solid var(--vd-line); border-radius:8px; background:var(--vd-surface-raised); color:var(--vd-ink); } .media-pagination .page-nav-btn { flex:0 0 34px; } .media-grid.is-list { grid-template-columns:1fr; gap:10px; } .media-grid.is-list .media-card { grid-template-columns:clamp(150px,22vw,230px) minmax(0,1fr) minmax(220px,auto); grid-template-rows:auto; align-items:center; border-radius:14px; } .media-grid.is-list .media-card-image { width:100%; height:100%; min-height:118px; aspect-ratio:4/3; } .media-grid.is-list .media-card-content { padding:14px 16px; } .media-grid.is-list .media-card-actions { width:min(330px,100%); padding:12px 14px 12px 0; } @container media-card (max-width: 235px) { .media-card-content > small { display:none; } .media-card-actions { gap:5px; padding-inline:9px; } .media-action { min-height:40px; padding:4px; } .media-action-label { display:none; } .media-action-icon { font-size:18px; } } @container media-card (min-width: 340px) { .media-action { flex-direction:row; gap:6px; } .media-action-label { font-size:10px; } } @container media-library (max-width: 760px) { .media-toolbar { grid-template-columns:1fr 1fr; } .media-search { grid-column:1/-1; } .media-view-switch { justify-self:end; } .media-batchbar { align-items:flex-start; } .media-grid.is-list .media-card { grid-template-columns:clamp(120px,32vw,180px) minmax(0,1fr); } .media-grid.is-list .media-card-actions { grid-column:1/-1; width:100%; padding:0 12px 12px; } } @container media-library (max-width: 520px) { .media-toolbar { grid-template-columns:1fr; } .media-search { grid-column:auto; } .media-view-switch { justify-self:stretch; } .media-view-switch button { flex:1; } .media-batchbar { flex-direction:column; } .media-batchbar > div { width:100%; } .media-batchbar .vd-button { flex:1; } .media-pagination { align-items:flex-start; flex-direction:column; gap:7px; } .media-pagination-controls { width:100%; justify-content:space-between; } .media-grid.is-list .media-card { grid-template-columns:110px minmax(0,1fr); } .media-grid.is-list .media-card-content { padding:10px 11px; } } @media (hover:none) { .media-card-open::before { display:none; } .media-card:hover { transform:none; } } .media-card-open::before { content:none; } .media-open-indicator { position:absolute; inset:50% auto auto 50%; z-index:2; width:clamp(36px,15cqi,48px); height:clamp(36px,15cqi,48px); display:grid; place-items:center; border:1px solid var(--vd-on-accent-border); border-radius:999px; background:var(--vd-overlay-control); color:var(--vd-on-accent); opacity:0; transform:translate(-50%,-44%) scale(.92); box-shadow:var(--vd-shadow-md); backdrop-filter:blur(8px); pointer-events:none; transition:opacity .16s ease,transform .16s ease; } .media-open-indicator .media-action-icon { width:20px; height:20px; } .media-card-open:hover .media-open-indicator, .media-card-open:focus-visible .media-open-indicator { opacity:1; transform:translate(-50%,-50%) scale(1); } .media-action-icon { width:clamp(17px,6cqi,20px); height:clamp(17px,6cqi,20px); flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } @media (hover:none) { .media-open-indicator { display:none; } } .vd-icon { display:block; flex:0 0 auto; } .vd-icon-host { display:inline-grid; place-items:center; } .vd-button .vd-icon { margin-right:6px; } .icon-button .vd-icon { margin:auto; } .media-card-select, .media-card-favorite-toggle { top:clamp(6px,3cqi,9px); width:clamp(25px,10cqi,30px); height:clamp(25px,10cqi,30px); min-width:0; padding:0; border-radius:9px; background:var(--vd-overlay-control); border:1px solid var(--vd-on-accent-border); box-shadow:var(--vd-shadow-sm); backdrop-filter:blur(7px); } .media-card-select { left:clamp(6px,3cqi,9px); } .media-card-favorite-toggle { right:clamp(6px,3cqi,9px); font-size:0; } .media-card-favorite-toggle .vd-icon { width:clamp(14px,5.5cqi,17px); height:clamp(14px,5.5cqi,17px); } .media-card-select input + span { width:clamp(15px,6cqi,18px); height:clamp(15px,6cqi,18px); border-radius:5px; display:grid; place-items:center; color:transparent; } .media-card-select input:checked + span { color:var(--vd-on-accent); } .media-card-select input:checked + span::after { content:none; } .media-card-actions { gap:5px; padding:8px; } .media-action { min-width:0; min-height:34px; padding:7px; border-radius:9px; justify-content:center; } .media-action .media-action-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .media-action-icon { width:17px; height:17px; } .media-open-indicator { width:38px; height:38px; } .media-open-indicator .media-action-icon { width:18px; height:18px; } @container media-card (min-width: 390px) { .media-action { gap:6px; padding-inline:10px; } .media-action .media-action-label { position:static; width:auto; height:auto; overflow:visible; clip:auto; white-space:normal; } } .media-lightbox-dialog { width:min(1440px,calc(100vw - 32px)); height:min(940px,calc(100dvh - 32px)); max-height:none; display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; overflow:hidden; } .media-lightbox-dialog > header { min-height:58px; } .media-lightbox-close { border-radius:999px; } .media-lightbox-toolbar { display:flex; align-items:center; gap:8px; padding:8px 14px; border-bottom:1px solid var(--vd-line); background:var(--vd-surface-muted); } .media-lightbox-toolbar input[type="range"] { width:min(260px,32vw); } .media-lightbox-toolbar output { min-width:58px; color:var(--vd-ink-muted); font-size:10px; text-align:right; } .media-lightbox-body { min-height:0; height:100%; grid-template-columns:minmax(0,1fr) minmax(245px,320px); } .media-lightbox-stage { position:relative; display:block; min-height:0; padding:14px; overflow:auto; cursor:grab; overscroll-behavior:contain; user-select:none; } .media-lightbox-stage.is-dragging { cursor:grabbing; } .media-lightbox-canvas { position:relative; min-width:1px; min-height:1px; margin:auto; box-shadow:var(--vd-shadow-lg); } .media-lightbox-stage img { display:block; max-width:none; max-height:none; object-fit:contain; pointer-events:none; } #media-lightbox-meta { min-height:0; } .media-lightbox-dialog > footer .vd-button { display:inline-flex; align-items:center; } @media (max-width: 820px) { .media-lightbox-dialog { width:calc(100vw - 12px); height:calc(100dvh - 12px); } .media-lightbox-body { grid-template-columns:1fr; grid-template-rows:minmax(300px,1fr) auto; } #media-lightbox-meta { max-height:190px; border-left:0; border-top:1px solid var(--vd-line); } .media-lightbox-toolbar { flex-wrap:wrap; } .media-lightbox-toolbar input[type="range"] { flex:1; width:auto; min-width:120px; } } .smart-copy-center { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(250px,.55fr); gap:16px; padding:18px; } .smart-copy-center-main, .smart-copy-center-side { min-width:0; display:grid; align-content:start; gap:14px; } .smart-copy-center-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; } .smart-copy-center-heading h3 { margin:4px 0 0; overflow-wrap:anywhere; } .smart-copy-center-description { max-height:280px; overflow:auto; padding:14px; border:1px solid var(--vd-line); border-radius:12px; background:var(--vd-surface-muted); color:var(--vd-ink-secondary); line-height:1.58; overflow-wrap:anywhere; } .smart-copy-center-tags { display:flex; flex-wrap:wrap; gap:6px; } .smart-copy-center-tags span { padding:5px 8px; border-radius:999px; background:var(--vd-surface-muted); color:var(--vd-ink-secondary); font-size:9px; } .smart-copy-center-meta { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .smart-copy-center-meta > div { min-width:0; padding:10px; border:1px solid var(--vd-line); border-radius:10px; } .smart-copy-center-meta span { display:block; color:var(--vd-ink-muted); font-size:8px; } .smart-copy-center-meta strong { display:block; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; } .smart-copy-center-side > p { margin:0; color:var(--vd-ink-muted); line-height:1.5; } @media (max-width: 1050px) { .smart-copy-center { grid-template-columns:1fr; } .smart-copy-center-side { grid-template-columns:minmax(120px,.35fr) minmax(0,1fr); } .smart-copy-center-side > p { grid-column:1/-1; } } @media (max-width: 680px) { .smart-copy-center { padding:12px; } .smart-copy-center-heading { align-items:stretch; flex-direction:column; } .smart-copy-center-heading .vd-button { width:100%; justify-content:center; } .smart-copy-center-meta { grid-template-columns:repeat(2,minmax(0,1fr)); } .smart-copy-center-side { grid-template-columns:1fr; } } .extensions-page { width:100%; min-width:0; } .extensions-heading { align-items:flex-start; } .extensions-active-browser { display:grid; gap:4px; min-width:210px; padding:12px 14px; border:1px solid var(--vd-line); border-radius:12px; background:var(--vd-surface-raised); } .extensions-active-browser span { color:var(--vd-ink-muted); font-size:8px; text-transform:uppercase; letter-spacing:.08em; } .extensions-active-browser strong { display:flex; align-items:center; gap:8px; } .extensions-notice { display:flex; gap:12px; align-items:flex-start; margin:0 0 16px; padding:14px 16px; border:1px solid color-mix(in srgb,var(--vd-brand) 24%,var(--vd-line)); border-radius:14px; background:color-mix(in srgb,var(--vd-brand) 6%,var(--vd-surface-raised)); } .extensions-notice > span { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:var(--vd-brand); color:var(--vd-on-accent); } .extensions-notice p { margin:4px 0 0; color:var(--vd-ink-muted); } .extensions-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,285px),1fr)); gap:14px; } .extension-card { min-width:0; display:grid; align-content:start; gap:13px; padding:16px; border:1px solid var(--vd-line); border-radius:16px; background:var(--vd-surface-raised); box-shadow:var(--vd-shadow-card); } .extension-card.is-active { border-color:color-mix(in srgb,var(--vd-brand) 55%,var(--vd-line)); box-shadow:0 0 0 2px color-mix(in srgb,var(--vd-brand) 12%,transparent),var(--vd-shadow-card); } .extension-card header { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; } .extension-browser-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:13px; background:var(--vd-surface-muted); color:var(--vd-brand); } .extension-card header span { color:var(--vd-brand); font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; } .extension-card h3 { margin:2px 0 0; } .extension-card header b { align-self:start; padding:4px 7px; border-radius:999px; background:var(--vd-surface-muted); font-size:8px; } .extension-card > p, .extension-card > small { margin:0; color:var(--vd-ink-muted); line-height:1.5; } .extension-path { min-width:0; display:grid; gap:5px; padding:10px; border-radius:10px; background:var(--vd-surface-muted); } .extension-path span { font-size:8px; color:var(--vd-ink-muted); } .extension-path code { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; } .extension-card ol { margin:0; padding-left:20px; color:var(--vd-ink-secondary); line-height:1.7; } .extension-card-actions { display:flex; gap:7px; align-items:center; } .extension-card-actions .vd-button { flex:1; justify-content:center; } .extension-card-actions .icon-button { flex:0 0 auto; } .extensions-help-card { display:grid; gap:12px; margin-top:16px; padding:16px; border:1px solid var(--vd-line); border-radius:16px; background:var(--vd-surface-raised); } .extensions-help-card > div { display:flex; gap:12px; } .extensions-help-card > div > span { width:36px; height:36px; display:grid; place-items:center; border-radius:11px; background:var(--vd-surface-muted); } .extensions-help-card p { margin:4px 0 0; color:var(--vd-ink-muted); } .extensions-help-card ol { margin:0; padding-left:22px; line-height:1.7; } @media (max-width: 620px) { .extensions-heading { display:grid; } .extensions-active-browser { width:100%; min-width:0; } .extension-card-actions { flex-wrap:wrap; } } .fee-platform { display:flex; align-items:center; gap:7px; } .fee-platform span { padding:3px 6px; border-radius:999px; background:var(--vd-surface-muted); color:var(--vd-ink-muted); font-size:8px; } .fee-note { margin-top:6px; max-width:700px; color:var(--vd-ink-muted); font-size:9px; line-height:1.45; } .fee-card.is-free .fee-net-amount { color:var(--vd-success); } .fee-card.is-free .fee-deducted { color:var(--vd-success); } .extensions-heading-actions { display:grid; gap:10px; justify-items:stretch; min-width:min(100%, 260px); } .extensions-heading-actions .vd-button { justify-content:center; width:100%; } .fee-heading { align-items:flex-start; margin-bottom:18px; } .fee-heading > div { max-width:780px; } .fee-verified-badge { display:inline-flex; align-items:center; min-height:34px; padding:0 12px; border:1px solid var(--vd-line); border-radius:999px; background:var(--vd-surface-raised); color:var(--vd-ink-muted); font-size:12px; font-weight:700; white-space:nowrap; } @media (max-width: 720px) { .extensions-heading-actions { width:100%; min-width:0; } .fee-heading { display:grid; gap:12px; } .fee-verified-badge { width:max-content; } } .connection-banner { position: sticky; top: var(--vd-topbar-height); z-index: 70; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; padding: 10px clamp(14px, 2vw, 28px); border-bottom: 1px solid color-mix(in srgb, var(--vd-danger) 35%, var(--vd-line)); background: color-mix(in srgb, var(--vd-danger) 8%, var(--vd-surface)); color: var(--vd-ink); box-shadow: var(--vd-shadow-sm); } .connection-banner.hidden { display: none; } .connection-banner-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--vd-danger); box-shadow: 0 0 0 5px color-mix(in srgb, var(--vd-danger) 14%, transparent); } .connection-banner strong, .connection-banner span { min-width: 0; overflow-wrap: anywhere; } .connection-banner > span:not(.connection-banner-dot) { color: var(--vd-ink-muted); font-size: 12px; } .connection-banner button { min-height: 34px; padding: 0 12px; border: 1px solid var(--vd-line); border-radius: 10px; background: var(--vd-surface); color: var(--vd-ink); font: inherit; cursor: pointer; } .system-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 16px; } .system-panel-heading h3 { margin: 2px 0 5px; font-size: clamp(20px, 2vw, 27px); } .system-panel-heading p:last-child { max-width: 760px; margin: 0; color: var(--vd-ink-muted); line-height: 1.55; } .system-panel-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .diagnostics-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 54px; margin-bottom: 14px; padding: 13px 15px; border: 1px solid var(--vd-line); border-radius: 14px; background: var(--vd-surface-raised); } .diagnostics-summary span { color: var(--vd-ink-muted); font-size: 12px; } .diagnostics-summary.is-ok { border-color: color-mix(in srgb, var(--vd-success) 34%, var(--vd-line)); background: color-mix(in srgb, var(--vd-success) 6%, var(--vd-surface)); } .diagnostics-summary.is-warning, .diagnostics-summary.is-running { border-color: color-mix(in srgb, var(--vd-warning) 38%, var(--vd-line)); background: color-mix(in srgb, var(--vd-warning) 7%, var(--vd-surface)); } .diagnostics-summary.is-error { border-color: color-mix(in srgb, var(--vd-danger) 40%, var(--vd-line)); background: color-mix(in srgb, var(--vd-danger) 7%, var(--vd-surface)); } .diagnostics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 10px; margin-bottom: 22px; } .diagnostic-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px; min-width: 0; padding: 13px; border: 1px solid var(--vd-line); border-radius: 14px; background: var(--vd-surface); } .diagnostic-card-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--vd-surface-muted); } .diagnostic-card strong, .diagnostic-card p { min-width: 0; overflow-wrap: anywhere; } .diagnostic-card p { margin: 4px 0 0; color: var(--vd-ink-muted); font-size: 12px; line-height: 1.45; } .diagnostic-card-status { padding: 4px 7px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .diagnostic-card.is-ok .diagnostic-card-status { color: var(--vd-success); background: color-mix(in srgb,var(--vd-success) 12%,transparent); } .diagnostic-card.is-error .diagnostic-card-status { color: var(--vd-danger); background: color-mix(in srgb, var(--vd-danger) 12%, transparent); } .diagnostic-card.is-warning .diagnostic-card-status, .diagnostic-card.is-optional .diagnostic-card-status { color: var(--vd-warning); background: color-mix(in srgb,var(--vd-warning) 13%,transparent); } .diagnostics-loading { grid-column: 1 / -1; display: flex; justify-content: center; gap: 7px; padding: 30px; } .diagnostics-loading span { width: 8px; height: 8px; border-radius: 50%; background: var(--vd-brand); animation: vd-diagnostic-pulse 900ms infinite alternate; } .diagnostics-loading span:nth-child(2) { animation-delay: 160ms; } .diagnostics-loading span:nth-child(3) { animation-delay: 320ms; } @keyframes vd-diagnostic-pulse { to { opacity: .28; transform: translateY(-4px); } } .main-wrapper, .main-wrapper main, .tab-content, .tab-content > *, .page-heading, .form-grid, .card, .panel { min-width: 0; max-width: 100%; } .tab-content img, .tab-content video, .tab-content canvas, .tab-content iframe { max-width: 100%; } .tab-content input, .tab-content select, .tab-content textarea, .tab-content button { max-width: 100%; } .tab-content pre, .tab-content code { overflow-wrap: anywhere; word-break: break-word; } .tab-content td { overflow-wrap: break-word; word-break: normal; } .tab-content th { overflow-wrap: normal; word-break: normal; } .main-wrapper[data-layout-width="phone"] .page-heading, .main-wrapper[data-layout-width="narrow"] .page-heading, .tab-content[data-layout-width="phone"] .page-heading, .tab-content[data-layout-width="narrow"] .page-heading { align-items: stretch; flex-direction: column; } .main-wrapper[data-layout-width="phone"] .page-heading > *, .main-wrapper[data-layout-width="narrow"] .page-heading > * { min-width: 0; max-width: 100%; } .main-wrapper[data-layout-width="phone"] .page-heading button, .main-wrapper[data-layout-width="phone"] .page-heading select { width: 100%; } .main-wrapper[data-layout-width="phone"] .toolbar, .main-wrapper[data-layout-width="narrow"] .toolbar, .main-wrapper[data-layout-width="phone"] .filter-row, .main-wrapper[data-layout-width="narrow"] .filter-row { flex-wrap: wrap; min-width: 0; } .main-wrapper[data-layout-width="phone"] .toolbar > *, .main-wrapper[data-layout-width="phone"] .filter-row > * { flex: 1 1 100%; min-width: 0; } .main-wrapper[data-layout-width="phone"] .system-panel-heading, .main-wrapper[data-layout-width="narrow"] .system-panel-heading { flex-direction: column; } .main-wrapper[data-layout-width="phone"] .system-panel-actions, .main-wrapper[data-layout-width="narrow"] .system-panel-actions { width: 100%; justify-content: stretch; } .main-wrapper[data-layout-width="phone"] .system-panel-actions > *, .main-wrapper[data-layout-width="narrow"] .system-panel-actions > * { flex: 1 1 180px; } @media (max-width: 640px) { .connection-banner { grid-template-columns: auto minmax(0, 1fr); } .connection-banner > span:not(.connection-banner-dot) { grid-column: 2; } .connection-banner button { grid-column: 1 / -1; width: 100%; } .diagnostic-card { grid-template-columns: auto minmax(0, 1fr); } .diagnostic-card-status { grid-column: 2; justify-self: start; } } @media (prefers-reduced-motion: reduce) { .diagnostics-loading span { animation: none; } } .image-factory-page { container-type: inline-size; } .image-factory-heading-actions, .image-factory-job-tools, .image-factory-source-tools, .image-factory-heading-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .image-factory-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 320px); gap: 18px; align-items: start; } .surface-card { background: var(--vd-surface-raised); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-md); box-shadow: var(--vd-shadow-none); } .image-factory-config, .image-factory-status, .image-factory-jobs { padding: clamp(16px, 2vw, 24px); min-width: 0; } .section-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; } .section-title-row h3 { margin: 2px 0 0; } .image-factory-selection { padding: 7px 10px; border-radius: 999px; background: var(--vd-brand-soft); color: var(--vd-brand); font-size: 12px; font-weight: 700; white-space: nowrap; } .image-factory-source-head, .image-factory-profile-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; margin: 24px 0 10px; } .image-factory-source-head > div:first-child, .image-factory-profile-head > div:first-child { display: grid; gap: 3px; } .image-factory-source-head span, .image-factory-profile-head span { color: var(--vd-ink-muted); font-size: 12px; } .image-factory-source-tools input, .image-factory-source-tools select { min-width: 150px; } .image-factory-source-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 10px; max-height: 390px; overflow: auto; padding: 2px; } .image-factory-source-card { position: relative; display: grid; grid-template-rows: minmax(90px, 1fr) auto; min-width: 0; overflow: hidden; border: 1px solid var(--vd-line); border-radius: 12px; background: var(--vd-surface-quiet); cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .image-factory-source-card:hover { border-color: color-mix(in srgb, var(--vd-brand) 45%, var(--vd-line)); transform: translateY(-1px); } .image-factory-source-card.is-selected { border-color: var(--vd-brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--vd-brand) 18%, transparent); } .image-factory-source-card > input { position: absolute; opacity: 0; pointer-events: none; } .image-factory-source-card > img { width: 100%; height: 100%; min-height: 100px; aspect-ratio: 1 / 1; object-fit: cover; background: var(--vd-surface-raised); } .image-factory-source-check { position: absolute; top: 7px; left: 7px; width: 23px; height: 23px; border-radius: 7px; display: grid; place-items: center; color: transparent; background: color-mix(in srgb, var(--vd-surface-raised) 92%, transparent); border: 1px solid color-mix(in srgb, var(--vd-line) 80%, transparent); box-shadow: var(--vd-shadow-xs); } .image-factory-source-card.is-selected .image-factory-source-check { background: var(--vd-brand); border-color: var(--vd-brand); color: var(--vd-on-accent); } .image-factory-source-caption { display: grid; gap: 2px; padding: 8px 9px; min-width: 0; } .image-factory-source-caption strong, .image-factory-source-caption small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .image-factory-source-caption strong { font-size: 11px; } .image-factory-source-caption small { font-size: 10px; color: var(--vd-ink-muted); } .image-factory-profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; } .image-factory-profile-card { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; min-width: 0; padding: 13px; border: 1px solid var(--vd-line); border-radius: 12px; background: var(--vd-surface-quiet); } .image-factory-profile-card.is-selected { border-color: var(--vd-brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--vd-brand) 16%, transparent); } .image-factory-profile-select { position: absolute; inset: 0; cursor: pointer; z-index: 1; } .image-factory-profile-select input { position: absolute; opacity: 0; } .image-factory-profile-select span { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; color: transparent; border: 1px solid var(--vd-line); background: var(--vd-surface-raised); } .image-factory-profile-card.is-selected .image-factory-profile-select span { color: var(--vd-on-accent); border-color: var(--vd-brand); background: var(--vd-brand); } .image-factory-profile-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--vd-brand-soft); color: var(--vd-brand); font-weight: 800; } .image-factory-profile-copy { min-width: 0; padding-right: 24px; } .image-factory-profile-copy strong { font-size: 13px; } .image-factory-profile-copy p { margin: 4px 0 7px; color: var(--vd-ink-secondary); font-size: 11px; line-height: 1.35; } .image-factory-profile-copy small { color: var(--vd-ink-muted); font-size: 10px; } .image-factory-profile-badge { align-self: end; padding: 3px 7px; border-radius: 999px; background: var(--vd-surface-raised); color: var(--vd-ink-muted); font-size: 9px; text-transform: uppercase; font-weight: 700; } .image-factory-profile-actions { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 4px; } .image-factory-profile-actions button { border: 0; background: transparent; color: var(--vd-ink-muted); font-size: 10px; cursor: pointer; padding: 4px; } .image-factory-profile-actions button:hover { color: var(--vd-brand); } .image-factory-options { margin-top: 20px; border: 1px solid var(--vd-line); border-radius: 12px; overflow: hidden; } .image-factory-options summary { cursor: pointer; padding: 13px 15px; font-weight: 700; background: var(--vd-surface-quiet); } .image-factory-options-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 16px; } .image-factory-options .toggle-row { align-self: center; } .image-factory-submit { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--vd-line); } .image-factory-submit > div { display: grid; gap: 3px; min-width: 0; } .image-factory-submit span { color: var(--vd-ink-muted); font-size: 11px; } .image-factory-status { position: sticky; top: 18px; } .image-factory-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 16px; } .image-factory-stat-grid > div { display: grid; gap: 3px; padding: 12px; border: 1px solid var(--vd-line); border-radius: 11px; background: var(--vd-surface-quiet); } .image-factory-stat-grid span { color: var(--vd-ink-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; } .image-factory-stat-grid strong { font-size: 21px; } .image-factory-help { margin-top: 16px; padding: 13px; border-radius: 11px; background: var(--vd-brand-soft); } .image-factory-help p { margin: 5px 0 0; color: var(--vd-ink-secondary); font-size: 11px; line-height: 1.45; } .image-factory-jobs { margin-top: 18px; } .image-factory-job-list { display: grid; gap: 10px; } .image-factory-job { overflow: hidden; border: 1px solid var(--vd-line); border-radius: 12px; background: var(--vd-surface-quiet); } .image-factory-job-head { width: 100%; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 13px 14px 10px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; } .image-factory-job-chevron { font-size: 22px; color: var(--vd-ink-muted); transition: transform .18s ease; } .image-factory-job.is-expanded .image-factory-job-chevron { transform: rotate(90deg); } .image-factory-job-title { display: grid; min-width: 0; } .image-factory-job-title strong, .image-factory-job-title small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .image-factory-job-title small { color: var(--vd-ink-muted); font-size: 10px; margin-top: 3px; } .image-factory-job-count { font-weight: 700; font-variant-numeric: tabular-nums; } .image-factory-job-status { padding: 5px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; background: var(--vd-surface-raised); } .image-factory-job.is-running .image-factory-job-status { background: var(--vd-info-soft); color: var(--vd-info); } .image-factory-job.is-completed .image-factory-job-status { background: var(--vd-success-soft); color: var(--vd-success); } .image-factory-job.is-failed .image-factory-job-status { background: var(--vd-danger-soft); color: var(--vd-danger); } .image-factory-job.is-partial .image-factory-job-status, .image-factory-job.is-paused .image-factory-job-status { background: var(--vd-warning-soft); color: var(--vd-warning); } .image-factory-job-progress { height: 4px; margin: 0 14px; overflow: hidden; border-radius: 99px; background: var(--vd-line); } .image-factory-job-progress span { display: block; height: 100%; border-radius: inherit; background: var(--vd-brand); transition: width .2s ease; } .image-factory-job-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; padding: 10px 14px 13px; } .image-factory-job-detail { border-top: 1px solid var(--vd-line); padding: 12px 14px 14px; } .image-factory-job-loading { color: var(--vd-ink-muted); font-size: 12px; } .image-factory-job-items { display: grid; gap: 7px; } .image-factory-job-item { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto auto; gap: 9px; align-items: center; padding: 8px; border: 1px solid var(--vd-line); border-radius: 9px; background: var(--vd-surface-raised); } .image-factory-job-item img { width: 46px; height: 46px; object-fit: cover; border-radius: 7px; background: var(--vd-surface-quiet); } .image-factory-job-item > div { display: grid; min-width: 0; } .image-factory-job-item strong, .image-factory-job-item span, .image-factory-job-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .image-factory-job-item span, .image-factory-job-item small { color: var(--vd-ink-muted); font-size: 10px; } .image-factory-job-item small { color: var(--vd-danger); } .image-factory-item-status { padding: 4px 7px; border-radius: 999px; background: var(--vd-surface-quiet); font-size: 10px; font-weight: 700; } .image-factory-pagination { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 16px; } .image-factory-profile-modal { max-width: 620px; } .image-factory-profile-form { display: grid; gap: 13px; } @container (max-width: 900px) { .image-factory-layout { grid-template-columns: 1fr; } .image-factory-status { position: static; } .image-factory-stat-grid { grid-template-columns: repeat(3, 1fr); } } @container (max-width: 680px) { .image-factory-source-head, .image-factory-profile-head, .image-factory-submit, .section-title-row { align-items: stretch; flex-direction: column; } .image-factory-source-tools > * { flex: 1 1 160px; min-width: 0; } .image-factory-options-grid { grid-template-columns: 1fr; } .image-factory-submit .primary-btn { width: 100%; } .image-factory-job-head { grid-template-columns: 18px minmax(0, 1fr) auto; } .image-factory-job-status { grid-column: 2 / -1; justify-self: start; } .image-factory-job-item { grid-template-columns: 42px minmax(0, 1fr) auto; } .image-factory-job-item img { width: 42px; height: 42px; } .image-factory-job-item .vd-button { grid-column: 2 / -1; width: 100%; } } @container (max-width: 430px) { .image-factory-source-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .image-factory-profile-grid { grid-template-columns: 1fr; } .image-factory-stat-grid { grid-template-columns: repeat(2, 1fr); } .image-factory-job-actions > * { flex: 1 1 100%; text-align: center; } } .media-source-chip.is-batch { background:color-mix(in srgb,var(--vd-brand) 14%,var(--vd-surface-raised)); color:var(--vd-brand); } .quality-center-page { container-type: inline-size; } .quality-center-heading { align-items:flex-start; gap:24px; } .quality-center-heading .page-heading-actions { display:flex; flex-wrap:wrap; gap:10px; } .quality-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:16px; } .quality-summary-grid article { min-width:0; padding:18px 20px; border:1px solid var(--vd-line); border-radius:18px; background:linear-gradient(145deg,var(--vd-surface),color-mix(in srgb,var(--vd-surface) 90%,var(--vd-brand) 10%)); box-shadow:var(--vd-shadow-none); } .quality-summary-grid span,.quality-summary-grid small { display:block; color:var(--vd-ink-muted); font-size:12px; } .quality-summary-grid strong { display:block; margin:5px 0 2px; font-size:30px; line-height:1; letter-spacing:-.04em; color:var(--vd-ink); } .quality-toolbar { display:grid; grid-template-columns:minmax(240px,1.6fr) repeat(3,minmax(130px,.55fr)); gap:12px; padding:14px; margin-bottom:16px; } .quality-toolbar label { display:grid; gap:6px; min-width:0; } .quality-toolbar label>span { font-size:11px; font-weight:700; color:var(--vd-ink-muted); text-transform:uppercase; letter-spacing:.08em; } .quality-toolbar input,.quality-toolbar select { width:100%; min-width:0; } .quality-workspace { display:grid; grid-template-columns:minmax(350px,.88fr) minmax(440px,1.32fr); gap:16px; align-items:start; } .quality-list-panel,.quality-detail-panel { min-width:0; padding:16px; } .quality-list { display:grid; gap:8px; } .quality-list-item { width:100%; display:grid; grid-template-columns:52px minmax(0,1fr) 54px auto; gap:12px; align-items:center; padding:10px; border:1px solid transparent; border-radius:15px; background:var(--vd-surface-muted); color:var(--vd-ink); text-align:left; cursor:pointer; transition:.18s ease; } .quality-list-item:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--vd-brand) 45%,var(--vd-line)); background:color-mix(in srgb,var(--vd-surface-muted) 88%,var(--vd-brand) 12%); } .quality-list-item.is-active { border-color:var(--vd-brand); box-shadow:0 0 0 2px color-mix(in srgb,var(--vd-brand) 16%,transparent); } .quality-list-thumb { width:52px; aspect-ratio:1; display:grid; place-items:center; overflow:hidden; border-radius:12px; background:var(--vd-surface); color:var(--vd-ink-muted); } .quality-list-thumb img { width:100%; height:100%; object-fit:cover; } .quality-list-copy { min-width:0; display:grid; gap:3px; } .quality-list-copy strong,.quality-list-copy small,.quality-list-copy span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .quality-list-copy strong { font-size:14px; } .quality-list-copy small { color:var(--vd-ink-muted); font-size:11px; } .quality-list-copy span { color:var(--vd-ink-secondary); font-size:12px; } .quality-list-score { width:48px; height:48px; border-radius:50%; display:grid; place-content:center; text-align:center; background:var(--vd-surface); border:2px solid var(--vd-line); } .quality-list-score b { font-size:15px; line-height:1; } .quality-list-score em { font-style:normal; font-size:9px; color:var(--vd-ink-muted); } .quality-list-score.is-a,.quality-list-score.is-b { border-color:var(--vd-success); color:var(--vd-success); } .quality-list-score.is-c { border-color:var(--vd-warning); color:var(--vd-warning); } .quality-list-score.is-d,.quality-list-score.is-e { border-color:var(--vd-danger); color:var(--vd-danger); } .quality-list-state { padding:5px 8px; border-radius:999px; font-size:10px; font-weight:800; white-space:nowrap; } .quality-list-item.is-ready .quality-list-state { background:var(--vd-success-soft); color:var(--vd-success); } .quality-list-item.is-review .quality-list-state { background:var(--vd-warning-soft); color:var(--vd-warning); } .quality-list-item.is-blocked .quality-list-state { background:var(--vd-danger-soft); color:var(--vd-danger); } .quality-pagination { display:flex; justify-content:center; align-items:center; gap:12px; margin-top:14px; } .quality-detail-panel { position:sticky; top:16px; max-height:calc(100vh - 118px); overflow:auto; scrollbar-width:thin; } .quality-detail-empty { min-height:420px; display:grid; place-content:center; text-align:center; gap:8px; color:var(--vd-ink-muted); padding:30px; } .quality-empty-icon { width:64px; height:64px; margin:auto; border-radius:20px; display:grid; place-items:center; font-size:28px; background:color-mix(in srgb,var(--vd-brand) 12%,var(--vd-surface-muted)); color:var(--vd-brand); } .quality-detail-content { display:grid; gap:16px; } .quality-detail-content.is-loading { opacity:.58; pointer-events:none; } .quality-detail-head { display:grid; grid-template-columns:92px minmax(0,1fr); gap:16px; align-items:center; } .quality-score-ring { --vd-runtime-quality-score:0deg; width:88px; aspect-ratio:1; border-radius:50%; display:grid; place-content:center; text-align:center; background:radial-gradient(circle at center,var(--vd-surface) 61%,transparent 63%),conic-gradient(var(--vd-brand) var(--vd-runtime-quality-score),var(--vd-surface-quiet) 0); } .quality-score-ring[data-grade="A"],.quality-score-ring[data-grade="B"] { background:radial-gradient(circle at center,var(--vd-surface) 61%,transparent 63%),conic-gradient(var(--vd-success) var(--vd-runtime-quality-score),var(--vd-surface-quiet) 0); } .quality-score-ring[data-grade="D"],.quality-score-ring[data-grade="E"] { background:radial-gradient(circle at center,var(--vd-surface) 61%,transparent 63%),conic-gradient(var(--vd-danger) var(--vd-runtime-quality-score),var(--vd-surface-quiet) 0); } .quality-score-ring strong { font-size:25px; line-height:1; } .quality-score-ring span { font-size:10px; color:var(--vd-ink-muted); } .quality-detail-head h3 { margin:3px 0 5px; font-size:20px; overflow-wrap:anywhere; } .quality-detail-head p { margin:0; color:var(--vd-ink-muted); } .quality-readiness { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:12px 14px; border-radius:14px; background:var(--vd-surface-muted); } .quality-readiness span { color:var(--vd-ink-muted); font-size:12px; } .quality-detail-actions { display:flex; flex-wrap:wrap; gap:8px; } .quality-financials { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .quality-financials div { padding:12px; border:1px solid var(--vd-line); border-radius:13px; background:var(--vd-surface-muted); min-width:0; } .quality-financials span { display:block; font-size:10px; color:var(--vd-ink-muted); text-transform:uppercase; letter-spacing:.06em; } .quality-financials strong { display:block; margin-top:4px; overflow-wrap:anywhere; } .quality-issue-tabs { display:flex; gap:6px; overflow:auto; padding-bottom:2px; } .quality-issue-tabs button { flex:0 0 auto; border:1px solid var(--vd-line); border-radius:999px; padding:7px 11px; background:var(--vd-surface); color:var(--vd-ink-muted); font-size:11px; font-weight:700; } .quality-issue-tabs button.active { background:var(--vd-ink); color:var(--vd-surface); border-color:var(--vd-ink); } .quality-issues { display:grid; gap:8px; } .quality-issue { display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:10px; align-items:start; padding:12px; border:1px solid var(--vd-line); border-radius:14px; background:var(--vd-surface-muted); } .quality-issue.is-error { border-left:3px solid var(--vd-danger); } .quality-issue.is-warning { border-left:3px solid var(--vd-warning); } .quality-issue.is-recommendation { border-left:3px solid var(--vd-data-recommendation); } .quality-issue-icon { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:var(--vd-surface); } .quality-issue strong { display:block; font-size:13px; } .quality-issue p { margin:3px 0 4px; color:var(--vd-ink-secondary); font-size:12px; line-height:1.45; } .quality-issue small { color:var(--vd-ink-muted); font-size:10px; } .quality-issue-points { font-size:11px; font-weight:800; color:var(--vd-ink-muted); } .quality-all-clear { padding:20px; border-radius:14px; text-align:center; background:color-mix(in srgb,var(--vd-success) 9%,transparent); color:var(--vd-success); } .quality-all-clear span { display:block; margin-top:4px; font-size:12px; } .quality-duplicates,.quality-images,.quality-history { border-top:1px solid var(--vd-line); padding-top:14px; } .quality-duplicates>div:last-child,.quality-images>div:last-child,.quality-history>div:last-child { display:grid; gap:7px; } .quality-duplicates button { display:flex; justify-content:space-between; gap:12px; width:100%; padding:10px 12px; border:1px solid var(--vd-line); border-radius:12px; background:var(--vd-surface-muted); color:var(--vd-ink); text-align:left; } .quality-duplicates button span { color:var(--vd-ink-muted); font-size:11px; } .quality-image-check { display:grid; grid-template-columns:28px minmax(0,1fr); gap:8px; align-items:center; padding:9px 10px; border-radius:11px; background:var(--vd-surface-muted); } .quality-image-check>span { width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:var(--vd-surface); color:var(--vd-brand); } .quality-image-check strong,.quality-image-check small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .quality-image-check small { color:var(--vd-ink-muted); font-size:10px; margin-top:2px; } .quality-history-item { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px; align-items:center; padding:8px 10px; border-radius:10px; background:var(--vd-surface-muted); font-size:11px; } .quality-history-item span { color:var(--vd-ink-muted); } .quality-history-item strong { font-size:14px; } .quality-history-item em { font-style:normal; color:var(--vd-ink-muted); } #quality-score-delta[data-tone="up"] { color:var(--vd-success); } #quality-score-delta[data-tone="down"] { color:var(--vd-danger); } .quality-empty-note { margin:0; padding:10px; color:var(--vd-ink-muted); font-size:12px; } .quality-loading { min-height:220px; display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; color:var(--vd-ink-muted); } .quality-loading span { width:7px; height:7px; border-radius:50%; background:var(--vd-brand); animation:qualityPulse 1s infinite alternate; } .quality-loading span:nth-child(2){animation-delay:.15s}.quality-loading span:nth-child(3){animation-delay:.3s}.quality-loading p{flex-basis:100%;text-align:center;margin:4px 0 0} @keyframes qualityPulse { to { opacity:.25; transform:translateY(-4px); } } .quality-ai-modal { width:min(1120px,calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow:auto; } .quality-ai-options { display:flex; flex-wrap:wrap; gap:10px; align-items:end; padding:14px; border-radius:14px; background:var(--vd-surface-muted); } .quality-ai-options label:not(.quality-ai-mode) { display:flex; align-items:center; gap:7px; padding:8px 10px; border:1px solid var(--vd-line); border-radius:10px; background:var(--vd-surface); } .quality-ai-mode { margin-left:auto; display:grid; gap:5px; min-width:160px; } .quality-ai-status { padding:11px 13px; border-radius:12px; background:color-mix(in srgb,var(--vd-brand) 9%,var(--vd-surface-muted)); color:var(--vd-ink-secondary); font-size:12px; } .quality-ai-compare { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .quality-ai-compare section { min-width:0; display:grid; gap:10px; padding:14px; border:1px solid var(--vd-line); border-radius:16px; background:var(--vd-surface-muted); } .quality-ai-compare h3 { margin:0; } .quality-ai-compare label { display:grid; gap:5px; font-size:11px; font-weight:700; color:var(--vd-ink-muted); } .quality-ai-compare textarea { width:100%; min-height:62px; resize:vertical; } .quality-ai-compare label:nth-of-type(2) textarea { min-height:190px; } .quality-ai-reasons { display:flex; flex-wrap:wrap; gap:7px; } .quality-ai-reasons span { padding:6px 9px; border-radius:999px; background:var(--vd-surface-muted); color:var(--vd-ink-muted); font-size:10px; } .quality-ai-modal footer { display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; } @container (max-width: 920px) { .quality-workspace { grid-template-columns:1fr; } .quality-detail-panel { position:static; max-height:none; } } @container (max-width: 680px) { .quality-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .quality-toolbar { grid-template-columns:1fr 1fr; } .quality-search { grid-column:1/-1; } .quality-list-item { grid-template-columns:46px minmax(0,1fr) 48px; } .quality-list-state { grid-column:2/-1; justify-self:start; } .quality-financials { grid-template-columns:1fr; } } @container (max-width: 460px) { .quality-summary-grid { grid-template-columns:1fr 1fr; gap:8px; } .quality-summary-grid article { padding:13px; } .quality-summary-grid strong { font-size:24px; } .quality-toolbar { grid-template-columns:1fr; } .quality-search { grid-column:auto; } .quality-detail-head { grid-template-columns:72px minmax(0,1fr); } .quality-score-ring { width:68px; } .quality-detail-actions>* { flex:1 1 100%; } .quality-list-copy span { display:none; } } @media (max-width: 760px) { .quality-ai-compare { grid-template-columns:1fr; } .quality-ai-mode { margin-left:0; width:100%; } } .publishing-hardened-header { align-items: flex-start; gap: 18px; } .publishing-toolbar { display:grid; grid-template-columns:minmax(220px,1fr) repeat(3,minmax(130px,auto)); gap:10px; padding:14px 18px; border-bottom:1px solid var(--vd-line); background:color-mix(in srgb,var(--vd-surface) 94%,transparent); } .publishing-toolbar select,.publishing-toolbar input { min-width:0; width:100%; } .publishing-selection-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 18px; border-bottom:1px solid var(--vd-line); background:var(--vd-surface-muted); } .publishing-selection-bar > span { margin-right:auto; color:var(--vd-ink-muted); font-size:.84rem; } .publishing-job-list { display:grid; gap:10px; padding:14px; } .publish-operation-row.publishing-job-row { display:grid; grid-template-columns:28px minmax(210px,1.3fr) minmax(120px,.65fr) minmax(150px,.75fr) minmax(100px,.5fr) minmax(160px,1fr) auto; gap:12px; align-items:center; padding:13px; border:1px solid var(--vd-line); border-radius:14px; background:var(--vd-surface); } .publishing-job-row.status-failed,.publishing-job-row.status-blocked { border-color:color-mix(in srgb,var(--vd-danger) 45%,var(--vd-line)); } .publishing-job-row.status-running { border-color:color-mix(in srgb,var(--vd-brand) 50%,var(--vd-line)); } .publishing-job-check { display:grid; place-items:center; } .publishing-job-check input { width:16px; height:16px; } .publishing-job-actions { display:flex; align-items:center; justify-content:flex-end; gap:5px; flex-wrap:wrap; } .publish-operation-meta small { display:block; color:var(--vd-ink-muted); margin-top:3px; font-size:.72rem; } .publishing-pagination { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 18px; border-top:1px solid var(--vd-line); } .publishing-pagination > div { display:flex; gap:8px; } .publishing-error-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:16px 18px; } .publishing-error-summary article { border:1px solid var(--vd-line); border-radius:14px; padding:16px; background:var(--vd-surface); display:grid; gap:4px; } .publishing-error-summary strong { font-size:1.65rem; } .publishing-error-summary span { color:var(--vd-ink-muted); font-size:.8rem; } .publishing-event-list { display:grid; gap:8px; padding:0 18px 18px; } .publishing-event-row { display:grid; grid-template-columns:10px minmax(0,1fr) auto auto; gap:12px; align-items:center; padding:12px 14px; border:1px solid var(--vd-line); border-radius:12px; background:var(--vd-surface); } .publishing-event-row.level-error { border-color:color-mix(in srgb,var(--vd-danger) 40%,var(--vd-line)); } .publishing-event-dot { width:8px; height:8px; border-radius:50%; background:var(--vd-brand); } .publishing-event-row.level-error .publishing-event-dot { background:var(--vd-danger); } .publishing-event-row > div { min-width:0; } .publishing-event-row strong,.publishing-event-row small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .publishing-event-row small { color:var(--vd-ink-muted); margin-top:3px; } .publishing-event-type { font-size:.72rem; padding:4px 8px; border-radius:999px; background:var(--vd-surface-muted); color:var(--vd-ink-muted); } .operation-status.status-awaiting_user { color:var(--vd-data-purple); background:color-mix(in srgb,var(--vd-data-purple) 14%,transparent); } .operation-status.status-retry_wait { color:var(--vd-warning); background:color-mix(in srgb,var(--vd-warning) 14%,transparent); } .operation-status.status-ended,.operation-status.status-cancelled { color:var(--vd-ink-muted); background:var(--vd-surface-muted); } @media (max-width: 1240px) { .publish-operation-row.publishing-job-row { grid-template-columns:28px minmax(200px,1fr) minmax(130px,.7fr) minmax(150px,.8fr) auto; } .publishing-job-row .publish-operation-meta:nth-of-type(3), .publishing-job-row .publish-operation-error { grid-column:2 / -2; } .publishing-job-actions { grid-column:-2 / -1; grid-row:1 / span 2; } } @media (max-width: 820px) { .publishing-toolbar { grid-template-columns:1fr 1fr; } .publishing-toolbar .publish-search-field { grid-column:1 / -1; } .publish-operation-row.publishing-job-row { grid-template-columns:24px minmax(0,1fr) auto; align-items:start; } .publishing-job-row .publish-operation-product { grid-column:2 / 3; } .publishing-job-row .publish-operation-meta,.publishing-job-row .publish-operation-error { grid-column: 2 / -1; } .publishing-job-actions { grid-column:2 / -1; grid-row:auto; justify-content:flex-start; } .publishing-error-summary { grid-template-columns:1fr; } .publishing-event-row { grid-template-columns:10px minmax(0,1fr) auto; } .publishing-event-type { display:none; } } @media (max-width: 520px) { .publishing-toolbar { grid-template-columns:1fr; } .publishing-toolbar .publish-search-field { grid-column:auto; } .publishing-pagination { align-items:stretch; flex-direction:column; } .publishing-pagination > div,.publishing-pagination button { width:100%; } .publishing-hardened-header > div:last-child { width:100%; display:grid; grid-template-columns:1fr; } } .operations-center { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--vd-line); min-width: 0; } .operations-center-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 16px; } .operations-center-head h3 { margin: 3px 0 5px; font-size: 20px; } .operations-center-head p { margin: 0; color: var(--vd-ink-muted); max-width: 760px; } .operations-tabs { display: flex; gap: 6px; padding: 5px; border: 1px solid var(--vd-line); border-radius: 12px; background: var(--vd-surface-quiet); overflow-x: auto; margin-bottom: 16px; } .operations-tab { min-height: 38px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--vd-ink-muted); font: inherit; font-weight: 700; white-space: nowrap; cursor: pointer; } .operations-tab:hover { color: var(--vd-ink); background: var(--vd-surface-raised); } .operations-tab.active { color: var(--vd-on-accent); background: var(--vd-brand); box-shadow: 0 6px 18px color-mix(in srgb, var(--vd-brand) 25%, transparent); } .operations-panel { display: none; min-width: 0; } .operations-panel.active { display: block; } .operations-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .operations-update-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .operations-update-upload { grid-column: 1 / -1; } .operations-card { min-width: 0; padding: 16px; border: 1px solid var(--vd-line); border-radius: 14px; background: var(--vd-surface-raised); box-shadow: var(--vd-shadow-soft); } .operations-card > header { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 15px; } .operations-card > header > span { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: var(--vd-brand); background: color-mix(in srgb, var(--vd-brand) 11%, transparent); } .operations-card h4, .operations-list-head h4 { margin: 0 0 3px; font-size: 14px; } .operations-card p, .operations-list-head p { margin: 0; color: var(--vd-ink-muted); font-size: 12px; line-height: 1.5; } .operation-field { display: grid; gap: 6px; margin-bottom: 11px; min-width: 0; } .operation-field > span { font-size: 11px; font-weight: 750; color: var(--vd-ink-muted); } .operation-field input, .operation-field select { width: 100%; min-width: 0; height: 39px; padding: 0 10px; border: 1px solid var(--vd-line); border-radius: 9px; background: var(--vd-surface-quiet); color: var(--vd-ink); } .operation-check { display: flex; gap: 9px; align-items: flex-start; padding: 9px 0; cursor: pointer; } .operation-check input { margin-top: 3px; accent-color: var(--vd-brand); } .operation-check span { min-width: 0; } .operation-check strong, .operation-check small { display: block; } .operation-check strong { font-size: 12px; } .operation-check small { margin-top: 2px; color: var(--vd-ink-muted); font-size: 10px; line-height: 1.4; } .operation-check.warning strong { color: var(--vd-warning); } .operation-inline-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .operation-dropzone { display: grid; place-items: center; min-height: 112px; padding: 15px; border: 1px dashed color-mix(in srgb, var(--vd-brand) 45%, var(--vd-line)); border-radius: 12px; background: color-mix(in srgb, var(--vd-brand) 4%, var(--vd-surface-quiet)); text-align: center; cursor: pointer; } .operation-dropzone:hover { border-color: var(--vd-brand); background: color-mix(in srgb, var(--vd-brand) 8%, var(--vd-surface-quiet)); } .operation-dropzone > span { color: var(--vd-brand); margin-bottom: 6px; } .operation-dropzone strong, .operation-dropzone small { display: block; } .operation-dropzone strong { font-size: 12px; } .operation-dropzone small { margin-top: 4px; color: var(--vd-ink-muted); font-size: 10px; } .operation-file-state { min-height: 30px; margin: 8px 0; padding: 7px 9px; border-radius: 8px; background: var(--vd-surface-quiet); color: var(--vd-ink-muted); font: 600 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; } .operations-list-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin: 20px 0 10px; } .operations-backup-list { display: grid; gap: 7px; } .operations-backup-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(120px, auto) auto; gap: 10px; align-items: center; padding: 11px; border: 1px solid var(--vd-line); border-radius: 11px; background: var(--vd-surface-raised); min-width: 0; } .operations-backup-row.is-missing { opacity: .55; } .operation-backup-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; color: var(--vd-brand); background: color-mix(in srgb, var(--vd-brand) 10%, transparent); } .operation-backup-main { min-width: 0; } .operation-backup-main strong, .operation-backup-main span, .operation-backup-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .operation-backup-main strong { font-size: 12px; } .operation-backup-main span { margin-top: 2px; color: var(--vd-ink-muted); font-size: 10px; } .operation-backup-main small { margin-top: 2px; color: var(--vd-ink-muted); font-size: 9px; } .operation-backup-hash { color: var(--vd-ink-muted); font-size: 9px; } .operation-backup-actions { display: flex; gap: 5px; } .operation-backup-actions .icon-button { width: 32px; height: 32px; } .operations-pending { display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 14px; border: 1px solid color-mix(in srgb, var(--vd-warning) 45%, var(--vd-line)); border-radius: 12px; background: color-mix(in srgb, var(--vd-warning) 8%, var(--vd-surface-raised)); } .operations-pending > span { color: var(--vd-warning); } .operations-pending > div { flex: 1; min-width: 0; } .operations-pending strong, .operations-pending p { display: block; margin: 0; } .operations-pending p { margin-top: 2px; color: var(--vd-ink-muted); font-size: 11px; } .operation-version-card { display: grid; gap: 4px; padding: 14px; border-radius: 11px; background: color-mix(in srgb, var(--vd-brand) 8%, var(--vd-surface-quiet)); } .operation-version-card strong { font-size: 18px; } .operation-version-card span { color: var(--vd-ink-muted); font-size: 10px; } .operation-migration-list { display: grid; gap: 6px; margin-top: 12px; max-height: 220px; overflow: auto; } .operation-migration-list > div { display: flex; gap: 8px; align-items: flex-start; padding: 7px; border-radius: 8px; background: var(--vd-surface-quiet); } .operation-migration-list > div > span { color: var(--vd-success); } .operation-migration-list p { min-width: 0; } .operation-migration-list strong, .operation-migration-list small { display: block; } .operation-migration-list small { color: var(--vd-ink-muted); font-size: 9px; } .operation-card-actions { display: flex; gap: 7px; flex-wrap: wrap; } .operation-result { display: grid; gap: 3px; min-height: 52px; margin-top: 10px; padding: 10px; border-radius: 9px; background: var(--vd-surface-quiet); color: var(--vd-ink-muted); font-size: 10px; } .operation-result strong { color: var(--vd-ink); font-size: 12px; } .deployment-production-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } .deployment-production-item { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; align-items: start; padding: 9px; border: 1px solid var(--vd-line); border-radius: 9px; background: var(--vd-surface-quiet); min-width: 0; } .deployment-production-item > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--vd-warning); background: color-mix(in srgb, var(--vd-warning) 10%, transparent); } .deployment-production-item.is-ok > span { color: var(--vd-success); background: color-mix(in srgb, var(--vd-success) 10%, transparent); } .deployment-production-item small, .deployment-production-item strong, .deployment-production-item p { display: block; min-width: 0; overflow-wrap: anywhere; } .deployment-production-item small { color: var(--vd-ink-muted); font-size: 8px; text-transform: uppercase; letter-spacing: .04em; } .deployment-production-item strong { margin-top: 2px; font-size: 11px; } .deployment-production-item p { margin-top: 2px; font-size: 9px; line-height: 1.35; } .deployment-run-list { display: grid; gap: 8px; max-height: 430px; overflow: auto; } .deployment-run { padding: 10px; border: 1px solid var(--vd-line); border-left-width: 3px; border-radius: 10px; background: var(--vd-surface-quiet); } .deployment-run.is-ok { border-left-color: var(--vd-success); } .deployment-run.is-failed { border-left-color: var(--vd-danger); } .deployment-run.is-running { border-left-color: var(--vd-brand); } .deployment-run-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 5px; } .deployment-run-state { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .035em; color: var(--vd-brand); } .deployment-run.is-ok .deployment-run-state { color: var(--vd-success); } .deployment-run.is-failed .deployment-run-state { color: var(--vd-danger); } .deployment-run time, .deployment-run small { color: var(--vd-ink-muted); font-size: 8px; } .deployment-run > strong { display: block; font-size: 12px; } .deployment-run > p { margin: 3px 0; font-size: 10px; line-height: 1.4; } .deployment-run-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; } .secondary-btn.compact { min-height: 29px; padding: 0 9px; font-size: 9px; } .operations-instruction { display: flex; gap: 11px; padding: 13px; margin-top: 14px; border-radius: 12px; background: color-mix(in srgb, var(--vd-brand) 7%, var(--vd-surface-raised)); } .operations-instruction > span { color: var(--vd-brand); } .operations-instruction strong, .operations-instruction p { display: block; margin: 0; } .operations-instruction p { margin-top: 3px; color: var(--vd-ink-muted); font-size: 11px; line-height: 1.5; } .operations-extension-summary > article { display: flex; gap: 12px; align-items: center; padding: 15px; border: 1px solid var(--vd-line); border-radius: 13px; background: var(--vd-surface-raised); } .operations-extension-summary > article > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: var(--vd-brand); background: color-mix(in srgb, var(--vd-brand) 12%, transparent); } .operations-extension-summary strong, .operations-extension-summary p { display: block; margin: 0; } .operations-extension-summary p { color: var(--vd-ink-muted); font-size: 11px; } .operations-extension-packages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 10px; } .operations-extension-packages article { display: flex; gap: 8px; align-items: center; min-width: 0; padding: 10px; border: 1px solid var(--vd-line); border-radius: 10px; background: var(--vd-surface-raised); } .operations-extension-packages article > span { color: var(--vd-ink-muted); } .operations-extension-packages article.is-ok > span { color: var(--vd-success); } .operations-extension-packages article.is-warning > span { color: var(--vd-warning); } .operations-extension-packages strong, .operations-extension-packages small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .operations-extension-packages strong { font-size: 11px; } .operations-extension-packages small { color: var(--vd-ink-muted); font-size: 9px; } .operations-extension-clients { display: grid; gap: 7px; } .operations-extension-client { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--vd-line); border-radius: 10px; background: var(--vd-surface-raised); } .operation-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vd-ink-muted); } .operations-extension-client.is-live .operation-live-dot { background: var(--vd-success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--vd-success) 15%, transparent); } .operations-extension-client strong, .operations-extension-client span, .operations-extension-client small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .operations-extension-client strong { font-size: 11px; } .operations-extension-client span, .operations-extension-client small { color: var(--vd-ink-muted); font-size: 9px; } .operations-extension-client b { font-size: 9px; color: var(--vd-ink-muted); } .operations-extension-client.is-live b { color: var(--vd-success); } @media (max-width: 1180px) { .operations-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .operations-restore-card { grid-column: 1 / -1; } .operations-extension-packages { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .operations-center-head { display: grid; } .operations-center-head .secondary-btn { width: 100%; } .operations-grid, .operations-update-grid { grid-template-columns: minmax(0, 1fr); } .operations-restore-card, .operations-update-upload { grid-column: auto; } .operations-backup-row { grid-template-columns: 36px minmax(0, 1fr) auto; } .operation-backup-hash { display: none; } .operations-pending { align-items: flex-start; flex-wrap: wrap; } .operations-pending .secondary-btn { width: 100%; } } @media (max-width: 520px) { .operation-inline-fields, .operations-extension-packages, .deployment-production-overview { grid-template-columns: minmax(0, 1fr); } .operations-backup-row { grid-template-columns: 32px minmax(0, 1fr); } .operation-backup-actions { grid-column: 1 / -1; justify-content: flex-end; } .operations-extension-client { grid-template-columns: 10px minmax(0, 1fr); } .operations-extension-client b { grid-column: 2; } } .role-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; margin: 18px 0 24px; } .role-card, .security-card, .security-env-guide { border: 1px solid var(--vd-line); border-radius: 16px; background: var(--vd-surface); padding: 16px; min-width: 0; } .role-card header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .role-card p, .security-card p, .security-env-guide p { color: var(--vd-ink-muted); margin: 0; line-height: 1.55; } .role-badge.manager { background: color-mix(in srgb, var(--vd-role-manager) 14%, transparent); color: var(--vd-role-manager); } .role-badge.publisher { background: color-mix(in srgb, var(--vd-role-publisher) 14%, transparent); color: var(--vd-role-publisher); } .role-badge.viewer { background: color-mix(in srgb, var(--vd-role-viewer) 16%, transparent); color: var(--vd-role-viewer); } .role-permission-matrix { display: grid; gap: 20px; } .role-matrix-group h4 { margin: 0 0 9px; } .role-matrix-table { border: 1px solid var(--vd-line); border-radius: 14px; overflow-x: auto; background: var(--vd-surface); } .role-matrix-head, .role-matrix-row { display: grid; grid-template-columns: minmax(230px, 1.8fr) repeat(5, minmax(96px, .7fr)); min-width: 760px; align-items: center; } .role-matrix-head { background: var(--vd-surface-muted); font-size: 12px; } .role-matrix-head > *, .role-matrix-row > * { padding: 10px 12px; border-right: 1px solid var(--vd-line); } .role-matrix-head > *:last-child, .role-matrix-row > *:last-child { border-right: 0; } .role-matrix-row { border-top: 1px solid var(--vd-line); } .role-matrix-row i { font-style: normal; text-align: center; font-weight: 800; } .role-matrix-row i.is-allowed { color: var(--vd-success); } .role-matrix-row i.is-denied { color: var(--vd-ink-muted); } .security-panel-heading, .security-lock-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; } .security-panel-heading h3, .security-lock-head h4 { margin: 2px 0 5px; } .security-panel-heading p, .security-lock-head p { margin: 0; color: var(--vd-ink-muted); } .security-status-summary { margin-bottom: 12px; } .security-score { display: flex; align-items: center; gap: 14px; border: 1px solid var(--vd-line); border-radius: 16px; padding: 16px; background: var(--vd-surface); } .security-score > span { width: 34px; height: 34px; } .security-score.is-good { border-color: color-mix(in srgb, var(--vd-success) 42%, var(--vd-line)); } .security-score.is-warning { border-color: color-mix(in srgb, var(--vd-warning) 48%, var(--vd-line)); } .security-score strong { display: block; font-size: 16px; } .security-score p { margin: 3px 0 0; color: var(--vd-ink-muted); } .security-warning-list { display: grid; gap: 8px; margin-bottom: 16px; } .security-warning, .security-ok { display: flex; gap: 10px; align-items: flex-start; border-radius: 12px; padding: 11px 13px; } .security-warning { background: color-mix(in srgb, var(--vd-warning) 11%, transparent); color: var(--vd-warning); } .security-ok { background: color-mix(in srgb, var(--vd-success) 10%, transparent); color: var(--vd-success); } .security-warning p { margin: 0; } .security-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; } .security-card h4 { margin: 0 0 12px; } .security-card dl { display: grid; grid-template-columns: minmax(115px, .8fr) minmax(0, 1.2fr); gap: 9px 14px; margin: 0; } .security-card dt { color: var(--vd-ink-muted); } .security-card dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } .security-lock-list { display: grid; gap: 8px; margin-bottom: 22px; } .security-lock-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--vd-line); border-radius: 12px; background: var(--vd-surface); } .security-lock-row p { margin: 3px 0 0; color: var(--vd-ink-muted); font-size: 12px; } .security-env-guide pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--vd-surface-muted); border: 1px solid var(--vd-line); border-radius: 12px; padding: 13px; } .listing-lock-banner { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 14px; border-radius: 13px; border: 1px solid var(--vd-line); } .listing-lock-banner.is-mine { background: color-mix(in srgb, var(--vd-success) 9%, var(--vd-surface)); border-color: color-mix(in srgb, var(--vd-success) 38%, var(--vd-line)); } .listing-lock-banner.is-foreign { background: color-mix(in srgb, var(--vd-warning) 10%, var(--vd-surface)); border-color: color-mix(in srgb, var(--vd-warning) 44%, var(--vd-line)); } .listing-lock-banner > span { width: 24px; height: 24px; flex: 0 0 auto; } .listing-lock-banner strong { display: block; } .listing-lock-banner p { margin: 2px 0 0; color: var(--vd-ink-muted); font-size: 12px; } .audit-toolbar { display: grid; grid-template-columns: minmax(220px, 1.6fr) minmax(150px, .8fr) 145px 145px 135px auto auto; gap: 8px; align-items: center; margin-bottom: 12px; } .audit-toolbar > * { min-width: 0; } .audit-summary { color: var(--vd-ink-muted); font-size: 13px; margin-bottom: 8px; } .audit-user { display: grid; gap: 2px; } .audit-user small, .audit-action small { color: var(--vd-ink-muted); } .audit-action p { margin: 4px 0 0; color: var(--vd-ink-muted); overflow-wrap: anywhere; } .audit-pagination { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 14px; } body[data-user-role="viewer"] .danger-zone, body[data-user-role="publisher"] .danger-zone { display: none !important; } @media (max-width: 1050px) { .audit-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .audit-toolbar button { width: 100%; } } @media (max-width: 760px) { .security-grid { grid-template-columns: 1fr; } .security-panel-heading, .security-lock-head, .security-lock-row { align-items: stretch; flex-direction: column; } .security-card dl { grid-template-columns: 1fr; gap: 3px; } .security-card dd { margin-bottom: 8px; } .audit-toolbar { grid-template-columns: 1fr; } } .security-secret-list{display:flex;flex-wrap:wrap;gap:var(--vd-space-2);margin-top:var(--vd-space-3)} .security-secret-list .status-badge{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .invitation-admin-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--vd-line); } .invitation-admin-list { display: grid; gap: 8px; } .invitation-admin-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 12px; border: 1px solid var(--vd-line); border-left: 3px solid var(--vd-ink-muted); border-radius: 11px; background: var(--vd-surface-raised); } .invitation-admin-row.is-pending { border-left-color: var(--vd-brand); } .invitation-admin-row strong, .invitation-admin-row span, .invitation-admin-row small { display: block; min-width: 0; overflow-wrap: anywhere; } .invitation-admin-row strong { font-size: 12px; } .invitation-admin-row span { margin-top: 2px; color: var(--vd-ink-muted); font-size: 10px; } .invitation-admin-row small { margin-top: 2px; color: var(--vd-ink-muted); font-size: 9px; } .invitation-admin-actions { display: flex; gap: 6px; } @media (max-width: 620px) { .invitation-admin-row { grid-template-columns: minmax(0, 1fr); } .invitation-admin-actions { justify-content: flex-end; } } #admin-security-panel[data-vd-security-studio="ap44.76"] { container-type: inline-size; container-name: security-studio; --security-control-height: 44px; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-panel-heading { margin-bottom: 14px; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-panel-heading > div { min-width: 0; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-panel-heading h3 { font-size: 22px; line-height: 1.2; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-panel-heading p { max-width: 820px; font-size: 13px; line-height: 1.55; } #admin-security-panel[data-vd-security-studio="ap44.76"] #security-refresh-btn { min-height: var(--security-control-height); flex: 0 0 auto; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-studio-nav { display: flex; gap: 4px; overflow-x: auto; padding: 0 0 10px; margin: 0 0 16px; border-bottom: 1px solid var(--vd-line); scrollbar-width: thin; scroll-snap-type: x proximity; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-studio-nav a { min-height: var(--security-control-height); display: inline-flex; align-items: center; flex: 0 0 auto; padding: 0 12px; border: 1px solid transparent; border-radius: 4px; color: var(--vd-ink-muted); font-size: 12px; font-weight: 700; text-decoration: none; scroll-snap-align: start; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-studio-nav a:hover, #admin-security-panel[data-vd-security-studio="ap44.76"] .security-studio-nav a:focus-visible { color: var(--vd-ink); border-color: var(--vd-line); background: var(--vd-surface-muted); } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-studio-section { min-width: 0; padding: 18px 0; border-top: 1px solid var(--vd-line); } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-studio-nav + .security-studio-section { border-top: 0; padding-top: 0; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-section-head { margin-bottom: 12px; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-section-head h4 { margin: 2px 0 4px; font-size: 17px; line-height: 1.3; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-section-head p { margin: 0; max-width: 860px; color: var(--vd-ink-muted); font-size: 12.5px; line-height: 1.55; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-assurance-summary { margin: 0 0 14px; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-assurance-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px; border: 1px solid var(--vd-line); border-radius: 4px; background: var(--vd-surface-raised); } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-assurance-hero strong { display: block; margin-top: 3px; font-size: 20px; line-height: 1.2; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-assurance-hero p { margin: 5px 0 0; color: var(--vd-ink-muted); font-size: 12px; line-height: 1.5; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-control-area { display: inline-block; color: var(--vd-ink-muted); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-state { min-height: 28px; display: inline-flex; align-items: center; justify-content: center; max-width: 100%; padding: 4px 8px; border: 1px solid var(--vd-line); border-radius: 4px; background: var(--vd-surface-muted); color: var(--vd-ink-muted); font-size: 10px; font-weight: 800; line-height: 1.2; text-align: center; white-space: nowrap; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-state.is-pass { color: var(--vd-success); border-color: color-mix(in srgb, var(--vd-success) 36%, var(--vd-line)); } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-state.is-fail { color: var(--vd-danger); border-color: color-mix(in srgb, var(--vd-danger) 36%, var(--vd-line)); } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-state.is-blocked { color: var(--vd-warning); border-color: color-mix(in srgb, var(--vd-warning) 42%, var(--vd-line)); } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-state.is-unchecked { color: var(--vd-ink-muted); } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-assurance-grid, #admin-security-panel[data-vd-security-studio="ap44.76"] .security-control-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-mini-card, #admin-security-panel[data-vd-security-studio="ap44.76"] .security-control-row { min-width: 0; padding: 13px; border: 1px solid var(--vd-line); border-radius: 4px; background: var(--vd-surface-raised); } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-mini-card { display: grid; gap: 5px; align-content: start; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-mini-card strong, #admin-security-panel[data-vd-security-studio="ap44.76"] .security-control-row strong { display: block; font-size: 13px; line-height: 1.35; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-mini-card p, #admin-security-panel[data-vd-security-studio="ap44.76"] .security-control-row p { margin: 3px 0 0; color: var(--vd-ink-muted); font-size: 11.5px; line-height: 1.5; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-control-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-secret-catalog { display: grid; gap: 14px; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-secret-group { min-width: 0; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-secret-group h5 { margin: 0 0 7px; font-size: 12px; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-secret-rows { display: grid; gap: 7px; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-secret-row { display: grid; grid-template-columns: minmax(190px, .9fr) auto minmax(330px, 1.2fr); gap: 12px; align-items: center; min-width: 0; padding: 11px 12px; border: 1px solid var(--vd-line); border-radius: 4px; background: var(--vd-surface-raised); } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-secret-meta { min-width: 0; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-secret-meta strong, #admin-security-panel[data-vd-security-studio="ap44.76"] .security-secret-meta code, #admin-security-panel[data-vd-security-studio="ap44.76"] .security-secret-meta span { display: block; min-width: 0; overflow-wrap: anywhere; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-secret-meta strong { font-size: 12.5px; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-secret-meta code { margin-top: 2px; color: var(--vd-ink-muted); font-size: 10.5px; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-secret-meta span { margin-top: 3px; color: var(--vd-ink-muted); font-size: 10.5px; line-height: 1.4; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-secret-editor { display: grid; grid-template-columns: minmax(160px, 1fr) auto auto; gap: 6px; align-items: center; min-width: 0; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-secret-editor input, #admin-security-panel[data-vd-security-studio="ap44.76"] .security-secret-editor button { min-height: var(--security-control-height); } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-secret-editor input { min-width: 0; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-secret-managed { color: var(--vd-ink-muted); font-size: 11px; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-route-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-route-summary > span { min-width: 0; padding: 10px 12px; border: 1px solid var(--vd-line); border-radius: 4px; background: var(--vd-surface-raised); color: var(--vd-ink-muted); font-size: 11px; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-route-summary strong { display: block; color: var(--vd-ink); font-size: 18px; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-route-findings { display: grid; gap: 6px; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-route-findings article { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr); gap: 10px; min-width: 0; padding: 9px 11px; border: 1px solid var(--vd-line); border-radius: 4px; background: var(--vd-surface-raised); } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-route-findings code { min-width: 0; overflow-wrap: anywhere; font-size: 10.5px; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-route-findings span { color: var(--vd-warning); font-size: 10.5px; overflow-wrap: anywhere; } @container security-studio (max-width: 980px) { #admin-security-panel[data-vd-security-studio="ap44.76"] .security-secret-row { grid-template-columns: minmax(0, 1fr) auto; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-secret-editor, #admin-security-panel[data-vd-security-studio="ap44.76"] .security-secret-managed { grid-column: 1 / -1; } } @container security-studio (max-width: 680px) { #admin-security-panel[data-vd-security-studio="ap44.76"] .security-panel-heading { display: grid; gap: 10px; } #admin-security-panel[data-vd-security-studio="ap44.76"] #security-refresh-btn { width: 100%; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-assurance-grid, #admin-security-panel[data-vd-security-studio="ap44.76"] .security-control-list, #admin-security-panel[data-vd-security-studio="ap44.76"] .security-route-summary { grid-template-columns: minmax(0, 1fr); } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-assurance-hero, #admin-security-panel[data-vd-security-studio="ap44.76"] .security-control-row, #admin-security-panel[data-vd-security-studio="ap44.76"] .security-secret-row, #admin-security-panel[data-vd-security-studio="ap44.76"] .security-route-findings article { grid-template-columns: minmax(0, 1fr); } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-state { justify-self: start; white-space: normal; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-secret-editor { grid-template-columns: minmax(0, 1fr); } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-secret-editor input, #admin-security-panel[data-vd-security-studio="ap44.76"] .security-secret-editor button { width: 100%; font-size: 16px; } #admin-security-panel[data-vd-security-studio="ap44.76"] .security-studio-nav a { min-height: 48px; font-size: 13px; } } [data-module].hidden, [data-module-panel].hidden { display: none !important; } .vd-nav-group-label { margin: 18px 14px 7px; color: var(--vd-ink-muted); font-size: 0.68rem; font-weight: 750; letter-spacing: 0.105em; line-height: 1.2; text-transform: uppercase; user-select: none; } .sidebar-nav .nav-group:first-child .vd-nav-group-label { margin-top: 6px; } .sidebar-nav .nav-group + .nav-group { margin-top: 5px; padding-top: 3px; border-top: 1px solid color-mix(in srgb, var(--vd-line) 58%, transparent); } @media (max-width: 768px) { .vd-nav-group-label { margin-left: 18px; margin-right: 18px; } } body { padding-bottom: 0; } .vendoo-runtime-statusbar { position: relative; z-index: var(--vd-layer-content); margin-left: var(--ux-sidebar-width, var(--vd-sidebar-width)); min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 5px 14px; border-top: 1px solid color-mix(in srgb, var(--vd-line) 78%, transparent); background: color-mix(in srgb, var(--vd-surface-raised) 94%, transparent); color: var(--vd-ink-muted); box-shadow: none; font-size: 0.73rem; line-height: 1.25; } .vendoo-runtime-statusbar-main, .vendoo-runtime-statusbar-meta { display: flex; align-items: center; gap: 8px; min-width: 0; } .vendoo-runtime-statusbar strong { color: var(--vd-ink); white-space: nowrap; } .vendoo-runtime-status-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 999px; background: var(--vd-ink-muted); box-shadow: 0 0 0 3px color-mix(in srgb,var(--vd-ink-muted) 16%,transparent); } .vendoo-runtime-statusbar[data-state="ready"] .vendoo-runtime-status-dot { background: var(--vd-success); box-shadow: 0 0 0 3px color-mix(in srgb,var(--vd-success) 16%,transparent); } .vendoo-runtime-statusbar[data-state="warning"] .vendoo-runtime-status-dot, .vendoo-runtime-statusbar[data-state="error"] .vendoo-runtime-status-dot { background: var(--vd-warning); box-shadow: 0 0 0 3px color-mix(in srgb,var(--vd-warning) 16%,transparent); } .vendoo-runtime-statusbar button { border: 0; padding: 0; background: transparent; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } @media (max-width: 900px) { .vendoo-runtime-statusbar { margin-left: 0; min-height: 44px; align-items: flex-start; gap: 4px; padding: 5px 9px; flex-direction: column; } .vendoo-runtime-statusbar-main, .vendoo-runtime-statusbar-meta { width: 100%; justify-content: space-between; } } @media (prefers-reduced-motion: reduce) { .vendoo-runtime-statusbar * { scroll-behavior: auto !important; transition: none !important; } } .tab-content:not(.active) { display: none !important; } .sidebar-nav .nav-item[data-module][aria-hidden="true"], .sidebar-nav .nav-item[data-module].hidden { display: none !important; } .publishing-job-row.status-paused { border-color: color-mix(in srgb, var(--vd-warning) 40%, var(--vd-line)); opacity: .9; } .publishing-job-row.status-dead_letter { border-color: color-mix(in srgb, var(--vd-danger) 65%, var(--vd-line)); } .operation-status.status-paused { color: var(--vd-warning); background: color-mix(in srgb, var(--vd-warning) 16%, transparent); } .operation-status.status-dead_letter { color: var(--vd-danger); background: color-mix(in srgb, var(--vd-danger) 16%, transparent); } @media (max-width: 900px) { body[data-vd-signature="apple-workspace"][data-vd-mobile-nav-state="closed"] > #sidebar { transform: translate3d(-105%, 0, 0); pointer-events: none; visibility: visible; } body[data-vd-signature="apple-workspace"][data-vd-mobile-nav-state="open"] > #sidebar { transform: translate3d(0, 0, 0); pointer-events: auto; visibility: visible; z-index: calc(var(--vd-layer-dropdown) + 20); } body[data-vd-signature="apple-workspace"][data-vd-mobile-nav-state="open"] > #sidebar-overlay { display: block; opacity: 1; visibility: visible; pointer-events: auto; z-index: calc(var(--vd-layer-dropdown) + 10); } body[data-vd-signature="apple-workspace"][data-vd-mobile-nav-state="closed"] > #sidebar-overlay { opacity: 0; visibility: hidden; pointer-events: none; } body[data-vd-signature="apple-workspace"] #sidebar-toggle, body[data-vd-signature="apple-workspace"] #ux-mobile-more { touch-action: manipulation; } } @media (max-width: 900px) { body[data-vd-signature="apple-workspace"] { --vd-mobile-shell-nav-height: 68px; --vd-mobile-shell-gutter: 10px; --vd-mobile-shell-topbar-height: 58px; } body[data-vd-signature="apple-workspace"] { min-width: 0; overflow-x: hidden; background: var(--vd-canvas); } body[data-vd-signature="apple-workspace"].mobile-nav-open { overflow: hidden; overscroll-behavior: none; touch-action: auto; } body[data-vd-signature="apple-workspace"] .main-wrapper, body[data-vd-signature="apple-workspace"] .vendoo-runtime-statusbar { margin-left: 0; width: 100%; } body[data-vd-signature="apple-workspace"] .topbar { position: sticky; top: 0; z-index: calc(var(--vd-layer-sticky) + 4); min-height: calc(var(--vd-mobile-shell-topbar-height) + env(safe-area-inset-top)); height: auto; padding: env(safe-area-inset-top) 12px 0; gap: 10px; border-bottom: 1px solid var(--vd-line); background: color-mix(in srgb, var(--vd-surface-raised) 97%, transparent); backdrop-filter: saturate(1.15) blur(16px); } body[data-vd-signature="apple-workspace"] .topbar-context { min-width: 0; flex: 1 1 auto; gap: 10px; } body[data-vd-signature="apple-workspace"] .sidebar-toggle { display: inline-flex; width: 44px; height: 44px; flex: 0 0 44px; align-items: center; justify-content: center; border: 1px solid var(--vd-line); border-radius: var(--vd-radius-sm); background: var(--vd-surface-raised); color: var(--vd-ink); touch-action: manipulation; -webkit-tap-highlight-color: transparent; } body[data-vd-signature="apple-workspace"] .topbar-context-icon, body[data-vd-signature="apple-workspace"] .command-search, body[data-vd-signature="apple-workspace"] .topbar-actions { display: none; } body[data-vd-signature="apple-workspace"] .topbar-heading { display: block; min-width: 0; } body[data-vd-signature="apple-workspace"] .topbar-title { overflow: hidden; font-size: 17px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } body[data-vd-signature="apple-workspace"] .topbar-kicker { display: block; margin-top: 2px; overflow: hidden; color: var(--vd-ink-muted); font-size: 11px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } body[data-vd-signature="apple-workspace"] main { width: 100%; max-width: 100%; padding: 16px 12px calc(var(--vd-mobile-shell-nav-height) + 22px + env(safe-area-inset-bottom)); overflow-x: clip; } body[data-vd-signature="apple-workspace"] .page-heading, body[data-vd-signature="apple-workspace"] .flowroom-heading { align-items: stretch; flex-direction: column; gap: 10px; margin-bottom: 16px; } body[data-vd-signature="apple-workspace"] .page-heading h2, body[data-vd-signature="apple-workspace"] .flowroom-heading h2 { font-size: clamp(24px, 8vw, 30px); line-height: 1.08; } body[data-vd-signature="apple-workspace"] .page-heading-actions, body[data-vd-signature="apple-workspace"] .flowroom-context-actions { width: 100%; } body[data-vd-signature="apple-workspace"] > #sidebar { position: fixed; top: auto; left: var(--vd-mobile-shell-gutter); right: var(--vd-mobile-shell-gutter); bottom: calc(var(--vd-mobile-shell-nav-height) + 8px + env(safe-area-inset-bottom)); z-index: calc(var(--vd-layer-modal) - 8); display: flex; width: auto; max-width: none; height: auto; max-height: min(74dvh, 680px); border: 1px solid var(--vd-line-strong); border-radius: var(--vd-radius-md); background: var(--vd-surface-raised); box-shadow: var(--vd-shadow-float); opacity: 0; overflow: hidden; transform: translate3d(0, calc(100% + 120px), 0); transition: transform 180ms ease, opacity 140ms ease; visibility: visible; pointer-events: none; contain: layout paint; } body[data-vd-signature="apple-workspace"][data-vd-mobile-nav-state="open"] > #sidebar { opacity: 1; transform: translate3d(0, 0, 0); pointer-events: auto; } body[data-vd-signature="apple-workspace"] > #sidebar .sidebar-header { position: sticky; top: 0; z-index: 2; min-height: 58px; padding: 9px 10px 9px 14px; border-bottom: 1px solid var(--vd-line); background: var(--vd-surface-raised); } body[data-vd-signature="apple-workspace"] > #sidebar .brand-logo-full { display: block; width: auto; max-width: 128px; height: 30px; } body[data-vd-signature="apple-workspace"] > #sidebar .brand-logo-icon { display: none; } body[data-vd-signature="apple-workspace"] > #sidebar .sidebar-close { display: inline-flex; width: 42px; height: 42px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } body[data-vd-signature="apple-workspace"] > #sidebar .sidebar-nav { min-height: 0; padding: 8px 8px 12px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } body[data-vd-signature="apple-workspace"] > #sidebar .vd-nav-group-label { margin: 14px 10px 5px; font-size: 10px; letter-spacing: .12em; } body[data-vd-signature="apple-workspace"] > #sidebar .nav-item, body[data-vd-signature="apple-workspace"] > #sidebar .nav-item-quiet { min-height: 46px; justify-content: flex-start; padding: 0 10px; gap: 12px; border-radius: var(--vd-radius-sm); font-size: 14px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } body[data-vd-signature="apple-workspace"] > #sidebar .nav-item > span, body[data-vd-signature="apple-workspace"] > #sidebar .sidebar-user-info, body[data-vd-signature="apple-workspace"] > #sidebar .theme-toggle span { display: inline; } body[data-vd-signature="apple-workspace"] > #sidebar .sidebar-footer { position: sticky; bottom: 0; z-index: 2; padding-bottom: 10px; border-top: 1px solid var(--vd-line); background: var(--vd-surface-raised); } body[data-vd-signature="apple-workspace"] > #sidebar-overlay { position: fixed; inset: 0; z-index: calc(var(--vd-layer-modal) - 10); display: block; background: color-mix(in srgb, var(--vd-ink) 42%, transparent); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 140ms ease, visibility 140ms ease; -webkit-tap-highlight-color: transparent; } body[data-vd-signature="apple-workspace"][data-vd-mobile-nav-state="open"] > #sidebar-overlay { opacity: 1; visibility: visible; pointer-events: auto; } body[data-vd-signature="apple-workspace"] > .ux-mobile-primary-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--vd-layer-modal) - 4); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); min-height: calc(var(--vd-mobile-shell-nav-height) + env(safe-area-inset-bottom)); padding: 5px 6px calc(5px + env(safe-area-inset-bottom)); border-top: 1px solid var(--vd-line); background: color-mix(in srgb, var(--vd-surface-raised) 98%, transparent); box-shadow: 0 -4px 18px color-mix(in srgb, var(--vd-ink) 7%, transparent); } body[data-vd-signature="apple-workspace"] .ux-mobile-primary-item { display: flex; min-width: 0; min-height: 54px; align-items: center; justify-content: center; flex-direction: column; gap: 3px; padding: 4px 2px; border: 0; border-radius: var(--vd-radius-sm); background: transparent; color: var(--vd-ink-muted); font-size: 11px; font-weight: 700; line-height: 1; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } body[data-vd-signature="apple-workspace"] .ux-mobile-primary-item svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } body[data-vd-signature="apple-workspace"] .ux-mobile-primary-item b { max-width: 100%; overflow: hidden; font: inherit; text-overflow: ellipsis; white-space: nowrap; } body[data-vd-signature="apple-workspace"] .ux-mobile-primary-item.is-active { color: var(--vd-brand-strong); background: var(--vd-brand-soft); } body[data-vd-signature="apple-workspace"] .ux-mobile-primary-item.is-create svg { width: 30px; height: 30px; padding: 6px; border-radius: var(--vd-radius-sm); background: var(--vd-brand); color: var(--vd-on-accent); } body[data-vd-signature="apple-workspace"] .ux-mobile-primary-item:focus-visible, body[data-vd-signature="apple-workspace"] .sidebar-toggle:focus-visible, body[data-vd-signature="apple-workspace"] > #sidebar .sidebar-close:focus-visible { outline: 3px solid var(--vd-focus-ring); outline-offset: 1px; } body[data-vd-signature="apple-workspace"] .vendoo-runtime-statusbar { display: none; } } @media (max-width: 520px) { body[data-vd-signature="apple-workspace"] { --vd-mobile-shell-gutter: 6px; } body[data-vd-signature="apple-workspace"] main { padding-inline: 10px; } body[data-vd-signature="apple-workspace"] > #sidebar { max-height: min(79dvh, 720px); } body[data-vd-signature="apple-workspace"] .topbar-kicker { display: none; } } @media (prefers-reduced-motion: reduce) and (max-width: 900px) { body[data-vd-signature="apple-workspace"] > #sidebar, body[data-vd-signature="apple-workspace"] > #sidebar-overlay { transition: none; } } .meta-dynamic-fields, .listing-dynamic-fields { display: contents; } .article-dynamic-field { min-width: 0; display: flex; flex-direction: column; gap: 6px; color: var(--vd-ink); font-size: 13px; font-weight: 700; } .article-dynamic-field-label { display: block; line-height: 1.35; } .article-dynamic-field > input, .article-dynamic-field > select { width: 100%; min-width: 0; min-height: 42px; margin: 0; padding: 9px 11px; border: 1.5px solid var(--vd-line); border-radius: var(--vd-radius-sm); color: var(--vd-ink); background: var(--vd-input-bg); font: inherit; font-weight: 500; } .article-dynamic-field > input:focus, .article-dynamic-field > select:focus { border-color: var(--vd-brand); outline: 0; box-shadow: 0 0 0 3px var(--vd-focus); } .meta-edit-item small, #article-field-category-search-pattern small { display: block; margin-top: 5px; color: var(--vd-ink-muted); font-size: .72rem; line-height: 1.35; } #meta-category-search-pattern, #detail-category-search-pattern { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .01em; } .marketplace-field, .meta-marketplace-card { min-width: 0; } .marketplace-label-note, .marketplace-field-label small { display: inline-flex; align-items: center; min-height: 20px; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: var(--vd-brand-soft); color: var(--vd-brand); font-size: .68rem; font-weight: 800; line-height: 1; letter-spacing: .02em; } .marketplace-field-label { display: block; color: var(--vd-ink); font-size: 13px; font-weight: 700; } .marketplace-color-picker { position: relative; margin-top: 4px; } .marketplace-color-picker > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 9px 12px; border: 1px solid var(--vd-line); border-radius: var(--vd-radius-md); background: var(--vd-surface); color: var(--vd-ink); font-size: .82rem; font-weight: 700; cursor: pointer; list-style: none; } .marketplace-color-picker > summary::-webkit-details-marker { display: none; } .marketplace-color-picker[open] > summary { border-color: var(--vd-brand); box-shadow: 0 0 0 3px var(--vd-focus); } .marketplace-color-picker[open] > summary [aria-hidden="true"] { transform: rotate(180deg); } .marketplace-color-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; max-height: 268px; margin-top: 7px; padding: 9px; overflow: auto; border: 1px solid var(--vd-line); border-radius: var(--vd-radius-lg); background: var(--vd-surface-raised); box-shadow: var(--vd-shadow-md); } .marketplace-color-option { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 8px; border: 1px solid transparent; border-radius: var(--vd-radius-md); background: transparent; color: var(--vd-ink); font: inherit; font-size: .76rem; text-align: left; cursor: pointer; } .marketplace-color-option:hover { background: var(--vd-surface-muted); } .marketplace-color-option.is-selected { border-color: color-mix(in srgb, var(--vd-brand) 48%, var(--vd-line)); background: var(--vd-brand-soft); color: var(--vd-brand); font-weight: 800; } .marketplace-color-dot { width: 18px; height: 18px; flex: 0 0 18px; border: 1px solid color-mix(in srgb,var(--vd-marketplace-black) 20%,transparent); border-radius: 50%; background: var(--vd-marketplace-neutral); box-shadow: inset 0 0 0 2px color-mix(in srgb,var(--vd-on-accent) 45%,transparent); } .marketplace-color-dot[data-color-name="Schwarz"] { background: var(--vd-marketplace-black); } .marketplace-color-dot[data-color-name="Weiß"] { background: var(--vd-paper); } .marketplace-color-dot[data-color-name="Grau"] { background: var(--vd-marketplace-gray); } .marketplace-color-dot[data-color-name="Silber"] { background: linear-gradient(135deg, var(--vd-marketplace-silver-light), var(--vd-marketplace-silver-dark)); } .marketplace-color-dot[data-color-name="Beige"] { background: var(--vd-marketplace-beige); } .marketplace-color-dot[data-color-name="Braun"] { background: var(--vd-marketplace-brown); } .marketplace-color-dot[data-color-name="Gold"] { background: var(--vd-marketplace-gold); } .marketplace-color-dot[data-color-name="Gelb"] { background: var(--vd-marketplace-yellow); } .marketplace-color-dot[data-color-name="Orange"] { background: var(--vd-marketplace-orange); } .marketplace-color-dot[data-color-name="Rot"] { background: var(--vd-marketplace-red); } .marketplace-color-dot[data-color-name="Bordeaux"] { background: var(--vd-marketplace-bordeaux); } .marketplace-color-dot[data-color-name="Rosa"] { background: var(--vd-marketplace-pink); } .marketplace-color-dot[data-color-name="Lila"] { background: var(--vd-marketplace-purple); } .marketplace-color-dot[data-color-name="Blau"] { background: var(--vd-marketplace-blue); } .marketplace-color-dot[data-color-name="Türkis"] { background: var(--vd-marketplace-turquoise); } .marketplace-color-dot[data-color-name="Grün"] { background: var(--vd-marketplace-green); } .marketplace-color-dot[data-color-name="Khaki"] { background: var(--vd-marketplace-khaki); } .marketplace-color-dot[data-color-name="Mehrfarbig"] { background: conic-gradient(var(--vd-marketplace-red), var(--vd-marketplace-gold), var(--vd-marketplace-green), var(--vd-marketplace-blue), var(--vd-marketplace-purple), var(--vd-marketplace-red)); } .marketplace-field-description { min-height: 2.8em; padding: 8px 9px; border-radius: var(--vd-radius-md); background: var(--vd-surface-muted); } .marketplace-field-description[data-state="selected"] { background: color-mix(in srgb, var(--vd-brand-soft) 74%, var(--vd-surface)); color: var(--vd-ink-secondary); } .marketplace-money-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: 42px; margin-top: 4px; border: 1px solid var(--vd-line); border-radius: var(--vd-radius-md); background: var(--vd-surface); overflow: hidden; } .marketplace-money-input:focus-within { border-color: var(--vd-brand); box-shadow: 0 0 0 3px var(--vd-focus); } .marketplace-money-input input { min-width: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; } .marketplace-money-input b { padding: 0 12px; color: var(--vd-ink-muted); font-size: .86rem; } .meta-marketplace-card { grid-column: 1 / -1; padding: 14px; border: 1px solid var(--vd-line); border-radius: var(--vd-radius-lg); background: linear-gradient(145deg, var(--vd-surface-raised), var(--vd-surface-muted)); } .meta-marketplace-card > header { display: grid; gap: 3px; margin-bottom: 12px; } .meta-marketplace-card > header > span { color: var(--vd-brand); font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .meta-marketplace-card > header > strong { font-size: 1rem; } .meta-marketplace-card > header > small { color: var(--vd-ink-muted); line-height: 1.45; } .meta-marketplace-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .article-dynamic-field small { display: block; margin-top: 5px; color: var(--vd-ink-muted); font-size: .72rem; line-height: 1.35; } @media (max-width: 760px) { .meta-marketplace-card-grid { grid-template-columns: 1fr; } .marketplace-color-options { grid-template-columns: 1fr; } } .category-studio-field{grid-column:span 2} .category-studio-inline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;padding:9px 10px;border:1px solid var(--vd-line);border-radius:10px;background:var(--vd-surface-muted)} .category-studio-inline .compact{min-height:32px;padding:5px 10px;font-size:.78rem} .category-studio-inline span[role="status"]{flex:1;min-width:180px;color:var(--vd-ink-muted);font-size:.78rem;line-height:1.35} .category-studio-inline span[data-state="success"]{color:var(--vd-success);font-weight:650} .category-studio-inline span[data-state="loading"]{color:var(--vd-ink)} .category-studio-inline span[data-state="error"]{color:var(--vd-danger)} .article-category-studio{grid-column:1/-1;margin-top:-4px} @media(max-width:760px){.category-studio-field{grid-column:auto}.category-studio-inline{align-items:stretch}.category-studio-inline .compact{flex:1}.category-studio-inline span[role="status"]{flex-basis:100%}} .tpl-notes-editor { min-height: 100px; } .result-input--compact { max-width: 200px; } .system-actions--spaced { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .modal--narrow { max-width: 440px; } .modal--medium { max-width: 520px; } .ai-job-progress-track > .ai-job-progress-value, .local-flux-progress-track > div, .image-factory-job-progress > .image-factory-job-progress-value, #ux-generator-progress-bar { --vd-runtime-progress: 0%; width: var(--vd-runtime-progress); } .media-lightbox-canvas { --vd-runtime-media-width: 1px; --vd-runtime-media-height: 1px; width: var(--vd-runtime-media-width); height: var(--vd-runtime-media-height); } .media-lightbox-canvas > img { width: 100%; height: 100%; } .clipboard-fallback-input { position: fixed; inset: auto auto 0 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .photo-editor-canvas-wrap .crop-overlay { --vd-runtime-crop-width: 1px; --vd-runtime-crop-height: 1px; --vd-runtime-crop-left: 0px; --vd-runtime-crop-top: 0px; width: var(--vd-runtime-crop-width); height: var(--vd-runtime-crop-height); left: var(--vd-runtime-crop-left); top: var(--vd-runtime-crop-top); } .price-suggestion-hint { margin-top: 4px; color: var(--vd-ink-muted); font-size: 12px; cursor: pointer; } .sidebar-user-avatar, .topbar-avatar, .user-card-avatar { --vd-avatar-color: var(--vd-brand); background: var(--vd-avatar-color); } .login-history-empty { padding: 10px; color: var(--vd-ink-muted); font-size: 12px; text-align: center; } .sys-value--compact { font-size: 16px; } .dashboard-bar-item > div > i { --vd-runtime-bar-height: 5%; height: var(--vd-runtime-bar-height); } .dashboard-donut { --vd-runtime-chart-gradient: var(--vd-surface-muted); background: var(--vd-runtime-chart-gradient); } .dashboard-category-legend i { --vd-runtime-chart-color: var(--vd-ink-muted); background: var(--vd-runtime-chart-color); } .image-factory-job-progress > span { width: var(--vd-runtime-progress); } [data-reduced-motion="true"] *, [data-reduced-motion="true"] *::before, [data-reduced-motion="true"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } [data-density="compact"] { --vd-control-height: 34px; --vd-content-gap: 10px; --vd-component-button-height: 34px; --vd-component-input-height: 36px; --vd-component-card-padding: 12px; } [data-density="spacious"] { --vd-control-height: 46px; --vd-content-gap: 22px; --vd-component-button-height: 46px; --vd-component-input-height: 48px; --vd-component-card-padding: 22px; } .vd-card { background: var(--vd-surface-raised); border: 1px solid var(--vd-line); border-radius: var(--vd-component-card-radius); padding: var(--vd-component-card-padding); box-shadow: var(--vd-shadow-soft); } .vd-button { min-height: var(--vd-component-button-height); border-radius: var(--vd-component-button-radius); } .setting-group input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .setting-group select, .vd-input { min-height: var(--vd-component-input-height); border-radius: var(--vd-component-input-radius); } :where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: var(--vd-component-focus-width) solid var(--vd-brand); outline-offset: 2px; } .vd-menu-root, [data-vd-menu-root] { position: relative; } .vd-menu-surface, [data-vd-menu] { background: var(--vd-surface-raised); border: 1px solid var(--vd-border-strong); border-radius: var(--vd-radius-md); box-shadow: var(--vd-shadow-lg); color: var(--vd-text); isolation: isolate; min-width: var(--vd-popover-min-width); max-width: min(var(--vd-popover-max-width), calc(100vw - 24px)); z-index: var(--vd-layer-popover); } [data-vd-menu][aria-hidden="true"], [data-vd-menu].hidden { display: none !important; } [data-vd-menu][aria-hidden="false"]:not(.hidden) { animation: vd-menu-enter var(--vd-motion-menu) ease-out both; } [data-vd-menu-trigger][aria-expanded="true"] { border-color: color-mix(in srgb, var(--vd-accent) 46%, var(--vd-border)); box-shadow: 0 0 0 var(--vd-component-focus-width) var(--vd-focus); } .vd-disclosure > summary { -webkit-tap-highlight-color: transparent; } .vd-disclosure > summary:focus-visible, [data-vd-menu-trigger]:focus-visible, [data-vd-jump-trigger]:focus-visible { outline: var(--vd-component-focus-width) solid var(--vd-focus-ring); outline-offset: 2px; } .vd-disclosure[data-vd-menu-details="true"] > summary { list-style: none; } .vd-disclosure[data-vd-menu-details="true"] > summary::-webkit-details-marker { display: none; } [data-vd-jump-target], .vd-jump-target { scroll-margin-top: var(--vd-anchor-offset); } .vd-jump-highlight { animation: vd-jump-highlight 1.6s ease-out both; } @keyframes vd-menu-enter { from { opacity: 0; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes vd-jump-highlight { 0%, 35% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--vd-accent) 34%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } } @media (prefers-reduced-motion: reduce) { [data-vd-menu][aria-hidden="false"]:not(.hidden), .vd-jump-highlight { animation: none; } } [data-vd-control-shell] { isolation: isolate; position: relative; } [data-vd-control-shell] [data-vd-control-decorator] { pointer-events: none; user-select: none; } [data-vd-control-stable="true"] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } [data-vd-control-stable="true"][data-vd-control-active="true"] { position: relative; z-index: 1; } [data-vd-control-stable="true"]:focus-visible { outline: var(--vd-component-focus-width) solid var(--vd-focus-ring); outline-offset: 2px; } @media (forced-colors: active) { [data-vd-control-stable="true"]:focus-visible { outline-color: Highlight; } } [data-vd-form-control][data-vd-form-control-theme="semantic"] { --vd-form-control-bg: var(--vd-input-bg); --vd-form-control-border: var(--vd-border); --vd-form-control-text: var(--vd-text); --vd-form-control-placeholder: var(--vd-text-muted); --vd-form-control-hover-border: color-mix(in srgb, var(--vd-accent) 38%, var(--vd-form-control-border)); --vd-form-control-invalid: var(--vd-danger); max-inline-size: 100%; border-color: var(--vd-form-control-border); background-color: var(--vd-form-control-bg); color: var(--vd-form-control-text); caret-color: var(--vd-accent); accent-color: var(--vd-accent); font: inherit; } [data-vd-form-control][data-vd-form-control-theme="semantic"][data-vd-form-control-ready="true"] { transition: border-color var(--vd-motion-fast) ease, background-color var(--vd-motion-fast) ease, box-shadow var(--vd-motion-fast) ease, color var(--vd-motion-fast) ease; } [data-vd-form-control][data-vd-form-control-theme="semantic"]::placeholder { color: var(--vd-form-control-placeholder); opacity: 1; } [data-vd-form-control][data-vd-form-control-theme="semantic"]:hover:not(:disabled):not([aria-disabled="true"]):not([readonly]) { border-color: var(--vd-form-control-hover-border); } [data-vd-form-control][data-vd-form-control-theme="semantic"]:focus, [data-vd-form-control][data-vd-form-control-theme="semantic"]:focus-visible { outline: none; border-color: var(--vd-accent); box-shadow: 0 0 0 var(--vd-component-focus-width) var(--vd-focus); } [data-vd-form-control][data-vd-form-control-theme="semantic"]:disabled, [data-vd-form-control][data-vd-form-control-theme="semantic"][aria-disabled="true"] { cursor: not-allowed; opacity: .62; background-color: var(--vd-surface-muted); } [data-vd-form-control][data-vd-form-control-theme="semantic"][readonly] { cursor: default; background-color: color-mix(in srgb, var(--vd-surface-muted) 74%, var(--vd-form-control-bg)); } [data-vd-form-control][data-vd-form-control-theme="semantic"]:invalid:not(:placeholder-shown), [data-vd-form-control][data-vd-form-control-theme="semantic"][aria-invalid="true"] { border-color: var(--vd-form-control-invalid); } [data-vd-form-control="select"][data-vd-form-control-theme="semantic"] option, [data-vd-form-control="select-multiple"][data-vd-form-control-theme="semantic"] option { background: var(--vd-surface-raised); color: var(--vd-text); } [data-vd-form-control][data-vd-form-control-theme="semantic"]:-webkit-autofill, [data-vd-form-control][data-vd-form-control-theme="semantic"]:-webkit-autofill:hover, [data-vd-form-control][data-vd-form-control-theme="semantic"]:-webkit-autofill:focus { -webkit-text-fill-color: var(--vd-form-control-text); caret-color: var(--vd-form-control-text); box-shadow: 0 0 0 1000px var(--vd-form-control-bg) inset; transition: background-color 9999s ease-out 0s; } [data-vd-control-update-pending="true"] { cursor: progress; } @media (prefers-reduced-motion: reduce) { [data-vd-form-control][data-vd-form-control-theme="semantic"][data-vd-form-control-ready="true"] { transition: none; } } @media (forced-colors: active) { [data-vd-form-control][data-vd-form-control-theme="semantic"] { border-color: CanvasText; background: Canvas; color: CanvasText; forced-color-adjust: auto; } [data-vd-form-control][data-vd-form-control-theme="semantic"]:focus, [data-vd-form-control][data-vd-form-control-theme="semantic"]:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; box-shadow: none; } [data-vd-form-control][data-vd-form-control-theme="semantic"][aria-invalid="true"] { border-color: Mark; } } html { --vd-dialog-stack-offset: 0; --vd-scrollbar-compensation: 0px; --vd-dialog-base-padding-inline-end: 0px; scrollbar-gutter: stable; } body.vd-dialog-open { overflow: hidden !important; padding-inline-end: calc(var(--vd-dialog-base-padding-inline-end) + var(--vd-scrollbar-compensation)); overscroll-behavior: none; } [data-vd-dialog-root][data-vd-dialog-active="true"] { isolation: isolate; overscroll-behavior: contain; z-index: calc(var(--vd-layer-modal) + var(--vd-dialog-stack-offset)); } [data-vd-dialog-root][data-vd-dialog-obscured] { pointer-events: none !important; user-select: none; } [data-vd-dialog-root][data-vd-dialog-topmost="true"] { pointer-events: auto; } .modal-overlay[data-vd-dialog-root][data-vd-dialog-active="true"] { background: color-mix(in srgb, var(--vd-ink) 56%, transparent); backdrop-filter: blur(5px) saturate(.92); } [data-vd-dialog-surface] { background-color: var(--vd-surface-raised); border-color: var(--vd-line); color: var(--vd-ink); isolation: isolate; max-block-size: min(94dvh, calc(100dvh - 24px)); overscroll-behavior: contain; scrollbar-gutter: stable; } [data-vd-dialog-surface]:focus-visible { outline: var(--vd-component-focus-width) solid var(--vd-focus-ring); outline-offset: 3px; } [data-vd-dialog-root][data-vd-dialog-active="true"] .modal-header, [data-vd-dialog-root][data-vd-dialog-active="true"] .modal-footer { background-color: var(--vd-surface-raised); border-color: var(--vd-line); } [data-vd-dialog-root][data-vd-dialog-active="true"] .modal-close:focus-visible, [data-vd-dialog-root][data-vd-dialog-active="true"] [data-vd-dialog-close]:focus-visible { outline: var(--vd-component-focus-width) solid var(--vd-focus-ring); outline-offset: 3px; } @media (max-width: 680px) { [data-vd-dialog-root][data-vd-dialog-active="true"] { 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)); } [data-vd-dialog-surface] { max-block-size: calc(100dvh - max(16px, env(safe-area-inset-top) + env(safe-area-inset-bottom))); } } @media (prefers-reduced-motion: reduce) { .modal-overlay[data-vd-dialog-root][data-vd-dialog-active="true"] { backdrop-filter: none; } } @media (forced-colors: active) { .modal-overlay[data-vd-dialog-root][data-vd-dialog-active="true"] { background: Canvas; } [data-vd-dialog-surface] { border: 2px solid CanvasText; forced-color-adjust: auto; } [data-vd-dialog-surface]:focus-visible { outline-color: Highlight; } } #history-detail .listing-editor-shell { --completion-success: var(--vd-success); --completion-warning: var(--vd-warning); --completion-danger: var(--vd-danger); } #history-detail .listing-editor-header { align-items: center; background: color-mix(in srgb, var(--vd-surface-raised) 94%, transparent); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-md); box-shadow: var(--vd-shadow-sm); margin-bottom: 10px; padding: 14px 16px; position: sticky; top: calc(var(--vd-topbar-height) + 8px); z-index: 32; } .listing-editor-title-row { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; } .listing-save-state { align-items: center; background: var(--vd-surface-muted); border: 1px solid var(--vd-line); border-radius: 999px; color: var(--vd-ink-muted); display: inline-flex; font-size: 7px; font-weight: 720; gap: 6px; min-height: 26px; padding: 0 9px; white-space: nowrap; } .listing-save-state::before { background: currentColor; border-radius: 50%; content: ''; height: 6px; width: 6px; } .listing-save-state[data-state="dirty"], .listing-save-state[data-state="recovered"] { background: var(--vd-warning-soft); border-color: color-mix(in srgb, var(--vd-warning) 36%, var(--vd-line)); color: var(--vd-warning); } .listing-save-state[data-state="saving"] { background: var(--vd-brand-soft); border-color: color-mix(in srgb, var(--vd-brand) 36%, var(--vd-line)); color: var(--vd-brand); } .listing-save-state[data-state="saving"]::before { animation: listing-save-pulse .8s ease-in-out infinite alternate; } .listing-save-state[data-state="saved"], .listing-save-state[data-state="clean"] { background: var(--vd-success-soft); border-color: color-mix(in srgb, var(--vd-success) 36%, var(--vd-line)); color: var(--vd-success); } .listing-save-state[data-state="error"] { background: var(--vd-danger-soft); border-color: color-mix(in srgb, var(--vd-danger) 36%, var(--vd-line)); color: var(--vd-danger); } @keyframes listing-save-pulse { from { opacity: .35; transform: scale(.82); } to { opacity: 1; transform: scale(1.12); } } .listing-completion-nav { align-items: stretch; background: var(--vd-surface-raised); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-md); display: grid; gap: 1px; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 10px; overflow: hidden; } .listing-completion-step { align-items: center; background: transparent; border: 0; border-right: 1px solid var(--vd-line); color: var(--vd-ink-secondary); cursor: pointer; display: grid; gap: 2px; grid-template-columns: 24px minmax(0, 1fr) auto; min-height: 54px; padding: 8px 10px; text-align: left; } .listing-completion-step:last-child { border-right: 0; } .listing-completion-step:hover { background: var(--vd-surface-muted); } .listing-completion-step:focus-visible { outline: 3px solid var(--vd-focus); outline-offset: -3px; } .listing-completion-step-index { align-items: center; background: var(--vd-surface-muted); border: 1px solid var(--vd-line); border-radius: 8px; color: var(--vd-ink-muted); display: inline-flex; font-size: 7px; font-weight: 780; height: 24px; justify-content: center; width: 24px; } .listing-completion-step strong { color: var(--vd-ink); font-size: 8px; font-weight: 730; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .listing-completion-step small { color: var(--vd-ink-muted); font-size: 6.5px; grid-column: 2; } .listing-completion-step-status { align-items: center; background: var(--vd-surface-muted); border-radius: 999px; color: var(--vd-ink-muted); display: inline-flex; font-size: 6px; font-weight: 760; min-height: 20px; padding: 0 7px; } .listing-completion-step.is-complete .listing-completion-step-index, .listing-completion-step.is-complete .listing-completion-step-status { background: var(--vd-success-soft); border-color: color-mix(in srgb, var(--vd-success) 30%, var(--vd-line)); color: var(--vd-success); } .listing-completion-step.has-missing .listing-completion-step-index, .listing-completion-step.has-missing .listing-completion-step-status { background: var(--vd-danger-soft); border-color: color-mix(in srgb, var(--vd-danger) 30%, var(--vd-line)); color: var(--vd-danger); } .listing-draft-recovery { align-items: center; background: color-mix(in srgb, var(--vd-warning-soft) 72%, var(--vd-surface-raised)); border: 1px solid color-mix(in srgb, var(--vd-warning) 38%, var(--vd-line)); border-radius: var(--vd-radius-md); display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) auto; margin-bottom: 10px; padding: 12px 14px; } .listing-draft-recovery.hidden { display: none; } .listing-draft-recovery strong { color: var(--vd-ink); display: block; font-size: 9px; } .listing-draft-recovery p { color: var(--vd-ink-secondary); font-size: 7.5px; line-height: 1.45; margin: 3px 0 0; } .listing-draft-recovery-actions { display: flex; gap: 6px; } .listing-editor-section[data-completion-step], .listing-media-editor[data-completion-step] { scroll-margin-top: calc(var(--vd-topbar-height) + 156px); } .listing-editor-section[data-completion-state="missing"], .listing-media-editor[data-completion-state="missing"] { border-color: color-mix(in srgb, var(--vd-danger) 32%, var(--vd-line)); } [data-completion-field].has-required-error input, [data-completion-field].has-required-error select, [data-completion-field].has-required-error textarea, [data-completion-field].has-required-error .cat-picker-wrap, [data-completion-field].has-required-error .ql-container, [data-completion-field].has-required-error .detail-photo-stage { border-color: color-mix(in srgb, var(--vd-danger) 64%, var(--vd-line)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--vd-danger-soft) 80%, transparent); } .completion-field-message { color: var(--vd-danger); display: block; font-size: 6.5px; font-weight: 650; line-height: 1.35; margin-top: 4px; } .listing-completion-card { background: linear-gradient(150deg, var(--vd-surface-raised), var(--vd-surface-muted)); } .listing-completion-score { align-items: center; display: grid; gap: 9px; grid-template-columns: 58px minmax(0, 1fr); margin-top: 8px; } .listing-completion-ring { --vd-runtime-completion-progress: 0; align-items: center; aspect-ratio: 1; background: conic-gradient(var(--vd-brand) calc(var(--vd-runtime-completion-progress) * 1%), var(--vd-line) 0); border-radius: 50%; display: grid; place-items: center; position: relative; } .listing-completion-ring::before { background: var(--vd-surface-raised); border-radius: 50%; content: ''; inset: 5px; position: absolute; } .listing-completion-ring strong { color: var(--vd-ink); font-size: 11px; position: relative; } .listing-completion-copy strong, .listing-linked-data strong, .listing-platform-rules strong { color: var(--vd-ink); display: block; font-size: 8px; } .listing-completion-copy span, .listing-linked-data span, .listing-platform-rules span { color: var(--vd-ink-muted); display: block; font-size: 6.5px; line-height: 1.4; margin-top: 2px; } .listing-completion-missing { display: grid; gap: 5px; margin-top: 9px; } .listing-completion-missing button { align-items: center; background: var(--vd-surface); border: 1px solid var(--vd-line); border-radius: 7px; color: var(--vd-ink-secondary); cursor: pointer; display: flex; font: inherit; font-size: 6.8px; gap: 6px; min-height: 28px; padding: 0 8px; text-align: left; width: 100%; } .listing-completion-missing button::before { color: var(--vd-danger); content: '●'; font-size: 5px; } .listing-completion-missing button:hover { border-color: var(--vd-line-strong); color: var(--vd-ink); } .listing-linked-data, .listing-platform-rules { display: grid; gap: 8px; margin-top: 8px; } .listing-linked-row, .listing-rule-row { align-items: center; border-bottom: 1px solid var(--vd-line); display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) auto; padding-bottom: 7px; } .listing-linked-row:last-child, .listing-rule-row:last-child { border-bottom: 0; padding-bottom: 0; } .listing-linked-row b, .listing-rule-row b { color: var(--vd-ink); font-size: 7px; font-weight: 720; text-align: right; } #detail-title-count.is-over-limit { color: var(--vd-danger); font-weight: 750; } @media (max-width: 1180px) { .listing-completion-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } .listing-completion-step:nth-child(3) { border-right: 0; } .listing-completion-step:nth-child(n+4) { border-top: 1px solid var(--vd-line); } } @media (max-width: 760px) { #history-detail .listing-editor-header { position: static; } .listing-completion-nav { grid-template-columns: 1fr; } .listing-completion-step { border-right: 0; border-bottom: 1px solid var(--vd-line); } .listing-completion-step:last-child { border-bottom: 0; } .listing-completion-step:nth-child(n+4) { border-top: 0; } .listing-draft-recovery { grid-template-columns: 1fr; } .listing-draft-recovery-actions { display: grid; grid-template-columns: 1fr 1fr; } } @media (prefers-reduced-motion: reduce) { .listing-save-state[data-state="saving"]::before { animation: none; } } .listing-completion-step:focus-visible, .listing-completion-missing button:focus-visible, .listing-draft-recovery button:focus-visible, .listing-editor-shell .vd-button:focus-visible { outline: 2px solid var(--vd-focus-ring); outline-offset: 2px; } .listing-save-state[data-state="readonly"] { background: var(--vd-surface-muted); border-color: var(--vd-line); color: var(--vd-ink-muted); } .listing-validation-summary { display: grid; gap: var(--vd-space-3); margin: 0 0 var(--vd-space-4); padding: var(--vd-space-4); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-lg); background: var(--vd-surface-muted); } .listing-validation-summary.hidden { display: none; } .listing-validation-summary > div:first-child { display: grid; gap: var(--vd-space-1); } .listing-validation-summary strong { color: var(--vd-ink); font-size: 14px; } .listing-validation-summary p { margin: 0; color: var(--vd-ink-muted); font-size: 12px; line-height: 1.5; } .listing-validation-summary.is-ready { border-color: color-mix(in srgb, var(--vd-success) 38%, var(--vd-line)); background: var(--vd-success-soft); } .listing-validation-summary.has-errors { border-color: color-mix(in srgb, var(--vd-danger) 42%, var(--vd-line)); background: var(--vd-danger-soft); } .listing-validation-items { display: flex; flex-wrap: wrap; gap: var(--vd-space-2); } .listing-validation-items > span, .listing-validation-items button { min-height: 34px; padding: 0 var(--vd-space-3); border: 1px solid var(--vd-line); border-radius: 999px; background: var(--vd-surface-raised); color: var(--vd-ink-secondary); font: inherit; font-size: 11px; font-weight: 750; } .listing-validation-items button { cursor: pointer; } .listing-validation-items button:hover { border-color: var(--vd-line-strong); color: var(--vd-ink); } .listing-validation-items button:focus-visible { outline: var(--vd-component-focus-width) solid var(--vd-focus); outline-offset: 2px; } #generator [data-completion-field].has-required-error { border-color: color-mix(in srgb, var(--vd-danger) 58%, var(--vd-line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vd-danger) 12%, transparent); } #generator .completion-field-message { display: block; margin-top: var(--vd-space-2); color: var(--vd-danger); font-size: 11px; font-weight: 700; } #history-detail > #back-to-list { display: none; } #history-detail.history-detail { padding: 0; border: 0; background: transparent; box-shadow: none; overflow: visible; } .article-workspace { width: min(100%, var(--vd-article-content-max)); max-width: var(--vd-article-content-max); margin: 0 auto; display: grid; gap: var(--vd-article-section-gap); color: var(--vd-ink); container-type: inline-size; container-name: article-studio; font-size: var(--vd-article-copy-size); } .article-workspace .article-section-header p, .article-workspace .article-card-header p, .article-workspace .article-cost-basis > header p, .article-workspace .article-quality-hero > p, .article-workspace .article-media-actions p { font-size: var(--vd-article-support-size); line-height: 1.55; } .article-workspace .detail-pane-head strong, .article-workspace .detail-html-preview-head strong { font-size: var(--vd-article-support-size); } .article-workspace .detail-pane-head span, .article-workspace .detail-html-preview-head span, .article-workspace .detail-html-toolbar > span, .article-workspace .detail-photo-help { font-size: var(--vd-article-meta-size); line-height: 1.45; } .article-workspace .detail-description-pane .ql-container, .article-workspace .detail-description-pane .ql-editor { font-size: var(--vd-article-copy-size); line-height: 1.65; } .article-workspace .detail-description-pane textarea { font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .article-workspace .listing-editor-header p, .article-workspace .listing-section-heading > b { font-size: var(--vd-article-meta-size); line-height: 1.45; } .article-workspace .listing-section-heading h3 { font-size: 16px; line-height: 1.25; } .article-command-bar { position: static; min-height: var(--vd-article-command-height); display: flex; align-items: center; justify-content: space-between; gap: var(--vd-space-3); padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .article-command-leading { min-width: 0; display: flex; align-items: center; gap: var(--vd-space-3); } .article-command-identity { min-width: 0; display: none; gap: 2px; } .article-command-identity > span, .article-eyebrow { color: var(--vd-brand); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .article-command-identity > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; } .article-command-identity > small { color: var(--vd-ink-muted); font-size: 12px; } .article-command-status { flex: 0 0 auto; } .article-icon-button { width: var(--vd-component-touch-target); height: var(--vd-component-touch-target); flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--vd-line); border-radius: var(--vd-radius-md); background: var(--vd-surface-raised); color: var(--vd-ink); font-size: 20px; cursor: pointer; } .article-icon-button:hover { border-color: var(--vd-line-strong); background: var(--vd-surface-muted); } .article-icon-button:focus-visible { outline: var(--vd-component-focus-width) solid var(--vd-focus); outline-offset: 2px; } .article-summary { min-height: var(--vd-article-summary-min-height); display: grid; grid-template-columns: 144px minmax(0, 1fr); gap: var(--vd-space-4); padding: var(--vd-space-4); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-xl); background: var(--vd-surface-raised); box-shadow: var(--vd-shadow-xs); } .article-summary-media { min-height: 136px; overflow: hidden; border: 1px solid var(--vd-border-subtle); border-radius: var(--vd-radius-lg); background: var(--vd-surface-muted); } .article-summary-media img { width: 100%; height: 100%; min-height: 136px; display: block; object-fit: contain; } .article-summary-cover-empty { width: 100%; height: 100%; min-height: 136px; display: grid; place-items: center; color: var(--vd-ink-muted); font-size: 12px; font-weight: 750; } .article-summary-main { min-width: 0; display: grid; align-content: space-between; gap: var(--vd-space-4); } .article-summary-heading { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--vd-space-4); } .article-summary-copy { min-width: 0; } .article-summary-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--vd-space-2); } .article-summary-heading h1 { margin: var(--vd-space-2) 0 var(--vd-space-1); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.08; letter-spacing: -.03em; } .article-summary-commerce-line { display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--vd-space-2) var(--vd-space-3); color:var(--vd-ink-muted); font-size:12px; } .article-summary-commerce-line > strong { color:var(--vd-ink); font-size:20px; line-height:1.15; letter-spacing:-.02em; } .article-summary-marketplaces { display:flex; align-items:center; flex-wrap:wrap; gap:var(--vd-space-1); margin-top:var(--vd-space-3); } .article-summary-readiness-pending { color:var(--vd-ink-muted); font-size:11px; } .article-summary-marketplace { min-height:28px; display:inline-flex; align-items:center; gap:6px; padding:0 var(--vd-space-2); border:1px solid var(--vd-line); border-radius:var(--vd-radius-xl); background:var(--vd-surface); color:var(--vd-ink-secondary); font:inherit; font-size:11px; cursor:pointer; } .article-summary-marketplace span { font-weight:700; } .article-summary-marketplace strong { color:var(--vd-ink-muted); font-size:11px; } .article-summary-marketplace.is-ready { border-color:color-mix(in srgb,var(--vd-success) 28%,var(--vd-line)); background:var(--vd-success-soft); color:var(--vd-success); } .article-summary-marketplace.is-ready strong { color:var(--vd-success); } .article-summary-marketplace.is-blocked { border-color:color-mix(in srgb,var(--vd-warning) 32%,var(--vd-line)); background:var(--vd-warning-soft); color:var(--vd-warning); } .article-platform-chip, .article-status-chip { min-height: 30px; display: inline-flex; align-items: center; padding: 0 var(--vd-space-3); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-md); font-size: 12px; font-weight: 800; } .article-platform-chip { background: var(--vd-info-soft); color: var(--vd-info); } .article-status-chip { background: var(--vd-surface-muted); color: var(--vd-ink-secondary); } .article-status-chip[data-status="active"], .article-status-chip[data-status="sold"] { background: var(--vd-success-soft); color: var(--vd-success); } .article-status-chip[data-status="reserved"] { background: var(--vd-warning-soft); color: var(--vd-warning); } .article-command-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--vd-space-2); } .article-summary-actions { min-width: min(100%, 430px); } .article-summary-actions > .vd-button { min-width: 102px; justify-content: center; gap: var(--vd-space-2); } .article-summary-actions .vd-icon-host { display: inline-flex; } .article-editor-mode, .article-utility-actions.hidden { display: none; } .article-print-actions, .article-more-actions { position: relative; flex: 0 0 auto; } .article-print-actions > summary, .article-more-actions > summary { list-style: none; cursor: pointer; } .article-print-actions > summary::-webkit-details-marker, .article-more-actions > summary::-webkit-details-marker { display: none; } .article-print-summary-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } .article-print-actions-panel, .article-more-actions-panel { position: absolute; z-index: var(--vd-layer-dropdown); top: calc(100% + var(--vd-space-2)); right: 0; display: grid; gap: var(--vd-space-2); padding: var(--vd-space-2); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-lg); background: var(--vd-surface-raised); box-shadow: var(--vd-shadow-lg); } .article-print-actions:not([open]) .article-print-actions-panel, .article-more-actions:not([open]) .article-more-actions-panel { display: none; } .article-print-actions-panel { width: min(360px, calc(100vw - var(--vd-space-5))); max-height:min(420px,calc(100vh - var(--vd-space-6))); overflow-y:auto; overscroll-behavior:contain; } .article-print-actions.article-menu-opens-up > .article-print-actions-panel { top:auto; bottom:calc(100% + var(--vd-space-2)); } .article-more-actions-panel { width: min(300px, calc(100vw - var(--vd-space-5))); } .article-print-actions-panel > .article-print-menu-panel, .article-more-actions-panel > .vd-button { width: 100%; } .article-more-actions-panel > .vd-button { justify-content: flex-start; } .article-more-actions-panel #detail-vinted-draft, .article-more-actions-panel #detail-vinted-publish { min-height: var(--vd-component-touch-target); } .article-print-menu-panel { width: 100%; display: grid; gap: var(--vd-space-1); } .article-print-menu-kicker { padding: var(--vd-space-1) var(--vd-space-3); color: var(--vd-ink-muted); font-size: 12px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; } .article-print-menu-panel button { width: 100%; min-height: 62px; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: var(--vd-space-2); padding: var(--vd-space-2) var(--vd-space-3); border: 0; border-radius: var(--vd-radius-md); background: transparent; color: var(--vd-ink); font: inherit; text-align: left; cursor: pointer; } .article-print-menu-panel button:hover, .article-print-menu-panel button:focus-visible { outline: 0; background: var(--vd-surface-muted); } .article-print-menu-panel button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; } .article-print-menu-panel button > span { min-width: 0; display: grid; gap: 2px; } .article-print-menu-panel button strong { font-size: 14px; } .article-print-menu-panel button small { color: var(--vd-ink-muted); font-size: 12px; font-weight: 500; line-height: 1.4; } .article-summary-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--vd-space-2); } .article-summary-facts > div { min-width: 0; display: grid; gap: var(--vd-space-1); padding: var(--vd-space-3); border: 1px solid var(--vd-border-subtle); border-radius: var(--vd-radius-md); background: var(--vd-surface); } .article-summary-facts span { color: var(--vd-ink-muted); font-size: 11px; font-weight: 800; } .article-summary-facts strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; } .article-workspace-navigation { position: static; display: flex; gap: var(--vd-space-4); overflow-x: auto; padding: 0 0 var(--vd-space-2); border: 0; border-bottom: 1px solid var(--vd-line); border-radius: 0; background: color-mix(in srgb, var(--vd-surface-raised) 94%, transparent); box-shadow: var(--vd-shadow-xs); scrollbar-width: thin; } .article-workspace-tab { flex: 0 0 auto; min-height: var(--vd-component-touch-target); padding: 0 var(--vd-space-4); border: 0; border-radius: var(--vd-radius-md); background: transparent; color: var(--vd-ink-secondary); font-size: 13px; font-weight: 780; white-space: nowrap; cursor: pointer; } .article-workspace-tab:hover { background: var(--vd-surface-muted); color: var(--vd-ink); } .article-workspace-tab.is-active { background: var(--vd-ink); color: var(--vd-surface-raised); } .article-workspace-tab:focus-visible { outline: var(--vd-component-focus-width) solid var(--vd-focus); outline-offset: 1px; } .article-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--vd-article-inspector-width); gap: var(--vd-space-5); align-items: start; } .article-workspace-primary, .article-workspace-rail { min-width: 0; display: grid; gap: var(--vd-space-4); align-content: start; } .article-workspace-rail { position: sticky; top: calc(var(--vd-article-anchor-offset) + 58px); } .article-workspace-panel { min-width: 0; scroll-margin-top: var(--vd-article-anchor-offset); } .article-workspace-panel[hidden] { display: block; } .article-workspace.is-single-page-editor #article-panel-overview { display: none; } .article-overview-contract { display: none; } .article-editor-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--vd-space-4); } .article-editor-main { min-width: 0; display: grid; gap: var(--vd-space-4); } .article-editor-section, .article-media-studio, .article-card { min-width: 0; padding: var(--vd-space-5); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-lg); background: var(--vd-surface-raised); box-shadow: var(--vd-shadow-xs); } .article-section-header, .article-card-header, .article-profitability-header { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--vd-space-4); margin-bottom: var(--vd-space-4); } .article-section-header h2, .article-card-header h2, .article-profitability-header h2 { margin: 2px 0 0; font-size: 21px; line-height: 1.12; letter-spacing: -.02em; } .article-section-header p, .article-card-header p { margin: var(--vd-space-1) 0 0; color: var(--vd-ink-muted); font-size: 12px; line-height: 1.5; } .article-section-header > b { flex: 0 0 auto; color: var(--vd-ink-muted); font-size: 12px; } .article-editor-section > .listing-full-field, .article-cost-basis, .article-shipping-cost-card { margin-top: var(--vd-space-4); } .article-editor-section .listing-form-grid.two, .article-editor-section .listing-form-grid.three { gap: var(--vd-article-field-gap); } .article-editor-section .listing-form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .article-editor-section .listing-form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .article-cost-basis { padding: var(--vd-space-4); border: 1px solid var(--vd-border-subtle); border-radius: var(--vd-radius-md); background: var(--vd-surface); } .article-cost-basis > header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .7fr); align-items: start; gap: var(--vd-space-4); margin-bottom: var(--vd-space-4); } .article-cost-basis > header h3 { margin: 2px 0 0; font-size: 17px; } .article-cost-basis > header p { margin: 0; color: var(--vd-ink-muted); font-size: 12px; line-height: 1.5; } .article-media-layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: var(--vd-space-4); align-items: start; } .article-media-stage-wrap { min-width: 0; } .article-media-stage-wrap .detail-photo-stage { min-height: 410px; border-radius: var(--vd-radius-lg); background: var(--vd-surface); } .article-media-actions { position: sticky; top: calc(var(--vd-article-anchor-offset) + 58px); display: grid; gap: var(--vd-space-2); padding: var(--vd-space-3); border: 1px solid var(--vd-border-subtle); border-radius: var(--vd-radius-md); background: var(--vd-surface); } .article-media-actions p { margin: var(--vd-space-1) 0 0; color: var(--vd-ink-muted); font-size: 11px; line-height: 1.45; } .article-category-studio { grid-column: 1 / -1; } .article-profitability-card[data-tone="success"] { border-color: color-mix(in srgb, var(--vd-success) 30%, var(--vd-line)); } .article-profitability-card[data-tone="warning"] { border-color: color-mix(in srgb, var(--vd-warning) 36%, var(--vd-line)); } .article-profitability-card[data-tone="danger"] { border-color: color-mix(in srgb, var(--vd-danger) 36%, var(--vd-line)); } .article-profitability-status { min-height: 28px; display: inline-flex; align-items: center; padding: 0 var(--vd-space-2); border-radius: var(--vd-radius-md); background: var(--vd-surface-muted); color: var(--vd-ink-secondary); font-size: 11px; font-weight: 800; } .article-profitability-card[data-tone="success"] .article-profitability-status { background: var(--vd-success-soft); color: var(--vd-success); } .article-profitability-card[data-tone="warning"] .article-profitability-status { background: var(--vd-warning-soft); color: var(--vd-warning); } .article-profitability-card[data-tone="danger"] .article-profitability-status { background: var(--vd-danger-soft); color: var(--vd-danger); } .article-profitability-gross { display: block; margin-top: var(--vd-space-1); font-size: 34px; line-height: 1; letter-spacing: -.035em; } .article-profitability-gross-label { display: block; margin-top: var(--vd-space-1); color: var(--vd-ink-muted); font-size: 11px; } .article-profitability-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--vd-space-3); margin-top: var(--vd-space-4); } .article-profitability-grid > div { min-width: 0; display: grid; gap: 3px; padding: var(--vd-space-2) 0; border-bottom: 1px solid var(--vd-border-subtle); } .article-profitability-grid > div span { color: var(--vd-ink-muted); font-size: 11px; } .article-profitability-grid > div strong { font-size: 13px; } .article-profitability-grid > div.is-primary strong { color: var(--vd-brand); } .article-profitability-note { margin: var(--vd-space-3) 0 0; color: var(--vd-ink-muted); font-size: 11px; line-height: 1.45; } .article-quick-actions { display: grid; gap: var(--vd-space-2); } .article-quick-actions .article-card-header { margin-bottom: var(--vd-space-2); } .article-platform-workspace, .article-quality-layout { display: grid; grid-template-columns: 1fr; gap: var(--vd-space-4); } .article-output-actions { display: grid; grid-template-columns: 1fr; gap: var(--vd-space-2); } .article-quality-hero h2 { margin: var(--vd-space-1) 0 var(--vd-space-2); font-size: 20px; line-height: 1.15; } .article-quality-hero > p { margin: 0; color: var(--vd-ink-muted); font-size: 12px; line-height: 1.5; } .article-quality-score { display: flex; align-items: baseline; gap: var(--vd-space-2); margin: var(--vd-space-4) 0; } .article-quality-score strong { font-size: 40px; line-height: 1; letter-spacing: -.04em; } .article-quality-score span { color: var(--vd-ink-muted); font-size: 12px; } .article-quality-missing { display: grid; gap: var(--vd-space-2); } .article-quality-missing button { width: 100%; display: grid; gap: 3px; padding: var(--vd-space-3); border: 1px solid var(--vd-border-subtle); border-radius: var(--vd-radius-md); background: var(--vd-surface); color: var(--vd-ink); text-align: left; cursor: pointer; } .article-quality-missing button:hover { background: var(--vd-surface-muted); } .article-quality-missing button span, .article-quality-ready span { color: var(--vd-ink-muted); font-size: 11px; } .article-quality-ready { display: grid; gap: 3px; padding: var(--vd-space-3); border-radius: var(--vd-radius-md); background: var(--vd-success-soft); color: var(--vd-success); } .article-marketplace-readiness-grid { display:grid; gap:var(--vd-space-2); } .article-marketplace-readiness-item { display:grid; gap:var(--vd-space-2); padding:var(--vd-space-3); border:1px solid var(--vd-border-subtle); border-radius:var(--vd-radius-md); background:var(--vd-surface); } .article-marketplace-readiness-item.is-active { border-color:color-mix(in srgb,var(--vd-brand) 30%,var(--vd-line)); } .article-marketplace-readiness-summary { display:flex; align-items:center; justify-content:space-between; gap:var(--vd-space-3); } .article-marketplace-readiness-summary > div { min-width:0; display:grid; gap:2px; } .article-marketplace-readiness-summary small { color:var(--vd-ink-muted); font-size:11px; } .article-marketplace-readiness-status { flex:0 0 auto; min-height:28px; display:inline-flex; align-items:center; padding:0 var(--vd-space-2); border-radius:var(--vd-radius-xl); background:var(--vd-surface-muted); color:var(--vd-ink-secondary); font-size:11px; font-weight:800; } .article-marketplace-readiness-status.status-ready { background:var(--vd-success-soft); color:var(--vd-success); } .article-marketplace-readiness-status.status-review { background:var(--vd-warning-soft); color:var(--vd-warning); } .article-marketplace-readiness-status.status-blocked { background:var(--vd-danger-soft); color:var(--vd-danger); } .article-marketplace-readiness-details { display:grid; gap:var(--vd-space-2); } .article-marketplace-readiness-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--vd-space-2); } .article-marketplace-readiness-facts > div { display:grid; gap:2px; padding:var(--vd-space-2); border-radius:var(--vd-radius-sm); background:var(--vd-surface-muted); } .article-marketplace-readiness-facts span { color:var(--vd-ink-muted); font-size:11px; } .article-marketplace-readiness-facts strong { overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; } .article-marketplace-readiness-issue { display:flex; align-items:center; justify-content:space-between; gap:var(--vd-space-3); padding-top:var(--vd-space-2); border-top:1px solid var(--vd-border-subtle); } .article-marketplace-readiness-issue > span { min-width:0; display:grid; gap:2px; } .article-marketplace-readiness-issue small { color:var(--vd-ink-muted); font-size:11px; line-height:1.4; } .article-marketplace-readiness-issue.is-clear { color:var(--vd-success); } .article-marketplace-readiness-open { flex:0 0 auto; } .article-marketplace-readiness-note { margin:var(--vd-space-2) 0 0; color:var(--vd-ink-muted); font-size:11px; line-height:1.45; } .article-activity-list { list-style: none; display: grid; gap: 0; margin: 0; padding: 0; } .article-activity-list li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: var(--vd-space-2); padding: var(--vd-space-3) 0; border-bottom: 1px solid var(--vd-border-subtle); } .article-activity-list li:last-child { border-bottom: 0; padding-bottom: 0; } .article-activity-marker { width: 9px; height: 9px; margin-top: 4px; border-radius: var(--vd-radius-xl); background: var(--vd-brand); } .article-activity-list p { margin: 2px 0; font-size: 12px; } .article-activity-list small { color: var(--vd-ink-muted); font-size: 11px; } .article-identification-card { text-align: center; } .article-identification-card .article-card-header { text-align: left; } .article-identification-card canvas { width: 92px; height: 92px; } .article-identification-card > strong { display: block; margin-top: var(--vd-space-2); font-size: 12px; } .article-next-step { width: 100%; min-height: 58px; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: var(--vd-space-3); padding: var(--vd-space-2) var(--vd-space-3); border: 1px solid var(--vd-border-subtle); border-radius: var(--vd-radius-md); background: var(--vd-surface); color: var(--vd-ink); text-align: left; cursor: pointer; } .article-next-step:hover { background: var(--vd-surface-muted); } .article-next-step-index { color: var(--vd-brand); font-size: 11px; font-weight: 850; } .article-next-step-copy { min-width: 0; display: grid; gap: 2px; } .article-next-step-copy small { color: var(--vd-ink-muted); font-size: 11px; } .article-workspace .listing-draft-recovery { margin: 0; } .article-workspace .listing-completion-score { align-items: center; } .article-workspace .listing-completion-ring { flex: 0 0 auto; } .article-workspace .listing-completion-missing { max-height: 240px; overflow: auto; } .article-workspace .listing-completion-missing button { width: 100%; } .article-workspace .has-required-error { border-color: var(--vd-danger); } .article-workspace .completion-field-message { color: var(--vd-danger); font-size: 12px; } .article-workspace .vd-jump-highlight { box-shadow: 0 0 0 4px var(--vd-focus), var(--vd-shadow-sm); } .listing-platform-fields { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vd-space-3); } .listing-platform-fields .marketplace-platform-field { min-width: 0; display: flex; flex-direction: column; gap: var(--vd-space-2); font-size: 13px; font-weight: 700; } .listing-platform-fields .marketplace-platform-field input, .listing-platform-fields .marketplace-platform-field select { width: 100%; margin-top: 0; } @container article-studio (max-width: 1100px) { .article-summary-heading { grid-template-columns: 1fr; } .article-summary-actions { min-width: 0; justify-content: flex-start; } .article-detail-layout { grid-template-columns: minmax(0, 1fr); } .article-workspace-rail { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); } .article-workspace-rail > * { min-width: 0; } .article-workspace-rail .article-identification-card { display: none; } .article-media-actions { position: static; } } @container article-studio (max-width: 820px) { .article-command-bar { position: static; } .article-command-status { display: none; } .article-summary { grid-template-columns: 136px minmax(0, 1fr); padding: var(--vd-space-4); } .article-summary-media, .article-summary-media img, .article-summary-cover-empty { min-height: 136px; } .article-summary-heading h1 { font-size: 26px; } .article-summary-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .article-workspace-rail { grid-template-columns: 1fr; } .article-media-layout { grid-template-columns: minmax(0, 1fr); } .article-media-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } .article-media-actions p { grid-column: 1 / -1; } .article-cost-basis > header { grid-template-columns: 1fr; } } @container article-studio (max-width: 560px) { .article-workspace { gap: var(--vd-space-3); } .article-command-bar { padding: var(--vd-space-2); border-radius: var(--vd-radius-md); } .article-command-identity > span, .article-command-identity > small { display: none; } .article-summary { grid-template-columns: 92px minmax(0, 1fr); gap: var(--vd-space-3); padding: var(--vd-space-3); } .article-summary-media, .article-summary-media img, .article-summary-cover-empty { min-height: 92px; } .article-summary-heading h1 { font-size: 22px; } .article-summary-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; } .article-summary-actions > .vd-button { min-width: 0; width: 100%; } .article-summary-actions #article-save { grid-column: 1; grid-row: auto; } .article-summary-actions .article-print-actions, .article-summary-actions .article-more-actions { width: 100%; } .article-summary-actions .article-print-actions > summary, .article-summary-actions .article-more-actions > summary { width: 100%; justify-content: center; } .article-print-actions-panel, .article-more-actions-panel { position: fixed; inset: auto var(--vd-space-3) var(--vd-space-3); width: auto; max-height: 70vh; overflow: auto; } .article-print-actions.article-menu-opens-up > .article-print-actions-panel { top:auto; bottom:var(--vd-space-3); } .article-summary-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .article-marketplace-readiness-facts { grid-template-columns:1fr; } .article-marketplace-readiness-issue { align-items:flex-start; flex-direction:column; } .article-workspace-navigation { margin-inline: calc(var(--vd-space-2) * -1); border-radius: 0; border-inline: 0; } .article-editor-section, .article-media-studio, .article-card { padding: var(--vd-space-3); border-radius: var(--vd-radius-md); } .article-media-stage-wrap .detail-photo-stage { min-height: 280px; } .article-media-actions { grid-template-columns: 1fr 1fr; } .article-section-header, .article-card-header, .article-profitability-header { display: grid; } .article-editor-section .listing-form-grid.two, .article-editor-section .listing-form-grid.three, .listing-platform-fields { grid-template-columns: 1fr; } } @container article-studio (max-width: 480px) { .article-summary { grid-template-columns: 1fr; } .article-summary-media { max-height: 210px; } .article-summary-media img { min-height: 180px; max-height: 210px; } .article-summary-cover-empty { min-height: 180px; } .article-summary-facts { grid-template-columns: 1fr 1fr; } .article-summary-actions { grid-template-columns: 1fr; } .article-summary-actions #article-save, .article-summary-actions .article-print-actions, .article-summary-actions .article-more-actions { grid-column: auto; } .article-media-actions { grid-template-columns: 1fr; } .article-profitability-grid { grid-template-columns: 1fr; } } @media (max-width: 760px) { .listing-platform-fields { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .article-workspace-panel, .article-workspace-tab, .article-next-step { animation: none; transition: none; } } #history-detail .article-workspace .listing-form-grid label, #history-detail .article-workspace .listing-full-field, #history-detail .article-workspace [data-vd-article-field], #history-detail .article-workspace .listing-platform-fields .marketplace-platform-field, #history-detail .article-workspace .ai-model-controls label { gap: 7px; color: var(--vd-ink-secondary); font-size: 13px; font-weight: 700; line-height: 1.35; } #history-detail .article-workspace input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), #history-detail .article-workspace select, #history-detail .article-workspace textarea, #history-detail .article-workspace .model-select { min-height: 44px; padding-inline: 12px; color: var(--vd-ink); font-size: 15px; font-weight: 500; line-height: 1.4; letter-spacing: 0; text-transform: none; } #history-detail .article-workspace textarea { padding-block: 11px; } #history-detail .article-workspace input::placeholder, #history-detail .article-workspace textarea::placeholder { color: var(--vd-ink-muted); font-size: 15px; opacity: 1; } #history-detail .article-workspace .listing-full-field > span, #history-detail .article-workspace .listing-form-grid small, #history-detail .article-workspace .listing-full-field small, #history-detail .article-workspace [data-vd-article-field] small, #history-detail .article-workspace .marketplace-field-description, #history-detail .article-workspace .article-dynamic-field small, #history-detail .article-workspace #detail-category-search-pattern-help, #history-detail .article-workspace #detail-article-type-hint, #history-detail .article-workspace #detail-package-size-help, #history-detail .article-workspace #detail-material-help, #history-detail .article-workspace #detail-condition-description { color: var(--vd-ink-muted); font-size: 12px; font-weight: 500; line-height: 1.45; } #history-detail .article-workspace .listing-full-field > span { line-height: 1.35; } #history-detail .article-workspace .article-dynamic-field, #history-detail .article-workspace .marketplace-field-label { font-size: 13px; line-height: 1.35; } #history-detail .article-workspace .marketplace-money-input { min-height: 44px; } #history-detail .article-workspace .marketplace-money-input b { font-size: 14px; } #history-detail .article-workspace .marketplace-color-picker > summary { min-height: 44px; font-size: 14px; font-weight: 600; } #history-detail .article-workspace .marketplace-color-option { min-height: 38px; font-size: 13px; } #history-detail .article-workspace .cat-picker-wrap .cat-search { min-height: 44px; font-size: 15px; } #history-detail .article-workspace .cat-result-name, #history-detail .article-workspace .cat-group-hd { font-size: 13px; } #history-detail .article-workspace .cat-result-path, #history-detail .article-workspace .cat-sub-hd { font-size: 12px; } #history-detail .article-workspace .detail-description-pane .ql-container, #history-detail .article-workspace .detail-description-pane .ql-editor { font-size: 15px; line-height: 1.65; } #history-detail .article-workspace .detail-description-pane textarea, #history-detail .article-workspace .detail-html-switch-stage textarea { font-size: 13px; line-height: 1.6; } @media (max-width: 760px) { #history-detail .article-workspace input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), #history-detail .article-workspace select, #history-detail .article-workspace textarea, #history-detail .article-workspace .model-select, #history-detail .article-workspace .cat-picker-wrap .cat-search, #history-detail .article-workspace .detail-description-pane .ql-container, #history-detail .article-workspace .detail-description-pane .ql-editor { font-size: 16px; } } @container article-studio (max-width:620px) { #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-workspace { width:100%; max-width:100%; margin-inline:0; gap:14px; } #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-command-bar, #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-summary, #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-workspace-navigation, #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-detail-layout, #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-workspace-primary, #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-workspace-rail, #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-workspace-panel, #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-editor-section, #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-card, #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-media-studio { min-width:0; max-width:100%; } #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-command-bar { min-height:48px; padding:0; } #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-summary { grid-template-columns:92px minmax(0,1fr); gap:12px; padding:12px; } #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-summary-media, #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-summary-media img, #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-summary-cover-empty { min-height:92px; max-height:112px; } #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-summary-heading h1 { margin-top:6px; font-size:21px; line-height:1.12; overflow-wrap:anywhere; } #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-summary-commerce-line, #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-summary-marketplaces { min-width:0; overflow-wrap:anywhere; } #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-summary-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; width:100%; min-width:0; } #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-summary-actions > .vd-button, #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-summary-actions .article-print-actions, #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-summary-actions .article-more-actions, #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-summary-actions .article-print-actions > summary, #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-summary-actions .article-more-actions > summary { width:100%; min-width:0; min-height:44px; justify-content:center; } #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-print-actions-panel, #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-more-actions-panel { inset:auto 12px calc(12px + env(safe-area-inset-bottom)); width:auto; max-width:calc(100vw - 24px); max-height:min(72vh,calc(100dvh - 24px - env(safe-area-inset-bottom))); overscroll-behavior:contain; } #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-workspace-navigation { margin-inline:-8px; padding-inline:8px; padding-bottom:8px; scroll-snap-type:x proximity; scroll-padding-inline:8px; overscroll-behavior-inline:contain; } #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-workspace-tab { min-height:44px; padding-inline:14px; scroll-snap-align:start; font-size:13px; } #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-editor-section, #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-media-studio, #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-card { padding:14px; } #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-section-header, #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-card-header, #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-profitability-header { gap:10px; margin-bottom:14px; } #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-section-header h2, #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-card-header h2, #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-profitability-header h2 { font-size:19px; line-height:1.18; } #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .listing-form-grid, #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .listing-platform-fields, #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-media-layout, #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-media-stage-wrap, #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .detail-description-pane, #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .detail-html-switch-stage, #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .cat-picker-wrap, #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .ai-model-controls { min-width:0; max-width:100%; } #history[data-vd-mobile-article-polish="ap44.73"] #history-detail input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), #history[data-vd-mobile-article-polish="ap44.73"] #history-detail select, #history[data-vd-mobile-article-polish="ap44.73"] #history-detail textarea, #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .model-select, #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .cat-picker-wrap .cat-search { width:100%; max-width:100%; min-height:44px; font-size:16px; } #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .detail-description-pane .ql-container, #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .detail-description-pane .ql-editor, #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .detail-description-pane textarea, #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .detail-html-switch-stage textarea { max-width:100%; overflow-wrap:anywhere; } #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-marketplace-readiness-summary, #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-marketplace-readiness-issue { align-items:flex-start; flex-direction:column; } #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-marketplace-readiness-open, #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-marketplace-readiness-status { min-height:44px; } } @container article-studio (max-width:430px) { #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-summary { grid-template-columns:84px minmax(0,1fr); gap:10px; padding:10px; } #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-summary-media, #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-summary-media img, #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-summary-cover-empty { min-height:84px; max-height:100px; } #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-summary-heading h1 { font-size:20px; } #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-summary-facts { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; } #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-summary-facts > div { padding:9px; } #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-summary-actions { grid-template-columns:repeat(2,minmax(0,1fr)); } #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-media-stage-wrap .detail-photo-stage { min-height:230px; } #history[data-vd-mobile-article-polish="ap44.73"] #history-detail .article-profitability-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } #category-studio.vcs-workspace { container-name: vcs-workspace; container-type: inline-size; margin: 0 auto; max-width: 1680px; min-width: 0; padding: clamp(14px, 2vw, 28px); width: 100%; } .vcs-page-header { align-items: flex-start; display: flex; gap: 24px; justify-content: space-between; margin-bottom: 22px; min-width: 0; } .vcs-page-header > div:first-child, .vcs-panel-header > div, .vcs-main-column, .vcs-side-column, .vcs-layout { min-width: 0; } .vcs-page-header h2 { font-size: clamp(1.65rem, 2vw, 2.25rem); margin: 3px 0 8px; } .vcs-page-header p:not(.eyebrow) { color: var(--vd-ink-muted); line-height: 1.55; margin: 0; max-width: 820px; } .vcs-header-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 10px; justify-content: flex-end; } .vcs-header-actions .vd-button, .vcs-header-actions .primary-btn { min-height: var(--vd-component-input-height); } .vcs-status { background: var(--vd-surface-muted); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-md); margin-bottom: 16px; padding: 12px 14px; } .vcs-status[data-tone="error"] { border-color: color-mix(in srgb, var(--vd-danger) 35%, transparent); color: var(--vd-danger); } .vcs-status[data-tone="success"] { border-color: color-mix(in srgb, var(--vd-success) 35%, transparent); color: var(--vd-success); } .vcs-summary-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px; } .vcs-summary-grid article, .vcs-panel { background: var(--vd-surface); border: 1px solid var(--vd-line); border-radius: var(--vd-component-card-radius); box-shadow: var(--vd-shadow-xs); min-width: 0; } .vcs-summary-grid article { display: grid; gap: 4px; padding: 17px 18px; } .vcs-summary-grid span, .vcs-panel-header span { color: var(--vd-ink-muted); font-size: .76rem; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; } .vcs-summary-grid strong { font-size: 1.65rem; line-height: 1.15; } .vcs-summary-grid small { color: var(--vd-ink-muted); line-height: 1.35; } .vcs-layout { align-items: start; display: grid; gap: 18px; grid-template-columns: minmax(0, 1.65fr) minmax(300px, .72fr); } .vcs-main-column, .vcs-side-column { display: grid; gap: 18px; width: 100%; } .vcs-panel { overflow: hidden; } .vcs-panel-header { align-items: center; border-bottom: 1px solid var(--vd-line); display: flex; gap: 14px; justify-content: space-between; padding: 16px 18px; } .vcs-panel-header > div { display: grid; gap: 3px; } .vcs-panel-header strong { font-size: 1rem; } .vcs-panel-header .vcs-count { font-size: .82rem; letter-spacing: 0; text-transform: none; white-space: nowrap; } .vcs-filters { background: var(--vd-surface-muted); border-bottom: 1px solid var(--vd-line); display: grid; gap: 10px; grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(125px, .7fr)); padding: 14px 16px; } .vcs-filters label, .vcs-form label, .vcs-editor-form label { display: grid; gap: 6px; min-width: 0; } .vcs-filters label > span, .vcs-form label > span, .vcs-editor-form label > span { color: var(--vd-ink-muted); font-size: .74rem; font-weight: 700; } .vcs-filters input, .vcs-filters select, .vcs-form input, .vcs-form select, .vcs-editor-form input, .vcs-editor-form select, .vcs-editor-form textarea { background: var(--vd-input-bg); border: 1px solid var(--vd-line); border-radius: var(--vd-component-input-radius); color: var(--vd-ink); font: inherit; min-height: var(--vd-component-input-height); min-width: 0; padding: 8px 10px; width: 100%; } .vcs-editor-form textarea { resize: vertical; } .vcs-table-wrap { min-width: 0; overflow: auto; } .vcs-table { border-collapse: collapse; min-width: 860px; table-layout: fixed; width: 100%; } .vcs-col-mapping { width: 30%; } .vcs-col-pattern { width: 25%; } .vcs-col-quality { width: 14%; } .vcs-col-usage { width: 12%; } .vcs-col-status { width: 10%; } .vcs-col-actions { width: 9%; } .vcs-table th { background: var(--vd-surface-muted); color: var(--vd-ink-muted); font-size: .72rem; letter-spacing: .04em; padding: 11px 14px; text-align: left; text-transform: uppercase; } .vcs-table td { border-top: 1px solid var(--vd-line); padding: 13px 14px; vertical-align: top; } .vcs-table tr:hover td { background: color-mix(in srgb, var(--vd-brand) 4%, var(--vd-surface)); } .vcs-mapping-title { display: grid; gap: 4px; min-width: 190px; } .vcs-mapping-title strong { font-size: .92rem; } .vcs-mapping-title small { color: var(--vd-ink-muted); overflow-wrap: anywhere; } .vcs-pattern { background: var(--vd-surface-muted); border-radius: 8px; display: inline-block; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .78rem; max-width: 100%; overflow-wrap: anywhere; padding: 5px 8px; } .vcs-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; } .vcs-badge { align-items: center; background: var(--vd-surface-muted); border-radius: 999px; color: var(--vd-ink-muted); display: inline-flex; font-size: .68rem; font-weight: 700; min-height: 22px; max-width: 100%; overflow-wrap: anywhere; padding: 2px 7px; } .vcs-badge.is-good { background: color-mix(in srgb, var(--vd-success) 12%, transparent); color: var(--vd-success); } .vcs-badge.is-conflict { background: color-mix(in srgb, var(--vd-danger) 11%, transparent); color: var(--vd-danger); } .vcs-table tr[data-audience-conflict="true"] td { background: color-mix(in srgb, var(--vd-danger) 3%, var(--vd-surface)); } .vcs-badge.is-off { background: color-mix(in srgb, var(--vd-danger) 10%, transparent); color: var(--vd-danger); } .vcs-score { display: grid; gap: 3px; } .vcs-score strong { font-size: .9rem; } .vcs-score small { color: var(--vd-ink-muted); } .vcs-row-actions { display: flex; gap: 6px; justify-content: flex-end; } .vcs-icon-btn { align-items: center; background: var(--vd-surface); border: 1px solid var(--vd-line); border-radius: 9px; color: var(--vd-ink-secondary); cursor: pointer; display: inline-flex; gap: 7px; justify-content: center; min-height: 40px; min-width: 40px; padding: 6px 9px; } .vcs-icon-btn:hover { border-color: var(--vd-brand); color: var(--vd-brand); } .vcs-action-symbol { font-size: 1rem; line-height: 1; } .vcs-action-label { display: none; font-size: .78rem; font-weight: 700; } .vcs-empty { display: grid; gap: 5px; padding: 44px 20px; place-items: center; text-align: center; } .vcs-empty span { color: var(--vd-ink-muted); } .vcs-form { display: grid; gap: 12px; padding: 16px; } .vcs-form .primary-btn { min-height: var(--vd-component-input-height); } .vcs-test-results { padding: 0 16px 18px; } .vcs-test-results > p { color: var(--vd-ink-muted); margin: 0; } .vcs-test-hit { border: 1px solid var(--vd-line); border-radius: 11px; display: grid; gap: 5px; margin-top: 9px; min-width: 0; padding: 11px 12px; } .vcs-test-hit.is-best { background: color-mix(in srgb, var(--vd-success) 5%, var(--vd-surface)); border-color: color-mix(in srgb, var(--vd-success) 40%, var(--vd-line)); } .vcs-test-hit header { display: flex; gap: 10px; justify-content: space-between; } .vcs-test-hit p { color: var(--vd-ink-muted); font-size: .8rem; margin: 0; } .vcs-contract-panel ol { margin: 0; padding: 16px 18px 8px 38px; } .vcs-contract-panel li { padding: 4px 0; } .vcs-contract-panel > p { color: var(--vd-ink-muted); font-size: .84rem; margin: 0; padding: 8px 18px 18px; } .vcs-events { display: grid; } .vcs-event { border-top: 1px solid var(--vd-line); display: grid; gap: 12px; grid-template-columns: 132px minmax(0, 1fr); padding: 12px 18px; } .vcs-event:first-child { border-top: 0; } .vcs-event time { color: var(--vd-ink-muted); font-size: .75rem; } .vcs-event strong { font-size: .84rem; } .vcs-event span { color: var(--vd-ink-muted); font-size: .78rem; overflow-wrap: anywhere; } .vcs-editor-overlay { backdrop-filter: blur(4px); background: color-mix(in srgb, var(--vd-ink) 56%, transparent); display: grid; inset: 0; padding: 24px; place-items: center; position: fixed; z-index: 1200; } .vcs-editor { background: var(--vd-surface); border-radius: 18px; box-shadow: var(--vd-shadow-float); display: grid; grid-template-rows: auto minmax(0, 1fr); max-height: min(880px, calc(100dvh - 48px)); overflow: hidden; width: min(760px, 100%); } .vcs-editor > header { align-items: flex-start; border-bottom: 1px solid var(--vd-line); display: flex; gap: 16px; justify-content: space-between; padding: 20px 22px; } .vcs-editor h3 { font-size: 1.35rem; margin: 3px 0 0; } .vcs-editor .modal-close { flex: 0 0 auto; min-height: var(--vd-component-input-height); min-width: 42px; } .vcs-editor-form { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 0; } .vcs-form-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: auto; overscroll-behavior: contain; padding: 20px 22px; } .vcs-span-2 { grid-column: 1 / -1; } .vcs-editor-form .vcs-check { align-items: center; display: flex; gap: 9px; grid-column: 1 / -1; } .vcs-editor-form .vcs-check input { min-height: auto; width: auto; } .vcs-editor-error { background: color-mix(in srgb, var(--vd-danger) 9%, transparent); border-radius: var(--vd-component-input-radius); color: var(--vd-danger); margin: 0 22px 14px; padding: 10px 12px; } .vcs-editor-form footer { background: var(--vd-surface); border-top: 1px solid var(--vd-line); display: flex; flex: 0 0 auto; gap: 10px; justify-content: flex-end; margin: 0; padding: 16px 22px; } .vcs-editor-form footer .vd-button, .vcs-editor-form footer .primary-btn { min-height: var(--vd-component-input-height); } .vcs-icon-btn:focus-visible, .vcs-header-actions button:focus-visible, .vcs-panel-header button:focus-visible, .vcs-editor button:focus-visible, .vcs-filters input:focus-visible, .vcs-filters select:focus-visible, .vcs-form input:focus-visible, .vcs-form select:focus-visible, .vcs-editor-form input:focus-visible, .vcs-editor-form select:focus-visible, .vcs-editor-form textarea:focus-visible { outline: 3px solid var(--vd-focus); outline-offset: 2px; } @container vcs-workspace (max-width: 1180px) { .vcs-layout { grid-template-columns: 1fr; } .vcs-side-column { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vcs-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vcs-search { grid-column: span 2; } } @container vcs-workspace (max-width: 860px) { .vcs-page-header { display: grid; } .vcs-header-actions { justify-content: flex-start; } .vcs-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vcs-side-column { grid-template-columns: 1fr; } .vcs-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container vcs-workspace (max-width: 800px) { .vcs-filters { grid-template-columns: 1fr; } .vcs-search { grid-column: auto; } .vcs-table-wrap { overflow: visible; padding: 10px; } .vcs-table { border-collapse: separate; min-width: 0; } .vcs-table thead { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } .vcs-table tbody { display: grid; gap: 10px; } .vcs-table tr { background: var(--vd-surface-raised); border: 1px solid var(--vd-line); border-radius: 13px; display: grid; overflow: hidden; } .vcs-table tr:hover td { background: transparent; } .vcs-table td { align-items: start; border: 0; border-top: 1px solid var(--vd-line); display: grid; gap: 12px; grid-template-columns: minmax(92px, .36fr) minmax(0, 1fr); min-width: 0; padding: 10px 12px; } .vcs-table td:first-child { border-top: 0; } .vcs-table td::before { color: var(--vd-ink-muted); content: attr(data-vcs-label); font-size: .68rem; font-weight: 760; letter-spacing: .045em; padding-top: 3px; text-transform: uppercase; } .vcs-table .vcs-actions-cell { display: block; } .vcs-table .vcs-actions-cell::before { display: none; } .vcs-mapping-title { min-width: 0; } .vcs-row-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; } .vcs-icon-btn { min-height: var(--vd-component-touch-target); width: 100%; } .vcs-action-label { display: inline; } .vcs-event { gap: 3px; grid-template-columns: 1fr; } } @container vcs-workspace (max-width: 520px) { #category-studio.vcs-workspace { padding-inline: 12px; } .vcs-summary-grid { grid-template-columns: 1fr; } .vcs-header-actions { display: grid; grid-template-columns: 1fr; width: 100%; } .vcs-header-actions .vd-button, .vcs-header-actions .primary-btn { justify-content: center; width: 100%; } .vcs-panel-header { align-items: flex-start; flex-direction: column; } .vcs-panel-header .vcs-count, .vcs-panel-header .vd-button { width: 100%; } .vcs-table td { gap: 5px; grid-template-columns: 1fr; } .vcs-table td::before { padding-top: 0; } .vcs-test-hit header { align-items: flex-start; flex-direction: column; } .vcs-row-actions { grid-template-columns: 1fr; } } @media (max-width: 760px) { .vcs-editor-overlay { padding: 0; place-items: stretch; } .vcs-editor { border-radius: 0; height: 100dvh; max-height: 100dvh; width: 100%; } .vcs-editor > header { padding: max(14px, env(safe-area-inset-top)) 16px 14px; } .vcs-form-grid { grid-template-columns: 1fr; padding: 16px; } .vcs-span-2, .vcs-editor-form .vcs-check { grid-column: auto; } .vcs-editor-error { margin: 0 16px 12px; } .vcs-editor-form footer { padding: 12px 16px max(12px, env(safe-area-inset-bottom)); } } @media (max-width: 460px) { .vcs-editor-form footer { display: grid; grid-template-columns: 1fr; } .vcs-editor-form footer .vd-button, .vcs-editor-form footer .primary-btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { .vcs-editor, .vcs-icon-btn { scroll-behavior: auto; transition: none; } } .publish-card-status-stack { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 92px; } .publish-readiness-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 5px 9px; border: 1px solid var(--vd-line); border-radius: 999px; background: var(--vd-surface); color: var(--vd-ink-secondary); font-size: 11px; font-weight: 750; white-space: nowrap; } .publish-readiness-badge b { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: color-mix(in srgb, currentColor 12%, transparent); font-size: 10px; } .publish-readiness-badge small { color: inherit; font-size: 10px; font-weight: 650; opacity: .72; } .publish-readiness-badge.status-ready { color: var(--vd-success); border-color: color-mix(in srgb, var(--vd-success) 25%, var(--vd-line)); } .publish-readiness-badge.status-review { color: var(--vd-warning); border-color: color-mix(in srgb, var(--vd-warning) 30%, var(--vd-line)); } .publish-readiness-badge.status-blocked { color: var(--vd-danger); border-color: color-mix(in srgb, var(--vd-danger) 28%, var(--vd-line)); } .publish-list-card.readiness-blocked { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--vd-danger) 74%, transparent); } .publish-list-card.readiness-review { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--vd-warning) 70%, transparent); } .publish-list-card.readiness-ready { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--vd-success) 65%, transparent); } .publishing-readiness-card { overflow: hidden; border: 1px solid var(--vd-line); border-radius: 18px; background: var(--vd-surface); box-shadow: var(--vd-shadow-md); } .publishing-readiness-card.status-ready { border-color: color-mix(in srgb, var(--vd-success) 28%, var(--vd-line)); } .publishing-readiness-card.status-review { border-color: color-mix(in srgb, var(--vd-warning) 32%, var(--vd-line)); } .publishing-readiness-card.status-blocked { border-color: color-mix(in srgb, var(--vd-danger) 30%, var(--vd-line)); } .publishing-readiness-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 15px; align-items: center; padding: 18px; background: linear-gradient(145deg, color-mix(in srgb, var(--vd-surface-raised) 88%, transparent), var(--vd-surface)); border-bottom: 1px solid var(--vd-line); } .publishing-readiness-score { display: grid; place-items: center; width: 66px; height: 66px; border: 6px solid color-mix(in srgb, currentColor 18%, transparent); border-radius: 50%; color: var(--vd-ink); font-size: 18px; font-weight: 850; letter-spacing: -.03em; } .status-ready .publishing-readiness-score { color: var(--vd-success); } .status-review .publishing-readiness-score { color: var(--vd-warning); } .status-blocked .publishing-readiness-score { color: var(--vd-danger); } .publishing-readiness-hero small, .publishing-readiness-metrics span, .publishing-readiness-card footer span { color: var(--vd-ink-muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .publishing-readiness-hero strong { display: block; margin-top: 3px; color: var(--vd-ink); font-size: 18px; line-height: 1.2; } .publishing-readiness-hero p { margin: 5px 0 0; color: var(--vd-ink-secondary); font-size: 12px; line-height: 1.5; } .publishing-readiness-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--vd-line); border-bottom: 1px solid var(--vd-line); } .publishing-readiness-metrics article { min-width: 0; padding: 14px; background: var(--vd-surface); } .publishing-readiness-metrics strong { display: block; margin-top: 4px; color: var(--vd-ink); font-size: 14px; } .publishing-readiness-metrics small { display: block; margin-top: 3px; overflow: hidden; color: var(--vd-ink-secondary); font-size: 10px; line-height: 1.35; text-overflow: ellipsis; } .publishing-readiness-issues { display: grid; gap: 8px; padding: 14px; } .publishing-readiness-issue { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 11px; border: 1px solid var(--vd-line); border-radius: 12px; background: var(--vd-surface-raised); color: inherit; text-align: left; cursor: pointer; transition: transform .16s ease, border-color .16s ease, background .16s ease; } .publishing-readiness-issue:hover { transform: translateY(-1px); background: var(--vd-surface); } .publishing-readiness-issue > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; font-weight: 850; } .publishing-readiness-issue.is-blocked > span { background: color-mix(in srgb, var(--vd-danger) 13%, transparent); color: var(--vd-danger); } .publishing-readiness-issue.is-warning > span { background: color-mix(in srgb, var(--vd-warning) 14%, transparent); color: var(--vd-warning); } .publishing-readiness-issue strong { display: block; color: var(--vd-ink); font-size: 12px; } .publishing-readiness-issue small { display: block; margin-top: 2px; color: var(--vd-ink-secondary); font-size: 10px; line-height: 1.4; } .publishing-readiness-issue b { color: var(--vd-brand); font-size: 10px; } .publishing-readiness-clear { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 11px; align-items: center; padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--vd-success) 8%, var(--vd-surface)); } .publishing-readiness-clear > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--vd-success) 16%, transparent); color: var(--vd-success); font-weight: 900; } .publishing-readiness-clear strong { display: block; color: var(--vd-ink); font-size: 12px; } .publishing-readiness-clear small { display: block; margin-top: 2px; color: var(--vd-ink-secondary); font-size: 10px; line-height: 1.4; } .publishing-readiness-card footer { display: flex; justify-content: space-between; gap: 14px; padding: 11px 14px; border-top: 1px solid var(--vd-line); background: var(--vd-surface-raised); } .publishing-readiness-card footer small { color: var(--vd-ink-secondary); font-size: 10px; text-align: right; } .publishing-preflight-total { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 9px; border-radius: 999px; background: var(--vd-surface-raised); color: var(--vd-ink); font-size: 12px; font-weight: 800; } .publishing-readiness-rail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } .publishing-readiness-rail-grid article { min-width: 0; padding: 10px 7px; border: 1px solid var(--vd-line); border-radius: 11px; background: var(--vd-surface-raised); text-align: center; } .publishing-readiness-rail-grid strong { display: block; font-size: 18px; line-height: 1; } .publishing-readiness-rail-grid span { display: block; margin-top: 5px; color: var(--vd-ink); font-size: 10px; font-weight: 800; } .publishing-readiness-rail-grid small { display: block; margin-top: 2px; color: var(--vd-ink-muted); font-size: 8px; } .publishing-readiness-rail-grid .is-ready strong { color: var(--vd-success); } .publishing-readiness-rail-grid .is-review strong { color: var(--vd-warning); } .publishing-readiness-rail-grid .is-blocked strong { color: var(--vd-danger); } .publishing-readiness-rail-note { margin: 10px 0 0; color: var(--vd-ink-secondary); font-size: 10px; line-height: 1.45; } @media (max-width: 1180px) { .publish-card-status-stack { min-width: 82px; } .publishing-readiness-metrics { grid-template-columns: 1fr; } .publishing-readiness-metrics article { display: grid; grid-template-columns: minmax(90px, .7fr) 1fr; gap: 4px 10px; align-items: center; } .publishing-readiness-metrics article small { grid-column: 2; } } @media (max-width: 760px) { .publish-card-status-stack { align-items: flex-start; min-width: 0; } .publishing-readiness-hero { grid-template-columns: 54px minmax(0, 1fr); padding: 14px; } .publishing-readiness-score { width: 54px; height: 54px; border-width: 5px; font-size: 15px; } .publishing-readiness-metrics article { grid-template-columns: 1fr; } .publishing-readiness-metrics article small { grid-column: auto; } .publishing-readiness-issue { grid-template-columns: 26px minmax(0, 1fr); } .publishing-readiness-issue b { display: none; } .publishing-readiness-card footer { flex-direction: column; } .publishing-readiness-card footer small { text-align: left; } } .publishing-readiness-metrics.is-ap4433 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .article-marketplace-readiness-card .article-card-header.split { align-items: flex-start; display: flex; gap: 12px; justify-content: space-between; } .article-marketplace-readiness-card .article-card-header p { margin: 5px 0 0; color: var(--vd-ink-secondary); font-size: 11px; line-height: 1.45; } .article-marketplace-readiness-grid { display: grid; gap: 8px; margin-top: 12px; } .article-marketplace-readiness-loading { padding: 14px; border: 1px solid var(--vd-line); border-radius: var(--vd-radius-md); background: var(--vd-surface-raised); color: var(--vd-ink-secondary); font-size: 11px; } .article-marketplace-readiness-item { border: 1px solid var(--vd-line); border-radius: var(--vd-radius-md); background: var(--vd-surface-raised); overflow: hidden; } .article-marketplace-readiness-item.is-active { border-color: color-mix(in srgb, var(--vd-brand) 38%, var(--vd-line)); } .article-marketplace-readiness-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 12px; } .article-marketplace-readiness-summary > div:first-child { min-width: 0; } .article-marketplace-readiness-summary strong, .article-marketplace-readiness-summary small { display: block; } .article-marketplace-readiness-summary strong { color: var(--vd-ink); font-size: 12px; } .article-marketplace-readiness-summary small { margin-top: 2px; color: var(--vd-ink-secondary); font-size: 9px; line-height: 1.35; } .article-marketplace-readiness-status { display: inline-flex; align-items: center; gap: 5px; min-height: 25px; padding: 4px 8px; border: 1px solid var(--vd-line); border-radius: 999px; font-size: 9px; font-weight: 800; white-space: nowrap; } .article-marketplace-readiness-status.status-ready { color: var(--vd-success); border-color: color-mix(in srgb, var(--vd-success) 28%, var(--vd-line)); } .article-marketplace-readiness-status.status-review { color: var(--vd-warning); border-color: color-mix(in srgb, var(--vd-warning) 30%, var(--vd-line)); } .article-marketplace-readiness-status.status-blocked { color: var(--vd-danger); border-color: color-mix(in srgb, var(--vd-danger) 28%, var(--vd-line)); } .article-marketplace-readiness-status.status-unknown { color: var(--vd-ink-muted); } .article-marketplace-readiness-details { border-top: 1px solid var(--vd-line); padding: 9px 12px 11px; } .article-marketplace-readiness-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } .article-marketplace-readiness-facts span { display: block; color: var(--vd-ink-muted); font-size: 8px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; } .article-marketplace-readiness-facts strong { display: block; margin-top: 2px; color: var(--vd-ink); font-size: 10px; } .article-marketplace-readiness-issue { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--vd-line); color: var(--vd-ink-secondary); font-size: 9px; line-height: 1.4; } .article-marketplace-readiness-note { margin: 10px 0 0; color: var(--vd-ink-muted); font-size: 9px; line-height: 1.45; } @media (max-width: 1180px) { .publishing-readiness-metrics.is-ap4433 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .article-marketplace-readiness-card .article-card-header.split { flex-direction: column; } .article-marketplace-readiness-facts { grid-template-columns: 1fr; } .publishing-readiness-metrics.is-ap4433 { grid-template-columns: 1fr; } } #publish .publish-filter-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 760px) { #publish .publish-filter-row { grid-template-columns: 1fr; } } .publishing-lifecycle-matrix { background: var(--vd-surface-raised); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-md); display: grid; gap: var(--vd-space-3); padding: var(--vd-space-3); } .publishing-lifecycle-matrix > header { align-items: flex-start; display: flex; gap: var(--vd-space-3); justify-content: space-between; } .publishing-lifecycle-matrix h4 { color: var(--vd-ink); margin: 2px 0 0; } .publishing-lifecycle-matrix > header small { color: var(--vd-ink-muted); font-size: 9px; text-align: right; } .publishing-lifecycle-grid { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .publishing-lifecycle-item { background: var(--vd-surface); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-sm); display: grid; gap: 7px; min-width: 0; padding: 10px; } .publishing-lifecycle-item.is-success { border-color: color-mix(in srgb, var(--vd-success) 28%, var(--vd-line)); } .publishing-lifecycle-item.is-warning { border-color: color-mix(in srgb, var(--vd-warning) 32%, var(--vd-line)); } .publishing-lifecycle-item.is-danger { border-color: color-mix(in srgb, var(--vd-danger) 30%, var(--vd-line)); } .publishing-lifecycle-item.is-info { border-color: color-mix(in srgb, var(--vd-brand) 28%, var(--vd-line)); } .publishing-lifecycle-head, .publishing-lifecycle-state { align-items: center; display: flex; gap: 8px; justify-content: space-between; min-width: 0; } .publishing-lifecycle-head strong { color: var(--vd-ink); font-size: 10px; } .publishing-lifecycle-head span { color: var(--vd-ink-muted); font-size: 8px; } .publishing-lifecycle-state b { color: var(--vd-ink); font-size: 11px; } .publishing-lifecycle-state small { color: var(--vd-ink-muted); font-size: 8px; } .publishing-lifecycle-item p { color: var(--vd-ink-muted); font-size: 8.5px; line-height: 1.4; margin: 0; min-height: 24px; } .publishing-lifecycle-item .vd-button { justify-self: stretch; } @media (max-width: 760px) { .publishing-lifecycle-grid { grid-template-columns: 1fr; } .publishing-lifecycle-matrix > header { align-items: flex-start; flex-direction: column; } .publishing-lifecycle-matrix > header small { text-align: left; } } .publishing-operations-center, .publishing-diagnostics-center { display: grid; gap: var(--vd-space-4); min-width: 0; } .publishing-operations-overview { background: linear-gradient(145deg, var(--vd-surface-raised), var(--vd-surface)); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-lg); box-shadow: var(--vd-shadow-sm); padding: var(--vd-space-4); } .publishing-operations-overview > header { align-items: flex-start; display: flex; gap: 16px; justify-content: space-between; margin-bottom: 12px; } .publishing-operations-overview h4 { color: var(--vd-ink); font-size: 17px; margin: 3px 0 0; } .publishing-health-state { background: var(--vd-success-soft); border: 1px solid color-mix(in srgb, var(--vd-success) 30%, var(--vd-line)); border-radius: 999px; color: var(--vd-success); font-size: 10px; font-weight: 750; padding: 6px 10px; } .publishing-health-state.is-active { background: var(--vd-warning-soft); border-color: color-mix(in srgb, var(--vd-warning) 32%, var(--vd-line)); color: var(--vd-warning); } .publishing-health-state.is-attention { background: var(--vd-danger-soft); border-color: color-mix(in srgb, var(--vd-danger) 32%, var(--vd-line)); color: var(--vd-danger); } .publishing-operations-metrics { display: grid; gap: 9px; grid-template-columns: repeat(5, minmax(0, 1fr)); } .publishing-operation-metric { background: var(--vd-surface); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-md); color: var(--vd-ink-secondary); cursor: pointer; display: grid; min-height: 92px; padding: 12px; text-align: left; transition: border-color var(--vd-motion-fast), box-shadow var(--vd-motion-fast), transform var(--vd-motion-fast); } .publishing-operation-metric:hover, .publishing-operation-metric:focus-visible { border-color: color-mix(in srgb, var(--vd-brand) 45%, var(--vd-line)); box-shadow: var(--vd-shadow-sm); transform: translateY(-1px); } .publishing-operation-metric strong { color: var(--vd-ink); font-size: 24px; line-height: 1; } .publishing-operation-metric span { color: var(--vd-ink); font-size: 11px; font-weight: 750; margin-top: 8px; } .publishing-operation-metric small { color: var(--vd-ink-muted); font-size: 8.5px; line-height: 1.35; margin-top: 3px; } .publishing-operation-metric.is-attention { background: color-mix(in srgb, var(--vd-danger-soft) 55%, var(--vd-surface)); border-color: color-mix(in srgb, var(--vd-danger) 25%, var(--vd-line)); } .publishing-operation-metric.is-processing, .publishing-operation-metric.is-actionable { background: color-mix(in srgb, var(--vd-brand-soft) 42%, var(--vd-surface)); } .publishing-operations-signals { border-top: 1px solid var(--vd-line); color: var(--vd-ink-muted); display: flex; flex-wrap: wrap; font-size: 9px; gap: 16px; margin-top: 12px; padding-top: 10px; } .publishing-operations-signals b { color: var(--vd-ink); margin-right: 3px; } .publishing-platform-health { display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); } .publishing-platform-health article { align-items: center; background: var(--vd-surface-raised); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-md); display: grid; gap: 9px; grid-template-columns: auto minmax(0, 1fr) auto; padding: 10px 11px; } .publishing-platform-dot { background: var(--vd-success); border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb, var(--vd-success) 13%, transparent); height: 8px; width: 8px; } .publishing-platform-health article.is-active .publishing-platform-dot { background: var(--vd-warning); } .publishing-platform-health article.is-attention .publishing-platform-dot { background: var(--vd-danger); } .publishing-platform-health strong, .publishing-platform-health small { display: block; } .publishing-platform-health strong { color: var(--vd-ink); font-size: 10px; } .publishing-platform-health small { color: var(--vd-ink-muted); font-size: 8px; margin-top: 2px; } .publishing-platform-numbers { display: grid; gap: 0 5px; grid-template-columns: auto auto; text-align: right; } .publishing-platform-numbers b { color: var(--vd-ink); font-size: 10px; } .publishing-platform-numbers span { color: var(--vd-ink-muted); font-size: 7.5px; } .publishing-operations-layout { align-items: start; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) 300px; min-width: 0; } .publishing-queue-surface, .publishing-job-inspector { background: var(--vd-surface-raised); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-lg); min-width: 0; } .publishing-queue-surface { overflow: hidden; } .publishing-batch-menu { position: relative; } .publishing-batch-menu-panel { min-width: 220px; padding: 6px; right: 0; top: calc(100% + 6px); } .publishing-batch-menu-panel button { background: transparent; border: 0; border-radius: var(--vd-radius-sm); color: var(--vd-ink-secondary); cursor: pointer; display: block; font: inherit; padding: 8px 9px; text-align: left; width: 100%; } .publishing-batch-menu-panel button:hover, .publishing-batch-menu-panel button:focus-visible { background: var(--vd-surface-muted); color: var(--vd-ink); } .publishing-batch-menu-panel button.is-danger { color: var(--vd-danger); } .publishing-job-list .publishing-job-row { grid-template-columns: auto minmax(210px, 1.25fr) minmax(90px, .55fr) minmax(105px, .65fr) minmax(90px, .55fr) minmax(180px, 1fr) auto; position: relative; } .publishing-job-row::before { background: var(--vd-line-strong); bottom: 8px; content: ''; left: 0; position: absolute; top: 8px; width: 3px; } .publishing-job-row.severity-danger::before { background: var(--vd-danger); } .publishing-job-row.severity-warning::before { background: var(--vd-warning); } .publishing-job-row.severity-success::before { background: var(--vd-success); } .publishing-job-row.severity-info::before { background: var(--vd-brand); } .publishing-job-row.is-selected { background: color-mix(in srgb, var(--vd-brand-soft) 35%, var(--vd-surface-raised)); } .publishing-job-open, .publish-operation-diagnostic { background: transparent; border: 0; color: inherit; cursor: pointer; font: inherit; min-width: 0; padding: 0; text-align: left; } .publishing-job-open { align-items: center; display: flex; gap: 9px; } .publishing-job-open > span:last-child { min-width: 0; } .publishing-job-open strong, .publishing-job-open small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .publishing-job-open strong { color: var(--vd-ink); } .publishing-job-open small { color: var(--vd-ink-muted); } .publish-operation-diagnostic { border-left: 1px solid var(--vd-line); padding-left: 10px; } .publish-operation-diagnostic strong, .publish-operation-diagnostic span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .publish-operation-diagnostic strong { color: var(--vd-ink); font-size: 9px; } .publish-operation-diagnostic span { color: var(--vd-ink-muted); font-size: 8px; margin-top: 2px; } .publish-operation-diagnostic.severity-danger strong { color: var(--vd-danger); } .publish-operation-diagnostic.severity-warning strong { color: var(--vd-warning); } .publish-operation-diagnostic.severity-success strong { color: var(--vd-success); } .publishing-job-inspector { max-height: calc(100vh - var(--vd-anchor-offset)); overflow: auto; padding: 14px; position: sticky; top: var(--vd-anchor-offset); } .publishing-job-inspector.is-empty { align-items: center; color: var(--vd-ink-muted); display: flex; justify-content: center; min-height: 330px; text-align: center; } .publishing-inspector-orb { align-items: center; background: var(--vd-brand-soft); border-radius: 50%; color: var(--vd-brand); display: inline-flex; font-size: 25px; height: 54px; justify-content: center; margin-bottom: 10px; width: 54px; } .publishing-job-inspector.is-empty h4 { color: var(--vd-ink); margin: 0 0 5px; } .publishing-job-inspector.is-empty p { font-size: 9px; line-height: 1.5; margin: 0 auto; max-width: 230px; } .publishing-job-inspector > header { align-items: flex-start; display: flex; gap: 8px; justify-content: space-between; } .publishing-job-inspector > header h4 { color: var(--vd-ink); font-size: 14px; margin: 3px 0; } .publishing-job-inspector > header p { color: var(--vd-ink-muted); font-size: 8.5px; margin: 0; } .publishing-diagnostic-hero { align-items: flex-start; background: var(--vd-surface-muted); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-md); display: flex; gap: 9px; margin-top: 12px; padding: 11px; } .publishing-diagnostic-hero > span { align-items: center; background: var(--vd-surface-raised); border-radius: 50%; display: inline-flex; flex: 0 0 auto; font-size: 12px; height: 26px; justify-content: center; width: 26px; } .publishing-diagnostic-hero strong { color: var(--vd-ink); display: block; font-size: 10px; } .publishing-diagnostic-hero p { color: var(--vd-ink-secondary); font-size: 8.5px; line-height: 1.45; margin: 4px 0 0; } .publishing-diagnostic-hero.severity-danger { background: color-mix(in srgb, var(--vd-danger-soft) 55%, var(--vd-surface)); border-color: color-mix(in srgb, var(--vd-danger) 30%, var(--vd-line)); } .publishing-diagnostic-hero.severity-warning { background: color-mix(in srgb, var(--vd-warning-soft) 55%, var(--vd-surface)); border-color: color-mix(in srgb, var(--vd-warning) 30%, var(--vd-line)); } .publishing-diagnostic-hero.severity-success { background: color-mix(in srgb, var(--vd-success-soft) 55%, var(--vd-surface)); border-color: color-mix(in srgb, var(--vd-success) 30%, var(--vd-line)); } .publishing-job-facts { display: grid; gap: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 12px 0 0; } .publishing-job-facts > div { border-bottom: 1px solid var(--vd-line); min-width: 0; padding: 8px 4px; } .publishing-job-facts > div.wide { grid-column: 1 / -1; } .publishing-job-facts dt { color: var(--vd-ink-muted); font-size: 7.5px; margin-bottom: 2px; } .publishing-job-facts dd { color: var(--vd-ink); font-size: 9px; margin: 0; overflow-wrap: anywhere; } .publishing-job-facts code { background: var(--vd-surface-muted); border-radius: 4px; padding: 2px 4px; } .publishing-inspector-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 0; } .publishing-inspector-actions .vd-button { flex: 1 1 auto; justify-content: center; } .publishing-audit-timeline { border-top: 1px solid var(--vd-line); padding-top: 12px; } .publishing-inspector-section-title { align-items: center; display: flex; justify-content: space-between; margin-bottom: 8px; } .publishing-inspector-section-title strong { color: var(--vd-ink); font-size: 10px; } .publishing-inspector-section-title span { color: var(--vd-ink-muted); font-size: 8px; } .publishing-timeline-event { display: grid; gap: 9px; grid-template-columns: auto minmax(0, 1fr); padding: 0 0 12px; position: relative; } .publishing-timeline-event:not(:last-child)::before { background: var(--vd-line); bottom: 0; content: ''; left: 4px; position: absolute; top: 10px; width: 1px; } .publishing-timeline-dot { background: var(--vd-brand); border: 2px solid var(--vd-surface-raised); border-radius: 50%; box-shadow: 0 0 0 1px var(--vd-line); height: 9px; margin-top: 2px; position: relative; width: 9px; z-index: 1; } .publishing-timeline-event.level-error .publishing-timeline-dot { background: var(--vd-danger); } .publishing-timeline-event.level-warning .publishing-timeline-dot { background: var(--vd-warning); } .publishing-timeline-event strong { color: var(--vd-ink); display: block; font-size: 9px; } .publishing-timeline-event small { color: var(--vd-ink-muted); display: block; font-size: 7.5px; margin-top: 2px; } .publishing-timeline-event p { color: var(--vd-ink-secondary); font-size: 7.5px; line-height: 1.4; margin: 4px 0 0; overflow-wrap: anywhere; } .publishing-inspector-empty { color: var(--vd-ink-muted); font-size: 8.5px; } .publishing-event-toolbar { align-items: center; background: var(--vd-surface-raised); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-md); display: grid; gap: 8px; grid-template-columns: minmax(240px, 1fr) minmax(120px, .35fr) minmax(150px, .4fr) auto; padding: 10px; } @media (max-width: 1260px) { .publishing-operations-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } .publishing-platform-health { grid-template-columns: repeat(2, minmax(0, 1fr)); } .publishing-operations-layout { grid-template-columns: minmax(0, 1fr); } .publishing-job-inspector { max-height: none; position: static; } } @media (max-width: 900px) { .publishing-job-list .publishing-job-row { grid-template-columns: auto minmax(0, 1fr) auto; } #publish .publishing-job-row .publish-operation-meta, .publishing-job-row .publish-operation-diagnostic { grid-column: 2 / -1; } .publishing-job-row .publish-operation-actions { grid-column: 2 / -1; justify-content: flex-start; } .publishing-event-toolbar { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .publishing-operations-overview > header { display: grid; } .publishing-operations-metrics, .publishing-platform-health { grid-template-columns: 1fr; } .publishing-operations-signals { display: grid; gap: 6px; } .publishing-event-toolbar { grid-template-columns: 1fr; } #publish .publishing-selection-bar { align-items: stretch; flex-direction: column; } .publishing-batch-menu, .publishing-batch-menu > button { width: 100%; } } .publishing-provider-runtime { background: linear-gradient(145deg, var(--vd-surface-raised), var(--vd-surface)); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-lg); box-shadow: var(--vd-shadow-sm); display: grid; gap: var(--vd-space-3); padding: var(--vd-space-4); } .publishing-provider-runtime > header { align-items: flex-start; display: flex; gap: 16px; justify-content: space-between; } .publishing-provider-runtime h4 { color: var(--vd-ink); font-size: 17px; margin: 3px 0 0; } .publishing-provider-runtime > header > span { background: var(--vd-surface-muted); border: 1px solid var(--vd-line); border-radius: 999px; color: var(--vd-ink-muted); font-size: 9px; font-weight: 700; padding: 6px 10px; } .publishing-provider-runtime .publishing-platform-health { grid-template-columns: repeat(2, minmax(0, 1fr)); } .publishing-platform-health .publishing-provider-card { align-items: stretch; display: grid; gap: 10px; grid-template-columns: 1fr; min-width: 0; padding: 12px; } .publishing-provider-card > header { align-items: center; display: grid; gap: 9px; grid-template-columns: auto minmax(0, 1fr) auto; } .publishing-provider-card > p, .publishing-provider-error { color: var(--vd-ink-muted); font-size: 9px; line-height: 1.45; margin: 0; } .publishing-provider-error { background: var(--vd-danger-soft); border: 1px solid color-mix(in srgb, var(--vd-danger) 25%, var(--vd-line)); border-radius: var(--vd-radius-sm); color: var(--vd-danger); padding: 7px 8px; } .publishing-provider-state { background: var(--vd-success-soft); border: 1px solid color-mix(in srgb, var(--vd-success) 28%, var(--vd-line)); border-radius: 999px; color: var(--vd-success); font-size: 8px; font-weight: 800; padding: 5px 8px; white-space: nowrap; } .publishing-provider-card.is-degraded .publishing-provider-state, .publishing-provider-card.is-open .publishing-provider-state, .publishing-provider-card.is-half_open .publishing-provider-state { background: var(--vd-warning-soft); border-color: color-mix(in srgb, var(--vd-warning) 30%, var(--vd-line)); color: var(--vd-warning); } .publishing-provider-card.is-blocked .publishing-provider-state, .publishing-provider-card.is-paused .publishing-provider-state { background: var(--vd-danger-soft); border-color: color-mix(in srgb, var(--vd-danger) 30%, var(--vd-line)); color: var(--vd-danger); } .publishing-provider-card.is-degraded .publishing-platform-dot, .publishing-provider-card.is-open .publishing-platform-dot, .publishing-provider-card.is-half_open .publishing-platform-dot { background: var(--vd-warning); } .publishing-provider-card.is-blocked .publishing-platform-dot, .publishing-provider-card.is-paused .publishing-platform-dot { background: var(--vd-danger); } .publishing-provider-numbers { display: grid; gap: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .publishing-provider-numbers span { background: var(--vd-surface-muted); border-radius: var(--vd-radius-sm); color: var(--vd-ink-muted); display: grid; font-size: 8px; gap: 2px; padding: 7px 8px; } .publishing-provider-numbers b { color: var(--vd-ink); font-size: 13px; } .publishing-provider-card > footer { align-items: center; border-top: 1px solid var(--vd-line); display: flex; gap: 10px; justify-content: space-between; padding-top: 9px; } .publishing-provider-card > footer small { color: var(--vd-ink-muted); font-size: 8px; margin: 0; } @media (max-width: 840px) { .publishing-provider-runtime .publishing-platform-health { grid-template-columns: 1fr; } } @media (max-width: 520px) { .publishing-provider-runtime > header, .publishing-provider-card > footer { align-items: stretch; display: grid; } .publishing-provider-state { justify-self: start; } .publishing-provider-numbers { grid-template-columns: 1fr; } } .publishing-automation-workspace{display:grid;gap:14px;padding:2px}.publishing-automation-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px;border:1px solid var(--vd-line);border-radius:var(--vd-radius-sm);background:var(--vd-surface-raised)}.publishing-automation-head h3{margin:3px 0 5px;font-size:17px}.publishing-automation-head p{max-width:720px;margin:0;color:var(--vd-ink-muted);font-size:11px;line-height:1.55}.publishing-automation-head-actions{display:flex;gap:8px}.publishing-automation-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.publishing-automation-summary article{display:grid;gap:2px;padding:11px 12px;border:1px solid var(--vd-line);border-radius:var(--vd-radius-xs);background:var(--vd-surface-raised)}.publishing-automation-summary strong{font-size:18px}.publishing-automation-summary span{font-size:9px;color:var(--vd-ink-muted)}.publishing-automation-section{border:1px solid var(--vd-line);border-radius:var(--vd-radius-sm);background:var(--vd-surface-raised);overflow:hidden}.publishing-automation-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--vd-line)}.publishing-automation-section-head h4{margin:2px 0 0;font-size:12px}.publishing-automation-section-head>span{font-size:9px;color:var(--vd-ink-muted)}.publishing-automation-rules{display:grid;gap:0}.publishing-automation-rule{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(220px,.75fr);gap:10px 16px;padding:13px 14px;border-top:1px solid var(--vd-line)}.publishing-automation-rule:first-child{border-top:0}.publishing-automation-rule-toggle{display:flex;align-items:flex-start;gap:9px;min-width:0}.publishing-automation-rule-toggle input{margin-top:2px}.publishing-automation-rule-toggle span{display:grid;gap:3px}.publishing-automation-rule-toggle strong{font-size:11px}.publishing-automation-rule-toggle small{color:var(--vd-ink-muted);font-size:9px;line-height:1.45}.publishing-automation-rule-config{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.publishing-automation-rule-config label{display:grid;gap:4px;font-size:8px;color:var(--vd-ink-muted)}.publishing-automation-rule-config input{width:100%;height:30px;padding:0 8px;border:1px solid var(--vd-line);border-radius:var(--vd-radius-xs);background:var(--vd-surface);color:var(--vd-ink);font:inherit}.publishing-automation-platforms{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:7px}.publishing-automation-platforms label{display:flex;align-items:center;gap:5px;padding:4px 7px;border:1px solid var(--vd-line);border-radius:var(--vd-radius-xs);font-size:8px;color:var(--vd-ink-secondary)}.publishing-automation-proposals{display:grid}.publishing-automation-proposal{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 14px;border-top:1px solid var(--vd-line)}.publishing-automation-proposal:first-child{border-top:0}.publishing-automation-proposal-copy{display:grid;gap:4px;min-width:0}.publishing-automation-proposal-copy>div{display:flex;gap:8px;align-items:center}.publishing-automation-proposal-copy>div span,.publishing-automation-proposal-copy>div b{font-size:8px;color:var(--vd-ink-muted)}.publishing-automation-proposal-copy strong{font-size:11px}.publishing-automation-proposal-copy p{margin:0;color:var(--vd-ink-secondary);font-size:9px;line-height:1.45}.publishing-automation-proposal-copy small{font-size:8px;color:var(--vd-ink-muted)}.publishing-automation-proposal-actions{display:flex;gap:6px}.publishing-automation-proposal.is-danger{box-shadow:inset 3px 0 0 var(--vd-danger)}.publishing-automation-proposal.is-warning{box-shadow:inset 3px 0 0 var(--vd-warning)}.publishing-automation-proposal.is-success{box-shadow:inset 3px 0 0 var(--vd-success)}.publishing-automation-empty{display:grid;gap:4px;padding:20px 14px;text-align:center}.publishing-automation-empty strong{font-size:11px}.publishing-automation-empty span{font-size:9px;color:var(--vd-ink-muted)}.publishing-automation-history{display:grid}.publishing-automation-history>div{display:grid;grid-template-columns:90px minmax(0,1fr) auto;gap:10px;padding:8px 14px;border-top:1px solid var(--vd-line);font-size:8px}.publishing-automation-history>div:first-child{border-top:0}.publishing-automation-history span,.publishing-automation-history small{color:var(--vd-ink-muted)} @container publish-center (max-width:820px){.publishing-automation-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.publishing-automation-rule{grid-template-columns:1fr}.publishing-automation-rule-config{grid-template-columns:repeat(2,minmax(0,1fr))}.publishing-automation-proposal{grid-template-columns:1fr}.publishing-automation-proposal-actions{justify-content:flex-start}} @container publish-center (max-width:560px){.publishing-automation-head{display:grid}.publishing-automation-summary{grid-template-columns:1fr 1fr}.publishing-automation-rule-config{grid-template-columns:1fr}.publishing-automation-platforms{display:grid;grid-template-columns:1fr 1fr}.publishing-automation-history>div{grid-template-columns:1fr;gap:3px}} :root { --vd-theme-manager-preview-height: 210px; } .theme-manager-grid { display:grid; gap:16px; } .theme-choice-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:10px; } .theme-choice { min-height:104px; display:grid; gap:8px; align-content:space-between; padding:12px; border:1px solid var(--vd-line); border-radius:var(--vd-component-card-radius); background:var(--vd-surface-raised); color:var(--vd-ink); text-align:left; cursor:pointer; } .theme-choice:hover { border-color:var(--vd-brand); } .theme-choice[aria-pressed="true"] { border-color:var(--vd-brand); box-shadow:0 0 0 3px var(--vd-focus); } .theme-choice-swatches { display:flex; gap:5px; } .theme-choice-swatches i { --vd-theme-swatch-color:var(--vd-ink-muted); width:22px; height:22px; border-radius:50%; border:1px solid color-mix(in srgb, currentColor 18%, transparent); background:var(--vd-theme-swatch-color); } .theme-manager-toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:end; } .theme-manager-toolbar .setting-group { min-width:170px; flex:1 1 170px; } .theme-editor-layout { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr); gap:14px; } .theme-token-groups { display:grid; gap:12px; max-height:620px; overflow:auto; padding-right:4px; } .theme-token-group { border:1px solid var(--vd-line); border-radius:var(--vd-component-card-radius); overflow:hidden; } .theme-token-group > h4 { margin:0; padding:10px 12px; background:var(--vd-surface-muted); font-size:12px; } .theme-token-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px; padding:12px; } .theme-token-field { display:grid; gap:5px; } .theme-token-field label { font-size:11px; font-weight:700; } .theme-color-control { display:grid; grid-template-columns:42px minmax(0,1fr); gap:7px; } .theme-color-control input[type="color"] { width:42px; height:var(--vd-component-input-height); padding:3px; border:1px solid var(--vd-line); border-radius:var(--vd-component-input-radius); background:var(--vd-surface); } .theme-preview { position:sticky; top:10px; display:grid; gap:12px; align-content:start; } .theme-preview-stage { min-height:var(--vd-theme-manager-preview-height); display:grid; gap:10px; padding:16px; border:1px solid var(--vd-line); border-radius:var(--vd-component-card-radius); background:var(--vd-canvas); color:var(--vd-ink); } .theme-preview-card { padding:12px; border:1px solid var(--vd-line); border-radius:var(--vd-component-card-radius); background:var(--vd-surface-raised); } .theme-preview-actions { display:flex; gap:8px; flex-wrap:wrap; } .theme-contrast-list { display:grid; gap:6px; } .theme-contrast-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:7px 9px; border-radius:var(--vd-radius-sm); background:var(--vd-surface-muted); font-size:11px; } .theme-contrast-row.is-ok strong { color:var(--vd-success); } .theme-contrast-row.is-fail strong { color:var(--vd-danger); } .theme-manager-status { min-height:22px; padding:8px 10px; border-radius:var(--vd-radius-sm); background:var(--vd-surface-muted); color:var(--vd-ink-secondary); font-size:11px; } .theme-profile-list { display:grid; gap:8px; } .theme-profile-row { display:flex; gap:8px; align-items:center; justify-content:space-between; padding:10px; border:1px solid var(--vd-line); border-radius:var(--vd-radius-sm); } .theme-profile-row > div { min-width:0; } .theme-profile-row small { color:var(--vd-ink-muted); } .theme-admin-only.hidden { display:none !important; } @media(max-width:900px){ .theme-editor-layout{grid-template-columns:1fr}.theme-preview{position:static}.theme-token-groups{max-height:none} } .theme-manager-status[data-tone="success"] { color:var(--vd-success); background:var(--vd-success-soft); } .theme-manager-status[data-tone="warning"] { color:var(--vd-warning); background:var(--vd-warning-soft); } .theme-manager-status[data-tone="danger"] { color:var(--vd-danger); background:var(--vd-danger-soft); } .theme-choice > span:last-child { display:grid; gap:2px; } .theme-choice small { color:var(--vd-ink-muted); } .module-manager-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:18px}.module-manager-head h3{margin:2px 0 6px}.module-manager-actions{display:flex;gap:8px;flex-wrap:wrap}.module-manager-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:18px}.module-summary-card,.module-safety-card,.module-card{border:1px solid var(--vd-border-default);background:var(--vd-surface-card);border-radius:var(--vd-card-radius);box-shadow:var(--vd-card-shadow)}.module-summary-card{padding:14px}.module-summary-card span{display:block;color:var(--vd-text-muted);font-size:.78rem}.module-summary-card strong{display:block;margin-top:4px;font-size:1.45rem}.module-safety-card{padding:15px 16px;margin-bottom:18px;display:flex;gap:12px;align-items:flex-start}.module-safety-card.is-warning{border-color:var(--vd-status-warning)}.module-install-card{border:1px dashed var(--vd-border-default);border-radius:var(--vd-card-radius);padding:16px;margin-bottom:18px;background:var(--vd-surface-subtle)}.module-install-row{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.module-install-row label{flex:1;min-width:250px}.module-install-row input[type=file]{display:block;width:100%;margin-top:6px}.module-filter-row{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}.module-filter-row input{min-width:260px;flex:1}.module-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.module-card{padding:16px;display:flex;flex-direction:column;gap:12px}.module-card.is-disabled{opacity:.78}.module-card.is-invalid{border-color:var(--vd-status-danger)}.module-card-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.module-card-title{display:flex;gap:10px;align-items:flex-start}.module-card-title h4{margin:0 0 3px}.module-card-title code{font-size:.72rem;color:var(--vd-text-muted)}.module-state-dot{width:10px;height:10px;border-radius:999px;margin-top:6px;background:var(--vd-text-muted);box-shadow:0 0 0 4px color-mix(in srgb,currentColor 12%,transparent)}.module-state-dot.is-running{background:var(--vd-status-success)}.module-state-dot.is-disabled{background:var(--vd-status-warning)}.module-state-dot.is-failed,.module-state-dot.is-invalid{background:var(--vd-status-danger)}.module-badges{display:flex;gap:6px;flex-wrap:wrap}.module-badge{font-size:.7rem;padding:4px 7px;border-radius:999px;background:var(--vd-surface-subtle);border:1px solid var(--vd-border-default)}.module-description{margin:0;color:var(--vd-text-muted);font-size:.88rem;line-height:1.45}.module-dependencies{font-size:.78rem;color:var(--vd-text-muted)}.module-dependencies strong{color:var(--vd-text-primary)}.module-card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}.module-card-actions button,.module-card-actions a{font-size:.78rem}.module-empty{grid-column:1/-1;padding:30px;text-align:center;color:var(--vd-text-muted)}.module-error{padding:10px;border-radius:10px;background:color-mix(in srgb,var(--vd-status-danger) 10%,transparent);color:var(--vd-status-danger);font-size:.8rem}@media(max-width:1000px){.module-manager-summary{grid-template-columns:repeat(3,minmax(0,1fr))}.module-list{grid-template-columns:1fr}}@media(max-width:650px){.module-manager-head{flex-direction:column}.module-manager-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.module-filter-row input{min-width:100%}.module-install-row{align-items:stretch}.module-install-row label{min-width:100%}} :root { --ux-sidebar-width: 252px; --ux-content-max: 1440px; } .ux-shell-ready .sidebar { width: var(--ux-sidebar-width); } .ux-shell-ready .main-wrapper { margin-left: var(--ux-sidebar-width); } .ux-shell-ready .sidebar-header { padding: 18px 16px 14px; } .ux-shell-ready .sidebar-nav { padding: 10px 8px 16px; } .ux-shell-ready .nav-item { border: 1px solid transparent; border-radius: var(--vd-radius-md); font-size: 13px; min-height: 40px; padding: 9px 11px; } .ux-shell-ready .nav-item svg { height: 18px; opacity: .75; width: 18px; } .ux-shell-ready .nav-item.active { border-color: color-mix(in srgb, var(--vd-brand) 22%, transparent); box-shadow: inset 3px 0 0 var(--vd-brand); } .ux-shell-ready .nav-item:focus-visible, .ux-shell-ready .ux-command-action:focus-visible, .ux-shell-ready .command-search:focus-visible { outline: 3px solid var(--vd-brand-soft); outline-offset: 2px; } .ux-shell-ready main { max-width: var(--ux-content-max); padding: 26px 32px 48px; } .ux-shell-ready .topbar { min-height: 64px; padding: 12px 32px; } .ux-shell-ready .topbar-heading { min-width: 180px; } .ux-shell-ready .topbar-title { font-size: 17px; } .ux-shell-ready .topbar-kicker { display: block; font-size: 11px; margin-top: 2px; } .ux-shell-ready .command-search { max-width: 480px; min-width: 280px; } .ux-shell-ready .tab-content.active > .page-heading, .ux-shell-ready .tab-content.active > .settings-hero { margin-bottom: 20px; } .ux-shell-ready .tab-content.active > .page-heading .eyebrow { display: block; } .ux-command-center { align-items: center; background: linear-gradient(135deg, var(--vd-surface-raised), var(--vd-surface-quiet)); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-xl); display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr) auto; margin-bottom: 22px; padding: 22px 24px; } .ux-command-copy span { color: var(--vd-brand); display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; margin-bottom: 7px; text-transform: uppercase; } .ux-command-copy h3 { font-size: clamp(20px, 2vw, 27px); letter-spacing: -.035em; line-height: 1.15; margin: 0 0 7px; } .ux-command-copy p { color: var(--vd-ink-secondary); line-height: 1.55; margin: 0; max-width: 680px; } .ux-command-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .ux-command-action { align-items: center; background: var(--vd-surface-raised); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-md); color: var(--vd-ink); cursor: pointer; display: inline-flex; font: inherit; font-size: 13px; font-weight: 650; gap: 7px; min-height: 40px; padding: 9px 13px; } .ux-command-action:hover { border-color: var(--vd-brand); color: var(--vd-brand); } .ux-command-action.primary { background: var(--vd-brand); border-color: var(--vd-brand); color: var(--vd-on-accent); } .ux-command-action.primary:hover { background: var(--vd-brand-strong); color: var(--vd-on-accent); } .ux-dashboard-more { border-top: 1px solid var(--vd-line); margin-top: 12px; padding-top: 8px; } .ux-dashboard-more > summary { color: var(--vd-ink-secondary); cursor: pointer; font-size: 12px; font-weight: 700; list-style: none; padding: 8px 2px; } .ux-dashboard-more > summary::-webkit-details-marker { display: none; } .ux-dashboard-more > summary::after { color: var(--vd-ink-muted); content: ' anzeigen'; font-weight: 500; } .ux-dashboard-more[open] > summary::after { content: ' ausblenden'; } .ux-dashboard-more-content { display: grid; gap: 14px; padding-top: 8px; } .ux-shell-ready .dashboard-actions-card { display: none; } .ux-shell-ready .dashboard-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ux-shell-ready .dashboard-card, .ux-shell-ready .work-panel { border-radius: var(--vd-radius-lg); } @media (max-width: 1180px) { .ux-shell-ready .dashboard-layout { grid-template-columns: 1fr; } .ux-shell-ready .dashboard-rail { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .ux-dashboard-more { grid-column: 1 / -1; } } @media (max-width: 900px) { .ux-shell-ready .sidebar { width: min(86vw, 300px); } .ux-shell-ready .main-wrapper { margin-left: 0; } .ux-shell-ready main { padding: 20px 18px 38px; } .ux-shell-ready .topbar { padding: 10px 18px; } .ux-shell-ready .command-search { min-width: 0; } .ux-command-center { grid-template-columns: 1fr; } .ux-command-actions { justify-content: flex-start; } } @media (max-width: 680px) { .ux-shell-ready .topbar-context-icon, .ux-shell-ready .topbar-kicker, .ux-shell-ready .command-search span, .ux-shell-ready .command-search kbd { display: none; } .ux-shell-ready .command-search { justify-content: center; min-width: 40px; padding-inline: 10px; width: 40px; } .ux-shell-ready .dashboard-kpis, .ux-shell-ready .dashboard-rail { grid-template-columns: 1fr; } .ux-command-actions { display: grid; grid-template-columns: 1fr; } .ux-command-action { justify-content: center; width: 100%; } } @media (prefers-reduced-motion: reduce) { .ux-nav-section > summary::after { transition: none; } } #flux-studio.ux-flux-studio-ready { --ux-flux-gap: clamp(14px, 1.6vw, 22px); } #flux-studio.ux-flux-studio-ready .flux-studio-heading { align-items: flex-start; gap: var(--ux-flux-gap); } #flux-studio.ux-flux-studio-ready .flux-studio-engine-actions { flex: 0 0 auto; } .ux-flux-view-navigation { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 var(--ux-flux-gap); padding: 6px; border: 1px solid var(--vd-border); border-radius: var(--vd-radius-lg); background: var(--vd-surface); box-shadow: var(--vd-shadow-sm); } .ux-flux-view-tab { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 13px 15px; border: 1px solid transparent; border-radius: calc(var(--vd-radius-lg) - 5px); background: transparent; color: var(--vd-text); text-align: left; cursor: pointer; transition: background-color .16s ease, border-color .16s ease, transform .16s ease; } .ux-flux-view-tab:hover { background: var(--vd-surface-muted); } .ux-flux-view-tab.is-active { border-color: color-mix(in srgb, var(--vd-accent) 32%, transparent); background: color-mix(in srgb, var(--vd-accent) 10%, var(--vd-surface)); } .ux-flux-view-copy { display: grid; gap: 2px; min-width: 0; } .ux-flux-view-copy strong { font-size: .93rem; } .ux-flux-view-copy small { overflow: hidden; color: var(--vd-text-muted); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; } .ux-flux-view-badge:empty { display: none; } .ux-flux-view-badge { flex: 0 0 auto; min-width: 26px; padding: 4px 8px; border-radius: 999px; background: var(--vd-surface-strong); color: var(--vd-text-muted); font-size: .7rem; font-weight: 750; text-align: center; } .ux-flux-view-badge[data-tone="working"] { background: color-mix(in srgb, var(--vd-warning) 16%, transparent); color: var(--vd-warning); } .ux-flux-view-badge[data-tone="danger"] { background: color-mix(in srgb, var(--vd-danger) 14%, transparent); color: var(--vd-danger); } .ux-flux-workflow { display: grid; grid-template-columns: minmax(240px, .85fr) minmax(480px, 1.8fr) auto; align-items: center; gap: var(--ux-flux-gap); margin-bottom: var(--ux-flux-gap); padding: clamp(16px, 2vw, 24px); border: 1px solid var(--vd-border); border-radius: var(--vd-radius-xl); background: linear-gradient(135deg, color-mix(in srgb, var(--vd-accent) 8%, var(--vd-surface)), var(--vd-surface)); box-shadow: var(--vd-shadow-sm); } .ux-flux-workflow-copy { display: grid; gap: 5px; } .ux-flux-kicker { color: var(--vd-accent); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .ux-flux-workflow-copy h3, .ux-flux-workflow-copy p { margin: 0; } .ux-flux-workflow-copy h3 { font-size: clamp(1rem, 1.4vw, 1.22rem); } .ux-flux-workflow-copy p { color: var(--vd-text-muted); font-size: .82rem; line-height: 1.45; } .ux-flux-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .ux-flux-step { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; min-width: 0; padding: 10px; border: 1px solid var(--vd-border); border-radius: var(--vd-radius-md); background: color-mix(in srgb, var(--vd-surface) 78%, transparent); color: var(--vd-text); text-align: left; cursor: pointer; } .ux-flux-step-index { grid-row: 1 / span 2; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: var(--vd-surface-strong); color: var(--vd-text-muted); font-size: .7rem; font-weight: 800; } .ux-flux-step strong { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; } .ux-flux-step small { display: none; } .ux-flux-step-state { grid-column: 1 / -1; margin-top: 5px; color: var(--vd-text-muted); font-size: .65rem; font-weight: 750; text-transform: uppercase; } .ux-flux-step.is-current { border-color: color-mix(in srgb, var(--vd-accent) 48%, transparent); background: color-mix(in srgb, var(--vd-accent) 11%, var(--vd-surface)); } .ux-flux-step.is-current .ux-flux-step-index { background: var(--vd-accent); color: var(--vd-on-accent); } .ux-flux-step.is-complete:not(.is-current) .ux-flux-step-index { background: color-mix(in srgb, var(--vd-success) 18%, transparent); color: var(--vd-success); } .ux-flux-next { white-space: nowrap; } .ux-flux-system-panel { margin-bottom: var(--ux-flux-gap); border: 1px solid var(--vd-border); border-radius: var(--vd-radius-lg); background: var(--vd-surface); overflow: clip; } .ux-flux-system-panel > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 17px; cursor: pointer; list-style: none; } .ux-flux-system-panel > summary::-webkit-details-marker, .ux-flux-advanced > summary::-webkit-details-marker, .ux-flux-preview-more > summary::-webkit-details-marker { display: none; } .ux-flux-system-summary-copy { display: grid; gap: 2px; } .ux-flux-system-summary-copy small { color: var(--vd-text-muted); font-size: .76rem; } .ux-flux-system-body { display: grid; gap: 14px; padding: 0 17px 17px; border-top: 1px solid var(--vd-border); } .ux-flux-system-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; } .ux-flux-system-body .flux-runtime-card { margin: 0; box-shadow: none; } #flux-studio.ux-flux-studio-ready .flux-studio-pro-layout { grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); align-items: start; } #flux-studio.ux-flux-studio-ready .flux-studio-left-stack, #flux-studio.ux-flux-studio-ready .flux-studio-side-stack { min-width: 0; } #flux-studio.ux-flux-studio-ready .flux-studio-controls { display: grid; gap: 16px; } #flux-studio.ux-flux-studio-ready .flux-studio-prompt-field textarea { min-height: 150px; resize: vertical; } #flux-studio.ux-flux-studio-ready .flux-profile-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } #flux-studio.ux-flux-studio-ready .flux-profile-strip button { min-width: 0; } .ux-flux-advanced { border: 1px solid var(--vd-border); border-radius: var(--vd-radius-md); background: var(--vd-surface-muted); } .ux-flux-advanced > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; cursor: pointer; list-style: none; } .ux-flux-advanced > summary > span:first-child { display: grid; gap: 2px; } .ux-flux-advanced > summary small, .ux-flux-advanced-hint { color: var(--vd-text-muted); font-size: .72rem; } .ux-flux-advanced-hint { padding: 3px 8px; border-radius: 999px; background: var(--vd-surface-strong); font-weight: 700; } .ux-flux-advanced-body { display: grid; gap: 13px; padding: 0 14px 14px; } .ux-flux-advanced-body .flux-lock-toggle { margin: 0; } #flux-studio.ux-flux-studio-ready .flux-studio-preview-card { position: sticky; top: 14px; } #flux-studio.ux-flux-studio-ready .flux-studio-preview { min-height: clamp(320px, 42vw, 560px); } #flux-studio.ux-flux-studio-ready .flux-studio-preview-actions { display: grid; gap: 9px; } .ux-flux-preview-primary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ux-flux-preview-primary .vd-button { justify-content: center; } .ux-flux-preview-more { border-top: 1px solid var(--vd-border); padding-top: 8px; } .ux-flux-preview-more > summary { padding: 7px 4px; color: var(--vd-text-muted); font-size: .78rem; font-weight: 700; cursor: pointer; list-style: none; } .ux-flux-preview-more-body { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 6px; } .ux-flux-job-quick-filters { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 13px; padding: 0 2px; } .ux-flux-job-quick-filters .vd-button.is-active { border-color: color-mix(in srgb, var(--vd-accent) 44%, transparent); background: color-mix(in srgb, var(--vd-accent) 11%, var(--vd-surface)); color: var(--vd-accent); } #flux-studio.ux-flux-studio-ready .flux-job-center, #flux-studio.ux-flux-studio-ready .flux-studio-history-section { margin-top: 0; } #flux-studio.ux-flux-studio-ready .flux-job-center-actions { align-items: center; } #flux-studio.ux-flux-studio-ready .flux-job-bulkbar { transition: opacity .16s ease; } #flux-studio.ux-flux-studio-ready .flux-job-bulkbar:not(:has(input:checked)) > div button:disabled { opacity: .46; } #flux-studio.ux-flux-studio-ready .flux-studio-history { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } #flux-studio.ux-flux-studio-ready .flux-history-card { min-width: 0; } .ux-flux-panel-hidden { display: none !important; } .ux-flux-view-tab:focus-visible, .ux-flux-step:focus-visible, .ux-flux-system-panel > summary:focus-visible, .ux-flux-advanced > summary:focus-visible, .ux-flux-preview-more > summary:focus-visible, .ux-flux-job-quick-filters button:focus-visible { outline: 3px solid color-mix(in srgb, var(--vd-accent) 45%, transparent); outline-offset: 2px; } @media (max-width: 1180px) { .ux-flux-workflow { grid-template-columns: 1fr; } .ux-flux-next { justify-self: start; } #flux-studio.ux-flux-studio-ready .flux-studio-pro-layout { grid-template-columns: 1fr; } #flux-studio.ux-flux-studio-ready .flux-studio-preview-card { position: static; } } @media (max-width: 760px) { .ux-flux-view-navigation { grid-template-columns: 1fr; } .ux-flux-view-tab { padding: 11px 12px; } .ux-flux-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } #flux-studio.ux-flux-studio-ready .flux-profile-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ux-flux-preview-primary { grid-template-columns: 1fr; } #flux-studio.ux-flux-studio-ready .flux-job-center-head, #flux-studio.ux-flux-studio-ready .flux-studio-history-head { align-items: stretch; } #flux-studio.ux-flux-studio-ready .flux-job-center-actions, #flux-studio.ux-flux-studio-ready .flux-library-actions { width: 100%; } } @media (max-width: 470px) { .ux-flux-workflow { padding: 14px; } .ux-flux-steps, #flux-studio.ux-flux-studio-ready .flux-profile-strip { grid-template-columns: 1fr; } .ux-flux-step { grid-template-columns: auto 1fr auto; align-items: center; } .ux-flux-step-state { grid-column: 3; grid-row: 1 / span 2; margin: 0; } .ux-flux-system-panel > summary { align-items: flex-start; flex-direction: column; } .ux-flux-system-actions, .ux-flux-preview-more-body, .ux-flux-job-quick-filters { display: grid; grid-template-columns: 1fr; } .ux-flux-system-actions .vd-button, .ux-flux-preview-more-body .vd-button, .ux-flux-preview-more-body a, .ux-flux-job-quick-filters .vd-button { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .ux-flux-view-tab, #flux-studio.ux-flux-studio-ready .flux-job-bulkbar { transition: none; } #flux-studio.ux-flux-studio-ready * { scroll-behavior: auto !important; } } #flux-studio.ux-flux-studio-ready { container-name: flux-studio; container-type: inline-size; min-width: 0; } #flux-studio.ux-flux-studio-ready .flux-studio-heading > div:first-child, #flux-studio.ux-flux-studio-ready .flux-studio-engine-actions { min-width: 0; } @container flux-studio (max-width: 920px) { #flux-studio.ux-flux-studio-ready .flux-studio-heading { flex-direction: column; } #flux-studio.ux-flux-studio-ready .flux-studio-engine-actions { justify-content: flex-start; width: 100%; } #flux-studio.ux-flux-studio-ready .flux-studio-pro-layout { grid-template-columns: 1fr; } #flux-studio.ux-flux-studio-ready .flux-studio-preview-card { position: static; } } @container flux-studio (max-width: 560px) { #flux-studio.ux-flux-studio-ready .flux-studio-engine-actions { display: grid; grid-template-columns: 1fr; } #flux-studio.ux-flux-studio-ready .flux-studio-engine-actions .settings-status-chip, #flux-studio.ux-flux-studio-ready .flux-studio-engine-actions .vd-button { justify-content: center; width: 100%; } #flux-studio.ux-flux-studio-ready .flux-job-center-actions, #flux-studio.ux-flux-studio-ready .flux-library-actions { align-items: stretch; display: grid; grid-template-columns: 1fr; } #flux-studio.ux-flux-studio-ready .flux-job-center-actions .vd-button, #flux-studio.ux-flux-studio-ready .flux-library-actions .vd-button, #flux-studio.ux-flux-studio-ready .flux-library-actions select, #flux-studio.ux-flux-studio-ready .flux-library-actions label { justify-content: center; min-width: 0; width: 100%; } } #quality-center.ux-quality-center-ready { --ux-quality-danger: var(--vd-danger); --ux-quality-warning: var(--vd-warning); --ux-quality-success: var(--vd-success); --ux-quality-info: var(--vd-accent); } #quality-center .ux-quality-priority-board { display: grid; gap: 18px; margin: 0 0 20px; padding: clamp(18px, 2vw, 26px); border: 1px solid var(--vd-border); border-radius: var(--vd-radius-xl); background: linear-gradient(135deg, color-mix(in srgb, var(--vd-surface) 94%, var(--vd-accent) 6%), var(--vd-surface)); box-shadow: var(--vd-shadow-sm); } #quality-center .ux-quality-priority-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; } #quality-center .ux-quality-priority-head h3 { margin: 4px 0 6px; font-size: clamp(1.2rem, 2vw, 1.55rem); } #quality-center .ux-quality-priority-head p { max-width: 760px; margin: 0; color: var(--vd-text-muted); line-height: 1.55; } #quality-center .ux-quality-kicker { color: var(--vd-accent); font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } #quality-center .ux-quality-next { flex: 0 0 auto; } #quality-center .ux-quality-priorities { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } #quality-center .ux-quality-priority { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; padding: 14px; border: 1px solid var(--vd-border); border-radius: var(--vd-radius-lg); background: var(--vd-surface); color: inherit; text-align: left; cursor: pointer; transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; } #quality-center .ux-quality-priority:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--vd-accent) 45%, var(--vd-border)); } #quality-center .ux-quality-priority.is-active { border-color: var(--vd-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vd-accent) 14%, transparent); } #quality-center .ux-quality-priority-count { display: grid; place-items: center; min-width: 44px; min-height: 44px; border-radius: 14px; background: var(--vd-surface-subtle); font-size: 1.25rem; } #quality-center [data-ux-quality-status="blocked"] .ux-quality-priority-count { color: var(--ux-quality-danger); background: color-mix(in srgb, var(--ux-quality-danger) 10%, transparent); } #quality-center [data-ux-quality-status="review"] .ux-quality-priority-count { color: var(--ux-quality-warning); background: color-mix(in srgb, var(--ux-quality-warning) 11%, transparent); } #quality-center [data-ux-quality-status="ready"] .ux-quality-priority-count { color: var(--ux-quality-success); background: color-mix(in srgb, var(--ux-quality-success) 10%, transparent); } #quality-center .ux-quality-priority-copy { display: grid; min-width: 0; gap: 3px; } #quality-center .ux-quality-priority-copy b { font-size: .95rem; } #quality-center .ux-quality-priority-copy small { color: var(--vd-text-muted); line-height: 1.35; } #quality-center .ux-quality-summary-secondary { margin-bottom: 14px; opacity: .88; } #quality-center .ux-quality-toolbar-shell { display: grid; gap: 12px; } #quality-center .ux-quality-toolbar-primary, #quality-center .ux-quality-toolbar-primary .quality-search { width: 100%; } #quality-center .ux-quality-filter-panel { border-top: 1px solid var(--vd-border); padding-top: 10px; } #quality-center .ux-quality-filter-panel > summary, #quality-center .ux-quality-secondary > summary, #quality-center .ux-quality-more-actions > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; font-weight: 750; list-style: none; } #quality-center .ux-quality-filter-panel > summary::-webkit-details-marker, #quality-center .ux-quality-secondary > summary::-webkit-details-marker, #quality-center .ux-quality-more-actions > summary::-webkit-details-marker { display: none; } #quality-center .ux-quality-filter-panel > summary::after, #quality-center .ux-quality-secondary > summary::after, #quality-center .ux-quality-more-actions > summary::after { content: "+"; font-size: 1.1rem; color: var(--vd-text-muted); } #quality-center .ux-quality-filter-panel[open] > summary::after, #quality-center .ux-quality-secondary[open] > summary::after, #quality-center .ux-quality-more-actions[open] > summary::after { content: "−"; } #quality-center .ux-quality-filter-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 12px; } #quality-center .ux-quality-filter-chips { display: flex; flex-wrap: wrap; gap: 7px; } #quality-center .ux-quality-filter-chips.is-empty { display: none; } #quality-center .ux-quality-filter-chip { padding: 7px 10px; border: 1px solid color-mix(in srgb, var(--vd-accent) 28%, var(--vd-border)); border-radius: 999px; background: color-mix(in srgb, var(--vd-accent) 7%, var(--vd-surface)); color: inherit; font-size: .78rem; cursor: pointer; } #quality-center .quality-workspace { align-items: start; grid-template-columns: minmax(300px, .85fr) minmax(0, 1.5fr); } #quality-center .quality-list-panel { position: sticky; top: 84px; max-height: calc(100vh - 110px); overflow: auto; } #quality-center .quality-list-item { grid-template-columns: auto minmax(0, 1fr) auto; } #quality-center .quality-list-state { grid-column: 2 / 4; justify-self: start; } #quality-center .quality-detail-panel { min-width: 0; } #quality-center .quality-detail-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } #quality-center .ux-quality-main-actions { display: flex; flex-wrap: wrap; gap: 8px; } #quality-center .ux-quality-more-actions { position: relative; } #quality-center .ux-quality-more-actions > summary { min-height: 38px; padding: 0 11px; border: 1px solid var(--vd-border); border-radius: var(--vd-radius-md); background: var(--vd-surface); font-size: .84rem; } #quality-center .ux-quality-more-actions-body { position: absolute; z-index: 10; top: calc(100% + 6px); right: 0; min-width: 190px; padding: 8px; border: 1px solid var(--vd-border); border-radius: var(--vd-radius-md); background: var(--vd-surface); box-shadow: var(--vd-shadow-lg); } #quality-center .ux-quality-more-actions-body button { width: 100%; } #quality-center .ux-quality-issue-section { display: grid; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--vd-border); } #quality-center .ux-quality-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 800; } #quality-center .ux-quality-issue-summary { padding: 5px 9px; border-radius: 999px; background: var(--vd-surface-subtle); color: var(--vd-text-muted); font-size: .76rem; } #quality-center .ux-quality-issue-summary[data-tone="danger"] { color: var(--ux-quality-danger); background: color-mix(in srgb, var(--ux-quality-danger) 10%, transparent); } #quality-center .ux-quality-issue-summary[data-tone="warning"] { color: var(--ux-quality-warning); background: color-mix(in srgb, var(--ux-quality-warning) 10%, transparent); } #quality-center .ux-quality-issue-summary[data-tone="success"] { color: var(--ux-quality-success); background: color-mix(in srgb, var(--ux-quality-success) 10%, transparent); } #quality-center .quality-issue-tabs { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px; } #quality-center .quality-issue-tabs button { flex: 0 0 auto; } #quality-center .quality-issue-tabs button.ux-quality-has-priority { border-color: color-mix(in srgb, var(--ux-quality-danger) 45%, var(--vd-border)); } #quality-center .quality-issues { display: grid; gap: 8px; } #quality-center .quality-issue { grid-template-columns: auto minmax(0, 1fr) auto; padding: 13px; } #quality-center .ux-quality-secondary { margin-top: 18px; padding: 14px 0 0; border-top: 1px solid var(--vd-border); } #quality-center .ux-quality-secondary > summary span:first-child { display: grid; gap: 2px; } #quality-center .ux-quality-secondary > summary small { color: var(--vd-text-muted); font-weight: 500; } #quality-center .ux-quality-secondary-badge { margin-left: auto; padding: 4px 8px; border-radius: 999px; background: var(--vd-surface-subtle); color: var(--vd-text-muted); font-size: .72rem; } #quality-center .ux-quality-secondary-body { display: grid; gap: 18px; padding-top: 16px; } #quality-center .ux-quality-secondary-body > section, #quality-center .ux-quality-secondary-body > div { margin: 0; } #quality-center :is(button, input, select, summary):focus-visible { outline: 3px solid color-mix(in srgb, var(--vd-accent) 38%, transparent); outline-offset: 2px; } @media (max-width: 1080px) { #quality-center .ux-quality-priorities { grid-template-columns: repeat(2, minmax(0, 1fr)); } #quality-center .quality-workspace { grid-template-columns: 1fr; } #quality-center .quality-list-panel { position: static; max-height: none; } } @media (max-width: 760px) { #quality-center .ux-quality-priority-head, #quality-center .quality-detail-actions { align-items: stretch; flex-direction: column; } #quality-center .ux-quality-next, #quality-center .ux-quality-main-actions, #quality-center .ux-quality-main-actions > *, #quality-center .ux-quality-more-actions, #quality-center .ux-quality-more-actions > summary { width: 100%; } #quality-center .ux-quality-filter-body { grid-template-columns: 1fr; } #quality-center .ux-quality-more-actions-body { position: static; margin-top: 8px; } } @media (max-width: 470px) { #quality-center .ux-quality-priorities { grid-template-columns: 1fr; } #quality-center .quality-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #quality-center .quality-detail-head { align-items: flex-start; } } @media (prefers-reduced-motion: reduce) { #quality-center *, #quality-center *::before, #quality-center *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } #quality-center[data-vd-quality-polish="ap44.75"] { --ap4475-control-height: 44px; --ap4475-touch-target: 44px; } #quality-center[data-vd-quality-polish="ap44.75"] .quality-center-heading .vd-button, #quality-center[data-vd-quality-polish="ap44.75"] .quality-center-heading .primary-btn, #quality-center[data-vd-quality-polish="ap44.75"] .ux-quality-next { min-height: var(--ap4475-touch-target); font-size: 13px; } #quality-center[data-vd-quality-polish="ap44.75"] .ux-quality-kicker, #quality-center[data-vd-quality-polish="ap44.75"] .quality-summary-grid span, #quality-center[data-vd-quality-polish="ap44.75"] .quality-summary-grid small, #quality-center[data-vd-quality-polish="ap44.75"] .quality-toolbar label > span { font-size: 12px; line-height: 1.3; } #quality-center[data-vd-quality-polish="ap44.75"] .ux-quality-priority { min-height: 76px; } #quality-center[data-vd-quality-polish="ap44.75"] .ux-quality-priority-copy b { font-size: 14px; line-height: 1.3; } #quality-center[data-vd-quality-polish="ap44.75"] .ux-quality-priority-copy small, #quality-center[data-vd-quality-polish="ap44.75"] .ux-quality-priority-head p { font-size: 12px; line-height: 1.45; } #quality-center[data-vd-quality-polish="ap44.75"] .quality-toolbar input, #quality-center[data-vd-quality-polish="ap44.75"] .quality-toolbar select { min-height: var(--ap4475-control-height); font-size: 14px; line-height: 1.25; } #quality-center[data-vd-quality-polish="ap44.75"] .ux-quality-filter-panel > summary, #quality-center[data-vd-quality-polish="ap44.75"] .ux-quality-secondary > summary, #quality-center[data-vd-quality-polish="ap44.75"] .ux-quality-more-actions > summary { min-height: var(--ap4475-touch-target); font-size: 13px; } #quality-center[data-vd-quality-polish="ap44.75"] .ux-quality-filter-chip { min-height: 34px; padding: 7px 11px; font-size: 11px; } #quality-center[data-vd-quality-polish="ap44.75"] .quality-list-panel .section-title-row h3, #quality-center[data-vd-quality-polish="ap44.75"] .quality-detail-panel h3 { line-height: 1.3; } #quality-center[data-vd-quality-polish="ap44.75"] #quality-list-range, #quality-center[data-vd-quality-polish="ap44.75"] #quality-page-info { font-size: 12px; } #quality-center[data-vd-quality-polish="ap44.75"] .quality-list-item { min-height: 78px; padding: 11px; } #quality-center[data-vd-quality-polish="ap44.75"] .quality-list-copy strong { font-size: 14px; line-height: 1.35; } #quality-center[data-vd-quality-polish="ap44.75"] .quality-list-copy small, #quality-center[data-vd-quality-polish="ap44.75"] .quality-list-copy > span { font-size: 12px; line-height: 1.35; } #quality-center[data-vd-quality-polish="ap44.75"] .quality-list-score b { font-size: 16px; } #quality-center[data-vd-quality-polish="ap44.75"] .quality-list-score em { font-size: 11px; line-height: 1.1; } #quality-center[data-vd-quality-polish="ap44.75"] .quality-list-state { min-height: 28px; display: inline-flex; align-items: center; padding-inline: 9px; font-size: 11px; line-height: 1.2; } #quality-center[data-vd-quality-polish="ap44.75"] .quality-pagination .page-nav-btn { min-width: var(--ap4475-touch-target); min-height: var(--ap4475-touch-target); font-size: 18px; } #quality-center[data-vd-quality-polish="ap44.75"] .quality-detail-empty p, #quality-center[data-vd-quality-polish="ap44.75"] #quality-detail-meta { font-size: 13px; line-height: 1.5; } #quality-center[data-vd-quality-polish="ap44.75"] .quality-score-ring span { font-size: 11px; } #quality-center[data-vd-quality-polish="ap44.75"] .quality-readiness { min-height: 58px; align-items: center; padding: 12px 14px; } #quality-center[data-vd-quality-polish="ap44.75"] .quality-readiness strong { font-size: 14px; line-height: 1.3; } #quality-center[data-vd-quality-polish="ap44.75"] .quality-readiness span { font-size: 13px; line-height: 1.35; } #quality-center[data-vd-quality-polish="ap44.75"] .ux-quality-main-actions > *, #quality-center[data-vd-quality-polish="ap44.75"] .ux-quality-more-actions > summary, #quality-center[data-vd-quality-polish="ap44.75"] .ux-quality-more-actions-body button { min-height: var(--ap4475-touch-target); font-size: 13px; } #quality-center[data-vd-quality-polish="ap44.75"] .quality-financials span { font-size: 11px; line-height: 1.3; } #quality-center[data-vd-quality-polish="ap44.75"] .quality-financials strong { font-size: 14px; line-height: 1.35; } #quality-center[data-vd-quality-polish="ap44.75"] .ux-quality-section-head { font-size: 14px; } #quality-center[data-vd-quality-polish="ap44.75"] .ux-quality-issue-summary { min-height: 28px; display: inline-flex; align-items: center; padding-inline: 9px; font-size: 11px; } #quality-center[data-vd-quality-polish="ap44.75"] .quality-issue-tabs button { min-height: var(--ap4475-touch-target); padding: 0 12px; font-size: 12px; } #quality-center[data-vd-quality-polish="ap44.75"] .quality-issue { min-height: 66px; padding: 13px; } #quality-center[data-vd-quality-polish="ap44.75"] .quality-issue strong { font-size: 14px; line-height: 1.35; } #quality-center[data-vd-quality-polish="ap44.75"] .quality-issue p { font-size: 13px; line-height: 1.5; } #quality-center[data-vd-quality-polish="ap44.75"] .quality-issue small { font-size: 11px; line-height: 1.35; } #quality-center[data-vd-quality-polish="ap44.75"] .quality-issue-points { font-size: 12px; } #quality-center[data-vd-quality-polish="ap44.75"] .quality-all-clear span, #quality-center[data-vd-quality-polish="ap44.75"] .quality-empty-note { font-size: 12px; line-height: 1.45; } #quality-center[data-vd-quality-polish="ap44.75"] .quality-duplicates button, #quality-center[data-vd-quality-polish="ap44.75"] .quality-image-check, #quality-center[data-vd-quality-polish="ap44.75"] .quality-history-item { min-height: var(--ap4475-touch-target); } #quality-center[data-vd-quality-polish="ap44.75"] .quality-duplicates button { align-items: center; font-size: 13px; } #quality-center[data-vd-quality-polish="ap44.75"] .quality-duplicates button span, #quality-center[data-vd-quality-polish="ap44.75"] .quality-image-check small { font-size: 11px; line-height: 1.35; } #quality-center[data-vd-quality-polish="ap44.75"] .quality-image-check strong, #quality-center[data-vd-quality-polish="ap44.75"] .quality-history-item strong { font-size: 13px; line-height: 1.35; } #quality-center[data-vd-quality-polish="ap44.75"] .quality-history-item { font-size: 12px; line-height: 1.35; } #quality-center[data-vd-quality-polish="ap44.75"] .ux-quality-secondary > summary small { font-size: 11px; line-height: 1.35; } #quality-center[data-vd-quality-polish="ap44.75"] .ux-quality-secondary-badge { min-height: 26px; display: inline-flex; align-items: center; font-size: 11px; } #quality-ai-modal[data-vd-quality-polish="ap44.75"] .quality-ai-options, #quality-ai-modal[data-vd-quality-polish="ap44.75"] .quality-ai-compare, #quality-ai-modal[data-vd-quality-polish="ap44.75"] .quality-ai-status { font-size: 13px; } #quality-ai-modal[data-vd-quality-polish="ap44.75"] .quality-ai-options input, #quality-ai-modal[data-vd-quality-polish="ap44.75"] .quality-ai-options select, #quality-ai-modal[data-vd-quality-polish="ap44.75"] .quality-ai-compare input, #quality-ai-modal[data-vd-quality-polish="ap44.75"] .quality-ai-compare select, #quality-ai-modal[data-vd-quality-polish="ap44.75"] .quality-ai-compare textarea { min-height: 44px; font-size: 14px; } #quality-ai-modal[data-vd-quality-polish="ap44.75"] .quality-ai-compare label { font-size: 12px; line-height: 1.35; } #quality-ai-modal[data-vd-quality-polish="ap44.75"] .quality-ai-reasons span { font-size: 11px; } #quality-ai-modal[data-vd-quality-polish="ap44.75"] footer :is(button, .vd-button, .primary-btn, .secondary-btn) { min-height: 44px; font-size: 13px; } @container (max-width: 680px) { #quality-center[data-vd-quality-polish="ap44.75"] .quality-toolbar input, #quality-center[data-vd-quality-polish="ap44.75"] .quality-toolbar select { font-size: 16px; } #quality-center[data-vd-quality-polish="ap44.75"] .quality-list-item { grid-template-columns: 54px minmax(0, 1fr) 50px; gap: 10px; min-height: 88px; padding: 10px; } #quality-center[data-vd-quality-polish="ap44.75"] .quality-list-thumb { width: 54px; } #quality-center[data-vd-quality-polish="ap44.75"] .quality-list-score { width: 50px; height: 50px; } #quality-center[data-vd-quality-polish="ap44.75"] .quality-list-state { grid-column: 2 / -1; justify-self: start; } #quality-center[data-vd-quality-polish="ap44.75"] .quality-issue-tabs { scroll-snap-type: x proximity; } #quality-center[data-vd-quality-polish="ap44.75"] .quality-issue-tabs button { scroll-snap-align: start; } } @container (max-width: 560px) { #quality-center[data-vd-quality-polish="ap44.75"] .quality-center-heading .page-heading-actions, #quality-center[data-vd-quality-polish="ap44.75"] .quality-center-heading .page-heading-actions > * { width: 100%; } #quality-center[data-vd-quality-polish="ap44.75"] .ux-quality-priority-board { gap: 14px; padding: 16px; } #quality-center[data-vd-quality-polish="ap44.75"] .quality-summary-grid article { min-height: 90px; } #quality-center[data-vd-quality-polish="ap44.75"] .ux-quality-main-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } #quality-center[data-vd-quality-polish="ap44.75"] .ux-quality-main-actions > * { width: auto; min-width: 0; } #quality-center[data-vd-quality-polish="ap44.75"] .quality-readiness { align-items: flex-start; flex-direction: column; gap: 4px; } #quality-center[data-vd-quality-polish="ap44.75"] .quality-issue { grid-template-columns: 34px minmax(0, 1fr); } #quality-center[data-vd-quality-polish="ap44.75"] .quality-issue-points { grid-column: 2; justify-self: start; } #quality-center[data-vd-quality-polish="ap44.75"] .quality-history-item { grid-template-columns: minmax(0, 1fr) auto; } #quality-center[data-vd-quality-polish="ap44.75"] .quality-history-item em { grid-column: 1 / -1; } #quality-ai-modal[data-vd-quality-polish="ap44.75"] .quality-ai-options input, #quality-ai-modal[data-vd-quality-polish="ap44.75"] .quality-ai-options select, #quality-ai-modal[data-vd-quality-polish="ap44.75"] .quality-ai-compare input, #quality-ai-modal[data-vd-quality-polish="ap44.75"] .quality-ai-compare select, #quality-ai-modal[data-vd-quality-polish="ap44.75"] .quality-ai-compare textarea { font-size: 16px; } #quality-ai-modal[data-vd-quality-polish="ap44.75"] footer { display: grid; grid-template-columns: 1fr; } #quality-ai-modal[data-vd-quality-polish="ap44.75"] footer :is(button, .vd-button, .primary-btn, .secondary-btn) { width: 100%; } } #inventory.ux-inventory-ready { --ux-inventory-gap: clamp(14px, 1.8vw, 24px); } #inventory.ux-inventory-ready .inventory-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: var(--ux-inventory-gap); } #inventory.ux-inventory-ready .inventory-header h2 { margin: 0; } #inventory.ux-inventory-ready .ux-inventory-overview { display: grid; gap: 18px; margin-bottom: var(--ux-inventory-gap); padding: clamp(18px, 2.2vw, 28px); border: 1px solid var(--vd-border); border-radius: var(--vd-radius-xl); background: linear-gradient(135deg, color-mix(in srgb, var(--vd-accent) 9%, var(--vd-surface)), var(--vd-surface)); box-shadow: var(--vd-shadow-sm); } #inventory.ux-inventory-ready .ux-inventory-overview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; } #inventory.ux-inventory-ready .ux-inventory-kicker { display: block; margin-bottom: 5px; color: var(--vd-accent); font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } #inventory.ux-inventory-ready .ux-inventory-overview h3, #inventory.ux-inventory-ready .ux-inventory-overview p { margin: 0; } #inventory.ux-inventory-ready .ux-inventory-overview h3 { font-size: clamp(1.15rem, 2vw, 1.55rem); } #inventory.ux-inventory-ready .ux-inventory-overview p { max-width: 760px; margin-top: 6px; color: var(--vd-text-muted); line-height: 1.55; } #inventory.ux-inventory-ready .ux-inventory-next { flex: 0 0 auto; min-height: 42px; } #inventory.ux-inventory-ready .ux-inventory-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } #inventory.ux-inventory-ready .ux-inventory-metric { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px; border: 1px solid color-mix(in srgb, var(--vd-border) 76%, transparent); border-radius: var(--vd-radius-lg); background: color-mix(in srgb, var(--vd-surface) 88%, transparent); } #inventory.ux-inventory-ready .ux-inventory-metric-value { min-width: 48px; color: var(--vd-text); font-size: clamp(1.25rem, 2.3vw, 1.75rem); line-height: 1; } #inventory.ux-inventory-ready .ux-inventory-metric-copy { display: grid; min-width: 0; gap: 2px; } #inventory.ux-inventory-ready .ux-inventory-metric-copy b { font-size: .9rem; } #inventory.ux-inventory-ready .ux-inventory-metric-copy small { overflow: hidden; color: var(--vd-text-muted); text-overflow: ellipsis; white-space: nowrap; } #inventory.ux-inventory-ready.ux-inventory-has-unassigned .ux-inventory-metric:first-child { border-color: color-mix(in srgb, var(--vd-danger) 42%, var(--vd-border)); background: color-mix(in srgb, var(--vd-danger) 7%, var(--vd-surface)); } #inventory.ux-inventory-ready.ux-inventory-has-unassigned .ux-inventory-metric:first-child .ux-inventory-metric-value { color: var(--vd-danger); } #inventory.ux-inventory-ready .ux-inventory-stats-secondary { margin-bottom: 12px; opacity: .82; } #inventory.ux-inventory-ready .ux-inventory-toolbar { display: grid; gap: 14px; margin-bottom: 14px; padding: 16px; } #inventory.ux-inventory-ready .ux-inventory-toolbar-primary, #inventory.ux-inventory-ready .ux-inventory-controls { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; } #inventory.ux-inventory-ready .ux-inventory-search, #inventory.ux-inventory-ready .ux-inventory-sort, #inventory.ux-inventory-ready .ux-inventory-detail-search { display: grid; gap: 6px; } #inventory.ux-inventory-ready .ux-inventory-search { flex: 1 1 420px; max-width: 640px; } #inventory.ux-inventory-ready .ux-inventory-search span, #inventory.ux-inventory-ready .ux-inventory-sort span, #inventory.ux-inventory-ready .ux-inventory-detail-search span { color: var(--vd-text-muted); font-size: .76rem; font-weight: 750; } #inventory.ux-inventory-ready .ux-inventory-search input, #inventory.ux-inventory-ready .ux-inventory-sort select, #inventory.ux-inventory-ready .ux-inventory-detail-search input { min-height: 42px; border: 1px solid var(--vd-border); border-radius: var(--vd-radius-md); background: var(--vd-surface); color: var(--vd-text); } #inventory.ux-inventory-ready .ux-inventory-search input, #inventory.ux-inventory-ready .ux-inventory-detail-search input { width: 100%; padding: 0 13px; } #inventory.ux-inventory-ready .ux-inventory-sort select { padding: 0 36px 0 12px; } #inventory.ux-inventory-ready .ux-inventory-visible-count { flex: 0 0 auto; padding-bottom: 11px; color: var(--vd-text-muted); font-size: .85rem; font-weight: 700; } #inventory.ux-inventory-ready .ux-inventory-filter-group { display: inline-flex; flex-wrap: wrap; gap: 6px; } #inventory.ux-inventory-ready .ux-inventory-filter { min-height: 38px; padding: 0 13px; border: 1px solid var(--vd-border); border-radius: 999px; background: var(--vd-surface); color: var(--vd-text-muted); font: inherit; font-size: .84rem; font-weight: 750; cursor: pointer; } #inventory.ux-inventory-ready .ux-inventory-filter[aria-pressed="true"] { border-color: color-mix(in srgb, var(--vd-accent) 52%, var(--vd-border)); background: color-mix(in srgb, var(--vd-accent) 11%, var(--vd-surface)); color: var(--vd-accent-strong); } #inventory.ux-inventory-ready .inventory-locations { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; } #inventory.ux-inventory-ready .inv-location-card { position: relative; display: grid; gap: 13px; min-height: 156px; padding: 18px; border: 1px solid var(--vd-border); border-radius: var(--vd-radius-lg); background: var(--vd-surface); box-shadow: var(--vd-shadow-xs); cursor: pointer; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; } #inventory.ux-inventory-ready .inv-location-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--vd-accent) 36%, var(--vd-border)); box-shadow: var(--vd-shadow-sm); } #inventory.ux-inventory-ready .inv-location-card.ux-inventory-needs-attention { border-color: color-mix(in srgb, var(--vd-warning) 48%, var(--vd-border)); background: color-mix(in srgb, var(--vd-warning) 6%, var(--vd-surface)); } #inventory.ux-inventory-ready .inv-location-card.ux-inventory-needs-attention::after { content: "Zuweisung erforderlich"; position: absolute; top: 13px; right: 13px; padding: 5px 8px; border-radius: 999px; background: color-mix(in srgb, var(--vd-warning) 15%, var(--vd-surface)); color: var(--vd-warning-strong); font-size: .7rem; font-weight: 800; } #inventory.ux-inventory-ready .inv-location-card.ux-inventory-filtered-out, #inventory.ux-inventory-ready .history-row.ux-inventory-detail-filtered { display: none; } #inventory.ux-inventory-ready .inv-loc-header { padding-right: 88px; } #inventory.ux-inventory-ready .inv-location-card:not(.ux-inventory-needs-attention) .inv-loc-header { padding-right: 0; } #inventory.ux-inventory-ready .inv-loc-name { overflow-wrap: anywhere; font-size: 1rem; font-weight: 800; } #inventory.ux-inventory-ready .inv-loc-stats { display: flex; flex-wrap: wrap; gap: 6px; } #inventory.ux-inventory-ready .inv-loc-stats span { padding: 5px 8px; border-radius: 999px; background: var(--vd-surface-subtle); color: var(--vd-text-muted); font-size: .75rem; font-weight: 700; } #inventory.ux-inventory-ready .inv-loc-value { align-self: end; color: var(--vd-text); font-size: 1.1rem; font-weight: 850; } #inventory.ux-inventory-ready .inventory-detail { display: grid; gap: 14px; } #inventory.ux-inventory-ready .ux-inventory-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; } #inventory.ux-inventory-ready .ux-inventory-detail-title-wrap { display: flex; align-items: center; gap: 12px; min-width: 0; } #inventory.ux-inventory-ready .ux-inventory-detail-title-wrap h3 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #inventory.ux-inventory-ready .ux-inventory-more-actions { position: relative; } #inventory.ux-inventory-ready .ux-inventory-more-actions > summary { min-height: 38px; padding: 9px 12px; border: 1px solid var(--vd-border); border-radius: var(--vd-radius-md); background: var(--vd-surface); color: var(--vd-text-muted); font-size: .82rem; font-weight: 750; cursor: pointer; list-style: none; } #inventory.ux-inventory-ready .ux-inventory-more-actions > summary::-webkit-details-marker { display: none; } #inventory.ux-inventory-ready .ux-inventory-more-actions-body { position: absolute; z-index: 10; top: calc(100% + 7px); right: 0; min-width: 190px; padding: 8px; border: 1px solid var(--vd-border); border-radius: var(--vd-radius-md); background: var(--vd-surface); box-shadow: var(--vd-shadow-md); } #inventory.ux-inventory-ready .ux-inventory-more-actions-body button { width: 100%; } #inventory.ux-inventory-ready .ux-inventory-detail-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding: 14px; border: 1px solid var(--vd-border); border-radius: var(--vd-radius-lg); background: var(--vd-surface); } #inventory.ux-inventory-ready .ux-inventory-detail-search { flex: 1 1 420px; } #inventory.ux-inventory-ready .ux-inventory-select-all { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; color: var(--vd-text-muted); font-size: .82rem; font-weight: 700; } #inventory.ux-inventory-ready .ux-inventory-selection-bar { display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--vd-accent) 35%, var(--vd-border)); border-radius: var(--vd-radius-md); background: color-mix(in srgb, var(--vd-accent) 7%, var(--vd-surface)); } #inventory.ux-inventory-ready .ux-inventory-selection-bar.has-selection { display: flex; } #inventory.ux-inventory-ready .ux-inventory-selection-actions, #inventory.ux-inventory-ready .ux-inventory-detail-head-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; } #inventory.ux-inventory-ready #inv-detail-list { display: grid; gap: 9px; } #inventory.ux-inventory-ready #inv-detail-list .history-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--vd-border); border-radius: var(--vd-radius-md); background: var(--vd-surface); cursor: pointer; } #inventory.ux-inventory-ready #inv-detail-list .history-row.ux-inventory-selected { border-color: color-mix(in srgb, var(--vd-accent) 48%, var(--vd-border)); background: color-mix(in srgb, var(--vd-accent) 6%, var(--vd-surface)); } #inventory.ux-inventory-ready #inv-detail-list .listing-title { overflow-wrap: anywhere; font-weight: 800; } #inventory.ux-inventory-ready #inv-detail-list .listing-meta { margin-top: 4px; color: var(--vd-text-muted); font-size: .8rem; } #inventory.ux-inventory-ready #inv-detail-list .status-dot { display: inline-flex; padding: 3px 7px; border-radius: 999px; background: color-mix(in srgb, var(--vd-success) 11%, var(--vd-surface)); color: var(--vd-success-strong); font-size: .72rem; font-weight: 800; } #inventory.ux-inventory-ready #inv-detail-list .status-dot.sold { background: var(--vd-surface-subtle); color: var(--vd-text-muted); } #inventory.ux-inventory-ready #inv-detail-list .status-dot.reserved { background: color-mix(in srgb, var(--vd-warning) 12%, var(--vd-surface)); color: var(--vd-warning-strong); } #inventory.ux-inventory-ready :is(button, input, select, summary, .inv-location-card):focus-visible { outline: 3px solid color-mix(in srgb, var(--vd-accent) 48%, transparent); outline-offset: 2px; } @media (max-width: 980px) { #inventory.ux-inventory-ready .ux-inventory-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } #inventory.ux-inventory-ready .ux-inventory-toolbar-primary, #inventory.ux-inventory-ready .ux-inventory-controls { align-items: stretch; } } @media (max-width: 700px) { #inventory.ux-inventory-ready .inventory-header, #inventory.ux-inventory-ready .ux-inventory-overview-head, #inventory.ux-inventory-ready .ux-inventory-toolbar-primary, #inventory.ux-inventory-ready .ux-inventory-controls, #inventory.ux-inventory-ready .ux-inventory-detail-head, #inventory.ux-inventory-ready .ux-inventory-detail-toolbar { flex-direction: column; align-items: stretch; } #inventory.ux-inventory-ready .ux-inventory-next, #inventory.ux-inventory-ready .inventory-actions-bar button, #inventory.ux-inventory-ready .ux-inventory-search, #inventory.ux-inventory-ready .ux-inventory-detail-search { max-width: none; width: 100%; } #inventory.ux-inventory-ready .ux-inventory-visible-count { padding-bottom: 0; } #inventory.ux-inventory-ready .ux-inventory-sort select { width: 100%; } #inventory.ux-inventory-ready .ux-inventory-more-actions-body { right: auto; left: 0; } } @media (max-width: 470px) { #inventory.ux-inventory-ready .ux-inventory-metrics, #inventory.ux-inventory-ready .inventory-locations { grid-template-columns: 1fr; } #inventory.ux-inventory-ready .ux-inventory-filter-group { display: grid; grid-template-columns: 1fr; } #inventory.ux-inventory-ready .ux-inventory-filter { width: 100%; } #inventory.ux-inventory-ready .ux-inventory-selection-bar.has-selection { align-items: stretch; flex-direction: column; } #inventory.ux-inventory-ready .ux-inventory-selection-bar button { width: 100%; } } @media (prefers-reduced-motion: reduce) { #inventory.ux-inventory-ready *, #inventory.ux-inventory-ready *::before, #inventory.ux-inventory-ready *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } } #inventory .inventory-article-table { min-width: 1240px; } #inventory #inv-detail-list { overflow-x: auto; border: 1px solid var(--vd-border); border-radius: var(--vd-radius-lg); background: var(--vd-surface); } #inventory .inventory-history-row { grid-template-columns: 44px minmax(240px, 2fr) minmax(135px, .9fr) minmax(120px, .8fr) minmax(90px, .65fr) minmax(115px, .75fr) minmax(140px, .95fr) minmax(150px, 1fr) minmax(190px, 1.1fr); } #inventory .inventory-article-table .history-table-head { grid-template-columns: 44px minmax(240px, 2fr) minmax(135px, .9fr) minmax(120px, .8fr) minmax(90px, .65fr) minmax(115px, .75fr) minmax(140px, .95fr) minmax(150px, 1fr) minmax(190px, 1.1fr); } #inventory .inventory-quick-cell { justify-content: flex-end; flex-wrap: wrap; gap: 6px; } #inventory .inventory-sku-cell { min-width: 0; } #inventory .inventory-sku-button { width: 100%; min-width: 0; display: grid; gap: 3px; padding: 7px 9px; border: 1px solid var(--vd-border); border-radius: var(--vd-radius-md); background: var(--vd-surface-subtle); color: var(--vd-text); font: inherit; text-align: left; cursor: pointer; } #inventory .inventory-sku-button strong { overflow: hidden; font-size: .78rem; font-variant-numeric: tabular-nums; letter-spacing: .025em; text-overflow: ellipsis; white-space: nowrap; } #inventory .inventory-sku-button span { color: var(--vd-text-muted); font-size: .68rem; font-weight: 700; } #inventory .inventory-sku-button.is-ready:hover { border-color: color-mix(in srgb, var(--vd-accent) 38%, var(--vd-border)); background: color-mix(in srgb, var(--vd-accent) 6%, var(--vd-surface)); } #inventory .inventory-sku-button.is-missing { border-color: color-mix(in srgb, var(--vd-warning) 44%, var(--vd-border)); background: var(--vd-warning-soft); color: var(--vd-warning); } #inventory .inventory-sku-button.is-conflict { border-color: color-mix(in srgb, var(--vd-danger) 44%, var(--vd-border)); background: var(--vd-danger-soft); color: var(--vd-danger); } #inventory .inv-location-card { width: 100%; color: inherit; text-align: left; font: inherit; } #inventory .inventory-empty-create { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(220px, 1fr) minmax(300px, 1.2fr); gap: 18px; align-items: center; padding: clamp(22px, 3vw, 34px); border: 1px dashed color-mix(in srgb, var(--vd-accent) 55%, var(--vd-border)); border-radius: var(--vd-radius-xl); background: linear-gradient(135deg, color-mix(in srgb, var(--vd-accent) 8%, var(--vd-surface)), var(--vd-surface)); } #inventory .inventory-empty-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: color-mix(in srgb, var(--vd-accent) 13%, var(--vd-surface)); color: var(--vd-accent-strong); font-size: 1.7rem; } #inventory .inventory-empty-create h3, #inventory .inventory-empty-create p { margin: 0; } #inventory .inventory-empty-create p { margin-top: 6px; color: var(--vd-text-muted); line-height: 1.5; } #inventory .inventory-empty-create form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; } #inventory .inventory-empty-create label { display: grid; gap: 6px; font-size: .8rem; font-weight: 750; color: var(--vd-text-muted); } #inventory .inventory-empty-create input { min-height: 43px; padding: 0 12px; border: 1px solid var(--vd-border); border-radius: var(--vd-radius-md); background: var(--vd-surface); color: var(--vd-text); } .inventory-location-dialog { width: min(620px, calc(100vw - 28px)); max-height: calc(100vh - 28px); padding: 0; border: 0; border-radius: 22px; background: var(--vd-surface); color: var(--vd-text); box-shadow: var(--vd-shadow-lg); } .inventory-location-dialog::backdrop { background: color-mix(in srgb, var(--vd-ink) 58%, transparent); backdrop-filter: blur(5px); } .inventory-location-form { display: grid; gap: 18px; padding: 24px; } .inventory-location-form header, .inventory-location-form footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .inventory-location-form header h3, .inventory-location-form header p { margin: 0; } .inventory-location-form header p { margin-top: 6px; color: var(--vd-text-muted); line-height: 1.45; } .inventory-dialog-kicker { display: block; margin-bottom: 5px; color: var(--vd-accent); font-size: .72rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; } .inventory-dialog-close { border: 0; background: transparent; color: var(--vd-text-muted); font-size: 1.65rem; cursor: pointer; } .inventory-location-choice, .inventory-location-new-fields { display: grid; gap: 12px; } .inventory-location-choice label, .inventory-location-new-fields label { display: grid; gap: 7px; color: var(--vd-text-muted); font-size: .82rem; font-weight: 750; } .inventory-location-choice select, .inventory-location-new-fields input, .inventory-location-new-fields textarea { width: 100%; border: 1px solid var(--vd-border); border-radius: var(--vd-radius-md); background: var(--vd-surface); color: var(--vd-text); font: inherit; } .inventory-location-choice select, .inventory-location-new-fields input { min-height: 46px; padding: 0 13px; } .inventory-location-new-fields textarea { resize: vertical; padding: 11px 13px; } .inventory-location-new-fields { display: none; padding: 16px; border: 1px solid var(--vd-border); border-radius: var(--vd-radius-lg); background: var(--vd-surface-subtle); } .inventory-location-new-fields.is-visible { display: grid; } .inventory-dialog-summary { padding: 12px 14px; border-radius: var(--vd-radius-md); background: color-mix(in srgb, var(--vd-accent) 8%, var(--vd-surface)); color: var(--vd-text-muted); font-size: .86rem; font-weight: 700; } .inventory-location-form footer { align-items: center; justify-content: flex-end; } .inventory-sku-dialog { width: min(620px, calc(100vw - 28px)); max-height: calc(100vh - 28px); padding: 0; border: 0; border-radius: 22px; background: var(--vd-surface); color: var(--vd-text); box-shadow: var(--vd-shadow-lg); } .inventory-sku-dialog::backdrop { background: color-mix(in srgb, var(--vd-ink) 58%, transparent); backdrop-filter: blur(5px); } .inventory-sku-form { display: grid; gap: 18px; padding: 24px; } .inventory-sku-form header, .inventory-sku-form footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .inventory-sku-form header h3, .inventory-sku-form header p { margin: 0; } .inventory-sku-form header p { max-width: 480px; margin-top: 6px; color: var(--vd-text-muted); line-height: 1.45; } .inventory-sku-context { display: grid; gap: 3px; padding: 13px 14px; border: 1px solid var(--vd-border); border-radius: var(--vd-radius-md); background: var(--vd-surface-subtle); } .inventory-sku-context strong { overflow-wrap: anywhere; font-size: .9rem; } .inventory-sku-context span { color: var(--vd-text-muted); font-size: .78rem; } .inventory-sku-single, .inventory-sku-batch { display: grid; gap: 12px; } .inventory-sku-single label, .inventory-sku-batch label { display: grid; gap: 7px; color: var(--vd-text-muted); font-size: .82rem; font-weight: 750; } .inventory-sku-single input, .inventory-sku-batch input { width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid var(--vd-border); border-radius: var(--vd-radius-md); background: var(--vd-surface); color: var(--vd-text); font: inherit; font-size: 1rem; font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: .035em; } .inventory-sku-single > p { margin: -3px 0 0; color: var(--vd-text-muted); font-size: .75rem; line-height: 1.45; } .inventory-sku-single > button { justify-self: start; } .inventory-sku-guard { display: grid; gap: 4px; padding: 13px 14px; border-left: 3px solid var(--vd-success); background: var(--vd-success-soft); } .inventory-sku-guard strong { color: var(--vd-success); font-size: .8rem; } .inventory-sku-guard span { color: var(--vd-text-muted); font-size: .75rem; line-height: 1.45; } .inventory-sku-status { min-height: 20px; color: var(--vd-text-muted); font-size: .78rem; font-weight: 700; } .inventory-sku-status[data-tone="error"] { padding: 10px 12px; border-radius: var(--vd-radius-sm); background: var(--vd-danger-soft); color: var(--vd-danger); } .inventory-sku-form footer { align-items: center; justify-content: flex-end; } @media (max-width: 820px) { #inventory .inventory-empty-create { grid-template-columns: 1fr; } #inventory .inventory-empty-create form { grid-template-columns: 1fr; } } #inventory.ux-inventory-ready { container-type: inline-size; container-name: inventory-workspace; } @container inventory-workspace (max-width: 1024px) { #inventory .inventory-article-table { min-width: 0; width: 100%; } #inventory #inv-detail-list { overflow-x: clip; } #inventory .inventory-article-table .history-table-head { display: none; } #inventory .inventory-article-table .history-list { display: grid; gap: 12px; padding: 12px; } #inventory .inventory-history-row { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 48px 14px 14px; border: 1px solid var(--vd-border); border-radius: var(--vd-radius-lg); background: var(--vd-surface); box-shadow: var(--vd-shadow-sm); } #inventory .inventory-history-row > .history-cell { min-width: 0; padding: 11px 10px; border-top: 1px solid var(--vd-border); align-items: flex-start; } #inventory .inventory-history-row > .history-cell::before { content: attr(data-inventory-label); display: block; margin-bottom: 6px; color: var(--vd-text-muted); font-size: .68rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; } #inventory .inventory-history-row > .history-cell-select { position: absolute; top: 14px; left: 14px; padding: 0; border: 0; } #inventory .inventory-history-row > .history-cell-article { grid-column: 1 / -1; min-height: 78px; border-top: 0; padding-top: 0; } #inventory .inventory-history-row > .history-cell-article::before { display: none; } #inventory .inventory-history-row > .history-cell-published, #inventory .inventory-history-row > .inventory-quick-cell { grid-column: 1 / -1; } #inventory .inventory-quick-cell { justify-content: stretch; } #inventory .inventory-quick-cell .vd-button { width: 100%; justify-content: center; } #inventory .history-status-select { width: 100%; } } @container inventory-workspace (min-width: 1025px) { #inventory.ux-inventory-ready #inv-detail-list .inventory-history-row { display: grid; grid-template-columns: 44px minmax(240px, 2fr) minmax(135px, .9fr) minmax(120px, .8fr) minmax(90px, .65fr) minmax(115px, .75fr) minmax(140px, .95fr) minmax(150px, 1fr) minmax(190px, 1.1fr); gap: 0; padding: 0; border: 0; border-radius: 0; } } @container inventory-workspace (max-width: 520px) { #inventory .inventory-article-table .history-list { padding: 8px; } #inventory .inventory-history-row { grid-template-columns: 1fr; padding-inline: 10px; } #inventory .inventory-history-row > .history-cell, #inventory .inventory-history-row > .history-cell-published, #inventory .inventory-history-row > .inventory-quick-cell { grid-column: 1; } #inventory .history-cell-article { gap: 10px; } #inventory .history-thumb { width: 58px; height: 58px; } } #templates.ux-template-workspace-ready { display: grid; gap: var(--vd-space-5); } #templates .ux-template-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--vd-space-5); padding: clamp(20px, 3vw, 34px); border: 1px solid var(--vd-color-border); border-radius: var(--vd-radius-xl); background: linear-gradient(135deg, color-mix(in srgb, var(--vd-color-surface) 94%, var(--vd-color-accent) 6%), var(--vd-color-surface)); box-shadow: var(--vd-shadow-sm); } #templates .ux-template-hero-copy { min-width: 0; } #templates .ux-template-kicker { display: block; margin-bottom: 6px; color: var(--vd-color-accent); font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; } #templates .ux-template-hero h2, #templates .ux-template-editor-head h3 { margin: 0; color: var(--vd-color-text); } #templates .ux-template-hero p, #templates .ux-template-editor-head p { max-width: 720px; margin: 8px 0 0; color: var(--vd-color-text-muted); line-height: 1.55; } #templates .ux-template-metrics { display: flex; gap: 10px; } #templates .ux-template-metric { min-width: 112px; padding: 12px 14px; border: 1px solid var(--vd-color-border); border-radius: var(--vd-radius-lg); background: color-mix(in srgb, var(--vd-color-surface) 88%, transparent); } #templates .ux-template-metric strong, #templates .ux-template-metric span { display: block; } #templates .ux-template-metric strong { font-size: 1.35rem; line-height: 1; } #templates .ux-template-metric span { margin-top: 5px; color: var(--vd-color-text-muted); font-size: .72rem; } #templates .ux-template-primary-action { white-space: nowrap; } #templates .ux-template-toolbar { display: grid; grid-template-columns: minmax(240px, 1fr) auto; align-items: end; gap: 16px; padding: 16px; } #templates .ux-template-search, #templates .ux-template-filter-controls label { display: grid; gap: 6px; } #templates .ux-template-search > span, #templates .ux-template-filter-controls label > span { color: var(--vd-color-text-muted); font-size: .72rem; font-weight: 700; } #templates .ux-template-search input, #templates .ux-template-filter-controls select { width: 100%; min-height: 42px; border: 1px solid var(--vd-color-border); border-radius: var(--vd-radius-md); background: var(--vd-color-surface); color: var(--vd-color-text); } #templates .ux-template-filter-controls { display: flex; align-items: end; gap: 10px; } #templates .ux-template-result-count { min-width: 92px; padding: 11px 12px; border-radius: 999px; background: var(--vd-color-surface-muted); color: var(--vd-color-text-muted); font-size: .78rem; font-weight: 700; text-align: center; } #templates #template-list.template-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr)); gap: 14px; } #templates .ux-template-card { display: grid; align-content: space-between; min-height: 174px; overflow: visible; border: 1px solid var(--vd-color-border); border-radius: var(--vd-radius-lg); background: var(--vd-color-surface); box-shadow: var(--vd-shadow-xs); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; } #templates .ux-template-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--vd-color-accent) 42%, var(--vd-color-border)); box-shadow: var(--vd-shadow-sm); } #templates .ux-template-card-head { display: grid; gap: 16px; padding: 18px; } #templates .ux-template-card-identity { display: flex; align-items: center; gap: 12px; min-width: 0; } #templates .ux-template-card-mark { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px; background: color-mix(in srgb, var(--vd-color-accent) 13%, var(--vd-color-surface)); color: var(--vd-color-accent); font-size: .78rem; font-weight: 850; letter-spacing: .04em; } #templates .ux-template-card .tpl-info { min-width: 0; } #templates .ux-template-card .tpl-name { overflow: hidden; color: var(--vd-color-text); font-size: 1rem; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; } #templates .ux-template-card .tpl-meta { margin-top: 4px; color: var(--vd-color-text-muted); font-size: .76rem; } #templates .ux-template-badges { display: flex; flex-wrap: wrap; gap: 7px; } #templates .ux-template-badge { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 9px; border: 1px solid var(--vd-color-border); border-radius: 999px; background: var(--vd-color-surface-muted); color: var(--vd-color-text-muted); font-size: .69rem; font-weight: 720; } #templates .ux-template-badge.is-universal { border-color: color-mix(in srgb, var(--vd-color-accent) 35%, var(--vd-color-border)); color: var(--vd-color-accent); } #templates .ux-template-badge.is-language { min-width: 34px; justify-content: center; font-weight: 850; } #templates .ux-template-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--vd-color-border); background: color-mix(in srgb, var(--vd-color-surface-muted) 62%, transparent); } #templates .ux-template-edit { flex: 1 1 auto; justify-content: center; } #templates .ux-template-more-actions { position: relative; } #templates .ux-template-more-actions summary { min-height: 34px; padding: 8px 10px; border-radius: 9px; color: var(--vd-color-text-muted); cursor: pointer; font-size: .72rem; font-weight: 700; list-style: none; } #templates .ux-template-more-actions summary::-webkit-details-marker { display: none; } #templates .ux-template-more-actions[open] summary { background: var(--vd-color-surface); } #templates .ux-template-more-actions-body { position: absolute; right: 0; bottom: calc(100% + 7px); z-index: 8; min-width: 150px; padding: 8px; border: 1px solid var(--vd-color-border); border-radius: 11px; background: var(--vd-color-surface); box-shadow: var(--vd-shadow-md); } #templates .ux-template-more-actions-body button { width: 100%; } #templates .ux-template-filtered-out { display: none !important; } #templates.ux-template-editor-open .ux-template-toolbar, #templates.ux-template-editor-open #template-list, #templates.ux-template-editor-open .ux-template-metrics, #templates.ux-template-editor-open .ux-template-primary-action { display: none !important; } #templates.ux-template-list-open #template-form { display: none; } #templates.ux-template-no-results #template-list::after { content: 'Keine Vorlage passt zu den gewählten Filtern.'; display: block; grid-column: 1 / -1; padding: 28px; border: 1px dashed var(--vd-color-border); border-radius: 14px; color: var(--vd-color-text-muted); text-align: center; } #templates #template-form.ux-template-form, #templates #template-form { width: 100%; max-width: none; padding: 0; border: 0; background: transparent; } #templates .ux-template-editor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: clamp(20px, 3vw, 30px); border: 1px solid var(--vd-color-border); border-radius: var(--vd-radius-xl); background: var(--vd-color-surface); } #templates .ux-template-editor-status { max-width: 320px; padding: 9px 12px; border-radius: 999px; background: color-mix(in srgb, var(--vd-color-success) 12%, var(--vd-color-surface)); color: var(--vd-color-success); font-size: .76rem; font-weight: 750; text-align: right; } #templates .ux-template-editor-status.is-incomplete { background: color-mix(in srgb, var(--vd-color-warning) 12%, var(--vd-color-surface)); color: var(--vd-color-warning); } #templates .ux-template-editor-layout { display: grid; grid-template-columns: minmax(260px, .82fr) minmax(340px, 1.18fr); gap: 16px; margin-top: 16px; } #templates .ux-template-editor-section { display: grid; align-content: start; gap: 16px; padding: 20px; } #templates .ux-template-section-heading { padding-bottom: 12px; border-bottom: 1px solid var(--vd-color-border); color: var(--vd-color-text); font-size: .84rem; font-weight: 800; } #templates .ux-template-editor-section .setting-group { margin: 0; } #templates .ux-template-editor-section input, #templates .ux-template-editor-section select { width: 100%; } #templates .ux-template-content-section #tpl-notes-editor { min-height: 180px; } #templates .ux-template-editor-actions { position: sticky; bottom: 14px; z-index: 7; display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; padding: 12px; border: 1px solid var(--vd-color-border); border-radius: 14px; background: color-mix(in srgb, var(--vd-color-surface) 94%, transparent); box-shadow: var(--vd-shadow-md); backdrop-filter: blur(12px); } #templates :focus-visible { outline: 3px solid color-mix(in srgb, var(--vd-color-accent) 42%, transparent); outline-offset: 2px; } @media (max-width: 920px) { #templates .ux-template-hero { grid-template-columns: 1fr auto; } #templates .ux-template-metrics { grid-column: 1 / -1; grid-row: 2; } #templates .ux-template-editor-layout { grid-template-columns: 1fr; } } @media (max-width: 700px) { #templates .ux-template-hero, #templates .ux-template-toolbar { grid-template-columns: 1fr; } #templates .ux-template-primary-action { width: 100%; } #templates .ux-template-filter-controls { display: grid; grid-template-columns: 1fr 1fr; } #templates .ux-template-result-count { grid-column: 1 / -1; } #templates .ux-template-editor-head { display: grid; } #templates .ux-template-editor-status { max-width: none; text-align: left; } } @media (max-width: 470px) { #templates .ux-template-metrics, #templates .ux-template-filter-controls { display: grid; grid-template-columns: 1fr; } #templates .ux-template-metric { min-width: 0; } #templates #template-list.template-list { grid-template-columns: 1fr; } #templates .ux-template-card-footer, #templates .ux-template-editor-actions { align-items: stretch; flex-direction: column; } #templates .ux-template-more-actions, #templates .ux-template-more-actions summary, #templates .ux-template-editor-actions button { width: 100%; } #templates .ux-template-more-actions-body { right: auto; left: 0; } } @media (prefers-reduced-motion: reduce) { #templates .ux-template-card { transition: none; } #templates .ux-template-card:hover { transform: none; } } #today.ux-today-workspace-ready { display: grid; gap: var(--vd-space-5); } #today .ux-today-command { display: grid; gap: 18px; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--vd-color-border); border-radius: var(--vd-radius-xl); background: linear-gradient(135deg, color-mix(in srgb, var(--vd-color-surface) 91%, var(--vd-color-accent) 9%), var(--vd-color-surface)); box-shadow: var(--vd-shadow-sm); } #today[data-ux-today-priority="attention"] .ux-today-command { background: linear-gradient(135deg, color-mix(in srgb, var(--vd-color-surface) 89%, var(--vd-color-danger) 11%), var(--vd-color-surface)); } #today[data-ux-today-priority="ready"] .ux-today-command { background: linear-gradient(135deg, color-mix(in srgb, var(--vd-color-surface) 90%, var(--vd-color-success) 10%), var(--vd-color-surface)); } #today .ux-today-command-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 22px; } #today .ux-today-command-copy { min-width: 0; } #today .ux-today-date { display: block; margin-bottom: 7px; color: var(--vd-color-accent); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } #today .ux-today-command h3 { margin: 0; color: var(--vd-color-text); font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.15; } #today .ux-today-command p { max-width: 760px; margin: 9px 0 0; color: var(--vd-color-text-muted); line-height: 1.55; } #today .ux-today-command-actions { display: grid; justify-items: end; gap: 10px; } #today .ux-today-primary { min-width: 190px; justify-content: center; } #today .ux-today-shortcuts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; } #today .ux-today-shortcut { min-height: 34px; padding: 7px 10px; border: 1px solid var(--vd-color-border); border-radius: 9px; background: color-mix(in srgb, var(--vd-color-surface) 86%, transparent); color: var(--vd-color-text-muted); font: inherit; font-size: .73rem; font-weight: 720; cursor: pointer; } #today .ux-today-shortcut:hover { border-color: color-mix(in srgb, var(--vd-color-accent) 44%, var(--vd-color-border)); color: var(--vd-color-text); } #today .ux-today-command .today-summary-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0; } #today .ux-today-command .today-summary-grid button { min-height: 82px; padding: 12px; border: 1px solid var(--vd-color-border); border-radius: var(--vd-radius-lg); background: color-mix(in srgb, var(--vd-color-surface) 88%, transparent); box-shadow: none; } #today .ux-today-command .today-summary-grid button:hover, #today .ux-today-command .today-summary-grid button.active { border-color: color-mix(in srgb, var(--vd-color-accent) 48%, var(--vd-color-border)); transform: translateY(-1px); } #today .ux-today-command .today-summary-grid strong { font-size: 1.25rem; } #today .ux-today-command .today-summary-grid em { display: none; } #today .ux-today-filter-details { overflow: hidden; border: 1px solid var(--vd-color-border); border-radius: var(--vd-radius-lg); background: var(--vd-color-surface); } #today .ux-today-filter-details > summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 12px 16px; color: var(--vd-color-text); cursor: pointer; font-size: .82rem; font-weight: 780; list-style: none; } #today .ux-today-filter-details > summary::-webkit-details-marker { display: none; } #today .ux-today-filter-details > summary::after { content: '▾'; color: var(--vd-color-text-muted); transition: transform .16s ease; } #today .ux-today-filter-details[open] > summary::after { transform: rotate(180deg); } #today .ux-today-filter-details > summary span { margin-left: auto; margin-right: 12px; color: var(--vd-color-text-muted); font-size: .72rem; font-weight: 600; } #today .ux-today-filter-details .today-filterbar { margin: 0; padding: 0 16px 16px; border: 0; background: transparent; } #today .studio-workspace { display: grid; gap: 16px; } #today .ux-today-flow-contents { display: contents; } #today .ux-today-priority-attention { order: 1; } #today .ux-today-priority-ready { order: 2; } #today .ux-today-secondary-scheduled { order: 3; } #today .ux-today-secondary-activity { order: 4; } #today.ux-today-no-attention .ux-today-priority-attention { display: none; } #today .work-panel { border-radius: var(--vd-radius-lg); } #today.ux-today-has-attention .ux-today-priority-attention { border-color: color-mix(in srgb, var(--vd-color-danger) 45%, var(--vd-color-border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--vd-color-danger) 10%, transparent); } #today .today-ready-panel { min-height: 180px; } #today .ux-today-secondary-scheduled, #today .ux-today-secondary-activity { background: color-mix(in srgb, var(--vd-color-surface) 96%, var(--vd-color-surface-muted) 4%); } #today .ux-today-panel-toggle { min-height: 32px; margin-left: auto; padding: 6px 9px; border: 1px solid var(--vd-color-border); border-radius: 8px; background: var(--vd-color-surface); color: var(--vd-color-text-muted); font: inherit; font-size: .7rem; font-weight: 720; cursor: pointer; } #today .ux-today-panel-collapsed { min-height: 0; } #today .ux-today-panel-collapsed > :not(.work-panel-header) { display: none !important; } #today .studio-layout-v2 { grid-template-columns: minmax(0, 1fr) minmax(290px, 340px); align-items: start; } #today .studio-inspector { position: sticky; top: calc(var(--vd-topbar-height) + 18px); max-height: calc(100vh - var(--vd-topbar-height) - 36px); overflow: auto; } #today .ux-today-inspector-toggle { display: none; width: 100%; justify-content: center; } #today .today-ready-grid, #today .today-activity-grid { gap: 12px; } #today .today-table-wrap { overflow-x: auto; } #today .ux-today-command button:focus-visible, #today .ux-today-filter-details summary:focus-visible, #today .ux-today-panel-toggle:focus-visible, #today .ux-today-inspector-toggle:focus-visible { outline: 3px solid color-mix(in srgb, var(--vd-color-accent) 45%, transparent); outline-offset: 2px; } @media (max-width: 1100px) { #today .ux-today-command-main { grid-template-columns: 1fr; } #today .ux-today-command-actions { justify-items: start; } #today .ux-today-shortcuts { justify-content: flex-start; } #today .ux-today-command .today-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { #today .studio-layout-v2 { grid-template-columns: 1fr; } #today .ux-today-inspector-toggle { display: inline-flex; } #today .studio-inspector { position: static; display: none; max-height: none; } #today.ux-today-inspector-open .studio-inspector { display: block; } } @media (max-width: 700px) { #today .ux-today-command { padding: 18px; } #today .ux-today-command .today-summary-grid { display: flex; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; } #today .ux-today-command .today-summary-grid button { flex: 0 0 132px; scroll-snap-align: start; } #today .today-filterbar, #today .today-filter-tabs, #today .today-activity-grid { grid-template-columns: 1fr; } #today .ux-today-filter-details > summary span { display: none; } } @media (max-width: 470px) { #today .ux-today-command-actions, #today .ux-today-primary { width: 100%; } #today .ux-today-shortcuts { display: grid; grid-template-columns: 1fr; width: 100%; } #today .ux-today-shortcut { width: 100%; } #today .work-panel-header { align-items: flex-start; flex-wrap: wrap; } } @media (prefers-reduced-motion: reduce) { #today *, #today *::before, #today *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } #today .attention-list.compact .work-queue-item { grid-template-columns: 28px minmax(0, 1fr) auto; min-height: 82px; padding: 12px 2px; border-top: 1px solid var(--vd-color-border); } #today .attention-list.compact .work-queue-item:first-child { border-top: 0; } #today .attention-list.compact .work-queue-item:hover, #today .attention-list.compact .work-queue-item:focus-visible { border-radius: 10px; background: color-mix(in srgb, var(--vd-color-brand) 7%, transparent); } #today .attention-list.compact .work-queue-item.tone-danger { background: color-mix(in srgb, var(--vd-color-danger) 6%, transparent); } #today .attention-rank { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--vd-color-border); border-radius: 8px; background: var(--vd-color-surface); color: var(--vd-color-text-muted); font-size: .68rem; font-weight: 780; } #today .tone-danger .attention-rank { border-color: color-mix(in srgb, var(--vd-color-danger) 45%, var(--vd-color-border)); color: var(--vd-color-danger); } #today .attention-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } #today .attention-title-row strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; } #today .attention-title-row em { flex: 0 0 auto; color: var(--vd-color-text-muted); font-size: .62rem; font-style: normal; font-weight: 650; } #today .work-queue-item .attention-copy { gap: 4px; } #today .work-queue-item .attention-copy > small { color: var(--vd-color-text-muted); font-size: .68rem; line-height: 1.35; } #today .attention-next-action { color: var(--vd-color-brand); font-size: .66rem; font-weight: 760; } #today .work-queue-item > b { min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px; background: var(--vd-color-surface-muted); color: var(--vd-color-text-muted); font-size: .64rem; } .work-queue-target-focus { outline: 3px solid color-mix(in srgb, var(--vd-color-brand) 38%, transparent); outline-offset: 3px; transition: outline-color 180ms ease; } @media (max-width: 470px) { #today .attention-title-row { align-items: flex-start; flex-direction: column; gap: 2px; } } #settings.ux-settings-control-center-ready { --ux-settings-gap: clamp(14px, 2vw, 22px); container-name: settings-control-center; container-type: inline-size; min-width: 0; } #settings .settings-content, #settings .settings-panel, #settings .settings-shell, #settings .settings-hero-copy { min-width: 0; } #settings .ux-settings-command { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ux-settings-gap); align-items: stretch; margin: 0 0 var(--ux-settings-gap); padding: clamp(14px, 2vw, 20px); border: 1px solid var(--vd-border); border-radius: var(--vd-radius-md); background: var(--vd-surface); box-shadow: var(--vd-shadow-sm); } #settings .ux-settings-search { display: grid; gap: 8px; align-content: start; } #settings .ux-settings-search > span { font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--vd-text-muted); } #settings .ux-settings-search input { width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid var(--vd-border-strong); border-radius: var(--vd-radius-sm); background: var(--vd-input-bg); color: var(--vd-text); font: inherit; } #settings .ux-settings-search-result { min-height: 20px; font-size: .8rem; color: var(--vd-text-muted); } #settings .settings-shell { grid-template-columns: minmax(190px, 230px) minmax(0, 1fr); } #settings .settings-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); display: grid; position: sticky; top: 88px; align-self: start; } #settings .ux-settings-advanced { margin-top: 18px; border: 1px solid var(--vd-border); border-radius: var(--vd-radius-md); background: var(--vd-surface); } #settings .ux-settings-advanced > summary { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 14px 16px; cursor: pointer; list-style: none; } #settings .ux-settings-advanced > summary::-webkit-details-marker { display: none; } #settings .ux-settings-advanced > summary small { color: var(--vd-text-muted); } #settings .ux-settings-advanced[open] > summary { border-bottom: 1px solid var(--vd-border); } #settings .ux-settings-advanced > *:not(summary) { margin: 16px; } #settings .ux-settings-search-hit { outline: 3px solid color-mix(in srgb, var(--vd-warning) 32%, transparent); outline-offset: 6px; border-radius: 6px; } #settings .settings-savebar { position: static; z-index: auto; box-shadow: none; } @container settings-control-center (max-width: 1040px) { #settings .settings-shell { grid-template-columns: 1fr; } #settings .settings-nav { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; padding-bottom: 0; position: static; } #settings .settings-nav-item { min-width: 0; width: 100%; } } @container settings-control-center (max-width: 760px) { #settings .ux-settings-command { grid-template-columns: 1fr; } #settings .settings-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } #settings .settings-hero { align-items: flex-start; flex-direction: column; } #settings .settings-hero-status { width: 100%; } #settings .settings-content, #settings .settings-panel.active { padding-bottom: 24px; } #settings .settings-savebar { bottom: auto; flex-wrap: wrap; margin-inline: calc(-1 * clamp(12px, 2vw, 20px)); padding-bottom: max(12px, env(safe-area-inset-bottom)); position: static; } } @container settings-control-center (max-width: 500px) { #settings .settings-nav { grid-template-columns: 1fr; } #settings .ux-settings-advanced > summary { align-items: flex-start; flex-direction: column; gap: 4px; } #settings .settings-savebar { align-items: stretch; border-radius: 0; flex-direction: column; } #settings .settings-savebar .vd-button, #settings .settings-savebar button { justify-content: center; width: 100%; } } @media (max-width:1100px) { #settings .settings-shell { grid-template-columns: 1fr; } } @media (max-width:780px) { #settings .ux-settings-command { grid-template-columns: 1fr; } } @media (max-width:520px) { #settings .settings-nav { grid-template-columns: 1fr; } } @media (prefers-reduced-motion:reduce) { #settings * { scroll-behavior: auto!important; transition: none!important; } } #settings button:focus-visible, #settings input:focus-visible, #settings select:focus-visible, #settings textarea:focus-visible, #settings summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--vd-primary) 28%, transparent); outline-offset: 2px; } #settings .setting-input-suffix { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; } #settings .setting-input-suffix > span { color: var(--vd-ink-muted); font-size: 12px; font-weight: 700; } #settings .ai-diagnostic-last-report { align-items: center; justify-content: space-between; flex-wrap: wrap; } #settings .ai-diagnostic-last-report > div:first-child { display: grid; gap: 3px; min-width: min(100%, 360px); } #settings .ai-diagnostic-last-report > div:first-child span { color: var(--vd-ink-muted); } #settings .ai-diagnostic-report-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-left: auto; } @container settings-control-center (max-width: 620px) { #settings .ai-diagnostic-last-report { align-items: stretch; flex-direction: column; } #settings .ai-diagnostic-report-actions { margin-left: 0; } #settings .ai-diagnostic-report-actions .vd-button { flex: 1 1 160px; justify-content: center; } } #admin-modules-panel[data-ux-workspace-ready="1"],#extensions[data-ux-workspace-ready="1"]{--ux-workspace-gap:clamp(14px,2vw,24px)} .ux-module-command,.ux-extension-board{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--ux-workspace-gap);align-items:center;padding:clamp(18px,2.6vw,30px);margin:0 0 16px;border:1px solid var(--vd-border);border-radius:var(--vd-radius-xl);background:linear-gradient(135deg,var(--vd-surface),var(--vd-surface-subtle));box-shadow:var(--vd-shadow-sm)} .ux-module-command-copy h3,.ux-extension-board h3{margin:4px 0 6px;font-size:clamp(1.2rem,2vw,1.65rem)} .ux-module-command-copy p,.ux-extension-board p{margin:0;max-width:72ch;color:var(--vd-text-muted)} .ux-module-kicker{display:block;color:var(--vd-accent);font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase} .ux-module-health{display:grid;grid-template-columns:repeat(4,minmax(74px,1fr));gap:8px;min-width:min(100%,390px)} .ux-module-health-item{display:grid;gap:2px;padding:12px 14px;border:1px solid var(--vd-border);border-radius:14px;background:var(--vd-surface);text-align:center} .ux-module-health-item small{color:var(--vd-text-muted)}.ux-module-health-item strong{font-size:1.2rem}.ux-module-health-item[data-tone="danger"]{border-color:var(--vd-danger);background:color-mix(in srgb,var(--vd-danger) 8%,var(--vd-surface))} .ux-module-filterbar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px;padding:6px;border:1px solid var(--vd-border);border-radius:16px;background:var(--vd-surface-subtle)} .ux-module-filter{border:0;border-radius:11px;background:transparent;color:var(--vd-text-muted);padding:9px 13px;font-weight:700;cursor:pointer}.ux-module-filter[aria-pressed="true"]{background:var(--vd-surface);color:var(--vd-text);box-shadow:var(--vd-shadow-xs)} .ux-module-tools{display:grid;grid-template-columns:minmax(220px,1fr) auto minmax(250px,auto);gap:10px;align-items:start;margin-bottom:18px}.ux-module-tools>input{min-height:42px} .ux-module-install{border:1px solid var(--vd-border);border-radius:14px;background:var(--vd-surface)}.ux-module-install summary{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:11px 14px;cursor:pointer}.ux-module-install summary small{color:var(--vd-text-muted)}.ux-module-install-body{display:flex;gap:10px;align-items:center;padding:0 14px 14px}.ux-module-install-body input{min-width:0;max-width:320px} #admin-modules-panel[data-ux-workspace-ready="1"] #module-manager-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} #admin-modules-panel[data-ux-workspace-ready="1"] .module-card{height:100%;outline:none;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease} #admin-modules-panel[data-ux-workspace-ready="1"] .module-card:hover{transform:translateY(-2px)} #admin-modules-panel[data-ux-workspace-ready="1"] .module-card:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--vd-focus) 30%,transparent);border-color:var(--vd-focus)} #admin-modules-panel[data-ux-workspace-ready="1"] .module-card-actions{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap} #admin-modules-panel[data-ux-workspace-ready="1"] .module-error{order:-1} .ux-extension-board{margin-top:16px}.ux-extension-status{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap}.ux-extension-status #extensions-active-browser{margin:0} #extensions[data-ux-workspace-ready="1"] #extensions-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} #extensions[data-ux-workspace-ready="1"] #extensions-grid>*{height:100%} @media (max-width:1100px){.ux-module-command,.ux-extension-board{grid-template-columns:1fr}.ux-module-health{min-width:0}.ux-extension-status{justify-content:flex-start}.ux-module-tools{grid-template-columns:1fr auto}.ux-module-install{grid-column:1/-1}} @media (max-width:780px){#admin-modules-panel[data-ux-workspace-ready="1"] #module-manager-list,#extensions[data-ux-workspace-ready="1"] #extensions-grid{grid-template-columns:1fr}.ux-module-health{grid-template-columns:repeat(2,1fr)}.ux-module-tools{grid-template-columns:1fr}.ux-module-install{grid-column:auto}.ux-module-install-body{align-items:stretch;flex-direction:column}.ux-module-filterbar{overflow-x:auto;flex-wrap:nowrap}.ux-module-filter{white-space:nowrap}} @media (max-width:520px){.ux-module-command,.ux-extension-board{padding:16px;border-radius:16px}.ux-module-health{grid-template-columns:1fr 1fr}.ux-extension-status{align-items:stretch;flex-direction:column}.ux-extension-status>*{width:100%}} @media (prefers-reduced-motion:reduce){#admin-modules-panel[data-ux-workspace-ready="1"] .module-card{transition:none}#admin-modules-panel[data-ux-workspace-ready="1"] .module-card:hover{transform:none}} .ux-module-filter:focus-visible,.ux-module-install summary:focus-visible{outline:3px solid color-mix(in srgb,var(--vd-focus) 35%,transparent);outline-offset:2px} @layer vendoo.pages { #generator.generator-page { container-type: inline-size; container-name: generator-page; min-width: 0; display: grid; gap: var(--vd-space-5); padding-bottom: var(--vd-space-10); color: var(--vd-ink); font-size: 15px; } #generator .generator-heading { min-height: 62px; align-items: flex-start; margin: 0; } #generator .generator-heading > div:first-child { display: grid; gap: 5px; } #generator .generator-heading h2 { margin: 0; font-size: clamp(28px, 2.2vw, 34px); line-height: 1.08; letter-spacing: -.035em; } #generator .generator-heading p { margin: 0; color: var(--vd-ink-secondary); font-size: 14px; line-height: 1.45; } #generator .generator-heading-actions { display: flex; align-items: center; gap: var(--vd-space-2); } #generator .generator-cancel-button { min-height: 34px; padding-inline: 12px; font-size: 12px; } #generator .create-flow-commandbar { min-width: 0; } #generator .generator-flow-progress { position: static; z-index: auto; display: block; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; } #generator .create-flow-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; min-width: 0; padding-inline: var(--vd-space-3); overflow: visible; border: 0; border-radius: 0; background: transparent; } #generator .create-flow-step { position: relative; min-width: 0; min-height: 56px; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 12px; padding: 0 30px 0 var(--vd-space-1); border: 0; border-radius: 0; background: transparent; color: var(--vd-ink-muted); text-align: left; cursor: pointer; opacity: 1; } #generator .create-flow-step::after { content: ""; position: absolute; top: 28px; right: 10px; width: calc(100% - 180px); min-width: 54px; height: 1px; background: var(--vd-line-strong); } #generator .create-flow-step:last-child::after { display: none; } #generator .create-flow-step:disabled { cursor: default; opacity: .65; } #generator .create-flow-step-number { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--vd-line-strong); border-radius: 50%; background: var(--vd-surface-raised); color: var(--vd-ink-secondary); font-size: 14px; font-weight: 750; transition: background var(--vd-motion-fast), border-color var(--vd-motion-fast), color var(--vd-motion-fast); } #generator .create-flow-step-copy { min-width: 0; display: grid; gap: 2px; } #generator .create-flow-step strong { display: block; overflow: hidden; color: var(--vd-ink); font-size: 14px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } #generator .create-flow-step small { display: block; overflow: hidden; color: var(--vd-ink-muted); font-size: 11px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } #generator .create-flow-step-state { display: none; } #generator .create-flow-step.is-current .create-flow-step-number, #generator .create-flow-step.is-complete .create-flow-step-number { border-color: var(--vd-brand); background: var(--vd-brand); color: var(--vd-on-accent); } #generator .create-flow-step.is-current strong { color: var(--vd-ink); } #generator .create-flow-step.is-complete::after { background: var(--vd-brand); } #generator .generator-studio-layout { min-width: 0; } #generator .generator-flow-grid { width: 100%; min-width: 0; display: grid; grid-template-columns: 1fr; grid-template-areas: "stage"; gap: var(--vd-space-4); align-items: start; } #generator .generator-panel[hidden] { display: none; } #generator .generator-panel:not([hidden]) { grid-area: stage; } #generator .generator-photos-panel:not([hidden]) { width: min(100%, 940px); margin-inline: auto; } #generator .generator-ai-panel:not([hidden]) { width: min(100%, 980px); margin-inline: auto; } #generator .generator-result-panel:not([hidden]) { width: min(100%, 1180px); margin-inline: auto; } #generator .generator-panel { min-width: 0; min-height: 0; overflow: clip; display: flex; flex-direction: column; border: 1px solid var(--vd-line); border-radius: var(--vd-radius-lg); background: var(--vd-surface-raised); box-shadow: var(--vd-shadow-xs); transition: border-color var(--vd-motion-fast), box-shadow var(--vd-motion-fast), opacity var(--vd-motion-fast); } #generator .generator-panel.is-active { border-color: var(--vd-line); box-shadow: var(--vd-shadow-sm); } #generator .generator-panel.is-locked { background: color-mix(in srgb, var(--vd-surface-raised) 94%, var(--vd-surface-muted)); } #generator .generator-panel-header { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: var(--vd-space-3); padding: var(--vd-space-4) var(--vd-space-5); border-bottom: 1px solid var(--vd-line); background: var(--vd-surface-raised); } #generator .generator-panel-header > div:first-child { min-width: 0; display: flex; align-items: center; gap: 10px; } #generator .generator-panel-index { width: 30px; height: 30px; margin-inline-start: var(--vd-space-1); flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--vd-brand); color: var(--vd-on-accent); font-size: 11px; font-weight: 800; } #generator .generator-panel-header h3 { margin: 0; color: var(--vd-ink); font-size: 17px; line-height: 1.2; letter-spacing: -.02em; } #generator .generator-panel-header p { margin: 3px 0 0; color: var(--vd-ink-muted); font-size: 12px; line-height: 1.35; } #generator .generator-count, #generator .generator-beta { display: inline-flex; align-items: center; min-height: 25px; padding: 3px 8px; border: 1px solid var(--vd-line); border-radius: 999px; background: var(--vd-surface-muted); color: var(--vd-ink-secondary); font-size: 10px; font-weight: 700; } #generator .create-panel-head-actions { display: flex; align-items: center; gap: var(--vd-space-2); padding-inline-end: var(--vd-space-1); } #generator .create-panel-head-actions #generator-photos-next { display: none; min-height: 30px; padding-inline: 10px; font-size: 11px; } #generator .create-panel-head-actions #generator-photos-next:not([hidden]) { display: inline-flex; } #generator .media-workbench { padding-bottom: 14px; } #generator .generator-photo-visual { min-width: 0; display: grid; grid-template-columns: minmax(0, 560px) minmax(240px, 260px); gap: var(--vd-space-4); justify-content: center; align-items: start; padding: var(--vd-space-4) var(--vd-space-5) var(--vd-space-3); } #generator .generator-photo-stage { position: relative; min-width: 0; height: clamp(280px, 30vw, 390px); overflow: hidden; border: 1px solid var(--vd-line); border-radius: var(--vd-radius-md); background: var(--vd-surface-muted); } #generator .generator-photo-stage.dragover, #generator .generator-photo-stage.is-uploading { border-color: var(--vd-brand); box-shadow: 0 0 0 3px var(--vd-brand-soft); } #generator .generator-photo-stage.is-uploading::after { content: attr(data-upload-status); position: absolute; right: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 5px 8px; border-radius: 999px; background: var(--vd-ink); color: var(--vd-surface-raised); font-size: 10px; font-weight: 700; } #generator .generator-photo-empty { width: 100%; height: 100%; min-height: 0; display: grid; place-items: center; align-content: center; gap: 7px; padding: var(--vd-space-6); border: 0; background: transparent; color: var(--vd-ink-secondary); text-align: center; cursor: pointer; } #generator .generator-photo-empty-mark { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: var(--vd-space-1); border-radius: 50%; background: var(--vd-brand-soft); color: var(--vd-brand); } #generator .generator-photo-empty strong { color: var(--vd-ink); font-size: 16px; line-height: 1.25; } #generator .generator-photo-empty > span:not(.generator-photo-empty-mark):not(.generator-photo-empty-action) { max-width: 330px; color: var(--vd-ink-muted); font-size: 12px; line-height: 1.45; } #generator .generator-photo-empty-action { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; margin-top: var(--vd-space-1); padding-inline: 11px; border: 1px solid var(--vd-line-strong); border-radius: var(--vd-component-button-radius); background: var(--vd-surface-raised); color: var(--vd-ink); font-size: 11px; font-weight: 700; } #generator .generator-cover { width: 100%; height: 100%; min-height: 0; display: block; object-fit: contain; background: var(--vd-surface-muted); } #generator .generator-cover-badge { position: absolute; top: var(--vd-space-3); left: var(--vd-space-3); z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--vd-line); border-radius: 50%; background: color-mix(in srgb, var(--vd-surface-raised) 94%, transparent); color: var(--vd-ink-muted); font-size: 17px; line-height: 0; box-shadow: var(--vd-shadow-xs); } #generator .generator-cover-badge.is-cover { border-color: color-mix(in srgb, var(--vd-brand) 52%, var(--vd-line)); color: var(--vd-brand); } #generator .generator-photo-sidebar { min-width: 0; display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; align-items: start; padding: var(--vd-space-2); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-md); background: var(--vd-surface); } #generator .generator-photo-strip { grid-column: 1; grid-row: 1; min-width: 0; display: grid; grid-auto-rows: 74px; gap: var(--vd-space-2); align-content: start; max-height: 414px; margin: 0; padding: 0 2px 0 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; } #generator .generator-photo-strip:empty { display: none; } #generator .generator-photo-thumb, #generator .generator-photo-add-tile { position: relative; width: 74px; height: 74px; overflow: hidden; border: 1px solid var(--vd-line); border-radius: var(--vd-radius-sm); background: var(--vd-surface-muted); } #generator .generator-photo-thumb { padding: 0; cursor: pointer; } #generator .generator-photo-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; } #generator .generator-photo-thumb.is-active { border-color: var(--vd-ink-secondary); box-shadow: 0 0 0 1px var(--vd-ink-secondary); } #generator .generator-photo-cover-label { position: absolute; top: var(--vd-space-1); left: var(--vd-space-1); padding: 2px 5px; border-radius: 999px; background: color-mix(in srgb, var(--vd-ink) 84%, transparent); color: var(--vd-surface-raised); font-size: 8px; font-weight: 750; } #generator .generator-photo-add-tile { display: grid; place-items: center; align-content: center; gap: 2px; border-style: dashed; color: var(--vd-ink-muted); cursor: pointer; } #generator .generator-photo-add-tile > span { color: var(--vd-ink-secondary); font-size: 22px; line-height: 1; } #generator .generator-photo-add-tile small { font-size: 9px; } #generator .generator-dropzone { display: none; } #generator .generator-dropzone-picker { min-height: 72px; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "icon copy action" "icon meta action"; align-items: center; gap: 2px 10px; padding: 10px 12px; cursor: pointer; } #generator .generator-dropzone-icon { grid-area: icon; width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--vd-radius-sm); background: var(--vd-brand-soft); color: var(--vd-brand); font-size: 19px; } #generator .generator-dropzone-copy { grid-area: copy; min-width: 0; display: grid; gap: 2px; } #generator .generator-dropzone-copy strong { color: var(--vd-ink); font-size: 12px; } #generator .generator-dropzone-copy span, #generator .generator-dropzone-picker small { color: var(--vd-ink-muted); font-size: 10px; } #generator .generator-dropzone-picker small { grid-area: meta; } #generator .generator-dropzone-action { grid-area: action; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; padding-inline: 11px; border: 1px solid var(--vd-line); border-radius: var(--vd-component-button-radius); background: var(--vd-surface-raised); color: var(--vd-ink); font-size: 11px; font-weight: 700; } #generator .generator-photo-sidebar-tools { display: grid; gap: 10px; } #generator .generator-photo-stage-actions { display: grid; gap: 6px; } #generator .generator-photo-stage-actions.hidden { display: none; } #generator .generator-active-photo-caption { display: none; } #generator .generator-photo-icon-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } #generator .generator-stage-photo-action { min-width: 0; min-height: 54px; display: grid; place-items: center; align-content: center; gap: 4px; padding: 6px 4px; border: 1px solid var(--vd-line); border-radius: var(--vd-component-button-radius); background: var(--vd-surface-raised); color: var(--vd-ink-secondary); font-size: 9px; font-weight: 650; cursor: pointer; transition: border-color var(--vd-motion-fast), background var(--vd-motion-fast), transform var(--vd-motion-fast); } #generator .generator-stage-photo-action svg { pointer-events: none; } #generator .generator-stage-photo-action span { line-height: 1; } #generator .generator-stage-photo-action:hover { border-color: var(--vd-line-strong); background: var(--vd-surface-muted); transform: translateY(-1px); } #generator .generator-stage-photo-action.danger { color: var(--vd-danger); } #generator .generator-photo-quality { margin: 0; padding: 9px; border: 1px solid var(--vd-line); border-radius: var(--vd-radius-sm); background: var(--vd-surface-raised); } #generator .generator-photo-quality-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; } #generator .generator-photo-quality-head > div { display: flex; align-items: center; gap: 6px; } #generator .generator-photo-quality-head strong { font-size: 10px; } #generator .generator-photo-quality-head small { display: none; } #generator .generator-photo-quality-head > span { color: var(--vd-ink-muted); font-size: 9px; font-weight: 700; } #generator .quality-spark { width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; background: var(--vd-success-soft); color: var(--vd-success); font-size: 9px; font-weight: 800; } #generator .generator-photo-quality ul { list-style: none; display: grid; gap: 5px; margin: 8px 0 0; padding: 0; } #generator .generator-photo-quality li { display: grid; grid-template-columns: 10px minmax(0, 1fr); align-items: center; gap: 5px; color: var(--vd-ink-muted); font-size: 9px; } #generator .generator-photo-quality li > span { width: 10px; height: 10px; border: 1px solid var(--vd-line-strong); border-radius: 50%; background: var(--vd-surface-raised); } #generator .generator-photo-quality li b { font-weight: 600; } #generator .generator-photo-quality li small { display: none; } #generator .generator-photo-quality li.is-complete { color: var(--vd-success); } #generator .generator-photo-quality li.is-complete > span { border-color: var(--vd-success); background: var(--vd-success); } #generator .generator-photo-tools-disclosure { margin: var(--vd-space-2) var(--vd-space-5) 0; border-top: 1px solid var(--vd-line); } #generator .generator-photo-tools-disclosure > summary { min-height: 34px; display: flex; align-items: center; color: var(--vd-ink-muted); font-size: 10px; font-weight: 650; cursor: pointer; } #generator .generator-photo-tools-body { display: grid; gap: 8px; padding-bottom: 8px; } #generator .generator-image-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; } #generator .generator-image-tools.hidden { display: none; } #generator .generator-image-tools .small-btn { min-height: 32px; font-size: 10px; } #generator .generator-ai-model-card { margin: 0; padding: 0; overflow: clip; border: 1px solid var(--vd-line); border-radius: var(--vd-radius-sm); background: var(--vd-surface-raised); } #generator details.generator-ai-model-card > summary { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; list-style: none; cursor: pointer; } #generator details.generator-ai-model-card > summary::-webkit-details-marker { display: none; } #generator .generator-ai-model-card .ai-model-card-head > div:first-child { display: flex; align-items: center; gap: 8px; } #generator .generator-ai-model-card .ai-model-card-head h4 { margin: 0; font-size: 11px; } #generator .generator-ai-model-card .ai-model-card-head p { display: none; } #generator .generator-ai-model-card .ai-model-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; border-top: 1px solid var(--vd-line); } #generator .generator-ai-model-card .ai-model-status, #generator .generator-ai-model-card .ai-model-grid { margin: 0 10px 10px; } #generator .generator-ai-photo-summary { min-height: 70px; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin: var(--vd-space-3) var(--vd-space-4) 0; padding: 10px; border: 1px solid var(--vd-line); border-radius: var(--vd-radius-sm); background: var(--vd-surface); } #generator .generator-ai-photo-summary > img { width: 52px; height: 52px; object-fit: cover; border-radius: var(--vd-radius-sm); background: var(--vd-surface-muted); } #generator .generator-ai-photo-summary > div { min-width: 0; display: grid; gap: 2px; } #generator .generator-ai-photo-summary strong { font-size: 12px; } #generator .generator-ai-photo-summary small { overflow: hidden; color: var(--vd-ink-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } #generator #generator-ai-photo-edit { width: max-content; padding: 0; border: 0; background: transparent; color: var(--vd-brand); font-size: 10px; font-weight: 650; cursor: pointer; } #generator .generator-config-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; } #generator .generator-config-card, #generator .generator-notes-card { min-width: 0; display: grid; gap: 6px; padding: 0; border: 0; border-radius: 0; background: transparent; } #generator .generator-config-copy { min-width: 0; display: grid; gap: 2px; } #generator .generator-config-copy label, #generator .generator-notes-head label { color: var(--vd-ink); font-size: 13px; font-weight: 700; } #generator .generator-config-copy > span, #generator .generator-notes-head span { color: var(--vd-ink-muted); font-size: 12px; line-height: 1.4; } #generator .generator-config-copy > span { display: none; } #generator .generator-choice-group { width: 100%; min-height: 36px; display: flex; align-items: stretch; overflow-x: auto; padding: 0; border: 1px solid var(--vd-line); border-radius: var(--vd-component-input-radius); background: var(--vd-input-bg); } #generator .generator-choice-group button { min-height: 34px; flex: 1 0 auto; padding-inline: 9px; border: 0; border-left: 1px solid var(--vd-line); border-radius: 0; background: transparent; color: var(--vd-ink-secondary); font-size: 13px; } #generator .generator-choice-group button:first-child { border-left: 0; } #generator .generator-choice-group button.active, #generator .generator-choice-group button.is-active, #generator .generator-choice-group button[aria-pressed="true"] { background: var(--vd-brand-soft); color: var(--vd-brand); font-weight: 700; } #generator .model-select, #generator .generator-template-select, #generator .generator-notes-card textarea { min-height: 36px; width: 100%; border: 1px solid var(--vd-line); border-radius: var(--vd-component-input-radius); background: var(--vd-input-bg); color: var(--vd-ink); font-size: 14px; } #generator .generator-template-card.has-template { border-color: color-mix(in srgb, var(--vd-brand) 28%, var(--vd-line)); background: color-mix(in srgb, var(--vd-brand-soft) 36%, var(--vd-surface)); } #generator .generator-template-picker, #generator .generator-select-shell { min-width: 0; } #generator .generator-template-feedback { display: none; } #generator .generator-template-tags { margin-top: 5px; } #generator [data-create-advanced="true"], #generator [data-generator-always-visible="true"] { display: grid; } #generator .generator-notes-card { grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid var(--vd-line); } #generator .generator-notes-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } #generator .generator-notes-card textarea { min-height: 92px; padding: 9px 10px; resize: vertical; } #generator .generator-tone-row { display: flex; flex-wrap: wrap; gap: 5px 10px; color: var(--vd-ink-muted); font-size: 9px; } #generator .generator-ai-info { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; margin: auto 14px 0; padding: 10px; border: 1px solid color-mix(in srgb, var(--vd-brand) 24%, var(--vd-line)); border-radius: var(--vd-radius-sm); background: var(--vd-brand-soft); color: var(--vd-ink-secondary); } #generator .generator-ai-info > span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--vd-surface-raised); color: var(--vd-brand); font-size: 11px; font-weight: 800; } #generator .generator-ai-info p { margin: 1px 0 0; font-size: 12px; line-height: 1.5; } #generator .generator-loading { margin: 10px 14px 0; padding: 10px 12px; } #generator .generator-generate-actions { display: flex; justify-content: flex-end; padding: 14px 18px 18px; } #generator .generator-generate-actions #generate-btn { display: none; width: auto; min-width: 176px; min-height: 36px; justify-content: center; padding-inline: 16px; font-size: 12px; } #generator .generator-generate-actions #generate-btn:not([hidden]) { display: inline-flex; } #generator .generator-ai-panel.is-locked .generator-ai-photo-summary, #generator .generator-ai-panel.is-locked .generator-config-stack, #generator .generator-ai-panel.is-locked .generator-ai-info { opacity: .48; pointer-events: none; } #generator .generator-result-success { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; margin: var(--vd-space-3) var(--vd-space-4) 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--vd-success) 32%, var(--vd-line)); border-radius: var(--vd-radius-sm); background: var(--vd-success-soft); color: var(--vd-success); } #generator .generator-result-success.hidden { display: none; } #generator .generator-result-success > span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--vd-surface-raised); font-size: 11px; font-weight: 800; } #generator .generator-result-success strong { color: var(--vd-ink); font-size: 11px; } #generator .generator-result-success .vd-button { min-height: 30px; font-size: 10px; } #generator .generator-preview-empty { flex: 1; min-height: 420px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 28px; color: var(--vd-ink-muted); text-align: center; } #generator .generator-preview-empty-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--vd-surface-muted); color: var(--vd-ink-muted); font-size: 10px; font-weight: 800; } #generator .generator-preview-empty h3 { margin: 0; max-width: 300px; color: var(--vd-ink-secondary); font-size: 14px; } #generator .generator-preview-empty p { margin: 0; max-width: 330px; font-size: 11px; line-height: 1.5; } #generator .generator-preview-skeleton { display: none; } #generator .generator-result { display: grid; gap: 10px; padding: var(--vd-space-3) var(--vd-space-4) 0; } #generator .generator-result.hidden { display: none; } #generator .generator-result-score { display: none; } #generator .generator-quality-ring { --vd-runtime-quality: 0%; background: conic-gradient(var(--vd-brand) var(--vd-runtime-quality), var(--vd-line) 0); } #generator .listing-validation-summary { margin: 0; padding: 9px 10px; border: 1px solid color-mix(in srgb, var(--vd-warning) 34%, var(--vd-line)); border-radius: var(--vd-radius-sm); background: var(--vd-warning-soft); font-size: 10px; } #generator .generator-editor-block { padding: 10px; border: 1px solid var(--vd-line); border-radius: var(--vd-radius-sm); background: var(--vd-surface-raised); } #generator .result-field { margin: 0; } #generator .field-header { min-height: 24px; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } #generator .field-header label { color: var(--vd-ink); font-size: 13px; font-weight: 700; } #generator .field-header > div { display: flex; align-items: center; gap: 5px; } #generator .field-count { color: var(--vd-ink-muted); font-size: 9px; } #generator .copy-btn { min-height: 26px; font-size: 9px; } #generator .result-input, #generator .result-textarea, #generator .meta-input { min-height: 36px; border: 1px solid var(--vd-line); border-radius: var(--vd-component-input-radius); background: var(--vd-input-bg); color: var(--vd-ink); font-size: 14px; } #generator #result-description-editor { min-height: 140px; font-size: 14px; } #generator .generator-result-disclosure, #generator .generator-publishing-preview { overflow: clip; border: 1px solid var(--vd-line); border-radius: var(--vd-radius-sm); background: var(--vd-surface-raised); } #generator .generator-result-disclosure > summary, #generator .generator-publishing-preview > summary { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 14px; list-style: none; color: var(--vd-ink); font-size: 11px; font-weight: 700; cursor: pointer; } #generator .generator-result-disclosure > summary::-webkit-details-marker, #generator .generator-publishing-preview > summary::-webkit-details-marker { display: none; } #generator .generator-result-disclosure > summary > span:last-child, #generator .generator-publishing-preview > summary span { color: var(--vd-ink-muted); font-size: 9px; font-weight: 500; } #generator .generator-result-disclosure-body { padding: 10px; border-top: 1px solid var(--vd-line); } #generator .generator-variants-disclosure { border-color: color-mix(in srgb, var(--vd-brand) 22%, var(--vd-line)); background: color-mix(in srgb, var(--vd-brand-soft) 24%, var(--vd-surface-raised)); } #generator .generator-variants-disclosure[hidden] { display: none; } #generator .generator-variants-disclosure > summary { min-height: 44px; font-size: 12px; } #generator .generator-variants-disclosure > summary b { display: inline-flex; min-width: 22px; min-height: 22px; align-items: center; justify-content: center; margin-inline-start: 5px; padding-inline: 6px; border-radius: 999px; background: var(--vd-brand); color: var(--vd-on-accent); font-size: 10px; } #generator .generator-meta-section { margin: 0; padding: 0; border: 0; background: transparent; } #generator .generator-meta-heading { display: none; } #generator .meta-grid-edit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } #generator .meta-edit-item { min-width: 0; display: flex; flex-direction: column; gap: 4px; } #generator .meta-label { color: var(--vd-ink-secondary); font-size: 10px; font-weight: 700; } #generator .meta-edit-item small { color: var(--vd-ink-muted); font-size: 9px; line-height: 1.35; } #generator .meta-dynamic-fields { display: contents; } #generator .meta-category-item, #generator .category-studio-field { grid-column: 1 / -1; } #generator .meta-marketplace-card { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; background: transparent; } #generator .meta-marketplace-card > header { display: grid; gap: 2px; padding-bottom: 8px; border-bottom: 1px solid var(--vd-line); } #generator .meta-marketplace-card > header > span { display: none; } #generator .meta-marketplace-card > header strong { font-size: 12px; } #generator .meta-marketplace-card > header small { color: var(--vd-ink-muted); font-size: 9px; } #generator .meta-marketplace-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } #generator .generator-listing-summary { display: grid; gap: 7px; padding: 10px; border: 1px solid var(--vd-line); border-radius: var(--vd-radius-sm); background: var(--vd-surface-raised); } #generator .generator-listing-summary > strong { font-size: 11px; } #generator .generator-listing-summary-card { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 9px; align-items: center; } #generator .generator-listing-summary-card img { width: 62px; height: 62px; object-fit: cover; border-radius: var(--vd-radius-sm); background: var(--vd-surface-muted); } #generator .generator-listing-summary-card > div { min-width: 0; display: grid; gap: 2px; } #generator .generator-listing-summary-card small { color: var(--vd-ink-muted); font-size: 9px; } #generator .generator-listing-summary-card b { overflow: hidden; color: var(--vd-ink); font-size: 11px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } #generator .generator-listing-summary-card span { color: var(--vd-ink); font-size: 12px; font-weight: 750; } #generator .generator-html-actions { display: flex; flex-wrap: wrap; gap: 5px; } #generator .generator-html-pane-head { display: flex; justify-content: space-between; gap: 8px; padding: 7px 9px; color: var(--vd-ink-muted); font-size: 9px; } #generator .generator-result-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0; border: 0; } #generator .generator-result-actions > span { color: var(--vd-ink-muted); font-size: 9px; } #generator .generator-save-footer { margin-top: auto; display: none; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 12px 14px 14px; border-top: 1px solid var(--vd-line); } #generator .generator-save-state { margin-right: auto; color: var(--vd-ink-muted); font-size: 9px; } #generator.has-generator-result[data-create-step="result"] .generator-save-footer { display: flex; } #generator .generator-save-footer #save-btn { display: none; min-height: 36px; padding-inline: 16px; border-color: var(--vd-success); background: var(--vd-success); color: var(--vd-on-accent); font-size: 12px; } #generator .generator-save-footer #save-btn:not([hidden]) { display: inline-flex; } #generator .generator-result-panel.is-locked .generator-preview-empty { opacity: .72; } #generator .generator-step-primary { min-height: 34px; padding-inline: 13px; border-radius: var(--vd-component-button-radius); font-size: 12px; font-weight: 700; letter-spacing: 0; } #generator .create-flow-step:focus-visible, #generator .generator-step-primary:focus-visible, #generator .generator-photo-empty:focus-visible, #generator .generator-stage-photo-action:focus-visible, #generator .generator-native-picker:focus-visible, #generator details.generator-ai-model-card > summary:focus-visible, #generator .generator-result-disclosure > summary:focus-visible, #generator .generator-photo-tools-disclosure > summary:focus-visible { outline: var(--vd-component-focus-width) solid var(--vd-focus-ring); outline-offset: 2px; } #generator .generator-native-picker.is-disabled, #generator .generator-photo-add-tile.is-disabled { cursor: not-allowed; opacity: .5; } #generator.is-generating .generator-photo-empty, #generator.is-generating .generator-stage-photo-action, #generator.is-generating .generator-native-picker, #generator.is-generating #generate-btn { pointer-events: none; } #generator .generator-progress-popover { position: fixed; inset: 0; z-index: var(--vd-layer-modal); display: grid; place-items: center; padding: clamp(18px, 4vw, 42px); background: color-mix(in srgb, var(--vd-ink) 26%, transparent); backdrop-filter: blur(8px); } #generator .generator-progress-popover.hidden { display: none; } #generator .generator-progress-dialog { width: min(560px, 100%); display: grid; gap: var(--vd-space-5); padding: clamp(24px, 4vw, 34px); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-lg); background: var(--vd-surface-raised); box-shadow: var(--vd-shadow-lg); } #generator .generator-progress-visual { position: relative; width: 64px; height: 64px; display: grid; place-items: center; margin-inline: auto; } #generator .generator-progress-orbit { position: absolute; inset: 0; border: 2px solid var(--vd-line); border-top-color: var(--vd-brand); border-right-color: var(--vd-brand); border-radius: 50%; animation: vd-generator-progress-spin 1s linear infinite; } #generator .generator-progress-spark { color: var(--vd-brand); font-size: 24px; line-height: 1; animation: vd-generator-progress-pulse 1.4s ease-in-out infinite; } #generator .generator-progress-heading { display: grid; gap: 5px; text-align: center; } #generator .generator-progress-kicker { color: var(--vd-brand); font-size: 11px; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; } #generator .generator-progress-heading strong { color: var(--vd-ink); font-size: clamp(20px, 3vw, 26px); line-height: 1.15; } #generator .generator-progress-heading small, #generator .generator-progress-note { color: var(--vd-ink-muted); font-size: 12px; line-height: 1.5; } #generator .generator-progress-meter { display: grid; gap: 8px; } #generator .generator-progress-meter-head { display: flex; align-items: center; justify-content: space-between; gap: var(--vd-space-3); color: var(--vd-ink-secondary); font-size: 12px; } #generator .generator-progress-meter-head strong { color: var(--vd-ink); font-size: 13px; } #generator .generator-progress-meter progress { appearance: none; width: 100%; height: 8px; overflow: hidden; border: 0; border-radius: var(--vd-radius-xl); background: var(--vd-surface-muted); } #generator .generator-progress-meter progress::-webkit-progress-bar { border-radius: var(--vd-radius-xl); background: var(--vd-surface-muted); } #generator .generator-progress-meter progress::-webkit-progress-value { border-radius: var(--vd-radius-xl); background: var(--vd-brand); transition: width .28s ease; } #generator .generator-progress-meter progress::-moz-progress-bar { border-radius: var(--vd-radius-xl); background: var(--vd-brand); } #generator .generator-progress-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--vd-space-2); margin: 0; padding: 0; list-style: none; } #generator .generator-progress-stages li { min-width: 0; display: grid; justify-items: center; gap: 7px; color: var(--vd-ink-muted); font-size: 10px; text-align: center; } #generator .generator-progress-stages li > span { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--vd-line); border-radius: 50%; background: var(--vd-surface); color: var(--vd-ink-muted); font-size: 11px; font-weight: 760; } #generator .generator-progress-stages li b { max-width: 92px; font-weight: 650; line-height: 1.25; } #generator .generator-progress-stages li.is-active, #generator .generator-progress-stages li.is-done { color: var(--vd-ink); } #generator .generator-progress-stages li.is-active > span { border-color: var(--vd-brand); background: var(--vd-brand-soft); color: var(--vd-brand); } #generator .generator-progress-stages li.is-done > span { border-color: var(--vd-success); background: var(--vd-success-soft); color: var(--vd-success); } #generator .generator-progress-stages li.is-error > span { border-color: var(--vd-danger); background: var(--vd-danger-soft); color: var(--vd-danger); } #generator .generator-progress-models { display: grid; gap: var(--vd-space-3); padding: var(--vd-space-3); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-md); background: var(--vd-surface-muted); } #generator .generator-progress-current { display: grid; gap: 3px; min-width: 0; } #generator .generator-progress-current > span { color: var(--vd-ink-muted); font-size: 10px; font-weight: 760; letter-spacing: .06em; text-transform: uppercase; } #generator .generator-progress-current > strong { color: var(--vd-ink); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; } #generator .generator-progress-current > small { color: var(--vd-ink-muted); font-size: 11px; line-height: 1.4; } #generator .generator-progress-attempts { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; } #generator .generator-progress-attempts li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: start; padding-top: 7px; border-top: 1px solid var(--vd-line); font-size: 11px; } #generator .generator-progress-attempts li:first-child { border-top: 0; padding-top: 0; } #generator .generator-progress-attempt-index { color: var(--vd-ink-muted); font-weight: 760; } #generator .generator-progress-attempt-copy { display: grid; gap: 2px; min-width: 0; } #generator .generator-progress-attempt-copy strong { color: var(--vd-ink); font-size: 11px; overflow-wrap: anywhere; } #generator .generator-progress-attempt-copy small { color: var(--vd-ink-muted); line-height: 1.35; overflow-wrap: anywhere; } #generator .generator-progress-attempt-state { color: var(--vd-ink-muted); font-size: 10px; font-weight: 760; white-space: nowrap; } #generator .generator-progress-attempts li[data-status="running"] .generator-progress-attempt-state { color: var(--vd-brand); } #generator .generator-progress-attempts li[data-status="success"] .generator-progress-attempt-state { color: var(--vd-success); } #generator .generator-progress-attempts li[data-status="failed"] .generator-progress-attempt-state { color: var(--vd-danger); } #generator .generator-progress-attempts li[data-status="skipped"] .generator-progress-attempt-state { color: var(--vd-warning); } #generator .generator-diagnostic-panel { display: grid; gap: 9px; padding-top: 9px; border-top: 1px solid var(--vd-line); } #generator .generator-diagnostic-panel.hidden { display: none; } #generator .generator-diagnostic-head { display: grid; gap: 2px; } #generator .generator-diagnostic-head strong { font-size: 11px; color: var(--vd-ink); } #generator .generator-diagnostic-head small { font-size: 10px; color: var(--vd-ink-muted); line-height: 1.35; } #generator .generator-diagnostic-report { padding: 7px 8px; border: 1px solid var(--vd-line); border-radius: var(--vd-radius-sm); background: var(--vd-surface-raised); color: var(--vd-ink-secondary); font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; } #generator .generator-diagnostic-report[data-status="failed"] { border-color: color-mix(in srgb, var(--vd-danger) 35%, var(--vd-line)); color: var(--vd-danger); } #generator .generator-diagnostic-report[data-status="completed"] { border-color: color-mix(in srgb, var(--vd-success) 35%, var(--vd-line)); color: var(--vd-success); } #generator .generator-diagnostic-actions { display: flex; flex-wrap: wrap; gap: 7px; } #generator .generator-diagnostic-actions .vd-button { min-height: 30px; } #generator .generator-diagnostic-stages { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; } #generator .generator-diagnostic-stages li { display: grid; grid-template-columns: minmax(120px, .55fr) minmax(0, 1fr); gap: 8px; font-size: 10px; } #generator .generator-diagnostic-stages li span { color: var(--vd-ink-muted); font-weight: 700; } #generator .generator-diagnostic-stages li strong { color: var(--vd-ink); font-weight: 600; overflow-wrap: anywhere; } #generator .generator-diagnostic-stages li[data-status="failed"] strong { color: var(--vd-danger); } #generator .generator-diagnostic-stages li[data-status="pending"] strong { color: var(--vd-brand); } #generator .generator-diagnostic-details summary { cursor: pointer; color: var(--vd-ink-secondary); font-size: 10px; font-weight: 700; } #generator .generator-diagnostic-details pre { max-height: 150px; overflow: auto; margin: 7px 0 0; padding: 8px; border: 1px solid var(--vd-line); border-radius: var(--vd-radius-sm); background: var(--vd-surface-raised); color: var(--vd-ink-secondary); font: 10px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; } #generator .generator-progress-note { text-align: center; } body.generator-progress-open { overflow: hidden; } @media (max-width: 560px) { #generator .generator-progress-popover { padding: 14px; } #generator .generator-progress-dialog { gap: var(--vd-space-4); padding: 22px 18px; border-radius: var(--vd-radius-md); } #generator .generator-progress-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vd-space-3); } #generator .generator-progress-stages li { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; text-align: left; } #generator .generator-progress-stages li b { max-width: none; } } @container generator-page (max-width: 1220px) { #generator .generator-flow-grid { grid-template-columns: 1fr; } #generator .generator-result-panel { min-height: 0; } #generator .generator-result { grid-template-columns: repeat(2, minmax(0, 1fr)); } #generator .generator-result > .listing-validation-summary, #generator .generator-result > .generator-result-score, #generator .generator-result > .generator-editor-description, #generator .generator-result > .generator-meta-disclosure, #generator .generator-result > .generator-price-disclosure, #generator .generator-result > .generator-publishing-preview { grid-column: 1 / -1; } } @container generator-page (max-width: 900px) { #generator .generator-flow-grid { grid-template-columns: 1fr; } #generator .generator-result-panel { grid-column: 1; } #generator .generator-panel { min-height: 0; } #generator .create-flow-step::after { width: calc(100% - 130px); } #generator .generator-result { grid-template-columns: 1fr; } #generator .generator-result > * { grid-column: 1; } } @container generator-page (max-width: 680px) { #generator.generator-page { gap: var(--vd-space-4); } #generator .generator-heading { flex-direction: column; gap: 10px; } #generator .generator-heading-actions, #generator .generator-heading-actions .vd-button { width: 100%; } #generator .generator-heading-actions .vd-button { justify-content: center; } #generator .create-flow-step { grid-template-columns: 30px minmax(0, 1fr); gap: 7px; padding-right: 8px; } #generator .create-flow-step-number { width: 30px; height: 30px; font-size: 12px; } #generator .create-flow-step small { display: none; } #generator .create-flow-step strong { font-size: 11px; } #generator .create-flow-step::after { top: 15px; right: 4px; width: calc(100% - 88px); min-width: 20px; } #generator .generator-panel-header { min-height: 62px; padding: 11px 12px; } #generator .generator-panel-header p { display: none; } #generator .generator-photo-visual { grid-template-columns: 1fr; padding-inline: var(--vd-space-3); } #generator .generator-photo-stage { height: clamp(260px, 72vw, 360px); } #generator .generator-photo-sidebar { grid-template-columns: 1fr; } #generator .generator-photo-strip { grid-column: 1; grid-row: 1; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 68px; grid-auto-rows: 68px; max-height: none; overflow-x: auto; overflow-y: hidden; } #generator .generator-photo-sidebar-tools { grid-column: 1; grid-row: 2; } #generator .generator-photo-thumb, #generator .generator-photo-add-tile { width: 68px; height: 68px; } #generator .generator-dropzone-picker { grid-template-columns: 28px minmax(0, 1fr); grid-template-areas: "icon copy" "icon meta" "action action"; } #generator .generator-dropzone-action { width: 100%; margin-top: 6px; } #generator .generator-photo-secondary-actions, #generator .mobile-upload-trigger, #generator .generator-photo-stage-actions, #generator .generator-photo-stage-actions > div { width: 100%; } #generator .generator-config-stack, #generator .meta-grid-edit, #generator .meta-marketplace-card-grid, #generator .generator-ai-model-card .ai-model-controls { grid-template-columns: 1fr; } #generator .generator-config-stack > *, #generator .generator-notes-card, #generator .meta-category-item, #generator .category-studio-field { grid-column: 1; } #generator .generator-ai-photo-summary { grid-template-columns: 48px minmax(0, 1fr); } #generator .generator-ai-photo-summary > button { grid-column: 1 / -1; width: 100%; justify-content: center; } #generator .generator-result-success { grid-template-columns: 22px minmax(0, 1fr); } #generator .generator-result-success > button { grid-column: 1 / -1; width: 100%; justify-content: center; } #generator .generator-save-footer { align-items: stretch; flex-direction: column; } #generator .generator-save-state { margin-right: 0; text-align: center; } #generator .generator-save-footer .vd-button { width: 100%; justify-content: center; } } @media (forced-colors: active) { #generator .generator-panel, #generator .generator-photo-stage, #generator .generator-photo-add-tile, #generator .generator-result-disclosure, #generator .generator-photo-tools-disclosure { border: 1px solid CanvasText; } #generator .create-flow-step:focus-visible, #generator .generator-step-primary:focus-visible, #generator .generator-photo-empty:focus-visible, #generator .generator-native-picker:focus-visible { outline: 2px solid Highlight; } } @media (prefers-reduced-motion: reduce) { #generator .generator-panel, #generator .create-flow-step-number, #generator .generator-progress-orbit, #generator .generator-progress-spark, #generator .generator-progress-meter progress::-webkit-progress-value { transition: none; animation: none; } } } @keyframes vd-generator-progress-spin { to { transform: rotate(360deg); } } @keyframes vd-generator-progress-pulse { 0%, 100% { transform: scale(.88); opacity: .62; } 50% { transform: scale(1.08); opacity: 1; } } #generator.has-generator-result[data-create-step="result"] .generator-result-disclosure, #generator.has-generator-result[data-create-step="result"] .generator-publishing-preview { display: block; } #generator .generator-result-disclosure > summary, #generator .generator-publishing-preview > summary { cursor: default; pointer-events: none; } #generator .generator-result-disclosure > summary > span[aria-hidden="true"] { display: none; } #generator .generator-result { gap: 12px; padding: 16px 18px 0; } #generator .generator-editor-block, #generator .generator-result-disclosure, #generator .generator-publishing-preview, #generator .generator-listing-summary { border-color: var(--vd-line); box-shadow: none; } #generator .field-count { font-size: 10px; } #generator .copy-btn { min-height: 30px; padding-inline: 10px; font-size: 10px; } @container generator-page (max-width: 980px) { #generator .generator-photo-visual { grid-template-columns: minmax(0, 1fr) 230px; } } @container generator-page (max-width: 760px) { #generator .generator-photo-visual { grid-template-columns: 1fr; } #generator .generator-photo-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-rows: 70px; } #generator .generator-photo-icon-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); } #generator .generator-result { padding-inline: 12px; } #generator .meta-grid-edit, #generator .meta-marketplace-card-grid { grid-template-columns: 1fr; } } #generator .generator-photos-panel:not([hidden]), #generator .generator-ai-panel:not([hidden]), #generator .generator-result-panel:not([hidden]) { width: 100%; margin-inline: 0; } #generator .generator-panel, #generator .generator-panel.is-active { border-color: var(--vd-line); box-shadow: var(--vd-shadow-xs); } #generator .generator-panel-header { min-height: 68px; padding: 14px 18px; } #generator .generator-panel-index { width: 32px; height: 32px; margin-inline-start: 0; font-size: 11px; } #generator .generator-panel-header h3 { font-size: 18px; } #generator .generator-panel-header p { font-size: 13px; } #generator .generator-count { min-height: 28px; padding-inline: 9px; font-size: 11px; } #generator .create-panel-head-actions #generator-photos-next { min-height: 34px; padding-inline: 13px; font-size: 12px; } #generator .generator-photo-visual { grid-template-columns: minmax(0, 620px) 220px; grid-template-rows: auto auto; grid-template-areas: "photo-stage photo-strip" "photo-actions photo-quality"; gap: 12px 16px; width: 100%; margin-inline: 0; padding: 18px 20px 20px; } #generator .generator-photo-stage { grid-area: photo-stage; height: 360px; border-color: var(--vd-line); border-radius: var(--vd-radius-md); background: var(--vd-surface-muted); box-shadow: none; } #generator .generator-photo-stage.dragover, #generator .generator-photo-stage.is-uploading { border-color: var(--vd-line-strong); box-shadow: 0 0 0 2px var(--vd-focus-ring); } #generator .generator-photo-sidebar, #generator .generator-photo-sidebar-tools { display: contents; } #generator .generator-photo-strip { grid-area: photo-strip; width: 100%; max-height: 360px; grid-auto-rows: 76px; gap: 8px; padding: 0 4px 0 0; } #generator .generator-photo-thumb, #generator .generator-photo-add-tile { width: 100%; height: 76px; border-color: var(--vd-line); border-radius: var(--vd-radius-sm); } #generator .generator-photo-thumb.is-active { border-color: var(--vd-line-strong); box-shadow: 0 0 0 1px var(--vd-line-strong); } #generator .generator-photo-stage-actions { grid-area: photo-actions; min-width: 0; display: flex; align-items: center; justify-content: center; padding-top: 2px; } #generator .generator-photo-stage-actions.hidden { display: none; } #generator .generator-active-photo-caption { display: none; } #generator .generator-photo-icon-actions { display: inline-flex; align-items: center; justify-content: center; gap: 8px; } #generator .generator-stage-photo-action { position: relative; width: 36px; height: 36px; min-width: 36px; min-height: 36px; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--vd-line); border-radius: var(--vd-component-button-radius); background: var(--vd-surface-raised); color: var(--vd-ink-secondary); box-shadow: none; } #generator .generator-stage-photo-action:hover { border-color: var(--vd-line-strong); background: var(--vd-surface-muted); color: var(--vd-ink); } #generator .generator-stage-photo-action.danger { color: var(--vd-danger); } #generator .generator-stage-photo-action > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } #generator .generator-photo-quality { grid-area: photo-quality; align-self: start; padding: 10px 11px; border: 1px solid var(--vd-line); border-radius: var(--vd-radius-sm); background: var(--vd-surface-raised); } #generator .generator-photo-quality-head strong { font-size: 12px; } #generator .generator-photo-quality-head > span { font-size: 10px; } #generator .generator-photo-quality ul { gap: 5px; } #generator .generator-photo-quality li { min-height: 22px; font-size: 11px; } #generator .generator-photo-tools-disclosure { display: none; } #generator .generator-ai-photo-summary { margin: 14px 16px 0; padding: 10px 12px; border-color: var(--vd-line); background: var(--vd-surface-raised); } #generator .generator-config-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; padding: 18px 20px; } #generator .generator-config-card, #generator .generator-notes-card { gap: 7px; } #generator .generator-config-copy label, #generator .generator-notes-head label { font-size: 13px; } #generator .generator-choice-group, #generator .model-select, #generator .generator-template-select, #generator .generator-notes-card textarea { min-height: 38px; font-size: 13px; } #generator .generator-choice-group button { min-height: 36px; font-size: 12px; } #generator .generator-notes-card textarea { min-height: 96px; } #generator .generator-ai-info { margin: 0 20px; padding: 9px 11px; border-color: var(--vd-line); background: var(--vd-surface-muted); } #generator .generator-generate-actions { padding: 12px 20px 18px; } #generator .generator-generate-actions #generate-btn { min-width: 164px; min-height: 36px; padding-inline: 15px; font-size: 12px; } #generator .generator-result-photo-workbench { display: none; margin: 14px 18px 0; padding: 12px; border: 1px solid var(--vd-line); border-radius: var(--vd-radius-sm); background: var(--vd-surface-raised); } #generator.has-generator-result[data-create-step="result"] .generator-result-photo-workbench { display: block; } #generator .generator-result-photo-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; } #generator .generator-result-photo-head > div { display: grid; gap: 2px; } #generator .generator-result-photo-head strong { font-size: 13px; } #generator .generator-result-photo-head small { color: var(--vd-ink-muted); font-size: 10px; line-height: 1.4; } #generator #generator-result-photo-count { color: var(--vd-ink-muted); font-size: 10px; font-weight: 700; } #generator .generator-result-photo-strip { display: flex; align-items: flex-start; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; } #generator .generator-result-photo-item, #generator .generator-result-photo-add { width: 104px; flex: 0 0 104px; } #generator .generator-result-photo-item { display: grid; gap: 5px; padding: 4px; border: 1px solid transparent; border-radius: var(--vd-radius-sm); background: transparent; } #generator .generator-result-photo-item.is-active { border-color: var(--vd-line-strong); background: var(--vd-surface-muted); } #generator .generator-result-photo-item.dragging { opacity: .55; } #generator .generator-result-photo-item.drag-over { border-color: var(--vd-focus-ring); } #generator .generator-result-photo-thumb { position: relative; width: 94px; height: 76px; overflow: hidden; padding: 0; border: 1px solid var(--vd-line); border-radius: var(--vd-radius-sm); background: var(--vd-surface-muted); cursor: grab; } #generator .generator-result-photo-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; } #generator .generator-result-photo-star, #generator .generator-photo-cover-star { position: absolute; top: 5px; left: 5px; display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid color-mix(in srgb, var(--vd-line) 86%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--vd-surface-raised) 92%, transparent); color: var(--vd-ink-muted); font-size: 13px; line-height: 1; box-shadow: var(--vd-shadow-xs); } #generator .generator-result-photo-star svg, #generator .generator-photo-cover-star svg { width: 13px; height: 13px; display: block; } #generator .generator-result-photo-star.is-cover, #generator .generator-photo-cover-star.is-cover, #generator .generator-result-photo-cover-action.is-cover, #generator #generator-set-active-cover.is-cover { color: var(--vd-brand); } #generator .generator-result-photo-item-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } #generator .generator-result-photo-icon { min-height: 28px; display: grid; place-items: center; padding: 0; border: 1px solid var(--vd-line); border-radius: var(--vd-component-button-radius); background: var(--vd-surface-raised); color: var(--vd-ink-secondary); } #generator .generator-result-photo-icon:hover { border-color: var(--vd-line-strong); color: var(--vd-ink); } #generator .generator-result-photo-icon.danger { color: var(--vd-danger); } #generator .generator-result-photo-icon:disabled { opacity: .45; } #generator .generator-result-photo-add { min-height: 113px; display: grid; place-items: center; align-content: center; gap: 4px; border: 1px dashed var(--vd-line-strong); border-radius: var(--vd-radius-sm); background: var(--vd-surface-muted); color: var(--vd-ink-muted); cursor: pointer; } #generator .generator-result-photo-add > span { color: var(--vd-ink-secondary); font-size: 22px; line-height: 1; } #generator .generator-result-photo-add small { font-size: 9px; } #generator .generator-result-success { min-height: 42px; margin: 12px 18px 0; padding: 8px 10px; border: 1px solid var(--vd-line); border-radius: var(--vd-radius-sm); background: var(--vd-surface-muted); } #generator .generator-result { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 12px 14px; padding: 14px 18px 0; align-items: start; } #generator .generator-result > * { min-width: 0; grid-column: 1; } #generator .generator-result > .generator-listing-summary { grid-column: 2; grid-row: 2 / span 8; position: sticky; top: 12px; } #generator .listing-validation-summary { min-height: 40px; padding: 9px 11px; border: 1px solid var(--vd-line); border-radius: var(--vd-radius-sm); background: var(--vd-surface-muted); } #generator .listing-validation-summary p { display: none; } #generator .listing-validation-items { gap: 5px; } #generator .generator-result-disclosure, #generator .generator-publishing-preview, #generator .generator-editor-block, #generator .generator-listing-summary { border: 1px solid var(--vd-line); border-radius: var(--vd-radius-sm); background: var(--vd-surface-raised); box-shadow: none; } #generator .generator-result-disclosure > summary, #generator .generator-publishing-preview > summary { min-height: 38px; padding: 0 12px; border-bottom: 1px solid var(--vd-line); cursor: default; pointer-events: none; font-size: 12px; } #generator .generator-result-disclosure-body { padding: 12px; border-top: 0; } #generator .generator-editor-block { padding: 12px; } #generator .generator-variants-disclosure { grid-row: 2; } #generator .generator-editor-title { grid-row: 3; } #generator .generator-editor-description { grid-row: 4; } #generator .generator-meta-disclosure { grid-row: 5; } #generator .generator-price-disclosure { grid-row: 6; } #generator .generator-tags-disclosure { grid-row: 7; } #generator .generator-publishing-preview { grid-row: 8; } #generator .meta-grid-edit { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; } #generator .meta-marketplace-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; } #generator .meta-input, #generator .result-input { min-height: 38px; font-size: 13px; } #generator #result-description-editor { min-height: 150px; font-size: 13px; } #generator .generator-save-footer { padding: 14px 18px 16px; gap: 8px; } #generator .generator-save-footer #save-btn { min-height: 36px; padding-inline: 15px; font-size: 12px; } @container generator-page (max-width: 980px) { #generator .generator-photo-visual { grid-template-columns: minmax(0, 1fr) 200px; width: 100%; } #generator .generator-result { grid-template-columns: minmax(0, 1fr) 220px; } } @container generator-page (max-width: 760px) { #generator .generator-photo-visual { grid-template-columns: 1fr; grid-template-areas: "photo-stage" "photo-actions" "photo-strip" "photo-quality"; } #generator .generator-photo-stage { height: 320px; } #generator .generator-photo-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-rows: 70px; max-height: none; } #generator .generator-config-stack { grid-template-columns: 1fr; } #generator .generator-notes-card { grid-column: auto; } #generator .generator-result { grid-template-columns: 1fr; } #generator .generator-result > .generator-listing-summary { grid-column: 1; grid-row: auto; position: static; } #generator .generator-variants-disclosure, #generator .generator-editor-title, #generator .generator-editor-description, #generator .generator-meta-disclosure, #generator .generator-price-disclosure, #generator .generator-tags-disclosure, #generator .generator-publishing-preview { grid-row: auto; } #generator .meta-grid-edit, #generator .meta-marketplace-card-grid { grid-template-columns: 1fr; } } #generator .generator-photo-thumb { position: relative; } #generator .generator-stage-photo-action.is-cover, #generator .generator-result-photo-icon.is-cover { border-color: color-mix(in srgb, var(--vd-brand) 42%, var(--vd-line)); background: var(--vd-brand-soft); color: var(--vd-brand); } #generator .generator-ai-panel:not([hidden]) .generator-config-stack, #generator .generator-ai-panel:not([hidden]) .generator-ai-photo-summary, #generator .generator-ai-panel:not([hidden]) .generator-ai-info, #generator .generator-ai-panel:not([hidden]) .generator-generate-actions { width: auto; } #generator .listing-validation-summary { display: grid; grid-template-columns: minmax(180px, auto) minmax(0, 1fr); align-items: start; gap: 10px 16px; } #generator .listing-validation-items { display: flex; flex-wrap: wrap; gap: 6px; } #generator .listing-validation-items button { min-height: 30px; padding: 5px 9px; border: 1px solid var(--vd-line); border-radius: var(--vd-component-button-radius); background: var(--vd-surface-raised); color: var(--vd-ink-secondary); font: inherit; font-size: 10px; font-weight: 650; text-align: left; cursor: pointer; } #generator .listing-validation-items button:hover { border-color: var(--vd-line-strong); color: var(--vd-ink); } #generator .generator-result { grid-template-columns: minmax(0, 1fr) 320px; } #generator .generator-listing-summary { padding: 12px; gap: 10px; } #generator .generator-listing-summary > strong { font-size: 13px; } #generator .generator-listing-summary-card { grid-template-columns: 1fr; gap: 10px; align-items: start; } #generator .generator-listing-summary-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; border-radius: var(--vd-radius-sm); } #generator .generator-listing-summary-card > div { gap: 4px; } #generator .generator-listing-summary-card small { font-size: 10px; } #generator .generator-listing-summary-card b { font-size: 13px; line-height: 1.35; white-space: normal; } #generator .generator-listing-summary-card span { font-size: 14px; } #generator .marketplace-color-picker { margin-top: 0; } #generator .marketplace-color-picker > summary { min-height: 38px; padding: 0 11px; border: 1px solid var(--vd-line); border-radius: var(--vd-component-input-radius); background: var(--vd-input-bg); color: var(--vd-ink); font-size: 13px; font-weight: 500; } #generator .marketplace-color-picker[open] > summary { border-color: var(--vd-focus-ring); box-shadow: 0 0 0 2px var(--vd-focus); } @container generator-page (max-width: 980px) { #generator .generator-result { grid-template-columns: minmax(0, 1fr) 260px; } } @container generator-page (max-width: 760px) { #generator .listing-validation-summary { grid-template-columns: 1fr; } #generator .generator-result { grid-template-columns: 1fr; } } #generator .meta-platform-fields { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; } #generator .marketplace-platform-field { min-width: 0; display: flex; flex-direction: column; gap: 4px; color: var(--vd-ink-secondary); font-size: 10px; font-weight: 700; } #generator .marketplace-platform-field input, #generator .marketplace-platform-field select { width: 100%; min-height: 36px; padding: 0 10px; border: 1px solid var(--vd-line); border-radius: var(--vd-radius-sm); background: var(--vd-surface); color: var(--vd-ink); font: inherit; font-size: 13px; font-weight: 500; } @media (max-width: 760px) { #generator .meta-platform-fields { grid-template-columns: 1fr; } } @layer vendoo.pages { #generator .generator-config-description-length { align-items: start; } #generator .generator-config-description-length .generator-select-shell { width: min(100%, 340px); } #generator .generator-description-length-help { color: var(--vd-ink-muted); font-size: 11px; line-height: 1.4; } #generator .generator-ai-quality-result { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--vd-space-3); padding: var(--vd-space-3) var(--vd-space-4); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-sm); background: var(--vd-surface-muted); } #generator .generator-ai-quality-result[data-tone="success"] { border-color: var(--vd-success); background: var(--vd-success-soft); } #generator .generator-ai-quality-result[data-tone="warning"] { border-color: var(--vd-warning); background: var(--vd-warning-soft); } #generator .generator-ai-quality-result-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--vd-radius-sm); background: var(--vd-surface-raised); } #generator .generator-ai-quality-result-icon svg { width: 17px; height: 17px; } #generator .generator-ai-quality-result-copy { min-width: 0; display: grid; gap: 2px; } #generator .generator-ai-quality-result-copy strong { color: var(--vd-ink); font-size: 13px; } #generator .generator-ai-quality-result-copy small { overflow: hidden; color: var(--vd-ink-secondary); font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } #generator .generator-ai-quality-confidence { min-width: 48px; color: var(--vd-ink); font-size: 18px; font-weight: 750; text-align: right; } @container generator-page (max-width: 680px) { #generator .generator-ai-quality-result { grid-template-columns: auto minmax(0, 1fr); } #generator .generator-ai-quality-confidence { grid-column: 2; text-align: left; } #generator .generator-ai-quality-result-copy small { white-space: normal; } } } @layer vendoo.pages { .history-page { container-type: inline-size; container-name: history-page; display:grid; gap:var(--vd-space-4); min-width:0; max-width:100%; } .tab-content.active.history-page { display:grid; } .history-page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--vd-space-5); margin:0; } .history-heading-copy { min-width:0; } .history-heading-copy h2 { margin:0; color:var(--vd-ink); font-size:clamp(30px,3vw,38px); line-height:1; letter-spacing:-.035em; } .history-heading-copy p { margin:var(--vd-space-2) 0 0; color:var(--vd-ink-secondary); font-size:13px; line-height:1.45; } .history-page-actions { display:flex; align-items:center; justify-content:flex-end; gap:var(--vd-space-2); flex:0 0 auto; } .history-view-toggle { display:inline-grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; min-height:42px; padding:3px; border:1px solid var(--vd-line); border-radius:var(--vd-radius-sm); background:var(--vd-surface-raised); } .history-view-choice { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-width:84px; min-height:34px; padding:0 11px; border:0; border-radius:var(--vd-radius-xs); background:transparent; color:var(--vd-ink-muted); font:inherit; font-size:12px; font-weight:700; cursor:pointer; } .history-view-choice:hover { color:var(--vd-ink); background:var(--vd-surface-muted); } .history-view-choice.is-active { background:var(--vd-brand-soft); color:var(--vd-brand); box-shadow:none; } .history-card-view-icon { display:grid; grid-template-columns:repeat(2,4px); grid-auto-rows:4px; gap:2px; width:10px; height:10px; } .history-card-view-icon i { display:block; width:4px; height:4px; border-radius:1px; background:currentColor; } .history-export-wrap,.history-columns-wrap,.history-batch-more { position:relative; } .history-export-toggle { min-height:42px; gap:8px; border-radius:var(--vd-radius-sm); font-weight:720; } .history-chevron { margin-left:2px; color:var(--vd-ink-muted); } .history-compat-control,.history-compat-metrics { display:none; } .history-popover,.history-batch-secondary,.history-row-menu-portal { z-index:var(--vd-layer-popover); border:1px solid var(--vd-line); border-radius:var(--vd-radius-sm); background:var(--vd-surface-raised); box-shadow:var(--vd-shadow-float); } .history-popover { position:absolute; top:calc(100% + var(--vd-space-2)); right:0; min-width:var(--vd-popover-min-width); padding:var(--vd-space-2); } .history-export-menu button,.history-batch-secondary button,.history-row-menu-portal button { width:100%; min-height:38px; padding:0 var(--vd-space-3); border:0; border-radius:var(--vd-radius-xs); background:transparent; color:var(--vd-ink); font:inherit; font-size:12px; text-align:left; cursor:pointer; } .history-export-menu button:hover,.history-batch-secondary button:hover,.history-row-menu-portal button:hover { background:var(--vd-surface-muted); } .history-batch-secondary button:disabled { opacity:.45; cursor:not-allowed; } .history-batch-secondary button.danger,.history-row-menu-portal button.danger { color:var(--vd-danger); } .history-columns-panel { min-width:216px; padding:var(--vd-space-3); } .history-columns-panel strong { display:block; margin-bottom:var(--vd-space-2); font-size:12px; } .history-columns-panel label { display:flex; align-items:center; gap:var(--vd-space-2); min-height:36px; padding:0 var(--vd-space-2); border-radius:var(--vd-radius-xs); color:var(--vd-ink-secondary); font-size:12px; } .history-columns-panel input { accent-color:var(--vd-brand); } .history-profitability-overview,.history-kpi-strip { min-width:0; margin-bottom:var(--vd-space-5); border:0; background:transparent; box-shadow:none; } .history-profitability-metrics,.history-kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; min-width:0; overflow:hidden; border:1px solid var(--vd-line); border-radius:var(--vd-radius-sm); background:var(--vd-surface-raised); } .history-kpi-card { display:grid; grid-template-columns:34px minmax(0,1fr); align-items:center; gap:var(--vd-space-3); min-width:0; min-height:88px; padding:var(--vd-space-3) var(--vd-space-4); border:0; border-left:1px solid var(--vd-line); border-radius:0; background:transparent; box-shadow:none; } .history-kpi-card:first-child { border-left:0; } .history-kpi-icon { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:var(--vd-radius-xs); } .history-kpi-icon-total { color:var(--vd-data-purple); background:color-mix(in srgb,var(--vd-data-purple) 10%,var(--vd-surface-raised)); } .history-kpi-icon-active { color:var(--vd-success); background:var(--vd-success-soft); } .history-kpi-icon-cost { color:var(--vd-warning); background:var(--vd-warning-soft); } .history-kpi-icon-unpublished { color:var(--vd-info); background:var(--vd-info-soft); } .history-kpi-copy { min-width:0; display:grid; grid-template-columns:auto 1fr; align-items:baseline; column-gap:var(--vd-space-2); row-gap:2px; } .history-kpi-copy>span { color:var(--vd-ink-muted); font-size:10px; font-weight:720; } .history-kpi-copy strong { grid-column:1/-1; overflow:hidden; color:var(--vd-ink); font-size:24px; line-height:1.05; letter-spacing:-.025em; text-overflow:ellipsis; white-space:nowrap; } .history-kpi-copy small { grid-column:1/-1; overflow:hidden; color:var(--vd-ink-muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; } .history-saved-views { display:flex; align-items:center; gap:var(--vd-space-2); min-width:0; margin-top:calc(var(--vd-space-2) * -1); padding-bottom:var(--vd-space-1); overflow-x:auto; scrollbar-width:thin; } .history-saved-view { flex:0 0 auto; min-height:34px; display:inline-flex; align-items:center; gap:var(--vd-space-2); padding:0 var(--vd-space-3); border:1px solid var(--vd-line); border-radius:var(--vd-radius-xl); background:var(--vd-surface-raised); color:var(--vd-ink-secondary); font:inherit; font-size:11px; font-weight:720; cursor:pointer; } .history-saved-view strong { min-width:20px; display:inline-flex; justify-content:center; color:var(--vd-ink-muted); font-size:10px; font-variant-numeric:tabular-nums; } .history-saved-view:hover { border-color:var(--vd-line-strong); color:var(--vd-ink); } .history-saved-view.is-active { border-color:color-mix(in srgb,var(--vd-brand) 38%,var(--vd-line)); background:var(--vd-brand-soft); color:var(--vd-brand); } .history-saved-view.is-active strong { color:var(--vd-brand); } .history-custom-dates { grid-column:1/-1; display:grid; grid-template-columns:repeat(2,minmax(150px,190px)); gap:var(--vd-space-2); } .history-reset-filters { align-self:end; min-height:44px; padding:0 var(--vd-space-3); border:1px solid var(--vd-line); border-radius:var(--vd-radius-sm); background:var(--vd-surface-raised); color:var(--vd-ink-secondary); font:inherit; font-size:12px; font-weight:720; white-space:nowrap; cursor:pointer; } .history-reset-filters:hover:not(:disabled) { border-color:var(--vd-line-strong); background:var(--vd-surface-muted); color:var(--vd-ink); } .history-reset-filters:disabled { color:var(--vd-ink-muted); background:var(--vd-surface-muted); opacity:.58; cursor:default; } .history-active-filters { display:flex; align-items:center; flex-wrap:wrap; gap:var(--vd-space-2); min-height:28px; } .history-active-filters.hidden { display:none; } .history-active-filters>strong { color:var(--vd-ink-muted); font-size:10px; font-weight:720; text-transform:uppercase; letter-spacing:.04em; } .history-filter-chip { display:inline-flex; align-items:center; gap:var(--vd-space-1); min-height:28px; padding:0 4px 0 var(--vd-space-2); border:1px solid var(--vd-line); border-radius:var(--vd-radius-xl); background:var(--vd-surface-raised); color:var(--vd-ink-secondary); font-size:11px; } .history-filter-chip-clear { width:22px; height:22px; border:0; border-radius:var(--vd-radius-xl); background:transparent; color:var(--vd-ink-muted); cursor:pointer; } .history-batch-bar { display:flex; align-items:center; gap:var(--vd-space-3); min-width:0; padding:var(--vd-space-3); border:1px solid color-mix(in srgb,var(--vd-brand) 24%,var(--vd-line)); border-radius:var(--vd-radius-sm); background:color-mix(in srgb,var(--vd-brand-soft) 48%,var(--vd-surface-raised)); box-shadow:0 8px 24px color-mix(in srgb,var(--vd-ink) 5%,transparent); } .history-batch-bar:not(.has-selection) { display:none; } .history-selection-summary { display:flex; align-items:center; gap:var(--vd-space-2); min-width:180px; } .history-selection-icon { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; flex:0 0 34px; border-radius:var(--vd-radius-sm); background:var(--vd-brand); color:var(--vd-on-accent); } .history-select-all-wrap { display:grid; gap:2px; min-width:0; color:var(--vd-ink-secondary); } .history-select-all-wrap strong { color:var(--vd-ink); font-size:13px; font-weight:780; } .history-select-all-wrap small { overflow:hidden; color:var(--vd-ink-muted); font-size:10px; font-weight:620; text-overflow:ellipsis; white-space:nowrap; } .history-select-all-filtered { min-height:34px; padding:0 var(--vd-space-3); border:1px solid color-mix(in srgb,var(--vd-brand) 36%,var(--vd-line)); border-radius:var(--vd-radius-sm); background:var(--vd-surface-raised); color:var(--vd-brand); font:inherit; font-size:11px; font-weight:760; white-space:nowrap; cursor:pointer; } .history-select-all-filtered:hover { background:var(--vd-brand-soft); } #history-select-all,.history-row-select { width:15px; height:15px; accent-color:var(--vd-brand); cursor:pointer; } .history-batch-actions,.history-batch-primary { display:flex; align-items:center; gap:var(--vd-space-2); } .history-batch-actions { margin-left:auto; } .history-batch-primary .vd-button { min-height:36px; } .history-clear-selection { border:0; background:transparent; color:var(--vd-ink-secondary); font:inherit; font-size:11px; font-weight:700; white-space:nowrap; cursor:pointer; } .history-clear-selection:hover { color:var(--vd-ink); } .history-batch-more { --vd-runtime-history-menu-top:0; --vd-runtime-history-menu-left:0; --vd-runtime-history-menu-width:220px; } .history-batch-more summary { list-style:none; cursor:pointer; } .history-batch-more summary::-webkit-details-marker { display:none; } .history-batch-secondary { position:fixed; top:var(--vd-runtime-history-menu-top); left:var(--vd-runtime-history-menu-left); width:var(--vd-runtime-history-menu-width); padding:var(--vd-space-2); } .history-batch-more:not([open]) .history-batch-secondary { display:none; } .history-bulk-dialog { width:min(620px,calc(100vw - 32px)); max-height:min(760px,calc(100dvh - 32px)); padding:0; overflow:hidden; border:1px solid var(--vd-line); border-radius:var(--vd-radius-md); background:var(--vd-surface-raised); color:var(--vd-ink); box-shadow:var(--vd-shadow-float); } .history-bulk-dialog::backdrop { background:color-mix(in srgb,var(--vd-ink) 42%,transparent); backdrop-filter:blur(2px); } .history-bulk-form { display:grid; grid-template-rows:auto auto minmax(0,1fr) auto auto; max-height:inherit; } .history-bulk-form>header { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--vd-space-4); padding:var(--vd-space-5); border-bottom:1px solid var(--vd-line); } .history-bulk-form>header h3 { margin:4px 0 6px; font-size:20px; letter-spacing:-.02em; } .history-bulk-form>header p { margin:0; color:var(--vd-ink-secondary); font-size:12px; line-height:1.5; } .history-bulk-kicker { color:var(--vd-brand); font-size:10px; font-weight:800; letter-spacing:.075em; text-transform:uppercase; } .history-bulk-close { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; flex:0 0 34px; border:0; border-radius:var(--vd-radius-sm); background:var(--vd-surface-muted); color:var(--vd-ink-secondary); font:inherit; font-size:20px; cursor:pointer; } .history-bulk-context { display:grid; grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(90px,.65fr)); border-bottom:1px solid var(--vd-line); background:var(--vd-surface-muted); } .history-bulk-context>div { display:grid; gap:3px; min-width:0; padding:var(--vd-space-3) var(--vd-space-4); border-left:1px solid var(--vd-line); } .history-bulk-context>div:first-child { border-left:0; } .history-bulk-context strong { overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; } .history-bulk-context span { overflow:hidden; color:var(--vd-ink-muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; } .history-bulk-body { min-height:150px; overflow:auto; padding:var(--vd-space-5); } .history-bulk-field { display:grid; gap:8px; } .history-bulk-field>span,.history-bulk-choice legend { color:var(--vd-ink-secondary); font-size:11px; font-weight:760; } .history-bulk-field select,.history-bulk-field input { width:100%; min-height:44px; padding:0 12px; border:1px solid var(--vd-line); border-radius:var(--vd-radius-sm); outline:0; background:var(--vd-input-bg); color:var(--vd-ink); font:inherit; font-size:13px; } .history-bulk-field small { color:var(--vd-ink-muted); font-size:11px; line-height:1.5; } .history-bulk-money { display:grid; grid-template-columns:minmax(0,1fr) 44px; align-items:center; border:1px solid var(--vd-line); border-radius:var(--vd-radius-sm); background:var(--vd-input-bg); overflow:hidden; } .history-bulk-money input { border:0; border-radius:0; } .history-bulk-money span { display:flex; align-items:center; justify-content:center; align-self:stretch; border-left:1px solid var(--vd-line); color:var(--vd-ink-secondary); font-size:12px; font-weight:700; } .history-bulk-choice { display:grid; gap:var(--vd-space-2); margin:0; padding:0; border:0; } .history-bulk-choice legend { margin-bottom:var(--vd-space-2); } .history-bulk-choice label { display:flex; align-items:flex-start; gap:var(--vd-space-3); padding:var(--vd-space-3); border:1px solid var(--vd-line); border-radius:var(--vd-radius-sm); background:var(--vd-surface-raised); cursor:pointer; } .history-bulk-choice label:has(input:checked) { border-color:color-mix(in srgb,var(--vd-brand) 50%,var(--vd-line)); background:var(--vd-brand-soft); } .history-bulk-choice input { margin-top:3px; accent-color:var(--vd-brand); } .history-bulk-choice label>span { display:grid; gap:3px; } .history-bulk-choice strong { font-size:12px; } .history-bulk-choice small { color:var(--vd-ink-muted); font-size:10px; line-height:1.45; } .history-bulk-guard { display:grid; gap:6px; padding:var(--vd-space-4); border:1px solid color-mix(in srgb,var(--vd-brand) 24%,var(--vd-line)); border-radius:var(--vd-radius-sm); background:var(--vd-brand-soft); } .history-bulk-guard.is-danger { border-color:color-mix(in srgb,var(--vd-danger) 28%,var(--vd-line)); background:var(--vd-danger-soft); } .history-bulk-guard.is-success { border-color:color-mix(in srgb,var(--vd-success) 28%,var(--vd-line)); background:var(--vd-success-soft); } .history-bulk-guard strong { font-size:12px; } .history-bulk-guard span { color:var(--vd-ink-secondary); font-size:11px; line-height:1.5; } .history-readiness-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--vd-space-2); margin-bottom:var(--vd-space-4); } .history-readiness-summary article { display:grid; gap:3px; padding:var(--vd-space-3); border:1px solid var(--vd-line); border-radius:var(--vd-radius-sm); background:var(--vd-surface-muted); } .history-readiness-summary article.is-ready { background:var(--vd-success-soft); } .history-readiness-summary article.is-incomplete { background:var(--vd-warning-soft); } .history-readiness-summary strong { font-size:20px; letter-spacing:-.02em; } .history-readiness-summary span { color:var(--vd-ink-secondary); font-size:10px; font-weight:700; } .history-readiness-list { display:grid; gap:var(--vd-space-2); } .history-readiness-list>button { display:flex; align-items:center; justify-content:space-between; gap:var(--vd-space-3); width:100%; min-height:54px; padding:var(--vd-space-2) var(--vd-space-3); border:1px solid var(--vd-line); border-radius:var(--vd-radius-sm); background:var(--vd-surface-raised); color:var(--vd-ink); text-align:left; cursor:pointer; } .history-readiness-list>button:hover { background:var(--vd-surface-muted); } .history-readiness-list>button>span:first-child { display:grid; gap:3px; min-width:0; } .history-readiness-list strong { overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; } .history-readiness-list small { color:var(--vd-ink-muted); font-size:10px; line-height:1.35; } .history-bulk-status { min-height:20px; padding:0 var(--vd-space-5); color:var(--vd-ink-secondary); font-size:11px; } .history-bulk-status[data-tone="error"] { color:var(--vd-danger); } .history-bulk-form>footer { display:flex; align-items:center; justify-content:flex-end; gap:var(--vd-space-2); padding:var(--vd-space-4) var(--vd-space-5) var(--vd-space-5); } .history-bulk-form>footer .danger { border-color:var(--vd-danger); background:var(--vd-danger); color:white; } .history-table-shell { min-width:0; overflow:hidden; border:1px solid var(--vd-line); border-radius:var(--vd-radius-sm); background:var(--vd-surface-raised); box-shadow:none; } .history-table-scroll { min-width:0; overflow-x:auto; } .history-table { --history-platform:minmax(150px,.8fr); --history-provider:minmax(98px,.62fr); --history-price:minmax(110px,.58fr); --history-profitability:minmax(116px,.74fr); --history-status:minmax(104px,.58fr); --history-location:minmax(150px,.8fr); --history-published:minmax(130px,.82fr); min-width:820px; } .history-table-head,.history-row { display:grid; grid-template-columns:40px minmax(320px,2.25fr) var(--history-price) var(--history-platform) var(--history-status) var(--history-location) 44px; min-width:0; } .history-table-head { min-height:40px; align-items:center; border-bottom:1px solid var(--vd-line); background:color-mix(in srgb,var(--vd-surface-muted) 58%,var(--vd-surface-raised)); color:var(--vd-ink-muted); font-size:9px; font-weight:760; text-transform:uppercase; letter-spacing:.035em; } .history-list { display:block; } .history-row { min-height:72px; align-items:center; border-bottom:1px solid var(--vd-line); background:var(--vd-surface-raised); transition:background var(--vd-motion-fast) ease; } .history-row:last-child { border-bottom:0; } .history-row:hover { background:color-mix(in srgb,var(--vd-surface-muted) 42%,var(--vd-surface-raised)); } .history-row.selected { background:color-mix(in srgb,var(--vd-brand-soft) 58%,var(--vd-surface-raised)); } .history-cell { min-width:0; padding:var(--vd-space-2) var(--vd-space-2); } .history-cell-select { display:flex; align-items:center; justify-content:center; padding-inline:var(--vd-space-2); } .history-cell-article { display:flex; align-items:center; gap:var(--vd-space-3); padding-left:var(--vd-space-3); } .history-cell-menu { display:flex; align-items:center; justify-content:center; padding-inline:var(--vd-space-1); } .history-thumb { flex:0 0 auto; width:50px; height:50px; object-fit:contain; border:0; border-radius:var(--vd-radius-xs); background:var(--vd-surface-muted); } .history-thumb-placeholder { display:grid; place-items:center; color:var(--vd-ink-muted); } .history-article-copy { min-width:0; display:grid; gap:3px; } .history-article-title { display:block; max-width:100%; overflow:hidden; padding:0; border:0; background:transparent; color:var(--vd-ink); font:inherit; font-size:13px; font-weight:760; line-height:1.35; text-align:left; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; } .history-article-title:hover { color:var(--vd-brand); } .history-article-description { display:block; overflow:hidden; color:var(--vd-ink-muted); font-size:10px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; } .history-mobile-meta,.history-article-sku { display:none; } .history-cell-sub,.history-cell small { display:block; margin-top:3px; overflow:hidden; color:var(--vd-ink-muted); font-size:9px; line-height:1.35; text-overflow:ellipsis; } .history-cell strong,.history-platform-name { display:block; overflow:hidden; color:var(--vd-ink); font-size:10px; font-weight:740; line-height:1.35; text-overflow:ellipsis; } .history-readiness-pill { width:max-content; max-width:100%; display:inline-flex; align-items:center; margin-top:4px; padding:2px 7px; border-radius:var(--vd-radius-xl); background:var(--vd-surface-muted); color:var(--vd-ink-muted); font-size:9px; font-weight:760; line-height:1.35; } .history-readiness-pill.is-ready { background:var(--vd-success-soft); color:var(--vd-success); } .history-readiness-pill.is-incomplete { background:var(--vd-warning-soft); color:var(--vd-warning); } .history-platform-publish { margin-top:3px; } .history-cell-price.tone-success .history-cell-sub { color:var(--vd-success); } .history-cell-price.tone-warning .history-cell-sub { color:var(--vd-warning); } .history-cell-price.tone-danger .history-cell-sub { color:var(--vd-danger); } .history-cell-provider { display:grid; grid-template-columns:28px minmax(0,1fr); align-items:center; gap:var(--vd-space-2); } .history-provider-mark { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:var(--vd-radius-xs); background:var(--vd-info-soft); color:var(--vd-info); } .history-cell-profitability.tone-success strong { color:var(--vd-success); } .history-cell-profitability.tone-warning strong { color:var(--vd-warning); } .history-cell-profitability.tone-danger strong { color:var(--vd-danger); } .history-status-select { appearance:none; width:auto; min-width:58px; min-height:27px; padding:0 10px; border:0; border-radius:var(--vd-radius-xl); outline:0; background:var(--vd-success-soft); color:var(--vd-success); font:inherit; font-size:9px; font-weight:760; cursor:pointer; } .history-status-select.status-reserved { background:var(--vd-warning-soft); color:var(--vd-warning); } .history-status-select.status-sold { background:var(--vd-surface-muted); color:var(--vd-ink-secondary); } .history-publish-date { display:block; color:var(--vd-ink-secondary); font-size:9px; line-height:1.35; white-space:nowrap; } .history-publish-badges { display:flex; flex-wrap:wrap; gap:3px; margin-top:3px; min-width:0; } .history-publish-empty { color:var(--vd-ink-muted); font-size:9px; } .history-publish-badge { display:inline-flex; align-items:center; gap:3px; max-width:100%; color:var(--vd-ink-muted); font-size:9px; line-height:1.3; } .history-publish-badge.published { color:var(--vd-success); } .history-publish-badge.failed { color:var(--vd-danger); } .history-row-menu-button { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0; border:0; border-radius:var(--vd-radius-xs); background:transparent; color:var(--vd-ink-secondary); cursor:pointer; } .history-row-menu-button:hover { background:var(--vd-surface-muted); color:var(--vd-ink); } .history-row-menu-portal { --vd-runtime-history-row-menu-left:0; --vd-runtime-history-row-menu-top:0; position:fixed; left:var(--vd-runtime-history-row-menu-left); top:var(--vd-runtime-history-row-menu-top); width:180px; padding:var(--vd-space-2); } .history-hide-platform .history-cell-platform,.history-hide-provider .history-cell-provider,.history-hide-price .history-cell-price,.history-hide-profitability .history-cell-profitability,.history-hide-status .history-cell-status,.history-hide-location .history-cell-location,.history-hide-published .history-cell-published { display:none; } .history-empty-state { display:grid; place-items:center; min-height:280px; padding:var(--vd-space-8); text-align:center; } .history-empty-icon { display:grid; place-items:center; width:46px; height:46px; margin-bottom:var(--vd-space-3); border-radius:var(--vd-radius-xs); background:var(--vd-surface-muted); color:var(--vd-ink-muted); } .history-empty-state h3 { margin:0; font-size:18px; } .history-empty-state p { margin:var(--vd-space-2) 0 var(--vd-space-4); color:var(--vd-ink-muted); font-size:12px; } .history-table-footer { display:flex; align-items:center; justify-content:space-between; gap:var(--vd-space-4); min-height:54px; padding:var(--vd-space-2) var(--vd-space-3); border:0; border-top:1px solid var(--vd-line); border-radius:0; background:var(--vd-surface-raised); } .history-page-size { display:flex; align-items:center; gap:var(--vd-space-2); color:var(--vd-ink-secondary); font-size:10px; } .history-page-size select { min-height:32px; padding:0 26px 0 9px; border:1px solid var(--vd-line); border-radius:var(--vd-radius-xs); background:var(--vd-surface-raised); color:var(--vd-ink); font:inherit; } .history-pagination-nav,.history-page-buttons { display:flex; align-items:center; gap:4px; } .history-page-button,.history-pagination-nav .page-nav-btn { min-width:32px; height:32px; padding:0 7px; border:1px solid var(--vd-line); border-radius:var(--vd-radius-xs); background:var(--vd-surface-raised); color:var(--vd-ink-secondary); font:inherit; font-size:10px; cursor:pointer; } .history-page-button:hover:not(.active),.history-pagination-nav .page-nav-btn:hover:not(:disabled) { background:var(--vd-surface-muted); color:var(--vd-ink); } .history-page-button.active { border-color:var(--vd-brand); background:var(--vd-brand); color:var(--vd-on-accent); } .history-pagination-nav .page-nav-btn:disabled { opacity:.35; cursor:default; } #history[data-article-view="cards"] .history-table-shell { overflow:visible; border:0; background:transparent; } #history[data-article-view="cards"] .history-table-scroll { overflow:visible; } #history[data-article-view="cards"] .history-table-head { display:none; } #history[data-article-view="cards"] .history-table { min-width:0; } #history[data-article-view="cards"] .history-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:var(--vd-space-3); padding:0; } #history[data-article-view="cards"] .history-row { min-height:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-areas:"select menu" "article article" "price platform" "status location"; gap:10px var(--vd-space-4); align-items:start; padding:var(--vd-space-3); overflow:hidden; border:1px solid var(--vd-line); border-radius:var(--vd-radius-sm); background:var(--vd-surface-raised); transition:border-color var(--vd-motion-fast) ease,background var(--vd-motion-fast) ease; } #history[data-article-view="cards"] .history-row:hover { border-color:color-mix(in srgb,var(--vd-brand) 28%,var(--vd-line)); background:var(--vd-surface-raised); } #history[data-article-view="cards"] .history-row.selected { border-color:color-mix(in srgb,var(--vd-brand) 42%,var(--vd-line)); background:color-mix(in srgb,var(--vd-brand-soft) 42%,var(--vd-surface-raised)); } #history[data-article-view="cards"] .history-cell { min-width:0; padding:0; border:0; } #history[data-article-view="cards"] .history-cell-select { grid-area:select; justify-content:flex-start; } #history[data-article-view="cards"] .history-cell-menu { grid-area:menu; justify-content:flex-end; } #history[data-article-view="cards"] .history-cell-article { grid-area:article; gap:var(--vd-space-3); padding-bottom:var(--vd-space-2); } #history[data-article-view="cards"] .history-cell-platform { grid-area:platform; } #history[data-article-view="cards"] .history-cell-price { grid-area:price; } #history[data-article-view="cards"] .history-cell-status { grid-area:status; } #history[data-article-view="cards"] .history-cell-location { grid-area: location; } #history[data-article-view="cards"] .history-thumb { width:62px; height:62px; } #history[data-article-view="cards"] .history-article-title { font-size:14px; white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; } #history[data-article-view="cards"] .history-cell-platform,#history[data-article-view="cards"] .history-cell-price,#history[data-article-view="cards"] .history-cell-status,#history[data-article-view="cards"] .history-cell-location { display:block; min-height:38px; } #history[data-article-view="cards"] .history-cell[data-label]::before { content:attr(data-label); display:block; width:100%; margin-bottom:4px; color:var(--vd-ink-muted); font-size:8px; font-weight:760; line-height:1; text-transform:uppercase; letter-spacing:.055em; } #history[data-article-view="cards"] .history-cell-article::before,#history[data-article-view="cards"] .history-cell-menu::before,#history[data-article-view="cards"] .history-cell-select::before { content:none; } #history[data-article-view="cards"] .history-table-footer { margin-top:var(--vd-space-3); padding-inline:0; border-top:1px solid var(--vd-line); background:transparent; } @container history-page (max-width:1180px) { .history-profitability-metrics,.history-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .history-kpi-card { border-left:0; } .history-kpi-card:nth-child(even) { border-left:1px solid var(--vd-line); } .history-kpi-card:nth-child(n+3) { border-top:1px solid var(--vd-line); } .history-reset-filters { justify-self:start; } } @container history-page (max-width:820px) { .history-page-heading { align-items:flex-start; flex-direction:column; gap:var(--vd-space-3); } .history-page-actions { width:100%; justify-content:space-between; } .history-reset-filters { grid-column:1/-1; justify-self:start; } .history-batch-bar { align-items:flex-start; flex-wrap:wrap; } .history-batch-actions { margin-left:0; } .history-clear-selection { margin-left:0; } .history-selection-summary { flex:1 1 220px; } .history-table-footer { align-items:flex-start; flex-direction:column; } .history-pagination-nav { width:100%; justify-content:flex-end; } } @container history-page (max-width: 620px) { .history-page { gap:var(--vd-space-3); } .history-saved-views { margin-inline:calc(var(--vd-space-1) * -1); padding-inline:var(--vd-space-1); } .history-view-toggle { display:none; } .history-heading-copy h2 { font-size:30px; } .history-page-actions { overflow-x:auto; flex-wrap:nowrap; justify-content:flex-start; padding-bottom:2px; } .history-page-actions>* { flex:0 0 auto; } .history-view-choice { min-width:78px; } .history-profitability-metrics,.history-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .history-kpi-card { min-height:78px; padding:var(--vd-space-3); } .history-kpi-copy strong { font-size:21px; } .history-custom-dates { grid-template-columns:1fr 1fr; } .history-batch-actions { width:100%; margin-left:0; overflow-x:auto; flex-wrap:nowrap; } .history-batch-primary { flex-wrap:nowrap; } .history-select-all-filtered { order:3; } .history-bulk-dialog { width:calc(100vw - 20px); max-height:calc(100dvh - 20px); } .history-bulk-context { grid-template-columns:1fr 1fr; } .history-bulk-context>div:first-child { grid-column:1/-1; border-bottom:1px solid var(--vd-line); } .history-bulk-context>div:nth-child(2) { border-left:0; } .history-bulk-body { padding:var(--vd-space-4); } .history-table-shell { overflow:visible; border:0; background:transparent; } .history-table-scroll { overflow:visible; } #history .history-table { min-width:0; } #history .history-table-head { display:none; } #history[data-article-view="list"] .history-list, #history[data-article-view="cards"] .history-list { display:grid; grid-template-columns:1fr; gap:var(--vd-space-2); padding:0; } #history[data-article-view="list"] .history-row, #history[data-article-view="cards"] .history-row { min-height:0; display:grid; grid-template-columns:22px minmax(0,1fr) 32px; grid-template-areas:"select article menu"; gap:var(--vd-space-2); align-items:start; padding:10px; overflow:hidden; border:1px solid var(--vd-line); border-radius:var(--vd-radius-sm); background:var(--vd-surface-raised); box-shadow:none; } #history[data-article-view="list"] .history-row:last-child, #history[data-article-view="cards"] .history-row:last-child { border-bottom:1px solid var(--vd-line); } #history[data-article-view="list"] .history-cell, #history[data-article-view="cards"] .history-cell { padding:0; border:0; } #history[data-article-view="list"] .history-cell-select, #history[data-article-view="cards"] .history-cell-select { grid-area:select; justify-content:flex-start; padding-top:3px; } #history[data-article-view="list"] .history-cell-article, #history[data-article-view="cards"] .history-cell-article { grid-area:article; display:flex; align-items:flex-start; gap:10px; padding:0; } #history[data-article-view="list"] .history-cell-menu, #history[data-article-view="cards"] .history-cell-menu { grid-area:menu; justify-content:flex-end; } #history[data-article-view="list"] .history-cell-platform, #history[data-article-view="list"] .history-cell-provider, #history[data-article-view="list"] .history-cell-price, #history[data-article-view="list"] .history-cell-profitability, #history[data-article-view="list"] .history-cell-status, #history[data-article-view="list"] .history-cell-location, #history[data-article-view="list"] .history-cell-published, #history[data-article-view="cards"] .history-cell-platform, #history[data-article-view="cards"] .history-cell-provider, #history[data-article-view="cards"] .history-cell-price, #history[data-article-view="cards"] .history-cell-profitability, #history[data-article-view="cards"] .history-cell-status, #history[data-article-view="cards"] .history-cell-location, #history[data-article-view="cards"] .history-cell-published { display:none; } #history[data-article-view="list"] .history-cell-provider { display: none; } #history .history-thumb { width:64px; height:64px; border-radius:var(--vd-radius-xs); } #history .history-article-copy { min-width:0; display:grid; gap:2px; } #history .history-article-title { font-size:13px; line-height:1.25; white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; } #history .history-article-description { display:-webkit-box; overflow:hidden; color:var(--vd-ink-muted); font-size:10px; line-height:1.3; -webkit-box-orient:vertical; -webkit-line-clamp:2; } #history .history-article-sku { display:none; } #history .history-mobile-meta { display:flex; align-items:center; justify-content:space-between; gap:var(--vd-space-2); margin-top:3px; min-width:0; } #history .history-mobile-meta span { overflow:hidden; color:var(--vd-ink-secondary); font-size:10px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; } #history .history-mobile-meta strong { flex:0 0 auto; color:var(--vd-ink); font-size:12px; font-weight:800; } .history-table-footer { margin-top:var(--vd-space-2); padding-inline:0; border-top:1px solid var(--vd-line); background:transparent; } .history-page-size { width:100%; justify-content:space-between; } } @container history-page (max-width: 440px) { .history-profitability-metrics,.history-kpi-grid { grid-template-columns:1fr; } .history-kpi-card,.history-kpi-card:nth-child(even) { border-left:0; } .history-kpi-card:nth-child(n+2) { border-top:1px solid var(--vd-line); } .history-custom-dates { grid-template-columns:1fr; } } #history[data-vd-article-results="ap44.66"] .article-results-shell { min-width:0; overflow:hidden; border:1px solid var(--vd-line); border-radius:5px; background:var(--vd-surface-raised); } #history[data-vd-article-results="ap44.66"] .article-results-scroll { min-width:0; overflow-x:auto; overscroll-behavior-inline:contain; } #history[data-vd-article-results="ap44.66"] .article-results-table { min-width:900px; } #history[data-vd-article-results="ap44.66"] .article-results-head, #history[data-vd-article-results="ap44.66"] .article-results-row { display:grid; grid-template-columns:42px minmax(300px,2.3fr) minmax(104px,.64fr) minmax(170px,.92fr) minmax(126px,.76fr) minmax(160px,.86fr) 82px; align-items:center; min-width:0; } #history[data-vd-article-results="ap44.66"] .article-results-head { min-height:44px; border-bottom:1px solid var(--vd-line); background:var(--vd-surface-raised); color:var(--vd-ink-muted); font-size:10px; font-weight:740; letter-spacing:.01em; } #history[data-vd-article-results="ap44.66"] .article-results-head-cell { min-width:0; padding:0 12px; } #history[data-vd-article-results="ap44.66"] .article-results-head-select { display:flex; justify-content:center; padding-inline:8px; } #history[data-vd-article-results="ap44.66"] .article-results-head-actions { text-align:right; } #history[data-vd-article-results="ap44.66"] .article-results-body { display:block; min-width:0; } #history[data-vd-article-results="ap44.66"] .article-results-row { min-height:78px; border-bottom:1px solid var(--vd-line); background:var(--vd-surface-raised); transition:background var(--vd-motion-fast) ease; } #history[data-vd-article-results="ap44.66"] .article-results-row:last-child { border-bottom:0; } #history[data-vd-article-results="ap44.66"] .article-results-row:hover { background:color-mix(in srgb,var(--vd-surface-muted) 46%,var(--vd-surface-raised)); } #history[data-vd-article-results="ap44.66"] .article-results-row.is-selected { background:color-mix(in srgb,var(--vd-brand-soft) 54%,var(--vd-surface-raised)); } #history[data-vd-article-results="ap44.66"] .article-results-row:focus-visible { outline:2px solid var(--vd-focus-ring); outline-offset:-2px; } #history[data-vd-article-results="ap44.66"] .article-results-cell { min-width:0; padding:10px 12px; color:var(--vd-ink-secondary); font-size:12px; } #history[data-vd-article-results="ap44.66"] .article-results-select { display:flex; justify-content:center; padding-inline:8px; } #history[data-vd-article-results="ap44.66"] .article-results-row-select, #history[data-vd-article-results="ap44.66"] #history-select-all { width:16px; height:16px; margin:0; accent-color:var(--vd-brand); cursor:pointer; } #history[data-vd-article-results="ap44.66"] .article-results-product { display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:12px; } #history[data-vd-article-results="ap44.66"] .article-results-thumb { width:64px; height:56px; display:block; object-fit:cover; border:1px solid var(--vd-line); border-radius:4px; background:var(--vd-surface-muted); } #history[data-vd-article-results="ap44.66"] .article-results-thumb-placeholder { display:flex; align-items:center; justify-content:center; color:var(--vd-ink-muted); } #history[data-vd-article-results="ap44.66"] .article-results-product-copy { display:grid; gap:4px; min-width:0; } #history[data-vd-article-results="ap44.66"] .article-results-title { width:max-content; max-width:100%; overflow:hidden; padding:0; border:0; background:transparent; color:var(--vd-ink); font:inherit; font-size:13px; font-weight:730; line-height:1.25; text-align:left; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; } #history[data-vd-article-results="ap44.66"] .article-results-title:hover { color:var(--vd-brand); } #history[data-vd-article-results="ap44.66"] .article-results-description { display:-webkit-box; overflow:hidden; margin:0; color:var(--vd-ink-muted); font-size:11px; line-height:1.35; -webkit-box-orient:vertical; -webkit-line-clamp:2; } #history[data-vd-article-results="ap44.66"] .article-results-mobile-meta { display:none; align-items:center; justify-content:space-between; gap:12px; color:var(--vd-ink-secondary); font-size:11px; } #history[data-vd-article-results="ap44.66"] .article-results-price, #history[data-vd-article-results="ap44.66"] .article-results-status, #history[data-vd-article-results="ap44.66"] .article-results-storage { display:grid; gap:3px; align-content:center; } #history[data-vd-article-results="ap44.66"] .article-results-price strong, #history[data-vd-article-results="ap44.66"] .article-results-storage strong { overflow:hidden; color:var(--vd-ink); font-size:12px; font-weight:730; text-overflow:ellipsis; white-space:nowrap; } #history[data-vd-article-results="ap44.66"] .article-results-price small, #history[data-vd-article-results="ap44.66"] .article-results-status small, #history[data-vd-article-results="ap44.66"] .article-results-storage small { overflow:hidden; color:var(--vd-ink-muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; } #history[data-vd-article-results="ap44.66"] .article-results-price.tone-success small { color:var(--vd-success); } #history[data-vd-article-results="ap44.66"] .article-results-price.tone-warning small { color:var(--vd-warning); } #history[data-vd-article-results="ap44.66"] .article-results-price.tone-danger small { color:var(--vd-danger); } #history[data-vd-article-results="ap44.66"] .article-results-platform { display:grid; gap:5px; align-content:center; } #history[data-vd-article-results="ap44.66"] .article-results-platform-line { display:flex; align-items:center; flex-wrap:wrap; gap:5px; min-width:0; } #history[data-vd-article-results="ap44.66"] .article-results-platform-name { color:var(--vd-ink); font-size:11px; font-weight:720; } #history[data-vd-article-results="ap44.66"] .article-results-readiness { display:inline-flex; align-items:center; gap:3px; min-height:22px; padding:0 6px; border:1px solid var(--vd-line); border-radius:4px; background:var(--vd-surface-muted); color:var(--vd-ink-secondary); font-size:9px; font-weight:700; white-space:nowrap; } #history[data-vd-article-results="ap44.66"] .article-results-readiness.is-ready { border-color:color-mix(in srgb,var(--vd-success) 28%,var(--vd-line)); background:var(--vd-success-soft); color:var(--vd-success); } #history[data-vd-article-results="ap44.66"] .article-results-readiness.is-incomplete { border-color:color-mix(in srgb,var(--vd-warning) 34%,var(--vd-line)); background:var(--vd-warning-soft); color:var(--vd-warning); } #history[data-vd-article-results="ap44.66"] .article-results-publish { overflow:hidden; color:var(--vd-ink-muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; } #history[data-vd-article-results="ap44.66"] .article-results-publish .history-publish-badge { margin-right:4px; } #history[data-vd-article-results="ap44.66"] .article-results-publish-empty { color:var(--vd-ink-muted); } #history[data-vd-article-results="ap44.66"] .article-results-status-select { width:100%; max-width:132px; height:34px; min-height:34px; padding:0 28px 0 10px; border:1px solid var(--vd-line); border-radius:4px; background:var(--vd-input-bg); color:var(--vd-ink); font:inherit; font-size:11px; } #history[data-vd-article-results="ap44.66"] .article-results-actions { display:flex; align-items:center; justify-content:flex-end; gap:6px; padding-inline:8px 10px; } #history[data-vd-article-results="ap44.66"] .article-results-edit, #history[data-vd-article-results="ap44.66"] .article-results-more { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border:1px solid var(--vd-line); border-radius:4px; background:var(--vd-surface-raised); color:var(--vd-ink-secondary); cursor:pointer; } #history[data-vd-article-results="ap44.66"] .article-results-edit:hover, #history[data-vd-article-results="ap44.66"] .article-results-more:hover { border-color:var(--vd-line-strong); background:var(--vd-surface-muted); color:var(--vd-ink); } #history[data-vd-article-results="ap44.66"] .article-results-edit:focus-visible, #history[data-vd-article-results="ap44.66"] .article-results-more:focus-visible { outline:2px solid var(--vd-focus-ring); outline-offset:2px; } #history[data-vd-article-results="ap44.66"] .article-results-empty { min-height:260px; display:grid; place-items:center; align-content:center; gap:8px; padding:36px 20px; text-align:center; } #history[data-vd-article-results="ap44.66"] .article-results-empty-icon { display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:4px; background:var(--vd-surface-muted); color:var(--vd-ink-muted); } #history[data-vd-article-results="ap44.66"] .article-results-empty h3 { margin:4px 0 0; color:var(--vd-ink); font-size:15px; } #history[data-vd-article-results="ap44.66"] .article-results-empty p { margin:0 0 4px; color:var(--vd-ink-muted); font-size:12px; } #history[data-vd-article-results="ap44.66"] .article-results-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:54px; padding:8px 12px; border-top:1px solid var(--vd-line); background:var(--vd-surface-raised); } #history[data-vd-article-results="ap44.66"] .article-results-page-size { display:flex; align-items:center; gap:8px; color:var(--vd-ink-muted); font-size:10px; } #history[data-vd-article-results="ap44.66"] .article-results-page-size select { height:34px; min-height:34px; padding:0 28px 0 9px; border:1px solid var(--vd-line); border-radius:4px; background:var(--vd-input-bg); color:var(--vd-ink); font:inherit; font-size:11px; } #history[data-vd-article-results="ap44.66"] .article-results-pagination { display:flex; align-items:center; gap:6px; } #history[data-vd-article-results="ap44.66"][data-article-view="cards"] .article-results-shell { overflow:visible; border:0; background:transparent; } #history[data-vd-article-results="ap44.66"][data-article-view="cards"] .article-results-scroll { overflow:visible; } #history[data-vd-article-results="ap44.66"][data-article-view="cards"] .article-results-table { min-width:0; } #history[data-vd-article-results="ap44.66"][data-article-view="cards"] .article-results-head { display:none; } #history[data-vd-article-results="ap44.66"][data-article-view="cards"] .article-results-body { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:12px; } #history[data-vd-article-results="ap44.66"][data-article-view="cards"] .article-results-row { min-height:0; display:grid; grid-template-columns:26px minmax(0,1fr) 72px; grid-template-areas:"select product actions" "price price price" "platform platform platform" "status storage storage"; gap:8px 10px; align-items:start; padding:12px; border:1px solid var(--vd-line); border-radius:5px; } #history[data-vd-article-results="ap44.66"][data-article-view="cards"] .article-results-select { grid-area:select; padding:2px 0 0; justify-content:flex-start; } #history[data-vd-article-results="ap44.66"][data-article-view="cards"] .article-results-product { grid-area:product; padding:0; } #history[data-vd-article-results="ap44.66"][data-article-view="cards"] .article-results-price { grid-area:price; padding:8px 0 0; border-top:1px solid var(--vd-line); } #history[data-vd-article-results="ap44.66"][data-article-view="cards"] .article-results-platform { grid-area:platform; padding:0; } #history[data-vd-article-results="ap44.66"][data-article-view="cards"] .article-results-status { grid-area:status; padding:0; } #history[data-vd-article-results="ap44.66"][data-article-view="cards"] .article-results-storage { grid-area:storage; padding:0; } #history[data-vd-article-results="ap44.66"][data-article-view="cards"] .article-results-actions { grid-area:actions; padding:0; align-self:start; } #history[data-vd-article-results="ap44.66"][data-article-view="cards"] .article-results-footer { margin-top:12px; border:1px solid var(--vd-line); border-radius:5px; } @container history-page (max-width:980px) { #history[data-vd-article-results="ap44.66"] .article-results-table { min-width:0; } #history[data-vd-article-results="ap44.66"] .article-results-head { display:none; } #history[data-vd-article-results="ap44.66"] .article-results-body { display:grid; grid-template-columns:1fr; gap:8px; } #history[data-vd-article-results="ap44.66"] .article-results-shell { overflow:visible; border:0; background:transparent; } #history[data-vd-article-results="ap44.66"] .article-results-scroll { overflow:visible; } #history[data-vd-article-results="ap44.66"] .article-results-row, #history[data-vd-article-results="ap44.66"][data-article-view="cards"] .article-results-row { min-height:0; display:grid; grid-template-columns:24px minmax(0,1fr) 34px; grid-template-areas:"select product actions"; gap:10px; align-items:start; padding:10px; border:1px solid var(--vd-line); border-radius:5px; background:var(--vd-surface-raised); } #history[data-vd-article-results="ap44.66"] .article-results-select, #history[data-vd-article-results="ap44.66"][data-article-view="cards"] .article-results-select { grid-area:select; padding:3px 0 0; justify-content:flex-start; } #history[data-vd-article-results="ap44.66"] .article-results-product, #history[data-vd-article-results="ap44.66"][data-article-view="cards"] .article-results-product { grid-area:product; grid-template-columns:64px minmax(0,1fr); padding:0; } #history[data-vd-article-results="ap44.66"] .article-results-actions, #history[data-vd-article-results="ap44.66"][data-article-view="cards"] .article-results-actions { grid-area:actions; padding:0; align-self:start; } #history[data-vd-article-results="ap44.66"] .article-results-edit { display:none; } #history[data-vd-article-results="ap44.66"] .article-results-more { width:30px; height:30px; border:0; background:transparent; } #history[data-vd-article-results="ap44.66"] .article-results-price, #history[data-vd-article-results="ap44.66"] .article-results-platform, #history[data-vd-article-results="ap44.66"] .article-results-status, #history[data-vd-article-results="ap44.66"] .article-results-storage { display:none; } #history[data-vd-article-results="ap44.66"] .article-results-mobile-meta { display:flex; } #history[data-vd-article-results="ap44.66"] .article-results-footer, #history[data-vd-article-results="ap44.66"][data-article-view="cards"] .article-results-footer { margin-top:8px; border:1px solid var(--vd-line); border-radius:5px; } } @container history-page (max-width:620px) { #history[data-vd-article-results="ap44.66"] .article-results-product, #history[data-vd-article-results="ap44.66"][data-article-view="cards"] .article-results-product { grid-template-columns:58px minmax(0,1fr); gap:10px; } #history[data-vd-article-results="ap44.66"] .article-results-thumb { width:58px; height:54px; } #history[data-vd-article-results="ap44.66"] .article-results-title { font-size:12px; } #history[data-vd-article-results="ap44.66"] .article-results-description { -webkit-line-clamp:2; font-size:10px; } #history[data-vd-article-results="ap44.66"] .article-results-footer { align-items:flex-start; flex-direction:column; } #history[data-vd-article-results="ap44.66"] .article-results-pagination { width:100%; justify-content:flex-end; } } } @layer vendoo.interactions { .history-view-choice:focus-visible,.history-reset-filters:focus-visible,.history-filter-chip-clear:focus-visible,.history-row:focus-visible,.history-row-menu-button:focus-visible,.history-page-button:focus-visible,.history-pagination-nav .page-nav-btn:focus-visible { outline:2px solid var(--vd-focus-ring); outline-offset:2px; } @media (prefers-reduced-motion: reduce) { .history-row,.history-view-choice { transition:none; } } @media (pointer:coarse) { .history-batch-secondary button,.history-row-menu-portal button,.history-row-menu-button { min-height:var(--vd-component-touch-target); } } } @layer vendoo.pages { #history[data-vd-history-polish="ap44.58"] { gap:20px; } #history[data-vd-history-polish="ap44.58"] .history-page-heading { align-items:center; gap:24px; } #history[data-vd-history-polish="ap44.58"] .history-heading-copy h2 { font-size:clamp(28px,2.5vw,34px); line-height:1.1; letter-spacing:-.03em; } #history[data-vd-history-polish="ap44.58"] .history-heading-copy p { margin-top:8px; max-width:720px; font-size:13px; } #history[data-vd-history-polish="ap44.58"] .history-page-actions { gap:10px; } #history[data-vd-history-polish="ap44.58"] .history-page-actions .vd-button { min-height:40px; padding-inline:14px; border-radius:5px; } #history[data-vd-history-polish="ap44.58"] .history-new-listing { gap:8px; } #history[data-vd-history-polish="ap44.58"] .history-profitability-overview, #history[data-vd-history-polish="ap44.58"] .history-kpi-strip { display:none; } #history[data-vd-history-polish="ap44.58"] .history-controls-stack { display:grid; gap:28px; min-width:0; } #history[data-vd-history-polish="ap44.58"] .history-saved-views { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px; min-width:0; margin:0; padding:0; overflow:visible; border:0; border-radius:0; background:transparent; scrollbar-width:none; } #history[data-vd-history-polish="ap44.58"] .history-saved-views::-webkit-scrollbar { display:none; } #history[data-vd-history-polish="ap44.58"] .history-saved-view { width:100%; min-width:0; min-height:52px; justify-content:flex-start; gap:10px; padding:0 12px; border:0; border-radius:0; background:transparent; color:var(--vd-ink-secondary); font-size:12px; font-weight:680; box-shadow:none; } #history[data-vd-history-polish="ap44.58"] .history-saved-view:last-child { border:0; } #history[data-vd-history-polish="ap44.58"] .history-saved-view:hover { border:0; background:transparent; color:var(--vd-ink); } #history[data-vd-history-polish="ap44.58"] .history-saved-view.is-active { border:0; background:transparent; color:var(--vd-ink); font-weight:800; box-shadow:none; } #history[data-vd-history-polish="ap44.58"] .history-saved-view-icon { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; flex:0 0 22px; color:var(--vd-ink-secondary); } #history[data-vd-history-polish="ap44.58"] .history-saved-view[data-history-saved-view="incomplete"] .history-saved-view-icon { color:var(--vd-warning); } #history[data-vd-history-polish="ap44.58"] .history-saved-view[data-history-saved-view="ready"] .history-saved-view-icon { color:var(--vd-success); } #history[data-vd-history-polish="ap44.58"] .history-saved-view[data-history-saved-view="unpublished"] .history-saved-view-icon { color:var(--vd-ink-muted); } #history[data-vd-history-polish="ap44.58"] .history-saved-view[data-history-saved-view="sold"] .history-saved-view-icon { color:var(--vd-success); } #history[data-vd-history-polish="ap44.58"] .history-saved-view.is-active .history-saved-view-icon { filter:saturate(1.05); } #history[data-vd-history-polish="ap44.58"] .history-saved-view strong { margin-left:auto; min-width:28px; height:24px; padding:0 7px; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:4px; background:var(--vd-surface-muted); color:var(--vd-ink-secondary); font-size:10px; font-weight:780; font-variant-numeric:tabular-nums; } #history[data-vd-history-polish="ap44.58"] .history-saved-view.is-active strong { border:0; background:var(--vd-surface-muted); color:var(--vd-ink-secondary); } #history[data-vd-history-polish="ap44.58"] .history-active-filters { margin-top:-2px; } #history[data-vd-history-polish="ap44.58"] .history-filter-chip, #history[data-vd-history-polish="ap44.58"] .history-filter-chip-clear { border-radius:4px; } #history[data-vd-history-polish="ap44.58"] .history-batch-bar, #history[data-vd-history-polish="ap44.58"] .history-selection-icon, #history[data-vd-history-polish="ap44.58"] .history-select-all-filtered, #history[data-vd-history-polish="ap44.58"] .history-popover, #history[data-vd-history-polish="ap44.58"] .history-batch-secondary, #history[data-vd-history-polish="ap44.58"] .history-row-menu-portal, #history[data-vd-history-polish="ap44.58"] .history-columns-panel label, #history[data-vd-history-polish="ap44.58"] .history-export-menu button, #history[data-vd-history-polish="ap44.58"] .history-batch-secondary button, #history[data-vd-history-polish="ap44.58"] .history-row-menu-portal button, #history[data-vd-history-polish="ap44.58"] .vd-button { border-radius:5px; } .history-bulk-dialog, .history-bulk-dialog .vd-button, .history-bulk-close, .history-bulk-field select, .history-bulk-field input, .history-bulk-money, .history-bulk-choice label, .history-bulk-guard, .history-readiness-summary article, .history-readiness-list>button { border-radius:5px; } #history[data-vd-history-polish="ap44.58"] .history-table-shell { border-radius:5px; } #history[data-vd-history-polish="ap44.58"] .history-table { min-width:860px; } #history[data-vd-history-polish="ap44.58"] .history-table-head, #history[data-vd-history-polish="ap44.58"] .history-row { grid-template-columns:40px minmax(310px,2.25fr) minmax(112px,.58fr) minmax(158px,.82fr) minmax(112px,.62fr) minmax(150px,.82fr) 88px; } #history[data-vd-history-polish="ap44.58"] .history-table-head { min-height:46px; background:var(--vd-surface-raised); color:var(--vd-ink-secondary); font-size:10px; font-weight:720; text-transform:none; letter-spacing:0; } #history[data-vd-history-polish="ap44.58"] .history-row { min-height:76px; } #history[data-vd-history-polish="ap44.58"] .history-row:hover { background:color-mix(in srgb,var(--vd-surface-muted) 52%,var(--vd-surface-raised)); } #history[data-vd-history-polish="ap44.58"] .history-thumb { width:54px; height:54px; border-radius:4px; } #history[data-vd-history-polish="ap44.58"] .history-article-copy { gap:4px; } #history[data-vd-history-polish="ap44.58"] .history-article-title { font-size:13px; font-weight:740; } #history[data-vd-history-polish="ap44.58"] .history-article-description { max-width:560px; font-size:10px; } #history[data-vd-history-polish="ap44.58"] .history-cell strong, #history[data-vd-history-polish="ap44.58"] .history-platform-name { font-size:10px; } #history[data-vd-history-polish="ap44.58"] .history-platform-name { width:max-content; max-width:100%; min-height:26px; display:inline-flex; align-items:center; padding:0 8px; border:1px solid var(--vd-line); border-radius:4px; background:var(--vd-surface-raised); color:var(--vd-ink-secondary); font-weight:680; } #history[data-vd-history-polish="ap44.58"] .history-readiness-pill { gap:4px; margin-top:5px; padding:3px 7px; border:1px solid transparent; border-radius:4px; font-size:9px; } #history[data-vd-history-polish="ap44.58"] .history-readiness-pill.is-ready { border-color:color-mix(in srgb,var(--vd-success) 18%,var(--vd-line)); } #history[data-vd-history-polish="ap44.58"] .history-readiness-pill.is-incomplete { border-color:color-mix(in srgb,var(--vd-warning) 20%,var(--vd-line)); } #history[data-vd-history-polish="ap44.58"] .history-status-select { min-height:30px; padding:0 10px; border:1px solid color-mix(in srgb,var(--vd-success) 18%,var(--vd-line)); border-radius:4px; } #history[data-vd-history-polish="ap44.58"] .history-status-select.status-reserved { border-color:color-mix(in srgb,var(--vd-warning) 20%,var(--vd-line)); } #history[data-vd-history-polish="ap44.58"] .history-status-select.status-sold { border-color:var(--vd-line); } #history[data-vd-history-polish="ap44.58"] .history-cell-menu { justify-content:flex-end; gap:6px; padding-right:10px; } #history[data-vd-history-polish="ap44.58"] .history-row-edit-button, #history[data-vd-history-polish="ap44.58"] .history-row-menu-button { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0; border:1px solid var(--vd-line); border-radius:5px; background:var(--vd-surface-raised); color:var(--vd-ink-secondary); cursor:pointer; } #history[data-vd-history-polish="ap44.58"] .history-row-edit-button:hover, #history[data-vd-history-polish="ap44.58"] .history-row-menu-button:hover { border-color:var(--vd-line-strong); background:var(--vd-surface-muted); color:var(--vd-ink); } #history[data-vd-history-polish="ap44.58"] .history-page-size select, #history[data-vd-history-polish="ap44.58"] .history-page-button, #history[data-vd-history-polish="ap44.58"] .history-pagination-nav .page-nav-btn { border-radius:4px; } #history[data-vd-history-polish="ap44.58"][data-article-view="cards"] .history-row { border-radius:5px; } @container history-page (max-width:1320px) { } @container history-page (max-width:900px) { #history[data-vd-history-polish="ap44.58"] .history-page-heading { align-items:flex-start; } } @container history-page (max-width:620px) { #history[data-vd-history-polish="ap44.58"] .history-heading-copy h2 { font-size:28px; } #history[data-vd-history-polish="ap44.58"] .history-page-actions { width:100%; } #history[data-vd-history-polish="ap44.58"] .history-page-actions .history-new-listing { flex:1 1 auto; justify-content:center; } #history[data-vd-history-polish="ap44.58"] .history-controls-stack { gap:20px; } #history[data-vd-history-polish="ap44.58"] .history-saved-views { display:flex; gap:16px; margin:0; padding:0; overflow-x:auto; border:0; border-radius:0; background:transparent; } #history[data-vd-history-polish="ap44.58"] .history-saved-view { width:auto; min-width:142px; min-height:46px; padding:0 10px; border:0; border-radius:0; background:transparent; } #history[data-vd-history-polish="ap44.58"] .history-saved-view:last-child { border:0; } #history[data-vd-history-polish="ap44.58"] .history-row-edit-button { display:none; } #history[data-vd-history-polish="ap44.58"] .history-cell-menu { padding-right:0; } #history[data-vd-history-polish="ap44.58"] .history-row-menu-button { width:30px; height:30px; border:0; background:transparent; } #history[data-vd-history-polish="ap44.58"][data-article-view="list"] .history-row, #history[data-vd-history-polish="ap44.58"][data-article-view="cards"] .history-row { border-radius:5px; } } #history[data-vd-history-polish="ap44.58"] .history-filter-dock[data-vd-filter-toolbar="ap44.65"] { display:grid; gap:14px; min-width:0; padding:18px 20px 16px; border:0; border-radius:0; background:transparent; box-shadow:none; } #history[data-vd-history-polish="ap44.58"] .history-filter-dock-grid { display:grid; grid-template-columns:minmax(300px,2.2fr) repeat(5,minmax(118px,1fr)); align-items:end; gap:14px; min-width:0; } #history[data-vd-history-polish="ap44.58"] .history-filter-dock-field { display:grid; gap:7px; min-width:0; } #history[data-vd-history-polish="ap44.58"] .history-filter-dock-label { padding-inline:2px; color:var(--vd-ink-muted); font-size:11px; font-weight:740; line-height:1.2; } #history[data-vd-history-polish="ap44.58"] .history-filter-dock-searchbox { position:relative; min-width:0; } #history[data-vd-history-polish="ap44.58"] .history-filter-dock-search-icon { position:absolute; top:50%; left:13px; z-index:1; width:17px; height:17px; transform:translateY(-50%); color:var(--vd-ink-muted); pointer-events:none; } #history[data-vd-history-polish="ap44.58"] .history-filter-dock-searchbox #search-input, #history[data-vd-history-polish="ap44.58"] .history-filter-dock-field select, #history[data-vd-history-polish="ap44.58"] .history-filter-dock .history-custom-dates input { width:100%; min-width:0; height:40px; min-height:40px; margin:0; border:1px solid var(--vd-line); border-radius:4px; outline:0; background:var(--vd-input-bg); box-shadow:none; color:var(--vd-ink); font:inherit; font-size:13px; } #history[data-vd-history-polish="ap44.58"] .history-filter-dock-searchbox #search-input { appearance:none; padding:0 13px 0 41px; } #history[data-vd-history-polish="ap44.58"] .history-filter-dock-field select { padding:0 32px 0 12px; overflow:hidden; text-overflow:ellipsis; } #history[data-vd-history-polish="ap44.58"] .history-filter-dock-searchbox #search-input:hover, #history[data-vd-history-polish="ap44.58"] .history-filter-dock-field select:hover, #history[data-vd-history-polish="ap44.58"] .history-filter-dock .history-custom-dates input:hover { border-color:var(--vd-line-strong); } #history[data-vd-history-polish="ap44.58"] .history-filter-dock-searchbox:focus-within #search-input, #history[data-vd-history-polish="ap44.58"] .history-filter-dock-field:focus-within select, #history[data-vd-history-polish="ap44.58"] .history-filter-dock .history-custom-dates label:focus-within input { border-color:var(--vd-brand); box-shadow:0 0 0 var(--vd-component-focus-width) var(--vd-focus); } #history[data-vd-history-polish="ap44.58"] .history-filter-dock-footer { display:flex; align-items:end; justify-content:space-between; gap:12px 16px; min-width:0; } #history[data-vd-history-polish="ap44.58"] .history-filter-dock .history-custom-dates { display:grid; grid-template-columns:repeat(2,minmax(150px,190px)); gap:10px; min-width:0; } #history[data-vd-history-polish="ap44.58"] .history-filter-dock .history-custom-dates.hidden { display:none; } #history[data-vd-history-polish="ap44.58"] .history-filter-dock .history-custom-dates label { display:grid; gap:7px; min-width:0; } #history[data-vd-history-polish="ap44.58"] .history-filter-dock .history-custom-dates label>span { padding-inline:2px; color:var(--vd-ink-muted); font-size:11px; font-weight:740; line-height:1.2; } #history[data-vd-history-polish="ap44.58"] .history-filter-dock-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; min-width:0; margin-left:auto; } #history[data-vd-history-polish="ap44.58"] .history-filter-dock .history-reset-filters { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:34px; height:34px; padding:0 10px; border:1px solid transparent; border-radius:4px; background:transparent; color:var(--vd-ink-secondary); font-size:11px; font-weight:720; white-space:nowrap; } #history[data-vd-history-polish="ap44.58"] .history-filter-dock .history-reset-filters:hover:not(:disabled) { border-color:var(--vd-line); background:var(--vd-surface-muted); color:var(--vd-ink); } #history[data-vd-history-polish="ap44.58"] .history-filter-dock .history-reset-filters:disabled { border-color:transparent; background:transparent; color:var(--vd-ink-muted); opacity:.38; } #history[data-vd-history-polish="ap44.58"] .history-filter-dock .history-view-toggle-toolbar { min-height:34px; height:34px; padding:2px; border:1px solid var(--vd-line); border-radius:4px; background:var(--vd-surface-muted); } #history[data-vd-history-polish="ap44.58"] .history-filter-dock .history-view-toggle-toolbar .history-view-choice { min-width:34px; min-height:28px; height:28px; padding:0 8px; border-radius:3px; } #history[data-vd-history-polish="ap44.58"] .history-filter-dock .history-view-toggle-toolbar .history-view-choice.is-active { background:var(--vd-surface-raised); color:var(--vd-brand); box-shadow:0 1px 2px color-mix(in srgb,var(--vd-ink) 8%,transparent); } #history[data-vd-history-polish="ap44.58"] .history-filter-dock .history-view-toggle-toolbar .history-view-choice>span:last-child { display:none; } #history[data-vd-history-polish="ap44.58"] .history-filter-dock .history-view-toggle-toolbar .history-card-view-icon { margin:0; } @container history-page (max-width:1280px) { #history[data-vd-history-polish="ap44.58"] .history-filter-dock-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } #history[data-vd-history-polish="ap44.58"] .history-filter-dock-search { grid-column:span 2; } } @container history-page (max-width:860px) { #history[data-vd-history-polish="ap44.58"] .history-filter-dock-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } #history[data-vd-history-polish="ap44.58"] .history-filter-dock-search { grid-column:1/-1; } #history[data-vd-history-polish="ap44.58"] .history-filter-dock-footer { align-items:stretch; flex-direction:column; } #history[data-vd-history-polish="ap44.58"] .history-filter-dock-actions { width:100%; margin-left:0; justify-content:space-between; } } @container history-page (max-width:620px) { #history[data-vd-history-polish="ap44.58"] .history-filter-dock[data-vd-filter-toolbar="ap44.65"] { padding:16px; } #history[data-vd-history-polish="ap44.58"] .history-filter-dock .history-custom-dates { grid-template-columns:repeat(2,minmax(0,1fr)); } } @container history-page (max-width:460px) { #history[data-vd-history-polish="ap44.58"] .history-filter-dock-grid { grid-template-columns:1fr; } #history[data-vd-history-polish="ap44.58"] .history-filter-dock-search { grid-column:auto; } #history[data-vd-history-polish="ap44.58"] .history-filter-dock .history-custom-dates { grid-template-columns:1fr; } #history[data-vd-history-polish="ap44.58"] .history-filter-dock-actions { justify-content:flex-start; } #history[data-vd-history-polish="ap44.58"] .history-filter-dock .history-reset-filters { flex:1 1 auto; } #history[data-vd-history-polish="ap44.58"] .history-filter-dock .history-view-toggle-toolbar { display:none; } } } @layer vendoo.interactions { #history[data-vd-history-polish="ap44.58"] .history-row-edit-button:focus-visible { outline:2px solid var(--vd-focus-ring); outline-offset:2px; } } @layer vendoo.pages { #history[data-vd-article-catalog="ap44.67"] { container-name:history-page; container-type:inline-size; min-width:0; padding:0; background:transparent; } #history[data-vd-article-catalog="ap44.67"]:not(.active), #generator:not(.active) { display:none; } #history[data-vd-article-catalog="ap44.67"].active { display:block; } #history[data-vd-article-catalog="ap44.67"] .article-catalog-shell { display:grid; gap:16px; min-width:0; width:100%; } #history[data-vd-article-catalog="ap44.67"] .article-catalog-header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0; padding:0 2px; } #history[data-vd-article-catalog="ap44.67"] .article-catalog-heading-copy { min-width:0; } #history[data-vd-article-catalog="ap44.67"] .article-catalog-eyebrow { display:block; margin:0 0 5px; color:var(--vd-brand); font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; } #history[data-vd-article-catalog="ap44.67"] .article-catalog-heading-copy h2 { margin:0; font-size:clamp(28px,3vw,36px); line-height:1; letter-spacing:-.035em; } #history[data-vd-article-catalog="ap44.67"] .article-catalog-heading-copy p { margin:8px 0 0; max-width:680px; color:var(--vd-ink-secondary); font-size:13px; line-height:1.55; } #history[data-vd-article-catalog="ap44.67"] .article-catalog-header-actions { display:flex; align-items:center; gap:8px; flex:0 0 auto; } #history[data-vd-article-catalog="ap44.67"] .article-catalog-header-actions .vd-button { min-height:38px; height:38px; border-radius:4px; } #history[data-vd-article-catalog="ap44.67"] .article-catalog-controls { display:grid; gap:0; min-width:0; overflow:hidden; border:1px solid var(--vd-line); border-radius:5px; background:var(--vd-surface-raised); box-shadow:0 1px 2px color-mix(in srgb,var(--vd-ink) 4%,transparent); } #history[data-vd-article-catalog="ap44.67"] .article-catalog-saved-views { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; min-width:0; margin:0; padding:0 10px; border:0; border-bottom:1px solid var(--vd-line); background:var(--vd-surface-raised); } #history[data-vd-article-catalog="ap44.67"] .article-catalog-saved-views .history-saved-view { position:relative; min-width:0; min-height:48px; width:100%; padding:0 10px; border:0; border-radius:0; background:transparent; } #history[data-vd-article-catalog="ap44.67"] .article-catalog-saved-views .history-saved-view::after { content:""; position:absolute; left:10px; right:10px; bottom:0; height:2px; background:transparent; } #history[data-vd-article-catalog="ap44.67"] .article-catalog-saved-views .history-saved-view.is-active::after { background:var(--vd-brand); } #history[data-vd-article-catalog="ap44.67"] .article-catalog-filterbar { gap:12px; padding:14px 16px 12px; } #history[data-vd-article-catalog="ap44.67"] .history-filter-dock-grid { grid-template-columns:minmax(280px,2.2fr) repeat(5,minmax(118px,1fr)); gap:12px; } #history[data-vd-article-catalog="ap44.67"] .article-catalog-filterbar .history-filter-dock-field { gap:6px; } #history[data-vd-article-catalog="ap44.67"] .article-catalog-filterbar .history-filter-dock-label { padding:0; } #history[data-vd-article-catalog="ap44.67"] .article-catalog-filterbar .history-filter-dock-searchbox #search-input, #history[data-vd-article-catalog="ap44.67"] .article-catalog-filterbar .history-filter-dock-field select, #history[data-vd-article-catalog="ap44.67"] .article-catalog-filterbar .history-custom-dates input { height:38px; min-height:38px; border-radius:4px; } #history[data-vd-article-catalog="ap44.67"] .article-catalog-filterbar .history-filter-dock-footer { min-height:34px; } #history[data-vd-article-catalog="ap44.67"] .history-active-filters { margin:0; } #history[data-vd-article-catalog="ap44.67"] .history-batch-bar { margin:0; border-radius:5px; } #history[data-vd-article-catalog="ap44.67"] .article-catalog-results { min-width:0; margin:0; overflow:hidden; border:1px solid var(--vd-line); border-radius:5px; background:var(--vd-surface-raised); box-shadow:0 1px 2px color-mix(in srgb,var(--vd-ink) 4%,transparent); } #history[data-vd-article-catalog="ap44.67"] .article-catalog-results .article-results-scroll { min-width:0; } #history[data-vd-article-catalog="ap44.67"] .article-catalog-results .article-results-head { background:var(--vd-surface-muted); } #history[data-vd-article-catalog="ap44.67"] .article-catalog-results .article-results-footer { margin:0; border:0; border-top:1px solid var(--vd-line); border-radius:0; background:var(--vd-surface-raised); } #history[data-vd-article-catalog="ap44.67"] .history-detail:not(.hidden) { min-width:0; } @container history-page (max-width:1280px) { #history[data-vd-article-catalog="ap44.67"] .history-filter-dock-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } #history[data-vd-article-catalog="ap44.67"] .history-filter-dock-search { grid-column:span 2; } } @container history-page (max-width:900px) { #history[data-vd-article-catalog="ap44.67"] .article-catalog-header { align-items:flex-start; flex-direction:column; } #history[data-vd-article-catalog="ap44.67"] .article-catalog-header-actions { width:100%; justify-content:flex-end; } #history[data-vd-article-catalog="ap44.67"] .article-catalog-saved-views { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(150px,1fr); overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:thin; } #history[data-vd-article-catalog="ap44.67"] .history-filter-dock-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } #history[data-vd-article-catalog="ap44.67"] .history-filter-dock-search { grid-column:1/-1; } } @container history-page (max-width:620px) { #history[data-vd-article-catalog="ap44.67"] .article-catalog-shell { gap:12px; } #history[data-vd-article-catalog="ap44.67"] .article-catalog-heading-copy h2 { font-size:28px; } #history[data-vd-article-catalog="ap44.67"] .article-catalog-header-actions { display:grid; grid-template-columns:1fr 1fr; } #history[data-vd-article-catalog="ap44.67"] .article-catalog-header-actions .history-export-wrap, #history[data-vd-article-catalog="ap44.67"] .article-catalog-header-actions .vd-button { width:100%; } #history[data-vd-article-catalog="ap44.67"] .article-catalog-header-actions .history-export-toggle { width:100%; justify-content:center; } #history[data-vd-article-catalog="ap44.67"] .article-catalog-controls { border-radius:4px; } #history[data-vd-article-catalog="ap44.67"] .article-catalog-saved-views { padding:0 6px; grid-auto-columns:minmax(138px,1fr); } #history[data-vd-article-catalog="ap44.67"] .article-catalog-filterbar { padding:12px; } #history[data-vd-article-catalog="ap44.67"] .history-filter-dock-grid { grid-template-columns:1fr; } #history[data-vd-article-catalog="ap44.67"] .history-filter-dock-search { grid-column:auto; } #history[data-vd-article-catalog="ap44.67"] .article-catalog-results { border:0; background:transparent; box-shadow:none; } #history[data-vd-article-catalog="ap44.67"] .article-catalog-results .article-results-footer { border:1px solid var(--vd-line); border-radius:4px; } } } @layer vendoo.pages { #history[data-vd-article-catalog="ap44.67"][data-vd-article-filter-polish="ap44.68"] .article-catalog-filterbar { gap:10px; padding:16px 16px 12px; } #history[data-vd-article-catalog="ap44.67"][data-vd-article-filter-polish="ap44.68"] .history-filter-dock-grid { grid-template-columns:minmax(320px,2.35fr) repeat(5,minmax(122px,1fr)); align-items:end; gap:12px; } #history[data-vd-article-catalog="ap44.67"][data-vd-article-filter-polish="ap44.68"] .history-filter-dock-field { gap:6px; } #history[data-vd-article-catalog="ap44.67"][data-vd-article-filter-polish="ap44.68"] .history-filter-dock-label { display:block; min-height:14px; padding:0 1px; color:var(--vd-ink-secondary); font-size:11px; font-weight:720; line-height:14px; letter-spacing:.01em; } #history[data-vd-article-catalog="ap44.67"][data-vd-article-filter-polish="ap44.68"] .article-catalog-search-control { position:relative; display:grid; grid-template-columns:38px minmax(0,1fr); align-items:center; width:100%; min-width:0; height:40px; min-height:40px; overflow:hidden; border:1px solid var(--vd-line); border-radius:4px; background:var(--vd-input-bg); box-shadow:none; } #history[data-vd-article-catalog="ap44.67"][data-vd-article-filter-polish="ap44.68"] .article-catalog-search-control:hover { border-color:var(--vd-line-strong); } #history[data-vd-article-catalog="ap44.67"][data-vd-article-filter-polish="ap44.68"] .article-catalog-search-control:focus-within { border-color:var(--vd-brand); box-shadow:0 0 0 var(--vd-component-focus-width) var(--vd-focus); } #history[data-vd-article-catalog="ap44.67"][data-vd-article-filter-polish="ap44.68"] .article-catalog-search-control .history-filter-dock-search-icon { position:static; inset:auto; z-index:auto; width:17px; height:17px; transform:none; color:currentColor; } #history[data-vd-article-catalog="ap44.67"][data-vd-article-filter-polish="ap44.68"] .article-catalog-search-icon { position:static; z-index:auto; display:flex; align-items:center; justify-content:center; width:38px; height:100%; transform:none; color:var(--vd-ink-muted); pointer-events:none; } #history[data-vd-article-catalog="ap44.67"][data-vd-article-filter-polish="ap44.68"] .article-catalog-search-input#search-input { appearance:none; width:100%; min-width:0; height:38px; min-height:38px; margin:0; padding:0 12px 0 0; border:0; border-radius:0; outline:0; background:transparent; box-shadow:none; color:var(--vd-ink); font:inherit; font-size:13px; line-height:38px; } #history[data-vd-article-catalog="ap44.67"][data-vd-article-filter-polish="ap44.68"] .article-catalog-search-input#search-input:hover, #history[data-vd-article-catalog="ap44.67"][data-vd-article-filter-polish="ap44.68"] .article-catalog-search-input#search-input:focus { border:0; outline:0; box-shadow:none; } #history[data-vd-article-catalog="ap44.67"][data-vd-article-filter-polish="ap44.68"] .article-catalog-search-input#search-input::placeholder { color:var(--vd-ink-muted); opacity:1; } #history[data-vd-article-catalog="ap44.67"][data-vd-article-filter-polish="ap44.68"] .article-catalog-filterbar .history-filter-dock-field select, #history[data-vd-article-catalog="ap44.67"][data-vd-article-filter-polish="ap44.68"] .article-catalog-filterbar .history-custom-dates input { box-sizing:border-box; height:40px; min-height:40px; padding-top:0; padding-bottom:0; border-radius:4px; font-size:13px; line-height:normal; } #history[data-vd-article-catalog="ap44.67"][data-vd-article-filter-polish="ap44.68"] .article-catalog-filterbar .history-filter-dock-field select { padding-left:12px; padding-right:34px; } #history[data-vd-article-catalog="ap44.67"][data-vd-article-filter-polish="ap44.68"] .history-filter-dock-footer { align-items:center; min-height:32px; margin-top:0; padding-top:0; } #history[data-vd-article-catalog="ap44.67"][data-vd-article-filter-polish="ap44.68"] .history-filter-dock-actions { align-items:center; gap:6px; } #history[data-vd-article-catalog="ap44.67"][data-vd-article-filter-polish="ap44.68"] .history-reset-filters { height:32px; min-height:32px; padding:0 8px; } #history[data-vd-article-catalog="ap44.67"][data-vd-article-filter-polish="ap44.68"] .history-view-toggle-toolbar { height:32px; min-height:32px; } #history[data-vd-article-catalog="ap44.67"][data-vd-article-filter-polish="ap44.68"] .history-view-toggle-toolbar .history-view-choice { min-width:32px; height:26px; min-height:26px; padding:0 7px; } #history[data-vd-article-catalog="ap44.67"][data-vd-article-filter-polish="ap44.68"] .history-custom-dates label { gap:6px; } @container history-page (max-width:1280px) { #history[data-vd-article-catalog="ap44.67"][data-vd-article-filter-polish="ap44.68"] .history-filter-dock-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } #history[data-vd-article-catalog="ap44.67"][data-vd-article-filter-polish="ap44.68"] .history-filter-dock-search { grid-column:span 2; } } @container history-page (max-width:900px) { #history[data-vd-article-catalog="ap44.67"][data-vd-article-filter-polish="ap44.68"] .history-filter-dock-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } #history[data-vd-article-catalog="ap44.67"][data-vd-article-filter-polish="ap44.68"] .history-filter-dock-search { grid-column:1/-1; } } @container history-page (max-width:620px) { #history[data-vd-article-catalog="ap44.67"][data-vd-article-filter-polish="ap44.68"] .article-catalog-filterbar { gap:12px; padding:12px; } #history[data-vd-article-catalog="ap44.67"][data-vd-article-filter-polish="ap44.68"] .history-filter-dock-grid { grid-template-columns:1fr; gap:10px; } #history[data-vd-article-catalog="ap44.67"][data-vd-article-filter-polish="ap44.68"] .history-filter-dock-search { grid-column:auto; } #history[data-vd-article-catalog="ap44.67"][data-vd-article-filter-polish="ap44.68"] .history-filter-dock-footer { align-items:stretch; gap:10px; } #history[data-vd-article-catalog="ap44.67"][data-vd-article-filter-polish="ap44.68"] .history-filter-dock-actions { width:100%; justify-content:space-between; } } } @layer vendoo.pages { #history[data-vd-article-catalog="ap44.67"][data-vd-history-tabs-polish="ap44.69"] .article-catalog-saved-views .history-saved-view::after { content:none; display:none; } #history[data-vd-article-catalog="ap44.67"][data-vd-history-tabs-polish="ap44.69"] .article-catalog-saved-views .history-saved-view [data-history-saved-view-label] { position:relative; display:inline-flex; align-items:center; min-height:24px; color:inherit; font-weight:680; line-height:1.25; } #history[data-vd-article-catalog="ap44.67"][data-vd-history-tabs-polish="ap44.69"] .article-catalog-saved-views .history-saved-view.is-active [data-history-saved-view-label] { color:var(--vd-ink); font-weight:820; } #history[data-vd-article-catalog="ap44.67"][data-vd-history-tabs-polish="ap44.69"] .article-catalog-saved-views .history-saved-view.is-active [data-history-saved-view-label]::after { content:""; position:absolute; left:50%; bottom:-7px; width:18px; height:2px; transform:translateX(-50%); border-radius:2px; background:color-mix(in srgb,var(--vd-brand) 84%,transparent); pointer-events:none; } #history[data-vd-article-catalog="ap44.67"][data-vd-history-tabs-polish="ap44.69"] .article-catalog-filterbar { padding-top:22px; } @container history-page (max-width:620px) { #history[data-vd-article-catalog="ap44.67"][data-vd-history-tabs-polish="ap44.69"] .article-catalog-filterbar { padding-top:18px; } } } @layer vendoo.pages { #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-table { min-width:1040px; } #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-head, #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-row { grid-template-columns:42px minmax(340px,2.55fr) minmax(118px,.72fr) minmax(188px,1fr) minmax(132px,.78fr) minmax(176px,.9fr) 94px; } #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-head { min-height:42px; font-size:10.5px; font-weight:760; letter-spacing:.015em; } #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-head-cell { padding-inline:14px; } #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-head-select { padding-inline:10px; } #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-head-actions { padding-right:14px; text-align:right; } #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-row { min-height:86px; } #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-cell { padding:12px 14px; } #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-select { padding-inline:10px; } #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-product { grid-template-columns:62px minmax(0,1fr); gap:14px; } #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-thumb { width:62px; height:62px; object-fit:cover; } #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-product-copy { gap:5px; } #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-title { font-size:14px; font-weight:740; line-height:1.3; } #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-description { max-width:760px; font-size:11.5px; line-height:1.42; } #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-price, #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-status, #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-storage { gap:4px; } #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-price strong, #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-storage strong { font-size:12.5px; font-weight:750; } #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-price small, #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-status small, #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-storage small { font-size:10.5px; line-height:1.35; } #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-platform { gap:6px; } #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-platform-line { display:grid; justify-items:start; align-items:start; gap:5px; } #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-platform-name { font-size:12px; font-weight:750; } #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-readiness { min-height:23px; padding-inline:7px; font-size:9.5px; } #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-publish { font-size:10.5px; line-height:1.35; } #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-status-select { width:118px; max-width:100%; height:36px; min-height:36px; padding:0 30px 0 11px; font-size:12px; font-weight:560; } #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-storage { padding-right:16px; } #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-actions { display:grid; grid-template-columns:34px 34px; justify-content:end; gap:8px; padding-inline:6px 14px; } #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-edit, #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-more { width:34px; height:34px; } @container history-page (max-width:1180px) and (min-width:981px) { #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-table { min-width:980px; } #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-head, #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-row { grid-template-columns:40px minmax(290px,2.25fr) minmax(106px,.7fr) minmax(166px,.95fr) minmax(120px,.76fr) minmax(150px,.86fr) 86px; } #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-cell, #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-head-cell { padding-inline:10px; } #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-product { grid-template-columns:58px minmax(0,1fr); gap:11px; } #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-thumb { width:58px; height:58px; } } @container history-page (max-width:980px) { #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-table { min-width:0; } #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-row { padding:12px; gap:10px; } #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-product { grid-template-columns:62px minmax(0,1fr); gap:12px; } #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-thumb { width:62px; height:62px; } #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-title { font-size:13px; } #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-description { font-size:11px; line-height:1.4; } #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-more { width:32px; height:32px; } } @container history-page (max-width:620px) { #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-row { padding:10px; } #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-product { grid-template-columns:56px minmax(0,1fr); gap:10px; } #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-thumb { width:56px; height:56px; } #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-title { font-size:12.5px; } #history[data-vd-article-results="ap44.66"][data-vd-article-table-polish="ap44.71"][data-article-view="list"] .article-results-mobile-meta { margin-top:1px; font-size:10.5px; } } } @layer vendoo.pages { @container history-page (max-width:620px) { #history[data-vd-mobile-article-polish="ap44.73"] .article-catalog-shell, #history[data-vd-mobile-article-polish="ap44.73"] .article-catalog-controls, #history[data-vd-mobile-article-polish="ap44.73"] .article-catalog-filterbar, #history[data-vd-mobile-article-polish="ap44.73"] .article-catalog-batchbar, #history[data-vd-mobile-article-polish="ap44.73"] .article-catalog-results, #history[data-vd-mobile-article-polish="ap44.73"] .history-detail { min-width:0; max-width:100%; } #history[data-vd-mobile-article-polish="ap44.73"] .article-catalog-header { gap:14px; } #history[data-vd-mobile-article-polish="ap44.73"] .article-catalog-heading-copy p { font-size:12.5px; line-height:1.5; } #history[data-vd-mobile-article-polish="ap44.73"] .article-catalog-header-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; width:100%; overflow:visible; padding-bottom:0; } #history[data-vd-mobile-article-polish="ap44.73"] .article-catalog-header-actions .history-export-wrap, #history[data-vd-mobile-article-polish="ap44.73"] .article-catalog-header-actions .vd-button, #history[data-vd-mobile-article-polish="ap44.73"] .article-catalog-header-actions .history-export-toggle { width:100%; min-width:0; min-height:44px; height:44px; justify-content:center; } #history[data-vd-mobile-article-polish="ap44.73"] .article-catalog-saved-views { scroll-snap-type:x proximity; scroll-padding-inline:6px; overscroll-behavior-inline:contain; } #history[data-vd-mobile-article-polish="ap44.73"] .article-catalog-saved-views .history-saved-view { min-height:48px; scroll-snap-align:start; } #history[data-vd-mobile-article-polish="ap44.73"] .article-catalog-filterbar .history-filter-dock-label { min-height:16px; font-size:12px; line-height:16px; } #history[data-vd-mobile-article-polish="ap44.73"] .article-catalog-search-control { grid-template-columns:42px minmax(0,1fr); height:44px; min-height:44px; } #history[data-vd-mobile-article-polish="ap44.73"] .article-catalog-search-icon { width:42px; } #history[data-vd-mobile-article-polish="ap44.73"] .article-catalog-search-input#search-input { height:42px; min-height:42px; font-size:16px; line-height:42px; } #history[data-vd-mobile-article-polish="ap44.73"] .article-catalog-filterbar .history-filter-dock-field select, #history[data-vd-mobile-article-polish="ap44.73"] .article-catalog-filterbar .history-custom-dates input { height:44px; min-height:44px; font-size:16px; } #history[data-vd-mobile-article-polish="ap44.73"] .history-reset-filters, #history[data-vd-mobile-article-polish="ap44.73"] .history-view-toggle-toolbar { min-height:44px; height:44px; } #history[data-vd-mobile-article-polish="ap44.73"] .history-view-toggle-toolbar .history-view-choice { min-width:40px; min-height:38px; height:38px; } #history[data-vd-mobile-article-polish="ap44.73"] .history-batch-bar { gap:10px; padding:10px; } #history[data-vd-mobile-article-polish="ap44.73"] .history-batch-actions { max-width:100%; padding-bottom:2px; overscroll-behavior-inline:contain; } #history[data-vd-mobile-article-polish="ap44.73"] .history-batch-primary .vd-button, #history[data-vd-mobile-article-polish="ap44.73"] .history-batch-more > summary, #history[data-vd-mobile-article-polish="ap44.73"] .history-clear-selection, #history[data-vd-mobile-article-polish="ap44.73"] .history-select-all-filtered { min-height:44px; height:44px; flex:0 0 auto; } #history[data-vd-mobile-article-polish="ap44.73"] .history-batch-secondary, #history[data-vd-mobile-article-polish="ap44.73"] .history-row-menu-portal { width:min(260px,calc(100vw - 24px)); max-width:calc(100vw - 24px); } #history[data-vd-mobile-article-polish="ap44.73"] .article-results-row, #history[data-vd-mobile-article-polish="ap44.73"][data-article-view="cards"] .article-results-row { grid-template-columns:30px minmax(0,1fr) 44px; gap:10px; padding:12px; } #history[data-vd-mobile-article-polish="ap44.73"] .article-results-select, #history[data-vd-mobile-article-polish="ap44.73"][data-article-view="cards"] .article-results-select { min-width:30px; min-height:44px; align-items:flex-start; padding-top:4px; } #history[data-vd-mobile-article-polish="ap44.73"] .article-results-row-select { width:20px; height:20px; } #history[data-vd-mobile-article-polish="ap44.73"] .article-results-product, #history[data-vd-mobile-article-polish="ap44.73"][data-article-view="cards"] .article-results-product { grid-template-columns:60px minmax(0,1fr); gap:11px; } #history[data-vd-mobile-article-polish="ap44.73"] .article-results-thumb { width:60px; height:60px; } #history[data-vd-mobile-article-polish="ap44.73"] .article-results-title { width:100%; max-width:100%; display:-webkit-box; overflow:hidden; font-size:14px; line-height:1.32; text-overflow:clip; white-space:normal; overflow-wrap:anywhere; -webkit-box-orient:vertical; -webkit-line-clamp:2; } #history[data-vd-mobile-article-polish="ap44.73"] .article-results-description { font-size:12px; line-height:1.42; } #history[data-vd-mobile-article-polish="ap44.73"] .article-results-mobile-meta { flex-wrap:wrap; gap:4px 10px; margin-top:2px; font-size:12px; line-height:1.35; } #history[data-vd-mobile-article-polish="ap44.73"] .article-results-more { width:44px; height:44px; min-width:44px; min-height:44px; } #history[data-vd-mobile-article-polish="ap44.73"] .article-results-footer, #history[data-vd-mobile-article-polish="ap44.73"][data-article-view="cards"] .article-results-footer { gap:10px; padding:10px; } #history[data-vd-mobile-article-polish="ap44.73"] .article-results-page-size { width:100%; flex-wrap:wrap; gap:8px 10px; font-size:12px; } #history[data-vd-mobile-article-polish="ap44.73"] .article-results-page-size select { min-height:44px; height:44px; font-size:16px; } #history[data-vd-mobile-article-polish="ap44.73"] .article-results-pagination { width:100%; min-height:44px; justify-content:flex-start; overflow-x:auto; overscroll-behavior-inline:contain; } #history[data-vd-mobile-article-polish="ap44.73"] .history-page-buttons { flex:0 0 auto; } #history[data-vd-mobile-article-polish="ap44.73"] .history-page-button, #history[data-vd-mobile-article-polish="ap44.73"] .history-pagination-nav .page-nav-btn { min-width:44px; height:44px; padding-inline:10px; font-size:12px; } } @container history-page (max-width:430px) { #history[data-vd-mobile-article-polish="ap44.73"] .article-catalog-heading-copy h2 { font-size:27px; } #history[data-vd-mobile-article-polish="ap44.73"] .article-catalog-saved-views { grid-auto-columns:minmax(132px,1fr); } #history[data-vd-mobile-article-polish="ap44.73"] .article-catalog-filterbar { padding:12px 10px; } #history[data-vd-mobile-article-polish="ap44.73"] .article-results-row, #history[data-vd-mobile-article-polish="ap44.73"][data-article-view="cards"] .article-results-row { grid-template-columns:28px minmax(0,1fr) 44px; gap:8px; padding:10px; } #history[data-vd-mobile-article-polish="ap44.73"] .article-results-product, #history[data-vd-mobile-article-polish="ap44.73"][data-article-view="cards"] .article-results-product { grid-template-columns:56px minmax(0,1fr); gap:9px; } #history[data-vd-mobile-article-polish="ap44.73"] .article-results-thumb { width:56px; height:56px; } #history[data-vd-mobile-article-polish="ap44.73"] .article-results-page-size { justify-content:space-between; } } } #publish.ux-publish-ready { --ux-publish-list-width: minmax(300px, .72fr); } .ux-publish-guide { align-items: center; background: linear-gradient(135deg, var(--vd-surface-raised), var(--vd-surface-muted)); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-lg); display: grid; gap: 22px; grid-template-columns: minmax(240px, .9fr) minmax(460px, 1.3fr); margin-bottom: 16px; padding: 18px 20px; } .ux-publish-guide-eyebrow { color: var(--vd-brand); display: block; font-size: 10px; font-weight: 780; letter-spacing: .08em; margin-bottom: 5px; text-transform: uppercase; } .ux-publish-guide-copy h3 { color: var(--vd-ink); font-size: clamp(18px, 2vw, 23px); letter-spacing: -.025em; line-height: 1.16; margin: 0 0 6px; } .ux-publish-guide-copy p { color: var(--vd-ink-secondary); line-height: 1.5; margin: 0; } .ux-publish-stages { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .ux-publish-stage { align-items: center; background: var(--vd-surface); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-md); display: grid; gap: 9px; grid-template-columns: 29px minmax(0, 1fr); min-height: 58px; padding: 9px 10px; } .ux-publish-stage-number { align-items: center; background: var(--vd-surface-muted); border-radius: 50%; color: var(--vd-ink-muted); display: inline-flex; font-size: 11px; font-weight: 760; height: 29px; justify-content: center; width: 29px; } .ux-publish-stage-copy strong, .ux-publish-stage-copy small { display: block; } .ux-publish-stage-copy strong { color: var(--vd-ink); font-size: 11px; } .ux-publish-stage-copy small { color: var(--vd-ink-muted); font-size: 8.5px; line-height: 1.3; margin-top: 2px; } .ux-publish-stage.is-active { background: color-mix(in srgb, var(--vd-brand-soft) 46%, var(--vd-surface)); border-color: color-mix(in srgb, var(--vd-brand) 42%, var(--vd-line)); } .ux-publish-stage.is-active .ux-publish-stage-number, .ux-publish-stage.is-complete .ux-publish-stage-number { background: var(--vd-brand); color: var(--vd-on-accent); } .ux-publish-stage.is-complete { border-color: color-mix(in srgb, var(--vd-success) 28%, var(--vd-line)); } #publish .publish-view-tabs { background: transparent; border: 0; margin-bottom: 14px; overflow: visible; padding: 0; } .ux-publish-view-groups { display: grid; gap: 12px; grid-template-columns: minmax(300px, .82fr) minmax(430px, 1.18fr); } .ux-publish-view-group { background: var(--vd-surface-raised); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-md); min-width: 0; padding: 10px; } .ux-publish-view-group-label { color: var(--vd-ink-muted); display: block; font-size: 8.5px; font-weight: 760; letter-spacing: .08em; margin: 0 3px 7px; text-transform: uppercase; } .ux-publish-view-group-items { display: grid; gap: 7px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .ux-publish-view-group[data-publish-view-group="betrieb"] .ux-publish-view-group-items { grid-template-columns: repeat(3, minmax(0, 1fr)); } #publish .publish-view-tab { align-items: center; background: var(--vd-surface); border: 1px solid transparent; border-radius: var(--vd-radius-sm); color: var(--vd-ink-secondary); display: flex; gap: 8px; justify-content: space-between; min-height: 51px; padding: 8px 9px; text-align: left; white-space: normal; } #publish .publish-view-tab:hover { border-color: var(--vd-line-strong); color: var(--vd-ink); } #publish .publish-view-tab.active { background: var(--vd-brand-soft); border-color: color-mix(in srgb, var(--vd-brand) 42%, var(--vd-line)); color: var(--vd-brand); box-shadow: none; } .ux-publish-tab-copy { min-width: 0; } .ux-publish-tab-title, .ux-publish-tab-help { display: block; } .ux-publish-tab-title { font-size: 10.5px; line-height: 1.2; } .ux-publish-tab-help { color: var(--vd-ink-muted); font-size: 7.8px; font-weight: 520; line-height: 1.3; margin-top: 3px; } #publish .publish-view-tab.active .ux-publish-tab-help { color: color-mix(in srgb, var(--vd-brand) 72%, var(--vd-ink-muted)); } #publish .publish-tab-count, #publish .publish-tab-badge { flex: 0 0 auto; margin: 0; } .ux-publish-status-drawer { background: var(--vd-surface-raised); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-md); margin-bottom: 14px; } .ux-publish-status-summary { align-items: center; cursor: pointer; display: flex; gap: 16px; justify-content: space-between; list-style: none; min-height: 58px; padding: 10px 14px; } .ux-publish-status-summary::-webkit-details-marker { display: none; } .ux-publish-status-summary::after { color: var(--vd-ink-muted); content: '›'; font-size: 19px; order: 3; transform: rotate(90deg); transition: transform .15s ease; } .ux-publish-status-drawer:not([open]) .ux-publish-status-summary::after { transform: rotate(0deg); } .ux-publish-status-summary-copy { min-width: 0; } .ux-publish-status-summary-copy strong, .ux-publish-status-summary-copy small { display: block; } .ux-publish-status-summary-copy strong { color: var(--vd-ink); font-size: 11px; } .ux-publish-status-summary-copy small { color: var(--vd-ink-muted); font-size: 8.5px; margin-top: 3px; } .ux-publish-health { background: var(--vd-success-soft); border: 1px solid color-mix(in srgb, var(--vd-success) 30%, var(--vd-line)); border-radius: 999px; color: var(--vd-success); flex: 0 0 auto; font-size: 9px; font-weight: 720; padding: 5px 9px; } .ux-publish-health.is-active { background: var(--vd-warning-soft); border-color: color-mix(in srgb, var(--vd-warning) 34%, var(--vd-line)); color: var(--vd-warning); } .ux-publish-health.is-danger { background: var(--vd-danger-soft); border-color: color-mix(in srgb, var(--vd-danger) 34%, var(--vd-line)); color: var(--vd-danger); } .ux-publish-status-content { border-top: 1px solid var(--vd-line); padding: 12px; } .ux-publish-status-content .publish-status-rail { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; } .ux-publish-status-content .publish-rail-section { margin: 0; min-width: 0; } #publish .publish-center-grid { align-items: start; display: grid; gap: 14px; grid-template-columns: var(--ux-publish-list-width) minmax(0, 1.5fr); } #publish[data-publish-operational] .publish-center-grid { grid-template-columns: minmax(0, 1fr); } #publish[data-publish-operational] .publish-list-panel { display: none; } #publish[data-publish-operational] .publish-workspace-panel { min-width: 0; width: 100%; } #publish .publish-list-panel, #publish .publish-workspace-panel { border-radius: var(--vd-radius-md); } #publish .publish-list-panel-head { align-items: center; gap: 10px; } #publish .publish-list-filters { gap: 8px; } .ux-publish-active-filters { align-items: center; display: flex; flex-wrap: wrap; gap: 5px; padding: 0 12px 10px; } .ux-publish-active-filters.is-empty { display: none; } .ux-publish-active-filters > strong { color: var(--vd-ink-muted); font-size: 8px; letter-spacing: .06em; margin-right: 2px; text-transform: uppercase; } .ux-publish-filter-chip { align-items: center; background: var(--vd-surface-muted); border: 1px solid var(--vd-line); border-radius: 999px; color: var(--vd-ink-secondary); display: inline-flex; font-size: 8.5px; gap: 4px; min-height: 25px; padding: 0 3px 0 8px; } .ux-publish-filter-clear { align-items: center; background: transparent; border: 0; border-radius: 50%; color: var(--vd-ink-muted); cursor: pointer; display: inline-flex; font-size: 14px; height: 19px; justify-content: center; padding: 0; width: 19px; } .ux-publish-filter-clear:hover { background: var(--vd-surface-raised); color: var(--vd-danger); } #publish .publish-batch-bar { align-items: center; background: var(--vd-surface-raised); border-top: 1px solid var(--vd-line); display: none; gap: 7px; padding: 9px 10px; } #publish[data-has-publish-selection] .publish-batch-bar { display: flex; } .ux-publish-batch-primary { align-items: center; display: flex; flex: 1 1 auto; gap: 6px; } .ux-publish-batch-more { position: relative; } .ux-publish-batch-more > summary { align-items: center; border: 1px solid var(--vd-line); border-radius: 7px; color: var(--vd-ink-secondary); cursor: pointer; display: inline-flex; font-size: 9px; font-weight: 650; list-style: none; min-height: 31px; padding: 0 9px; } .ux-publish-batch-more > summary::-webkit-details-marker { display: none; } .ux-publish-batch-more > summary::after { content: '⌄'; margin-left: 6px; } .ux-publish-batch-secondary { background: var(--vd-surface-raised); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-sm); box-shadow: var(--vd-shadow-float); display: grid; gap: 5px; min-width: 185px; padding: 7px; position: absolute; right: 0; top: calc(100% + 7px); z-index: 45; } .ux-publish-batch-secondary .vd-button { justify-content: flex-start; width: 100%; } #publish .publish-list-card { border-color: transparent; min-height: 86px; } #publish .publish-list-card:hover, #publish .publish-list-card:focus-visible { border-color: var(--vd-line-strong); } #publish .publish-list-card.is-active { border-color: color-mix(in srgb, var(--vd-brand) 46%, var(--vd-line)); box-shadow: inset 3px 0 0 var(--vd-brand); } #publish .publish-list-card:focus-visible, #publish .publish-view-tab:focus-visible, .ux-publish-status-summary:focus-visible, .ux-publish-filter-clear:focus-visible, .ux-publish-batch-more > summary:focus-visible { outline: 3px solid var(--vd-focus); outline-offset: 2px; } #publish[data-publish-mode="smart"] .publish-workspace-panel, #publish[data-publish-mode="direct"] .publish-workspace-panel { min-height: 520px; } #publish[data-publish-operational] .publish-operation-header, #publish[data-publish-operational] .publishing-hardened-header { position: sticky; top: calc(var(--vd-topbar-height) + 8px); z-index: 10; } #publish[data-publish-operational] .publishing-toolbar { grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(130px, auto)); } #publish .publish-heading-actions #publish-add-selected-ebay[hidden] { display: none; } @media (max-width: 1180px) { .ux-publish-guide, .ux-publish-view-groups { grid-template-columns: 1fr; } #publish .publish-center-grid { grid-template-columns: minmax(270px, .7fr) minmax(0, 1.3fr); } .ux-publish-status-content .publish-status-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ux-publish-status-content .publish-activity-section { grid-column: 1 / -1; } } @media (max-width: 900px) { .ux-publish-stages { grid-template-columns: 1fr; } #publish .publish-center-grid { grid-template-columns: 1fr; } #publish:not([data-publish-operational]) .publish-list-panel { max-height: 520px; } .ux-publish-status-content .publish-status-rail { grid-template-columns: 1fr; } .ux-publish-status-content .publish-activity-section { grid-column: auto; } #publish[data-publish-operational] .publishing-toolbar { grid-template-columns: 1fr 1fr; } } @media (max-width: 680px) { .ux-publish-guide { padding: 15px; } .ux-publish-view-group-items, .ux-publish-view-group[data-publish-view-group="betrieb"] .ux-publish-view-group-items { grid-template-columns: 1fr; } .ux-publish-status-summary { align-items: flex-start; flex-wrap: wrap; } .ux-publish-health { margin-left: 0; } #publish .publish-batch-bar, .ux-publish-batch-primary { align-items: stretch; flex-direction: column; width: 100%; } .ux-publish-batch-primary .vd-button, .ux-publish-batch-more, .ux-publish-batch-more > summary { justify-content: center; width: 100%; } .ux-publish-batch-secondary { left: 0; right: auto; width: 100%; } #publish[data-publish-operational] .publishing-toolbar { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .ux-publish-status-summary::after { transition: none; } } #publish.ux-publish-ready { container-name: publish-center; container-type: inline-size; min-width: 0; } #publish .publish-center-heading > div:first-child, #publish .publish-heading-actions, #publish .publish-view-tabs { min-width: 0; max-width: 100%; } #publish .publish-heading-actions { flex-wrap: wrap; justify-content: flex-end; } #publish .publish-view-tabs { overscroll-behavior-inline: contain; } @container publish-center (max-width: 1020px) { #publish .publish-center-heading { align-items: flex-start; flex-wrap: wrap; } #publish .publish-heading-actions { justify-content: flex-start; } #publish .ux-publish-guide, #publish .ux-publish-view-groups { grid-template-columns: 1fr; } } @container publish-center (max-width: 820px) { #publish .publish-center-grid { grid-template-columns: 1fr; } #publish:not([data-publish-operational]) .publish-list-panel { max-height: 520px; } #publish .ux-publish-status-content .publish-status-rail { grid-template-columns: 1fr; } #publish .ux-publish-status-content .publish-activity-section { grid-column: auto; } #publish[data-publish-operational] .publishing-toolbar { grid-template-columns: 1fr 1fr; } } @container publish-center (max-width: 560px) { #publish .publish-heading-actions { display: grid; grid-template-columns: 1fr; width: 100%; } #publish .publish-heading-actions .vd-button { justify-content: center; width: 100%; } #publish .ux-publish-view-group-items, #publish .ux-publish-view-group[data-publish-view-group="betrieb"] .ux-publish-view-group-items, #publish .ux-publish-stages, #publish[data-publish-operational] .publishing-toolbar { grid-template-columns: 1fr; } #publish .publish-view-tabs:not(:has(.ux-publish-view-groups)) { align-items: stretch; display: grid; gap: 7px; overflow: visible; } #publish .publish-view-tabs:not(:has(.ux-publish-view-groups)) .publish-view-tab { border: 1px solid var(--vd-line); border-radius: var(--vd-radius-sm); justify-content: space-between; min-width: 0; width: 100%; } } #publish[data-vd-publish-polish="ap44.74"] { --ux-publish-list-width: minmax(360px, .82fr); --ap4474-control-height: 44px; --ap4474-copy: 14px; --ap4474-support: 12px; --ap4474-meta: 11px; } #publish[data-vd-publish-polish="ap44.74"] .publish-center-heading > div:first-child > p:last-child { max-width: 820px; font-size: 14px; line-height: 1.55; } #publish[data-vd-publish-polish="ap44.74"] .ux-publish-guide { gap: 18px; padding: 18px; } #publish[data-vd-publish-polish="ap44.74"] .ux-publish-guide-eyebrow, #publish[data-vd-publish-polish="ap44.74"] .ux-publish-view-group-label, #publish[data-vd-publish-polish="ap44.74"] .publish-panel-kicker { font-size: 11px; line-height: 1.2; } #publish[data-vd-publish-polish="ap44.74"] .ux-publish-guide-copy p { font-size: 13px; line-height: 1.5; } #publish[data-vd-publish-polish="ap44.74"] .ux-publish-stage { min-height: 64px; padding: 10px 11px; } #publish[data-vd-publish-polish="ap44.74"] .ux-publish-stage-copy strong { font-size: 13px; } #publish[data-vd-publish-polish="ap44.74"] .ux-publish-stage-copy small, #publish[data-vd-publish-polish="ap44.74"] .ux-publish-tab-help, #publish[data-vd-publish-polish="ap44.74"] .ux-publish-status-summary-copy small { font-size: 11px; line-height: 1.35; } #publish[data-vd-publish-polish="ap44.74"] .publish-view-tab { min-height: 58px; padding: 10px 11px; } #publish[data-vd-publish-polish="ap44.74"] .ux-publish-tab-title { font-size: 13px; line-height: 1.25; } #publish[data-vd-publish-polish="ap44.74"] .publish-tab-count, #publish[data-vd-publish-polish="ap44.74"] .publish-tab-badge, #publish[data-vd-publish-polish="ap44.74"] .ux-publish-health { font-size: 11px; } #publish[data-vd-publish-polish="ap44.74"] .ux-publish-status-summary { min-height: 64px; padding: 12px 14px; } #publish[data-vd-publish-polish="ap44.74"] .ux-publish-status-summary-copy strong { font-size: 14px; } #publish[data-vd-publish-polish="ap44.74"] .publish-list-panel-head { min-height: 66px; padding: 13px 14px; } #publish[data-vd-publish-polish="ap44.74"] .publish-list-panel-head h3, #publish[data-vd-publish-polish="ap44.74"] .publish-rail-heading h3, #publish[data-vd-publish-polish="ap44.74"] .publish-operation-header h3, #publish[data-vd-publish-polish="ap44.74"] .publish-workspace-header h3 { font-size: 16px; line-height: 1.25; } #publish[data-vd-publish-polish="ap44.74"] .publish-list-panel-head select, #publish[data-vd-publish-polish="ap44.74"] .publish-filter-row select { min-height: var(--ap4474-control-height); font-size: 13px; padding-inline: 11px 30px; } #publish[data-vd-publish-polish="ap44.74"] .publish-search-field { min-height: var(--ap4474-control-height); grid-template-columns: 20px minmax(0, 1fr); gap: 9px; padding-inline: 11px; } #publish[data-vd-publish-polish="ap44.74"] .publish-search-field input { font-size: 14px; line-height: 1.25; } #publish[data-vd-publish-polish="ap44.74"] .publish-selection-bar { min-height: 44px; font-size: 12px; padding-inline: 13px; } #publish[data-vd-publish-polish="ap44.74"] .publish-selection-bar input, #publish[data-vd-publish-polish="ap44.74"] .publish-card-check input { width: 18px; height: 18px; } #publish[data-vd-publish-polish="ap44.74"] .ux-publish-active-filters > strong, #publish[data-vd-publish-polish="ap44.74"] .ux-publish-filter-chip { font-size: 11px; } #publish[data-vd-publish-polish="ap44.74"] .ux-publish-filter-chip { min-height: 30px; } #publish[data-vd-publish-polish="ap44.74"] .ux-publish-filter-clear { width: 26px; height: 26px; } #publish[data-vd-publish-polish="ap44.74"] .publish-list { gap: 7px; padding: 10px; } #publish[data-vd-publish-polish="ap44.74"] .publish-list-card { grid-template-columns: 20px 64px minmax(0, 1fr) auto; gap: 10px; min-height: 96px; padding: 10px; } #publish[data-vd-publish-polish="ap44.74"] .publish-card-media { width: 64px; height: 68px; font-size: 10px; } #publish[data-vd-publish-polish="ap44.74"] .publish-card-copy > strong { font-size: 13px; line-height: 1.35; } #publish[data-vd-publish-polish="ap44.74"] .publish-card-sku { margin-top: 4px; font-size: 11px; line-height: 1.25; } #publish[data-vd-publish-polish="ap44.74"] .publish-card-meta { margin-top: 8px; font-size: 11px; } #publish[data-vd-publish-polish="ap44.74"] .publish-card-meta b { font-size: 12px; } #publish[data-vd-publish-polish="ap44.74"] .publish-card-status { position: static; right: auto; bottom: auto; min-height: 24px; padding-inline: 7px; font-size: 10px; } #publish[data-vd-publish-polish="ap44.74"] .publish-card-status-stack { align-items: flex-end; justify-content: center; min-width: 96px; } #publish[data-vd-publish-polish="ap44.74"] .publish-readiness-badge { min-height: 30px; font-size: 11px; } #publish[data-vd-publish-polish="ap44.74"] .publish-readiness-badge small { font-size: 10px; } #publish[data-vd-publish-polish="ap44.74"] .publish-batch-bar .vd-button, #publish[data-vd-publish-polish="ap44.74"] .ux-publish-batch-more > summary { min-height: 40px; font-size: 12px; } #publish[data-vd-publish-polish="ap44.74"] .publishing-readiness-rail-grid span, #publish[data-vd-publish-polish="ap44.74"] .publishing-readiness-rail-grid small, #publish[data-vd-publish-polish="ap44.74"] .publishing-readiness-rail-note, #publish[data-vd-publish-polish="ap44.74"] .publish-status-row small, #publish[data-vd-publish-polish="ap44.74"] .publish-quick-action small, #publish[data-vd-publish-polish="ap44.74"] .publish-activity-row small { font-size: 11px; line-height: 1.4; } #publish[data-vd-publish-polish="ap44.74"] .publishing-readiness-rail-grid span, #publish[data-vd-publish-polish="ap44.74"] .publish-status-row strong, #publish[data-vd-publish-polish="ap44.74"] .publish-quick-action strong, #publish[data-vd-publish-polish="ap44.74"] .publish-activity-row strong { font-size: 12px; } #publish[data-vd-publish-polish="ap44.74"] .publish-status-row, #publish[data-vd-publish-polish="ap44.74"] .publish-quick-action, #publish[data-vd-publish-polish="ap44.74"] #publish-status-refresh { min-height: 44px; } #publish[data-vd-publish-polish="ap44.74"] .publishing-operation-metric small, #publish[data-vd-publish-polish="ap44.74"] .publishing-operations-signals, #publish[data-vd-publish-polish="ap44.74"] .publishing-platform-health small, #publish[data-vd-publish-polish="ap44.74"] .publishing-platform-numbers span, #publish[data-vd-publish-polish="ap44.74"] .publishing-job-open small, #publish[data-vd-publish-polish="ap44.74"] .publish-operation-meta span, #publish[data-vd-publish-polish="ap44.74"] .publish-operation-meta small, #publish[data-vd-publish-polish="ap44.74"] .publishing-event-list small { font-size: 10px; line-height: 1.4; } #publish[data-vd-publish-polish="ap44.74"] .publishing-operation-metric span, #publish[data-vd-publish-polish="ap44.74"] .publishing-platform-health strong, #publish[data-vd-publish-polish="ap44.74"] .publishing-job-open strong, #publish[data-vd-publish-polish="ap44.74"] .publish-operation-meta b { font-size: 12px; } #publish[data-vd-publish-polish="ap44.74"] .publishing-toolbar input, #publish[data-vd-publish-polish="ap44.74"] .publishing-toolbar select, #publish[data-vd-publish-polish="ap44.74"] .publishing-event-toolbar input, #publish[data-vd-publish-polish="ap44.74"] .publishing-event-toolbar select, #publish[data-vd-publish-polish="ap44.74"] .publish-meta-form input, #publish[data-vd-publish-polish="ap44.74"] .publish-meta-form select, #publish[data-vd-publish-polish="ap44.74"] .publish-meta-form textarea, #publish[data-vd-publish-polish="ap44.74"] .publish-schedule-grid input, #publish[data-vd-publish-polish="ap44.74"] .publish-schedule-grid select { min-height: 44px; font-size: 14px; } @container publish-center (max-width: 820px) { #publish[data-vd-publish-polish="ap44.74"]:not([data-publish-operational]) .publish-list-panel { max-height: none; } #publish[data-vd-publish-polish="ap44.74"] .publish-center-grid { gap: 12px; } #publish[data-vd-publish-polish="ap44.74"] .publish-list-card { min-height: 92px; } } @container publish-center (max-width: 560px) { #publish[data-vd-publish-polish="ap44.74"] .ux-publish-guide { padding: 14px; } #publish[data-vd-publish-polish="ap44.74"] .ux-publish-view-group-items, #publish[data-vd-publish-polish="ap44.74"] .ux-publish-view-group[data-publish-view-group="betrieb"] .ux-publish-view-group-items { grid-template-columns: 1fr; } #publish[data-vd-publish-polish="ap44.74"] .publish-search-field input, #publish[data-vd-publish-polish="ap44.74"] .publish-list-panel-head select, #publish[data-vd-publish-polish="ap44.74"] .publish-filter-row select, #publish[data-vd-publish-polish="ap44.74"] .publishing-toolbar input, #publish[data-vd-publish-polish="ap44.74"] .publishing-toolbar select, #publish[data-vd-publish-polish="ap44.74"] .publishing-event-toolbar input, #publish[data-vd-publish-polish="ap44.74"] .publishing-event-toolbar select, #publish[data-vd-publish-polish="ap44.74"] .publish-meta-form input, #publish[data-vd-publish-polish="ap44.74"] .publish-meta-form select, #publish[data-vd-publish-polish="ap44.74"] .publish-meta-form textarea, #publish[data-vd-publish-polish="ap44.74"] .publish-schedule-grid input, #publish[data-vd-publish-polish="ap44.74"] .publish-schedule-grid select { font-size: 16px; } #publish[data-vd-publish-polish="ap44.74"] .publish-filter-row { grid-template-columns: 1fr; } #publish[data-vd-publish-polish="ap44.74"] .publish-list-card { grid-template-columns: 20px 58px minmax(0, 1fr); min-height: 104px; } #publish[data-vd-publish-polish="ap44.74"] .publish-card-media { width: 58px; height: 64px; } #publish[data-vd-publish-polish="ap44.74"] .publish-card-meta { align-items: flex-start; flex-direction: column; gap: 3px; padding-right: 0; } #publish[data-vd-publish-polish="ap44.74"] .publish-card-status-stack { align-items: flex-start; grid-column: 3; margin-top: 4px; min-width: 0; } #publish[data-vd-publish-polish="ap44.74"] .publish-batch-bar .vd-button, #publish[data-vd-publish-polish="ap44.74"] .ux-publish-batch-more > summary, #publish[data-vd-publish-polish="ap44.74"] .publish-view-tab, #publish[data-vd-publish-polish="ap44.74"] .publish-status-row, #publish[data-vd-publish-polish="ap44.74"] .publish-quick-action { min-height: 44px; } #publish[data-vd-publish-polish="ap44.74"] .publish-schedule-actions { display: grid; grid-template-columns: 1fr; } #publish[data-vd-publish-polish="ap44.74"] .publish-schedule-actions .vd-button { justify-content: center; min-height: 44px; width: 100%; } } #media-library.media-library-page { --ux-media-card-min: 210px; --ux-media-image-ratio: 4 / 3; display: block; } #media-library[data-media-density="compact"] { --ux-media-card-min: 168px; --ux-media-image-ratio: 1 / 1; } #media-library[data-media-density="large"] { --ux-media-card-min: 280px; --ux-media-image-ratio: 4 / 3; } .ux-media-command { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 18px 0 12px; padding: 16px 18px; border: 1px solid var(--vd-border); border-radius: var(--vd-radius-lg); background: var(--vd-surface); box-shadow: var(--vd-shadow-sm); } .ux-media-command-copy { min-width: 0; } .ux-media-command-copy > span { display: block; margin-bottom: 3px; color: var(--vd-text-muted); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .ux-media-command-copy strong { display: block; color: var(--vd-text); font-size: 1rem; } .ux-media-command-copy small { display: block; margin-top: 3px; color: var(--vd-text-muted); line-height: 1.45; } .ux-media-density { display: inline-flex; flex: 0 0 auto; gap: 4px; padding: 4px; border: 1px solid var(--vd-border); border-radius: 12px; background: var(--vd-surface-muted); } .ux-media-density button { min-width: 38px; min-height: 34px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--vd-text-muted); cursor: pointer; font: inherit; font-size: .78rem; font-weight: 700; } .ux-media-density button.is-active { background: var(--vd-surface); color: var(--vd-accent); box-shadow: var(--vd-shadow-xs); } #media-library .media-summary { display: flex; gap: 8px; overflow-x: auto; padding: 3px 2px 8px; scrollbar-width: thin; } #media-library .media-summary > button { flex: 0 0 auto; min-width: 112px; } #media-library .media-toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) auto auto; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--vd-border); border-radius: var(--vd-radius-lg); background: var(--vd-surface); } #media-library .media-search { min-width: 0; } .ux-media-filter-details { position: relative; } .ux-media-filter-details > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 13px; border: 1px solid var(--vd-border); border-radius: 11px; color: var(--vd-text); cursor: pointer; font-size: .86rem; font-weight: 700; list-style: none; user-select: none; } .ux-media-filter-details > summary::-webkit-details-marker { display: none; } .ux-media-filter-details > summary::after { content: "⌄"; color: var(--vd-text-muted); } .ux-media-filter-details[open] > summary, .ux-media-filter-details > summary:hover { border-color: color-mix(in srgb, var(--vd-accent) 42%, transparent); background: color-mix(in srgb, var(--vd-accent) 7%, transparent); } .ux-media-filter-panel { position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; display: grid; gap: 12px; width: min(350px, calc(100vw - 40px)); padding: 15px; border: 1px solid var(--vd-border); border-radius: 14px; background: var(--vd-surface); box-shadow: var(--vd-shadow-lg); } .ux-media-filter-panel > label, .ux-media-filter-panel > .ux-media-filter-field { display: grid; gap: 6px; color: var(--vd-text-muted); font-size: .78rem; font-weight: 700; } .ux-media-filter-panel select { width: 100%; } .ux-media-filter-panel .media-check { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 11px; border-radius: 10px; background: var(--vd-surface-muted); color: var(--vd-text); } .ux-media-active-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; min-height: 0; margin: 9px 0 0; } .ux-media-active-filters.is-empty { display: none; } .ux-media-active-filters > strong { color: var(--vd-text-muted); font-size: .76rem; } .ux-media-filter-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 5px 0 10px; border: 1px solid color-mix(in srgb, var(--vd-accent) 24%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--vd-accent) 7%, transparent); color: var(--vd-text); font-size: .77rem; font-weight: 700; } .ux-media-filter-chip button, .ux-media-filter-reset { border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; } .ux-media-filter-chip button { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 50%; } .ux-media-filter-chip button:hover { background: color-mix(in srgb,var(--vd-ink) 9%,transparent); } .ux-media-filter-reset { color: var(--vd-accent); font-size: .77rem; font-weight: 700; } #media-library .media-batchbar { display: none; position: sticky; z-index: 28; top: 72px; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--vd-accent) 30%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--vd-surface) 94%, var(--vd-accent)); box-shadow: var(--vd-shadow-md); } #media-library[data-has-media-selection] .media-batchbar { display: flex; } .ux-media-batch-primary { display: flex; flex-wrap: wrap; gap: 7px; } .ux-media-batch-more { position: relative; } .ux-media-batch-more > summary { display: inline-flex; align-items: center; min-height: 34px; padding: 0 10px; border: 1px solid var(--vd-border); border-radius: 9px; cursor: pointer; font-size: .78rem; font-weight: 700; list-style: none; } .ux-media-batch-more > summary::-webkit-details-marker { display: none; } .ux-media-batch-secondary { position: absolute; z-index: 42; top: calc(100% + 7px); right: 0; min-width: 190px; padding: 8px; border: 1px solid var(--vd-border); border-radius: 12px; background: var(--vd-surface); box-shadow: var(--vd-shadow-lg); } .ux-media-batch-secondary button { width: 100%; } #media-library .media-pagination-top.is-redundant { display: none; } #media-library .media-pagination { margin: 14px 0; } #media-library .media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--ux-media-card-min)), 1fr)); gap: 14px; align-items: start; } #media-library .media-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--vd-border); border-radius: 15px; background: var(--vd-surface); box-shadow: var(--vd-shadow-sm); transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; } #media-library .media-card:hover, #media-library .media-card:focus-within { border-color: color-mix(in srgb, var(--vd-accent) 38%, transparent); box-shadow: var(--vd-shadow-md); transform: translateY(-2px); } #media-library .media-card.is-selected { border-color: var(--vd-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--vd-accent) 20%, transparent), var(--vd-shadow-md); } #media-library .media-card-image { position: relative; aspect-ratio: var(--ux-media-image-ratio); overflow: hidden; background: var(--vd-surface-muted); } #media-library .media-card-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; } #media-library .media-card-open img { display: block; width: 100%; height: 100%; object-fit: contain; transition: filter .25s ease; } #media-library .media-card:hover .media-card-open img, #media-library .media-card:focus-within .media-card-open img { filter: brightness(.96); } #media-library .media-open-indicator { position: absolute; right: 10px; bottom: 10px; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--vd-on-accent-border); border-radius: 50%; background: var(--vd-scrim); color: var(--vd-on-accent); opacity: 0; transform: translateY(4px); transition: opacity .16s ease, transform .16s ease; } #media-library .media-card:hover .media-open-indicator, #media-library .media-card:focus-within .media-open-indicator { opacity: 1; transform: translateY(0); } #media-library .media-card-select, #media-library .media-card-favorite-toggle { width: 30px; height: 30px; border-radius: 9px; box-shadow: var(--vd-shadow-sm); } #media-library .media-card-select { top: 9px; left: 9px; } #media-library .media-card-favorite-toggle { top: 9px; right: 9px; } #media-library .media-card-content { display: grid; gap: 5px; padding: 12px 12px 9px; } #media-library .media-card-content > strong { overflow: hidden; color: var(--vd-text); text-overflow: ellipsis; white-space: nowrap; } #media-library .media-card-content > span, #media-library .media-card-content > small { overflow: hidden; color: var(--vd-text-muted); text-overflow: ellipsis; white-space: nowrap; } #media-library .media-card-sources { display: flex; min-height: 21px; gap: 5px; overflow: hidden; } #media-library .media-card-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; padding: 6px; border-top: 1px solid var(--vd-border); background: var(--vd-surface-muted); } #media-library .media-action { display: inline-grid; min-width: 0; min-height: 36px; place-items: center; padding: 0; border-radius: 9px; } #media-library .media-action-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #media-library .media-grid.is-list { display: grid; grid-template-columns: 1fr; gap: 8px; } #media-library .media-grid.is-list .media-card { display: grid; grid-template-columns: 116px minmax(0, 1fr) auto; align-items: stretch; } #media-library .media-grid.is-list .media-card-image { aspect-ratio: 4 / 3; min-height: 92px; } #media-library .media-grid.is-list .media-card-actions { grid-template-columns: repeat(2, 42px); align-content: center; border-top: 0; border-left: 1px solid var(--vd-border); } .ux-media-lightbox-nav { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; } .ux-media-lightbox-position { min-width: 72px; color: var(--vd-text-muted); font-size: .78rem; text-align: center; } #media-lightbox .media-lightbox-dialog > header { gap: 12px; } #media-lightbox .media-lightbox-body { min-height: min(68vh, 760px); } #media-lightbox .media-lightbox-stage { min-width: 0; } #media-lightbox .media-lightbox-dialog > footer { display: flex; flex-wrap: wrap; gap: 8px; } #media-lightbox .ux-media-use { order: -1; } #media-lightbox .media-lightbox-meta-details { display: contents; } #media-lightbox .media-lightbox-meta-details > summary { display: none; } @media (max-width: 1100px) { #media-library .media-toolbar { grid-template-columns: minmax(220px, 1fr) auto; } #media-library .media-view-switch { grid-column: 2; } #media-lightbox .media-lightbox-body { grid-template-columns: 1fr; } #media-lightbox .media-lightbox-meta-details { display: block; padding: 0 14px 14px; } #media-lightbox .media-lightbox-meta-details > summary { display: block; padding: 11px 12px; border: 1px solid var(--vd-border); border-radius: 11px; cursor: pointer; font-weight: 700; } #media-lightbox .media-lightbox-meta-details > #media-lightbox-meta { margin-top: 10px; } } @media (max-width: 760px) { .ux-media-command, #media-library .media-toolbar, #media-library .media-batchbar { align-items: stretch; } .ux-media-command { flex-direction: column; } .ux-media-density { align-self: flex-start; } #media-library .media-toolbar { grid-template-columns: 1fr auto; } #media-library .media-search { grid-column: 1 / -1; } .ux-media-filter-details { justify-self: start; } .ux-media-filter-panel { right: auto; left: 0; } #media-library .media-batchbar { flex-direction: column; } .ux-media-batch-primary { width: 100%; } .ux-media-batch-primary button { flex: 1 1 140px; } #media-library .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } #media-library[data-media-density="large"] .media-grid { grid-template-columns: 1fr; } #media-library .media-card-content { padding: 10px; } #media-library .media-grid.is-list .media-card { grid-template-columns: 92px minmax(0, 1fr); } #media-library .media-grid.is-list .media-card-actions { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--vd-border); border-left: 0; } #media-lightbox .media-lightbox-toolbar { overflow-x: auto; } .ux-media-lightbox-nav { width: 100%; order: 2; justify-content: center; } } @media (max-width: 470px) { #media-library .media-grid { grid-template-columns: 1fr; } #media-library .media-summary > button { min-width: 96px; } } @media (hover: none) { #media-library .media-open-indicator { opacity: 1; transform: none; } #media-library .media-card:hover { transform: none; } } @media (prefers-reduced-motion: reduce) { #media-library .media-card, #media-library .media-card-open img, #media-library .media-open-indicator { transition: none; } } #media-library button:focus-visible, #media-library a:focus-visible, #media-library input:focus-visible, #media-library select:focus-visible, #media-lightbox button:focus-visible, #media-lightbox a:focus-visible, #media-lightbox input:focus-visible { outline: 3px solid color-mix(in srgb, var(--vd-accent) 38%, transparent); outline-offset: 2px; } #media-library.media-library-page { container-name: media-library; container-type: inline-size; min-width: 0; } @container media-library (max-width: 980px) { #media-library .media-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; } #media-library .media-summary > button { min-width: 0; width: 100%; } #media-library .media-toolbar { grid-template-columns: minmax(220px, 1fr) auto; } #media-library .media-search { grid-column: 1 / -1; } } @container media-library (max-width: 680px) { #media-library .ux-media-command, #media-library .media-library-heading, #media-library .media-batchbar { align-items: stretch; flex-direction: column; } #media-library .media-heading-actions, #media-library .ux-media-batch-primary { width: 100%; } #media-library .media-heading-actions .vd-button, #media-library .ux-media-batch-primary button { flex: 1 1 140px; justify-content: center; } #media-library .media-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } #media-library .media-toolbar { grid-template-columns: 1fr auto; } } @container media-library (max-width: 440px) { #media-library .media-summary > button:first-child, #media-library .media-summary > button:last-child { grid-column: 1 / -1; } #media-library .media-toolbar { grid-template-columns: 1fr; } #media-library .media-view-switch, #media-library .ux-media-filter-details { grid-column: auto; justify-self: stretch; } #media-library .media-view-switch, #media-library .media-view-switch button, #media-library .ux-media-filter-details > summary { width: 100%; } #media-library .media-view-switch { display: grid; grid-template-columns: 1fr 1fr; } } #image-factory.ux-image-factory-ready { --ux-factory-border: color-mix(in srgb, var(--vd-border) 82%, transparent); --ux-factory-soft: color-mix(in srgb, var(--vd-surface) 88%, var(--vd-accent) 12%); --ux-factory-muted: var(--vd-text-muted); display: grid; gap: 20px; } #image-factory .ux-image-factory-workflow { display: grid; gap: 18px; padding: clamp(18px, 2.4vw, 28px); border: 1px solid var(--ux-factory-border); border-radius: var(--vd-radius-xl); background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--vd-accent) 14%, transparent), transparent 42%), var(--vd-surface); box-shadow: var(--vd-shadow-sm); } #image-factory .ux-image-factory-workflow-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; } #image-factory .ux-image-factory-workflow-head > div { max-width: 720px; } #image-factory .ux-image-factory-kicker { display: block; margin-bottom: 5px; color: var(--vd-accent); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } #image-factory .ux-image-factory-workflow h3, #image-factory .ux-image-factory-stage h3 { margin: 0; color: var(--vd-text); } #image-factory .ux-image-factory-workflow p, #image-factory .ux-image-factory-stage p { margin: 6px 0 0; color: var(--ux-factory-muted); line-height: 1.55; } #image-factory .ux-image-factory-next { min-width: 210px; min-height: 42px; justify-content: center; } #image-factory .ux-image-factory-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } #image-factory .ux-image-factory-step { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "index copy" "state state"; align-items: center; gap: 8px 11px; min-width: 0; padding: 13px; border: 1px solid var(--ux-factory-border); border-radius: var(--vd-radius-lg); background: color-mix(in srgb, var(--vd-surface) 94%, transparent); color: inherit; text-align: left; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; } #image-factory .ux-image-factory-step:hover { border-color: color-mix(in srgb, var(--vd-accent) 48%, var(--ux-factory-border)); transform: translateY(-1px); } #image-factory .ux-image-factory-step-index { grid-area: index; display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: var(--vd-surface-subtle); color: var(--ux-factory-muted); font-size: 12px; font-weight: 800; } #image-factory .ux-image-factory-step-copy { grid-area: copy; min-width: 0; } #image-factory .ux-image-factory-step-copy strong, #image-factory .ux-image-factory-step-copy small { display: block; } #image-factory .ux-image-factory-step-copy strong { overflow: hidden; color: var(--vd-text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; } #image-factory .ux-image-factory-step-copy small { margin-top: 2px; overflow: hidden; color: var(--ux-factory-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } #image-factory .ux-image-factory-step-state { grid-area: state; justify-self: start; padding: 3px 8px; border-radius: 999px; background: var(--vd-surface-subtle); color: var(--ux-factory-muted); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } #image-factory .ux-image-factory-step.is-current { border-color: color-mix(in srgb, var(--vd-accent) 62%, var(--ux-factory-border)); background: var(--ux-factory-soft); } #image-factory .ux-image-factory-step.is-current .ux-image-factory-step-index, #image-factory .ux-image-factory-step.is-current .ux-image-factory-step-state { background: var(--vd-accent); color: var(--vd-on-accent); } #image-factory .ux-image-factory-step.is-complete .ux-image-factory-step-index { background: var(--vd-success); color: var(--vd-on-accent); } #image-factory .ux-image-factory-step.is-complete .ux-image-factory-step-state { background: color-mix(in srgb, var(--vd-success) 15%, transparent); color: var(--vd-success); } #image-factory .image-factory-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } #image-factory .image-factory-config { display: grid; gap: 16px; padding: 0; border: 0; background: transparent; box-shadow: none; } #image-factory .ux-image-factory-stage { scroll-margin-top: 92px; padding: clamp(17px, 2.2vw, 24px); border: 1px solid var(--ux-factory-border); border-radius: var(--vd-radius-xl); background: var(--vd-surface); box-shadow: var(--vd-shadow-xs); } #image-factory .ux-image-factory-stage-head { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 18px; } #image-factory .ux-image-factory-stage-index { flex: 0 0 auto; display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: var(--vd-surface-subtle); color: var(--vd-accent); font-size: 12px; font-weight: 900; letter-spacing: .05em; } #image-factory[data-ux-factory-current-step="sources"] .ux-image-factory-stage-sources, #image-factory[data-ux-factory-current-step="profiles"] .ux-image-factory-stage-profiles, #image-factory[data-ux-factory-current-step="review"] .ux-image-factory-stage-review { border-color: color-mix(in srgb, var(--vd-accent) 48%, var(--ux-factory-border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vd-accent) 8%, transparent); } #image-factory .image-factory-source-head, #image-factory .image-factory-profile-head { margin: 0 0 12px; } #image-factory .image-factory-source-head .image-factory-source-tools:empty { display: none; } #image-factory #image-factory-source-search { width: min(520px, 100%); min-height: 42px; margin-bottom: 10px; } #image-factory .ux-image-factory-source-controls { margin-bottom: 14px; border: 1px solid var(--ux-factory-border); border-radius: var(--vd-radius-md); background: var(--vd-surface-subtle); } #image-factory .ux-image-factory-source-controls > summary, #image-factory .ux-image-factory-monitor > summary { list-style: none; cursor: pointer; } #image-factory .ux-image-factory-source-controls > summary::-webkit-details-marker, #image-factory .ux-image-factory-monitor > summary::-webkit-details-marker { display: none; } #image-factory .ux-image-factory-source-controls > summary { padding: 10px 13px; color: var(--vd-text); font-size: 12px; font-weight: 750; } #image-factory .ux-image-factory-source-controls > summary::after { content: "＋"; float: right; color: var(--ux-factory-muted); } #image-factory .ux-image-factory-source-controls[open] > summary::after { content: "−"; } #image-factory .ux-image-factory-source-controls-body { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px 12px; } #image-factory .ux-image-factory-source-controls-body > * { min-height: 36px; } #image-factory .image-factory-source-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); gap: 10px; max-height: min(55vh, 560px); overflow: auto; padding: 3px; scrollbar-gutter: stable; } #image-factory .image-factory-source-grid > * { min-width: 0; border-radius: var(--vd-radius-md); } #image-factory .image-factory-profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 11px; } #image-factory .image-factory-profile-grid > * { min-width: 0; border-radius: var(--vd-radius-md); } #image-factory .ux-image-factory-stage-review > label.field { max-width: 720px; } #image-factory .ux-image-factory-advanced { margin: 16px 0; border: 1px solid var(--ux-factory-border); border-radius: var(--vd-radius-lg); background: var(--vd-surface-subtle); } #image-factory .ux-image-factory-advanced > summary { padding: 14px 16px; font-weight: 760; } #image-factory .ux-image-factory-advanced .image-factory-options-grid { padding: 0 16px 16px; } #image-factory .image-factory-submit { position: static; z-index: auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--vd-accent) 25%, var(--ux-factory-border)); border-radius: var(--vd-radius-lg); background: color-mix(in srgb, var(--vd-surface) 94%, transparent); box-shadow: none; } #image-factory[data-ux-factory-ready="false"] .image-factory-submit { opacity: .72; } #image-factory .ux-image-factory-monitor { overflow: hidden; border: 1px solid var(--ux-factory-border); border-radius: var(--vd-radius-xl); background: var(--vd-surface); } #image-factory .ux-image-factory-monitor > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 18px; } #image-factory .ux-image-factory-monitor > summary > span:first-child strong, #image-factory .ux-image-factory-monitor > summary > span:first-child small { display: block; } #image-factory .ux-image-factory-monitor > summary > span:first-child small { margin-top: 3px; color: var(--ux-factory-muted); } #image-factory .ux-image-factory-monitor-badge { flex: 0 0 auto; padding: 5px 10px; border-radius: 999px; background: var(--vd-surface-subtle); color: var(--ux-factory-muted); font-size: 11px; font-weight: 800; } #image-factory .ux-image-factory-monitor-badge[data-tone="working"] { background: color-mix(in srgb, var(--vd-warning) 14%, transparent); color: var(--vd-warning); } #image-factory .ux-image-factory-monitor-badge[data-tone="danger"] { background: color-mix(in srgb, var(--vd-danger) 14%, transparent); color: var(--vd-danger); } #image-factory .ux-image-factory-monitor-badge[data-tone="success"] { background: color-mix(in srgb, var(--vd-success) 14%, transparent); color: var(--vd-success); } #image-factory .ux-image-factory-monitor .image-factory-status { width: auto; margin: 0; padding: 0 18px 18px; border: 0; background: transparent; box-shadow: none; } #image-factory .image-factory-jobs { scroll-margin-top: 92px; padding: clamp(17px, 2.2vw, 24px); border-radius: var(--vd-radius-xl); } #image-factory .ux-image-factory-job-filter { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 16px; } #image-factory .ux-image-factory-job-filter button.active { border-color: var(--vd-accent); background: var(--ux-factory-soft); color: var(--vd-accent); } #image-factory #image-factory-jobs { display: grid; gap: 10px; } #image-factory #image-factory-jobs > * { border-radius: var(--vd-radius-md); } #image-factory .ux-image-factory-step:focus-visible, #image-factory .ux-image-factory-next:focus-visible, #image-factory .ux-image-factory-job-filter button:focus-visible, #image-factory .ux-image-factory-source-controls > summary:focus-visible, #image-factory .ux-image-factory-monitor > summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--vd-accent) 34%, transparent); outline-offset: 3px; } @media (max-width: 1080px) { #image-factory .ux-image-factory-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } #image-factory .image-factory-source-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } } @media (max-width: 760px) { #image-factory .ux-image-factory-workflow-head, #image-factory .image-factory-submit, #image-factory .ux-image-factory-monitor > summary, #image-factory .image-factory-jobs > .section-title-row { align-items: stretch; flex-direction: column; } #image-factory .ux-image-factory-next { width: 100%; } #image-factory .ux-image-factory-steps { grid-template-columns: minmax(0, 1fr); } #image-factory .ux-image-factory-step { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "index copy state"; } #image-factory .ux-image-factory-step-state { grid-area: state; align-self: center; } #image-factory .image-factory-profile-grid { grid-template-columns: minmax(0, 1fr); } #image-factory .image-factory-submit { position: static; box-shadow: none; } #image-factory .image-factory-submit button { width: 100%; } } @media (max-width: 470px) { #image-factory .ux-image-factory-workflow, #image-factory .ux-image-factory-stage, #image-factory .image-factory-jobs { padding: 14px; border-radius: var(--vd-radius-lg); } #image-factory .image-factory-source-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 52vh; } #image-factory .ux-image-factory-source-controls-body, #image-factory .ux-image-factory-job-filter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } #image-factory .ux-image-factory-source-controls-body > *, #image-factory .ux-image-factory-job-filter button { width: 100%; } } @media (prefers-reduced-motion: reduce) { #image-factory .ux-image-factory-step { transition: none; } #image-factory .ux-image-factory-step:hover { transform: none; } } .ux-command-platform-chrome{display:flex;align-items:center;gap:10px;min-height:42px;padding:7px 18px;border-bottom:1px solid var(--vd-color-border);background:var(--vd-color-surface);position:relative;z-index:20}.ux-command-breadcrumb{display:flex;align-items:center;gap:8px;min-width:0;flex:1}.ux-command-crumb,.ux-command-favorite-toggle,.ux-command-drawer-toggle,.ux-command-drawer-item{font:inherit;color:inherit;border:1px solid var(--vd-color-border);background:var(--vd-color-surface-raised);border-radius:var(--vd-radius-sm)}.ux-command-crumb{border:0;background:transparent;padding:4px 0;font-weight:650}.ux-command-crumb-separator{opacity:.5}.ux-command-crumb-current{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--vd-color-text-muted);font-size:.9rem}.ux-command-favorite-toggle{width:34px;height:30px;padding:0;font-size:1rem}.ux-command-drawer-toggle{padding:6px 10px;font-size:.84rem}.ux-command-drawer{position:absolute;right:18px;top:48px;width:min(360px,calc(100vw - 28px));max-height:min(520px,70vh);overflow:auto;padding:12px;border:1px solid var(--vd-color-border);border-radius:var(--vd-radius-lg);background:var(--vd-color-surface-raised);box-shadow:var(--vd-shadow-lg);display:grid;gap:14px}.ux-command-drawer.hidden{display:none}.ux-command-drawer-section{display:grid;gap:7px}.ux-command-drawer-section>strong{font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;color:var(--vd-color-text-muted)}.ux-command-drawer-item{text-align:left;padding:9px 10px;cursor:pointer}.ux-command-drawer-empty{padding:8px 2px;color:var(--vd-color-text-muted);font-size:.85rem}.ux-command-crumb:hover,.ux-command-favorite-toggle:hover,.ux-command-drawer-toggle:hover,.ux-command-drawer-item:hover{background:var(--vd-color-surface-hover)}.ux-command-crumb:focus-visible,.ux-command-favorite-toggle:focus-visible,.ux-command-drawer-toggle:focus-visible,.ux-command-drawer-item:focus-visible{outline:2px solid var(--vd-color-focus);outline-offset:2px}@media(max-width:780px){.ux-command-platform-chrome{padding-inline:12px}.ux-command-drawer-toggle{font-size:0;width:34px;height:30px;padding:0}.ux-command-drawer-toggle::before{content:'★';font-size:1rem}.ux-command-crumb-current{font-size:.82rem}}@media(max-width:520px){.ux-command-platform-chrome{gap:6px}.ux-command-crumb-separator{display:none}.ux-command-crumb-current{max-width:48vw}.ux-command-drawer{right:8px;top:46px;width:calc(100vw - 16px)}}@media(prefers-reduced-motion:reduce){.ux-command-platform-chrome *{scroll-behavior:auto!important;transition:none!important;animation:none!important}} .vd-action-surface{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.vd-action-surface[data-action-variant="menu"],.vd-action-surface[data-action-variant="sheet"]{align-items:stretch;flex-direction:column}.vd-action-button{align-items:center;background:var(--vd-surface-raised);border:1px solid var(--vd-line);border-radius:var(--vd-radius-sm);color:var(--vd-ink);cursor:pointer;display:inline-flex;font:inherit;gap:9px;min-height:36px;padding:8px 11px;text-align:left;transition:background .16s ease,border-color .16s ease,transform .16s ease}.vd-action-button:hover:not(:disabled){background:var(--vd-surface-hover);border-color:var(--vd-line-strong);transform:translateY(-1px)}.vd-action-button:disabled,.vd-action-button[aria-disabled="true"]{cursor:not-allowed;opacity:.52}.vd-action-button.vd-action-running{cursor:progress}.vd-action-button.vd-action-caution{border-color:color-mix(in srgb,var(--vd-warning) 44%,var(--vd-line))}.vd-action-button.vd-action-destructive{border-color:color-mix(in srgb,var(--vd-danger) 48%,var(--vd-line));color:var(--vd-danger)}.vd-action-button-icon{align-items:center;display:inline-flex;font-weight:760;justify-content:center;min-width:18px}.vd-action-button-copy{display:grid;gap:2px;min-width:0}.vd-action-button-copy strong{font-size:.9rem}.vd-action-button-copy small{color:var(--vd-ink-muted);font-size:.76rem;line-height:1.35}.vd-action-button kbd{color:var(--vd-ink-muted);font-size:.7rem;margin-left:auto}.vd-action-surface[data-action-variant="menu"] .vd-action-button,.vd-action-surface[data-action-variant="sheet"] .vd-action-button{justify-content:flex-start;width:100%}.vd-action-surface-empty{color:var(--vd-ink-muted);font-size:.82rem;padding:8px}.vd-action-confirm-open{overflow:hidden}.vd-action-confirm-overlay{align-items:center;background:color-mix(in srgb,var(--vd-ink) 58%,transparent);display:flex;inset:0;justify-content:center;padding:18px;position:fixed;z-index:var(--vd-layer-modal)}.vd-action-confirm-dialog{background:var(--vd-surface-raised);border:1px solid var(--vd-line);border-radius:var(--vd-radius-lg);box-shadow:var(--vd-shadow-lg);color:var(--vd-ink);max-width:520px;overflow:hidden;width:100%}.vd-action-confirm-dialog[data-tone="destructive"]{border-color:color-mix(in srgb,var(--vd-danger) 58%,var(--vd-line))}.vd-action-confirm-header{align-items:flex-start;display:flex;gap:13px;padding:20px 20px 12px}.vd-action-confirm-marker{align-items:center;background:var(--vd-brand-soft);border-radius:50%;display:flex;font-size:1rem;font-weight:800;height:34px;justify-content:center;width:34px}.vd-action-confirm-dialog[data-tone="destructive"] .vd-action-confirm-marker{background:color-mix(in srgb,var(--vd-danger) 14%,transparent);color:var(--vd-danger)}.vd-action-confirm-heading{display:grid;gap:4px}.vd-action-confirm-heading h2{font-size:1.08rem;margin:0}.vd-action-confirm-risk{color:var(--vd-ink-muted);font-size:.7rem;font-weight:760;letter-spacing:.06em;text-transform:uppercase}.vd-action-confirm-dialog[data-tone="destructive"] .vd-action-confirm-risk{color:var(--vd-danger)}.vd-action-confirm-body{display:grid;gap:14px;padding:0 20px 20px}.vd-action-confirm-message{color:var(--vd-ink-secondary);line-height:1.55;margin:0}.vd-action-confirm-phrase{display:grid;font-size:.82rem;font-weight:650;gap:7px}.vd-action-confirm-phrase input{background:var(--vd-surface);border:1px solid var(--vd-line-strong);border-radius:9px;color:inherit;font:inherit;padding:10px 11px}.vd-action-confirm-footer{align-items:center;background:var(--vd-surface-muted);border-top:1px solid var(--vd-line);display:flex;gap:9px;justify-content:flex-end;padding:14px 20px}.vd-action-confirm-cancel,.vd-action-confirm-submit{border:1px solid var(--vd-line);border-radius:9px;cursor:pointer;font:inherit;font-weight:700;min-height:38px;padding:8px 13px}.vd-action-confirm-cancel{background:var(--vd-surface-raised);color:inherit}.vd-action-confirm-submit{background:var(--vd-brand);border-color:transparent;color:var(--vd-on-accent)}.vd-action-confirm-dialog[data-tone="destructive"] .vd-action-confirm-submit{background:var(--vd-danger)}.vd-action-confirm-submit:disabled{cursor:not-allowed;opacity:.45}.vd-action-button:focus-visible,.vd-action-confirm-cancel:focus-visible,.vd-action-confirm-submit:focus-visible,.vd-action-confirm-phrase input:focus-visible{outline:3px solid color-mix(in srgb,var(--vd-brand) 36%,transparent);outline-offset:2px}@media(max-width:620px){.vd-action-confirm-overlay{align-items:flex-end;padding:10px}.vd-action-confirm-dialog{border-radius:16px 16px 12px 12px;max-height:92vh}.vd-action-confirm-footer{align-items:stretch;flex-direction:column-reverse}.vd-action-confirm-cancel,.vd-action-confirm-submit{width:100%}.vd-action-surface[data-action-variant="toolbar"] .vd-action-button-copy small{display:none}}@media(prefers-reduced-motion:reduce){.vd-action-button{transition:none}.vd-action-confirm-overlay{backdrop-filter:none}} .ux-nav-history { align-items: center; display: flex; gap: 4px; margin-inline: 4px 8px; } .ux-nav-history-button { align-items: center; background: var(--vd-surface); block-size: 34px; border: 1px solid var(--vd-border-subtle); border-radius: 10px; color: var(--vd-text); cursor: pointer; display: inline-flex; font: 600 18px/1 system-ui; inline-size: 34px; justify-content: center; transition: transform .16s ease, border-color .16s ease, background .16s ease; } .ux-nav-history-button:hover:not(:disabled) { background: var(--vd-surface-raised); border-color: var(--vd-accent); transform: translateY(-1px); } .ux-nav-history-button:disabled { cursor: not-allowed; opacity: .38; } .ux-global-search { backdrop-filter: blur(8px); background: color-mix(in srgb, var(--vd-ink) 55%, transparent); display: grid; inset: 0; padding: clamp(70px, 12vh, 140px) 18px 18px; place-items: start center; position: fixed; z-index: var(--vd-layer-modal); } .ux-global-search.hidden { display: none; } .ux-global-search-panel { background: var(--vd-surface); border: 1px solid var(--vd-border-subtle); border-radius: 18px; box-shadow: var(--vd-shadow-lg); display: flex; flex-direction: column; inline-size: min(760px, 100%); max-block-size: min(720px, calc(100vh - 100px)); overflow: hidden; } .ux-global-search-header { align-items: flex-start; display: flex; justify-content: space-between; padding: 18px 20px 10px; } .ux-global-search-heading { display: grid; gap: 3px; } .ux-global-search-header h2, .ux-global-search-header p { margin: 0; } .ux-global-search-header h2 { color: var(--vd-text); font-size: 1rem; } .ux-global-search-header p { color: var(--vd-text-muted); font-size: .8rem; } .ux-global-search-close { background: transparent; block-size: 34px; border: 0; border-radius: 9px; color: inherit; cursor: pointer; font-size: 24px; inline-size: 34px; } .ux-global-search-close:hover { background: var(--vd-surface-raised); } .ux-global-search-input-wrap { align-items: center; background: var(--vd-surface-raised); border: 1px solid var(--vd-border-strong); border-radius: 12px; display: flex; gap: 12px; margin: 0 16px 8px; padding: 0 14px; } .ux-global-search-input-wrap:focus-within { border-color: var(--vd-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vd-accent) 16%, transparent); } .ux-global-search-input { background: transparent; border: 0; color: inherit; flex: 1; font: inherit; font-size: 1rem; min-inline-size: 0; outline: 0; padding: 14px 0; } .ux-global-search-input-wrap kbd, .ux-global-search-footer, .ux-global-search-status { color: var(--vd-text-muted); font-size: .78rem; } .ux-global-search-input-wrap kbd, .ux-global-search-result-meta kbd { background: var(--vd-surface); border: 1px solid var(--vd-border-subtle); border-radius: 6px; box-shadow: 0 1px 0 color-mix(in srgb, var(--vd-border-strong) 60%, transparent); font-family: inherit; padding: 3px 6px; } .ux-global-search-status { min-block-size: 22px; padding: 0 20px 4px; } .ux-global-search-results { overflow: auto; overscroll-behavior: contain; padding: 2px 10px 12px; scroll-padding-block: 34px 10px; } .ux-global-search-section { color: var(--vd-text-muted); font-size: .7rem; font-weight: 750; letter-spacing: .06em; padding: 12px 12px 5px; text-transform: uppercase; } .ux-global-search-result { align-items: center; background: transparent; border: 0; border-radius: 11px; color: inherit; cursor: pointer; display: grid; gap: 12px; grid-template-columns: 36px minmax(0, 1fr) auto; inline-size: 100%; padding: 11px 12px; text-align: left; } .ux-global-search-result:hover, .ux-global-search-result[aria-selected="true"] { background: var(--vd-accent-soft); } .ux-global-search-result.is-disabled, .ux-global-search-result[aria-disabled="true"] { cursor: not-allowed; opacity: .62; } .ux-global-search-result.is-disabled[aria-selected="true"] { background: var(--vd-surface-raised); box-shadow: inset 3px 0 0 var(--vd-warning); } .ux-global-search-result-icon { align-items: center; background: var(--vd-surface-raised); block-size: 34px; border: 1px solid var(--vd-border-subtle); border-radius: 10px; display: inline-flex; font-size: 1rem; inline-size: 34px; justify-content: center; } .ux-global-search-result-copy { display: grid; gap: 4px; min-inline-size: 0; } .ux-global-search-result-title { align-items: center; display: flex; flex-wrap: wrap; gap: 7px; } .ux-global-search-result-copy strong { font-size: .93rem; } .ux-global-search-result-copy small, .ux-global-search-result-action, .ux-global-search-result-group { color: var(--vd-text-muted); font-size: .78rem; } .ux-global-search-result-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ux-global-search-badge { background: color-mix(in srgb, var(--vd-accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--vd-accent) 24%, transparent); border-radius: 999px; color: var(--vd-accent); font-size: .66rem; font-weight: 700; padding: 2px 6px; } .ux-global-search-result-meta { align-items: flex-end; display: grid; gap: 5px; justify-items: end; min-inline-size: 92px; } .ux-global-search-empty { display: grid; gap: 6px; padding: 30px 18px; text-align: center; } .ux-global-search-empty span { color: var(--vd-text-muted); font-size: .86rem; } .ux-global-search-footer { border-top: 1px solid var(--vd-border-subtle); padding: 12px 18px; text-align: center; } .ux-search-open { overflow: hidden; } .ux-nav-history-button:focus-visible, .ux-global-search-close:focus-visible, .ux-global-search-result:focus-visible, .ux-global-search-input:focus-visible { outline: 3px solid color-mix(in srgb, var(--vd-accent) 36%, transparent); outline-offset: 2px; } @media(max-width:900px) { .ux-nav-history { order: 2; } .ux-shell-ready .topbar-context-icon { display: none; } .ux-nav-history-button { block-size: 32px; inline-size: 32px; } .ux-global-search { padding-top: 72px; } } @media(max-width:620px) { .ux-nav-history { margin-inline: 0 4px; } .ux-nav-history-button { block-size: 30px; border-radius: 8px; inline-size: 30px; } .ux-global-search { padding: 10px; place-items: end center; } .ux-global-search-panel { border-radius: 16px; max-block-size: 88vh; } .ux-global-search-header { padding: 15px 16px 8px; } .ux-global-search-header p, .ux-global-search-result-group, .ux-global-search-result-action { display: none; } .ux-global-search-result { gap: 9px; grid-template-columns: 32px minmax(0, 1fr) auto; padding-inline: 9px; } .ux-global-search-result-icon { block-size: 30px; border-radius: 8px; inline-size: 30px; } .ux-global-search-result-meta { min-inline-size: auto; } .ux-global-search-footer { font-size: .72rem; } } @media(prefers-reduced-motion:reduce) { .ux-nav-history-button { transition: none; } .ux-global-search { backdrop-filter: none; } .ux-global-search-result { scroll-behavior: auto; } } :root { --ap14-rule: color-mix(in srgb, var(--vd-line-strong) 58%, var(--vd-line)); --ap14-accent-rule: color-mix(in srgb, var(--vd-brand) 76%, var(--vd-line)); } main { padding-top: 18px; } .page-heading { align-items: center; border-bottom: 1px solid var(--ap14-rule); margin-bottom: 18px; padding: 0 0 14px 12px; position: relative; } .page-heading::before { background: var(--vd-brand); bottom: 14px; content: ""; left: 0; position: absolute; top: 2px; width: 3px; } .page-heading h2 { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.055em; } .page-heading p:not(.eyebrow) { max-width: 760px; } .page-heading .eyebrow { color: var(--vd-brand); font-size: 9px; letter-spacing: .13em; } .dashboard-operations-heading { align-items: center; border-bottom: 1px solid var(--ap14-rule); padding-bottom: 11px; } .dashboard-operations-heading h3 { font-size: clamp(18px, 1.6vw, 23px); } .dashboard-operations-heading p:last-child { font-size: 11px; } .dashboard-operations-state { background: transparent; border-radius: var(--vd-radius-xs); font-variant-numeric: tabular-nums; } .dashboard-operations-grid { grid-template-columns: minmax(0, 1.65fr) minmax(340px, .75fr); } .dashboard-operations-stack { grid-template-columns: 1fr; } .dashboard-operations-card, .dashboard-card { border-radius: var(--vd-radius-xs); box-shadow: none; } .dashboard-operations-card > header { background: var(--vd-surface-muted); min-height: 44px; padding: 9px 11px; } .dashboard-operation-row { min-height: 40px; } .dashboard-layout { gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(240px, 280px); } .dashboard-kpis { border-bottom: 1px solid var(--ap14-rule); border-top: 1px solid var(--ap14-rule); gap: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); } .dashboard-kpi { background: transparent; border: 0; border-left: 1px solid var(--ap14-rule); border-radius: 0; min-height: 92px; padding: 13px 16px; } .dashboard-kpi:nth-child(3n + 1) { border-left: 0; } .dashboard-kpi-icon, .dashboard-kpi em { display: none; } .dashboard-kpi > div { margin-top: 0; } .dashboard-kpi small { color: var(--vd-ink-muted); font-size: 9px; font-weight: 720; letter-spacing: .06em; text-transform: uppercase; } .dashboard-kpi strong { font-size: 22px; font-variant-numeric: tabular-nums; } .dashboard-kpi svg { bottom: 9px; height: 22px; left: 16px; opacity: .72; right: 16px; width: calc(100% - 32px); } .dashboard-chart-grid, .dashboard-lower-grid { gap: 10px; } .dashboard-card > header { border-bottom: 1px solid var(--vd-line); } .dashboard-rail { border-left: 1px solid var(--ap14-rule); gap: 10px; padding-left: 12px; } .dashboard-actions button { border-radius: var(--vd-radius-xs); } #quality-center .ux-quality-priority-board { background: var(--vd-surface-raised); border-left: 3px solid var(--vd-brand); border-radius: var(--vd-radius-sm); box-shadow: none; gap: 12px; padding: 14px; } #quality-center .ux-quality-priority-head { align-items: center; } #quality-center .ux-quality-priority-head h3 { font-size: clamp(18px, 1.6vw, 22px); } #quality-center .ux-quality-priority-head p { font-size: 11px; } #quality-center .ux-quality-priorities { border-bottom: 1px solid var(--ap14-rule); border-top: 1px solid var(--ap14-rule); gap: 0; } #quality-center .ux-quality-priority { background: transparent; border: 0; border-left: 1px solid var(--ap14-rule); border-radius: 0; padding: 10px 12px; } #quality-center .ux-quality-priority:first-child { border-left: 0; } #quality-center .ux-quality-priority-count { background: transparent; border-radius: var(--vd-radius-xs); min-height: 36px; min-width: 36px; } .quality-summary-grid { border-bottom: 1px solid var(--ap14-rule); gap: 0; margin-bottom: 12px; } .quality-summary-grid article { background: transparent; border: 0; border-left: 1px solid var(--ap14-rule); border-radius: 0; padding: 10px 14px; } .quality-summary-grid article:first-child { border-left: 0; } .quality-summary-grid strong { font-size: 21px; } #quality-center .quality-toolbar, #quality-center .quality-list-panel, #quality-center .quality-detail-panel { border-radius: var(--vd-radius-sm); box-shadow: none; } #quality-center .quality-search input { appearance: none; background: var(--vd-surface-raised); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-xs); color: var(--vd-ink); min-height: var(--vd-control-height); padding: 0 12px; } #quality-center .quality-detail-empty { min-height: 240px; } #quality-center .quality-empty-icon { border-radius: var(--vd-radius-sm); } .ux-publish-guide { background: var(--vd-surface-raised); border-left: 3px solid var(--vd-brand); border-radius: var(--vd-radius-sm); gap: 14px; grid-template-columns: minmax(240px, .8fr) minmax(420px, 1.4fr); padding: 13px 15px; } .ux-publish-guide-copy h3 { font-size: clamp(17px, 1.5vw, 21px); } .ux-publish-guide-copy p { font-size: 10px; } .ux-publish-stage { background: transparent; border: 0; border-left: 1px solid var(--ap14-rule); border-radius: 0; min-height: 48px; padding: 7px 9px; } .ux-publish-stage:first-child { border-left: 0; } .ux-publish-stage-number { border-radius: var(--vd-radius-xs); height: 25px; width: 25px; } .ux-publish-view-group, #publish .publish-list-panel, #publish .publish-workspace-panel, .ux-publish-status-drawer { border-radius: var(--vd-radius-sm); box-shadow: none; } #publish .publish-view-tab { border-radius: var(--vd-radius-xs); min-height: 43px; } #publish .publish-workspace-empty { min-height: 250px; padding-block: 28px; } #inventory.ux-inventory-ready .ux-inventory-overview { background: var(--vd-surface-raised); border-left: 3px solid var(--vd-brand); border-radius: var(--vd-radius-sm); box-shadow: none; gap: 12px; padding: 14px; } #inventory.ux-inventory-ready .ux-inventory-overview h3 { font-size: clamp(18px, 1.6vw, 22px); } #inventory.ux-inventory-ready .ux-inventory-overview p { font-size: 11px; } #inventory.ux-inventory-ready .ux-inventory-metrics { border-bottom: 1px solid var(--ap14-rule); border-top: 1px solid var(--ap14-rule); gap: 0; } #inventory.ux-inventory-ready .ux-inventory-metric { background: transparent; border: 0; border-left: 1px solid var(--ap14-rule); border-radius: 0; padding: 10px 12px; } #inventory.ux-inventory-ready .ux-inventory-metric:first-child { border-left: 0; } #inventory.ux-inventory-ready .ux-inventory-stats-secondary { display: none; } #inventory.ux-inventory-ready .ux-inventory-toolbar, #inventory.ux-inventory-ready .inv-location-card, #inventory.ux-inventory-ready .inventory-detail { border-radius: var(--vd-radius-sm); box-shadow: none; } .empty-state, .dashboard-empty, .publish-rail-empty { padding-block: 24px; } :root { --ux-sidebar-width: 236px; --ux-content-max: 1600px; --ap15-label-font: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; } body { letter-spacing: -.005em; } .sidebar { background: var(--vd-surface); border-right: 1px solid var(--vd-line-strong); } .sidebar-header { border-bottom: 1px solid var(--vd-line); } .ux-nav-section-label, .ux-nav-section > summary, .vd-nav-group-label, .page-heading .eyebrow, .dashboard-operations-heading .eyebrow { font-family: var(--ap15-label-font); } .ux-shell-ready .nav-item { border-radius: var(--vd-radius-xs); min-height: 38px; } .ux-shell-ready .nav-item.active { background: var(--vd-brand-soft); border-color: color-mix(in srgb, var(--vd-brand) 28%, var(--vd-line)); box-shadow: inset 3px 0 0 var(--vd-brand); } .ux-shell-ready .topbar { background: var(--vd-surface); border-bottom: 1px solid var(--vd-line-strong); box-shadow: none; } .topbar-context-icon { background: var(--vd-ink); border-color: var(--vd-ink); color: var(--vd-on-accent); } .page-heading { align-items: flex-end; gap: 24px; justify-content: space-between; min-height: 82px; } .page-heading > div:first-child { min-width: 0; } .page-heading h2 { line-height: 1; margin: 4px 0 8px; } .page-heading p { line-height: 1.5; margin-bottom: 0; } .page-heading-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .text-action { align-items: center; display: inline-flex; min-height: 32px; padding: 0 6px; } .dashboard-operations-card > header strong, .dashboard-card > header strong, .ux-quality-priority-head h3, .ux-publish-guide-copy h3 { letter-spacing: -.025em; } .dashboard-recent-item { overflow: hidden; } .dashboard-operation-status { min-width: max-content; overflow-wrap: normal; white-space: nowrap; word-break: normal; } .dashboard-recent-actions button { min-height: 34px; white-space: nowrap; } .dashboard-category-legend strong, .dashboard-donut strong, .dashboard-kpi strong, .quality-summary-grid strong, .ux-inventory-metric-value { font-variant-numeric: tabular-nums; } #quality-center .quality-list-score, #quality-center .quality-score-ring { font-variant-numeric: tabular-nums; } #image-factory .image-factory-profile-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } #image-factory .image-factory-profile-card { grid-template-columns: 34px minmax(0, 1fr); } #image-factory .image-factory-profile-badge, #image-factory .image-factory-profile-actions { grid-column: 2; justify-self: start; } #image-factory .image-factory-profile-copy { padding-right: 28px; } #settings .settings-savebar, #image-factory .image-factory-submit { position: static; } @media (max-width: 1180px) { .dashboard-layout { grid-template-columns: 1fr; } .dashboard-rail { border-left: 0; border-top: 1px solid var(--ap14-rule); padding-left: 0; padding-top: 12px; } } @media (max-width: 900px) { .page-heading { align-items: flex-start; flex-direction: column; } .page-heading-actions { justify-content: flex-start; width: 100%; } .dashboard-operations-grid, .ux-publish-guide { grid-template-columns: 1fr; } .dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dashboard-kpi:nth-child(3n + 1) { border-left: 1px solid var(--ap14-rule); } .dashboard-kpi:nth-child(2n + 1) { border-left: 0; } } @media (max-width: 620px) { main { padding-top: 12px; } .page-heading { padding-left: 10px; } .dashboard-kpis, #quality-center .ux-quality-priorities, .quality-summary-grid, #inventory.ux-inventory-ready .ux-inventory-metrics { grid-template-columns: 1fr; } .dashboard-kpi, .dashboard-kpi:nth-child(3n + 1), .dashboard-kpi:nth-child(2n + 1), #quality-center .ux-quality-priority, .quality-summary-grid article, #inventory.ux-inventory-ready .ux-inventory-metric { border-left: 0; border-top: 1px solid var(--ap14-rule); } .dashboard-kpi:first-child, #quality-center .ux-quality-priority:first-child, .quality-summary-grid article:first-child, #inventory.ux-inventory-ready .ux-inventory-metric:first-child { border-top: 0; } .ux-publish-stages { grid-template-columns: 1fr; } .ux-publish-stage, .ux-publish-stage:first-child { border-left: 0; border-top: 1px solid var(--ap14-rule); } } [data-vd-signature="apple-workspace"] { --ap19-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI Variable", "Segoe UI", Helvetica, Arial, sans-serif; --ap19-sidebar-width: 216px; --ap19-content-max: 1660px; --ap19-panel-radius: 16px; --ap19-control-radius: 10px; --ap19-hairline: color-mix(in srgb, var(--vd-line) 68%, transparent); --ap19-panel: color-mix(in srgb, var(--vd-surface-raised) 94%, var(--vd-canvas)); --ap19-panel-strong: var(--vd-surface-raised); --ap19-nav: color-mix(in srgb, var(--vd-canvas) 86%, var(--vd-surface-raised)); --ap19-soft-brand: color-mix(in srgb, var(--vd-brand) 8%, var(--vd-surface-raised)); --ap19-soft-success: color-mix(in srgb, var(--vd-success) 8%, var(--vd-surface-raised)); --ap19-soft-warning: color-mix(in srgb, var(--vd-warning) 8%, var(--vd-surface-raised)); --ap19-shadow: 0 16px 38px color-mix(in srgb, var(--vd-ink) 7%, transparent); --ap19-shadow-hover: 0 22px 46px color-mix(in srgb, var(--vd-ink) 10%, transparent); --ux-sidebar-width: var(--ap19-sidebar-width); -webkit-font-smoothing: antialiased; background: var(--vd-canvas); color: var(--vd-ink); display: block; font-family: var(--ap19-font); font-size: 15px; font-synthesis: none; letter-spacing: -.006em; min-width: 0; overflow-x: clip; text-rendering: optimizeLegibility; } [data-vd-signature="apple-workspace"] *, [data-vd-signature="apple-workspace"] *::before, [data-vd-signature="apple-workspace"] *::after { font-family: inherit; } [data-vd-signature="apple-workspace"] button, [data-vd-signature="apple-workspace"] input, [data-vd-signature="apple-workspace"] select, [data-vd-signature="apple-workspace"] textarea { font: inherit; } [data-vd-signature="apple-workspace"] button, [data-vd-signature="apple-workspace"] a, [data-vd-signature="apple-workspace"] summary { -webkit-tap-highlight-color: transparent; } [data-vd-signature="apple-workspace"] :focus-visible { outline: 3px solid var(--vd-focus); outline-offset: 2px; } [data-vd-signature="apple-workspace"] .main-wrapper { background: var(--vd-canvas); margin-left: var(--ap19-sidebar-width); min-height: 100dvh; width: calc(100% - var(--ap19-sidebar-width)); } [data-vd-signature="apple-workspace"] main { margin: 0 auto; max-width: var(--ap19-content-max); overflow-x: clip; padding: clamp(24px, 2.6vw, 44px); width: 100%; } [data-vd-signature="apple-workspace"] .sidebar { background: var(--ap19-nav); border-right: 1px solid var(--ap19-hairline); color: var(--vd-ink); width: var(--ap19-sidebar-width); } [data-vd-signature="apple-workspace"] .sidebar-header { border-bottom: 1px solid var(--ap19-hairline); min-height: 64px; padding: 14px 16px; } [data-vd-signature="apple-workspace"] .sidebar-logo { justify-content: flex-start; min-width: 0; } [data-vd-signature="apple-workspace"] .brand-logo-full { filter: none; height: auto; max-height: 30px; max-width: 128px; object-fit: contain; object-position: left center; } [data-vd-signature="apple-workspace"] .sidebar-nav { padding: 12px 8px 18px; } [data-vd-signature="apple-workspace"] .sidebar-nav .nav-group + .nav-group, [data-vd-signature="apple-workspace"] .ux-nav-section { border-top-color: var(--ap19-hairline); margin-top: 12px; padding-top: 12px; } [data-vd-signature="apple-workspace"] .vd-nav-group-label, [data-vd-signature="apple-workspace"] .ux-nav-section > summary, [data-vd-signature="apple-workspace"] .ux-nav-section-label { color: var(--vd-ink-muted); font-size: 12px; font-weight: 650; letter-spacing: .045em; padding-inline: 10px; text-transform: uppercase; } [data-vd-signature="apple-workspace"] .ux-shell-ready .nav-item { border: 1px solid transparent; border-radius: 10px; color: var(--vd-ink-secondary); font-size: 14px; font-weight: 550; gap: 11px; min-height: 42px; padding: 0 11px; transition: background var(--vd-motion-normal), border-color var(--vd-motion-normal), color var(--vd-motion-normal); } [data-vd-signature="apple-workspace"] .ux-shell-ready .nav-item:hover { background: color-mix(in srgb, var(--vd-surface-raised) 72%, transparent); border-color: transparent; color: var(--vd-ink); } [data-vd-signature="apple-workspace"] .ux-shell-ready .nav-item.active { background: color-mix(in srgb, var(--vd-brand) 9%, var(--vd-surface-raised)); border-color: transparent; box-shadow: inset 3px 0 0 var(--vd-brand); color: var(--vd-brand-strong); } [data-vd-signature="apple-workspace"] .ux-shell-ready .nav-item.active svg { color: var(--vd-brand); } [data-vd-signature="apple-workspace"] .sidebar-footer { background: color-mix(in srgb, var(--ap19-nav) 94%, transparent); border-top: 1px solid var(--ap19-hairline); padding: 10px 10px 12px; } [data-vd-signature="apple-workspace"] .sidebar-user { border-radius: 12px; min-height: 48px; padding: 6px 8px; } [data-vd-signature="apple-workspace"] .sidebar-user-name { color: var(--vd-ink); font-size: 13px; } [data-vd-signature="apple-workspace"] .sidebar-user-role { color: var(--vd-ink-muted); font-size: 12px; } [data-vd-signature="apple-workspace"] .sidebar-logout, [data-vd-signature="apple-workspace"] .theme-toggle { color: var(--vd-ink-secondary); min-height: 40px; } [data-vd-signature="apple-workspace"] .theme-toggle { border-radius: 10px; font-size: 13px; } [data-vd-signature="apple-workspace"] .topbar { backdrop-filter: blur(30px) saturate(1.2); background: color-mix(in srgb, var(--vd-surface-raised) 78%, transparent); border-bottom: 1px solid var(--ap19-hairline); box-shadow: 0 1px 0 color-mix(in srgb, var(--vd-surface-raised) 58%, transparent); gap: 12px; min-height: 62px; padding: 0 clamp(18px, 2.2vw, 34px); position: sticky; top: 0; z-index: var(--vd-layer-sticky); } [data-vd-signature="apple-workspace"] .topbar-context { gap: 8px; min-width: 112px; } [data-vd-signature="apple-workspace"] .topbar-context-icon { display: none; } [data-vd-signature="apple-workspace"] .topbar-title { color: var(--vd-ink); font-size: 14px; font-weight: 650; letter-spacing: -.02em; } [data-vd-signature="apple-workspace"] .topbar-kicker { display: none; } [data-vd-signature="apple-workspace"] .command-search { background: color-mix(in srgb, var(--vd-surface-raised) 90%, transparent); border: 1px solid var(--ap19-hairline); border-radius: 10px; color: var(--vd-ink-secondary); height: 42px; margin-inline: auto; max-width: 620px; min-width: 240px; padding: 0 12px; transition: background var(--vd-motion-normal), border-color var(--vd-motion-normal), box-shadow var(--vd-motion-normal); width: min(42vw, 620px); } [data-vd-signature="apple-workspace"] .command-search:hover { background: var(--vd-surface-raised); border-color: var(--ap19-hairline); box-shadow: none; } [data-vd-signature="apple-workspace"] .command-search span { font-size: 14px; } [data-vd-signature="apple-workspace"] .command-search kbd { background: var(--vd-surface-muted); border: 1px solid var(--vd-line); border-radius: 6px; color: var(--vd-ink-muted); font-size: 12px; padding: 3px 6px; } [data-vd-signature="apple-workspace"] .topbar-actions { gap: 8px; } [data-vd-signature="apple-workspace"] .topbar-btn, [data-vd-signature="apple-workspace"] .topbar-icon-btn { min-height: 40px; } [data-vd-signature="apple-workspace"] .topbar-btn.primary { background: var(--vd-brand); border-color: var(--vd-brand); border-radius: 11px; box-shadow: none; color: var(--vd-on-accent); font-size: 14px; font-weight: 650; padding-inline: 16px; } [data-vd-signature="apple-workspace"] .topbar-btn.primary:hover { background: var(--vd-brand-strong); border-color: var(--vd-brand-strong); transform: translateY(-1px); } [data-vd-signature="apple-workspace"] .topbar-icon-btn, [data-vd-signature="apple-workspace"] .topbar-avatar { border-radius: 10px; height: 40px; width: 40px; } [data-vd-signature="apple-workspace"] .vendoo-runtime-statusbar { margin-left: var(--ap19-sidebar-width); width: calc(100% - var(--ap19-sidebar-width)); } [data-vd-signature="apple-workspace"] .page-heading { align-items: end; gap: 24px; justify-content: space-between; margin-bottom: 24px; min-height: 76px; } [data-vd-signature="apple-workspace"] .page-heading::before { display: none; } [data-vd-signature="apple-workspace"] .page-heading > div:first-child { min-width: 0; } [data-vd-signature="apple-workspace"] .page-heading .eyebrow, [data-vd-signature="apple-workspace"] .dashboard-operations-heading .eyebrow { align-items: center; color: var(--vd-ink-muted); display: flex; font-size: 12px; font-weight: 650; gap: 8px; letter-spacing: .075em; margin: 0 0 8px; text-transform: uppercase; } [data-vd-signature="apple-workspace"] .page-heading .eyebrow::before, [data-vd-signature="apple-workspace"] .dashboard-operations-heading .eyebrow::before { background: var(--vd-brand); border-radius: 999px; content: ""; height: 2px; width: 14px; } [data-vd-signature="apple-workspace"] .page-heading h2 { color: var(--vd-ink); font-family: inherit; font-size: clamp(34px, 2.8vw, 42px); font-weight: 650; letter-spacing: -.04em; line-height: 1.06; margin: 0; } [data-vd-signature="apple-workspace"] .page-heading p:not(.eyebrow) { color: var(--vd-ink-secondary); font-size: 15px; line-height: 1.55; margin-top: 9px; } [data-vd-signature="apple-workspace"] .page-heading-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; } [data-vd-signature="apple-workspace"] .vd-button, [data-vd-signature="apple-workspace"] .primary-btn, [data-vd-signature="apple-workspace"] .secondary-btn, [data-vd-signature="apple-workspace"] .small-btn, [data-vd-signature="apple-workspace"] .text-action { align-items: center; border-radius: var(--ap19-control-radius); display: inline-flex; font-size: 14px; font-weight: 650; justify-content: center; min-height: 42px; padding-inline: 14px; transition: background var(--vd-motion-normal), border-color var(--vd-motion-normal), box-shadow var(--vd-motion-normal), color var(--vd-motion-normal), transform var(--vd-motion-fast); } [data-vd-signature="apple-workspace"] .vd-button:hover, [data-vd-signature="apple-workspace"] .secondary-btn:hover, [data-vd-signature="apple-workspace"] .small-btn:hover { border-color: var(--vd-line-strong); box-shadow: var(--vd-shadow-xs); transform: translateY(-1px); } [data-vd-signature="apple-workspace"] .vd-button.primary, [data-vd-signature="apple-workspace"] .primary-btn { background: var(--vd-brand); border-color: var(--vd-brand); color: var(--vd-on-accent); } [data-vd-signature="apple-workspace"] input, [data-vd-signature="apple-workspace"] select, [data-vd-signature="apple-workspace"] textarea { border-radius: var(--ap19-control-radius); font-size: 14px; } [data-vd-signature="apple-workspace"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), [data-vd-signature="apple-workspace"] select { min-height: 42px; } [data-vd-signature="apple-workspace"] .card, [data-vd-signature="apple-workspace"] .dashboard-card { background: var(--ap19-panel); border: 1px solid var(--ap19-hairline); border-radius: 18px; box-shadow: none; } [data-vd-signature="apple-workspace"] .flowroom-page { container-name: commerce-home; container-type: inline-size; min-width: 0; } [data-vd-signature="apple-workspace"] .flowroom-heading { align-items: end; border-left: 3px solid var(--vd-brand); margin-bottom: 26px; min-height: 88px; padding-left: 16px; } [data-vd-signature="apple-workspace"] .flowroom-heading h2 { font-size: clamp(40px, 3.8vw, 48px); letter-spacing: -.05em; } [data-vd-signature="apple-workspace"] .flowroom-statusline { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 0; } [data-vd-signature="apple-workspace"] .flowroom-statusline span { align-items: center; color: var(--vd-ink-secondary); display: inline-flex; font-size: 14px; gap: 5px; } [data-vd-signature="apple-workspace"] .flowroom-statusline span + span::before { background: var(--vd-line-strong); border-radius: 50%; content: ""; height: 4px; margin-right: 10px; width: 4px; } [data-vd-signature="apple-workspace"] .flowroom-statusline strong { color: var(--vd-ink); font-size: 15px; font-variant-numeric: tabular-nums; font-weight: 700; } [data-vd-signature="apple-workspace"] .flowroom-controls { align-items: end; display: flex; gap: 10px; } [data-vd-signature="apple-workspace"] .flowroom-controls label { color: var(--vd-ink-muted); display: grid; font-size: 12px; font-weight: 700; gap: 6px; letter-spacing: .08em; text-transform: uppercase; } [data-vd-signature="apple-workspace"] .flowroom-controls select { background: var(--vd-surface-raised); border: 1px solid var(--vd-line); min-width: 122px; padding-inline: 12px 32px; } [data-vd-signature="apple-workspace"] .flowroom-data-ledger { background: transparent; border: 0; border-bottom: 1px solid var(--ap19-hairline); border-radius: 0; border-top: 1px solid var(--ap19-hairline); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 32px; overflow: hidden; } [data-vd-signature="apple-workspace"] .flowroom-data-ledger .dashboard-kpi { background: transparent; border: 0; border-left: 1px solid var(--ap19-hairline); border-radius: 0; display: block; min-height: 88px; padding: 17px 20px; } [data-vd-signature="apple-workspace"] .flowroom-data-ledger .dashboard-kpi:first-child { border-left: 0; box-shadow: inset 3px 0 0 var(--vd-brand); } [data-vd-signature="apple-workspace"] .flowroom-data-ledger .dashboard-kpi > div { align-items: baseline; display: grid; gap: 2px; grid-column: auto; grid-row: auto; grid-template-columns: auto minmax(0, 1fr); margin: 0; width: auto; } [data-vd-signature="apple-workspace"] .flowroom-data-ledger .dashboard-kpi small { color: var(--vd-ink-muted); font-size: 12px; font-weight: 700; grid-column: 1 / -1; letter-spacing: .07em; text-transform: uppercase; } [data-vd-signature="apple-workspace"] .flowroom-data-ledger .dashboard-kpi strong { color: var(--vd-ink); font-family: inherit; font-size: clamp(26px, 2vw, 32px); font-variant-numeric: tabular-nums; font-weight: 650; letter-spacing: -.035em; line-height: 1; margin-top: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-vd-signature="apple-workspace"] .flowroom-data-ledger .dashboard-kpi em { color: var(--vd-ink-secondary); font-size: 12px; font-style: normal; margin-left: 7px; } [data-vd-signature="apple-workspace"] .flowroom-data-ledger .dashboard-kpi svg, [data-vd-signature="apple-workspace"] .flowroom-hidden-sparkline { display: none; } [data-vd-signature="apple-workspace"] .flowroom-operations { margin: 0; } [data-vd-signature="apple-workspace"] .flowroom-section-heading { align-items: end; display: flex; gap: 24px; justify-content: space-between; margin-bottom: 18px; padding: 0 2px; } [data-vd-signature="apple-workspace"] .flowroom-section-heading h3 { color: var(--vd-ink); font-family: inherit; font-size: clamp(28px, 2.4vw, 34px); font-weight: 650; letter-spacing: -.04em; line-height: 1.1; margin: 0; } [data-vd-signature="apple-workspace"] .flowroom-section-heading p:last-child { color: var(--vd-ink-secondary); font-size: 13px; line-height: 1.5; margin: 7px 0 0; max-width: 720px; } [data-vd-signature="apple-workspace"] .flowroom-section-heading .dashboard-operations-state { color: var(--vd-ink-muted); font-size: 12px; padding-bottom: 4px; white-space: nowrap; } [data-vd-signature="apple-workspace"] .flowroom-workbench { align-items: stretch; display: grid; gap: 24px; grid-template-columns: minmax(0, 1.7fr) minmax(320px, .72fr); } [data-vd-signature="apple-workspace"] .flowroom-runway { background: var(--ap19-panel-strong); border: 1px solid var(--ap19-hairline); border-top: 3px solid var(--vd-brand); border-radius: var(--ap19-panel-radius); box-shadow: var(--ap19-shadow); min-width: 0; overflow: hidden; } [data-vd-signature="apple-workspace"] .flowroom-runway > .flowroom-panel-heading { align-items: center; border-bottom: 1px solid var(--ap19-hairline); display: flex; justify-content: space-between; min-height: 58px; padding: 10px 18px; } [data-vd-signature="apple-workspace"] .flowroom-panel-heading > div { display: grid; gap: 2px; } [data-vd-signature="apple-workspace"] .flowroom-panel-heading span { color: var(--vd-ink-muted); font-size: 12px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; } [data-vd-signature="apple-workspace"] .flowroom-panel-heading strong { color: var(--vd-ink); font-size: 14px; font-weight: 650; } [data-vd-signature="apple-workspace"] .flowroom-panel-heading .text-action { background: transparent; border-color: transparent; color: var(--vd-ink-secondary); min-height: 40px; padding-inline: 10px; } [data-vd-signature="apple-workspace"] .flowroom-panel-heading .text-action:hover { background: var(--vd-surface-muted); color: var(--vd-ink); } [data-vd-signature="apple-workspace"] .flowroom-recent-articles { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(238px, .7fr); min-height: 460px; } [data-vd-signature="apple-workspace"] .flowroom-selected { display: grid; grid-template-rows: minmax(300px, 360px) auto; min-width: 0; } [data-vd-signature="apple-workspace"] .flowroom-selected-stage { background: color-mix(in srgb, var(--vd-surface-muted) 70%, var(--vd-surface-raised)); box-shadow: inset 0 -1px 0 var(--ap19-hairline); min-height: 260px; overflow: hidden; position: relative; } [data-vd-signature="apple-workspace"] .flowroom-stage-index { background: color-mix(in srgb, var(--vd-surface-raised) 84%, transparent); border: 1px solid var(--ap19-hairline); border-radius: 999px; color: var(--vd-ink-secondary); font-size: 12px; font-weight: 700; left: 18px; letter-spacing: .06em; padding: 7px 10px; position: absolute; text-transform: uppercase; top: 18px; z-index: 2; } [data-vd-signature="apple-workspace"] .flowroom-selected-media { background: transparent; border: 0; cursor: pointer; display: grid; height: 100%; inset: 0; padding: 34px 36px 28px; place-items: center; position: absolute; width: 100%; } [data-vd-signature="apple-workspace"] .flowroom-selected-media img { filter: drop-shadow(0 20px 22px color-mix(in srgb, var(--vd-ink) 14%, transparent)); height: 100%; max-height: 285px; object-fit: contain; transition: transform 320ms ease; width: 100%; } [data-vd-signature="apple-workspace"] .flowroom-selected-media:hover img { transform: scale(1.025) translateY(-2px); } [data-vd-signature="apple-workspace"] .flowroom-product-placeholder { align-items: center; color: var(--vd-ink-muted); display: flex; font-family: inherit; font-size: 28px; justify-content: center; } [data-vd-signature="apple-workspace"] .flowroom-product-tag { backdrop-filter: blur(12px); background: color-mix(in srgb, var(--vd-surface-raised) 86%, transparent); border: 1px solid var(--vd-line); border-radius: 12px; bottom: 16px; box-shadow: var(--vd-shadow-xs); display: grid; gap: 2px 10px; grid-template-columns: auto minmax(0, 1fr); max-width: min(240px, 48%); padding: 10px 12px; position: absolute; right: 16px; z-index: 2; } [data-vd-signature="apple-workspace"] .flowroom-product-tag span { color: var(--vd-ink-muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } [data-vd-signature="apple-workspace"] .flowroom-product-tag strong { color: var(--vd-ink); font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-vd-signature="apple-workspace"] .flowroom-selected-copy { border-top: 1px solid var(--ap19-hairline); padding: 22px; } [data-vd-signature="apple-workspace"] .flowroom-selected-copy > .dashboard-operation-status { border-radius: 999px; display: inline-flex; font-size: 12px; font-weight: 700; margin-bottom: 10px; min-height: 28px; padding: 5px 10px; } [data-vd-signature="apple-workspace"] .flowroom-selected-copy h4 { color: var(--vd-ink); font-family: inherit; font-size: clamp(25px, 2.4vw, 34px); font-weight: 650; letter-spacing: -.04em; line-height: 1.08; margin: 0; } [data-vd-signature="apple-workspace"] .flowroom-selected-copy > p { color: var(--vd-ink-muted); font-size: 13px; line-height: 1.45; margin: 8px 0 16px; } [data-vd-signature="apple-workspace"] .flowroom-marketplaces { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 16px; } [data-vd-signature="apple-workspace"] .flowroom-marketplace { align-items: center; background: color-mix(in srgb, var(--vd-surface) 74%, transparent); border: 1px solid var(--vd-line); border-radius: 10px; display: grid; gap: 1px 8px; grid-template-columns: 28px minmax(0, 1fr); min-height: 48px; padding: 7px 9px; } [data-vd-signature="apple-workspace"] .flowroom-marketplace b { align-items: center; background: var(--vd-surface-muted); border-radius: 7px; display: flex; font-size: 12px; grid-row: 1 / 3; height: 28px; justify-content: center; width: 28px; } [data-vd-signature="apple-workspace"] .flowroom-marketplace span { font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-vd-signature="apple-workspace"] .flowroom-marketplace small { color: var(--vd-ink-muted); font-size: 12px; } [data-vd-signature="apple-workspace"] .flowroom-marketplace.is-active { background: var(--ap19-soft-success); border-color: color-mix(in srgb, var(--vd-success) 32%, var(--vd-line)); } [data-vd-signature="apple-workspace"] .flowroom-marketplace.is-active b { background: var(--vd-success); color: var(--vd-on-accent); } [data-vd-signature="apple-workspace"] .flowroom-context-actions { display: grid; gap: 7px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; } [data-vd-signature="apple-workspace"] .flowroom-context-actions button { background: var(--vd-surface-raised); border: 1px solid var(--vd-line); border-radius: 10px; color: var(--vd-ink-secondary); cursor: pointer; font-size: 13px; font-weight: 650; min-height: 44px; padding: 0 12px; } [data-vd-signature="apple-workspace"] .flowroom-context-actions button:hover { background: var(--vd-surface-muted); border-color: var(--vd-line-strong); color: var(--vd-ink); } [data-vd-signature="apple-workspace"] .flowroom-context-actions button.is-primary { background: var(--vd-brand); border-color: var(--vd-brand); color: var(--vd-on-accent); grid-column: 1 / -1; } [data-vd-signature="apple-workspace"] .flowroom-queue { background: color-mix(in srgb, var(--vd-surface-muted) 40%, transparent); border-left: 1px solid var(--ap19-hairline); display: flex; flex-direction: column; min-width: 0; } [data-vd-signature="apple-workspace"] .flowroom-queue > header { align-items: center; border-bottom: 1px solid var(--ap19-hairline); display: flex; justify-content: space-between; min-height: 50px; padding: 10px 14px; } [data-vd-signature="apple-workspace"] .flowroom-queue > header span { font-size: 13px; font-weight: 700; } [data-vd-signature="apple-workspace"] .flowroom-queue > header strong { color: var(--vd-ink-muted); font-size: 12px; font-weight: 700; } [data-vd-signature="apple-workspace"] .flowroom-queue-item { align-items: center; background: transparent; border: 0; border-bottom: 1px solid var(--ap19-hairline); color: var(--vd-ink); cursor: pointer; display: grid; gap: 9px; grid-template-columns: 20px 56px minmax(0, 1fr); min-height: 86px; padding: 12px 14px; text-align: left; transition: background var(--vd-motion-normal); width: 100%; } [data-vd-signature="apple-workspace"] .flowroom-queue-item:hover { background: var(--vd-surface-muted); } [data-vd-signature="apple-workspace"] .flowroom-queue-index { color: var(--vd-brand); font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 700; } [data-vd-signature="apple-workspace"] .flowroom-queue-media, [data-vd-signature="apple-workspace"] .flowroom-queue-media img { background: var(--vd-surface-muted); border-radius: 9px; height: 56px; object-fit: contain; width: 56px; } [data-vd-signature="apple-workspace"] .flowroom-queue-media { align-items: center; display: flex; justify-content: center; } [data-vd-signature="apple-workspace"] .flowroom-queue-copy { display: grid; gap: 3px; min-width: 0; } [data-vd-signature="apple-workspace"] .flowroom-queue-copy strong { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-vd-signature="apple-workspace"] .flowroom-queue-copy small { color: var(--vd-ink-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-vd-signature="apple-workspace"] .flowroom-queue-item .dashboard-operation-status { grid-column: 3; justify-self: start; margin-top: 2px; } [data-vd-signature="apple-workspace"] .flowroom-queue-empty { color: var(--vd-ink-muted); display: grid; font-size: 12px; gap: 5px; padding: 24px 16px; } [data-vd-signature="apple-workspace"] .flowroom-queue-empty strong { color: var(--vd-ink); font-size: 13px; } [data-vd-signature="apple-workspace"] .flowroom-pulse { background: var(--ap19-panel-strong); border: 1px solid var(--ap19-hairline); border-radius: var(--ap19-panel-radius); box-shadow: none; display: flex; flex-direction: column; min-width: 0; overflow: hidden; } [data-vd-signature="apple-workspace"] .flowroom-pulse-heading { align-items: center; border-bottom: 1px solid var(--ap19-hairline); display: flex; justify-content: space-between; min-height: 66px; padding: 12px 16px; } [data-vd-signature="apple-workspace"] .flowroom-pulse-heading > div { display: grid; gap: 1px; } [data-vd-signature="apple-workspace"] .flowroom-pulse-heading span:first-child { color: var(--vd-ink-muted); font-size: 12px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; } [data-vd-signature="apple-workspace"] .flowroom-pulse-heading h3 { font-family: inherit; font-size: 20px; font-weight: 650; letter-spacing: -.025em; line-height: 1.1; margin: 0; } [data-vd-signature="apple-workspace"] .flowroom-pulse-heading .flowroom-pulse-mark { color: var(--vd-brand); font-family: inherit; font-size: 28px; } [data-vd-signature="apple-workspace"] .flowroom-pulse-group { background: transparent; border: 0; border-bottom: 1px solid var(--ap19-hairline); border-radius: 0; box-shadow: none; min-width: 0; } [data-vd-signature="apple-workspace"] .flowroom-pulse-group > header { align-items: center; display: flex; justify-content: space-between; min-height: 48px; padding: 10px 14px 6px; } [data-vd-signature="apple-workspace"] .flowroom-pulse-group > header > div { display: grid; gap: 1px; } [data-vd-signature="apple-workspace"] .flowroom-pulse-group > header span { color: var(--vd-ink-muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } [data-vd-signature="apple-workspace"] .flowroom-pulse-group > header strong { color: var(--vd-ink-secondary); font-size: 12px; } [data-vd-signature="apple-workspace"] .flowroom-pulse-group .text-action { background: transparent; border-color: transparent; color: var(--vd-ink-secondary); font-size: 12px; min-height: 36px; padding-inline: 8px; } [data-vd-signature="apple-workspace"] .flowroom-pulse-row { align-items: center; background: transparent; border: 0; color: var(--vd-ink); cursor: pointer; display: grid; gap: 10px; grid-template-columns: 36px minmax(0, 1fr) auto; min-height: 62px; padding: 8px 14px 11px; text-align: left; width: 100%; } [data-vd-signature="apple-workspace"] .flowroom-pulse-row + .flowroom-pulse-row { border-top: 1px solid var(--ap19-hairline); } [data-vd-signature="apple-workspace"] .flowroom-pulse-row:hover { background: var(--vd-surface-muted); } [data-vd-signature="apple-workspace"] .flowroom-pulse-kind { align-items: center; background: var(--vd-surface-muted); border: 1px solid var(--vd-line); border-radius: 10px; color: var(--vd-ink-secondary); display: flex; font-size: 12px; font-weight: 700; height: 36px; justify-content: center; width: 36px; } [data-vd-signature="apple-workspace"] .flowroom-pulse-kind.tone-failed, [data-vd-signature="apple-workspace"] .flowroom-pulse-kind.tone-error { background: var(--vd-danger-soft); border-color: color-mix(in srgb, var(--vd-danger) 24%, var(--vd-line)); color: var(--vd-danger); } [data-vd-signature="apple-workspace"] .flowroom-pulse-copy { display: grid; gap: 2px; min-width: 0; } [data-vd-signature="apple-workspace"] .flowroom-pulse-copy strong { font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-vd-signature="apple-workspace"] .flowroom-pulse-copy small, [data-vd-signature="apple-workspace"] .flowroom-pulse-copy em { color: var(--vd-ink-muted); font-size: 12px; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-vd-signature="apple-workspace"] .flowroom-pulse-copy em { color: var(--vd-ink-secondary); margin-top: 2px; } [data-vd-signature="apple-workspace"] .flowroom-pulse-action { color: var(--vd-brand); font-size: 12px; font-weight: 700; } [data-vd-signature="apple-workspace"] .flowroom-system-strip { background: color-mix(in srgb, var(--vd-surface-muted) 72%, var(--vd-surface-raised)); border: 0; border-radius: 0; box-shadow: none; margin-top: auto; padding: 12px 14px; } [data-vd-signature="apple-workspace"] .flowroom-system-strip > header { padding: 0 0 8px; } [data-vd-signature="apple-workspace"] .flowroom-system-strip > p { color: var(--vd-ink-muted); font-size: 12px; line-height: 1.45; margin: 0 0 8px; } [data-vd-signature="apple-workspace"] .flowroom-system-strip .dashboard-system-facts { color: var(--vd-ink-muted); display: flex; flex-wrap: wrap; font-size: 12px; gap: 5px 12px; } [data-vd-signature="apple-workspace"] .flowroom-empty { align-content: center; color: var(--vd-ink-muted); display: grid; gap: 8px; justify-items: start; min-height: 390px; padding: 36px; } [data-vd-signature="apple-workspace"] .flowroom-empty strong { color: var(--vd-ink); font-family: inherit; font-size: 32px; font-weight: 450; } [data-vd-signature="apple-workspace"] .flowroom-empty button { background: var(--vd-brand); border: 1px solid var(--vd-brand); border-radius: 10px; color: var(--vd-on-accent); cursor: pointer; font-weight: 700; margin-top: 8px; min-height: 42px; padding: 0 15px; } [data-vd-signature="apple-workspace"] .flowroom-line { background: var(--ap19-panel); border: 1px solid var(--ap19-hairline); border-radius: 16px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 24px 0 0; overflow: hidden; } [data-vd-signature="apple-workspace"] .flowroom-line button { align-items: center; background: transparent; border: 0; border-left: 1px solid var(--ap19-hairline); color: var(--vd-ink-secondary); cursor: pointer; display: grid; gap: 4px 10px; grid-template-columns: 34px minmax(0, 1fr) auto; min-height: 76px; padding: 10px 16px; position: relative; text-align: left; transition: background var(--vd-motion-normal); } [data-vd-signature="apple-workspace"] .flowroom-line button:first-child { border-left: 0; } [data-vd-signature="apple-workspace"] .flowroom-line button:hover { background: var(--vd-surface-muted); } [data-vd-signature="apple-workspace"] .flowroom-line button > span { align-items: center; border: 1px solid var(--vd-line-strong); border-radius: 50%; display: flex; font-size: 12px; grid-row: 1 / 3; height: 34px; justify-content: center; width: 34px; } [data-vd-signature="apple-workspace"] .flowroom-line button strong { color: var(--vd-ink); font-size: 13px; font-weight: 700; } [data-vd-signature="apple-workspace"] .flowroom-line button small { color: var(--vd-ink-muted); font-size: 12px; font-variant-numeric: tabular-nums; } [data-vd-signature="apple-workspace"] .flowroom-line button[aria-current="step"] { background: var(--ap19-soft-brand); } [data-vd-signature="apple-workspace"] .flowroom-line button[aria-current="step"]::after { background: var(--vd-brand); bottom: 0; content: ""; height: 3px; left: 18px; position: absolute; right: 18px; } [data-vd-signature="apple-workspace"] .flowroom-line button[aria-current="step"] > span { background: var(--vd-brand); border-color: var(--vd-brand); color: var(--vd-on-accent); } [data-vd-signature="apple-workspace"] .flowroom-insights { border-bottom: 1px solid var(--ap19-hairline); margin-top: 24px; } [data-vd-signature="apple-workspace"] .flowroom-insights > summary { align-items: center; cursor: pointer; display: flex; justify-content: space-between; min-height: 64px; padding: 12px 4px; } [data-vd-signature="apple-workspace"] .flowroom-insights > summary::-webkit-details-marker { display: none; } [data-vd-signature="apple-workspace"] .flowroom-insights > summary span:first-child { display: grid; gap: 3px; } [data-vd-signature="apple-workspace"] .flowroom-insights > summary small { color: var(--vd-ink-muted); font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; } [data-vd-signature="apple-workspace"] .flowroom-insights > summary strong { font-family: inherit; font-size: 22px; font-weight: 600; } [data-vd-signature="apple-workspace"] .flowroom-insights > summary > span:last-child { color: var(--vd-ink-secondary); font-size: 24px; transition: transform var(--vd-motion-normal); } [data-vd-signature="apple-workspace"] .flowroom-insights[open] > summary > span:last-child { transform: rotate(45deg); } [data-vd-signature="apple-workspace"] .flowroom-insights-layout { padding: 4px 0 26px; } [data-vd-signature="apple-workspace"] .flowroom-insights .dashboard-card { border-radius: 14px; } [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] #history-detail > #back-to-list { color: var(--vd-ink-secondary); font-size: 13px; font-weight: 700; margin-bottom: 12px; min-height: 40px; } [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-workspace { max-width: var(--ap19-content-max); } [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-command-bar { backdrop-filter: blur(28px) saturate(1.18); background: color-mix(in srgb, var(--vd-surface-raised) 82%, transparent); border: 1px solid var(--ap19-hairline); border-radius: 14px; box-shadow: 0 10px 30px color-mix(in srgb, var(--vd-ink) 5%, transparent); grid-template-columns: minmax(260px, 1fr) auto; row-gap: 6px; } [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-command-status { grid-column: 1; grid-row: 2; justify-self: start; } [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-command-actions { align-items: center; gap: 7px; grid-column: 2; grid-row: 1 / span 2; max-width: 100%; } [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-editor-mode { background: var(--vd-surface-muted); border: 1px solid var(--ap19-hairline); border-radius: 11px; display: inline-flex; gap: 2px; padding: 3px; } [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-editor-mode button { border: 0; border-radius: 8px; color: var(--vd-ink-secondary); font-size: 13px; min-height: 34px; padding-inline: 11px; } [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-editor-mode button[aria-pressed="true"] { background: var(--vd-surface-raised); box-shadow: var(--vd-shadow-xs); color: var(--vd-ink); } [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-summary { background: var(--ap19-panel-strong); border: 1px solid var(--ap19-hairline); border-radius: var(--ap19-panel-radius); box-shadow: none; overflow: hidden; } [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-summary-media { background: var(--vd-surface-muted); border-radius: 14px; min-height: 190px; } [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-summary-media img { object-fit: contain; } [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-summary-heading h1 { font-family: inherit; font-size: clamp(28px, 2.8vw, 38px); font-weight: 650; letter-spacing: -.04em; line-height: 1.08; } [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-summary-facts > div { background: transparent; border: 0; border-radius: 0; min-height: 54px; padding: 8px 12px; } [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-summary-facts span { color: var(--vd-ink-muted); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; } [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-workspace-navigation { background: transparent; border: 0; border-bottom: 1px solid var(--ap19-hairline); border-radius: 0; box-shadow: none; gap: 16px; padding: 0 2px; } [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-workspace-tab { border-radius: 0; font-size: 13px; font-weight: 650; min-height: 44px; padding-inline: 4px; } [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-workspace-tab.is-active, [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-workspace-tab[aria-current="location"] { background: transparent; box-shadow: inset 0 -2px 0 var(--vd-brand); color: var(--vd-ink); } [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-section, [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-card, [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-editor-section, [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-media-studio { background: var(--ap19-panel); border: 1px solid var(--ap19-hairline); border-radius: 18px; box-shadow: none; } [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-card-emphasis { background: var(--ap19-panel); border-color: var(--ap19-hairline); } [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-workspace.is-single-page-editor .article-workspace-panels { gap: 28px; } [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-workspace.is-single-page-editor .article-workspace-panel + .article-workspace-panel { border-top: 0; padding-top: 0; } [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-command-identity > span, [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-eyebrow { color: var(--vd-ink-muted); font-weight: 650; letter-spacing: .06em; } [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-workspace small, [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-editor-section .marketplace-field > small, [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-editor-section .article-dynamic-field > small { font-size: 12px; } [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-section-header h2 { font-family: inherit; font-size: 24px; font-weight: 650; } [data-vd-signature="apple-workspace"] #quality-center .quality-summary-grid article, [data-vd-signature="apple-workspace"] #media-library .media-summary article, [data-vd-signature="apple-workspace"] #inventory .ux-inventory-metric { background: var(--ap19-panel); border: 1px solid var(--ap19-hairline); border-radius: 14px; min-height: 96px; padding: 16px; } [data-vd-signature="apple-workspace"] #quality-center .quality-summary-grid strong, [data-vd-signature="apple-workspace"] #media-library .media-summary strong, [data-vd-signature="apple-workspace"] #inventory .ux-inventory-metric-value { font-family: inherit; font-size: 30px; font-weight: 650; } [data-vd-signature="apple-workspace"] #quality-center .quality-toolbar, [data-vd-signature="apple-workspace"] #media-library .media-toolbar { border-radius: 14px; padding: 12px; } [data-vd-signature="apple-workspace"] #quality-center .quality-list-panel, [data-vd-signature="apple-workspace"] #quality-center .quality-detail-panel { border-radius: 16px; box-shadow: none; } [data-vd-signature="apple-workspace"] #media-library .media-card { border-radius: 14px; overflow: hidden; transition: box-shadow var(--vd-motion-normal), transform var(--vd-motion-normal); } [data-vd-signature="apple-workspace"] #media-library .media-card:hover { box-shadow: var(--ap19-shadow-hover); transform: translateY(-3px); } @container commerce-home (max-width: 1120px) { [data-vd-signature="apple-workspace"] .flowroom-workbench { grid-template-columns: 1fr; } [data-vd-signature="apple-workspace"] .flowroom-pulse { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } [data-vd-signature="apple-workspace"] .flowroom-pulse-heading, [data-vd-signature="apple-workspace"] .flowroom-system-strip { grid-column: 1 / -1; } [data-vd-signature="apple-workspace"] .flowroom-pulse-group { border-right: 1px solid var(--ap19-hairline); } [data-vd-signature="apple-workspace"] .flowroom-pulse-group:nth-of-type(3) { border-right: 0; } } @container commerce-home (max-width: 780px) { [data-vd-signature="apple-workspace"] .flowroom-heading { align-items: start; flex-direction: column; } [data-vd-signature="apple-workspace"] .flowroom-controls { width: 100%; } [data-vd-signature="apple-workspace"] .flowroom-data-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-vd-signature="apple-workspace"] .flowroom-data-ledger .dashboard-kpi { border-bottom: 1px solid var(--ap19-hairline); } [data-vd-signature="apple-workspace"] .flowroom-data-ledger .dashboard-kpi:nth-child(odd) { border-left: 0; } [data-vd-signature="apple-workspace"] .flowroom-data-ledger .dashboard-kpi:last-child { border-bottom: 0; grid-column: 1 / -1; } [data-vd-signature="apple-workspace"] .flowroom-recent-articles { grid-template-columns: 1fr; } [data-vd-signature="apple-workspace"] .flowroom-queue { border-left: 0; border-top: 1px solid var(--ap19-hairline); } [data-vd-signature="apple-workspace"] .flowroom-pulse { grid-template-columns: 1fr; } [data-vd-signature="apple-workspace"] .flowroom-pulse-heading, [data-vd-signature="apple-workspace"] .flowroom-system-strip { grid-column: auto; } [data-vd-signature="apple-workspace"] .flowroom-pulse-group { border-right: 0; } [data-vd-signature="apple-workspace"] .flowroom-line { display: flex; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; } [data-vd-signature="apple-workspace"] .flowroom-line button { flex: 0 0 168px; scroll-snap-align: start; } } @container article-studio (max-width: 920px) { [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-command-bar { grid-template-columns: minmax(0, 1fr); } [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-command-leading, [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-command-status, [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-command-actions { grid-column: 1; grid-row: auto; } [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-command-actions { justify-content: flex-start; } [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-summary-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @container article-studio (max-width: 700px) { [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-summary { grid-template-columns: 1fr; } [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-summary-media { min-height: 240px; } [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-summary-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1180px) and (min-width: 901px) { [data-vd-signature="apple-workspace"] { --ap19-sidebar-width: 82px; } [data-vd-signature="apple-workspace"] .sidebar-header { justify-content: center; padding-inline: 12px; } [data-vd-signature="apple-workspace"] .brand-logo-full, [data-vd-signature="apple-workspace"] .vd-nav-group-label, [data-vd-signature="apple-workspace"] .ux-nav-section-label, [data-vd-signature="apple-workspace"] .ux-nav-section > summary span, [data-vd-signature="apple-workspace"] .nav-item > span, [data-vd-signature="apple-workspace"] .sidebar-user-info, [data-vd-signature="apple-workspace"] .theme-toggle span { display: none; } [data-vd-signature="apple-workspace"] .brand-logo-icon { display: block; height: 38px; width: 38px; } [data-vd-signature="apple-workspace"] .sidebar-nav { padding-inline: 10px; } [data-vd-signature="apple-workspace"] .ux-shell-ready .nav-item { justify-content: center; padding: 0; } [data-vd-signature="apple-workspace"] .sidebar-user, [data-vd-signature="apple-workspace"] .theme-toggle { justify-content: center; padding-inline: 0; } [data-vd-signature="apple-workspace"] .sidebar-logout { display: none; } [data-vd-signature="apple-workspace"] .command-search { width: min(40vw, 460px); } [data-vd-signature="apple-workspace"] .topbar-context { min-width: 96px; } } @media (max-width: 900px) { [data-vd-signature="apple-workspace"] { --ap19-sidebar-width: 0px; } [data-vd-signature="apple-workspace"] .main-wrapper { margin-left: 0; width: 100%; } [data-vd-signature="apple-workspace"] .vendoo-runtime-statusbar { margin-left: 0; width: 100%; } [data-vd-signature="apple-workspace"] .sidebar { width: min(88vw, 316px); } [data-vd-signature="apple-workspace"] .sidebar-header { min-height: 70px; } [data-vd-signature="apple-workspace"] .brand-logo-full, [data-vd-signature="apple-workspace"] .vd-nav-group-label, [data-vd-signature="apple-workspace"] .ux-nav-section-label { display: block; } [data-vd-signature="apple-workspace"] .ux-nav-section > summary span, [data-vd-signature="apple-workspace"] .nav-item > span, [data-vd-signature="apple-workspace"] .theme-toggle span { display: inline; } [data-vd-signature="apple-workspace"] .sidebar-user-info { display: block; } [data-vd-signature="apple-workspace"] .brand-logo-icon { display: none; } [data-vd-signature="apple-workspace"] .ux-shell-ready .nav-item { justify-content: flex-start; padding-inline: 12px; } [data-vd-signature="apple-workspace"] .sidebar-logout { display: inline-flex; } [data-vd-signature="apple-workspace"] .topbar { gap: 10px; min-height: 64px; padding-inline: 16px; } [data-vd-signature="apple-workspace"] .topbar-context { min-width: 0; } [data-vd-signature="apple-workspace"] .topbar-context-icon { display: none; } [data-vd-signature="apple-workspace"] .sidebar-toggle { display: inline-flex; } [data-vd-signature="apple-workspace"] .command-search { max-width: none; min-width: 150px; width: 100%; } [data-vd-signature="apple-workspace"] main { padding: 26px 20px 34px; } [data-vd-signature="apple-workspace"] #quality-center .quality-workspace { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 780px) { [data-vd-signature="apple-workspace"] .ux-command-platform-chrome { overflow-x: clip; } [data-vd-signature="apple-workspace"] .ux-command-drawer-toggle { font-size: 0; overflow: hidden; } } @media (max-width: 620px) { [data-vd-signature="apple-workspace"] { font-size: 14px; } [data-vd-signature="apple-workspace"] .topbar { gap: 7px; min-height: 62px; padding-inline: 10px; } [data-vd-signature="apple-workspace"] .topbar-heading { display: flex; max-width: 122px; min-width: 0; } [data-vd-signature="apple-workspace"] .topbar-kicker { display: none; } [data-vd-signature="apple-workspace"] .topbar-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-vd-signature="apple-workspace"] .command-search { flex: 1 1 auto; min-width: 0; width: auto; } [data-vd-signature="apple-workspace"] .command-search span, [data-vd-signature="apple-workspace"] .command-search kbd, [data-vd-signature="apple-workspace"] .topbar-btn.primary span, [data-vd-signature="apple-workspace"] .topbar-avatar { display: none; } [data-vd-signature="apple-workspace"] .command-search, [data-vd-signature="apple-workspace"] .topbar-btn, [data-vd-signature="apple-workspace"] .topbar-icon-btn, [data-vd-signature="apple-workspace"] .sidebar-toggle { flex: 0 0 44px; height: 44px; justify-content: center; min-height: 44px; padding: 0; width: 44px; } [data-vd-signature="apple-workspace"] .command-search { margin-left: auto; } [data-vd-signature="apple-workspace"] main { padding: 20px 14px 28px; } [data-vd-signature="apple-workspace"] .page-heading { align-items: start; flex-direction: column; margin-bottom: 20px; min-height: 0; padding-left: 0; } [data-vd-signature="apple-workspace"] .page-heading h2 { font-size: clamp(30px, 9vw, 36px); } [data-vd-signature="apple-workspace"] .page-heading-actions { justify-content: stretch; width: 100%; } [data-vd-signature="apple-workspace"] .page-heading-actions > * { flex: 1 1 140px; } [data-vd-signature="apple-workspace"] .flowroom-heading { border-left: 0; margin-bottom: 20px; min-height: 0; padding-left: 0; } [data-vd-signature="apple-workspace"] .flowroom-heading h2 { font-size: clamp(34px, 10vw, 40px); } [data-vd-signature="apple-workspace"] .flowroom-statusline { gap: 7px 12px; } [data-vd-signature="apple-workspace"] .flowroom-statusline span { font-size: 13px; } [data-vd-signature="apple-workspace"] .flowroom-statusline span + span::before { margin-right: 5px; } [data-vd-signature="apple-workspace"] .flowroom-controls { align-items: stretch; } [data-vd-signature="apple-workspace"] .flowroom-controls label { flex: 1; } [data-vd-signature="apple-workspace"] .flowroom-controls select, [data-vd-signature="apple-workspace"] .flowroom-controls button { min-height: 44px; } [data-vd-signature="apple-workspace"] .flowroom-data-ledger { margin-bottom: 24px; } [data-vd-signature="apple-workspace"] .flowroom-data-ledger .dashboard-kpi { min-height: 82px; padding: 14px; } [data-vd-signature="apple-workspace"] .flowroom-data-ledger .dashboard-kpi strong { font-size: 29px; } [data-vd-signature="apple-workspace"] .flowroom-section-heading { align-items: start; flex-direction: column; gap: 8px; } [data-vd-signature="apple-workspace"] .flowroom-section-heading h3 { font-size: 28px; } [data-vd-signature="apple-workspace"] .flowroom-section-heading .dashboard-operations-state { padding: 0; } [data-vd-signature="apple-workspace"] .flowroom-runway, [data-vd-signature="apple-workspace"] .flowroom-pulse { border-radius: 14px; } [data-vd-signature="apple-workspace"] .flowroom-recent-articles { min-height: 0; } [data-vd-signature="apple-workspace"] .flowroom-selected { grid-template-rows: minmax(240px, 44vh) auto; } [data-vd-signature="apple-workspace"] .flowroom-selected-stage { min-height: 240px; } [data-vd-signature="apple-workspace"] .flowroom-selected-media { padding: 40px 18px 28px; } [data-vd-signature="apple-workspace"] .flowroom-product-tag { bottom: 12px; max-width: calc(100% - 24px); right: 12px; } [data-vd-signature="apple-workspace"] .flowroom-selected-copy { padding: 18px 14px 14px; } [data-vd-signature="apple-workspace"] .flowroom-selected-copy h4 { font-size: 26px; } [data-vd-signature="apple-workspace"] .flowroom-marketplaces { grid-template-columns: 1fr; } [data-vd-signature="apple-workspace"] .flowroom-context-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-vd-signature="apple-workspace"] .flowroom-context-actions button { min-height: 44px; padding-inline: 8px; } [data-vd-signature="apple-workspace"] .flowroom-context-actions button.is-primary { grid-column: 1 / -1; } [data-vd-signature="apple-workspace"] .flowroom-queue-item { min-height: 88px; } [data-vd-signature="apple-workspace"] .flowroom-pulse-row { min-height: 68px; } [data-vd-signature="apple-workspace"] .flowroom-line { border-radius: 12px; } [data-vd-signature="apple-workspace"] .flowroom-line button { min-height: 72px; } [data-vd-signature="apple-workspace"] .flowroom-insights > summary strong { font-size: 21px; } [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-command-bar { position: static; } [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-workspace-navigation { top: var(--vd-article-sticky-top); } [data-vd-signature="apple-workspace"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), [data-vd-signature="apple-workspace"] select, [data-vd-signature="apple-workspace"] .vd-button, [data-vd-signature="apple-workspace"] .primary-btn, [data-vd-signature="apple-workspace"] .secondary-btn, [data-vd-signature="apple-workspace"] .small-btn { min-height: 44px; } } @media (max-width: 420px) { [data-vd-signature="apple-workspace"] .topbar-heading, [data-vd-signature="apple-workspace"] .topbar-icon-btn { display: none; } [data-vd-signature="apple-workspace"] .topbar-context { flex: 0 0 44px; } [data-vd-signature="apple-workspace"] .page-heading-actions > * { flex-basis: 100%; width: 100%; } [data-vd-signature="apple-workspace"] .flowroom-context-actions { grid-template-columns: minmax(0, 1fr); } [data-vd-signature="apple-workspace"] .flowroom-context-actions button.is-primary { grid-column: auto; } [data-vd-signature="apple-workspace"][data-vd-history-mode="detail"] .article-summary-facts { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { [data-vd-signature="apple-workspace"] *, [data-vd-signature="apple-workspace"] *::before, [data-vd-signature="apple-workspace"] *::after { scroll-behavior: auto; transition-duration: .01ms; } [data-vd-signature="apple-workspace"] .flowroom-selected-media img, [data-vd-signature="apple-workspace"] .media-card { transform: none; } } [data-vd-signature="apple-workspace"] .flowroom-data-ledger { grid-template-columns: repeat(4, minmax(0, 1fr)); } [data-vd-signature="apple-workspace"] .flowroom-data-ledger .dashboard-kpi:nth-of-type(5) { display: none; } [data-vd-signature="apple-workspace"] .flowroom-workbench { grid-template-columns: minmax(0, 1.65fr) minmax(300px, .85fr); } [data-vd-signature="apple-workspace"] .flowroom-pulse-group, [data-vd-signature="apple-workspace"] .flowroom-system-strip { background: transparent; } [data-vd-signature="apple-workspace"] .flowroom-insights { margin-top: 18px; } [data-vd-signature="apple-workspace"] .ux-mobile-primary-nav { display: none; } @media (max-width: 620px) { [data-vd-signature="apple-workspace"] .main-wrapper, [data-vd-signature="apple-workspace"] .vendoo-runtime-statusbar { margin-left: 0; width: 100%; } [data-vd-signature="apple-workspace"] main { padding-bottom: calc(92px + env(safe-area-inset-bottom)); } [data-vd-signature="apple-workspace"] .ux-mobile-primary-nav { align-items: center; backdrop-filter: blur(26px) saturate(1.15); background: color-mix(in srgb, var(--vd-surface-raised) 94%, transparent); border-top: 1px solid var(--ap19-hairline); bottom: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); left: 0; padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); position: fixed; right: 0; z-index: calc(var(--vd-layer-sticky) + 10); } [data-vd-signature="apple-workspace"] .ux-mobile-primary-item { align-items: center; background: transparent; border: 0; border-radius: 10px; color: var(--vd-ink-muted); display: flex; flex-direction: column; font-size: 12px; font-weight: 650; gap: 3px; justify-content: center; min-height: 54px; min-width: 0; padding: 4px 2px; } [data-vd-signature="apple-workspace"] .ux-mobile-primary-item > span { align-items: center; display: flex; font-size: 20px; height: 24px; justify-content: center; line-height: 1; } [data-vd-signature="apple-workspace"] .ux-mobile-primary-item > b { font: inherit; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-vd-signature="apple-workspace"] .ux-mobile-primary-item.is-active { color: var(--vd-brand-strong); } [data-vd-signature="apple-workspace"] .ux-mobile-primary-item.is-create > span { background: var(--vd-brand); border-radius: 12px; color: var(--vd-on-accent); font-size: 25px; height: 34px; width: 42px; } [data-vd-signature="apple-workspace"] #dashboard .dashboard-controls, [data-vd-signature="apple-workspace"] #dashboard .flowroom-line, [data-vd-signature="apple-workspace"] #dashboard .flowroom-system-strip, [data-vd-signature="apple-workspace"] #dashboard .flowroom-pulse-group:nth-of-type(2), [data-vd-signature="apple-workspace"] #dashboard .flowroom-pulse-group:nth-of-type(3), [data-vd-signature="apple-workspace"] #dashboard .flowroom-insights { display: none; } [data-vd-signature="apple-workspace"] #dashboard .flowroom-heading-copy > .eyebrow, [data-vd-signature="apple-workspace"] #dashboard .flowroom-statusline span:nth-child(3) { display: none; } [data-vd-signature="apple-workspace"] #dashboard .flowroom-heading h2 { font-size: 30px; } [data-vd-signature="apple-workspace"] #dashboard .flowroom-data-ledger { gap: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); } [data-vd-signature="apple-workspace"] #dashboard .flowroom-data-ledger .dashboard-kpi { border-bottom: 0; border-left: 1px solid var(--ap19-hairline); min-height: 76px; padding: 10px 8px; } [data-vd-signature="apple-workspace"] #dashboard .flowroom-data-ledger .dashboard-kpi:first-child { border-left: 0; } [data-vd-signature="apple-workspace"] #dashboard .flowroom-data-ledger .dashboard-kpi small, [data-vd-signature="apple-workspace"] #dashboard .flowroom-data-ledger .dashboard-kpi em { font-size: 12px; } [data-vd-signature="apple-workspace"] #dashboard .flowroom-data-ledger .dashboard-kpi strong { font-size: clamp(20px, 6vw, 26px); } [data-vd-signature="apple-workspace"] #dashboard .flowroom-data-ledger .dashboard-kpi svg { display: none; } [data-vd-signature="apple-workspace"] #dashboard .flowroom-section-heading p:not(.eyebrow) { display: none; } [data-vd-signature="apple-workspace"] #dashboard .flowroom-section-heading h3 { font-size: 23px; } [data-vd-signature="apple-workspace"] #dashboard .flowroom-workbench, [data-vd-signature="apple-workspace"] #dashboard .flowroom-pulse { display: block; } [data-vd-signature="apple-workspace"] #dashboard .flowroom-pulse-heading { margin-top: 14px; } [data-vd-signature="apple-workspace"] #dashboard .flowroom-pulse-group { border-right: 0; } } [data-vd-signature="apple-workspace"] { background: var(--vd-canvas); color: var(--vd-ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; } [data-vd-signature="apple-workspace"] .sidebar { background: var(--vd-surface-raised); border-right: 1px solid var(--vd-line); box-shadow: none; width: var(--vd-sidebar-width); } [data-vd-signature="apple-workspace"] .sidebar-header { border-bottom: 1px solid var(--vd-line); min-height: var(--vd-topbar-height); padding: 12px 16px; } [data-vd-signature="apple-workspace"] .sidebar-logo .brand-logo-full { max-height: 30px; max-width: 126px; } [data-vd-signature="apple-workspace"] .sidebar-nav { gap: 18px; padding: 16px 10px; } [data-vd-signature="apple-workspace"] .nav-group { gap: 3px; } [data-vd-signature="apple-workspace"] .vd-nav-group-label { color: var(--vd-ink-muted); font-size: 12px; font-weight: 650; letter-spacing: .02em; margin: 0 10px 5px; text-transform: none; } [data-vd-signature="apple-workspace"] .nav-item, [data-vd-signature="apple-workspace"] .theme-toggle { border: 0; border-radius: var(--vd-radius-sm); color: var(--vd-ink-secondary); font-size: 13px; font-weight: 560; min-height: 38px; padding: 8px 10px; } [data-vd-signature="apple-workspace"] .nav-item:hover, [data-vd-signature="apple-workspace"] .theme-toggle:hover { background: var(--vd-surface-muted); color: var(--vd-ink); } [data-vd-signature="apple-workspace"] .nav-item.active { background: var(--vd-brand-soft); color: var(--vd-brand-strong); font-weight: 680; } [data-vd-signature="apple-workspace"] .nav-item.active::before { display: none; } [data-vd-signature="apple-workspace"] .sidebar-footer { background: var(--vd-surface-raised); border-top: 1px solid var(--vd-line); padding: 10px; } [data-vd-signature="apple-workspace"] .main-wrapper, [data-vd-signature="apple-workspace"] .vendoo-runtime-statusbar { margin-left: var(--vd-sidebar-width); width: calc(100% - var(--vd-sidebar-width)); } [data-vd-signature="apple-workspace"] .topbar { backdrop-filter: none; background: var(--vd-surface-raised); border-bottom: 1px solid var(--vd-line); box-shadow: none; min-height: var(--vd-topbar-height); padding: 0 24px; } [data-vd-signature="apple-workspace"] .topbar-context-icon, [data-vd-signature="apple-workspace"] .topbar-kicker, [data-vd-signature="apple-workspace"] .topbar-dot { display: none; } [data-vd-signature="apple-workspace"] .topbar-title { font-size: 16px; font-weight: 700; letter-spacing: -.015em; } [data-vd-signature="apple-workspace"] .command-search { background: var(--vd-surface-muted); border: 1px solid transparent; border-radius: var(--vd-radius-sm); box-shadow: none; color: var(--vd-ink-muted); max-width: 500px; min-height: 38px; } [data-vd-signature="apple-workspace"] .command-search:hover, [data-vd-signature="apple-workspace"] .command-search:focus-visible { background: var(--vd-surface-raised); border-color: var(--vd-line-strong); } [data-vd-signature="apple-workspace"] .topbar-btn, [data-vd-signature="apple-workspace"] .topbar-icon-btn { border-radius: var(--vd-radius-sm); box-shadow: none; } [data-vd-signature="apple-workspace"] main { box-sizing: border-box; margin: 0 auto; max-width: 1700px; padding: 28px 32px 48px; width: 100%; } [data-vd-signature="apple-workspace"] .tab-content { min-width: 0; } [data-vd-signature="apple-workspace"] .page-heading, [data-vd-signature="apple-workspace"] .flowroom-heading { align-items: end; border: 0; gap: 24px; margin: 0 0 24px; padding: 0; } [data-vd-signature="apple-workspace"] .page-heading::before, [data-vd-signature="apple-workspace"] .flowroom-heading::before { display: none; } [data-vd-signature="apple-workspace"] .page-heading h2, [data-vd-signature="apple-workspace"] .flowroom-heading h2 { font-size: clamp(28px, 3vw, 38px); font-weight: 720; letter-spacing: -.035em; line-height: 1.05; margin: 0; } [data-vd-signature="apple-workspace"] .page-heading p, [data-vd-signature="apple-workspace"] .flowroom-heading p { color: var(--vd-ink-secondary); line-height: 1.5; max-width: 760px; } [data-vd-signature="apple-workspace"] .eyebrow { color: var(--vd-ink-muted); font-size: 12px; font-weight: 650; letter-spacing: 0; text-transform: none; } [data-vd-signature="apple-workspace"] .vd-button, [data-vd-signature="apple-workspace"] .primary-btn, [data-vd-signature="apple-workspace"] .secondary-btn, [data-vd-signature="apple-workspace"] .small-btn, [data-vd-signature="apple-workspace"] button.primary, [data-vd-signature="apple-workspace"] .topbar-btn.primary { border-radius: var(--vd-component-button-radius); box-shadow: none; font-weight: 650; } [data-vd-signature="apple-workspace"] .primary-btn, [data-vd-signature="apple-workspace"] .vd-button.primary, [data-vd-signature="apple-workspace"] button.primary, [data-vd-signature="apple-workspace"] .topbar-btn.primary { background: var(--vd-brand); border-color: var(--vd-brand); color: var(--vd-on-accent); } [data-vd-signature="apple-workspace"] .secondary-btn, [data-vd-signature="apple-workspace"] .vd-button:not(.primary), [data-vd-signature="apple-workspace"] .small-btn { background: var(--vd-surface-raised); border-color: var(--vd-line); color: var(--vd-ink); } [data-vd-signature="apple-workspace"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), [data-vd-signature="apple-workspace"] select, [data-vd-signature="apple-workspace"] textarea { background: var(--vd-input-bg); border: 1px solid var(--vd-line); border-radius: var(--vd-component-input-radius); box-shadow: none; color: var(--vd-ink); } [data-vd-signature="apple-workspace"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus, [data-vd-signature="apple-workspace"] select:focus, [data-vd-signature="apple-workspace"] textarea:focus { border-color: var(--vd-brand); box-shadow: 0 0 0 var(--vd-component-focus-width) var(--vd-brand-soft); outline: none; } [data-vd-signature="apple-workspace"] .dashboard-card, [data-vd-signature="apple-workspace"] .dashboard-operations-card, [data-vd-signature="apple-workspace"] .quality-card, [data-vd-signature="apple-workspace"] .inventory-card, [data-vd-signature="apple-workspace"] .operations-card, [data-vd-signature="apple-workspace"] .settings-card, [data-vd-signature="apple-workspace"] .module-card, [data-vd-signature="apple-workspace"] .publishing-card, [data-vd-signature="apple-workspace"] .media-card, [data-vd-signature="apple-workspace"] .article-card, [data-vd-signature="apple-workspace"] .vd-card { background: var(--vd-surface-raised); background-image: none; border: 1px solid var(--vd-line); border-radius: var(--vd-component-card-radius); box-shadow: none; } [data-vd-signature="apple-workspace"] table { border-collapse: collapse; } [data-vd-signature="apple-workspace"] th { background: var(--vd-surface-muted); color: var(--vd-ink-secondary); font-size: 12px; font-weight: 650; letter-spacing: 0; text-transform: none; } [data-vd-signature="apple-workspace"] td, [data-vd-signature="apple-workspace"] th { border-bottom: 1px solid var(--vd-line); } [data-vd-signature="apple-workspace"] tbody tr:hover { background: var(--vd-surface-muted); } [data-vd-signature="apple-workspace"] #dashboard .flowroom-statusline { gap: 18px; margin-top: 10px; } [data-vd-signature="apple-workspace"] #dashboard .flowroom-statusline span { background: transparent; border: 0; border-radius: 0; color: var(--vd-ink-secondary); padding: 0; } [data-vd-signature="apple-workspace"] #dashboard .flowroom-data-ledger { background: var(--vd-surface-raised); border: 1px solid var(--vd-line); border-radius: var(--vd-component-card-radius); gap: 0; overflow: clip; } [data-vd-signature="apple-workspace"] #dashboard .flowroom-data-ledger .dashboard-kpi { background: transparent; border: 0; border-left: 1px solid var(--vd-line); border-radius: 0; box-shadow: none; min-height: 104px; padding: 18px 20px; } [data-vd-signature="apple-workspace"] #dashboard .flowroom-data-ledger .dashboard-kpi:first-child { border-left: 0; } [data-vd-signature="apple-workspace"] #dashboard .flowroom-data-ledger .dashboard-kpi strong { font-size: clamp(24px, 2.4vw, 34px); font-weight: 710; letter-spacing: -.035em; } [data-vd-signature="apple-workspace"] #dashboard .flowroom-data-ledger .dashboard-kpi svg { opacity: .55; } [data-vd-signature="apple-workspace"] #dashboard .flowroom-operations { margin-top: 22px; } [data-vd-signature="apple-workspace"] #dashboard .flowroom-section-heading { align-items: end; border-bottom: 1px solid var(--vd-line); margin-bottom: 16px; padding-bottom: 14px; } [data-vd-signature="apple-workspace"] #dashboard .flowroom-workbench { gap: 16px; grid-template-columns: minmax(0, 1.7fr) minmax(300px, .8fr); } [data-vd-signature="apple-workspace"] #dashboard .flowroom-runway, [data-vd-signature="apple-workspace"] #dashboard .flowroom-pulse { border-radius: var(--vd-component-card-radius); box-shadow: none; } [data-vd-signature="apple-workspace"] #dashboard .flowroom-pulse { display: grid; gap: 10px; } [data-vd-signature="apple-workspace"] #dashboard .flowroom-pulse-group { border: 1px solid var(--vd-line); border-radius: var(--vd-radius-sm); padding: 12px; } [data-vd-signature="apple-workspace"] #dashboard .flowroom-pulse-group:nth-of-type(3), [data-vd-signature="apple-workspace"] #dashboard .flowroom-system-strip, [data-vd-signature="apple-workspace"] #dashboard .flowroom-line { display: none; } [data-vd-signature="apple-workspace"] #dashboard .flowroom-insights { border: 1px solid var(--vd-line); border-radius: var(--vd-component-card-radius); margin-top: 18px; } [data-vd-signature="apple-workspace"] #dashboard .flowroom-insights > summary { background: var(--vd-surface-raised); min-height: 60px; padding: 14px 16px; } [data-vd-signature="apple-workspace"] #operations-updates-panel .operations-grid { gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-vd-signature="apple-workspace"] #operations-updates-panel .operations-card { padding: 18px; } [data-vd-signature="apple-workspace"] #operations-updates-panel .operations-deploy-action-card { grid-column: 1 / -1; } [data-vd-signature="apple-workspace"] #operations-updates-panel .operations-deployment-history-card, [data-vd-signature="apple-workspace"] #operations-updates-panel .operations-update-upload { grid-column: span 1; } [data-vd-signature="apple-workspace"] #operations-updates-panel .operation-result { background: var(--vd-surface-muted); border: 1px solid var(--vd-line); border-radius: var(--vd-radius-sm); color: var(--vd-ink-secondary); } [data-vd-signature="apple-workspace"] #operations-updates-panel .operation-dropzone { background: var(--vd-surface-muted); border: 1px dashed var(--vd-line-strong); border-radius: var(--vd-radius-sm); } [data-vd-signature="apple-workspace"] [class*="status"], [data-vd-signature="apple-workspace"] [class*="badge"] { box-shadow: none; } @media (max-width: 1100px) { [data-vd-signature="apple-workspace"] main { padding: 24px; } [data-vd-signature="apple-workspace"] #dashboard .flowroom-workbench, [data-vd-signature="apple-workspace"] #operations-updates-panel .operations-grid { grid-template-columns: 1fr; } [data-vd-signature="apple-workspace"] #operations-updates-panel .operations-deploy-action-card, [data-vd-signature="apple-workspace"] #operations-updates-panel .operations-deployment-history-card, [data-vd-signature="apple-workspace"] #operations-updates-panel .operations-update-upload { grid-column: auto; } } @media (max-width: 760px) { [data-vd-signature="apple-workspace"] .main-wrapper, [data-vd-signature="apple-workspace"] .vendoo-runtime-statusbar { margin-left: 0; width: 100%; } [data-vd-signature="apple-workspace"] .topbar { min-height: 56px; padding: 0 12px; } [data-vd-signature="apple-workspace"] .command-search, [data-vd-signature="apple-workspace"] .topbar-btn.primary, [data-vd-signature="apple-workspace"] .topbar-icon-btn { display: none; } [data-vd-signature="apple-workspace"] main { padding: 18px 14px calc(94px + env(safe-area-inset-bottom)); } [data-vd-signature="apple-workspace"] .page-heading, [data-vd-signature="apple-workspace"] .flowroom-heading { align-items: stretch; flex-direction: column; gap: 12px; margin-bottom: 18px; } [data-vd-signature="apple-workspace"] .page-heading h2, [data-vd-signature="apple-workspace"] .flowroom-heading h2 { font-size: 30px; } [data-vd-signature="apple-workspace"] #dashboard .flowroom-statusline, [data-vd-signature="apple-workspace"] #dashboard .flowroom-heading .eyebrow, [data-vd-signature="apple-workspace"] #dashboard .dashboard-controls, [data-vd-signature="apple-workspace"] #dashboard .flowroom-insights, [data-vd-signature="apple-workspace"] #dashboard .flowroom-system-strip, [data-vd-signature="apple-workspace"] #dashboard .flowroom-pulse-group:nth-of-type(2), [data-vd-signature="apple-workspace"] #dashboard .flowroom-pulse-group:nth-of-type(3) { display: none; } [data-vd-signature="apple-workspace"] #dashboard .flowroom-data-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-vd-signature="apple-workspace"] #dashboard .flowroom-data-ledger .dashboard-kpi { border-bottom: 1px solid var(--vd-line); border-left: 0; min-height: 84px; padding: 12px; } [data-vd-signature="apple-workspace"] #dashboard .flowroom-data-ledger .dashboard-kpi:nth-child(even) { border-left: 1px solid var(--vd-line); } [data-vd-signature="apple-workspace"] #dashboard .flowroom-data-ledger .dashboard-kpi:nth-last-child(-n+2) { border-bottom: 0; } [data-vd-signature="apple-workspace"] #dashboard .flowroom-data-ledger .dashboard-kpi svg { display: none; } [data-vd-signature="apple-workspace"] #dashboard .flowroom-section-heading p:not(.eyebrow) { display: none; } [data-vd-signature="apple-workspace"] .ux-mobile-primary-nav { backdrop-filter: none; background: var(--vd-surface-raised); border-top: 1px solid var(--vd-line); padding: 5px 6px calc(5px + env(safe-area-inset-bottom)); } [data-vd-signature="apple-workspace"] .ux-mobile-primary-item { border-radius: var(--vd-radius-sm); color: var(--vd-ink-muted); font-size: 12px; min-height: 54px; } [data-vd-signature="apple-workspace"] .ux-mobile-primary-item.is-create > span { border-radius: var(--vd-radius-sm); } } [data-vd-signature="apple-workspace"] .sidebar-logo { appearance: none; background: transparent; border: 0; cursor: pointer; display: flex; padding: 0; text-align: left; width: 100%; } [data-vd-signature="apple-workspace"] .home-page { margin: 0 auto; max-width: 1440px; width: 100%; } [data-vd-signature="apple-workspace"] .home-shell { display: grid; gap: clamp(28px, 3vw, 44px); } [data-vd-signature="apple-workspace"] .home-hero { align-items: stretch; background: linear-gradient(145deg, var(--vd-surface-raised), color-mix(in srgb, var(--vd-brand) 4%, var(--vd-surface-raised))); border: 1px solid var(--ap19-hairline); border-radius: 18px; box-shadow: var(--ap19-shadow); display: grid; gap: 28px; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .72fr); overflow: hidden; padding: clamp(28px, 4vw, 56px); } [data-vd-signature="apple-workspace"] .home-hero-copy { align-self: center; max-width: 820px; } [data-vd-signature="apple-workspace"] .home-hero h2 { font-size: clamp(34px, 4.6vw, 64px); letter-spacing: -.045em; line-height: 1.02; margin: 10px 0 18px; max-width: 850px; } [data-vd-signature="apple-workspace"] .home-hero-copy > p:not(.eyebrow) { color: var(--vd-ink-muted); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.65; margin: 0; max-width: 760px; } [data-vd-signature="apple-workspace"] .home-hero-actions, [data-vd-signature="apple-workspace"] .home-daily-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } [data-vd-signature="apple-workspace"] .home-server-pill { align-items: center; background: var(--vd-surface-muted); border: 1px solid var(--ap19-hairline); border-radius: 12px; display: flex; flex-wrap: wrap; gap: 9px 12px; margin-top: 24px; max-width: 690px; padding: 12px 14px; } [data-vd-signature="apple-workspace"] .home-server-pill span { color: var(--vd-ink-muted); font-size: 12px; font-weight: 650; text-transform: uppercase; } [data-vd-signature="apple-workspace"] .home-server-pill code { color: var(--vd-ink); font-size: 13px; overflow-wrap: anywhere; } [data-vd-signature="apple-workspace"] .home-hero-status { align-self: stretch; background: var(--vd-ink); border-radius: 14px; color: var(--vd-canvas); display: flex; flex-direction: column; justify-content: flex-end; min-height: 280px; padding: clamp(22px, 3vw, 34px); } [data-vd-signature="apple-workspace"] .home-status-kicker { font-size: 12px; font-weight: 700; letter-spacing: .08em; opacity: .62; text-transform: uppercase; } [data-vd-signature="apple-workspace"] .home-hero-status strong { font-size: clamp(22px, 2vw, 30px); letter-spacing: -.025em; margin-top: 8px; } [data-vd-signature="apple-workspace"] .home-hero-status p { line-height: 1.55; margin: 12px 0 20px; opacity: .74; } [data-vd-signature="apple-workspace"] .home-hero-status .text-action { align-self: flex-start; color: inherit; } [data-vd-signature="apple-workspace"] .home-section-head { align-items: end; display: flex; gap: 24px; justify-content: space-between; margin-bottom: 18px; } [data-vd-signature="apple-workspace"] .home-section-head h3, [data-vd-signature="apple-workspace"] .home-daily h3 { font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -.03em; margin: 4px 0 0; } [data-vd-signature="apple-workspace"] .home-section-head > span { color: var(--vd-ink-muted); font-size: 13px; } [data-vd-signature="apple-workspace"] .home-step-grid { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); } [data-vd-signature="apple-workspace"] .home-step-card { background: var(--vd-surface-raised); border: 1px solid var(--ap19-hairline); border-radius: 14px; display: grid; gap: 18px; grid-template-rows: auto 1fr; min-height: 270px; padding: 22px; } [data-vd-signature="apple-workspace"] .home-step-number { color: var(--vd-brand); font-size: 13px; font-weight: 760; letter-spacing: .08em; } [data-vd-signature="apple-workspace"] .home-step-card h4, [data-vd-signature="apple-workspace"] .home-capability-grid h4 { font-size: 17px; letter-spacing: -.015em; margin: 0 0 10px; } [data-vd-signature="apple-workspace"] .home-step-card p, [data-vd-signature="apple-workspace"] .home-capability-grid p, [data-vd-signature="apple-workspace"] .home-daily p { color: var(--vd-ink-muted); line-height: 1.6; } [data-vd-signature="apple-workspace"] .home-step-card .text-action { margin-top: 14px; } [data-vd-signature="apple-workspace"] .home-capability-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); } [data-vd-signature="apple-workspace"] .home-capability-grid article { background: var(--vd-surface-raised); border: 1px solid var(--ap19-hairline); border-radius: 14px; min-height: 180px; padding: 22px; } [data-vd-signature="apple-workspace"] .home-capability-grid article > span:first-child { align-items: center; background: var(--ap19-soft-brand); border-radius: 10px; color: var(--vd-brand); display: inline-flex; height: 38px; justify-content: center; margin-bottom: 20px; width: 38px; } [data-vd-signature="apple-workspace"] .home-daily { align-items: center; background: var(--vd-surface-raised); border: 1px solid var(--ap19-hairline); border-radius: 16px; display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr) auto; padding: clamp(22px, 3vw, 34px); } [data-vd-signature="apple-workspace"] .home-daily p { margin-bottom: 0; max-width: 800px; } [data-vd-signature="apple-workspace"] .home-daily-actions { justify-content: flex-end; margin-top: 0; } [data-vd-signature="apple-workspace"] #edit-user-transfer-wrap:not(.hidden) { background: var(--ap19-soft-warning); border: 1px solid color-mix(in srgb, var(--vd-warning) 28%, var(--vd-line)); border-radius: 12px; padding: 14px; } @media (max-width: 1180px) { [data-vd-signature="apple-workspace"] .home-hero { grid-template-columns: minmax(0, 1fr) minmax(250px, .68fr); } [data-vd-signature="apple-workspace"] .home-step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 820px) { [data-vd-signature="apple-workspace"] .home-hero, [data-vd-signature="apple-workspace"] .home-daily { grid-template-columns: 1fr; } [data-vd-signature="apple-workspace"] .home-hero-status { min-height: 210px; } [data-vd-signature="apple-workspace"] .home-capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-vd-signature="apple-workspace"] .home-daily-actions { justify-content: flex-start; } } @media (max-width: 560px) { [data-vd-signature="apple-workspace"] .home-shell { gap: 26px; } [data-vd-signature="apple-workspace"] .home-hero { border-radius: 14px; gap: 22px; padding: 22px 18px; } [data-vd-signature="apple-workspace"] .home-hero h2 { font-size: clamp(31px, 10vw, 43px); } [data-vd-signature="apple-workspace"] .home-hero-actions .vd-button, [data-vd-signature="apple-workspace"] .home-daily-actions .vd-button { justify-content: center; width: 100%; } [data-vd-signature="apple-workspace"] .home-server-pill { align-items: flex-start; flex-direction: column; } [data-vd-signature="apple-workspace"] .home-section-head { align-items: flex-start; flex-direction: column; gap: 8px; } [data-vd-signature="apple-workspace"] .home-step-grid, [data-vd-signature="apple-workspace"] .home-capability-grid { grid-template-columns: 1fr; } [data-vd-signature="apple-workspace"] .home-step-card { min-height: 0; } [data-vd-signature="apple-workspace"] .home-daily { padding: 20px 18px; } } [data-vd-signature="apple-workspace"] .sidebar-nav > .nav-item-home { flex: 0 0 auto; margin: 0 0 2px; } [data-vd-signature="apple-workspace"] .sidebar-nav > .nav-item-home + .nav-group-primary { border-top: 1px solid var(--vd-line); margin-top: 10px; padding-top: 10px; } [data-vd-signature="apple-workspace"] .nav-group-utility { padding-top: 10px; } @media (max-width: 1180px) and (min-width: 901px) { [data-vd-signature="apple-workspace"] .sidebar-nav > .nav-item-home { justify-content: center; padding-inline: 0; } }