/* Page-specific styles only - common styles are in shared/styles.css */

        /* ── Apple HIG Design Tokens ──────────────────────
         *  Type:   10 · 11 · 12 · 13 · 14 · 15 · 16 · 17 px
         *          (0.58 · 0.64 · 0.69 · 0.75 · 0.81 · 0.87 · 0.93 · 1 rem @108%)
         *  Radius: 5  · 8  · 12 · 980 px
         *  Font:   SF Pro Display (≥20px) / SF Pro Text (<20px)
         *  ─────────────────────────────────────────────── */

        /* ── Light Theme (macOS Sequoia Light) ── */
        :root,
        [data-theme="light"] {
            --app-panel: linear-gradient(160deg, rgba(255, 255, 255, 0.82), rgba(239, 244, 247, 0.64));
            --app-panel-accent: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(230, 243, 247, 0.72));
            --app-cta: rgba(238, 242, 245, 0.98);
            --app-cta-hover: rgba(230, 235, 239, 1);
            --app-cta-border: rgba(34, 211, 238, 0.3);
            --app-cta-text: #1d1d1f;
            --app-border: rgba(0, 0, 0, 0.08);
            --app-border-strong: rgba(0, 0, 0, 0.15);
            --app-selected-bg: linear-gradient(165deg, rgba(244, 246, 248, 0.98), rgba(232, 236, 240, 0.98));
            --app-selected-border: rgba(34, 211, 238, 0.92);
            --app-selected-text: #1d1d1f;
            --app-selected-copy: #4b5563;
            --app-text: #1d1d1f;
            --app-muted: #86868b;
            --app-accent: rgba(34, 211, 238, 0.92);
            --app-accent-soft: rgba(236, 240, 244, 0.96);
            --app-surface-soft: rgba(244, 245, 246, 0.7);
            --app-surface-strong: rgba(238, 239, 241, 0.82);
            --app-line-soft: rgba(0, 0, 0, 0.06);
            --app-line-strong: rgba(0, 0, 0, 0.12);
            --app-success: #34c759;
            --app-success-soft: rgba(52, 199, 89, 0.12);
            --app-danger: #ff3b30;
            --app-danger-soft: rgba(255, 59, 48, 0.1);
            --app-shadow-glass: 0 1px 3px rgba(0, 0, 0, 0.08);
            --app-shadow-float: 0 8px 24px rgba(0, 0, 0, 0.12);
            --app-shadow-cta: 0 1px 3px rgba(0, 0, 0, 0.08);
            --app-shadow-selected: 0 1px 3px rgba(0, 0, 0, 0.06);
            --app-shadow-hero: 0 16px 48px rgba(0, 0, 0, 0.1);
            --app-focus: 0 0 0 4px rgba(34, 211, 238, 0.22);

            /* Extended tokens for theme-dependent surfaces */
            --app-body-bg: #f5f5f7;
            --app-nav-bg: #ffffff75;
            --app-nav-border: rgba(0, 0, 0, 0.08);
            --app-sidebar-bg: #ffffff75;
            --app-sidebar-border: rgba(0, 0, 0, 0.06);
            --app-card-separator: rgba(0, 0, 0, 0.06);
            --app-card-heading: #86868b;
            --app-modal-backdrop: rgba(0, 0, 0, 0.3);
            --app-hover-bg: rgba(0, 0, 0, 0.04);
            --app-hover-bg-strong: rgba(0, 0, 0, 0.08);
            --app-input-bg: rgba(0, 0, 0, 0.04);
            --app-input-border: rgba(0, 0, 0, 0.1);
            --app-input-focus-border: rgba(34, 211, 238, 0.52);
            --app-input-focus-ring: 0 0 0 3px rgba(34, 211, 238, 0.18);
            --app-workspace-bg: #ffffff75;
            --app-option-bg: rgba(0, 0, 0, 0.04);
            --app-option-hover: rgba(0, 0, 0, 0.07);
            --app-option-text: #3a3a3c;
            --app-btn-secondary-bg: rgba(0, 0, 0, 0.05);
            --app-btn-secondary-border: rgba(0, 0, 0, 0.08);
            --app-notification-btn-bg: rgba(0, 0, 0, 0.04);
            --app-notification-btn-border: rgba(0, 0, 0, 0.1);
            --app-footer-bg: rgba(245, 245, 247, 0.8);
            --app-footer-border: rgba(0, 0, 0, 0.06);
            --app-selection-bg: rgba(34, 211, 238, 0.15);
            --app-floating-separator: rgba(0, 0, 0, 0.06);
            --app-floating-item-hover: rgba(0, 0, 0, 0.04);
            --app-floating-item-active: rgba(34, 211, 238, 0.1);
            --app-floating-label: #1d1d1f;
            --app-floating-meta: #86868b;
            --app-pro-badge-bg: rgba(0, 0, 0, 0.05);
            --app-pro-badge-border: rgba(0, 0, 0, 0.08);
            --app-pro-badge-text: #3a3a3c;
            --app-scene-option-bg: rgba(255, 255, 255, 0.6);
            --app-scene-option-border: rgba(0, 0, 0, 0.12);
            --app-scene-option-hover-bg: rgba(255, 255, 255, 0.8);
            --app-viewer-frame-bg: rgba(250, 250, 250, 0.9);
            --app-viewer-frame-border: rgba(0, 0, 0, 0.06);
            --app-empty-state-bg: rgba(255, 255, 255, 0.6);
            --app-user-menu-btn-bg: rgba(0, 0, 0, 0.04);
            --app-user-menu-btn-border: rgba(0, 0, 0, 0.1);
            --app-user-menu-btn-text: #3a3a3c;
            --app-user-menu-hr: rgba(0, 0, 0, 0.06);
            --app-user-menu-hover: rgba(0, 0, 0, 0.04);
            --app-notification-pending-bg: rgba(0, 0, 0, 0.04);
            --app-notification-done-bg: rgba(52, 199, 89, 0.1);
            --app-notification-done-text: #34c759;
            --app-tos-focus: 0 0 0 3px rgba(34, 211, 238, 0.18);
            --app-checkbox-accent: rgba(34, 211, 238, 0.92);
            --app-orb-1: rgba(34, 211, 238, 0.28);
            --app-orb-2: rgba(175, 130, 255, 0.2);
            --app-orb-3: rgba(255, 170, 100, 0.22);
            --app-grid-line: rgba(0, 0, 0, 0.03);
            --app-vectary-heading: #1d1d1f;
            --app-vectary-text: #3a3a3c;
        }

        /* ── Dark Theme (macOS Sequoia Dark) ── */
        [data-theme="dark"] {
            --app-panel: linear-gradient(160deg, rgba(44, 44, 46, 0.92), rgba(28, 28, 30, 0.84));
            --app-panel-accent: linear-gradient(160deg, rgba(58, 58, 60, 0.92), rgba(44, 44, 46, 0.82));
            --app-cta: rgba(84, 89, 97, 0.96);
            --app-cta-hover: rgba(96, 101, 109, 0.98);
            --app-cta-border: rgba(34, 211, 238, 0.34);
            --app-cta-text: #ffffff;
            --app-border: rgba(255, 255, 255, 0.1);
            --app-border-strong: rgba(255, 255, 255, 0.18);
            --app-selected-bg: linear-gradient(165deg, rgba(78, 83, 91, 0.94), rgba(62, 67, 75, 0.94));
            --app-selected-border: rgba(34, 211, 238, 0.92);
            --app-selected-text: #f5f5f7;
            --app-selected-copy: #d1d1d6;
            --app-text: #f5f5f7;
            --app-muted: #98989d;
            --app-accent: rgba(34, 211, 238, 0.92);
            --app-accent-soft: rgba(72, 76, 84, 0.9);
            --app-surface-soft: rgba(58, 58, 60, 0.5);
            --app-surface-strong: rgba(58, 58, 60, 0.7);
            --app-line-soft: rgba(255, 255, 255, 0.08);
            --app-line-strong: rgba(255, 255, 255, 0.15);
            --app-success: #30d158;
            --app-success-soft: rgba(48, 209, 88, 0.15);
            --app-danger: #ff453a;
            --app-danger-soft: rgba(255, 69, 58, 0.15);
            --app-shadow-glass: 0 1px 3px rgba(0, 0, 0, 0.2);
            --app-shadow-float: 0 8px 24px rgba(0, 0, 0, 0.35);
            --app-shadow-cta: 0 1px 3px rgba(0, 0, 0, 0.28);
            --app-shadow-selected: 0 1px 3px rgba(0, 0, 0, 0.24);
            --app-shadow-hero: 0 16px 48px rgba(0, 0, 0, 0.3);
            --app-focus: 0 0 0 4px rgba(34, 211, 238, 0.24);

            /* Extended tokens */
            --app-body-bg: #1c1c1e;
            --app-nav-bg: rgba(44, 44, 46, 0.72);
            --app-nav-border: rgba(255, 255, 255, 0.08);
            --app-sidebar-bg: #2c2c2e;
            --app-sidebar-border: rgba(255, 255, 255, 0.08);
            --app-card-separator: rgba(255, 255, 255, 0.08);
            --app-card-heading: #98989d;
            --app-modal-backdrop: rgba(0, 0, 0, 0.5);
            --app-hover-bg: rgba(255, 255, 255, 0.06);
            --app-hover-bg-strong: rgba(255, 255, 255, 0.1);
            --app-input-bg: rgba(255, 255, 255, 0.06);
            --app-input-border: rgba(255, 255, 255, 0.12);
            --app-input-focus-border: rgba(34, 211, 238, 0.58);
            --app-input-focus-ring: 0 0 0 3px rgba(34, 211, 238, 0.22);
            --app-workspace-bg: rgba(44, 44, 46, 0.6);
            --app-option-bg: rgba(255, 255, 255, 0.06);
            --app-option-hover: rgba(255, 255, 255, 0.1);
            --app-option-text: #d1d1d6;
            --app-btn-secondary-bg: rgba(255, 255, 255, 0.08);
            --app-btn-secondary-border: rgba(255, 255, 255, 0.1);
            --app-notification-btn-bg: rgba(255, 255, 255, 0.06);
            --app-notification-btn-border: rgba(255, 255, 255, 0.1);
            --app-footer-bg: rgba(28, 28, 30, 0.8);
            --app-footer-border: rgba(255, 255, 255, 0.06);
            --app-selection-bg: rgba(34, 211, 238, 0.18);
            --app-floating-separator: rgba(255, 255, 255, 0.08);
            --app-floating-item-hover: rgba(255, 255, 255, 0.06);
            --app-floating-item-active: rgba(34, 211, 238, 0.16);
            --app-floating-label: #f5f5f7;
            --app-floating-meta: #98989d;
            --app-pro-badge-bg: rgba(255, 255, 255, 0.08);
            --app-pro-badge-border: rgba(255, 255, 255, 0.1);
            --app-pro-badge-text: #d1d1d6;
            --app-scene-option-bg: rgba(58, 58, 60, 0.5);
            --app-scene-option-border: rgba(255, 255, 255, 0.12);
            --app-scene-option-hover-bg: rgba(58, 58, 60, 0.7);
            --app-viewer-frame-bg: rgba(28, 28, 30, 0.8);
            --app-viewer-frame-border: rgba(255, 255, 255, 0.06);
            --app-empty-state-bg: rgba(44, 44, 46, 0.6);
            --app-user-menu-btn-bg: rgba(255, 255, 255, 0.06);
            --app-user-menu-btn-border: rgba(255, 255, 255, 0.1);
            --app-user-menu-btn-text: #d1d1d6;
            --app-user-menu-hr: rgba(255, 255, 255, 0.08);
            --app-user-menu-hover: rgba(255, 255, 255, 0.06);
            --app-notification-pending-bg: rgba(255, 255, 255, 0.06);
            --app-notification-done-bg: rgba(48, 209, 88, 0.15);
            --app-notification-done-text: #30d158;
            --app-tos-focus: 0 0 0 3px rgba(34, 211, 238, 0.22);
            --app-checkbox-accent: rgba(34, 211, 238, 0.92);
            --app-orb-1: rgba(34, 211, 238, 0.14);
            --app-orb-2: rgba(160, 100, 255, 0.1);
            --app-orb-3: rgba(255, 140, 80, 0.08);
            --app-grid-line: rgba(255, 255, 255, 0.03);
            --app-vectary-heading: #f5f5f7;
            --app-vectary-text: #d1d1d6;
        }

        /* Auto-detect system preference when no explicit theme is set */
        @media (prefers-color-scheme: dark) {
            :root:not([data-theme="light"]) {
                --app-panel: linear-gradient(160deg, rgba(44, 44, 46, 0.92), rgba(28, 28, 30, 0.84));
                --app-panel-accent: linear-gradient(160deg, rgba(58, 58, 60, 0.92), rgba(44, 44, 46, 0.82));
                --app-cta: rgba(84, 89, 97, 0.96);
                --app-cta-hover: rgba(96, 101, 109, 0.98);
                --app-cta-border: rgba(34, 211, 238, 0.34);
                --app-cta-text: #ffffff;
                --app-border: rgba(255, 255, 255, 0.1);
                --app-border-strong: rgba(255, 255, 255, 0.18);
                --app-selected-bg: linear-gradient(165deg, rgba(78, 83, 91, 0.94), rgba(62, 67, 75, 0.94));
                --app-selected-border: rgba(34, 211, 238, 0.92);
                --app-selected-text: #f5f5f7;
                --app-selected-copy: #d1d1d6;
                --app-text: #f5f5f7;
                --app-muted: #98989d;
                --app-accent: rgba(34, 211, 238, 0.92);
                --app-accent-soft: rgba(72, 76, 84, 0.9);
                --app-surface-soft: rgba(58, 58, 60, 0.5);
                --app-surface-strong: rgba(58, 58, 60, 0.7);
                --app-line-soft: rgba(255, 255, 255, 0.08);
                --app-line-strong: rgba(255, 255, 255, 0.15);
                --app-success: #30d158;
                --app-success-soft: rgba(48, 209, 88, 0.15);
                --app-danger: #ff453a;
                --app-danger-soft: rgba(255, 69, 58, 0.15);
                --app-shadow-glass: 0 1px 3px rgba(0, 0, 0, 0.2);
                --app-shadow-float: 0 8px 24px rgba(0, 0, 0, 0.35);
                --app-shadow-cta: 0 1px 3px rgba(0, 0, 0, 0.28);
                --app-shadow-selected: 0 1px 3px rgba(0, 0, 0, 0.24);
                --app-shadow-hero: 0 16px 48px rgba(0, 0, 0, 0.3);
                --app-focus: 0 0 0 4px rgba(34, 211, 238, 0.24);
                --app-body-bg: #1c1c1e;
                --app-nav-bg: rgba(44, 44, 46, 0.72);
                --app-nav-border: rgba(255, 255, 255, 0.08);
                --app-sidebar-bg: #2c2c2e;
                --app-sidebar-border: rgba(255, 255, 255, 0.08);
                --app-card-separator: rgba(255, 255, 255, 0.08);
                --app-card-heading: #98989d;
                --app-modal-backdrop: rgba(0, 0, 0, 0.5);
                --app-hover-bg: rgba(255, 255, 255, 0.06);
                --app-hover-bg-strong: rgba(255, 255, 255, 0.1);
                --app-input-bg: rgba(255, 255, 255, 0.06);
                --app-input-border: rgba(255, 255, 255, 0.12);
                --app-input-focus-border: rgba(34, 211, 238, 0.58);
                --app-input-focus-ring: 0 0 0 3px rgba(34, 211, 238, 0.22);
                --app-workspace-bg: rgba(44, 44, 46, 0.6);
                --app-option-bg: rgba(255, 255, 255, 0.06);
                --app-option-hover: rgba(255, 255, 255, 0.1);
                --app-option-text: #d1d1d6;
                --app-btn-secondary-bg: rgba(255, 255, 255, 0.08);
                --app-btn-secondary-border: rgba(255, 255, 255, 0.1);
                --app-notification-btn-bg: rgba(255, 255, 255, 0.06);
                --app-notification-btn-border: rgba(255, 255, 255, 0.1);
                --app-footer-bg: rgba(28, 28, 30, 0.8);
                --app-footer-border: rgba(255, 255, 255, 0.06);
                --app-selection-bg: rgba(34, 211, 238, 0.18);
                --app-floating-separator: rgba(255, 255, 255, 0.08);
                --app-floating-item-hover: rgba(255, 255, 255, 0.06);
                --app-floating-item-active: rgba(34, 211, 238, 0.16);
                --app-floating-label: #f5f5f7;
                --app-floating-meta: #98989d;
                --app-pro-badge-bg: rgba(255, 255, 255, 0.08);
                --app-pro-badge-border: rgba(255, 255, 255, 0.1);
                --app-pro-badge-text: #d1d1d6;
                --app-scene-option-bg: rgba(58, 58, 60, 0.5);
                --app-scene-option-border: rgba(255, 255, 255, 0.12);
                --app-scene-option-hover-bg: rgba(58, 58, 60, 0.7);
                --app-viewer-frame-bg: rgba(28, 28, 30, 0.8);
                --app-viewer-frame-border: rgba(255, 255, 255, 0.06);
                --app-empty-state-bg: rgba(44, 44, 46, 0.6);
                --app-user-menu-btn-bg: rgba(255, 255, 255, 0.06);
                --app-user-menu-btn-border: rgba(255, 255, 255, 0.1);
                --app-user-menu-btn-text: #d1d1d6;
                --app-user-menu-hr: rgba(255, 255, 255, 0.08);
                --app-user-menu-hover: rgba(255, 255, 255, 0.06);
                --app-notification-pending-bg: rgba(255, 255, 255, 0.06);
                --app-notification-done-bg: rgba(48, 209, 88, 0.15);
                --app-notification-done-text: #30d158;
                --app-tos-focus: 0 0 0 3px rgba(34, 211, 238, 0.22);
                --app-checkbox-accent: rgba(34, 211, 238, 0.92);
                --app-orb-1: rgba(34, 211, 238, 0.14);
                --app-orb-2: rgba(160, 100, 255, 0.1);
                --app-orb-3: rgba(255, 140, 80, 0.08);
                --app-grid-line: rgba(255, 255, 255, 0.03);
                --app-vectary-heading: #f5f5f7;
                --app-vectary-text: #d1d1d6;
            }
        }

        html {
            height: 100%;
            scroll-behavior: smooth;
            font-size: 108%;
        }

        /* ── Animated background orbs ── */
        .app-bg-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(100px);
            opacity: 0.7;
            will-change: transform;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        .app-bg-orb--1 {
            width: 38rem;
            height: 38rem;
            top: -8%;
            left: -6%;
            background: var(--app-orb-1);
            animation: orbDrift1 18s infinite alternate;
        }

        .app-bg-orb--2 {
            width: 28rem;
            height: 28rem;
            top: 30%;
            right: -8%;
            background: var(--app-orb-2);
            animation: orbDrift2 22s infinite alternate;
        }

        .app-bg-orb--3 {
            width: 32rem;
            height: 32rem;
            bottom: -12%;
            left: 30%;
            background: var(--app-orb-3);
            animation: orbDrift3 20s infinite alternate;
        }

        .app-bg-orb--4 {
            width: 22rem;
            height: 22rem;
            top: 50%;
            left: 15%;
            background: var(--app-orb-1);
            opacity: 0.25;
            animation: orbDrift4 25s infinite alternate;
        }

        @keyframes orbDrift1 {
            0%   { transform: translate(0, 0) scale(1); }
            33%  { transform: translate(6vw, 8vh) scale(1.08); }
            66%  { transform: translate(-3vw, 12vh) scale(0.95); }
            100% { transform: translate(4vw, -3vh) scale(1.04); }
        }

        @keyframes orbDrift2 {
            0%   { transform: translate(0, 0) scale(1); }
            33%  { transform: translate(-8vw, -5vh) scale(1.06); }
            66%  { transform: translate(-4vw, 6vh) scale(0.92); }
            100% { transform: translate(3vw, 8vh) scale(1.02); }
        }

        @keyframes orbDrift3 {
            0%   { transform: translate(0, 0) scale(1); }
            33%  { transform: translate(5vw, -6vh) scale(1.1); }
            66%  { transform: translate(-6vw, -3vh) scale(0.96); }
            100% { transform: translate(-2vw, 5vh) scale(1.05); }
        }

        @keyframes orbDrift4 {
            0%   { transform: translate(0, 0) scale(1); }
            33%  { transform: translate(-4vw, 10vh) scale(1.12); }
            66%  { transform: translate(7vw, 4vh) scale(0.9); }
            100% { transform: translate(2vw, -6vh) scale(1.08); }
        }

        /* Reduce motion for accessibility */
        @media (prefers-reduced-motion: reduce) {
            .app-bg-orb {
                animation: none;
            }
        }

        body {
            min-height: 100dvh;
            margin: 0;
            color: var(--app-text);
            background-color: var(--app-body-bg);
            font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            letter-spacing: -0.01em;
        }

        h1,
        h2,
        h3,
        .app-logo,
        .btn-primary,
        .btn-secondary,
        #generateBtnText,
        #scenePromptLabel,
        .scene-reference-title,
        #authModalTitle,
        #passwordResetTitle,
        .notification-title,
        .credit-badge,
        .pro-badge {
            font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            letter-spacing: -0.02em;
        }

        button,
        a,
        input,
        textarea {
            -webkit-tap-highlight-color: transparent;
            transition: background 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, opacity 180ms ease;
        }

        :focus-visible {
            outline: none;
            box-shadow: var(--app-focus) !important;
        }

        ::selection {
            background: var(--app-selection-bg);
            color: var(--app-text);
        }

        /* Scrollbar styling */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: var(--app-line-soft);
            border-radius: 5px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--app-line-strong);
        }

        /* Smooth theme transition */
        body,
        .app-nav,
        .app-sidebar,
        .app-workspace,
        .app-card,
        .modal,
        .modal-card,
        .btn-primary,
        .btn-secondary,
        #userMenu,
        .notification-panel,
        .app-sidebar-footer {
            transition: background-color 0.3s ease, background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
        }

        /* ── Theme Toggle Button ── */
        .theme-toggle-btn {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 34px;
            border-radius: 8px;
            border: 1px solid var(--app-nav-border);
            background: var(--app-hover-bg);
            color: var(--app-muted);
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
        }

        .theme-toggle-btn:hover {
            background: var(--app-hover-bg-strong);
            color: var(--app-text);
        }

        .material-symbols-outlined {
            color: var(--app-text) !important;
            font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
            display: inline-block;
            line-height: 1;
            transform: scale(1.1);
            transform-origin: center;
        }

        #themeToggleBtn .material-symbols-outlined,
        #themeToggleBtn .theme-icon-dark,
        #themeToggleBtn .theme-icon-light {
            color: currentColor !important;
        }

        /* Light theme: show moon to indicate dark mode toggle */
        .theme-icon-dark { display: block; }
        .theme-icon-light { display: none; }

        /* Dark theme: show sun to indicate light mode toggle */
        [data-theme="dark"] .theme-icon-dark { display: none; }
        [data-theme="dark"] .theme-icon-light { display: block; }

        /* Auto dark via system preference */
        @media (prefers-color-scheme: dark) {
            :root:not([data-theme="light"]) .theme-icon-dark { display: none; }
            :root:not([data-theme="light"]) .theme-icon-light { display: block; }
        }

        :root {
            --brand-logo-ratio: 1500 / 510;
            --brand-logo-ratio-value: 2.9411764706;
            --brand-logo-nav-width: 390px;
            --brand-logo-nav-width-mobile: 210px;
            --brand-logo-nav-height: 60px;
            --brand-logo-nav-height-mobile: 44px;
            --brand-logo-nav-offset: 1rem;
            --brand-logo-nav-offset-mobile: 0.4rem;
            --brand-logo-visual-shift: 30.5%;
        }

        #userSection .btn-primary,
        #userSection .btn-secondary {
            font-size: 14px;
        }

        #userSection #userName {
            font-size: 13px;
        }

        #userSection .credit-badge {
            font-size: 13px;
        }

        .app-nav {
            position: relative;
            overflow: visible;
            margin: 14px 14px 0;
            padding: 6px 16px !important;
            border: 1px solid var(--app-nav-border);
            background: var(--app-nav-bg);
            box-shadow: var(--app-shadow-glass);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 12px;
        }

        .app-nav::before {
            display: none;
        }

        .modesToggle.actionTab_wrapper {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 50;
            width: max-content;
        }

        .modesToggle .actionTab.actionTab_switch {
            display: flex !important;
            list-style: none !important;
            margin: 0 !important;
            padding: 0 !important;
            gap: 0 !important;
            border-radius: 0 !important;
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            outline: none !important;
            overflow: visible !important;
        }

        .modesToggle .actionTab .mode-tab-btn {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 6px 16px !important;
            cursor: pointer !important;
            font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, 'Inter', sans-serif !important;
            font-size: 13px !important;
            font-weight: 500 !important;
            letter-spacing: -0.01em !important;
            color: var(--app-muted) !important;
            background: transparent !important;
            border: none !important;
            border-right: 1px solid var(--app-line-soft) !important;
            border-radius: 0 !important;
            margin: 0 !important;
            box-shadow: none !important;
            outline: none !important;
            transition: color 0.2s ease !important;
            white-space: nowrap !important;
            user-select: none !important;
            -webkit-user-select: none !important;
            transform: none !important;
        }

        .modesToggle .actionTab .mode-tab-btn:last-child {
            border-right: none !important;
        }

        .modesToggle .actionTab .mode-tab-btn span,
        .modesToggle .actionTab .mode-tab-btn label {
            color: inherit !important;
            font-weight: inherit !important;
            cursor: pointer !important;
            pointer-events: none !important;
            -webkit-text-fill-color: unset !important;
        }

        .modesToggle .actionTab .mode-tab-btn:not(.active):hover {
            color: var(--app-text) !important;
            background: transparent !important;
            transform: none !important;
        }

        .modesToggle .actionTab .mode-tab-btn.active {
            background: transparent !important;
            color: var(--app-text) !important;
            font-weight: 700 !important;
            border-right: 1px solid var(--app-line-soft) !important;
            box-shadow: none !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            transform: none !important;
        }

        .modesToggle .actionTab .mode-tab-btn.active:last-child {
            border-right: none !important;
        }

        .modesToggle .actionTab .mode-tab-btn.active span,
        .modesToggle .actionTab .mode-tab-btn.active label {
            color: var(--app-text) !important;
            font-weight: 700 !important;
            -webkit-text-fill-color: unset !important;
        }

        #appLoginBtn {
            background: var(--app-cta) !important;
            border: 1px solid var(--app-cta-border) !important;
            border-radius: 8px !important;
            box-shadow: none !important;
            outline: none !important;
            font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, 'Inter', sans-serif !important;
            font-size: 13px !important;
            font-weight: 600 !important;
            letter-spacing: -0.01em !important;
            color: var(--app-cta-text) !important;
            padding: 8px 20px !important;
            min-height: unset !important;
            cursor: pointer !important;
            transition: background 0.2s ease !important;
        }

        #appLoginBtn:hover {
            color: #ffffff !important;
            background: var(--app-cta-hover) !important;
            transform: none !important;
        }

        @media (min-width: 768px) {
            .modesToggle.actionTab_wrapper {
                left: calc((100% - 340px) / 2) !important;
            }
        }

        .app-logo {
            display: inline-flex;
            align-items: center;
            justify-content: flex-start;
            color: var(--app-text);
            letter-spacing: -0.04em;
            line-height: 1;
            width: var(--brand-logo-nav-width);
            height: var(--brand-logo-nav-height);
            aspect-ratio: var(--brand-logo-ratio);
            margin: 0;
            overflow: hidden;
            flex: 0 0 auto;
        }

        .app-logo-slot {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            width: var(--brand-logo-nav-width);
            height: var(--brand-logo-nav-height);
            margin-left: calc(-1 * var(--brand-logo-nav-offset));
            margin-right: 0;
            overflow: hidden;
            flex: 0 0 auto;
        }

        .app-logo-media {
            display: block;
            width: 100%;
            height: 100%;
            max-width: 100%;
            aspect-ratio: var(--brand-logo-ratio);
            object-fit: contain;
            object-position: left center;
            transform: translateX(calc(-1 * var(--brand-logo-visual-shift)));
            transform-origin: left center;
        }

        .app-logo-nav-media {
            opacity: 0;
        }

        .app-logo-nav-media.is-ready {
            opacity: 1;
        }

        .app-logo-mobile-mark {
            display: none;
            align-items: center;
            gap: 10px;
        }

        .app-logo-mobile-icon {
            width: 42px;
            height: 42px;
            border-radius: 999px;
            display: block;
            object-fit: cover;
            flex: 0 0 auto;
        }

        .app-logo-mobile-text {
            color: var(--app-text);
            font-size: 16px;
            font-weight: 700;
            letter-spacing: 0;
            line-height: 1;
            white-space: nowrap;
        }

        [data-theme="dark"] .app-logo-media,
        [data-theme="dark"] .ai-modal-brand-video {
            filter: invert(1);
        }

        @media (prefers-color-scheme: dark) {
            :root:not([data-theme="light"]) .app-logo-media,
            :root:not([data-theme="light"]) .ai-modal-brand-video {
                filter: invert(1);
            }
        }

        @media (max-width: 767px) {
            .app-logo,
            .app-logo-slot {
                width: var(--brand-logo-nav-width-mobile);
                height: var(--brand-logo-nav-height-mobile);
            }

            .app-logo-slot {
                margin-left: 0;
            }

            .app-logo {
                aspect-ratio: var(--brand-logo-ratio);
            }

            #userSection {
                gap: 8px;
            }

            #loggedOutUI,
            #loggedInUI {
                gap: 8px;
            }

            #userSection {
                gap: 6px;
            }

            .credit-badge {
                padding: 6px 10px !important;
                font-size: 12px !important;
            }

            .notification-btn {
                width: 32px !important;
                height: 32px !important;
            }

            #userMenuBtn {
                padding: 6px 8px !important;
            }

        }

        .workflow-status-shell {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            min-width: 0;
            padding: 12px 14px;
            border: 1px solid var(--app-border);
            border-radius: 12px;
            background: var(--app-surface-soft);
            box-shadow: none;
        }

        .workflow-status-shell[data-state="busy"] {
            border-color: rgba(59, 130, 246, 0.3);
            background: rgba(59, 130, 246, 0.1);
        }

        .workflow-status-shell[data-state="ready"],
        .workflow-status-shell[data-state="success"] {
            border-color: rgba(52, 199, 89, 0.25);
            background: rgba(52, 199, 89, 0.1);
        }

        .workflow-status-shell[data-state="error"] {
            border-color: rgba(255, 59, 48, 0.25);
            background: rgba(255, 59, 48, 0.1);
        }

        .workflow-status-dot {
            width: 0.6rem;
            height: 0.6rem;
            margin-top: 4px;
            border-radius: 980px;
            background: rgba(148, 163, 184, 0.9);
            box-shadow: 0 0 0 6px rgba(148, 163, 184, 0.12);
            flex-shrink: 0;
        }

        .workflow-status-shell[data-state="busy"] .workflow-status-dot {
            background: rgba(59, 130, 246, 0.95);
            box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.14);
            animation: workflowPulse 1.6s ease-in-out infinite;
        }

        .workflow-status-shell[data-state="ready"] .workflow-status-dot,
        .workflow-status-shell[data-state="success"] .workflow-status-dot {
            background: rgba(16, 185, 129, 0.92);
            box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.14);
        }

        .workflow-status-shell[data-state="error"] .workflow-status-dot {
            background: rgba(239, 68, 68, 0.9);
            box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.12);
        }

        .workflow-status-label {
            margin: 0;
            color: var(--app-muted);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            line-height: 1.2;
        }

        .workflow-status-text {
            margin: 4px 0 0;
            color: var(--app-text);
            font-size: 15px;
            line-height: 1.45;
        }

        .app-nav-status-anchor {
            position: relative;
            margin: 0 14px;
            padding: 0 16px;
            min-height: 0;
            z-index: 30;
        }

        .workflow-status-wrap {
            width: 100%;
            max-height: 0;
            opacity: 0;
            visibility: hidden;
            overflow: hidden;
            pointer-events: none;
            transform: translateY(-0.5rem);
            transition: opacity 180ms ease, transform 180ms ease, max-height 180ms ease;
        }

        .workflow-status-wrap[data-visible="true"] {
            max-height: 7rem;
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateY(0);
        }

        @media (min-width: 768px) {
            .app-nav-status-anchor {
                height: 0;
            }

            .workflow-status-wrap {
                position: absolute;
                left: 0;
                top: 12px;
                width: clamp(18rem, 32vw, 34rem);
                max-height: none;
                transform: translateY(-0.5rem);
                z-index: 0;
            }

            .workflow-status-wrap[data-visible="true"] {
                transform: translateY(0);
            }
        }

        .app-shell {
            position: relative;
            padding: 14px 16px 16px;
            gap: 14px;
        }

        .app-workspace {
            position: relative;
            overflow: hidden;
            border: 1px solid var(--app-border);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 12px;
            background: var(--app-workspace-bg);
            box-shadow: var(--app-shadow-glass);
        }

        .app-sidebar {
            position: relative;
            overflow: hidden;
            background: var(--app-sidebar-bg);
            border: 1px solid var(--app-sidebar-border);
            border-radius: 12px;
        }

        .app-workspace::before {
            display: none;
        }

        .app-workspace::after {
            display: none;
        }

        .app-sidebar::before {
            display: none;
        }

        .app-card {
            position: relative;
            overflow: hidden;
            background: transparent;
            border: none;
            border-bottom: 1px solid var(--app-card-separator);
            border-radius: 0;
            padding: 12px 0;
        }

        .app-card::before {
            display: none;
        }

        .app-card>.px-1 {
            padding-left: 0;
            padding-right: 0;
        }

        .app-card>h3,
        .app-card .px-1>h3 {
            color: var(--app-card-heading) !important;
            font-size: 12px !important;
            font-weight: 700 !important;
            letter-spacing: 0.18em !important;
            text-transform: uppercase;
        }

        .app-card p,
        .app-card label,
        .notification-copy {
            line-height: 1.55;
        }

        .app-sidebar .text-gray-900,
        .app-sidebar .text-gray-800,
        .app-sidebar .text-gray-700,
        .modal-card .text-gray-900,
        .modal-card .text-gray-800,
        .modal-card .text-gray-700,
        #userMenu .text-gray-900,
        #userMenu .text-gray-800,
        #userMenu .text-gray-700 {
            color: var(--app-text) !important;
        }

        .app-sidebar .text-gray-600,
        .modal-card .text-gray-600,
        #userMenu .text-gray-600 {
            color: var(--app-text) !important;
        }

        .app-sidebar .text-gray-500,
        .modal-card .text-gray-500,
        #userMenu .text-gray-500 {
            color: var(--app-muted) !important;
        }

        .app-sidebar .text-gray-400,
        .app-sidebar .text-gray-300,
        .modal-card .text-gray-400,
        .modal-card .text-gray-300,
        #userMenu .text-gray-400,
        #userMenu .text-gray-300 {
            color: var(--app-muted) !important;
        }

        .app-sidebar .bg-gray-50,
        .modal-card .bg-gray-50,
        #userMenu .bg-gray-50 {
            background: var(--app-surface-soft) !important;
        }

        .app-sidebar .bg-gray-100,
        .modal-card .bg-gray-100,
        #userMenu .bg-gray-100 {
            background: var(--app-surface-strong) !important;
        }

        /* bg-white overrides for theme compatibility */
        .app-sidebar .bg-white,
        .modal-card .bg-white,
        #userMenu .bg-white {
            background: var(--app-sidebar-bg) !important;
        }

        .app-sidebar [class*="bg-white\/"],
        .modal-card [class*="bg-white\/"] {
            background: var(--app-surface-soft) !important;
        }

        .app-sidebar .border-gray-100,
        .app-sidebar .border-gray-200,
        .app-sidebar .border-gray-300,
        .app-sidebar .border-gray-800,
        .modal-card .border-gray-100,
        .modal-card .border-gray-200,
        .modal-card .border-gray-300,
        .modal-card .border-gray-800,
        #userMenu .border-gray-100,
        #userMenu .border-gray-200,
        #userMenu .border-gray-300,
        #userMenu .border-gray-800 {
            border-color: var(--app-line-soft) !important;
        }

        .app-sidebar .hover\:bg-gray-50:hover,
        .modal-card .hover\:bg-gray-50:hover,
        #userMenu .hover\:bg-gray-50:hover {
            background: var(--app-hover-bg) !important;
        }

        .app-sidebar .hover\:bg-gray-100:hover,
        .modal-card .hover\:bg-gray-100:hover,
        #userMenu .hover\:bg-gray-100:hover {
            background: var(--app-hover-bg-strong) !important;
        }

        .app-sidebar .hover\:bg-gray-200:hover,
        .modal-card .hover\:bg-gray-200:hover,
        #userMenu .hover\:bg-gray-200:hover {
            background: var(--app-hover-bg-strong) !important;
        }

        .app-sidebar .bg-gray-200,
        .modal-card .bg-gray-200,
        #userMenu .bg-gray-200 {
            background: var(--app-surface-strong) !important;
        }

        .app-sidebar .text-pro-purple,
        .modal-card .text-pro-purple {
            color: var(--app-selected-text) !important;
        }

        .app-sidebar .bg-pro-purple\/10,
        .modal-card .bg-pro-purple\/10 {
            background: rgba(148, 163, 184, 0.12) !important;
        }

        .app-sidebar .border-pro-purple\/20,
        .modal-card .border-pro-purple\/20 {
            border-color: rgba(148, 163, 184, 0.32) !important;
        }

        .app-sidebar .hover\:bg-pro-purple\/10:hover,
        .app-sidebar .hover\:bg-pro-purple\/20:hover,
        .modal-card .hover\:bg-pro-purple\/10:hover,
        .modal-card .hover\:bg-pro-purple\/20:hover {
            background: rgba(148, 163, 184, 0.16) !important;
        }

        .app-sidebar .hover\:text-pro-purple:hover,
        .modal-card .hover\:text-pro-purple:hover {
            color: var(--app-selected-text) !important;
        }

        .app-sidebar .focus\:ring-pro-purple\/20:focus,
        .app-sidebar .focus\:ring-pro-purple\/30:focus,
        .modal-card .focus\:ring-pro-purple\/20:focus,
        .modal-card .focus\:ring-pro-purple\/30:focus {
            box-shadow: var(--app-focus) !important;
        }

        .app-sidebar .focus\:border-pro-purple:focus,
        .modal-card .focus\:border-pro-purple:focus {
            border-color: var(--app-selected-border) !important;
        }

        .app-sidebar .text-green-500,
        .modal-card .text-green-500 {
            color: var(--app-success) !important;
        }

        .app-sidebar .text-red-600,
        .app-sidebar .text-red-500,
        .modal-card .text-red-600,
        .modal-card .text-red-500,
        #userMenu .text-red-600,
        #userMenu .text-red-500 {
            color: var(--app-danger) !important;
        }

        .app-sidebar .bg-red-50,
        .modal-card .bg-red-50,
        #userMenu .bg-red-50 {
            background: var(--app-danger-soft) !important;
        }

        .app-sidebar .bg-red-100,
        .modal-card .bg-red-100 {
            background: rgba(233, 223, 225, 0.86) !important;
        }

        .app-sidebar .hover\:bg-red-50:hover,
        .modal-card .hover\:bg-red-50:hover,
        #userMenu .hover\:bg-red-50:hover {
            background: rgba(241, 232, 234, 0.9) !important;
        }

        .app-sidebar .hover\:bg-red-200:hover,
        .modal-card .hover\:bg-red-200:hover {
            background: rgba(226, 212, 215, 0.94) !important;
        }

        #userMenu .shadow-lg {
            box-shadow: var(--app-shadow-float) !important;
        }

        .app-sidebar-footer {
            border-top: 1px solid var(--app-footer-border);
            background: var(--app-footer-bg);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-radius: 0 0 12px 12px;
        }



        /* Editor Accordion */
        .editor-accordion-btn {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 0;
            background: none;
            border: none;
            cursor: pointer;
        }

        .editor-accordion-btn .accordion-chevron {
            transition: transform 0.2s;
        }

        .editor-accordion-btn.open .accordion-chevron {
            transform: rotate(180deg);
        }

        .editor-texture-dropzone {
            position: relative;
            overflow: hidden;
            border: 2px dashed var(--app-border-strong);
            border-radius: 12px;
            background: var(--app-surface-soft);
            transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
        }

        .editor-texture-dropzone:hover {
            border-color: var(--app-accent);
            background: var(--app-hover-bg);
            transform: translateY(-1px);
        }

        .editor-texture-preview {
            display: flex;
            align-items: center;
            gap: 12px;
            min-height: 4.5rem;
            padding: 12px;
        }

        .editor-texture-preview.is-empty {
            justify-content: center;
            flex-direction: column;
            gap: 6px;
            text-align: center;
        }

        .editor-texture-preview-thumb {
            width: 3rem;
            height: 3rem;
            flex: 0 0 auto;
            border-radius: 12px;
            border: 1px solid var(--app-border);
            object-fit: cover;
            background: var(--app-surface-soft);
            box-shadow: var(--app-shadow-glass);
        }

        .editor-texture-preview-meta {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 4px;
            text-align: left;
        }

        .editor-texture-preview-title {
            color: var(--app-text);
            font-size: 13px;
            font-weight: 700;
            line-height: 1.1;
        }

        .editor-texture-preview-copy {
            color: var(--app-muted);
            font-size: 11px;
            line-height: 1.25;
            word-break: break-word;
        }

        .editor-texture-remove-btn {
            margin-left: auto;
            flex: 0 0 auto;
            width: 1.5rem;
            height: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            border: none;
            background: rgba(239, 68, 68, 0.08);
            color: var(--app-danger);
            cursor: pointer;
            transition: background 0.15s ease, color 0.15s ease;
        }

        .editor-texture-remove-btn:hover {
            background: var(--app-danger-soft);
            color: var(--app-danger);
        }

        /* Multi-object Material Editor — larger texture preview area */
        #mseRootPanel .editor-texture-dropzone {
            min-height: 7.5rem;
            padding: 8px;
        }
        #mseRootPanel .editor-texture-preview {
            min-height: 6.5rem;
            padding: 0;
            flex-direction: column;
            justify-content: center;
            gap: 6px;
        }
        #mseRootPanel .editor-texture-preview.is-empty {
            color: var(--app-muted);
            font-size: 12px;
        }
        .mse-texture-preview-image {
            display: block;
            max-width: 100%;
            max-height: 7rem;
            width: auto;
            height: auto;
            border-radius: 8px;
            border: 1px solid var(--app-border);
            /* checkerboard for alpha visibility */
            background-color: #f0f0f0;
            background-image:
                linear-gradient(45deg, #d0d0d0 25%, transparent 25%),
                linear-gradient(-45deg, #d0d0d0 25%, transparent 25%),
                linear-gradient(45deg, transparent 75%, #d0d0d0 75%),
                linear-gradient(-45deg, transparent 75%, #d0d0d0 75%);
            background-size: 16px 16px;
            background-position: 0 0, 0 8px, 8px -8px, -8px 0;
            object-fit: contain;
        }
        .mse-texture-preview-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 0 8px;
            font-size: 10px;
            color: var(--app-muted);
            font-variant-numeric: tabular-nums;
        }
        .mse-texture-actions {
            display: flex;
            gap: 6px;
            align-items: stretch;
        }
        .mse-texture-actions > button {
            flex: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            padding: 6px 8px;
            font-size: 11px;
            font-weight: 600;
            color: var(--app-text);
            border: 1px solid var(--app-border-strong);
            border-radius: 6px;
            background: var(--app-input-bg);
            cursor: pointer;
            transition: background 0.15s ease, border-color 0.15s ease;
        }
        .mse-texture-actions > button:hover:not(:disabled) {
            background: var(--app-hover-bg);
            border-color: var(--app-accent);
        }
        .mse-texture-actions > button:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }
        .mse-texture-actions > button .material-symbols-outlined {
            font-size: 14px;
        }

        /* Multi-object Material Editor UV transform grid */
        .mse-uv-grid {
            display: grid;
            grid-template-columns: auto 1fr auto 1fr;
            gap: 4px 6px;
            align-items: center;
            padding: 6px;
            border: 1px dashed var(--app-border-strong);
            border-radius: 6px;
            background: var(--app-input-bg);
        }
        .mse-uv-grid > label {
            font-size: 10px;
            color: var(--app-muted);
            text-transform: uppercase;
            letter-spacing: 0.03em;
            text-align: right;
        }
        .mse-uv-grid > input[type="number"],
        .mse-uv-grid > select {
            width: 100%;
            font-size: 11px;
            padding: 2px 4px;
            border: 1px solid var(--app-border-strong);
            border-radius: 4px;
            background: var(--app-input-bg);
            color: var(--app-option-text);
        }
        .mse-uv-grid > .mse-uv-span2 {
            grid-column: span 4;
        }
        .mse-uv-grid > .mse-uv-pair {
            grid-column: span 2;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .mse-uv-grid > .mse-uv-pair > label {
            font-size: 10px;
            color: var(--app-muted);
            text-transform: uppercase;
            letter-spacing: 0.03em;
            flex: 0 0 auto;
        }
        .mse-uv-grid > .mse-uv-pair > select {
            flex: 1;
            font-size: 11px;
            padding: 2px 4px;
            border: 1px solid var(--app-border-strong);
            border-radius: 4px;
            background: var(--app-input-bg);
            color: var(--app-option-text);
        }

        #viewerStage {
            isolation: isolate;
        }

        #viewerStage::before {
            content: "";
            position: absolute;
            inset: 1.25rem 1.25rem 4rem;
            background:
                linear-gradient(var(--app-grid-line) 1px, transparent 1px),
                linear-gradient(90deg, var(--app-grid-line) 1px, transparent 1px);
            background-size: 52px 52px;
            mask-image: radial-gradient(circle at center, black 35%, transparent 85%);
            opacity: 0.4;
            pointer-events: none;
            z-index: 0;
        }

        #viewerStage::after {
            display: none;
        }

        #viewerStage>#viewerFrame {
            position: relative;
            z-index: 1;
        }

        #viewerFrame {
            border-color: var(--app-viewer-frame-border) !important;
            background: var(--app-viewer-frame-bg) !important;
            box-shadow: var(--app-shadow-glass) !important;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 12px !important;
        }

        #viewerFrame.dragover {
            border-color: var(--app-accent) !important;
            box-shadow: var(--app-focus), var(--app-shadow-glass) !important;
        }

        .viewer-reference-layer {
            position: absolute;
            inset: 0;
            z-index: 0;
            opacity: 0;
            pointer-events: none;
            transition: opacity 180ms ease;
        }

        .viewer-reference-layer.is-visible {
            opacity: 1;
        }

        .viewer-reference-image {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            object-position: center;
        }

        #viewerFrame::before,
        #viewerFrame::after {
            display: none;
        }

        #modelViewer,
        #multiSceneCanvas {
            position: relative;
            z-index: 1;
            background: transparent;
        }

        #viewerFrame.has-reference-canvas #modelViewer,
        #viewerFrame.has-reference-canvas #multiSceneCanvas {
            background: transparent !important;
        }

        #empty-state {
            background: var(--app-empty-state-bg) !important;
        }

        #empty-state::before {
            display: none;
        }

        .empty-state-content {
            position: relative;
            z-index: 1;
            max-width: 27rem;
        }

        .viewer-drop-overlay {
            position: absolute;
            inset: 1rem;
            z-index: 16;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 180ms ease;
        }

        #viewerFrame.dragover .viewer-drop-overlay {
            opacity: 1;
        }

        .viewer-drop-overlay-card {
            display: flex;
            min-width: min(70%, 18rem);
            flex-direction: column;
            align-items: center;
            gap: 6px;
            border: 1px dashed var(--app-border-strong);
            border-radius: 12px;
            background: var(--app-panel-accent);
            padding: 20px 24px;
            color: var(--app-text);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            box-shadow: var(--app-shadow-float);
            text-align: center;
        }

        .viewer-drop-overlay-title {
            font-size: 16px;
            font-weight: 700;
            line-height: 1.2;
        }

        .viewer-drop-overlay-copy {
            font-size: 13px;
            line-height: 1.3;
            color: var(--app-muted);
        }

        .empty-state-orb {
            width: 5rem;
            height: 5rem;
            margin: 0 auto 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 980px;
            border: 1px solid var(--app-border);
            background: var(--app-accent-soft);
            box-shadow: var(--app-shadow-glass);
        }

        .empty-state-logo {
            display: block;
            width: 62%;
            height: 62%;
            object-fit: contain;
            object-position: center;
        }

        #floating-controls button:first-child {
            background: transparent !important;
            border: 0;
            box-shadow: none;
            padding: 0;
        }

        #floating-controls button:first-child:hover,
        #floating-controls button:first-child:focus-visible {
            background: transparent !important;
        }

        #floating-controls button:first-child .empty-state-logo {
            width: 100%;
            height: 100%;
        }

        [data-theme="dark"] #floating-controls button:first-child .empty-state-logo {
            filter: invert(1);
        }

        @media (prefers-color-scheme: dark) {
            :root:not([data-theme="light"]) #floating-controls button:first-child .empty-state-logo {
                filter: invert(1);
            }
        }

        #floatingAiRenderBtn .empty-state-logo {
            animation: floatingAiRenderLogoSpin 4s linear infinite;
            transform-origin: center;
        }

        @keyframes floatingAiRenderLogoSpin {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            #floatingAiRenderBtn .empty-state-logo {
                animation: none;
            }
        }

        .empty-state-kicker {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 12px;
            border-radius: 980px;
            border: 1px solid var(--app-border);
            background: var(--app-surface-soft);
            box-shadow: var(--app-shadow-glass);
            color: var(--app-muted);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
        }

        #empty-state h3 {
            color: var(--app-text) !important;
            margin: 16px auto 10px !important;
            max-width: 22rem;
            font-size: clamp(1.45rem, 2vw, 2rem);
            line-height: 1.05;
        }

        #empty-state p,
        #empty-state .material-symbols-outlined {
            color: var(--app-muted) !important;
        }

        #empty-state p {
            max-width: 21rem;
            margin: 0 auto 24px !important;
            font-size: 17px;
            line-height: 1.65;
        }

        #floating-controls>div {
            background: var(--app-panel-accent) !important;
            border: 1px solid var(--app-border) !important;
            box-shadow: var(--app-shadow-float) !important;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            padding: 8px;
        }

        #floating-controls button {
            color: var(--app-muted) !important;
        }

        #floating-controls button:first-child {
            background: transparent !important;
            border: 0 !important;
            color: inherit !important;
            backdrop-filter: none;
            box-shadow: none;
        }

        #floating-controls .w-px {
            background: var(--app-line-soft) !important;
        }

        .btn-primary,
        #generateBtn,
        #wrVideoGenerateBtn,
        #empty-state button,
        .notification-action {
            position: relative;
            overflow: hidden;
            border: 1px solid var(--app-cta-border) !important;
            background: var(--app-cta) !important;
            color: var(--app-cta-text) !important;
            backdrop-filter: none;
            box-shadow: var(--app-shadow-cta);
            font-weight: 600;
            letter-spacing: -0.01em;
        }

        .btn-primary::before,
        #generateBtn::before,
        #wrVideoGenerateBtn::before,
        #empty-state button::before,
        .notification-action::before {
            display: none;
        }

        .btn-primary:hover,
        #generateBtn:hover,
        #wrVideoGenerateBtn:hover,
        #empty-state button:hover,
        .notification-action:hover {
            background: var(--app-cta-hover) !important;
            transform: none;
            box-shadow: var(--app-shadow-cta);
        }

        .btn-primary,
        .btn-secondary,
        #generateBtn,
        #wrVideoGenerateBtn,
        #empty-state button,
        .notification-action {
            border-radius: 8px !important;
        }

        .btn-secondary {
            border: 1px solid var(--app-btn-secondary-border) !important;
            background: var(--app-btn-secondary-bg) !important;
            color: var(--app-text) !important;
            box-shadow: var(--app-shadow-glass);
        }

        .form-input {
            background: var(--app-input-bg) !important;
            border-color: var(--app-input-border) !important;
            color: var(--app-text) !important;
        }

        .form-input:focus {
            border-color: var(--app-input-focus-border) !important;
            box-shadow: var(--app-input-focus-ring) !important;
        }

        .form-input::placeholder {
            color: var(--app-muted) !important;
        }

        .form-leading-icon {
            transform: translateY(-50%) scale(1.1) !important;
        }

        #userMenuBtn {
            display: inline-flex !important;
            align-items: center !important;
            gap: 6px !important;
            white-space: nowrap;
            border: 1px solid var(--app-nav-border) !important;
            border-radius: 8px !important;
            background: var(--app-hover-bg) !important;
            color: var(--app-muted) !important;
            box-shadow: none !important;
            padding: 7px 10px !important;
            transition: background 0.2s ease, color 0.2s ease;
        }

        #userMenuBtn:hover {
            background: var(--app-hover-bg-strong) !important;
            color: var(--app-text) !important;
        }

        #userMenu {
            position: absolute;
            z-index: 10000;
            border: 1px solid var(--app-border) !important;
            background: var(--app-panel-accent) !important;
            box-shadow: var(--app-shadow-float) !important;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 12px;
        }

        #userMenu hr {
            border-color: var(--app-user-menu-hr) !important;
        }

        #userMenu a:hover {
            background: var(--app-user-menu-hover) !important;
        }

        .credit-badge {
            display: inline-flex !important;
            align-items: center !important;
            gap: 6px !important;
            white-space: nowrap;
            border: 1px solid var(--app-nav-border) !important;
            border-radius: 8px !important;
            background: var(--app-hover-bg) !important;
            color: var(--app-text) !important;
            box-shadow: none !important;
            padding: 7px 12px !important;
            font-size: 13px !important;
            font-weight: 600 !important;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease;
        }

        .credit-badge:hover {
            background: var(--app-hover-bg-strong) !important;
        }

        .notification-btn {
            width: 34px !important;
            height: 34px !important;
            border-radius: 8px !important;
            border: 1px solid var(--app-nav-border) !important;
            background: var(--app-hover-bg) !important;
            color: var(--app-muted) !important;
            box-shadow: none !important;
            transition: background 0.2s ease, color 0.2s ease;
        }

        .notification-btn:hover {
            background: var(--app-hover-bg-strong) !important;
            color: var(--app-text) !important;
        }

        .notification-panel {
            z-index: 10000 !important;
            border: 1px solid var(--app-border) !important;
            background: var(--app-panel-accent) !important;
            box-shadow: var(--app-shadow-float) !important;
            backdrop-filter: blur(20px);
        }

        .app-user-menu .notification-panel {
            position: static !important;
            width: 100% !important;
            margin: 6px 0 8px !important;
        }

        .notification-title {
            color: var(--app-text) !important;
        }

        .notification-copy {
            color: var(--app-muted) !important;
        }

        .notification-panel .notification-close-btn {
            color: var(--app-muted) !important;
        }

        .notification-panel .notification-close-btn:hover {
            color: var(--app-text) !important;
        }

        .notification-action {
            background: var(--app-cta) !important;
            color: var(--app-cta-text) !important;
            border: 1px solid var(--app-cta-border) !important;
            box-shadow: var(--app-shadow-cta) !important;
        }

        .notification-status.pending {
            background: var(--app-notification-pending-bg) !important;
            color: var(--app-text) !important;
        }

        .notification-status.done {
            background: var(--app-notification-done-bg) !important;
            color: var(--app-notification-done-text) !important;
        }

        .notification-dot {
            box-shadow: 0 0 0 2px var(--app-nav-bg) !important;
        }

        .wr-upload-btn {
            background: var(--app-btn-secondary-bg) !important;
            border: 1px solid var(--app-btn-secondary-border) !important;
            color: var(--app-text) !important;
        }

        .wr-upload-btn:hover {
            background: var(--app-hover-bg-strong) !important;
        }

        .app-user-menu-link {
            color: var(--app-text) !important;
        }

        .app-user-menu-link:hover {
            background: var(--app-hover-bg) !important;
        }

        .app-user-menu-link.is-danger {
            color: var(--app-danger) !important;
        }

        .app-user-menu-link.is-danger:hover {
            background: var(--app-danger-soft) !important;
        }

        .modal {
            background: var(--app-modal-backdrop) !important;
            backdrop-filter: blur(20px) !important;
            -webkit-backdrop-filter: blur(20px) !important;
        }

        .modal-card {
            border: 1px solid var(--app-border) !important;
            background: var(--app-panel-accent) !important;
            box-shadow: var(--app-shadow-hero) !important;
            border-radius: 12px !important;
        }

        #aiResultModal.open {
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 16px;
        }

        .ai-modal-brand {
            --ai-modal-brand-width: min(46vw, 8.75rem);
            --ai-modal-brand-ratio: 2.2;
            width: var(--ai-modal-brand-width);
            height: calc(var(--ai-modal-brand-width) / var(--ai-modal-brand-ratio));
            aspect-ratio: var(--ai-modal-brand-ratio);
            display: flex;
            justify-content: center;
            align-items: center;
            flex: 0 0 auto;
            overflow: hidden;
            pointer-events: none;
        }

        .ai-modal-brand-video {
            display: block;
            width: 100%;
            height: 100%;
            max-width: none;
            max-height: none;
            aspect-ratio: var(--ai-modal-brand-ratio);
            margin: 0 auto;
        }

        #aiResultModal .modal-card {
            width: min(88vw, 40rem) !important;
            max-width: min(88vw, 40rem) !important;
            padding: 20px 24px !important;
        }


        .ai-loading-video,
        .ai-loading-overlay {
            position: absolute;
            inset: 0;
        }

        .ai-loading-video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

        .ai-loading-overlay {
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
            gap: 16px;
            padding: 20px;
            text-shadow: 0 2px 10px rgba(2, 6, 23, 0.35);
        }

        .ai-loading-timing {
            width: min(21rem, calc(100vw - 5rem));
            margin-top: 12px;
            padding: 10px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            background: rgba(15, 23, 42, 0.34);
            backdrop-filter: blur(14px);
            box-shadow: 0 12px 32px rgba(2, 6, 23, 0.18);
            text-shadow: none;
        }

        .ai-loading-timing-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            color: rgba(255, 255, 255, 0.94);
            font-size: 12px;
            font-weight: 700;
            line-height: 1.2;
        }

        #aiLoadingElapsed {
            color: rgba(255, 255, 255, 0.72);
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }

        .ai-loading-steps {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 4px;
            margin-top: 9px;
        }

        .ai-loading-step {
            min-width: 0;
            overflow: hidden;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.14);
            color: rgba(255, 255, 255, 0.62);
            font-size: 10px;
            font-weight: 700;
            line-height: 1;
            padding: 6px 7px;
            text-align: center;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .ai-loading-step.is-complete {
            background: rgba(255, 255, 255, 0.28);
            color: rgba(255, 255, 255, 0.88);
        }

        .ai-loading-step.is-active {
            background: rgba(255, 255, 255, 0.92);
            color: rgba(15, 23, 42, 0.92);
        }

        .result-compare-shell {
            position: relative;
            width: 100%;
            overflow: hidden;
            border-radius: 12px;
            border: 1px solid var(--app-border);
            background: var(--app-surface-soft);
            box-shadow: var(--app-shadow-glass);
            user-select: none;
        }

        .result-compare-checkerboard {
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(45deg, rgba(148, 163, 184, 0.18) 25%, transparent 25%),
                linear-gradient(-45deg, rgba(148, 163, 184, 0.18) 25%, transparent 25%),
                linear-gradient(45deg, transparent 75%, rgba(148, 163, 184, 0.18) 75%),
                linear-gradient(-45deg, transparent 75%, rgba(148, 163, 184, 0.18) 75%);
            background-size: 18px 18px;
            background-position: 0 0, 0 9px, 9px -9px, -9px 0;
        }

        .result-compare-pane {
            position: absolute;
            inset: 0;
        }

        .result-compare-pane.is-source {
            z-index: 1;
        }

        .result-compare-pane.is-render {
            z-index: 2;
        }

        .result-compare-pane img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
        }

        .result-compare-divider {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%;
            width: 2px;
            background: rgba(255, 255, 255, 0.96);
            box-shadow: 0 0 12px rgba(15, 23, 42, 0.18);
            transform: translateX(-1px);
            z-index: 25;
            pointer-events: none;
        }

        .result-compare-divider::after {
            content: "↔";
            position: absolute;
            left: 50%;
            top: 50%;
            width: 2.75rem;
            height: 2.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
            transform: translate(-50%, -50%);
            border-radius: 980px;
            border: 2px solid rgba(255, 255, 255, 0.92);
            background: rgba(15, 23, 42, 0.72);
            color: #ffffff;
            font-size: 17px;
            font-weight: 700;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.24);
        }

        .result-compare-slider {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            z-index: 20;
            cursor: ew-resize;
            appearance: none;
            -webkit-appearance: none;
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
        }

        .result-compare-slider::-webkit-slider-runnable-track {
            height: 100%;
            background: transparent;
        }

        .result-compare-slider::-moz-range-track {
            height: 100%;
            background: transparent;
        }

        .result-compare-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 2.75rem;
            height: 2.75rem;
            border-radius: 980px;
            border: 2px solid rgba(255, 255, 255, 0.92);
            background: rgba(255, 255, 255, 0.02);
            box-shadow: none;
        }

        .result-compare-slider::-moz-range-thumb {
            width: 2.75rem;
            height: 2.75rem;
            border-radius: 980px;
            border: 2px solid rgba(255, 255, 255, 0.92);
            background: rgba(255, 255, 255, 0.02);
            box-shadow: none;
        }

        .result-compare-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

        .result-compare-label {
            display: inline-flex;
            align-items: center;
            padding: 6px 12px;
            border-radius: 980px;
            background: rgba(15, 23, 42, 0.7);
            color: #ffffff;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            box-shadow: 0 8px 22px rgba(15, 23, 42, 0.16);
        }

        .result-compare-hint {
            color: var(--app-muted);
            font-size: 12px;
            line-height: 1.4;
            text-align: center;
        }

        @media (max-width: 767px) {
            #aiResultModal .modal-card {
                width: min(94vw, 40rem) !important;
                max-width: min(94vw, 40rem) !important;
                padding: 16px !important;
            }

            .result-compare-divider::after {
                width: 2.4rem;
                height: 2.4rem;
            }

            .result-compare-meta {
                flex-wrap: wrap;
                justify-content: center;
            }

            .result-compare-label {
                font-size: 11px;
                padding: 6px 10px;
            }
        }

        #authModal .modal-card,
        #passwordResetModal .modal-card {
            color: var(--app-text) !important;
        }

        #authModalTitle,
        #passwordResetTitle,
        #authModal label,
        #passwordResetModal label,
        #authToggleBtn,
        #googleAuthBtn,
        #forgotPasswordRow button {
            color: var(--app-text) !important;
        }

        #authModal .text-gray-500,
        #authModal .text-gray-400,
        #passwordResetModal .text-gray-500,
        #passwordResetModal .text-gray-400,
        #authToggleText,
        #passwordResetCopy {
            color: var(--app-muted) !important;
        }

        #authModal .modal-card input::placeholder,
        #passwordResetModal .modal-card input::placeholder {
            color: var(--app-muted) !important;
        }

        .tos-checkbox {
            appearance: none;
            -webkit-appearance: none;
            flex: 0 0 auto;
            border: 1.5px solid var(--app-input-border) !important;
            background-color: var(--app-input-bg) !important;
            background-position: center;
            background-repeat: no-repeat;
            background-size: 0.7rem 0.7rem;
            box-shadow: none !important;
            transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
        }

        .tos-checkbox:hover {
            border-color: var(--app-border-strong) !important;
        }

        .tos-checkbox:checked {
            border-color: var(--app-checkbox-accent) !important;
            background-color: var(--app-checkbox-accent) !important;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 8.2 6.7 11 12 5.5' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        }

        .tos-checkbox:focus,
        .tos-checkbox:focus-visible {
            outline: none;
            box-shadow: var(--app-tos-focus) !important;
        }

        #authModal #nameFieldContainer.hidden+div {
            grid-column: 1 / -1;
        }

        .app-sidebar textarea,
        .app-sidebar input[type="number"],
        .modal-card textarea,
        .modal-card input[type="email"],
        .modal-card input[type="password"],
        .modal-card input[type="text"] {
            border: 1px solid var(--app-input-border) !important;
            background: var(--app-input-bg) !important;
            border-radius: 8px !important;
            box-shadow: none;
            color: var(--app-text) !important;
            font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif !important;
            font-size: 13px !important;
            line-height: 1.47 !important;
        }

        .app-sidebar textarea:focus,
        .app-sidebar input[type="number"]:focus,
        .modal-card textarea:focus,
        .modal-card input[type="email"]:focus,
        .modal-card input[type="password"]:focus,
        .modal-card input[type="text"]:focus {
            outline: none;
            border-color: var(--app-input-focus-border) !important;
            box-shadow: var(--app-input-focus-ring) !important;
        }

        .pro-badge {
            display: inline-flex;
            align-items: center;
            padding: 4px 10px;
            background: var(--app-pro-badge-bg) !important;
            color: var(--app-pro-badge-text) !important;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            border-radius: 8px;
            border: 1px solid var(--app-pro-badge-border);
            box-shadow: none;
        }

        .ai-model-btn,
        .resolution-btn,
        .ratio-btn,
        .product-count-btn,
        .angle-count-btn,
        .quick-prompt-btn,
        .wr-resolution-btn,
        .wr-tonemapping-btn,
        .wr-format-btn {
            transition: all 0.2s;
            border: 1px solid var(--app-border) !important;
            background: var(--app-option-bg) !important;
            box-shadow: none !important;
            border-radius: 8px !important;
        }

        .ai-model-btn:hover,
        .resolution-btn:hover,
        .ratio-btn:hover,
        .product-count-btn:hover,
        .angle-count-btn:hover,
        .quick-prompt-btn:hover,
        .wr-resolution-btn:hover,
        .wr-tonemapping-btn:hover,
        .wr-format-btn:hover {
            background: var(--app-option-hover) !important;
            transform: none;
        }

        .scene-mode-title,
        .scene-mode-copy,
        .ai-model-btn span,
        .resolution-btn span,
        .ratio-btn span,
        .product-count-btn span,
        .angle-count-btn span,
        .quick-prompt-btn,
        .wr-resolution-btn span,
        .wr-tonemapping-btn span,
        .wr-format-btn span {
            color: var(--app-option-text) !important;
        }

        .scene-mode-option {
            padding: 16px;
            border: 1px solid var(--app-scene-option-border);
            border-radius: 12px;
            background: var(--app-scene-option-bg);
            box-shadow: var(--app-shadow-glass);
            transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
            overflow: hidden;
        }

        .scene-mode-option:not(.is-active):hover {
            background: var(--app-scene-option-hover-bg);
            box-shadow: var(--app-shadow-float);
        }

        .scene-mode-option.is-active {
            border-color: var(--app-selected-border);
            background: var(--app-selected-bg);
            box-shadow: var(--app-shadow-selected);
            backdrop-filter: blur(22px) saturate(120%);
            -webkit-backdrop-filter: blur(22px) saturate(120%);
        }

        .scene-mode-detail-slot {
            display: block;
            padding-top: 12px;
        }

        .scene-mode-btn {
            width: 100%;
            align-items: stretch !important;
            gap: 10px !important;
            padding: 0 !important;
            border: 0 !important;
            border-radius: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
            text-align: left;
        }

        .scene-mode-btn:hover {

            transform: none;
        }

        .scene-reference-card,
        [data-reference-role="asset-context-summary"],
        [data-reference-role="upload-area"],
        [data-text-prompt-reference-role="upload-area"],
        #sceneTextSection textarea,
        #sceneTemplateSection .template-list-btn,
        [data-text-prompt-generate] {

            background: transparent !important;
            box-shadow: none;
        }

        .scene-mode-option.is-active .scene-reference-card,
        .scene-mode-option.is-active [data-reference-role="asset-context-summary"],
        .scene-mode-option.is-active [data-reference-role="upload-area"],
        .scene-mode-option.is-active [data-text-prompt-reference-role="upload-area"] {
            background: var(--app-surface-soft) !important;
            border-color: var(--app-border) !important;
            box-shadow: none !important;
        }

        .scene-mode-option.is-active #sceneTextSection,
        .scene-mode-option.is-active #sceneTemplateSection {
            background: var(--app-surface-soft) !important;
            border: 1px solid var(--app-border);
            border-radius: 8px;
            padding: 12px;
            box-shadow: none;
        }

        .scene-mode-option.is-active #sceneTextSection textarea,
        .scene-mode-option.is-active [data-text-prompt-generate],
        .scene-mode-option.is-active #sceneTemplateSection .template-list-btn {
            background: var(--app-sidebar-bg) !important;
            border-color: var(--app-border) !important;
            box-shadow: var(--app-shadow-glass) !important;
        }

        [data-text-prompt-generate]:hover,
        #sceneTemplateSection .template-list-btn:hover,
        [data-reference-role="upload-area"]:hover,
        [data-text-prompt-reference-role="upload-area"]:hover {
            background: var(--app-hover-bg) !important;
        }

        .scene-mode-option.is-active [data-text-prompt-generate]:hover,
        .scene-mode-option.is-active #sceneTemplateSection .template-list-btn:hover,
        .scene-mode-option.is-active [data-reference-role="upload-area"]:hover,
        .scene-mode-option.is-active [data-text-prompt-reference-role="upload-area"]:hover {
            background: var(--app-hover-bg-strong) !important;
        }

        .scene-reference-title,
        .scene-reference-section .text-gray-700,
        #sceneTextSection label,
        #sceneTemplateSection label,
        #sceneTemplateSection .template-list-btn,
        [data-text-prompt-generate] {
            color: var(--app-text) !important;
        }

        .scene-reference-description,
        [data-reference-role="placeholder-text"],
        [data-reference-role="analysis-status"],
        #sceneTextSection p,
        #sceneTemplateSection p,
        [data-reference-role="asset-context-summary"] .text-gray-400 {
            color: var(--app-muted) !important;
        }

        [data-reference-role="placeholder"] .material-symbols-outlined {
            color: var(--app-muted) !important;
        }

        #sceneTextSection textarea::placeholder {
            color: var(--app-muted) !important;
        }

        .scene-mode-option.is-active .scene-mode-heading,
        .scene-mode-option.is-active .scene-mode-heading .scene-mode-title,
        .scene-mode-option.is-active .scene-mode-heading .scene-mode-index {
            color: var(--app-text) !important;
            -webkit-text-fill-color: var(--app-text) !important;
            text-shadow: none;
            opacity: 1 !important;
        }

        .scene-mode-option.is-active .scene-mode-heading .scene-mode-index {
            border-color: var(--app-border-strong) !important;
            background: var(--app-accent-soft) !important;
            box-shadow: none;
        }

        .scene-mode-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            width: 100%;
        }

        .scene-mode-index {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 2rem;
            height: 2rem;
            padding: 0 10px;
            border-radius: 980px;
            border: 1px solid var(--app-border);
            background: var(--app-surface-soft);
            box-shadow: none;
            color: var(--app-muted);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            flex-shrink: 0;
        }

        .scene-mode-visual {
            --scene-mode-visual-radius: 12px;
            position: relative;
            overflow: hidden;
            width: 100%;
            aspect-ratio: 2 / 1;
            min-height: 8.5rem;
            border-radius: var(--scene-mode-visual-radius);
            border: 1px solid var(--app-border);
            box-shadow: var(--app-shadow-glass);
            isolation: isolate;
        }

        .scene-mode-visual::before,
        .scene-mode-visual::after {
            content: "";
            position: absolute;
            pointer-events: none;
            transition: transform 180ms ease, opacity 180ms ease;
            inset: 0;
        }

        .scene-mode-visual::before {
            z-index: 1;
        }

        .scene-mode-visual::after {
            z-index: 1;
            background: none;
        }

        .scene-mode-visual::before,
        .scene-mode-visual::after,
        .scene-mode-image {
            border-radius: inherit;
        }

        .scene-mode-image {
            position: absolute;
            inset: 0;
            z-index: 0;
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .scene-mode-copy {
            position: absolute;
            top: 0.55rem;
            left: 0.55rem;
            right: 0.55rem;
            z-index: 2;
            display: block;
            width: auto;
            max-width: calc(100% - 1.1rem);
            padding: 0;
            border: 0;
            background: transparent;
            box-shadow: none;
            color: #ffffff !important;
            font-size: 12px !important;
            line-height: 1.2rem !important;
            font-weight: 700;
            letter-spacing: -0.01em;
            white-space: normal;
            text-shadow: none;
        }

        .scene-mode-visual-split {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            gap: 8px;
            padding: 0;
            min-height: auto;
            aspect-ratio: auto;
            border: 0;
            box-shadow: none;
            background: transparent;
            overflow: visible;
            border-radius: 0;
            min-height: auto;
        }

        .scene-mode-split-pane {
            position: relative;
            min-width: 0;
            aspect-ratio: 1 / 1;
            height: auto;
            overflow: hidden;
            border-radius: 12px;
            border: 1px solid var(--app-border);
            box-shadow: var(--app-shadow-glass);
        }

        .scene-mode-panel {
            display: flex;
            flex-direction: column;
            gap: 6px;
            min-width: 0;
        }

        .scene-mode-panels-duo {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            width: 100%;
        }

        .scene-mode-visual-portrait {
            aspect-ratio: 3 / 4;
            min-height: 14rem;
        }

        .scene-mode-split-plus {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.85rem;
            height: 1.85rem;
            align-self: center;
            border-radius: 980px;
            border: 1px solid var(--app-border);
            background: var(--app-surface-soft);
            box-shadow: var(--app-shadow-glass);
            color: var(--app-muted);
            font-size: 17px;
            font-weight: 800;
            line-height: 1;
        }

        .scene-mode-split-pane img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .scene-mode-split-pane-text {
            display: flex;
            align-items: stretch;
            padding: 10px;
            background: var(--app-surface-soft);
        }

        .scene-mode-text-field {
            display: flex;
            align-items: center;
            width: 100%;
            min-height: 100%;
            padding: 12px;
            border-radius: 12px;
            border: 1px solid var(--app-border);
            background: var(--app-surface-soft);
            box-shadow: none;
            color: var(--app-text);
            font-size: 12px;
            font-weight: 700;
            line-height: 1.35;
            letter-spacing: -0.01em;
            text-align: left;
        }

        .scene-mode-visual-label {
            --scene-mode-label-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 4px 8px;
            border-radius: var(--scene-mode-label-radius);
            border: 1px solid var(--app-border);
            background: var(--app-surface-soft);
            color: var(--app-muted);
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            line-height: 1;
            width: fit-content;
        }

        .scene-mode-visual-analysis {
            background:
                radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.16) 30%, transparent 46%),
                linear-gradient(140deg, rgba(226, 232, 240, 0.88), rgba(191, 219, 254, 0.52) 46%, rgba(203, 213, 225, 0.82) 100%);
        }

        .scene-mode-visual-analysis::before {
            inset: 1.2rem 1.15rem 1rem auto;
            width: 4rem;
            border-radius: 12px;
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(226, 232, 240, 0.82)),
                linear-gradient(135deg, rgba(148, 163, 184, 0.18), rgba(59, 130, 246, 0.08));
            box-shadow: 0 14px 28px rgba(71, 85, 105, 0.12);
        }

        .scene-mode-visual-analysis::after {
            left: 1.1rem;
            right: 6rem;
            bottom: 1rem;
            height: 2.9rem;
            border-radius: 12px;
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(241, 245, 249, 0.78)),
                linear-gradient(90deg, rgba(148, 163, 184, 0.18), transparent 70%);
            box-shadow: 0 18px 30px rgba(71, 85, 105, 0.08);
        }

        .scene-mode-visual-direct {
            background:
                radial-gradient(circle at 78% 18%, rgba(253, 224, 71, 0.26) 0%, transparent 26%),
                linear-gradient(145deg, rgba(255, 247, 237, 0.92), rgba(254, 215, 170, 0.52) 46%, rgba(251, 191, 36, 0.2) 100%);
        }

        .scene-mode-visual-direct::before {
            left: 1rem;
            right: 1rem;
            bottom: 1rem;
            height: 3.2rem;
            border-radius: 12px;
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 237, 213, 0.84)),
                linear-gradient(90deg, rgba(251, 191, 36, 0.22), transparent 70%);
            box-shadow: 0 16px 30px rgba(194, 120, 3, 0.12);
        }

        .scene-mode-visual-direct::after {
            right: 2rem;
            bottom: 1.35rem;
            width: 2.8rem;
            height: 2.8rem;
            border-radius: 12px;
            background:
                linear-gradient(160deg, rgba(71, 85, 105, 0.94), rgba(51, 65, 85, 0.86));
            box-shadow: 0 14px 24px rgba(71, 85, 105, 0.2);
        }

        .scene-mode-visual-text {
            background:
                radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.2) 26%, transparent 42%),
                linear-gradient(145deg, rgba(224, 242, 254, 0.92), rgba(186, 230, 253, 0.62) 42%, rgba(125, 211, 252, 0.34) 100%);
        }

        .scene-mode-visual-text::before {
            left: 1rem;
            right: 4.6rem;
            bottom: 1rem;
            height: 3.1rem;
            border-radius: 12px;
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(224, 242, 254, 0.78));
            box-shadow: 0 16px 28px rgba(14, 116, 144, 0.12);
        }

        .scene-mode-visual-text::after {
            right: 1rem;
            bottom: 1.25rem;
            width: 2.9rem;
            height: 2rem;
            border-radius: 12px;
            background:
                linear-gradient(180deg, rgba(14, 165, 233, 0.9), rgba(6, 182, 212, 0.74));
            box-shadow: 0 12px 22px rgba(8, 145, 178, 0.16);
        }

        .scene-mode-visual-template {
            background:
                radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0) 28%),
                linear-gradient(145deg, rgba(237, 233, 254, 0.9), rgba(221, 214, 254, 0.64) 42%, rgba(196, 181, 253, 0.42) 100%);
        }

        .scene-mode-visual-template::before {
            left: 1rem;
            bottom: 1rem;
            width: 3.5rem;
            height: 2.7rem;
            border-radius: 12px;
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(243, 232, 255, 0.82));
            box-shadow: 0 14px 28px rgba(109, 40, 217, 0.11);
        }

        .scene-mode-visual-template::after {
            left: 5rem;
            right: 1rem;
            bottom: 1.2rem;
            height: 2.2rem;
            border-radius: 12px;
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(233, 213, 255, 0.76));
            box-shadow: 0 14px 26px rgba(124, 58, 237, 0.08);
        }

        .product-count-option {
            padding: 16px;
            border: 1px solid var(--app-border);
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.52);
            box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
            transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
            overflow: hidden;
        }

        .product-count-option:not(.is-active):hover {
            background: rgba(255, 255, 255, 0.62);
            box-shadow: 0 14px 28px rgba(15, 23, 42, 0.06);
            transform: translateY(-1px);
        }

        .product-count-option.is-active {
            border-color: var(--app-selected-border);
            background: var(--app-selected-bg);
            box-shadow: var(--app-shadow-selected);
            backdrop-filter: blur(22px) saturate(120%);
            -webkit-backdrop-filter: blur(22px) saturate(120%);
        }

        .product-count-detail-slot {
            display: none;
        }

        .product-count-option.is-active .product-count-detail-slot {
            display: block;
            padding-top: 12px;
        }

        .product-count-btn {
            width: 100%;
            align-items: stretch !important;
            gap: 10px !important;
            padding: 0 !important;
            border: 0 !important;
            border-radius: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
            text-align: left;
        }

        .product-count-btn:hover {
            background: transparent !important;
            transform: none;
        }

        .product-count-option .product-count-btn.active {
            background: transparent !important;
            border-color: transparent !important;
            box-shadow: none !important;
        }

        .product-count-option .product-count-btn.active .product-count-title,
        .product-count-option .product-count-btn.active .product-count-index {
            color: var(--app-text) !important;
            -webkit-text-fill-color: var(--app-text) !important;
        }

        .product-count-option .product-count-btn.active .product-count-copy {
            color: var(--app-muted) !important;
            -webkit-text-fill-color: var(--app-muted) !important;
        }

        .product-count-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            width: 100%;
        }

        .product-count-title {
            color: var(--app-text) !important;
            font-size: 17px;
            font-weight: 700;
            line-height: 1.25rem;
        }

        .product-count-index {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 2rem;
            height: 2rem;
            padding: 0 10px;
            border-radius: 980px;
            border: 1px solid rgba(148, 163, 184, 0.26);
            background: var(--app-surface-soft);
            box-shadow: none;
            color: var(--app-muted);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            flex-shrink: 0;
        }

        .product-count-visual {
            position: relative;
            overflow: hidden;
            width: 100%;
            min-height: 7.4rem;
            aspect-ratio: 2.2 / 1;
            border-radius: 12px;
            border: 1px solid var(--app-border);
            box-shadow: var(--app-shadow-glass);
            isolation: isolate;
        }

        .product-count-image {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .product-count-visual-single .product-count-image {
            object-fit: contain;
            object-position: center;
        }

        .product-count-visual-single {
            background: var(--app-surface-soft);
        }

        .product-count-visual-multiple {
            background: transparent;
        }

        .product-count-copy {
            color: var(--app-muted) !important;
            font-size: 12px;
            line-height: 1.15rem;
            font-weight: 700;
        }

        .product-count-btn .product-count-copy {
            color: var(--app-muted) !important;
            -webkit-text-fill-color: var(--app-muted) !important;
        }

        .product-count-option.is-active .product-count-index {
            border-color: var(--app-border-strong);
            background: var(--app-accent-soft);
            box-shadow: none;
            color: var(--app-text);
        }

        .multi-angle-panel .editor-accordion-content {
            margin-top: 8px;
            padding: 0 2px 4px;
        }

        /* --- sidebar-nav-stack pattern for multi-angle options --- */
        .multi-angle-panel .multi-angle-options {
            gap: 0 !important;
            border: 1px solid var(--app-line-soft);
            border-radius: 8px;
            overflow: hidden;
            background: var(--app-option-bg);
        }

        .multi-angle-panel .product-count-option {
            position: relative;
            padding: 0;
            border-radius: 0;
            border: none;
            background: transparent;
            box-shadow: none;
            transition: background 150ms ease;
        }

        .multi-angle-panel .product-count-option + .product-count-option {
            border-top: 1px solid var(--app-line-soft);
        }

        .multi-angle-panel .product-count-option:first-child {
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
        }

        .multi-angle-panel .product-count-option:last-child {
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
        }

        /* --- passive state: dimmed --- */
        .multi-angle-panel .product-count-option:not(.is-active) {
            opacity: 1;
        }

        .multi-angle-panel .product-count-option:not(.is-active) .product-count-title {
            color: var(--app-text) !important;
            -webkit-text-fill-color: var(--app-text) !important;
        }

        .multi-angle-panel .product-count-option:not(.is-active) .product-count-copy {
            color: var(--app-muted) !important;
            -webkit-text-fill-color: var(--app-muted) !important;
            opacity: 0.6;
        }


        .multi-angle-panel .product-count-option:not(.is-active):hover {
            background: var(--app-hover-bg) !important;
            box-shadow: none !important;
            transform: none !important;
        }

        .multi-angle-panel .product-count-option:not(.is-active):hover .product-count-title {
            color: var(--app-text) !important;
            -webkit-text-fill-color: var(--app-text) !important;
        }

        .multi-angle-panel .product-count-option:not(.is-active):hover .product-count-visual {
            opacity: 0.7;
        }

        /* --- active state: strong accent --- */
        .multi-angle-panel .product-count-option.is-active {
            opacity: 1;
            background: var(--app-selected-bg);
            box-shadow: none;
        }

        .multi-angle-panel .product-count-option.is-active::after {
            content: "";
            position: absolute;
            top: 50%;
            right: 20px;
            width: 9px;
            height: 9px;
            border-radius: 999px;
            background: #22c55e;
            border: 2px solid var(--app-option-bg);
            box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14);
            transform: translateY(-50%);
            z-index: 2;
            pointer-events: none;
        }

        .multi-angle-panel .product-count-option.is-active .product-count-title {
            color: var(--app-text) !important;
            -webkit-text-fill-color: var(--app-text) !important;
        }

        .multi-angle-panel .product-count-option.is-active .product-count-copy {
            color: var(--app-muted) !important;
            -webkit-text-fill-color: var(--app-muted) !important;
        }

        .multi-angle-panel .product-count-option.is-active .product-count-index {
            background: var(--app-accent-soft);
            border-color: var(--app-selected-border);
            color: var(--app-text);
        }

        /* --- compact horizontal row layout --- */
        .multi-angle-panel .product-count-btn {
            flex-direction: row !important;
            align-items: center !important;
            gap: 12px !important;
            padding: 10px 14px !important;
        }

        .multi-angle-panel .product-count-option.is-active .product-count-btn {
            padding-right: 42px !important;
        }

        .multi-angle-panel .product-count-heading {
            flex: 1;
            min-width: 0;
            flex-direction: column;
            align-items: flex-start;
            gap: 2px;
        }

        .multi-angle-panel .product-count-visual {
            flex-shrink: 0;
            width: 80px;
            height: 56px;
            min-height: 0;
            aspect-ratio: auto;
            border-radius: 8px;
            border: 1px solid var(--app-line-soft);
            background: var(--app-sidebar-bg);
            box-shadow: none;
        }

        .multi-angle-panel .product-count-title {
            font-size: 14px;
            font-weight: 600;
            line-height: 1.29;
        }

        .multi-shot-tooltip {
            position: relative;
        }

        .multi-shot-tooltip::before,
        .multi-shot-tooltip::after {
            position: absolute;
            left: 104px;
            z-index: 40;
            opacity: 0;
            pointer-events: none;
            transition: opacity 160ms ease, transform 160ms ease;
        }

        .multi-shot-tooltip::before {
            content: "";
            top: 2px;
            width: 8px;
            height: 8px;
            background: rgba(17, 24, 39, 0.95);
            transform: translateY(-8px) rotate(45deg);
        }

        .multi-shot-tooltip::after {
            content: attr(data-tooltip);
            bottom: calc(100% - 2px);
            width: min(240px, calc(100vw - 3rem));
            padding: 9px 10px;
            border-radius: 8px;
            background: rgba(17, 24, 39, 0.95);
            color: #ffffff;
            box-shadow: 0 14px 32px rgba(15, 23, 42, 0.2);
            font-size: 11px;
            font-weight: 600;
            line-height: 1.35;
            transform: translateY(-8px);
            white-space: normal;
        }

        .multi-shot-tooltip:hover::before,
        .multi-shot-tooltip:hover::after,
        .multi-shot-tooltip:focus-visible::before,
        .multi-shot-tooltip:focus-visible::after {
            opacity: 1;
            transform: translateY(-12px);
        }

        .multi-shot-tooltip:hover::before,
        .multi-shot-tooltip:focus-visible::before {
            transform: translateY(-12px) rotate(45deg);
        }

        .multi-angle-panel .product-count-btn .product-count-copy {
            font-size: 12px;
            line-height: 1.33;
            font-weight: 400;
            margin-top: 0;
        }

        .multi-angle-panel .product-count-index {
            flex-shrink: 0;
        }

        .multi-angle-panel .product-count-detail-slot {
            padding: 0 14px 14px !important;
            border-top: 1px solid var(--app-line-soft);
        }

        .multi-angle-panel .product-count-option.is-active .product-count-detail-slot {
            padding-top: 10px !important;
        }

        .multi-angle-panel .multi-angle-detail-panel {
            padding: 10px 12px 12px;
            border: none;
            border-radius: 0;
            background: transparent;
        }

        .multi-angle-panel #angleCountSection.space-y-2 > :not([hidden]) ~ :not([hidden]),
        .multi-angle-panel .multi-angle-estimator.space-y-2 > :not([hidden]) ~ :not([hidden]) {
            margin-top: 10px !important;
        }

        .multi-angle-panel #angleCountSection > label {
            font-size: 13px !important;
            font-weight: 600 !important;
            color: var(--app-text) !important;
        }

        .multi-angle-panel .angle-count-btn {
            min-height: 36px;
            gap: 4px !important;
            border-radius: 8px !important;
            border-color: var(--app-border) !important;
            background: var(--app-option-bg) !important;
            box-shadow: none !important;
        }

        .multi-angle-panel .angle-count-btn:hover {
            border-color: var(--app-border-strong) !important;
            background: var(--app-hover-bg) !important;
        }

        .multi-angle-panel .angle-count-btn.active {
            background: var(--app-selected-bg) !important;
            border: 1px solid var(--app-selected-border) !important;
            box-shadow: none !important;
        }

        .multi-angle-panel .angle-count-btn.active span {
            color: var(--app-text) !important;
        }

        .multi-angle-panel .multi-angle-custom-controls input,
        .multi-angle-panel #angleEstimateTargetHint,
        .multi-angle-panel #angleEstimatePreviewWrap {
            background: var(--app-option-bg) !important;
            border-color: var(--app-border) !important;
            box-shadow: none !important;
        }

        .multi-angle-panel .multi-angle-add-btn,
        .multi-angle-panel .multi-angle-upload-btn,
        .multi-angle-panel .multi-angle-estimate-btn {
            border: 1px solid var(--app-selected-border) !important;
            background: var(--app-cta) !important;
            color: var(--app-cta-text) !important;
            box-shadow: none !important;
        }

        .multi-angle-panel .multi-angle-add-btn:hover,
        .multi-angle-panel .multi-angle-upload-btn:hover,
        .multi-angle-panel .multi-angle-estimate-btn:hover {
            background: var(--app-cta-hover) !important;
            color: var(--app-cta-text) !important;
            box-shadow: none !important;
        }

        .multi-angle-panel .multi-angle-estimator {
            border-color: var(--app-border) !important;
            border-radius: 12px !important;
            background: var(--app-sidebar-bg) !important;
            box-shadow: none !important;
        }

        .multi-angle-panel #angleEstimatePreviewWrap {
            border-radius: 12px;
        }

        .multi-angle-panel #angleEstimateResult {
            border-color: var(--app-selected-border) !important;
            background: var(--app-accent-soft) !important;
        }

        .multi-angle-panel #angleEstimateResultTitle {
            color: var(--app-text) !important;
        }

        .multi-angle-panel #angleEstimateResultCopy,
        .multi-angle-panel #angleEstimateStatus,
        .multi-angle-panel .multi-angle-helper-copy {
            color: var(--app-muted) !important;
        }

        .multi-angle-panel .custom-angle-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            border: 1px solid var(--app-selected-border);
            border-radius: 980px;
            background: var(--app-accent-soft);
            color: var(--app-text);
            font-size: 12px;
            font-weight: 600;
            line-height: 1;
        }

        .multi-angle-panel .custom-angle-chip-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 2px 6px;
            border-radius: 980px;
            background: var(--app-sidebar-bg);
            border: 1px solid var(--app-selected-border);
            color: var(--app-accent);
            font-size: 10px;
            font-weight: 700;
            line-height: 1;
        }

        .multi-angle-panel .custom-angle-chip-remove {
            color: var(--app-muted);
            transition: color 0.2s ease;
        }

        .multi-angle-panel .custom-angle-chip-remove:hover {
            color: var(--app-danger);
        }

        #background360FloatingMenu .scene-reference-section {
            gap: 10px;
        }

        #background360FloatingMenu .scene-reference-card,
        #background360FloatingMenu .scene-media-upload-area,
        #background360FloatingMenu .scene-reference-toggle,
        #background360FloatingMenu .scene-reference-setting {
            border-radius: 12px;
            border-color: var(--app-border) !important;
            background: var(--app-surface-soft) !important;
            box-shadow: none !important;
        }

        #background360FloatingMenu .scene-media-upload-area {
            padding: 16px;
        }

        .app-card .text-gray-400,
        .app-card .text-gray-500 {
            color: var(--app-muted) !important;
        }

        .ratio-btn>div {
            border-color: var(--app-border-strong) !important;
        }

        [data-text-prompt-generate] {
            background: linear-gradient(90deg, rgba(148, 163, 184, 0.12), rgba(226, 232, 240, 0.3)) !important;
            border-color: rgba(148, 163, 184, 0.28) !important;
            box-shadow: 0 10px 22px rgba(148, 163, 184, 0.08);
        }

        [data-text-prompt-generate]:hover {
            background: linear-gradient(90deg, rgba(148, 163, 184, 0.18), rgba(226, 232, 240, 0.4)) !important;
            color: var(--app-text) !important;
        }

        .ai-model-btn.active,
        .resolution-btn.active,
        .ratio-btn.active,
        .angle-count-btn.active,
        .wr-resolution-btn.active,
        .wr-tonemapping-btn.active,
        .wr-format-btn.active {
            background: var(--app-sidebar-bg) !important;
            border: 1px solid var(--app-border-strong) !important;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            box-shadow: var(--app-shadow-glass) !important;
        }

        .ai-model-btn.active span,
        .resolution-btn.active span,
        .ratio-btn.active span,
        .angle-count-btn.active span,
        .wr-resolution-btn.active span,
        .wr-tonemapping-btn.active span,
        .wr-format-btn.active span {
            color: var(--app-text) !important;
            font-weight: 600;
        }

        .scene-mode-option.is-active .scene-mode-visual::before,
        .scene-mode-option.is-active .scene-mode-visual::after {
            opacity: 0.95;
            transform: translateY(-1px);
        }

        .ratio-btn.active>div {
            border-color: var(--app-border-strong) !important;
        }

        .model-upload-area,
        [data-reference-role="upload-area"],
        .scene-media-upload-area,
        .scene-reference-card,
        [data-reference-role="asset-context-summary"] {
            border-color: var(--app-border) !important;
            box-shadow: none;
        }

        .model-upload-area {
            border-radius: 8px;
            background: var(--app-surface-soft) !important;
        }

        .model-upload-area:hover,
        .model-upload-area.dragover,
        [data-reference-role="upload-area"]:hover,
        .scene-media-upload-area:hover {
            border-color: var(--app-accent) !important;
            background: var(--app-hover-bg-strong) !important;
        }

        .scene-direct-source-selector {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
            gap: 10px;
        }

        .scene-direct-source-btn {
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            min-height: 3.55rem;
            padding: 14px 16px;
            border: 1px solid var(--app-border);
            border-radius: 12px;
            background: var(--app-option-bg);
            box-shadow: none;
            color: var(--app-text);
            font-size: 13px;
            font-weight: 700;
            line-height: 1.4;
            text-align: left;
            transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
        }

        .scene-direct-source-btn:hover {
            border-color: var(--app-border-strong);
            background: var(--app-option-hover);
            transform: translateY(-1px);
        }

        .scene-direct-source-btn.is-selected {
            border-color: var(--app-accent);
            background: var(--app-accent-soft);
            box-shadow: var(--app-shadow-selected);
            color: var(--app-text);
        }

        .scene-direct-source-panel {
            display: none;
            flex-direction: column;
            gap: 10px;
            padding: 6px;
            border-radius: 12px;
            border: 1px solid transparent;
            transition: opacity 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease, filter 180ms ease;
        }

        .scene-direct-source-panel.is-selected {
            display: flex;
            border-color: transparent;
            background: transparent;
        }

        .scene-direct-source-panel.is-inactive {
            opacity: 0.56;
            filter: saturate(0.82);
        }

        .scene-direct-source-panel.is-inactive [data-reference-role="upload-area"],
        .scene-direct-source-panel.is-inactive .scene-media-upload-area,
        .scene-direct-source-panel.is-inactive .scene-reference-toggle,
        .scene-direct-source-panel.is-inactive .scene-reference-setting {
            pointer-events: none;
        }

        .scene-reference-toggle {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 14px;
            padding: 14px 16px;
            border: 1px solid var(--app-border);
            border-radius: 12px;
            background: var(--app-surface-soft);
            box-shadow: none;
            cursor: pointer;
        }

        .scene-reference-note {
            padding: 16px 16px;
            border: 1px solid var(--app-border);
            border-radius: 12px;
            background: var(--app-surface-soft);
            box-shadow: none;
        }

        .scene-reference-note .scene-reference-toggle-copy {
            margin: 0;
        }

        .scene-reference-toggle-title {
            margin: 0;
            color: var(--app-text);
            font-size: 14px;
            font-weight: 700;
            line-height: 1.35;
        }

        .scene-reference-toggle-copy {
            margin: 4px 0 0;
            color: var(--app-muted);
            font-size: 12px;
            line-height: 1.5;
        }

        .scene-reference-toggle input[type="checkbox"] {
            margin-top: 2px;
            flex: 0 0 auto;
        }

        .scene-reference-toggle input[type="checkbox"]:disabled {
            cursor: not-allowed;
            opacity: 0.45;
        }

        .scene-reference-separator {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 0px 2px 2px;
            color: var(--app-muted);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .scene-reference-separator::before,
        .scene-reference-separator::after {
            content: '';
            flex: 1 1 auto;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--app-border-strong));
        }

        .scene-reference-separator::after {
            background: linear-gradient(90deg, var(--app-border-strong), transparent);
        }

        .scene-reference-separator span {
            flex: 0 0 auto;
        }

        .scene-reference-setting {
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 16px 16px;
            border: 1px solid var(--app-border);
            border-radius: 12px;
            background: var(--app-surface-soft);
            box-shadow: none;
        }

        .scene-reference-setting-value {
            color: var(--app-text);
            font-size: 12px;
            font-weight: 700;
            line-height: 1.2;
        }

        .scene-reference-slider {
            width: 100%;
            height: 0.375rem;
            border-radius: 980px;
            appearance: none;
            cursor: pointer;
            background: var(--app-surface-strong);
        }

        .scene-reference-slider:disabled {
            cursor: not-allowed;
            opacity: 0.45;
        }

        #scenePromptModeBadge,
        #estimatedCost {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 8px;
            border-radius: 5px;
            border: 1px solid var(--app-border);
            background: var(--app-surface-soft);
            box-shadow: none;
            color: var(--app-muted) !important;
            font-weight: 500;
            font-size: 12px;
        }

        #estimatedCost.ai-model-cost-value {
            display: block;
            padding: 0;
            border: 0;
            background: transparent;
            color: var(--app-text) !important;
            font-size: 14px;
            font-weight: 700;
            line-height: 1.2;
            text-align: right;
        }

        .package-card {
            border: 1px solid var(--app-border) !important;
            background: var(--app-option-bg) !important;
            box-shadow: var(--app-shadow-glass);
        }

        .package-card.selected {
            border-color: var(--app-accent) !important;
            background: var(--app-accent-soft) !important;
        }

        #googleAuthBtn {
            border-color: var(--app-line-strong) !important;
            background: var(--app-option-bg) !important;
            color: var(--app-text) !important;
            box-shadow: var(--app-shadow-glass);
        }

        #googleAuthBtn:hover {
            background: var(--app-option-hover) !important;
        }

        #inspirationImageFloatingMenu,
        #objectPlacementFloatingMenu,
        #backgroundReferenceFloatingMenu,
        #background360FloatingMenu,
        #textWorkflowFloatingMenu,
        #templateFloatingMenu {
            box-shadow: none !important;
        }

        .scene-text-builder-grid,
        .text-workflow-builder {
            display: grid;
            gap: 12px;
            grid-template-columns: minmax(0, 1.45fr) minmax(9.25rem, 0.95fr);
            align-items: start;
        }

        #textWorkflowFloatingMenu .text-workflow-builder-compact {
            display: block;
        }

        .text-workflow-header-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

        .text-workflow-attach-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            border: 1px solid var(--app-border-strong);
            border-radius: 980px;
            background: var(--app-option-bg);
            color: var(--app-text);
            font-size: 12px;
            font-weight: 600;
            line-height: 1;
            transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
        }

        .text-workflow-attach-btn:hover {
            background: var(--app-option-hover);
            border-color: var(--app-border-strong);
            color: var(--app-text);
        }

        .text-workflow-attach-btn.has-media {
            border-color: var(--app-border-strong);
            background: var(--app-surface-strong);
            color: var(--app-text);
        }

        #sceneTextSection .scene-text-builder-grid label {
            font-size: 13px;
        }

        .text-workflow-builder label {
            font-size: 13px;
        }

        .text-workflow-input,
        #sceneTextSection textarea[data-text-prompt-role="input"] {
            min-height: 8.25rem;
            background: var(--app-input-bg) !important;
            border-color: var(--app-input-border) !important;
            color: var(--app-text) !important;
            font-size: 13px !important;
            line-height: 1.47 !important;
        }
        .text-workflow-input:focus,
        #sceneTextSection textarea[data-text-prompt-role="input"]:focus {
            border-color: var(--app-input-focus-border) !important;
            box-shadow: var(--app-input-focus-ring) !important;
        }

        #textWorkflowFloatingMenu .text-workflow-input {
            min-height: 10rem;
        }

        .text-prompt-reference-area {
            min-height: 8.25rem;
        }

        .text-prompt-reference-area [data-text-prompt-reference-role="preview"] {
            padding-top: 2px;
        }

        .text-prompt-reference-area [data-text-prompt-reference-role="preview-img"] {
            max-width: 100%;
        }

        .text-workflow-helper {
            margin-top: -2px;
        }

        .text-workflow-reference-strip {
            min-height: 2.9rem;
        }

        .text-workflow-reference-preview {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 12px;
            border: 1px solid var(--app-border);
            border-radius: 12px;
            background: var(--app-surface-soft);
        }

        .text-workflow-reference-thumb {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 8px;
            object-fit: cover;
            flex-shrink: 0;
            border: 1px solid var(--app-border);
            background: var(--app-option-bg);
            color: var(--app-muted);
            font-size: 20px;
        }

        .text-workflow-reference-file {
            margin-top: 2px;
            font-size: 12px;
            line-height: 1.2;
            color: var(--app-muted);
        }

        .text-workflow-reference-clear {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.75rem;
            height: 1.75rem;
            border-radius: 980px;
            background: var(--app-option-bg);
            color: var(--app-muted);
            border: 1px solid var(--app-border);
            transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
        }

        .text-workflow-reference-clear:hover {
            background: var(--app-hover-bg-strong);
            color: var(--app-text);
            border-color: var(--app-border-strong);
        }

        .text-workflow-reference-hint {
            font-size: 12px;
            line-height: 1.35;
            color: var(--app-muted);
        }

        .text-workflow-generate-btn {
            background: var(--app-accent-soft) !important;
            border-color: var(--app-accent) !important;
            border-width: 1px !important;
            color: var(--app-accent) !important;
        }
        .text-workflow-generate-btn:hover {
            background: var(--app-cta) !important;
            color: var(--app-cta-text) !important;
        }

        .template-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .white-studio-detail-toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--app-border);
            border-radius: 8px;
            background: var(--app-surface);
            box-shadow: var(--app-shadow-glass);
            cursor: pointer;
            transition: border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
        }

        .white-studio-detail-toggle:hover {
            border-color: var(--app-border-strong);
            background: var(--app-option-hover);
        }

        .white-studio-detail-toggle.is-inactive {
            opacity: 0.68;
        }

        .white-studio-detail-toggle-copy {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
        }

        .white-studio-detail-toggle-title {
            color: var(--app-floating-label);
            font-size: 12px;
            font-weight: 700;
            line-height: 1.2;
        }

        .white-studio-detail-toggle-helper {
            color: var(--app-muted);
            font-size: 11px;
            line-height: 1.35;
        }

        .white-studio-detail-toggle input {
            width: 16px;
            height: 16px;
            flex: 0 0 auto;
            accent-color: var(--app-accent);
            cursor: pointer;
        }

        .template-list-btn {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 12px 12px !important;
            border: 1px solid var(--app-border) !important;
            border-radius: 8px !important;
            background: var(--app-option-bg) !important;
            box-shadow: var(--app-shadow-glass) !important;
            text-align: left;
            transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .template-list-btn:hover {
            transform: none !important;
            border-color: var(--app-border-strong) !important;
            background: var(--app-option-hover) !important;
            box-shadow: var(--app-shadow-glass) !important;
        }

        .template-list-btn.is-selected {
            border-color: var(--app-selected-border) !important;
            box-shadow: var(--app-shadow-selected) !important;
        }

        .template-list-label {
            display: block;
            min-width: 0;
            font-size: 14px;
            font-weight: 600;
            line-height: 1.25;
            color: var(--app-floating-label) !important;
        }

        .template-list-thumb {
            width: 7rem;
            aspect-ratio: 16 / 9;
            flex-shrink: 0;
            overflow: hidden;
            border-radius: 12px;
            border: 1px solid var(--app-border);
            background: var(--app-surface-soft);
            box-shadow: none;
        }

        .template-list-thumb img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
        }

        #templateFloatingMenu .template-list {
            gap: 0;
            max-height: min(84vh, 36.5rem);
            overflow-y: auto;
        }

        #templateFloatingMenu .template-list-btn {
            padding: 6px 8px !important;
            gap: 8px;
            border: 0 !important;
            border-bottom: 1px solid rgba(226, 232, 240, 0.88) !important;
            border-radius: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
        }

        #templateFloatingMenu .template-list-btn:last-child {
            border-bottom: 0 !important;
        }

        #templateFloatingMenu .template-list-btn:hover {
            background: var(--app-hover-bg) !important;
            border-color: var(--app-border) !important;
            box-shadow: none !important;
        }

        #templateFloatingMenu .template-list-btn.is-selected {
            background: var(--app-accent-soft) !important;
            border-color: var(--app-accent) !important;
            box-shadow: none !important;
        }

        #templateFloatingMenu .template-list-label {
            font-size: 13px;
            line-height: 1.2;
        }

        #templateFloatingMenu .template-list-thumb {
            width: 5rem;
            border-radius: 8px;
            box-shadow: none;
        }

        @media (max-width: 640px) {
            .scene-text-builder-grid,
            .text-workflow-builder {
                grid-template-columns: minmax(0, 1fr);
            }

            .text-workflow-header-row {
                align-items: flex-start;
                flex-direction: column;
            }

            .text-prompt-reference-area {
                min-height: 7rem;
            }

            .template-list-btn {
                padding: 10px 12px !important;
                gap: 12px;
            }

            .template-list-thumb {
                width: 5.5rem;
            }

            #templateFloatingMenu {
                width: min(15rem, calc(100vw - 1rem)) !important;
            }

            #templateFloatingMenu .template-list-thumb {
                width: 4.5rem;
            }

            .viewer-drop-overlay {
                inset: 0.75rem;
            }

            .viewer-drop-overlay-card {
                min-width: min(78%, 14rem);
                padding: 16px 16px;
            }
        }

        [data-quick-info-modal] {
            z-index: 10050;
        }

        [data-quick-info-modal] .modal-card {
            max-width: 420px;
        }

        .inspiration-info-modal-card {
            padding: 16px;
            width: min(420px, calc(100vw - 24px)) !important;
            max-width: min(420px, calc(100vw - 24px)) !important;
            max-height: calc(100dvh - 24px) !important;
        }

        .inspiration-info-example {
            pointer-events: none;
        }

        .inspiration-info-example.scene-mode-option {
            padding: 12px;
            border-radius: 12px;
        }

        .inspiration-info-example .scene-mode-btn {
            gap: 6px !important;
        }

        .inspiration-info-example .scene-mode-heading {
            gap: 6px;
        }

        .inspiration-info-example .scene-mode-title {
            font-size: 14px !important;
        }

        .inspiration-info-example .scene-mode-index {
            min-width: 1.55rem;
            height: 1.55rem;
            padding: 0 6px;
            font-size: 10px;
            letter-spacing: 0.12em;
        }

        .inspiration-info-example .scene-mode-panel {
            gap: 4px;
        }

        .inspiration-info-example .scene-mode-panels-duo {
            gap: 8px;
        }

        .inspiration-info-example .scene-mode-visual-label {
            font-size: 10px !important;
            line-height: 1.1;
        }

        .inspiration-info-example .scene-mode-split-plus {
            width: 1.35rem;
            height: 1.35rem;
            font-size: 14px;
        }

        .inspiration-info-example .scene-mode-split-pane {
            border-radius: 12px;
            box-shadow: var(--app-shadow-glass);
        }

        .inspiration-info-example .scene-mode-visual {
            --scene-mode-visual-radius: 8px;
            min-height: 5rem;
        }

        .inspiration-info-example .scene-mode-visual-portrait {
            min-height: 11rem;
        }

        .inspiration-info-copy .scene-reference-title {
            font-size: 14px !important;
        }

        .inspiration-info-copy .scene-reference-description {
            font-size: 13px !important;
            line-height: 1.45 !important;
        }

        .inspiration-info-footer {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 12px;
            margin-top: 16px !important;
        }

        .inspiration-info-remember {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
            min-height: 2.5rem;
            padding: 8px 12px;
            border: 1px solid var(--app-border);
            border-radius: 8px;
            background: var(--app-surface-soft);
            color: var(--app-muted);
            font-size: 14px;
            font-weight: 500;
            line-height: 1.35;
            cursor: pointer;
        }

        .inspiration-info-remember span {
            display: block;
            color: var(--app-text);
        }

        .inspiration-info-remember input {
            width: 1.05rem;
            height: 1.05rem;
            margin: 0;
            accent-color: var(--app-accent);
            flex: 0 0 auto;
        }

        .inspiration-info-footer .btn-primary {
            width: auto;
            min-width: 8rem;
            min-height: 2.5rem;
            padding: 8px 16px;
            border-radius: 8px;
            justify-self: end;
        }

        .inspiration-info-footer .btn-primary:hover {
            box-shadow: var(--app-shadow-cta) !important;
        }

        .quick-info-hover-popover {
            position: fixed;
            z-index: 10045;
            width: min(320px, calc(100vw - 24px));
            padding: 12px;
            border: 1px solid var(--app-border);
            border-radius: 10px;
            background: var(--app-sidebar-bg, var(--app-surface-soft));
            color: var(--app-text);
            box-shadow: var(--app-shadow-float);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: translateX(8px) scale(0.98);
            transform-origin: right center;
            transition: opacity 140ms ease, transform 140ms ease;
        }

        .quick-info-hover-popover.is-open {
            opacity: 1;
            visibility: visible;
            transform: translateX(0) scale(1);
        }

        .quick-info-hover-video {
            display: block;
            width: 100%;
            aspect-ratio: 16 / 9;
            margin-bottom: 10px;
            border-radius: 8px;
            background: var(--app-surface-strong);
            object-fit: cover;
        }

        .quick-info-hover-content {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .quick-info-hover-kicker {
            margin: 0;
            color: var(--app-muted);
            font-size: 11px;
            font-weight: 700;
            line-height: 1.2;
            text-transform: uppercase;
        }

        .quick-info-hover-title {
            margin: 0;
            color: var(--app-text);
            font-size: 14px;
            font-weight: 800;
            line-height: 1.2;
        }

        .quick-info-hover-description {
            margin: 0;
            color: var(--app-muted);
            font-size: 13px;
            font-weight: 500;
            line-height: 1.45;
        }

        @media (hover: none),
        (pointer: coarse) {
            .quick-info-hover-popover {
                display: none;
            }
        }

        #aiModelFloatingMenu,
        #kieAiModelFloatingMenu,
        #wrToneMappingFloatingMenu {
            box-shadow: none !important;
        }

        #aiModelFloatingMenu .ai-model-list-item,
        #kieAiModelFloatingMenu .ai-model-list-item,
        #wrToneMappingFloatingMenu .ai-model-list-item {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 8px 12px !important;
            border: 0 !important;
            border-radius: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
            text-align: left;
            transform: none !important;
        }

        #aiModelFloatingMenu .ai-model-list-item+.ai-model-list-item,
        #kieAiModelFloatingMenu .ai-model-list-item+.ai-model-list-item,
        #wrToneMappingFloatingMenu .ai-model-list-item+.ai-model-list-item {
            border-top: 1px solid var(--app-floating-separator) !important;
        }

        #aiModelFloatingMenu .ai-model-list-item:hover,
        #kieAiModelFloatingMenu .ai-model-list-item:hover,
        #wrToneMappingFloatingMenu .ai-model-list-item:hover {
            background: var(--app-floating-item-hover) !important;
            transform: none !important;
        }

        #aiModelFloatingMenu .ai-model-list-item:focus-visible,
        #kieAiModelFloatingMenu .ai-model-list-item:focus-visible,
        #wrToneMappingFloatingMenu .ai-model-list-item:focus-visible {
            outline: none;
            background: var(--app-hover-bg-strong) !important;
        }

        #aiModelFloatingMenu .ai-model-list-item.active,
        #kieAiModelFloatingMenu .ai-model-list-item.active,
        #wrToneMappingFloatingMenu .ai-model-list-item.active {
            background: var(--app-floating-item-active) !important;
            border: 0 !important;
            box-shadow: none !important;
        }

        #aiModelFloatingMenu .ai-model-list-label,
        #kieAiModelFloatingMenu .ai-model-list-label,
        #wrToneMappingFloatingMenu .ai-model-list-label {
            color: var(--app-floating-label) !important;
            font-size: 13px !important;
            font-weight: 600 !important;
            line-height: 1.1;
        }

        #aiModelFloatingMenu .ai-model-list-meta,
        #kieAiModelFloatingMenu .ai-model-list-meta,
        #wrToneMappingFloatingMenu .ai-model-list-meta {
            color: var(--app-floating-meta) !important;
            font-size: 12px !important;
            font-weight: 600 !important;
            line-height: 1.1;
            white-space: nowrap;
        }

        #aiModelFloatingMenu .ai-model-list-item.active .ai-model-list-label,
        #aiModelFloatingMenu .ai-model-list-item.active .ai-model-list-meta,
        #kieAiModelFloatingMenu .ai-model-list-item.active .ai-model-list-label,
        #kieAiModelFloatingMenu .ai-model-list-item.active .ai-model-list-meta,
        #wrToneMappingFloatingMenu .ai-model-list-item.active .ai-model-list-label,
        #wrToneMappingFloatingMenu .ai-model-list-item.active .ai-model-list-meta {
            color: var(--app-floating-label) !important;
        }

        #aiModelFloatingMenu .ai-model-list-section-header {
            background: var(--app-surface-soft) !important;
            border-color: var(--app-floating-separator) !important;
            color: var(--app-floating-meta) !important;
        }

        #resolutionFloatingMenu,
        #wrResolutionFloatingMenu,
        #wrFileFormatFloatingMenu {
            box-shadow: none !important;
        }

        #resolutionFloatingMenu .resolution-list-item,
        #wrResolutionFloatingMenu .resolution-list-item,
        #wrFileFormatFloatingMenu .resolution-list-item {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding: 8px 12px !important;
            border: 0 !important;
            border-radius: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
            text-align: left;
            transform: none !important;
        }

        #resolutionFloatingMenu .resolution-list-item+.resolution-list-item,
        #wrResolutionFloatingMenu .resolution-list-item+.resolution-list-item,
        #wrFileFormatFloatingMenu .resolution-list-item+.resolution-list-item {
            border-top: 1px solid var(--app-floating-separator) !important;
        }

        #resolutionFloatingMenu .resolution-list-item:hover,
        #wrResolutionFloatingMenu .resolution-list-item:hover,
        #wrFileFormatFloatingMenu .resolution-list-item:hover {
            background: var(--app-floating-item-hover) !important;
            transform: none !important;
        }

        #resolutionFloatingMenu .resolution-list-item:focus-visible,
        #wrResolutionFloatingMenu .resolution-list-item:focus-visible,
        #wrFileFormatFloatingMenu .resolution-list-item:focus-visible {
            outline: none;
            background: var(--app-hover-bg-strong) !important;
        }

        #resolutionFloatingMenu .resolution-list-item.active,
        #wrResolutionFloatingMenu .resolution-list-item.active,
        #wrFileFormatFloatingMenu .resolution-list-item.active {
            background: var(--app-floating-item-active) !important;
            border: 0 !important;
            box-shadow: none !important;
        }

        #resolutionFloatingMenu .resolution-list-label,
        #wrResolutionFloatingMenu .resolution-list-label,
        #wrFileFormatFloatingMenu .resolution-list-label {
            color: var(--app-floating-label) !important;
            font-size: 13px !important;
            font-weight: 600 !important;
            line-height: 1.1;
        }

        #aspectRatioFloatingMenu,
        #wrDimensionsFloatingMenu {
            box-shadow: none !important;
        }

        #aspectRatioFloatingMenu .aspect-ratio-list-item,
        #wrDimensionsFloatingMenu .aspect-ratio-list-item {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 8px 10px !important;
            border: 0 !important;
            border-radius: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
            text-align: left;
            transform: none !important;
        }

        #aspectRatioFloatingMenu .aspect-ratio-list-item+.aspect-ratio-list-item,
        #wrDimensionsFloatingMenu .aspect-ratio-list-item+.aspect-ratio-list-item {
            border-top: 1px solid var(--app-floating-separator) !important;
        }

        #aspectRatioFloatingMenu .aspect-ratio-list-item:hover,
        #wrDimensionsFloatingMenu .aspect-ratio-list-item:hover {
            background: var(--app-floating-item-hover) !important;
            transform: none !important;
        }

        #aspectRatioFloatingMenu .aspect-ratio-list-item:focus-visible,
        #wrDimensionsFloatingMenu .aspect-ratio-list-item:focus-visible {
            outline: none;
            background: var(--app-hover-bg-strong) !important;
        }

        #aspectRatioFloatingMenu .aspect-ratio-list-item span,
        #wrDimensionsFloatingMenu .aspect-ratio-list-item span {
            color: var(--app-floating-label) !important;
            font-size: 13px !important;
            font-weight: 500 !important;
            line-height: 1.1;
        }

        @media (max-width: 640px) {
            .inspiration-info-modal-card {
                padding: 12px !important;
                width: calc(100vw - 16px) !important;
                max-width: calc(100vw - 16px) !important;
                max-height: calc(100dvh - 16px) !important;
            }

            .inspiration-info-modal-card h3 {
                font-size: 17px;
            }

            .inspiration-info-example.scene-mode-option {
                padding: 8px;
            }

            .inspiration-info-footer {
                grid-template-columns: 1fr;
                align-items: stretch;
            }

            .inspiration-info-remember,
            .inspiration-info-footer .btn-primary {
                width: 100%;
                justify-self: stretch;
            }
        }

        #aspectRatioFloatingMenu .aspect-ratio-list-item.active,
        #wrDimensionsFloatingMenu .aspect-ratio-list-item.active {
            background: var(--app-floating-item-active) !important;
            border: 0 !important;
            box-shadow: none !important;
        }

        #aspectRatioFloatingMenu .aspect-ratio-list-item.active span,
        #wrDimensionsFloatingMenu .aspect-ratio-list-item.active span {
            color: var(--app-floating-label) !important;
            font-weight: 600 !important;
        }

        #aspectRatioFloatingMenu .aspect-ratio-list-shape,
        #wrDimensionsFloatingMenu .aspect-ratio-list-shape {
            flex-shrink: 0;
            border-color: rgba(100, 116, 139, 0.72) !important;
        }

        #aspectRatioFloatingMenu .aspect-ratio-list-item.active .aspect-ratio-list-shape,
        #wrDimensionsFloatingMenu .aspect-ratio-list-item.active .aspect-ratio-list-shape {
            border-color: rgba(17, 24, 39, 0.9) !important;
        }

        #aiLoading .animate-progress {
            background: linear-gradient(90deg, rgba(148, 163, 184, 0.82), rgba(226, 232, 240, 0.98), rgba(148, 163, 184, 0.82)) !important;
            background-size: 200% 100% !important;
        }

        /* Loading animations */
        @keyframes shimmer {
            0% {
                transform: translateX(-100%);
            }

            100% {
                transform: translateX(100%);
            }
        }

        @keyframes progress {
            0% {
                background-position: 0% 50%;
            }

            100% {
                background-position: 200% 50%;
            }
        }

        @keyframes workflowPulse {

            0%,
            100% {
                transform: scale(1);
                opacity: 1;
            }

            50% {
                transform: scale(1.15);
                opacity: 0.72;
            }
        }

        .animate-shimmer {
            animation: shimmer 2s infinite;
        }

        .animate-progress {
            animation: progress 1.5s linear infinite;
        }

        .app-viewcube-wrapper {
            position: absolute;
            top: 16px;
            width: 116px;
            height: 116px;
            z-index: 15;
            pointer-events: none;
            opacity: 0;
            transform: translateY(-4px);
            transition: opacity 160ms ease, transform 160ms ease;
            padding: 6px;

        }

        .app-viewcube-wrapper.is-visible {
            opacity: 0.8;
            transform: translateY(0);
        }

        .app-viewcube-canvas {
            display: block;
            width: 104px;
            height: 104px;
            margin: 0 auto;
            pointer-events: auto;
            touch-action: none;
            border-radius: 12px;
        }

        .viewer-toast {
            background: rgba(31, 41, 55, 0.82) !important;
            box-shadow: var(--app-shadow-float);
        }

        .pb-safe {
            padding-bottom: env(safe-area-inset-bottom, 0px);
        }

        @media (max-width: 767px) {
            body {
                height: auto !important;
                overflow-x: hidden !important;
                overflow-y: auto !important;
            }

            .app-nav {
                margin: 12px 12px 0;
                display: flex;
                flex-wrap: nowrap !important;
                align-items: center;
                gap: 8px;
                padding: 12px 12px !important;
            }

            .app-nav-status-anchor {
                display: none !important;
            }

            .app-shell {
                flex: none;
                overflow: visible !important;
            }

            .workflow-status-shell {
                padding: 10px 12px;
                gap: 10px;
            }

            .workflow-status-text {
                font-size: 14px;
            }

            .app-shell {
                padding: 10px 12px 12px;
            }

            .app-workspace {
                min-height: clamp(28rem, 68svh, 42rem);
            }

            .app-sidebar {
                height: auto !important;
                min-height: 0;
            }

            .app-sidebar-scroll {
                flex: none;
                overflow: visible !important;
                max-height: none;
            }

            .app-workspace::after {
                inset: 12px;
            }

            #viewerStage {
                min-height: clamp(25rem, 64svh, 38rem);
                padding-bottom: 48px;
            }

            #viewerStage::before {
                inset: 1rem 1rem 5.25rem;
            }

            #viewerFrame {
                width: 100%;
                height: min(64svh, 34rem);
                min-height: 24rem;
            }

            .empty-state-content {
                max-width: 16.5rem;
                padding: 24px;
            }

            .empty-state-orb {
                width: 4.25rem;
                height: 4.25rem;
                margin-bottom: 14px;
            }

            .empty-state-orb>.material-symbols-outlined {
                font-size: 34px !important;
            }

            .empty-state-kicker {
                font-size: 11px;
                letter-spacing: 0.11em;
            }

            #empty-state h3 {
                margin-top: 14px !important;
                margin-bottom: 8px !important;
                font-size: 22px !important;
            }

            #empty-state p {
                margin-bottom: 16px !important;
                font-size: 15px;
                line-height: 1.6;
            }

            #empty-state button {
                padding: 12px 20px !important;
            }
        }

        /* ── Global theme overrides for floating menus and inline Tailwind classes ── */

        /* Floating menu containers */
        [id$="FloatingMenu"],
        [id$="floatingMenu"] {
            background: var(--app-sidebar-bg) !important;
            border-color: var(--app-border) !important;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            box-shadow: var(--app-shadow-float) !important;
        }

        /* ── Floating menu inner text/bg overrides ── */

        /* Titles inside floating menus (text-gray-700) */
        [id$="FloatingMenu"] .scene-reference-title,
        [id$="FloatingMenu"] .text-sm.font-semibold,
        [id$="floatingMenu"] .scene-reference-title,
        [id$="floatingMenu"] .text-sm.font-semibold {
            color: var(--app-text) !important;
        }

        /* Descriptions inside floating menus (text-gray-500) */
        [id$="FloatingMenu"] .scene-reference-description,
        [id$="FloatingMenu"] .text-gray-500,
        [id$="floatingMenu"] .scene-reference-description,
        [id$="floatingMenu"] .text-gray-500 {
            color: var(--app-muted) !important;
        }

        /* Placeholders & small text inside floating menus */
        [id$="FloatingMenu"] .text-gray-400,
        [id$="FloatingMenu"] .text-gray-300,
        [id$="floatingMenu"] .text-gray-400,
        [id$="floatingMenu"] .text-gray-300,
        [id$="FloatingMenu"] [data-reference-role="placeholder-text"],
        [id$="floatingMenu"] [data-reference-role="placeholder-text"] {
            color: var(--app-muted) !important;
        }

        /* Labels (text-gray-700 inside floating menus) */
        [id$="FloatingMenu"] .text-gray-700,
        [id$="floatingMenu"] .text-gray-700,
        [id$="FloatingMenu"] label,
        [id$="floatingMenu"] label {
            color: var(--app-text) !important;
        }

        /* Upload areas inside floating menus */
        [id$="FloatingMenu"] .border-dashed,
        [id$="floatingMenu"] .border-dashed {
            border-color: var(--app-border-strong) !important;
        }
        [id$="FloatingMenu"] .border-dashed:hover,
        [id$="floatingMenu"] .border-dashed:hover {
            border-color: var(--app-accent) !important;
        }

        /* Summary/context boxes inside floating menus (bg-gray-50) */
        [id$="FloatingMenu"] .bg-gray-50,
        [id$="floatingMenu"] .bg-gray-50,
        [id$="FloatingMenu"] [data-reference-role="asset-context-summary"],
        [id$="floatingMenu"] [data-reference-role="asset-context-summary"] {
            background: var(--app-surface-soft) !important;
            border-color: var(--app-border) !important;
        }

        /* Inner borders (border-gray-200) */
        [id$="FloatingMenu"] .border-gray-200,
        [id$="floatingMenu"] .border-gray-200 {
            border-color: var(--app-border) !important;
        }

        /* Icon colors inside floating menus */
        [id$="FloatingMenu"] .material-symbols-outlined.text-gray-300,
        [id$="floatingMenu"] .material-symbols-outlined.text-gray-300,
        [id$="FloatingMenu"] .material-symbols-outlined.text-xl,
        [id$="floatingMenu"] .material-symbols-outlined.text-xl {
            color: var(--app-muted) !important;
        }

        /* Scene reference note/toggle text */
        [id$="FloatingMenu"] .scene-reference-toggle-copy,
        [id$="floatingMenu"] .scene-reference-toggle-copy {
            color: var(--app-muted) !important;
        }

        /* ── Trigger buttons (sidebar dropdown-like buttons) ── */
        [id$="TriggerBtn"],
        [id$="triggerBtn"] {
            background: var(--app-option-bg) !important;
            border-color: var(--app-border) !important;
            color: var(--app-text) !important;
        }
        [id$="TriggerBtn"]:hover,
        [id$="triggerBtn"]:hover {
            background: var(--app-option-hover) !important;
            border-color: var(--app-border-strong) !important;
        }
        [id$="TriggerBtn"] .text-gray-400,
        [id$="triggerBtn"] .text-gray-400,
        [id$="TriggerBtn"] .font-semibold,
        [id$="triggerBtn"] .font-semibold {
            color: var(--app-muted) !important;
        }
        [id$="TriggerBtn"]:hover .text-gray-400,
        [id$="triggerBtn"]:hover .text-gray-400,
        [id$="TriggerBtn"]:hover .font-semibold,
        [id$="triggerBtn"]:hover .font-semibold {
            color: var(--app-text) !important;
        }
        [id$="TriggerBtn"] .font-bold,
        [id$="triggerBtn"] .font-bold {
            color: var(--app-text) !important;
        }
        [id$="TriggerBtn"] .material-symbols-outlined,
        [id$="triggerBtn"] .material-symbols-outlined {
            color: var(--app-muted) !important;
        }

        /* Conversion overlay */
        .app-workspace [class*="bg-white\\/80"],
        .app-workspace [class*="bg-white\\/70"] {
            background: var(--app-panel-accent) !important;
        }

        /* Floating controls bar */
        #floating-controls {
            background: transparent !important;
            border-color: transparent !important;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }

/* Vectary Type Overrides — Apple HIG sidebar scale */
.app-sidebar :not(.material-symbols-outlined) { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, 'Inter', sans-serif !important; }
.app-sidebar .editor-accordion-btn .text-xs, .app-sidebar .app-card h3 { font-size: 14px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: -0.01em !important; color: var(--app-vectary-heading) !important; margin-bottom: 4px !important; }
.app-sidebar p:not([id$="FloatingMenu"] *):not([id$="floatingMenu"] *), .app-sidebar label:not([id$="FloatingMenu"] *):not([id$="floatingMenu"] *), .app-sidebar span:not(.material-symbols-outlined):not([id$="FloatingMenu"] *):not([id$="floatingMenu"] *) { font-size: 13px !important; color: var(--app-vectary-text) !important; line-height: 1.47 !important; }
.app-sidebar .text-gray-400:not([id$="FloatingMenu"] *):not([id$="floatingMenu"] *), .app-sidebar .text-gray-500:not([id$="FloatingMenu"] *):not([id$="floatingMenu"] *), .app-sidebar .text-gray-600:not([id$="FloatingMenu"] *):not([id$="floatingMenu"] *) { color: var(--app-vectary-text) !important; }

/* Minimal macOS-style sidebar refresh */
.app-sidebar #aiRenderSidebar > :not([hidden]) ~ :not([hidden]),
.app-sidebar #webRenderSidebar > :not([hidden]) ~ :not([hidden]),
.app-sidebar #editorSidebar > :not([hidden]) ~ :not([hidden]) {
    margin-top: 6px !important;
}

.app-sidebar .app-card {
    padding: 2px 0 4px;
}

.app-sidebar .app-card:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.app-sidebar #aiRenderSidebar > .app-card {
    padding: 0 !important;
    border-bottom: none !important;
}

.app-sidebar #aiRenderSidebar > .app-card > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0 !important;
}

.app-sidebar .editor-accordion-content {
    margin-top: 8px;
    padding: 0 2px;
}

.app-sidebar #aiRenderSidebar .editor-accordion-content.space-y-2 > :not([hidden]) ~ :not([hidden]),
.app-sidebar #aiRenderSidebar .editor-accordion-content.space-y-3 > :not([hidden]) ~ :not([hidden]),
.app-sidebar #aiRenderSidebar .scene-reference-section.space-y-2 > :not([hidden]) ~ :not([hidden]),
.app-sidebar #aiRenderSidebar .scene-reference-section.space-y-3 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 10px !important;
}

.app-sidebar .sidebar-nav-button,
.app-sidebar .editor-accordion-btn[data-sidebar-tint] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 36px;
    padding: 6px 10px !important;
    border: 1px solid var(--app-line-soft) !important;
    border-radius: 8px;
    background: var(--app-option-bg) !important;
    box-shadow: none !important;
    text-align: left;
}

.app-sidebar .sidebar-nav-stack {
    margin-top: 6px;
    border: 1px solid var(--app-line-soft);
    border-radius: 8px;
    overflow: hidden;
    background: var(--app-option-bg);
}

.app-sidebar .sidebar-nav-stack > .group,
.app-sidebar .sidebar-nav-stack > #resolutionSection {
    margin-top: 0 !important;
}

.app-sidebar .sidebar-nav-stack > * + * .sidebar-nav-button,
.app-sidebar .sidebar-nav-stack > * + * .sidebar-nav-summary {
    margin-top: 0;
    border-top: 1px solid var(--app-line-soft) !important;
}

.app-sidebar .sidebar-nav-stack > * .sidebar-nav-button {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.app-sidebar .sidebar-nav-stack > *:first-child .sidebar-nav-button,
.app-sidebar .sidebar-nav-stack > *:first-child .sidebar-nav-summary {
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}

.app-sidebar .sidebar-nav-stack > *:last-child .sidebar-nav-button,
.app-sidebar .sidebar-nav-stack > *:last-child .sidebar-nav-summary {
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

.app-sidebar .sidebar-nav-summary {
    padding: 10px 14px;
    background: transparent;
    border: 0;
}

.app-sidebar .sidebar-nav-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.app-sidebar .sidebar-nav-summary-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--app-text) !important;
    line-height: 1.2 !important;
}

.app-sidebar .sidebar-nav-summary-value {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--app-text) !important;
    line-height: 1.2 !important;
    white-space: nowrap;
}

.app-sidebar .sidebar-nav-button:hover,
.app-sidebar .editor-accordion-btn[data-sidebar-tint]:hover {
    background: var(--app-hover-bg) !important;
    border-color: var(--app-border-strong) !important;
    transform: none;
}

@keyframes aiModelSelectorAttention {
    0% {
        background: rgba(79, 70, 229, 0.18);
        box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.42);
        border-color: rgba(79, 70, 229, 0.72);
    }
    45% {
        background: rgba(79, 70, 229, 0.11);
        box-shadow: 0 0 0 7px rgba(79, 70, 229, 0.12);
        border-color: rgba(79, 70, 229, 0.9);
    }
    100% {
        background: var(--app-option-bg);
        box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
        border-color: var(--app-line-soft);
    }
}

.app-sidebar .sidebar-nav-button.ai-model-needs-attention {
    animation: aiModelSelectorAttention 0.72s ease-out 3;
}

.app-sidebar .sidebar-nav-button.scene-model-needs-attention {
    animation: aiModelSelectorAttention 0.72s ease-out 3;
    border-color: #dc2626 !important;
}

.app-sidebar .sidebar-nav-button.scene-model-missing::after,
.app-sidebar .sidebar-nav-button.scene-model-selected::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 32px;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    border: 2px solid var(--app-option-bg);
    transform: translateY(-50%);
    z-index: 2;
}

.app-sidebar .sidebar-nav-button.scene-model-missing::after {
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.48);
    animation: aiModelNotificationDot 1.18s ease-out infinite;
}

.app-sidebar .sidebar-nav-button.scene-model-selected::after {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14);
}

.app-sidebar .sidebar-nav-button.scene-model-missing.scene-model-needs-attention::after {
    width: 11px;
    height: 11px;
    background: #dc2626;
    animation: aiModelNotificationDotUrgent 0.54s ease-out infinite;
}

.app-sidebar .sidebar-nav-button.scene-model-missing .sidebar-nav-label,
.app-sidebar .sidebar-nav-button.scene-model-missing .sidebar-nav-separator,
.app-sidebar .sidebar-nav-button.scene-model-missing .sidebar-nav-value,
.app-sidebar .sidebar-nav-button.scene-model-missing .sidebar-nav-icon,
.app-sidebar .sidebar-nav-button.scene-model-missing .sidebar-nav-chevron {
    color: #dc2626 !important;
}

.app-sidebar .sidebar-nav-button.scene-model-selected .sidebar-nav-label,
.app-sidebar .sidebar-nav-button.scene-model-selected .sidebar-nav-separator,
.app-sidebar .sidebar-nav-button.scene-model-selected .sidebar-nav-value,
.app-sidebar .sidebar-nav-button.scene-model-selected .sidebar-nav-icon,
.app-sidebar .sidebar-nav-button.scene-model-selected .sidebar-nav-chevron {
    color: #16a34a !important;
}

.app-sidebar #sceneObjectsContainer.scene-model-needs-attention #modelUploadArea {
    border-color: #dc2626 !important;
    background: rgba(239, 68, 68, 0.08) !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12);
}

.app-sidebar .workflow-select-status {
    min-height: 36px;
    gap: 8px;
    padding-right: 42px !important;
}

.app-sidebar .workflow-select-status .sidebar-nav-copy {
    flex: 1;
    justify-content: flex-start;
    text-align: left;
}

.app-sidebar .workflow-select-status .sidebar-nav-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-sidebar .workflow-select-status.workflow-needs-attention,
.app-sidebar #workflowPromptStack.workflow-needs-attention {
    animation: aiModelSelectorAttention 0.72s ease-out 3;
    border-color: #dc2626 !important;
}

.app-sidebar .workflow-select-status.workflow-missing::after,
.app-sidebar .workflow-select-status.workflow-pending::after,
.app-sidebar .workflow-select-status.workflow-selected::after,
.app-sidebar .sidebar-nav-button.workflow-option-pending::after,
.app-sidebar .sidebar-nav-button.workflow-option-selected::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 32px;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    border: 2px solid var(--app-option-bg);
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none;
}

.app-sidebar .workflow-select-status.workflow-missing::after {
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.48);
    animation: aiModelNotificationDot 1.18s ease-out infinite;
}

.app-sidebar .workflow-select-status.workflow-pending::after,
.app-sidebar .sidebar-nav-button.workflow-option-pending::after {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.16);
}

.app-sidebar .workflow-select-status.workflow-selected::after,
.app-sidebar .sidebar-nav-button.workflow-option-selected::after {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14);
}

.app-sidebar .workflow-select-status.workflow-missing .sidebar-nav-label,
.app-sidebar .workflow-select-status.workflow-missing .sidebar-nav-icon {
    color: #dc2626 !important;
}

.app-sidebar .workflow-select-status.workflow-pending .sidebar-nav-label,
.app-sidebar .workflow-select-status.workflow-pending .sidebar-nav-icon {
    color: #d97706 !important;
}

.app-sidebar .workflow-select-status.workflow-selected .sidebar-nav-label,
.app-sidebar .workflow-select-status.workflow-selected .sidebar-nav-icon {
    color: #16a34a !important;
}

.app-sidebar .scene-prompt-needs-attention {
    border-color: var(--app-selected-border) !important;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.16);
}

.app-sidebar #workflowPromptStack.scene-prompt-needs-attention {
    background: rgba(34, 211, 238, 0.08);
}

.app-sidebar .sidebar-nav-button.ai-model-unselected::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 32px;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #ef4444;
    border: 2px solid var(--app-option-bg);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.48);
    animation: aiModelNotificationDot 1.18s ease-out infinite;
    z-index: 2;
}

.app-sidebar .sidebar-nav-button.ai-model-unselected.ai-model-needs-attention::after {
    width: 11px;
    height: 11px;
    background: #dc2626;
    animation: aiModelNotificationDotUrgent 0.54s ease-out infinite;
}

.app-sidebar .sidebar-nav-button.ai-model-selected::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 32px;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #22c55e;
    border: 2px solid var(--app-option-bg);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14);
    transform: translateY(-50%);
    z-index: 2;
}

.app-sidebar .sidebar-nav-button.ai-model-unselected .sidebar-nav-label,
.app-sidebar .sidebar-nav-button.ai-model-unselected .sidebar-nav-separator,
.app-sidebar .sidebar-nav-button.ai-model-unselected .sidebar-nav-value,
.app-sidebar .sidebar-nav-button.ai-model-unselected .sidebar-nav-icon,
.app-sidebar .sidebar-nav-button.ai-model-unselected .sidebar-nav-chevron {
    color: #dc2626 !important;
}

.app-sidebar .sidebar-nav-button.ai-model-unselected #aiModelSectionTitle,
.app-sidebar .sidebar-nav-button.ai-model-unselected #aiModelSectionTitle + .sidebar-nav-separator {
    display: none;
}

.app-sidebar .sidebar-nav-button.ai-model-needs-attention .sidebar-nav-value,
.app-sidebar .sidebar-nav-button.ai-model-needs-attention .sidebar-nav-icon,
.app-sidebar .sidebar-nav-button.ai-model-needs-attention .sidebar-nav-chevron {
    color: #b91c1c !important;
}

@keyframes aiModelNotificationDot {
    0% {
        transform: translateY(-50%) scale(0.9);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
    }
    70% {
        transform: translateY(-50%) scale(1.08);
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    }
    100% {
        transform: translateY(-50%) scale(0.9);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

@keyframes aiModelNotificationDotUrgent {
    0%, 100% {
        transform: translateY(-50%) scale(1);
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6);
    }
    40% {
        transform: translateY(-50%) scale(1.2);
        box-shadow: 0 0 0 9px rgba(220, 38, 38, 0);
    }
}

.app-sidebar .sidebar-nav-button > :not(.sidebar-nav-icon):not(.sidebar-nav-chevron),
.app-sidebar .editor-accordion-btn > :not(.sidebar-nav-icon):not(.accordion-chevron):not(.sidebar-nav-chevron) {
    min-width: 0;
    flex: 1;
}

.app-sidebar .sidebar-nav-copy {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    column-gap: 4px;
    min-width: 0;
    overflow: hidden;
}

.app-sidebar .sidebar-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 auto;
    border-radius: 8px;
    font-size: 15px !important;
    line-height: 1;
    color: var(--sidebar-icon-fg, var(--app-text)) !important;
}

.app-sidebar [data-sidebar-tint="blue"] {
    --sidebar-icon-bg: rgba(37, 99, 235, 0.14);
    --sidebar-icon-fg: #2563eb;
    --sidebar-icon-border: rgba(37, 99, 235, 0.22);
}

.app-sidebar [data-sidebar-tint="amber"] {
    --sidebar-icon-bg: rgba(245, 158, 11, 0.16);
    --sidebar-icon-fg: #d97706;
    --sidebar-icon-border: rgba(245, 158, 11, 0.22);
}

.app-sidebar [data-sidebar-tint="green"] {
    --sidebar-icon-bg: rgba(22, 163, 74, 0.14);
    --sidebar-icon-fg: #15803d;
    --sidebar-icon-border: rgba(22, 163, 74, 0.22);
}

.app-sidebar [data-sidebar-tint="cyan"] {
    --sidebar-icon-bg: rgba(8, 145, 178, 0.14);
    --sidebar-icon-fg: #0f766e;
    --sidebar-icon-border: rgba(13, 148, 136, 0.22);
}

.app-sidebar [data-sidebar-tint="purple"] {
    --sidebar-icon-bg: rgba(124, 58, 237, 0.14);
    --sidebar-icon-fg: #7c3aed;
    --sidebar-icon-border: rgba(124, 58, 237, 0.22);
}

.app-sidebar [data-sidebar-tint="pink"] {
    --sidebar-icon-bg: rgba(219, 39, 119, 0.14);
    --sidebar-icon-fg: #db2777;
    --sidebar-icon-border: rgba(219, 39, 119, 0.22);
}

.app-sidebar [data-sidebar-tint="orange"] {
    --sidebar-icon-bg: rgba(234, 88, 12, 0.14);
    --sidebar-icon-fg: #ea580c;
    --sidebar-icon-border: rgba(234, 88, 12, 0.22);
}

.app-sidebar [data-sidebar-tint="indigo"] {
    --sidebar-icon-bg: rgba(79, 70, 229, 0.14);
    --sidebar-icon-fg: #4338ca;
    --sidebar-icon-border: rgba(79, 70, 229, 0.22);
}

.app-sidebar [data-sidebar-tint="slate"] {
    --sidebar-icon-bg: rgba(71, 85, 105, 0.14);
    --sidebar-icon-fg: #334155;
    --sidebar-icon-border: rgba(71, 85, 105, 0.22);
}

.app-sidebar .sidebar-nav-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--app-text) !important;
    line-height: 1.33 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-sidebar .sidebar-nav-separator,
.app-sidebar .sidebar-nav-value {
    font-size: 12px !important;
    line-height: 1.33 !important;
    white-space: nowrap;
}

.app-sidebar .sidebar-nav-separator {
    font-weight: 600 !important;
    color: var(--app-muted) !important;
}

.app-sidebar .sidebar-nav-value {
    font-weight: 700 !important;
    color: var(--app-muted) !important;
}

.app-sidebar .sidebar-nav-chevron,
.app-sidebar .editor-accordion-btn .accordion-chevron {
    margin-left: auto;
    color: var(--app-muted) !important;
    font-size: 16px !important;
}

.app-sidebar .sidebar-nav-button.is-active,
.app-sidebar .sidebar-nav-button.is-selected {
    background: var(--app-selected-bg) !important;
    border-color: var(--app-border-strong) !important;
    box-shadow: none !important;
}

.app-sidebar .sidebar-nav-button.is-active .sidebar-nav-label,
.app-sidebar .sidebar-nav-button.is-active .sidebar-nav-separator,
.app-sidebar .sidebar-nav-button.is-active .sidebar-nav-value,
.app-sidebar .sidebar-nav-button.is-active .sidebar-nav-chevron,
.app-sidebar .sidebar-nav-button.is-selected .sidebar-nav-label,
.app-sidebar .sidebar-nav-button.is-selected .sidebar-nav-separator,
.app-sidebar .sidebar-nav-button.is-selected .sidebar-nav-value,
.app-sidebar .sidebar-nav-button.is-selected .sidebar-nav-chevron {
    color: var(--app-text) !important;
}

.app-sidebar .sidebar-nav-button.is-active .sidebar-nav-icon,
.app-sidebar .sidebar-nav-button.is-selected .sidebar-nav-icon {
    color: var(--app-accent) !important;
}

.app-sidebar .editor-accordion-btn[data-sidebar-tint].open {
    background: var(--app-selected-bg) !important;
    border-color: var(--app-border-strong) !important;
    box-shadow: none !important;
}

.app-sidebar .editor-accordion-btn[data-sidebar-tint].open .accordion-chevron {
    color: var(--app-accent) !important;
}

.app-sidebar .editor-accordion-btn > span:not(.sidebar-nav-icon):not(.accordion-chevron),
.app-sidebar .editor-accordion-btn > div > div:first-child,
.app-sidebar .editor-accordion-btn label {
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    color: var(--app-text) !important;
    line-height: 1.33 !important;
}

.app-sidebar .editor-accordion-btn > div > p {
    display: none !important;
}

.app-sidebar #webRenderCreditCost,
.app-sidebar #scenePromptModeBadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 5px;
    border: 1px solid var(--app-border);
    background: var(--app-surface-soft);
    color: var(--app-muted) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.33 !important;
    letter-spacing: -0.01em;
}

.app-sidebar-footer #generateBtnText {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--app-cta-text) !important;
    -webkit-text-fill-color: var(--app-cta-text) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
}

.active-workflow-inspector {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, 0.34);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: var(--app-shadow-glass);
    color: var(--app-muted);
}

.active-workflow-inspector-header,
.active-workflow-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.active-workflow-inspector-title,
.active-workflow-row span {
    color: var(--app-muted);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0;
}

.active-workflow-code,
.active-workflow-row strong {
    min-width: 0;
    max-width: 62%;
    color: var(--app-text);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.active-workflow-code {
    padding: 3px 7px;
    border: 1px solid rgba(34, 211, 238, 0.42);
    border-radius: 999px;
    background: rgba(236, 254, 255, 0.74);
    color: #0e7490;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    letter-spacing: 0;
}

.app-sidebar-footer #generateBtn {
    min-height: 72px !important;
    padding: 0 62px 0 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.app-sidebar-footer #generateBtnIcon {
    color: var(--app-cta-text) !important;
    font-size: 19px !important;
}

.app-sidebar-footer #generateBtn.generate-readiness-ready {
    border-color: rgba(34, 197, 94, 0.7) !important;
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.24), 0 0 28px rgba(34, 197, 94, 0.26), var(--app-cta-shadow, 0 12px 26px rgba(0, 0, 0, 0.22)) !important;
    filter: brightness(1.08);
}

.app-sidebar-footer #generateBtn .generate-readiness-lights {
    position: absolute;
    top: 50%;
    right: 20px;
    display: none;
    align-items: center;
    gap: 6px;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none;
}

.app-sidebar-footer #generateBtn.generate-readiness-active .generate-readiness-lights {
    display: inline-flex;
}

.app-sidebar-footer #generateBtn .generate-readiness-light {
    width: 11px;
    height: 11px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.72);
    background: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
    animation: none;
}

.app-sidebar-footer #generateBtn .generate-readiness-light.is-missing {
    width: 11px;
    height: 11px;
}

.app-sidebar-footer #generateBtn .generate-readiness-light.is-pending {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
    animation: none;
}

.app-sidebar-footer #generateBtn .generate-readiness-light.is-ready {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
    animation: none;
}

.app-sidebar-footer #generateBtn.generate-readiness-ready .generate-readiness-light.is-ready {
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.24), 0 0 12px rgba(34, 197, 94, 0.68);
}

@media (max-width: 767px) {
    .app-sidebar .sidebar-nav-button,
    .app-sidebar .editor-accordion-btn[data-sidebar-tint] {
        min-height: 2.2rem;
        padding: 4px 6px !important;
        gap: 8px;
    }

    .app-sidebar .sidebar-nav-icon {
        width: 1.42rem;
        height: 1.42rem;
        border-radius: 8px;
    }

    .app-sidebar .sidebar-nav-summary {
        padding: 10px 14px;
    }
}

/* ── Mobile Nav: tabs on second row ── */
@media (max-width: 767px) {
    .app-nav {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "brand actions"
            "tabs tabs";
        align-items: center;
        column-gap: 12px;
        row-gap: 12px;
        flex-wrap: unset !important;
        padding: 14px !important;
    }

    .app-logo-slot {
        grid-area: brand;
        order: unset !important;
        width: auto !important;
        height: auto !important;
        min-width: 0;
        margin-left: 0 !important;
        overflow: visible;
    }

    .app-logo {
        width: auto !important;
        height: 42px !important;
        min-width: 0;
    }

    .app-logo-nav-media {
        display: none !important;
    }

    .app-logo-mobile-mark {
        display: inline-flex;
    }

    #userSection {
        grid-area: actions;
        order: unset !important;
        margin-left: 0 !important;
        justify-self: end;
        align-self: center;
        gap: 10px !important;
        min-width: 0;
    }

    #loggedOutUI,
    #loggedInUI {
        gap: 10px !important;
    }

    .theme-toggle-btn,
    .notification-btn,
    #userMenuBtn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px;
        border-radius: 14px !important;
    }

    #userMenuBtn {
        padding: 0 !important;
        justify-content: center !important;
        gap: 0 !important;
    }

    .credit-badge {
        min-height: 44px;
        padding: 0 14px !important;
        border-radius: 16px !important;
        font-size: 14px !important;
        gap: 8px !important;
    }

    .credit-badge .material-symbols-outlined,
    .notification-btn .material-symbols-outlined,
    #userMenuBtn .material-symbols-outlined,
    .theme-toggle-btn .material-symbols-outlined {
        transform: none;
    }

    .modesToggle.actionTab_wrapper {
        grid-area: tabs;
        position: static !important;
        transform: none !important;
        order: unset !important;
        flex: none !important;
        display: flex !important;
        justify-content: flex-start !important;
        width: 100%;
        margin-top: 0;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 2px;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .modesToggle.actionTab_wrapper::-webkit-scrollbar {
        display: none;
    }

    .modesToggle .actionTab.actionTab_switch {
        width: max-content;
        min-width: 100%;
    }

    .modesToggle .actionTab .mode-tab-btn {
        display: grid !important;
        flex: 0 0 max(108px, calc((100vw - 72px) / 3)) !important;
        min-width: max(108px, calc((100vw - 72px) / 3));
        grid-template-rows: minmax(2.2rem, auto) 2.15rem;
        align-content: start !important;
        justify-items: center !important;
        justify-content: stretch !important;
        row-gap: 2px;
        min-height: 104px;
        padding: 12px 14px 8px !important;
    }

    .modesToggle .actionTab .mode-tab-btn .text_comp-header {
        min-height: 2.2rem;
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        text-align: center;
    }

    .modesToggle .actionTab .mode-tab-btn .text_comp-header label {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        width: 100%;
        max-width: 100%;
    }

    .modesToggle .actionTab .mode-tab-btn .text_comp-header span {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.15;
        text-wrap: balance;
        white-space: normal !important;
        text-align: center;
    }

    .modesToggle .actionTab .mode-tab-btn > div:last-child {
        min-height: 2.15rem;
        width: 100%;
        margin-top: 0;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        font-size: 10px !important;
        text-align: center;
        white-space: normal;
        line-height: 1.2;
    }

}

@media (max-width: 374px) {
    .app-nav {
        column-gap: 10px;
        row-gap: 10px;
        padding: 12px !important;
    }

    .app-logo {
        height: 38px !important;
    }

    .app-logo-mobile-icon {
        width: 38px;
        height: 38px;
    }

    .app-logo-mobile-text {
        font-size: 15px;
    }

    #userSection,
    #loggedOutUI,
    #loggedInUI {
        gap: 8px !important;
    }

    .credit-badge {
        padding: 0 12px !important;
        font-size: 13px !important;
    }
}

/* Light theme: pure black CTA buttons with white text */
:root:not([data-theme="dark"]) #appLoginBtn,
:root:not([data-theme="dark"]) #generateBtn,
:root:not([data-theme="dark"]) #uploadModelBtn {
    background: #000 !important;
    background-color: #000 !important;
    color: #fff !important;
    border-color: #000 !important;
    -webkit-text-fill-color: #fff !important;
}
:root:not([data-theme="dark"]) #appLoginBtn:hover,
:root:not([data-theme="dark"]) #generateBtn:hover,
:root:not([data-theme="dark"]) #uploadModelBtn:hover {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    color: #fff !important;
    border-color: #1a1a1a !important;
}
:root:not([data-theme="dark"]) #generateBtn #generateBtnText,
:root:not([data-theme="dark"]) #generateBtn span,
:root:not([data-theme="dark"]) #appLoginBtn span,
:root:not([data-theme="dark"]) #uploadModelBtn span {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
:root:not([data-theme="dark"]) #generateBtn .material-symbols-outlined,
:root:not([data-theme="dark"]) #appLoginBtn .material-symbols-outlined,
:root:not([data-theme="dark"]) #uploadModelBtn .material-symbols-outlined {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    filter: none !important;
}

/* All material-symbols inherit their parent color — no colored tints */
.material-symbols-outlined {
    color: inherit;
    -webkit-text-fill-color: currentColor;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    filter: none !important;
}

/* Sidebar nav icons — neutralize colored tints (blue/amber/green/etc.) */
.app-sidebar [data-sidebar-tint] {
    --sidebar-icon-bg: transparent !important;
    --sidebar-icon-fg: var(--app-text) !important;
    --sidebar-icon-border: transparent !important;
}
.app-sidebar .sidebar-nav-icon {
    color: var(--app-text) !important;
    background: transparent !important;
    border-color: transparent !important;
}
.app-sidebar .sidebar-nav-button.is-active .sidebar-nav-icon,
.app-sidebar .sidebar-nav-button.is-selected .sidebar-nav-icon {
    color: var(--app-text) !important;
}

/* Floating controls — runway look (theme-aware) */
:root:not([data-theme="dark"]) #floating-controls > div {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 242, 242, 0.92)) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 28px 100px rgba(12, 12, 12, 0.12) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}
:root:not([data-theme="dark"]) #floating-controls button {
    color: #6b7280 !important;
}
:root:not([data-theme="dark"]) #floating-controls button:hover {
    color: #0c0c0c !important;
    background: rgba(0, 0, 0, 0.04) !important;
}
:root:not([data-theme="dark"]) #floating-controls .w-px {
    background: rgba(0, 0, 0, 0.06) !important;
}

[data-theme="dark"] #floating-controls > div {
    background: linear-gradient(180deg, rgba(24, 24, 24, 0.98), rgba(12, 12, 12, 0.94)) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}
[data-theme="dark"] #floating-controls button {
    color: rgba(255, 255, 255, 0.7) !important;
}
[data-theme="dark"] #floating-controls button:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.08) !important;
}
[data-theme="dark"] #floating-controls .w-px {
    background: rgba(255, 255, 255, 0.12) !important;
}

#floating-controls button .material-symbols-outlined {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

/* ── Multi-Object Items Dark Theme Overrides ── */
[data-theme="dark"] #multiObjectItems .bg-white { background-color: var(--app-workspace-bg) !important; border-color: var(--app-sidebar-border) !important; color: var(--app-text) !important; }
[data-theme="dark"] #multiObjectItems .bg-white:hover { background-color: var(--app-hover-bg) !important; }
[data-theme="dark"] #multiObjectItems .bg-gray-100 { background-color: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.2) !important; color: var(--app-text) !important; }
[data-theme="dark"] #multiObjectItems .bg-gray-200 { background-color: rgba(255, 255, 255, 0.15) !important; color: var(--app-text) !important; }
[data-theme="dark"] #multiObjectItems .text-gray-800, [data-theme="dark"] #multiObjectItems .text-gray-700 { color: var(--app-text) !important; }
[data-theme="dark"] #multiObjectItems .text-gray-500, [data-theme="dark"] #multiObjectItems .text-gray-400 { color: var(--app-muted) !important; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) #multiObjectItems .bg-white { background-color: var(--app-workspace-bg) !important; border-color: var(--app-sidebar-border) !important; color: var(--app-text) !important; }
    :root:not([data-theme="light"]) #multiObjectItems .bg-white:hover { background-color: var(--app-hover-bg) !important; }
    :root:not([data-theme="light"]) #multiObjectItems .bg-gray-100 { background-color: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.2) !important; color: var(--app-text) !important; }
    :root:not([data-theme="light"]) #multiObjectItems .bg-gray-200 { background-color: rgba(255, 255, 255, 0.15) !important; color: var(--app-text) !important; }
    :root:not([data-theme="light"]) #multiObjectItems .text-gray-800, :root:not([data-theme="light"]) #multiObjectItems .text-gray-700 { color: var(--app-text) !important; }
    :root:not([data-theme="light"]) #multiObjectItems .text-gray-500, :root:not([data-theme="light"]) #multiObjectItems .text-gray-400 { color: var(--app-muted) !important; }
}